WordPress 主题

如何在 WordPress 中添加動態插件就緒側邊欄

如何在 WordPress 中添加動態插件就緒側邊欄

插件是如此重要的一部分,以至於很難想像一個沒有插件的 WordPress 主題。插件是可以拖放到側邊欄或主題中的任何其他插件就緒區域的可執行腳本。許多讀者利用插件來向其側邊欄添加自定義元素。然而,這篇文章是為那些想學習如何在 WordPress 主題中添加動態插件就緒側邊欄或插件就緒區域的好奇用戶準備的。

在 WordPress 中註冊側邊欄或插件就緒區域

首先你需要為你的主題註冊側邊欄或插件就緒區域。你可以註冊多個側邊欄和插件就緒區域。將以下代碼複製並粘貼到您的主題 functions.php 文件中:

function wpb_widgets_init() {

	register_sidebar( array(
		'name' => __( '主側邊欄', 'wpb' ),
		'id' => 'sidebar-1',
		'description' => __( '主側邊欄顯示在每頁的右側,首頁模板除外', 'wpb' ),
		'before_widget' => '',
		'before_title' => '

', 'after_title' => '

', ) ); register_sidebar( array( 'name' =>__( '首頁側邊欄', 'wpb'), 'id' => 'sidebar-2', 'description' => __( '顯示在靜態首頁模板上', 'wpb' ), 'before_widget' => '', 'before_title' => '

', 'after_title' => '

', ) ); } add_action( 'widgets_init', 'wpb_widgets_init' );

在這段代碼中,我們註冊了兩個側邊欄。我們給它們命名和描述以便在插件界面識別。描述參數可用於告訴用戶這個側邊欄在主題中的顯示位置。

Read More
WordPress 主题

如何在 WordPress 中添加更多文章加載按鈕

如何在 WordPress 中添加更多文章加載按鈕

最後更新日期:2024 年 2 月 27 日 | 評審:Syed Balkhi

你是否希望在 WordPress 中添加加載更多文章按鈕?許多熱門平台允許用戶在頁面底部時加載更多文章。本文將向你展示如何輕鬆地在 WordPress 中添加加載更多文章按鈕。

何時以及為什麼需要在 WordPress 中添加更多文章加載按鈕

讓用戶與你的內容保持互動有助於獲得更多的觀看次數和最終的訂閱者。許多博客在其首頁、博客和歸檔頁面使用簡單的「舊文章」導航鏈接。有些網站使用數字頁碼導航,提供更多的上下文。然而,某些類型的網站可以從無限滾動或加載更多文章按鈕中獲益匪淺。例如:攝影網站、清單網站和病毒內容網站。

「加載更多文章」按鈕類似於無限滾動,它使用 JavaScript 快速獲取下一組內容。這樣可以改善用戶體驗,讓他們有機會查看更多你的內容。

在 WordPress 中添加更多文章加載按鈕

第一步,你需要安裝並啟用 Ajax Load More 插件。欲了解更多詳情,請參考我們的逐步指南,了解如何安裝 WordPress 插件。

啟用後,插件會在你的 WordPress 管理菜單中添加一個名為「Ajax Load More」的新菜單項目。你需要點擊它並進入插件的設置頁面。

在設置頁面,你可以選擇按鈕的顏色,也可以選擇替換按鈕為無限滾動,這樣不需用戶點擊按鈕,就能自動加載下一批文章。

接下來,你需要訪問 Ajax Load More » Repeater Template 頁面,添加顯示文章的模板。插件附帶一個基本模板,其中包含顯示文章的 WordPress 迴圈。然而,這個模板可能與你的主題不匹配,顯得不合適。

要解決這個問題,你需要複制主題用於顯示首頁、歸檔和博客內文章的代碼。通常,這個代碼位於主題的 template-parts 文件夾中。在那個文件夾中,你會看到顯示不同內容的模板。例如 content-page.php、content-search.php 等等。

你應該尋找通用的 content.php 模板。以下是我們演示主題 content.php 文件中的一個例子:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php
        twentyfifteen_post_thumbnail();
    ?>

    <header class="entry-header">
        <?php
            if ( is_single() ) :
                the_title( '<h1 class="entry-title">', '</h1>' );
            else :
                the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
            endif;
        ?>
    </header>

    <div class="entry-content">
        <?php
            the_content( sprintf(
                __( 'Continue reading %s', 'twentyfifteen' ),
                the_title( '<span class="screen-reader-text">', '</span>', false )
            ) );

            wp_link_pages( array(
                'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
                'after'       => '</div>',
                'link_before' => '<span>',
                'link_after'  => '</span>',
                'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%s',
                'separator'   => '<span class="screen-reader-text">, </span>',
            ) );
        ?>
    </div>

    <?php
        if ( is_single() && get_the_author_meta( 'description' ) ) :
            get_template_part( 'author-bio' );
        endif;
    ?>

    <footer class="entry-footer">
        <?php twentyfifteen_entry_meta(); ?>
        <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
    </footer>
</article>

找到這段代碼後,你需要將其粘貼在插件設置中的「Repeater Templates」字段內。不要忘記點擊「Save Template」按鈕來保存你的設置。

接下來,你需要訪問 Ajax Load More » Shortcode Builder 頁面生成短代碼。這個頁面包含很多不同的選項可供自定義。首先,你需要選擇容器類型。如果你不確定,請查看之前複制的模板。大多數現代 WordPress 主題使用 <div> 元素。

之後,向下滾動到按鈕標籤區域。這裡你可以更改按鈕上的文本。默認情況下,插件使用「舊文章」,你可以將其更改為「加載更多文章」或任何你喜歡的文字。

最後,你需要選擇是希望文章自動加載還是等用戶點擊加載更多文章按鈕。

現在你的短代碼已經準備好了。在右側欄中,你會看到短代碼輸出。請複制該短代碼並將其粘貼在文本編輯器中,因為你下一步將需要它。

在你的 WordPress 主題中添加更多文章加載

這部分教程要求你將代碼添加到你的 WordPress 主題文件中。如果你之前沒有這麼做過,請查看我們的指南,了解如何在 WordPress 中複制和粘貼代碼。不要忘記在做出任何更改之前備份你的 WordPress 主題。

你需要找到希望在主題中添加加載更多文章按鈕的模板文件。根據主題的組織方式,通常這些文件是 index.php、archives.php、categories.php 等等。

你需要在 endwhile; 標籤之後將之前複製的短代碼添加到主題中。由於我們將短代碼添加到主題文件中,我們需要使用 do_shortcode 函數,如下所示:

<?php echo do_shortcode('[ajax_load_more container_type="div" post_type="post"]'); ?>

你現在可以保存更改並訪問你的网站以查看「加載更多文章」按鈕的效果。以下是我們演示網站上的顯示效果:

希望這篇文章幫助你學習如何在 WordPress 中添加加載更多文章按鈕。同時你也可以參考我們的大量 WordPress 初學者最有用的小貼士、技巧和黑客,以及我們精選的最好的 WordPress Facebook 插件以增加你的博客。

如果你喜歡這篇文章,請訂閱我們的 YouTube 頻道獲取 WordPress 視頻教程。你還可以在 Twitter 和 Facebook 上找到我們。

Read More
WordPress 主题

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

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

假設你有一個 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 上找到我們。

Read More
WordPress 主题

如何在 WordPress 添加自定義儀表板標誌

如何在 WordPress 添加自定義儀表板標誌

最後更新時間:2024 年 3 月 5 日 由 編輯團隊 | 審核者:Syed Balkhi

編輯註釋:我們從 WPBeginner 的合作夥伴鏈接中賺取佣金。佣金不影響我們編輯的意見或評價。了解更多關於編輯過程的信息。

什麼是自定義儀表板標誌以及為什麼要添加一個?

自定義儀表板標誌會出現在 WordPress 管理儀表板上,並顯示您自定義的標誌或品牌。雖然添加一個看起來是小細節,但它是網站品牌的重要部分,並且具有以下幾個重要原因:

品牌化:它加強了您的品牌形象,讓 WordPress 管理區域更像是您業務的一部分。

專業性:自定義儀表板標誌使您的 WordPress 網站看起來更加專業和完善。

白標:如果您為客戶建設網站或運行多站點網絡,可以使用自定義儀表板標誌進行白標處理。這意味着您可以完全去除 WordPress 品牌,替換為您自己的品牌,為客戶創建自定義體驗。

無論您擁有小型企業、在線商店或博客,擁有自定義儀表板標誌都很重要,有助於個性化後台體驗並建立強大的內部品牌形象。

方法一:使用插件在 WordPress 添加自定義儀表板標誌

這種方法非常簡單,適合大多數初學者。首先,您需要安裝並激活 White Label CMS 插件。詳情請參閲我們關於如何安裝 WordPress 插件的分步指南。

啟用後,請訪問「設置」»「White Label CMS」頁面。

然後,簡單地選擇「品牌」選項卡,從左向右切換開關以「隱藏 WordPress 標誌和鏈接」。接下來,您需要進入「儀表板」選項卡,在「儀表板圖標」處上傳自定義標誌。自定義標誌應該是 40 x 40 像素的尺寸。不要忘記點擊右上角的「保存」按鈕以存儲設置。

現在,回到 WordPress 管理區域,您應該能夠在儀表板上看到標誌。以下是它的外觀:

除了自定義儀表板標誌外,White Label CMS 還提供了其他功能來重新品牌化您的 WordPress 安裝。請參閱我們的指導,了解如何進行 WordPress 管理儀表板的白標處理。

方法二:手動在 WordPress 添加自定義儀表板標誌

這種方法適用於對在 WordPress 中粘貼代碼片段感到自信的用戶。最簡單和最安全的方法是使用插件如 WPCode 添加自定義代碼。大多數教學會讓您將代碼添加到主題的 functions.php 文件中,雖然這可行,但可能會出問題。即使是代碼中的微小錯誤或添加方式的不當,也可能會破壞您的 WordPress 網站並讓其無法訪問。因此,我們只建議高級用戶使用此方法。

即使對高級用戶來說,使用 WPCode 也是最安全的方法。首先,您需要安裝並激活免費的 WPCode 插件。詳細的指導請參閱我們關於如何安裝 WordPress 插件的指南。接下來,請確保將您的自定義標誌保存為 custom-logo.png 文件,尺寸必須是 40 x 40 像素。將其上傳至 /wp-content/themes/您的主題/images 文件夾。如果您的主題沒有 images 文件夾,則需要創建一個。

然後,轉到「代碼片段」»「+添加片段」。

您將進入 WPCode 庫,這裡有數十個代碼片段可供選擇。在這種情況下,選擇「添加自定義代碼」並點擊「使用片段」按鈕。輸入一個標題如「自定義儀表板標誌」。然後將「代碼類型」更改為「PHP 片段」。在「代碼預覽」框中添加以下代碼:

function wpb_custom_logo() {
echo '

';
}
add_action('wp_before_admin_bar_render', 'wpb_custom_logo');

確保所有文字和格式與上述完全相同。向下滾動至「插入方式」選擇「自動插入」。為確保您的自定義標誌顯示在儀表板中,展開位置下拉菜單並選擇「僅管理員」。最後,將開關從非活動狀態切換至活動狀態並點擊「保存」按鈕。這段代碼簡單地添加了在 WordPress 管理欄中顯示自定義標誌所需的 CSS。

我們希望這篇文章能幫助您學會如何在 WordPress 中添加自定義儀表板標誌。您還可以參閱我們的指南,了解如何使用 Adminimize 隱藏 WordPress 中不必要的項目,或閱讀我們關於最佳 WordPress 提示、技巧和破解的方法的博客文章,以更好地自定義您的網站。如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以觀看 WordPress 教程視頻。您也可以在 Twitter 和 Facebook 上找到我們。

Read More
WordPress 主题

如何在 WordPress 中為登入用戶顯示不同的菜單

為何在 WordPress 中為登入用戶顯示不同的菜單?

根據訪客和他們的活動來更改 WordPress 網站的不同區域,可以使網站對每個用戶而言更加個性化。這有助於提升用戶體驗。

如果你的網站不需要用戶註冊或登入,那麼你可以跨網站使用相同的導航菜單。然而,其他網站會大大受益於向已登入用戶顯示自定義菜單。比如,網上商店、在線學習平台或 WordPress 會員社區網站都能從個性化導航菜單中受益。通過默認情況下,WordPress 允許你創建多個導航菜單,但你只能選擇在網站主題的某一位置顯示其中一個。

為已登入和未登入用戶創建不同的菜單

在設置登入用戶菜單之前,你首先需要創建兩個單獨的導航菜單。一個菜單供已登入用戶使用,另一個菜單供未登入用戶使用。讓我們開始吧。

請註意!我們分享的方法是為了使用 WordPress 經典主題的人設計的。如果你使用的是 WordPress 5.8 及以後版本帶有 Full Site Editing (FSE) 功能的主題,這些方法可能無法運行。

方法 1. 使用插件為登入用戶顯示不同菜單

最簡單的方法是使用 Conditional Menus 插件。所以,讓我們先安裝並激活它。激活後,請導航到 WordPress 後台的外觀 » 菜單頁面。然後切換到 ‘管理位置’ 標籤。從這裡你會看到主題定義的可用菜單位置和當前顯示的菜單。

例如,我們的 ‘主菜單’ 位置當前顯示一個 ‘主菜單’。

現在,我們需要告訴插件在符合某些條件時顯示不同的菜單。為此,我們單擊 ‘+ 條件菜單’ 鏈接。然後,從下拉菜單中選擇你希望顯示給已登入用戶的導航菜單。接下來,點擊 ‘+ 條件’ 鏈接,將彈出一個窗口,你會看到許多條件可供選擇。選擇 ‘用戶已登入’ 選項,然後點擊 ‘保存’ 按鈕。你現在可以訪問你的网站來查看已登入用戶菜單的效果。

方法 2. 使用代碼手動選擇登入用戶菜單

這種方法要求你向 WordPress 網站添加代碼。如果你之前從未這樣做過,請參閱我們的指南了解如何在 WordPress 中複製和粘貼代碼片段。通常情況下,你需要將代碼片段添加到主題的 functions.php 文件或站點專用插件中,但我們不推薦這種方法,因為它可能會導致網站問題。相反,你可以使用 WPCode 插件。

WPCode 讓你無需直接編輯主題文件即可向網站添加自定義代碼片段。它還有助於管理這些片段並確保它們安全執行,將破壞網站的風險降到最低。安裝後,請導航到代碼片段 » + 添加片段,這會打開 WPCode 的代碼片段庫。從這裡,你可以點擊 ‘+ 添加自定義片段’ 按鈕。

然後,你會進入 WPCode 的文本編輯器。下一步是為代碼片段添加標題,並從 ‘代碼類型’ 下拉菜單中選擇 ‘HTML 片段’。完成後,把以下代碼復制並粘貼到 ‘代碼預覽’ 欄位中:

function my_wp_nav_menu_args( $args = '' ) {
if( is_user_logged_in() ) {
$args['menu'] = 43;
} else {
$args['menu'] = 35;
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

請確保用你先前創建的導航菜單的 ID 替換 43 和 35。使用 WPCode 保存代碼片段後,你就完成了。

希望這篇文章能幫助你學會在 WordPress 中為已登入用戶顯示不同的導航菜單。如需更多指南,例如如何允許用戶邀請朋友在 WordPress 中註冊和如何設計 WordPress 導航菜單,請訂閱我們的 YouTube 頻道或在 Twitter 和 Facebook 上關注我們。

Read More
WordPress 主题

如何在WordPress中設置oEmbed最大寬度(4種簡單方法)

為什麼要在WordPress中修正oEmbed最大寬度?

WordPress支持oEmbed,允許您自動嵌入來自第三方網站的內容,例如YouTube影片、SlideShare演示文稿和推文。由於這些內容不會儲存在您的伺服器上,因此不會拖慢網站速度。

然而,有時嵌入內容可能過於寬大並重疊到網站的其他內容區域。不幸的是,您無法使用內建的WordPress工具設置第三方嵌入的最大寬度。讓我們來看看如何添加這個缺失的功能,並在WordPress中設置oEmbed最大寬度。

方法1:使用嵌入短代碼(最佳用於YouTube影片)

您可以使用短代碼設置最大寬度。如果您僅希望為少量文章設置最大寬度,這是個簡單的方法。注意,短代碼及其寬度和高度參數並不適用於所有oEmbed供應商。如果您發現某個嵌入短代碼不起作用,可以嘗試其他方法。

例如,您可以將以下內容包裹在嵌入標籤中:

只需更改寬度和高度值以符合您的需求,並替換為您想嵌入的URL。完成後,點擊「更新」或「發佈」。嵌入內容應該現在恰好適合可用空間。

方法2:使用內建的WordPress嵌入塊(簡單)

WordPress塊編輯器來自帶有多個針對不同oEmbed服務的嵌入塊,例如Twitter、YouTube直播和SoundCloud的嵌入。這些塊可以改變嵌入的對齊方式,並設置為「寬寬度」或「全寬」。選擇「全寬」後,嵌入塊和嵌入內容將占滿整個螢幕的寬度。這是一個快速簡單的方法,不妨看看它是否適合您的網站。

方法3:使用自定義PHP(為所有嵌入設置最大寬度)

有時候你或許希望為所有嵌入內容設置最大寬度。最簡單的方法是向您的網站添加自定義代碼。使用WPCode插件可以輕鬆添加代碼片段而不需要編輯主題文件。WPCode帶有預配置的代碼片段,您可以指定oEmbed的最大寬度和高度,設置並啟用代碼片段後,它會自動在所有嵌入內容上生效。

方法4:使用CSS(為特定嵌入類型設置最大寬度)

WordPress會自動為網站的不同區域添加CSS類,您可以使用這些類來為特定的嵌入類型設置最大寬度。將嵌入內容放在頁面或文章中,然後預覽它並使用檢查工具查看嵌入內容的CSS類。根據內容類型,使用合適的CSS類設置最大寬度。

範例:

.wp-block-embed-pinterest { max-width: 900px!important; }

獎勵提示:如何輕鬆將您的社交媒體動態添加到WordPress

如果您經常嵌入來自社交媒體平台的內容,可以使用Smash Balloon插件更輕鬆地將您的社交媒體動態添加到WordPress網站,支持所有流行的社交媒體嵌入,並且與任何WordPress主題兼容,使您的嵌入內容看起來始終很棒。

希望本文幫助您學習如何在WordPress中設置oEmbed最大寬度。您還可以查看我們關於如何輕鬆嵌入iFrame代碼的指南,或者我們的最佳小型企業即時聊天軟體比較。

Read More
WordPress 主题

如何在 WordPress 中建立自訂首頁(3 種方法)

想在 WordPress 中建立一個能夠真正展示您網站風貌的自訂首頁嗎?首次印象很重要,我們在 WPressize Me 幫助了無數用戶創建吸引人眼球的首頁來吸引訪客。

默認的 WordPress 首頁雖然功能完整,但未必是迎接觀眾的最佳方式。您需要一個能夠展示最佳內容、產品或服務的首頁。這個設計應該能夠吸引並留住訪客。

什麼是首頁?

首頁是訪客輸入您的域名後首先看到的頁面。對許多人來說,這個首頁是他們對您業務、博客或網站的第一印象。

一個好的首頁會讓訪客想要了解更多關於您網站的資訊,同時也會提供方便訪客找到有趣內容的連結、搜索欄和目錄。

默認的 WordPress 首頁顯示的是您的最新博客文章,這對個人博客或興趣博客可能是個不錯的選擇。然而,如果您是使用 WordPress 網站運營業務的話,則可能希望創建一個自訂的首頁來突出顯示您的產品和服務。好消息是,WordPress 讓您可以輕鬆顯示自訂頁面作為首頁,而不是默認的最新文章列表。

如何將自訂頁面設置為 WordPress 首頁?

在本指南中,我們將展示幾種不同的方法來創建自訂首頁。然而,無論您使用哪種方法,在創建靜態首頁後,您都需要更改 WordPress 設置。

要進行此更改,只需前往 WordPress 儀表板中的 設置»閱讀

在這裡,滾動到「您的首頁顯示」並選擇「靜態頁面」。然後,打開「首頁」下拉菜單並選擇您想用作新首頁的頁面。最後,滾動到屏幕底部並點擊「保存更改」。現在,您可以訪問您的網站查看新的自訂首頁了。如果您有博客,請務必創建一個單獨的博客頁面來顯示您的文章,否則訪客會很難找到您最新的博客文章。

現在,我們來看看如何在 WordPress 中設計自訂首頁。您可以使用快速連結直接跳到您想使用的方法:

  • 方法 1:使用 Block Editor 創建自訂首頁模板(無需插件)
  • 方法 2:使用 Page Builder 在 WordPress 中創建自訂首頁(推薦)
  • 方法 3:手動創建 WordPress 自訂首頁(需要編碼)

方法 1:使用 Block Editor 創建自訂首頁模板(無需插件)

如果您使用的是 Block 主題,可以使用完全站點編輯器設計自訂首頁模板。此方法不適用於所有主題,因此如果您沒使用基於 Block 的 WordPress 主題,則需要使用本指南中介紹的其他方法之一。要了解更多關於完全站點編輯的信息,請參考我們的 WordPress 初學者指南。

首先,創建新頁面或打開您想用作首頁的現有頁面。在右側菜單中,點擊「頁面」標籤,然後選擇在「模板」旁出現的連結。彈出窗口中會顯示當前模板。點擊「新建模板」圖標。在彈出窗口中,給您的模板命名。名稱僅供引用,因此您可以使用任何您想要的名稱。然後,點擊「創建」以進入完全站點編輯器。模板編輯器的工作方式類似於標準的 WordPress Block 編輯器。

要添加 Block 到您的自訂首頁,只需點擊藍色的「+」按鈕。您可以通過拖放將任何 Block 添加到您的佈局中。由於我們在創建自訂首頁,您通常會想要首先添加一個大圖,例如您網站的標誌或橫幅。找到左側菜單中的圖像 Block,然後使用拖放將其添加到佈局中。現在,您可以從 WordPress 媒體庫中選擇圖像或從計算機上傳新文件。為了獲得更多互動,您可能想通過添加“最新評論” Block 在首頁顯示最近的評論。

更多信息請參考我們的指南,了解如何在 WordPress 主題的首頁顯示評論。一個好的首頁有助於訪客找到有趣的內容。因此,建議您在自訂首頁上添加導航 Block。更多信息,請參考我們的逐步指南,了解如何在 WordPress 主題中添加自訂導航菜單。

添加 Block 後,確保在佈局中點擊選中它。然後,可以使用右側菜單中的設置和迷你工具欄中的按鈕配置該 Block。要構建自訂首頁,只需繼續添加更多 Block,然後使用完全站點編輯器設置進行配置。例如,您可能想要添加“最新文章”、“搜索”、“社交圖標”、“標籤雲”等 Block。

當您對模板的外觀感到滿意時,點擊「發布」按鈕。先前創建的頁面現在將使用新首頁模板。按照上面的過程讓 WordPress 使用此頁面作為您的首頁。

方法 2:使用 Page Builder 在 WordPress 中創建自訂首頁(推薦)

WordPress 的 Block 基於編輯器允許您使用已熟悉的工具創建自訂首頁。然而,它並非適用於所有主題,並且在靈活性和功能上有限。此外,WordPress 主題自定義工具對於非 Block 主題用戶來說並不是最用戶友好的選項,因為它不具備拖放功能。如果您想創建一個完全自訂的首頁,適用於任何 WordPress 主題,那麼您需要一個 Page Builder 插件。

在此方法中,我們將使用 SeedProd。它是市場上最好的 Page Builder 插件,允許您使用簡單的拖放編輯器創建自訂首頁。它還擁有超過 300 個專業設計的模板和現成的 Block,您可以在首頁中使用。

注意:WordPress.org 上有免費版 SeedProd,但我們將使用專業版,因為它具有更多模板、Block 和功能。

首先,您需要安裝並啟用 SeedProd 插件。更多細節,請參考我們的逐步指南,了解如何安裝 WordPress 插件。激活後,您需要輸入許可證密鑰。您可以在 SeedProd 網站的賬戶中找到這些信息。輸入許可證密鑰後,點擊「驗證鍵」按鈕。

使用 SeedProd 創建新的首頁

此時,您需要訪問 SeedProd » Pages 並點擊「添加新登陸頁」。

之後,選擇一個適合您網站需要的專業設計模板。將滑鼠懸停在模板上,點擊「選中」圖標。我們在所有圖片中使用「Juicy Sales Page」模板,但您可以使用任何設計。接下來,輸入自訂首頁的名稱。SeedProd 將自動根據頁面標題創建 URL,但您可以將此 URL 更改為任何您想要的地址。當您對所輸入的信息感到滿意時,點擊「保存並開始編輯頁面」按鈕。

接下來,您將進入 SeedProd 的拖放頁面構建器,可以自訂您的模板。SeedProd 編輯器在右側顯示設計的實時預覽,左側顯示一些 Block 設置。左側菜單還有一些可以拖入佈局的 Block。例如,您可以拖放簡單的 Block 如按鈕和圖像,還可以使用高級 Block,如倒計時計時器、聯繫表單、社交分享按鈕等。

要自訂任何 Block,只需點擊佈局中的 Block。左側菜單將顯示所有自訂選項來配置該 Block。您還可以更改頁面的背景顏色、添加背景圖像,或更改配色方案和字體以更好地匹配您的品牌。您甚至可以使用 CSS 動畫來吸引訪客的注意力。

首先,您可能希望用自己的照片或自訂標誌替換任何佔位符圖像。要做到這一點,只需點選任何 Image Block。然後在左側菜單中點擊「選擇圖像」按鈕。您可以從 WordPress 媒體庫中選擇圖像或從計算機上傳新文件。

SeedProd 配有“區塊”,這些區塊是經常一起使用的 Block 集。例如,SeedProd 有頭部、主圖、行動呼籲、證言、聯繫表單、常見問題解答、功能和頁腳區塊,這些可以幫助您快速創建自訂首頁。

要查看不同的區塊,只需點擊「區塊」標籤。要預覽任何區塊,將滑鼠懸停在其上,然後點擊放大鏡圖標。要將區塊添加到設計中,點擊「選擇此區塊」將區塊添加到首頁的底部。您可以使用拖放功能移動區塊和 Block 到佈局中的不同位置。當您對首頁外觀滿意時,別忘了點擊「保存」按鈕以保存您的更改。

將您的首頁與電子郵件行銷服務連接

如果您計劃運行電子郵件行銷活動,首頁是顯示註冊表單的最佳位置之一。SeedProd 讓您輕鬆地將首頁連接到流行的電子郵件行銷服務,如 Constant Contact。

要做到這一點,只需點擊「連接」標籤,然後選擇您的電子郵件服務提供商。SeedProd 將顯示如何將首頁與您的電子郵件行銷服務連接。

如果您的提供商不在列表中,不用擔心。SeedProd 支援 Zapier,Zapier 可以作為 SeedProd 與 3000 多個應用之間的橋樑。只需滾動到“其他”部分,將滑鼠懸停在“Zapier”上。當“連接”按鈕出現時,單擊它,然後按照屏幕上的指示將 SeedProd 與 Zapier 連接。

發佈您的 SeedProd 首頁

完成所有前面的步驟後,您已準備好發佈您的自訂首頁。只需點擊「頁面設置」標籤。頁面設置標籤下還有更多選項可供查看。 例如,您可以更改 SEO 設置、編輯頁面標題,並連接自訂域名。

當您對頁面的設置感到滿意時,選擇「一般」標籤。然後點擊「頁面狀態」開關,將其從「草稿」更改為「發布」。現在,您只需前往 設置»閱讀,並將此頁面設置為新的自訂首頁。

方法 3:手動創建 WordPress 自訂首頁(需要編碼)

創建自訂首頁的另一種方法是使用代碼,這可以讓您完全控制網站外觀。然而,這種方法可能很複雜,編碼錯誤可能會導致各種常見的 WordPress 錯誤。因此,我們不建議初學者使用此方法。

您的 WordPress 主題由許多不同的文件組成,其中一些文件稱為模板,它們控制著網站不同區域的外觀。更多信息,請參考我們的 WordPress 模板層次結構速查表。

其中一個模板文件稱為 front-page.php。如果您的主題包含此模板,WordPress 將自動使用它來顯示首頁。這意味著您可以通過編輯此文件或用新文件替換它來創建自訂首頁。開始編輯前,您需要一個 FTP 客戶端,例如 FileZilla,或者您可以使用 WordPress 託管提供商提供的文件管理器。如果這是您第一次使用 FTP,請參考我們的完整指南,了解如何使用 FTP 連接到您的網站。

連接到服務器後,前往 /wp-content/themes/ 並打開當前的 WordPress 主題文件夾。如果此文件夾已經有 front-page.php 文件,您可以在文本編輯器(例如 Notepad)中打開該文件。然後可以通過編輯代碼進行任何更改。如果您的主題沒有 front-page.php 文件,可以創建一個新文件,命名為 front-page.php。 然後,將 front-page.php 文件上傳到您當前主題的文件夾中。

一旦上傳此文件,WordPress 將開始使用它來顯示首頁。然而,由於文件完全是空的,您會看到一個空白頁作為首頁。 要修正這個問題,只需在文本編輯器中打開該文件並開始添加 HTML 代碼。如果您從空文件開始,可以通過使用現有的 WordPress 主題中的代碼和模板來節省一些時間。例如,通常來說,包含主題的頭部和頁腳是有意義的。

在以下範例代碼中,我們移除了內容和側邊欄,同時從主題中提取了頭部和導航模板:


>
您自訂首頁的代碼在這裡
//Fetch the theme footer template

發現更多專家提示來自訂 WordPress 頁面和文章

  • 如何在 WordPress 中按瀏覽次數顯示熱門文章
  • 打造高轉換率登陸頁面的結構
  • 如何自訂 WooCommerce 產品頁面(無需代碼方法)
  • 如何在 WordPress 中創建自訂存檔頁面
  • 如何在 WordPress 中顯示最多評論的文章
  • 如何輕鬆重新排序 WordPress 文章(逐步指南)
  • 如何在 WordPress 中製作置頂文章
  • 如何在 WordPress 中顯示特定分類的最近文章
  • 如何在 WordPress 中隱藏首頁上的文章

我們希望這篇文章能幫助您在 WordPress 中創建自訂首頁。您還可能想查看我們的 WordPress 最佳熱門文章插件推薦和我們每個 WordPress 博客應該擁有的重要頁面列表。

如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道 以獲取更多 WordPress 視頻教程。您也可以在 TwitterFacebook 上找到我們。

Read More
WordPress 主题

如何建立WordPress子佈景主題(初學者指南)

如何建立WordPress子佈景主題(初學者指南)

最後更新:2024年5月9日,由編輯部 撰寫 | 評審:Syed Balkhi

你想在WordPress中創建一個子佈景主題嗎?子佈景主題是一種從另一個WordPress佈景主題繼承功能的佈景主題。許多用戶會為其當前的佈景主題創建一個子佈景主題,以便在佈景主題開發者釋出更新時能夠安全地自訂網站設計而不會丟失更改。在這篇文章中,我們將向你展示如何為你的WordPress網站創建一個子佈景主題。

子佈景主題如何運作,為什麼你需要它?

子佈景主題繼承了另一個WordPress佈景主題的所有功能、特性和樣式。當你創建一個子佈景主題時,原始佈景主題被稱為父佈景主題。繼承包括父佈景主題的style.css檔案,該檔案定義了佈景主題的主要樣式。子佈景主題可以通過添加自己的檔案或修改現有的檔案來覆蓋或擴展其繼承的屬性。

雖然可以在不安裝子佈景主題的情況下自訂你的WordPress佈景主題,但你可能仍然需要子佈景主題的幾個原因:

  • 子佈景主題保護你的自訂設計免受佈景主題更新的影響,保持自訂設計安全,不會被覆寫。如果你直接修改父佈景主題,那麼這些調整可能會在更新時消失。
  • 子佈景主題允許你安全地嘗試新的設計或功能,而不會破壞網站的原佈景主題,類似於一個測試環境。
  • 如果你知道如何編碼,那麼子佈景主題可以使開發過程更加高效。子佈景主題的檔案比父佈景主題的檔案簡單得多。你可以專注於只修改你想改變或擴展的那部分父佈景主題。

在創建WordPress子佈景主題之前要做什麼?

我們見過很多WordPress用戶在進入技術細節時感到興奮,只有在錯誤出現時才變得沮喪。我們明白,這就是為什麼在創建子佈景主題之前了解你即將進入的事情是很重要的。以下是我們建議你在繼續這份逐步指南之前首先要做的一些事情:

  • 注意你將與代碼打交道。至少,你需要對HTML、CSS、PHP,以及可選的JavaScript有基本的了解,以理解你需要進行的更改。你可以在WordPress佈景主題手冊中閱讀更多關於這方面的信息。
  • 選擇一個具有你所需網站設計和功能的父佈景主題。如果可能的話,找到一個只需要進行少數更改的佈景主題。
  • 使用本地站點或測試站點進行佈景主題開發。你不希望在你的線上站點上創建無意的錯誤。
  • 首先備份你的網站。

有幾種方法可以從你的現有佈景主題中創建一個子佈景主題。一種是手動代碼,而另一種需要使用插件,這種方法對初學者而言更加友好。如果你缺乏技術經驗,第一種方法可能會看起來很令人生畏。也就是說,即使你選擇了一種插件方法,我們仍然建議你閱讀手動方法,以便熟悉過程和涉及的檔案。

方法一:手動創建子WordPress佈景主題

首先,你需要打開你WordPress安裝目錄中的/wp-content/themes/。你可以通過使用你的WordPress主機提供的文件管理器或FTP客戶端來做到這一點。我們發現第一種選項要容易得多,所以我們將使用它。如果你是Bluehost客戶,那麼你可以登入你的主機帳號儀表板並導航到「網站」標籤。之後,點擊「設置」。在概覽標籤中,向下滾動到「快速鏈接」部分。然後,選擇「文件管理器」。

在這個階段,你需要進入你網站的public_html文件夾並打開/wp-content/themes/路徑。在這裡,只需點擊左上角的「+文件夾」按鈕,為你的子佈景主題創建一個新的文件夾。你可以隨意命名這個文件夾。在這個教程中,我們將使用twentytwentyone-child作為文件夾名稱,因為我們將使用Twenty Twenty-One作為我們的父佈景主題。完成後,只需點擊「創建新文件夾」。

接下來,你必須打開你剛創建的文件夾並點擊「+文件」來創建你的子佈景主題的第一個檔案。如果你使用FTP客戶端,那麼你可以使用類似Notepad的文字編輯器來編輯文件並稍後上傳檔案。

請為此文件命名為style.css,因為它是你的子佈景主題的主要樣式表,並將包含有關子佈景主題的信息。然後,點擊「創建新文件」。現在,只需右鍵單擊style.css文件。之後,點擊「編輯」以打開一個新標籤,如以下截圖所示。在此新標籤中,你可以貼上以下文本並根據你的需求進行調整:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

完成後,只需點擊「保存更改」。

Read More
WordPress 主题

如何在 WordPress 帖子和頁面中添加編輯鏈接

Why Add an Edit Post Link to WordPress Posts and Pages?

在 WordPress 帖子和頁面中添加「編輯」鏈接可以讓您快速、方便地對內容進行更改。這樣您就不需要在 WordPress 控制面板中搜索帖子和頁面,直接點擊網站前端的「編輯」鏈接即可直接打開編輯器屏幕。

注意:編輯鏈接僅對已登錄並擁有相應用戶角色和權限的用戶可見。許多 WordPress 主題都包含此功能,但有時候開發者會將其移除。如果您的主題沒有此功能,您需要手動添加。

How to Add an Edit Post Link to WordPress Posts and Pages

要在 WordPress 中添加編輯鏈接,您需要向 WordPress 文件中添加代碼。我們將展示兩種不同的方法來向您展示如何添加此代碼:方法一:使用 WPCode 在 WordPress 中添加編輯鏈接(推薦);方法二:通過手動編輯主題文件添加編輯鏈接。

Method 1: Add an Edit Post Link in WordPress using WPCode (Recommended)

在這種方法中,您需要通過編輯主題的 functions.php 文件或使用代碼片段插件來添加代碼片段。您可以參考我們的指南,了解如何將代碼片段從網絡粘貼到 WordPress 中。這裡我們將使用 WPCode 插件,而不直接編輯 functions.php 文件。

我們強烈建議使用 WPCode 插件,因為它免費、易於使用,並且即使出現問題也不會損壞您的網站。首先,您需要安裝並激活免費的 WPCode 插件。您可以參考我們的指南,了解如何安裝 WordPress 插件。

注意:WPCode 的免費版本包含您需要的所有功能來向 WordPress 添加自定義代碼。如果您需要更高級的功能,如定時片段、轉化像素等,您可以升級到 WPCode Pro。

插件激活後,WordPress 管理員欄中會新增一個名為「Code Snippets」的菜單項。點擊它會顯示您網站上保存的所有自定義代碼片段列表。由於您剛安裝此插件,列表應該是空的。現在點擊「Add New」按鈕來添加代碼片段。

這將帶您進入「添加片段」頁面。在這裡,您可以從內置庫中選擇代碼片段,或添加自己的自定義代碼。本文將導航到「Add Your Custom Code (New Snippet)」選項並點擊「Use snippet」按鈕。

接下來,您需要為您的片段命名(我們稱其為「Add edit link to single posts」),然後將下面的代碼複製並粘貼到「Code Preview」框中:

add_action('loop_start', function () { if (!is_singular() || !is_main_query()) { return; } edit_post_link(__('{Edit}')); }, 99);

不要忘記在屏幕右側的下拉菜單中選擇「PHP Snippet」作為代碼類型。該代碼片段會將編輯鏈接添加到單個帖子和頁面中。向下滾動到插入部分,確保插入方法為「Auto Insert」並且位置為「Run Everywhere」。然後,將開關從「Inactive」切換到「Active」並點擊頂部的「Save Snippet」按鈕。

現在,當您查看博客帖子的時候,應該會看到頂部有一個「編輯」鏈接。我們的測試站點使用的是 Astra 主題,編輯鏈接出現在那裡。根據您的 WordPress 主題,外觀可能會有所不同。

Method 2: Add an Edit Post Link by Manually Editing Your Theme Files

您可以直接修改主題文件,或創建子主題來覆蓋這些主題文件。我們建議創建子主題,以免在更新主題時丟失已做的更改。詳情請參閱我們的初學者指南,了解如何創建 WordPress 子主題。

無論是直接編輯主題文件,還是創建子主題,您需要複製並粘貼以下代碼,並將其添加到您的主題的 single.php、post.php、index.php 或其他內容模板文件中:

<?php edit_post_link(__(' {Edit} ')); ?>

此代碼會簡單地向您的 WordPress 帖子和頁面添加一個「編輯」鏈接。您可以將「{Edit}」文本更改為您希望鏈接顯示的任何文本。對於大多數主題,您應將此代碼添加到帖子循環中後緊跟著帖子元數據的部分。

例如,這是將代碼添加到主題的帖子元數據末尾的方式:

By <?php the_author_posts_link(); ?> on <?php the_time('F jS, Y'); ?>  in <?php the_category(', '); ?> <?php edit_post_link(__(' {Edit} '), ''); ?>

您也可以將此代碼添加到希望顯示編輯鏈接的主題的任何部分。例如,您可以將其添加到帖子內容的底部。添加代碼並保存文件後,您需要將其上傳到 WordPress 託管帳戶中的主題目錄。要做到這一點,您可以使用 FTP 客戶端或 WordPress 託管控制面板中的文件管理器選項。

如果您以前沒有使用過 FTP,請參閱我們的指南,了解如何使用 FTP 將文件上傳到 WordPress。現在,當您登錄到 WordPress 並在前端查看帖子或頁面時,只需點擊「編輯」鏈接,即可進入帖子編輯器屏幕。

希望本文能幫助您學會如何為 WordPress 帖子和頁面添加快速編輯按鈕。您可能還會想查看我們的指南,了解如何獲取免費的 SSL 證書,以及我們為小型企業精選的最佳電子郵件營銷軟件。

如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道,以獲得更多 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。

Read More
WordPress 主题

如何在WordPress中輕鬆樣式化標籤(附範例)

如何在WordPress中輕鬆樣式化標籤(附範例)

多年間,WPressize Me收到許多關於標籤的問題,其中之一是是否應該在WordPress中樣式化標籤以使其更為顯眼。標籤有助於根據主題組織內容,像是WordPress文章的標籤,幫助用戶發現更多內容。但根據我們的經驗,如果它們在視覺上不突出,可能會被忽略。

在本文章中,我們將向您展示如何輕鬆地在WordPress中樣式化標籤以獲得更多用戶互動和頁面瀏覽量。

如何在WordPress中顯示標籤

WordPress自帶兩種主要的分類法,稱為分類和標籤。分類用於內容的主要範疇,而標籤則允許您將內容分類到更具體的主題中。許多熱門的WordPress主題會在帖子頂部或底部顯示標籤。

然而,您也可以在歸檔頁、頁腳、側邊欄以及幾乎任何您想要的地方顯示標籤。要在帖子、頁面和側邊欄小部件中插入標籤雲,只需添加“標籤雲”塊即可。

標籤雲會根據帖子數量為每個標籤分配不同的字體大小。您還可以選擇在每個標籤旁邊顯示貼文數量。

這些只是WordPress提供的默認選項,但如果您想進一步自定義標籤呢?我們將向您展示如何操作。

樣式化WordPress中的預設標籤雲

在向帖子或頁面添加標籤雲塊後,您可以通過添加自定義CSS進行自定義。標籤雲塊會自動包含默認的WordPress生成的CSS類,可以用來樣式化它們。

要向您的WordPress網站添加自定義CSS,只需轉到外觀 » 自定義頁面,切換到附加CSS標籤。

您可以從以下自定義CSS代碼開始:

.tag-link-position-1 { font-size: 40px !important; } .tag-link-position-2 { font-size: 35px !important; } .tag-link-position-3 { font-size: 30px !important; } .tag-link-position-4 { font-size: 35px !important; } .tag-link-position-5 { font-size: 30px !important; } .tag-cloud-link { text-decoration: none; background-color: #fff; } .tag-link-count { background-color: #d6d6d6; }

如您所見,您可以使用.tag-link-position類根據鏈接的位置調整樣式。帖子數量多的標籤位置較高,帖子數量少的標籤位置較低。

如果您希望標籤雲塊中的所有標籤都具有相同的大小,可以使用以下CSS:

.tag-cloud-link { font-size: 16px !important; border: 1px solid #d6d6d6; } .tag-cloud-link { text-decoration: none; background-color: #fff; } .tag-link-count { background-color: #d6d6d6; }

樣式化WordPress中的標籤

除了樣式化標籤雲,您可能還希望樣式化顯示在單個博客帖子上的標籤。通常,您的WordPress主題會在標題或內容的頂部或底部顯示它們。

可以鼠標懸停在標籤上右鍵單擊使用檢查工具查看主題使用的CSS類。

之後,您可以在自定義CSS中使用這些CSS類。以下是基於我們測試主題CSS類的樣本代碼:

.entry-tag { padding: 5px 8px; border-radius: 12px; text-transform: lowercase; background-color: #e91e63; color: #fff; } .entry-tags a { color: #fff; font-size: small; font-weight: bold; }

在WordPress中創建自定義標籤雲

默認的標籤雲塊易於使用,但某些高級用戶可能希望對其進行自定義,以便擁有更多靈活性。此方法允許您添加自己的HTML和CSS類包圍標籤雲。這樣,您可以根據自己的需求自定義標籤雲的外觀。

首先,您需要將此代碼複製並貼入主題的functions.php文件或代碼片段插件中:

function wpb_tags() { $wpbtags = get_tags(); foreach ($wpbtags as $tag) { $string .= 'term_id) . '>' . $tag->name . '' . $tag->count . '' . 'n'; } return $string; } add_shortcode('wpbtags', 'wpb_tags');

我們建議使用WPCode添加此代碼,這是WordPress最佳代碼片段插件。它允許您輕鬆添加自定義代碼而不需編輯主題的functions.php文件,這樣您就不會破壞網站。要開始,安裝並啟用免費的WPCode插件。如果需要幫助,請參見我們的教程:如何安裝WordPress插件。

激活插件後,從WordPress儀錶板前往代碼片段 » 添加片段。然後,將鼠標懸停在“添加自定義代碼(新片段)”選項上,單擊“使用片段”按鈕。

在這裡,您可以在頁面頂部為片段添加標題。這可以是任何幫助您記住代碼用途的標題。接下來,將上面的代碼粘貼到“代碼預覽”框中,並從下拉菜單中選擇“PHP片段”作為代碼類型。

之後,只需將開關從“非活躍”切換到“活躍”,然後單擊“保存片段”按鈕。

此代碼添加了一個短代碼,顯示所有標籤及其旁邊的帖子數量。要在歸檔頁或小部件中顯示它,您需要使用此短代碼:

[wpbtags]

僅使用此代碼會顯示標籤鏈接及其旁邊的帖子數量。讓我們添加一些CSS使其看起來更好。只需將此自定義CSS複制並粘貼到您的網站上:

.tagbox { background-color: #eee; border: 1px solid #ccc; margin: 0px 10px 10px 0px; line-height: 200%; padding: 2px 0 2px 2px; } .taglink { padding: 2px; } .tagbox a, .tagbox a:visited, .tagbox a:active { text-decoration: none; } .tagcount { background-color: green; color: white; position: relative; padding: 2px; }

隨意修改CSS以符合您的需求。這是在我們的演示站點上的效果:

我們希望這篇文章能幫助您了解如何在WordPress中輕鬆樣式化標籤。您可能還想查看我們的指南:如何在WordPress中隱藏或樣式化子分類,或查看這些有用的WordPress提示、技巧和黑客列表。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道獲取WordPress視頻教程。您也可以在Twitter和Facebook上找到我們。

Read More