分類
wordpress

快速學習WordPress Child Theme製作方式

在 WordPress 中, 佈景主題 (Theme) 是很重要的功能之一, 不過往往因為需要自訂一些特殊功能或介面, 需要調整 Theme 的檔案.

一旦更新了 Theme, 又會將原本自行調整的功能覆寫掉, 如何能解決這個問題? 可以使用子佈景主題功能.

先來看看官方資料:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

我們可以自建一個子佈景主題來達成這樣的應用需求, 簡易步驟說明如下:

  1. 在 wp-content/themes/ 建立一個目錄, 以 twentyfifteen 佈景主題為例, 我們就建一個 twentyfifteen-child 這個目錄.
  2. 在這個子佈景主題目錄下建立兩個檔案:
    1. style.css 內容用註解的方式, 但需要有以下兩項屬性, Theme Name 與 Template, 例如:
      /*
      Theme Name: Twentyfifteen Child
      Template: tweentyfifteen
      */
    2. functions.php 內容需要加入引用原始 style.css 功能, 如下:
      <?php
      add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
      function enqueue_parent_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
      }
      ?>
  3. 其他若是有需要調整的程式碼, 以複製同檔名方式放在這個子佈景主題裡, 例如 header.php, 把原始 header.php 複製一份到子佈景主題, 再依自己客製求修改調整即可.

接下來只需要到管理介面啟用這個子佈景主題即可, 而未來的主佈景主題更新也不會影響這個子佈景主題, 但若是 header.php 有一定幅度的更新時, 自行修改的部分, 也是需要留意與主佈景主題的相容性狀況.

另外也請參考 hubspot 的這篇:

https://blog.hubspot.com/website/wordpress-create-child-theme

 

 

分類
wordpress

[WordPress]快速匯入JSON/CSV/XML內容至wordpress

這裡要介紹的是快速將 JSON/CSV/XML檔案的內容至 wordpress 裡的方法, 介紹使用工具為:

https://wordpress.org/plugins/wp-all-import/

雖然沒有 JSON 檔案格式, 不過可以利用這個線上工具進行:

分類
wordpress

使用Enlighter於TwentyTwenty Theme的對齊問題

使用 Enlighter 用來做在 WordPress 中顯示程式碼的高亮語法十分方便好用. 不過在 TwentyTwenty Theme 中, 會靠到最左側, 導致閱讀不順利, 檢查一下是 css margin 的問題.

不過在 Enlighter plugin 有回報與解法:

https://github.com/EnlighterJS/documentation/blob/master/wordpress/WPThemeCompatibility.md

只需要自訂 css 中增加:

.enlighter-default{
    margin: 0 auto 1.25em auto;
}

就可以了!

PS. 若在 multi-site環境下的 wordpress , 另外需要這個 plugin 來達成 custom css (附加css) 的功能: https://wordpress.org/plugins/multisite-custom-css/