[Lập trình theme WordPress] Viết code cho index.php [NEW]



Tiếp tục phần này, chúng ta sẽ viết mã cho tệp index.php. Đây là tập tin sẽ làm trang chủ mặc định cho WordPress và thường ở phần này chúng ta sẽ viết mã để hiển thị danh sách các bài viết mới nhất trên website.

Bây giờ mở tệp index.php, chúng ta đã có hai đoạn mã như bên dưới mà chúng ta đã chèn trong các phần trước.

<?php get_header(); ?>

<?php get_footer(); ?>

Điều này có nghĩa là nó sẽ tải tệp header.php ở trên cùng và tệp footer.php ở dưới cùng. Bây giờ chúng ta sẽ muốn viết đoạn mã hiển thị nội dung ở giữa trang web, tất nhiên, chúng ta sẽ viết giữa hai đoạn văn bản này.

Đầu tiên, chúng ta có HTML để chia cột hiển thị nội dung vì chúng ta muốn hiển thị các bài viết mới nhất ở bên trái và thanh bên ở bên phải.

[html]


[/html]

Điều đó có nghĩa là tôi sẽ có một lớp học.content được sử dụng để bao quanh màn hình hiển thị nội dung và thanh bên. Sau đó, #main-content là khung hiển thị nội dung và #sidebar là khung hiển thị thanh bên của trang web.

Bây giờ trong #main-contentchúng tôi viết một vòng lặp như sau:


<section id="main-content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>
<?php else : ?>

<?php endif; ?>
</section>

Đây là vòng lặp dùng để lấy dữ liệu từ kiểu post trên truy vấn ra bên ngoài. Nếu bạn không hiểu ý nghĩa của vòng lặp và truy vấn trong WordPress, bạn nên tạm dừng 15 phút để đọc kỹ bài học này, Tôi đã giải thích nó rất tốt ở đó.

Bây giờ chúng ta đã có vòng lặp, tất nhiên chúng ta sẽ tiến hành viết mã để hiển thị các thành phần của bài viết như tiêu đề, thumbnail,… ra bên ngoài rồi đúng không? Được rồi, chúng ta thêm đoạn mã vào 2 ô trống phía trên như sau:


<section id="main-content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, get_post_format() ); ?>
<?php endwhile; ?>
<?php else : ?>
<?php get_template_part( ‘content’, ‘none’ ); ?>
<?php endif; ?>
</section>

Hai đoạn văn mà tôi đã in đậm là hai đoạn mà chúng ta cần thêm vào chúng. Vậy hai đoạn mã get_template_part () này có nghĩa là gì?

Ngay tại đoạn 03, get_template_part( 'content', get_post_format() ) có nghĩa là nó sẽ tải tệp content-$format.php trong thư mục chủ đề. Giống cái $format tức là tên định danh của từng loại Post Format như video, audio, hình ảnh,… mà bài viết chưa chọn định dạng post thì sẽ tải 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ẽ ghi nội dung để hiển thị thông báo truy vấn này không có dữ liệu, ví dụ nó sẽ báo website này không có bài viết chẳng hạn. .

Những file nội dung này chúng tôi sẽ tiếp tục viết trong các bài viết sau. Tiếp tục, ngay bên dưới <?php endwhile; ?>viết thêm mã để hiển thị chức năng phân trang như sau:

<?php thachpham_pagination(); ?>

Nó trông như thế này:

[Lập trình theme WordPress] Viết code cho index.php [NEW]

Bây giờ chúng ta tạo hàm thachpham_pagination() Đi tới tệp functions.php:


/**
@ 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 ”;
}
?>

<nav class="pagination" role="navigation">
<?php if ( get_next_post_link() ) : ?>
<div class="prev"><?php next_posts_link( __(‘Older Posts’, ‘thachpham’) ); ?></div>
<?php endif; ?>

<?php if ( get_previous_post_link() ) : ?>
<div class="next"><?php previous_posts_link( __(‘Newer Posts’, ‘thachpham’) ); ?></div>
<?php endif; ?>

</nav><?php
}
}

Sau khi chèn xong bạn sẽ thấy đường link Bài viết cũ trên trang chủ như thế này, khi click vào thì nó vẫn chuyển sang trang thứ 2 nhưng không có nội dung, phần hiển thị nội dung chúng ta sẽ làm trong bài viết. sau.

laptrinhtheme-finish-indexTiếp tục, trong phần #sidebar, thêm get_sidebar () như sau:


<section id="sidebar">
<?php get_sidebar(); ?>
</section>

Vậy là xong nội dung của file index.php. : D

Phần kết

Trong phần này, chúng ta đã học qua cách viết mã trong tệp index.php, học cách sử dụng hàm get_template_part() để sắp xếp cấu trúc chủ đề cho khoa học hơn. Như bạn có thể thấy trong phần này, chúng tôi đã sử dụng hàm này để tải các tệp content.php, content- $ format.php và content-none.php. Do đó, trong phần tiếp theo chúng ta sẽ tiến hành viết mã cho các tập tin content.php này.

Đánh giá nội dung này

Tiếp tục đọc trong bộ truyện