Hướng dẫn làm Theme Wordpress bằng Bootstrap 4

Ở phần 10 này mình sẽ hướng dẫn bạn file cuối cùng là tag.php và tối ưu lại breadcrumbs, custom field cho wordpress

Tag.php

Tag như là cầu nối giữa các bài viết cùng hoặc khác chủ đề lại với nhau, tag quan trọng trong việc liên kết nội cho blog vì thế mọi bài viết cần có các tag liên quan đến nhau.

Tạo file tag.php

wp-content/themes/miniblog/tag.php

Copy nội dung file category.php vào file tag.php thay H1 bằng nội dung sau:

<h1 class="my-2 mb-4 page-header">
    Thẻ:
    <small><?php single_tag_title() ?></small>
</h1>

Hàm single_tag_title dùng để gọi tên của thẻ.

Kế đến bạn mở file content-single.php và dùng hàm the_tags để gọi các thẻ

<?php the_tags() ?>

Kết quả trong bài viết.

Khi click vào 1 tag bất kỳ nó sẽ truy xuất vào file tag.php để lấy dữ liệu

Breadcrumbs

Mở file functions.php và thêm các mệnh đề sau:

 elseif (is_page()) {
    the_title('<span class="breadcrumb-item active">','</span>');
} elseif (is_tag()) {
    echo '<span class="breadcrumb-item active">Thẻ</span>';
} elseif (is_search()) {
    echo '<span class="breadcrumb-item active">Tìm kiếm</span>';
} elseif (is_author()) {
    echo '<span class="breadcrumb-item active">Tác giả</span>';
} elseif (is_archive()) {
    echo '<span class="breadcrumb-item active">Lưu trữ</span>';
}else{
    echo '<span class="breadcrumb-item active">Error 404</span>';
}

Kết quả ta được:

code_13

Tùy biến Custom Field trong Wordpress

Vì theme này viết mình sẽ không sử dụng plugin SEO chạy với web vì thế mình sẽ sử dụng Custom Field để cấu hình thẻ Title, Description, Keywords cho theme.

Mở file header.php và thay đổi code sau:

Mình sẽ viết đơn giản nhất để bạn có thể hiểu được

<title>
    <?php if (is_home()): ?>
      <?php bloginfo('name') ?>
    <?php elseif( is_single() ): ?>
        <?php echo get_field('seo_title'); ?>
    <?php else: ?>
      <?php wp_title('', true,''); ?>
    <?php endif ?>
</title>

<?php if (is_home()): ?> <!-- Khi ở trang chủ -->
    <meta name="description" content="<?php bloginfo('description') ?>" />
<?php elseif(is_single()): ?> <!-- Khi ở trang bài viết -->
    <meta name="description" content="<?php echo get_field('seo_description'); ?>" />
    <meta name="keywords" content="<?php echo get_field('seo_keywords'); ?>" />
<?php endif ?>

Giải thích:

Ta dùng hàm is_home để xác định vị trí trang chủ
hàm is_single để xác định đây là bài viết
hàm wp_title dùng để show tiêu đề toàn cục cho các category, page, search...
hàm get_field sử dụng để gọi tên của custom field ta định nghĩa trong Backend
blog_info('name') và blog_info('description') sẽ lấy ở phần Backend WP

Hướng dẫn tạo custom field trong Wordpress.

Custom field bạn hiểu đơn giản là nó cho phép ta tạo dữ liệu trong bài viết, tạo khung, select, checkbox đại khái là những cái Wordpress không có nhưng ta muốn thêm vào.

Để tạo custom field cho wordpress bạn tải plugin sau: Advanced Custom Fields đây là plugin giúp ta tạo custom field nhanh chóng.