WordPress

設定相關

我推薦的外掛

01

Gutenberg

很好用的WP EDITOR,如果要內文有語義(semantic)又可配合不同外掛,我首選這個

02

Enlighter - Customizable Syntax Highlighter

想在文中加入代碼? 這個好!

03

Insert Headers and Footers

要加GA?要加Bootstrap? 用這個就可以

04

Simple Custom CSS and JS

如果想自訂CSS/JS又唔想upload去Server同改Template,這個可以。

05

WP Sticky Sidebar

用這個就可以當向下Scroll時令Sidebar位置保持住

06

PHP Everywhere

可以做到你想點就點,但要小心你的錯誤會導致Crash,如有此情況可以暫時停用它。

還有以下的外掛我正使用中:

給階層頁面用的頁面目錄/導航

近來我嘗試用Page而不用Blog Post寫文章,故想為階層頁面加一個頁面目錄(Table of Content / TOC)或導航。我想這個TOC以小工具(Widget)方式放到側欄(Sidebar),當瀏覽屬同一個階層頁面時就自動出現,最理想是可標記當前位置/頁面。

方法(1)- 頁面小工具

  1. 在側欄(Sidebar)加入 "頁面小工具"(Page/Book Page Widget)
    1. 將 “可見度” 設為 - 在頁面是 XXXX (父頁)情況下顯示並包括 “孩童” (Children) 頁在內。
  2. 問題是"頁小工具"會包括所有頁,所以必須把不用的頁面ID加到 “排除” 中。

此方法我認為是基本,但不知是否Wordpress Jetpack的 “小工具可見度” 的bug還是限制,如當前頁面為第3層或以上,小工具就不會顯示,目前的版本為: WordPress 5.1.1–zh_HK 和 Jetpack 7.1.1。總之還是把方法記下來,返正不好用。

方法(2)- 外掛:小工具

使用外掛就可自定只顯示某父頁及其子頁,一般的功能可以用Shortcode也提供Widget便可,我找到2個:CC Child PagesAdvanced Sidebar Menu。這兩個都不錯,我現在用Advanced Sidebar Menu。

  1. 在側欄(Sidebar)加入 "CC Child Pages" 或 "Advanced Sidebar Pages Menu" 小工具
  2. 在小工具的設定中
    1. 如果是CC Chide Page,就要在Parent 選 XXXX (父頁)
    2. 如果是Advanced Sidebar Pages Menu,就選 Display menu when there is only the parent page 和 Always display child pages
    3. Order by: 選 Page Order

同方法(1)一樣,如當前頁面為第3層或以上,小工具就不會顯示。

方法(3)- 外掛:小工具 + PHP Code

如果想有更大自由度當然直接寫CODE,WP有幾個外掛可做到:

跟方法(1)、(2)差不多,只是直接打入代碼出輸你要的結果便可,以下例子是例出當前頁及其子頁(只有1層),並使用Bootstrap的List:

<?php
$childArgs = array(
    'parent' => get_the_ID(),
    'depth' => 1,
    'sort_order' => 'ASC',
    'sort_column' => 'menu_order',
    //'post_status' => array( 'publish', 'private' )
);

$childList = get_pages($childArgs);
if (!empty($childList)) {
    echo '<div class="list-group">';
    foreach ($childList as $child) {
        echo '<a href="' . $child->post_name .'" class="list-group-item list-group-item-action">' . $child->post_title . "</a>";
    }
    echo '</div>';
}
?>

解決Jetpack的 “小工具可見度” 的bug/限制

無論用那種方法仍解決Jetpack的"小工具可見度"問題,那麼就利用別的外掛吧。目前找到一個叫 Widget Logic 的很棒,只是要一點編程技巧。

  1. 在上面的方法中,取消/不使用Jetpack的 “可見度(Visibility)”,並在 “Widget Logic” 一欄中打入以下Logic (注意,477 為父頁的頁面ID,請自行更改):
global $post; return ($post->ID==477||end(get_post_ancestors($post))==477);