WordPress

設定相關

我推薦的外掛

Gutenberg

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

Enlighter - Customizable Syntax Highlighter

想在文中加入代碼？這個好！

Insert Headers and Footers

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

Simple Custom CSS and JS

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

WP Sticky Sidebar

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

PHP Everywhere

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

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

Advanced Sidebar Menu - 可做頁面目錄
Table of Contents Plus - 可按文中Header自動生成 TOC
Open external links in a new window
TinyMCE Advanced - 這個就不用多說吧，就算用了Gutenberg，Classic Mode都用得著
Custom Sidebars - 可讓Sidebars更配置得更靈活
For Gutenberg:
- Atomic Blocks - Gutenberg Blocks Collection
- Stackable - Gutenberg Blocks
Widget Logic - 能編程控制小工具的可見度(Visibility)
jQuery Updater - 能令WP用上新版本的JQuery
For Shortcode:
- Bootstrap 3 Shortcodes
- Shortcodes Ultimate - 更多可用的Shortcodes
Advanced WordPress Backgrounds - 可做Parallax Effect(但未真正用)
TablePress - 可以把CSV等漂亮地顯示

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

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

方法（1）- 頁面小工具

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

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

方法（2）- 外掛:小工具

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

在側欄(Sidebar)加入 "CC Child Pages" 或 "Advanced Sidebar Pages Menu" 小工具
在小工具的設定中
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 的很棒，只是要一點編程技巧。

在上面的方法中，取消/不使用Jetpack的 “可見度(Visibility)”，並在 “Widget Logic” 一欄中打入以下Logic （注意，477 為父頁的頁面ID，請自行更改）:

global $post; return ($post->ID==477||end(get_post_ancestors($post))==477);