Tiếp tục phần này, chúng ta sẽ viết code cho file index.php. Đây là file mà nó sẽ làm trang chủ mặc định cho WordPress và thường là ở phần này chúng ta sẽ viết code hiển thị danh sách các post mới nhất trên website.
Bây giờ hãy mở file index.php ra, chúng ta đã có hai đoạn code như như dưới đây mà chúng ta đã chèn vào ở các phần trước.
Điều này có nghĩa là nó sẽ load file header.php ở trên đầu và load nội dung file footer.php ở dưới. Bây giờ chúng ta sẽ muốn viết code hiển thị nội dung ra giữa website thì tất nhiên sẽ viết giữa hai đoạn này.
Trước tiên, chúng ta có đoạn HTML để chia cột phần hiển thị nội dung ra vì chúng ta muốn phần hiển thị post mới nhất nằm bên trái và sidebar nằm bên phải.
[html]
[/html]
Có nghĩa là mình sẽ có class .content dùng để bao bọc xung quanh phần hiển thị nội dung và sidebar. Sau đó, #main-content là khung hiển thị nội dung và #sidebar là khung hiển thị sidebar của website.
Bây giờ ở #main-content, chúng ta viết một đoạn loop [vòng lặp] vào như sau:
Đây là một đoạn loop được dùng để lấy dữ liệu từ post type trên truy vấn ra bên ngoài. Nếu bạn chưa hiểu ý nghĩa của loop và query trong WordPress thì bạn nên tạm dừng 15 phút đọc kỹ bài này, ở đó mình đã giải thích rất kỹ.
Bây giờ ta đã có loop rồi, thì dĩ nhiên chúng ta sẽ tiến hành viết code hiển thị các thành phần của post như tiêu đề, thumbnail,…ra bên ngoài đúng không? Okay, chúng ta bổ sung code vào 2 chỗ trống bên trên như sau:
Hai đoạn mà mình in đậm là hai đoạn mà chúng ta cần viết thêm vào đấy. Thế 2 đoạn get_template_part[] này có ý nghĩa gì đây?
Ngay đoạn số 03, get_template_part[ 'content', get_post_format[] ] nghĩa là nó sẽ load file content-$format.php trong thư mục theme. Cái $format nghĩa là cái tên định danh của từng loại Post Format như video, audio, image,…mà nếu post đó chưa chọn post format thì nó sẽ load file content.php.
Đoạn 06, get_template_part[ 'content', 'none' ] nghĩa là nó sẽ load file content-none.php trong thư mục theme, và file này chúng ta sẽ viết nội dung hiển thị thông báo query này chưa có dữ liệu, ví dụ như nó sẽ báo website này chưa có bài viết chẳng hạn.
Những tập tin content này chúng ta sẽ viết tiếp ở các bài sau. Tiếp tục, ngay bên dưới phần , bạn hãy viết thêm code hiển thị hàm phân trang như sau:
Trông nó thế này:
Bây giờ ta tạo hàm thachpham_pagination[] vào file functions.php nhé:
/** @ Tạo hàm phân trang cho index, archive. @ Hàm này sẽ hiển thị liên kết phân trang theo dạng chữ: Newer Posts & Older Posts @ thachpham_pagination[] **/ if [ ! function_exists[ ‘thachpham_pagination’ ] ] { function thachpham_pagination[] { /* * Không hiển thị phân trang nếu trang đó có ít hơn 2 trang */ if [ $GLOBALS[‘wp_query’]->max_num_pages < 2 ] { return ”; }?>
Thế là xong nội dung file index.php rồi đó. :D
Lời kết
Trong phần này chúng ta đã tìm hiểu qua việc viết code vào file index.php, tìm hiểu công dụng của hàm get_template_part[] để tổ chức cấu trúc theme cho khoa học hơn. Như bạn thấy phần này chúng ta đã dùng hàm này để load file content.php, content-$format.php và content-none.php. Do vậy, ở phần sau chúng ta sẽ tiến hành viết code cho các file content.php này nhé.
thiết kế themevideo hướng dẫnwordpress nâng cao
Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain".
Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.
Hiển thị Code trong bài viết WordPress khi bạn muốn chia sẻ một đoạn Code nào đó. Chúng ta sẽ có 2 cách để thực hiện vấn đề này. Sử dụng chức năng có sẵn của WordPress hoặc sử dụng Plugin hỗ trợ hiển thị Code đẹp mắt.
Ngay bên dưới chúng ta sẽ cùng tìm hiểu 2 cách để viết Code trong bài viết WordPress. Tùy vào nhu cầu và mục đích của mình, bạn hãy lựa chọn phương pháp nào phù hợp nhất dành cho bạn.
Khi bạn lưu hoặc đăng một bài viết nào đó. WordPress sẽ tự động chạy một bộ lọc dọn dẹp để chắc chắn rằng nội dung hiển thị ra bên ngoài không phải là các đoạn Code. Thông thường, khi bạn chia sẻ một đoạn Code nào đó một cách bình thường. WordPress sẽ hiển thị chúng như văn bản và đoạn Code đó sẽ khó nhận diện.
Chính vì vậy, chúng ta sẽ làm nổi bật hiển thị Code trong bài viết. Từ đó người dùng sẽ nhận diện rõ ràng phần Code đó để tham khảo hoặc Copy.
Hiển thị Code trong bài viết WordPress với 2 cách đơn giản
Nếu bạn là người chia sẻ Code hoặc hướng dẫn Code thì việc viết Code trong bài viết sẽ rất thường xuyên. Hoặc đơn giản, bạn có một số bài thủ thuật cần chia sẻ một số đoạn Code thì cũng nên áp dụng hướng dẫn bên dưới để đoạn Code hiển thị đẹp mắt hơn.
Ngay bên dưới chúng ta sẽ có 2 cách để thực hiện vấn đề này. Mời bạn cùng Blog Lại Văn Đức tham khảo.
Phương pháp này được khuyến khích cho các bạn mới và bạn không thường xuyên chia sẻ Code. Phần này chúng ta sẽ không phải cài thêm Plugin làm nặng website của bạn.
Trong khu vực viết bài của WordPress. Bạn hãy tìm kiếm block Code như hình bên dưới.
Hiển thị Code theo cách mặc định của WordPress
Tại đây, bạn hãy Chèn đoạn Code cần chia sẻ như hình bên dưới.
Việc xấu hay đẹp trong việc hiển thị này tùy thuộc vào Theme của bạn. Vì lâu lâu bạn mới chia sẻ vài đoạn Code nên áp dụng cách này sẽ nhanh chóng hơn. Còn nếu bạn thường xuyên chia sẻ và chia sẻ nhiều các đoạn Code thì nên sử dụng Plugin trong hướng dẫn bên dưới.
Hiện tại Blog Lại Văn Đức cũng đang sử dụng cách hiển thị mặc định và có sửa CSS của Theme để cách hiển thị được dễ nhìn hơn.
Đối với phương pháp này, chúng ta sẽ sử dụng một plugin WordPress để hiển thị Code trong các bài đăng trên blog của bạn. Phương pháp này được khuyến nghị cho những người dùng thường xuyên hiển thị Code trong bài viết.
Lợi ích của việc sử dụng Plugin hỗ trợ so với sử dụng cách mặc định bên trên:
- Cho phép bạn dễ dàng hiển thị bất kỳ đoạn Code của bất kỳ ngôn ngữ lập trình nào đó.
- Nó hiển thị Code với đánh dấu cú pháp và số dòng.
- Người dùng có thể dễ dàng nghiên cứu Code và sao chép Code.
Plugin được giới thiệu cho chức năng này là: SyntaxHighlighter Evolved
Đây là Plugin hỗ trợ viết Code trong WordPress được nhiều người sử dụng nhất. Nếu bạn chưa biết cách cài đặt, hãy xem bài viết: Cài đặt Plugin WordPress hướng dẫn chi tiết.
Sau khi cài đặt và kích hoạt Plugin xong. Trong quá trình viết bài, bạn hãy tìm kiếm Block SyntaxHighlighter Code.
Sử dụng Plugin hỗ trợ viết Code trong WordPress
Tiếp theo, bạn hãy chèn đoạn Code cần chia sẻ như hình bên dưới. Tại đây, bạn có thể cấu hình nhanh cho mã nguồn Code hiển thị, tắt số dòng, đánh dấu dòng bạn muốn và tắt tính năng click vào liên kết trong đoạn Code.
Ngoài ra, bạn cũng có thể tùy chỉnh tổng quan của Plugin này bằng cách truy cập Settings » SyntaxHighlighter.
Từ trang cài đặt, bạn có thể chọn chủ đề màu và thay đổi cài đặt SyntaxHighlighter. Bạn có thể lưu cài đặt của mình để xem bản xem trước của cách hiển thị Code trong bài viết ở phía dưới.
Trong trường hợp bạn sử dụng trình soạn thảo cũ. Plugin này cũng vẫn hỗ trợ với tùy chọn viết Code trong thanh điều hướng viết bài rất dễ dàng.
Bài viết này hướng dẫn bạn cách hiển thị Code trong bài viết WordPress. Chúng ta có 2 cách để thực hiện tùy vào mức độ chia sẻ Code của bạn. Nếu bạn không thường xuyên chia sẻ Code, mình khuyên bạn nên áp dụng cách thứ nhất. Nếu bạn là người chia sẻ thường xuyên, cách thứ 2 sẽ làm các đoạn Code của bạn hiển thị chuyên nghiệp hơn.
Cuối cùng, chúc bạn thành công và đừng quên để lại bình luận của bạn cho bài viết này.