如何根據文章分類設置後備特色圖片在 WordPress 中

05/09/2024

為什麼要為文章分類添加後備特色圖片?

假設你有一個 WordPress 博客,並為每篇文章指定了一個分類。你可以設置一個預設的後備圖片,讓該分類中的所有文章在沒有指定特色圖片的情況下使用該圖片。另外,如果你的分類存檔頁面獲得了大量搜索流量,這樣也能使頁面更具吸引力和吸引力。

現在,我們來看看如何使用 WordPress 插件和自訂代碼,根據文章分類添加後備圖片。

使用插件在 WordPress 中設置後備特色圖片

默認情況下,WordPress 不提供向你的文章分類頁面添加圖片的選項。然而,你可以輕鬆地使用 WordPress 插件為文章分類設置後備圖片。首先,你需要安裝並激活 Category and Taxonomy Image 插件。詳細說明請參見我們的如何安裝 WordPress 插件指南。

激活後,你可以從 WordPress 後台直接前往 設置 » Taxonomy Image。接下來,你可以選中「category」選項框以在你的文章分類中包含分類圖片作為後備圖片。

完成後,別忘了點擊「保存更改」按鈕。之後,你可以從 WordPress 儀表板前往 文章 » 分類。你會看到在添加新分類或編輯現有分類時出現的「圖片」字段。

簡單地輸入你想要添加到 WordPress 分類中的圖片 URL。詳細說明,請參閱我們的如何在 WordPress 中獲取上傳圖片的 URL 指南。現在,當你發布不包含特色圖片的博客文章時,WordPress 會使用你剛剛為分類設置的圖片。

這就是全部!你現在已經成功根據文章分類添加了後備圖片。

不使用插件在 WordPress 中設置後備特色圖片

你也可以在不使用插件的情況下為文章分類配置後備圖片。不過,這種方法不建議初學者使用,因為它涉及代碼片段。首先,你需要為你的 WordPress 分類創建圖片。使用分類別名作為圖片文件名,並將它們都保存為相同的格式,如 JPG 或 PNG。

接下來,你可以從 媒體 » 添加新文件 將你的分類圖片上傳到 WordPress 網站。

上傳分類圖片後,你需要將它們移動到另一個目錄。簡單地使用 FTP 用戶端連接到你的网站,並轉到 /wp-content/uploads/ 文件夾。

你上傳的分類圖片將存儲在月份文件夾中,如 /uploads/2022/08/。打開這個月份文件夾。

詳細說明,請參見我們的 WordPress 在網站上存儲圖片的指南。

接下來,在你的計算機桌面上創建一個名為 category-images 的文件夾。現在,下載所有的分類圖片和所有 WordPress 為它們創建的大小到這個新的文件夾中。

下載完成後,你需要將 category-images 文件夾上傳到你的 /wp-content/uploads 目錄。這樣你將擁有所有的分類圖片大小在一個單獨的文件夾中,這樣更容易在主題中調用它們。

詳細說明,請參見我們的如何使用 FTP 向 WordPress 上傳文件的指南。

顯示分類圖片作為預設後備特色圖片

接下來,我們將展示如何顯示這些圖片中的一個作為當分類中的文章沒有設置特色圖片時的後備特色圖片。這種方法涉及複製和粘貼代碼,通常我們不建議用戶編輯主題文件。小錯誤會在你的網站上造成大問題。

添加代碼到你網站的更簡單方法是使用 WPCode。這是最好的 WordPress 代碼片段插件,允許你安全輕鬆地管理你網站上的自訂代碼。

首先,你需要安裝並激活免費的 WPCode 插件。詳細說明請參見我們的如何安裝 WordPress 插件指南。接下來,你可以從 WordPress 後台前往 Code Snippets » + 添加片段 添加新片段。然後只需點擊「添加新片段」按鈕。

之後,你可以添加自訂代碼或使用 WPCode 庫中的片段。對於這個例子,你將使用自己的自訂代碼,因此懸停在「添加你的自訂代碼(新片段)」選項上,然後點擊「使用片段」選項。

現在為你的片段添加一個名稱,這個名稱可以是任何便於你記住代碼用途的名稱。由於代碼包含 PHP,請確保從下拉菜單中選擇 PHP 片段作為「代碼類型」。

之後,只需複製以下代碼片段並粘貼到「代碼預覽」字段中:

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(){?>

輸入一個 URL 或上傳一張圖片

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);?>

輸入一個 URL 或上傳一張圖片

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 (custom_uploader) {custom_uploader.open();return;} custom_uploader = wp.media.frames.file_frame = wp.media({title: '選擇圖片',button: {text: '選擇圖片'},multiple: true});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('');$('#upload_image').val(attachment.id);});custom_uploader.open();});});";}}

接下來,你可以滾動到「插入」部分並選擇「自動插入」,讓插件為你處理代碼片段的插入位置。然後,從「頁面,文章,自訂文章類型」部分的「位置」下拉菜單中選擇「插入到內容之前」。

你可以返回到頁面頂部並將切換從「禁用」切換到「啟用」。一旦你點擊頁面頂部的「保存片段」按鈕,你的後備圖片將被設置到位。

你可能也想看看我們的如何在 WordPress 中添加自訂代碼片段的指南。注意:這個代碼片段僅適用於「category」分類法。不過,你可以通過將它們的名稱添加到代碼中的類列表並將括號中的術語更改為「tag」或「post」來添加更多分類法。

完成後,簡單地訪問你的網站以查看後備圖片。

我們希望這篇文章能幫助你根據文章分類添加後備特色圖片。你也可以看看我們的建站成本指南和最好的小型企業電子郵件市場營銷服務指南。如果你喜歡這篇文章,請訂閱我們的 YouTube 頻道以觀看 WordPress 教程視頻。你也可以在 Twitter 和 Facebook 上找到我們。



Related Posts

  • 2024-07-20
  • WordPress 主题

您是否想在 WordPress 中為不同頁面使用多個佈景主題?可以自訂網頁的外觀和布局,為文章、頁面和部分區域建立模板。但是如果您想為網站的某些部分或頁面使用完全不同的佈景主題呢?本文將指導您如何在 WordPress 中為頁面使用多個佈景主題。

閱讀更多
  • 2024-07-19
  • WordPress 主题

您是否想在 WordPress 網站上添加回頂效果?這種效果在頁面較長時非常有用,可以讓用戶輕鬆返回頁面頂部,提升網站的用戶體驗。本文將教您如何使用 jQuery 和插件在 WordPress 中添加平滑回頂效果。

閱讀更多
  • 2024-07-13
  • WordPress 主题

您是否想在 WordPress 中創建一個自定義頁面?自定義頁面允許您使用與網站其餘部分不同的佈局。許多 WordPress 網站使用自定義頁面佈局來建立銷售頁面、登陸頁面、網路研討會頁面等。在這篇文章中,我們將向您展示如何輕鬆地在 WordPress 中創建自定義頁面。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>