Bạn đang tìm cách đặt hình thu nhỏ bài đăng mặc định cho các danh mục WordPress cụ thể?
Nếu bạn có các bài viết không có hình ảnh nổi bật hoặc nếu bạn muốn tất cả các bài đăng trong một danh mục có hình thu nhỏ tương tự nhau thì bạn có thể đặt hình ảnh dự phòng cho từng danh mục để không có bài đăng blog nào bị bỏ sót.
Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách đặt hình ảnh nổi bật dự phòng mặc định cho các danh mục cụ thể trong WordPress.
Giả sử bạn có một blog WordPress nơi bạn chỉ định một danh mục duy nhất cho mỗi bài đăng. Bạn có thể chỉ định tất cả các bài đăng trong danh mục đó hiển thị cùng một hình ảnh dự phòng nếu chúng không có hình ảnh nổi bật vì lý do nào đó.
Một lợi ích khác của việc thêm hình ảnh dự phòng cho danh mục bài đăng là nếu các trang lưu trữ danh mục của bạn nhận được nhiều lưu lượng tìm kiếm thì điều đó sẽ khiến chúng hấp dẫn và hấp dẫn hơn.
Điều đó nói rằng, hãy xem cách bạn có thể thêm hình ảnh dự phòng dựa trên danh mục bài đăng bằng cách sử dụng plugin WordPress và mã tùy chỉnh.
Theo mặc định, WordPress không cung cấp tùy chọn thêm hình ảnh vào các trang danh mục bài đăng của bạn. Tuy nhiên, bạn có thể dễ dàng đặt hình ảnh dự phòng cho các danh mục bài đăng bằng plugin WordPress.
Trước tiên, bạn sẽ cần cài đặt và kích hoạt plugin Hình ảnh danh mục và phân loại. Để biết thêm chi tiết, vui lòng xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress.
Sau khi kích hoạt, bạn có thể đi tới Cài đặt » Hình ảnh phân loại từ bảng quản trị WordPress. Tiếp theo, bạn có thể nhấp vào hộp kiểm ‘danh mục’ để đưa hình ảnh phân loại vào danh mục bài đăng của mình làm dự phòng.
Đừng quên nhấp vào nút 'Lưu thay đổi' khi bạn hoàn tất.
Sau đó, bạn có thể truy cập Bài đăng » Danh mục từ bảng điều khiển WordPress của mình. Bạn sẽ thấy trường 'Hình ảnh' xuất hiện khi thêm danh mục mới hoặc chỉnh sửa danh mục hiện có.
Chỉ cần nhập URL hình ảnh bạn muốn thêm vào danh mục WordPress của mình. Để biết thêm chi tiết về điều đó, vui lòng xem hướng dẫn của chúng tôi về cách lấy URL của hình ảnh bạn tải lên trong WordPress.
Bây giờ, khi bạn xuất bản một bài đăng blog không có hình ảnh nổi bật nào được chỉ định thì WordPress sẽ sử dụng hình ảnh bạn vừa đặt cho danh mục của mình.
Đây là bản xem trước của hình ảnh chúng tôi đã sử dụng trên trang demo của bạn.
Đó là tất cả! Bây giờ bạn đã thêm thành công hình ảnh dự phòng dựa trên danh mục bài đăng.
Bạn cũng có thể định cấu hình hình ảnh dự phòng cho các danh mục bài đăng mà không cần sử dụng plugin WordPress. Tuy nhiên, phương pháp này không được khuyến khích cho người mới bắt đầu vì nó liên quan đến các đoạn mã.
Điều đầu tiên bạn cần làm là tạo hình ảnh cho các danh mục WordPress của mình. Sử dụng sên danh mục làm tên tệp hình ảnh của bạn và lưu tất cả chúng ở cùng định dạng, như JPG hoặc PNG.
Tiếp theo, bạn có thể tải hình ảnh danh mục lên trang web WordPress của mình từ Phương tiện » Thêm mới.
WordPress sẽ lưu trữ hình ảnh danh mục của bạn trong quá trình tải lên và tạo kích thước hình ảnh được xác định theo chủ đề của bạn.
Sau khi tải lên hình ảnh danh mục, bạn cần di chuyển chúng sang một thư mục khác. Chỉ cần kết nối với trang web của bạn bằng ứng dụng khách FTP và đi tới thư mục /wp-content/uploads/.
Các hình ảnh danh mục bạn đã tải lên sẽ được lưu trữ trong thư mục tháng, như /uploads/2022/08/.
Hãy tiếp tục và mở thư mục của tháng này.
Bạn có thể xem hướng dẫn của chúng tôi về nơi lưu trữ hình ảnh WordPress trên trang web của bạn để biết thêm thông tin.
Tiếp theo, tạo một thư mục trên màn hình máy tính của bạn và đặt tên là Category-images. Bây giờ hãy tải xuống tất cả các hình ảnh danh mục của bạn và tất cả các kích thước mà WordPress tạo cho chúng vào thư mục mới này trên máy tính để bàn của bạn.
Sau khi quá trình tải xuống hoàn tất, bạn cần tải thư mục hình ảnh danh mục lên thư mục /wp-content/uploads của mình. Làm điều này sẽ cho phép bạn có tất cả các kích thước hình ảnh danh mục của mình trong một thư mục riêng biệt, dễ dàng đưa vào chủ đề của bạn.
Để biết thêm chi tiết, vui lòng xem hướng dẫn của chúng tôi về cách sử dụng FTP để tải tệp lên WordPress.
Hiển thị hình ảnh danh mục dưới dạng hình ảnh nổi bật dự phòng mặc định
Tiếp theo, chúng tôi sẽ hướng dẫn bạn cách hiển thị một trong những hình ảnh đó làm hình ảnh nổi bật dự phòng khi một bài đăng trong một danh mục không có một bộ.
Phương pháp này liên quan đến việc sao chép và dán mã và chúng tôi thường không khuyên người dùng chỉnh sửa tệp chủ đề của họ. Những lỗi nhỏ có thể gây ra lỗi lớn trên trang web của bạn.
Một cách dễ dàng hơn để thêm mã vào trang web của bạn là sử dụng WPCode. Đây là plugin đoạn mã WordPress tốt nhất và cho phép bạn quản lý mã tùy chỉnh trên trang web của mình.
Trước tiên, bạn sẽ cần cài đặt và kích hoạt plugin WPCode miễn phí. Để biết thêm chi tiết, vui lòng xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress.
Tiếp theo, bạn có thể đi tới Đoạn mã » + Thêm đoạn mã trong bảng quản trị WordPress của mình để thêm đoạn mã mới. Sau đó chỉ cần nhấp vào nút ‘Thêm mới’.
Sau đó, bạn có thể thêm mã tùy chỉnh hoặc sử dụng đoạn mã từ thư viện WPCode.
Đối với điều này, bạn sẽ sử dụng mã tùy chỉnh của riêng mình, vì vậy hãy di chuột qua tùy chọn 'Thêm mã tùy chỉnh của bạn (Đoạn mã mới)' và nhấp vào tùy chọn 'Sử dụng đoạn mã'.
Bây giờ hãy thêm tên cho đoạn mã của bạn và nhập mã vào phần ‘Xem trước mã’.
Vì mã có PHP nên hãy đảm bảo chọn ‘Loại mã’ làm Đoạn mã PHP.
Chỉ cần sao chép đoạn mã sau và dán vào trường ‘Xem trước mã’.
/**
* Plugin Name: Category Thumbnail Fallback
* Description: Use the category image as fallback when the post does not have a featured image
*/
class WPBCategoryThumbnailFallback
{
protected static $taxonomies = ['category'];
protected $nonceId = 'wpb_category_thumb_fallback_none';
protected $fieldId = 'wpb_category_fallback_post_image';
public $taxonomy;
protected function __construct($taxonomy)
{
$this->taxonomy = $taxonomy;
}
public static function init()
{
foreach (static::$taxonomies as $taxonomy) {
$_self = new self($taxonomy);
add_action('admin_enqueue_scripts', [$_self, 'scripts']);
add_action("{$taxonomy}_add_form_fields", [$_self, 'add']);
add_action("{$taxonomy}_edit_form_fields", [$_self, 'edit'], 99, 2);
add_action("created_{$taxonomy}", [$_self, 'saveTerm'], 10, 2);
add_action("edited_{$taxonomy}", [$_self, 'editTerm'], 10, 2);
add_filter("get_post_metadata", [$_self, 'fallback'], 99, 5);
}
}
public function scripts($hook_suffix)
{
if (in_array($hook_suffix, ['term.php', 'edit-tags.php'])) {
$screen = get_current_screen();
if (is_object($screen) && "edit-{$this->taxonomy}" == $screen->id) {
wp_enqueue_media();
wp_add_inline_script('media-editor', $this->inlineScript());
}
}
}
public function add()
{
?>
<div class="form-field upload_image-wrap">
<label for="upload_image">Image</label>
<input id="upload_image" type="hidden" size="36" name="<?php
echo esc_attr($this->fieldId)
?>" value=""/>
<div id="wpb-category-image-preview" style="max-width: 150px; max-height: 150px;"></div>
<input id="upload_image_button" class="button" type="button" value="Upload Image"/>
<p>Enter a URL or upload an image</p>
</div>
<?php
wp_nonce_field($this->nonceId, $this->nonceId);
}
public function edit($term, $taxonomy)
{
$value = get_term_meta($term->term_id, $this->fieldId, true);
$image = wp_get_attachment_image((int)$value);
?>
<tr class="form-field upload_image-wrap">
<th scope="row"><label for="name">Image</label></th>
<td>
<label for="upload_image">
<input id="upload_image" type="hidden" size="36" name="<?php
echo esc_attr($this->fieldId)
?>" value="<?php
echo esc_attr($value)
?>"/>
<div id="wpb-category-image-preview" style="max-width: 150px; max-height: 150px;"><?php
echo $image;
?></div>
<input id="upload_image_button" class="button" type="button" value="Upload Image"/>
</label>
<p class="description">Enter a URL or upload an image</p>
</td>
</tr>
<?php
wp_nonce_field($this->nonceId, $this->nonceId);
}
public function saveTerm($term_id, $tt_id)
{
$data = array_filter(wp_unslash($_POST), function ($value, $key) {
return in_array($key, [$this->nonceId, $this->fieldId]);
}, ARRAY_FILTER_USE_BOTH);
if (
empty($data) ||
empty($data[$this->nonceId]) ||
! wp_verify_nonce($data[$this->nonceId], $this->nonceId) ||
! current_user_can('manage_categories')
) {
return null;
}
if (empty($data[$this->fieldId]) || empty(absint($data[$this->fieldId]))) {
return delete_term_meta($term_id, $this->fieldId);
}
$value = absint($data[$this->fieldId]);
return update_term_meta($term_id, $this->fieldId, $value);
}
public function editTerm($term_id, $tt_id)
{
$this->saveTerm($term_id, $tt_id);
}
public function fallback($null, $object_id, $meta_key, $single, $meta_type)
{
if (
$null === null &&
$meta_key === '_thumbnail_id'
) {
$meta_cache = wp_cache_get($object_id, $meta_type . '_meta');
if ( ! $meta_cache) {
$meta_cache = update_meta_cache($meta_type, [$object_id]);
$meta_cache = $meta_cache[$object_id] ?? null;
}
$val = null;
if (isset($meta_cache[$meta_key])) {
if ($single) {
$val = maybe_unserialize($meta_cache[$meta_key][0]);
} else {
$val = array_map('maybe_unserialize', $meta_cache[$meta_key]);
}
}
if (empty($val)) {
$fallbackImageId = $this->getPostFallbackImageId($object_id, $single);
if ( ! empty($fallbackImageId)) {
return $fallbackImageId;
}
}
return $val;
}
return $null;
}
public function getPostFallbackImageId($postId, $single)
{
$terms = get_the_terms($postId, $this->taxonomy);
if (empty($terms) || is_wp_error($terms)) {
return null;
}
foreach ($terms as $term) {
$fallbackIdFromCategoryId = get_term_meta($term->term_id, $this->fieldId, $single);
if ( ! empty($fallbackIdFromCategoryId)) {
return $fallbackIdFromCategoryId;
}
}
return null;
}
public function inlineScript()
{
return "jQuery(document).ready(function ($) {
var custom_uploader;
$('#upload_image_button').click(function (e) {
e.preventDefault();
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
},
multiple: true
});
//When a file is selected, grab the URL and set it as the text field's value
custom_uploader.on('select', function () {
console.log(custom_uploader.state().get('selection').toJSON());
attachment = custom_uploader.state().get('selection').first().toJSON();
var thumbUrl = attachment && attachment.sizes && attachment.sizes.thumbnail && attachment.sizes.thumbnail.url
? attachment.sizes.thumbnail.url
: attachment.url;
$('#wpb-category-image-preview').html('<img src=\"'+ thumbUrl +'\">');
$('#upload_image').val(attachment.id);
});
//Open the uploader dialog
custom_uploader.open();
});
});";
}
}
Tiếp theo, bạn có thể cuộn xuống phần ‘Chèn’ và chọn ‘Chèn tự động’ để plugin xử lý vị trí cho bạn.
Sau đó chọn tùy chọn ‘Chèn trước nội dung’ trong phần ‘Trang, bài đăng, loại bài đăng tùy chỉnh’ trong menu thả xuống ‘Vị trí’.
Sau đó, bạn có thể quay lại đầu trang và chuyển nút chuyển từ 'Không hoạt động' sang 'Hoạt động'.
Khi bạn nhấp vào nút ‘Save Snippet’ ở trên cùng, hình ảnh dự phòng của bạn sẽ được đặt đúng chỗ.
Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách thêm đoạn mã tùy chỉnh trong WordPress.
Lưu ý: Đoạn mã này sẽ chỉ hoạt động với phân loại 'danh mục'. Tuy nhiên, bạn có thể thêm nhiều nguyên tắc phân loại khác bằng cách thêm tên của chúng vào danh sách trong lớp sau trong mã và thay đổi thuật ngữ trong ngoặc thành ‘thẻ’ hoặc ‘bài chẳng hạn.
protected static $taxonomies = ['category'];
Khi bạn hoàn tất, chỉ cần truy cập trang web của bạn để xem hình ảnh dự phòng.
Chúng tôi hy vọng bài viết này đã giúp bạn thêm hình ảnh nổi bật dự phòng dựa trên danh mục bài đăng. Bạn cũng có thể xem hướng dẫn của chúng tôi về chi phí xây dựng một trang web và các dịch vụ tiếp thị qua email tốt nhất cho doanh nghiệp nhỏ.
Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.