設定相關
我推薦的外掛
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:
- Widget Logic - 能編程控制小工具的可見度(Visibility)
- jQuery Updater - 能令WP用上新版本的JQuery
- For Shortcode:
- 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)
- 將 “可見度” 設為 - 在頁面是 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" 小工具
- 在小工具的設定中
- 如果是CC Chide Page,就要在Parent 選 XXXX (父頁)
- 如果是Advanced Sidebar Pages Menu,就選 Display menu when there is only the parent page 和 Always display child pages
- 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);