Ảnh featured mặc định theo category WordPress

6 tháng ago, WordPress Themes, Views

Giới thiệu về Ảnh Featured Mặc Định Theo Category trong WordPress

WordPress là một nền tảng CMS mạnh mẽ và linh hoạt, cho phép người dùng tùy chỉnh nhiều khía cạnh của trang web của họ. Một trong những tùy chỉnh phổ biến là sử dụng ảnh featured (ảnh đại diện) cho mỗi bài viết. Tuy nhiên, trong nhiều trường hợp, bạn có thể muốn hiển thị một ảnh featured mặc định khác nhau dựa trên category mà bài viết thuộc về. Điều này giúp tạo ra một trải nghiệm người dùng trực quan hơn và làm cho trang web của bạn có cấu trúc rõ ràng hơn.

Bài viết này sẽ hướng dẫn bạn cách thiết lập ảnh featured mặc định theo category trong WordPress một cách chi tiết. Chúng ta sẽ khám phá các phương pháp khác nhau, từ việc sử dụng code tùy chỉnh đến các plugin hỗ trợ, để đạt được mục tiêu này.

Tại sao Cần Ảnh Featured Mặc Định Theo Category?

Việc sử dụng ảnh featured mặc định theo category mang lại nhiều lợi ích cho trang web của bạn:

**Tính nhất quán:** Đảm bảo rằng tất cả các bài viết trong cùng một category đều có một ảnh đại diện phù hợp, ngay cả khi người viết quên thêm ảnh featured cụ thể.
**Trực quan:** Giúp người dùng nhanh chóng nhận ra category của một bài viết chỉ bằng cách nhìn vào ảnh featured.
**SEO:** Ảnh featured chất lượng cao có thể cải thiện SEO bằng cách tăng tính tương tác của người dùng và cung cấp thêm thông tin cho công cụ tìm kiếm.
**Thẩm mỹ:** Tạo ra một trang web có giao diện đẹp mắt và chuyên nghiệp hơn.

Ví dụ: Một trang web tin tức về công nghệ có thể sử dụng ảnh featured mặc định là một con chip máy tính cho category “Phần cứng,” một ứng dụng di động cho category “Ứng dụng,” và một logo của mạng xã hội cho category “Mạng xã hội.”

Các Phương Pháp Thiết Lập Ảnh Featured Mặc Định Theo Category

Có nhiều cách để thiết lập ảnh featured mặc định theo category trong WordPress. Chúng ta sẽ xem xét các phương pháp phổ biến nhất:

1. Sử Dụng Code Tùy Chỉnh trong functions.php

Phương pháp này đòi hỏi bạn phải chỉnh sửa file `functions.php` của theme bạn đang sử dụng. Hãy cẩn thận khi chỉnh sửa file này, vì một lỗi nhỏ có thể làm hỏng trang web của bạn. Luôn sao lưu file `functions.php` trước khi thực hiện bất kỳ thay đổi nào.

Đây là một ví dụ về code bạn có thể sử dụng:

“`php
function set_default_featured_image_by_category( $post_id ) {
$categories = get_the_category( $post_id );
if ( $categories ) {
$category_id = $categories[0]->term_id; // Lấy ID của category đầu tiên
$default_image_id = get_option( ‘default_featured_image_cat_’ . $category_id ); // Lấy ID ảnh mặc định từ option
if ( !has_post_thumbnail( $post_id ) && $default_image_id ) {
set_post_thumbnail( $post_id, $default_image_id );
}
}
}
add_action( ‘save_post’, ‘set_default_featured_image_by_category’ );

// Thêm trường tùy chọn vào trang chỉnh sửa category
function add_category_featured_image_field( $taxonomy ) {
?>

<?php
}
add_action( 'category_edit_form_fields', 'add_category_featured_image_field', 10, 2 );

// Lưu ID ảnh mặc định khi category được lưu
function save_category_featured_image( $term_id ) {
if ( isset( $_POST['default_featured_image_id'] ) ) {
update_option( 'default_featured_image_cat_' . $term_id, $_POST['default_featured_image_id'] );
}
}
add_action( 'edited_category', 'save_category_featured_image', 10, 2 );

// Thêm JavaScript để xử lý việc chọn ảnh
function enqueue_custom_media_uploader() {
wp_enqueue_media();
wp_enqueue_script( 'custom-media-uploader', get_template_directory_uri() . '/js/custom-media.js', array( 'jquery' ), '1.0', true );
}
add_action( 'admin_enqueue_scripts', 'enqueue_custom_media_uploader' );
“`

Bạn cần tạo một file `custom-media.js` trong thư mục `js` của theme với nội dung sau:

“`javascript
jQuery(document).ready(function($){

var mediaUploader;

$(‘.ct_media_button’).click(function(e) {
e.preventDefault();

if ( mediaUploader ) {
mediaUploader.open();
return;
}

mediaUploader = wp.media.frames.file_frame = wp.media({
title: ‘Chọn Ảnh Featured’,
button: {
text: ‘Chọn Ảnh’
},
multiple: false // Set to true to allow multiple files to be selected
});

mediaUploader.on(‘select’, function() {
attachment = mediaUploader.state().get(‘selection’).first().toJSON();

$(‘#default_featured_image_id’).val(attachment.id);
$(‘#default_featured_image_wrapper’).html(‘‘);
});

mediaUploader.open();
});

$(‘.ct_media_remove’).click(function(e) {
e.preventDefault();
$(‘#default_featured_image_id’).val(”);
$(‘#default_featured_image_wrapper’).html(‘‘);
});

});
“`

Đoạn code trên thực hiện các bước sau:

Tạo một hàm `set_default_featured_image_by_category` để tự động gán ảnh featured mặc định khi một bài viết được lưu.
Thêm một trường tùy chọn vào trang chỉnh sửa category để cho phép bạn chọn ảnh featured mặc định cho mỗi category.
Lưu ID của ảnh đã chọn vào WordPress options.
Thêm JavaScript để xử lý việc chọn ảnh từ media library.

Để sử dụng code này, bạn cần:

Sao chép đoạn code PHP vào file `functions.php` của theme.
Tạo một file `custom-media.js` trong thư mục `js` của theme và dán đoạn code JavaScript vào đó.
Truy cập trang chỉnh sửa category và chọn ảnh featured mặc định cho mỗi category.

Lưu ý: Thay đổi `your_theme` bằng tên theme của bạn.

2. Sử Dụng Plugin WordPress

Nếu bạn không muốn chỉnh sửa code, bạn có thể sử dụng một plugin WordPress để thiết lập ảnh featured mặc định theo category. Có nhiều plugin miễn phí và trả phí có sẵn trên thị trường. Một số plugin phổ biến bao gồm:

**Category Featured Images:** Một plugin đơn giản và dễ sử dụng để thêm ảnh featured cho các category.
**Categories Images:** Plugin này cho phép bạn thêm ảnh, màu sắc và mô tả cho các category.
**WP Featured Content:** Plugin này cung cấp nhiều tùy chọn để hiển thị nội dung nổi bật, bao gồm ảnh featured theo category.

Để sử dụng plugin, bạn cần:

Cài đặt và kích hoạt plugin.
Truy cập trang cài đặt của plugin và làm theo hướng dẫn để thiết lập ảnh featured mặc định cho mỗi category.

Ưu điểm của việc sử dụng plugin là nó đơn giản và không yêu cầu bạn phải viết code. Tuy nhiên, nhược điểm là bạn phải tin tưởng vào plugin và đảm bảo rằng nó tương thích với theme và các plugin khác của bạn.

3. Sử Dụng Child Theme

Dù bạn chọn phương pháp code tùy chỉnh hay plugin, việc sử dụng child theme là rất quan trọng. Child theme cho phép bạn thực hiện các thay đổi đối với theme của mình mà không lo làm mất các thay đổi đó khi theme được cập nhật.

Để tạo một child theme, bạn cần:

Tạo một thư mục mới trong thư mục `wp-content/themes` của bạn. Tên thư mục thường là tên của theme gốc cộng với “-child” (ví dụ: `twentytwentyone-child`).
Tạo một file `style.css` trong thư mục child theme của bạn và thêm đoạn code sau:

“`css
/*
Theme Name: Twenty Twenty-One Child
Theme URI: http://example.com/twenty-twenty-one-child/
Description: Twenty Twenty-One Child Theme
Author: Your Name
Author URI: http://example.com
Template: twentytwentyone
Version: 1.0.0
*/

@import url(‘../twentytwentyone/style.css’);

/*
Add your own styles here
*/
“`

Thay thế `Twenty Twenty-One` và `twentytwentyone` bằng tên theme gốc của bạn. Sau đó, bạn có thể kích hoạt child theme trong trang quản trị WordPress.

Lời Khuyên và Lưu Ý

* **Sao lưu trang web của bạn:** Luôn sao lưu trang web của bạn trước khi thực hiện bất kỳ thay đổi nào, đặc biệt là khi chỉnh sửa code.
* **Kiểm tra kỹ lưỡng:** Sau khi thiết lập ảnh featured mặc định theo category, hãy kiểm tra kỹ lưỡng để đảm bảo rằng nó hoạt động như mong đợi.
* **Tối ưu hóa ảnh:** Đảm bảo rằng ảnh featured của bạn được tối ưu hóa cho web để giảm thời gian tải trang.
* **Sử dụng ảnh chất lượng cao:** Sử dụng ảnh chất lượng cao để tạo ấn tượng tốt với người dùng.
* **Cập nhật plugin:** Nếu bạn sử dụng plugin, hãy đảm bảo rằng nó được cập nhật thường xuyên để tránh các lỗ hổng bảo mật và đảm bảo tính tương thích.

Kết luận

Việc thiết lập ảnh featured mặc định theo category là một cách tuyệt vời để cải thiện tính nhất quán, trực quan và thẩm mỹ của trang web WordPress của bạn. Bạn có thể sử dụng code tùy chỉnh hoặc plugin để đạt được mục tiêu này. Hãy nhớ sao lưu trang web của bạn và kiểm tra kỹ lưỡng sau khi thực hiện bất kỳ thay đổi nào. Chúc bạn thành công!

admin

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa