Wordpress 學習筆記 — 實作練習(含 ultimate member, woocommerce)

20 min readMay 30, 2019

目的：紀錄 Wordpress 專案實作客製化頁面過程、觀念釐清、細節處理。

實作內容：
1. Wordpress指令、環境建置
2. 主題 Theme 製作
3. Ultimate Member — 會員追蹤、會員 Profile、會員列表
4. WooCommerce — 線上商城、會員付費訂閱
5. 其他外掛輔助：Duplicate Post, Favoriteposts,
Wp Facebook Login for WordPress, Advanced Custom Fields, Duplicator, Fancy Facebook Comment, TinyMCE Advanced, Advanced Gutenberg, BLock Lab, Disable Gutenberg Blocks — 區塊管理程式, Forminator

1. Wordpress指令、環境建置

Documentation

安裝完 wordpress 後，因為有設計稿所以必須客製化一個主題，那一開始就先在 wp-content/themes 建立一個主題的資料夾，並且先建立 index.php 檔案，這個檔案是wordpress的進入點。為了重複利用固定區塊，利用兩行程式碼來引入兩個檔案：

引入 header.php 與 footer.php 簡單的前置作業便完成。而這兩個檔案裡面要放些什麼，就要依據設計稿決定如何切版之後再決定。

2. 主題 Theme 製作

Documentation，主要有 5 點事情要做：
1. style.css：主題的 style
2. functions.php：主題會用到的 functions
3. Template Files List：Wordpress 會辨識這些檔名必且套用到對應的地方。
4. 後台->外觀：「小工具」與「選單」顯示
5. 後台-> 外觀：佈景主題選擇
6. Gutenberg 編輯器樣式修正
7. 權限設置
8.限制搜尋範圍
9.後台選單顯示

1. style.css
主題主要的 css，根據官網說明，開頭必須要有主題的描述。

No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog.

主題描述的官方範例：

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Author 官方建議：The name used for the Author is suggested to be the same as the Theme Author’s wordpress.org username, although it can be the author’s real name as well. The choice is the Theme Author’s.

Tags：用來讓使用者尋找這個主題的關鍵字，如果你的主題是要上架到wordpress上。https://make.wordpress.org/themes/handbook/review/required/theme-tags/

實務上為了方便管理 css，用 scss 來撰寫樣式，並且最後包成 style.css 一個檔案。所以基本檔案管理應該會如下：

最後，將 style.css 引入的方式可以有三種：參考stackoverflow

// add in your header.php
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">// load css into the website's front-end
function mytheme_enqueue_style() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); 
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );// Add this code in your functions.php
function add_stylesheet_to_head() {
      echo "<link href='".get_stylesheet_uri()."' rel='stylesheet' type='text/css'>";
}
add_action( 'wp_head', 'add_stylesheet_to_head' );

javascript部分也是一樣的，值得一提的是另外如果要使用 Wordpress 本身的 jQuery，則要在自己的 js 檔案裡如此寫：

jQuery(function ($) {
  $('document').ready(function(){
    feather.replace();
  });
});

這樣才能依照一般習慣寫 $(‘document’).ready(function() {

2. functions.php

此檔案的運作方式就像是外掛
如果有此檔案，在 Wordpress 初始化時便會載入運作。
若同樣的 function 用在不同主題，請用 plugin，不要寫在 functions.php
內容建議為以下 4 點：
a. Enqueue theme stylesheets and scripts
b. Enable Theme Features
c. Define functions used in several template files of your theme.
d. Set up an options menu, giving site owners options for colors, styles, and other aspects of your theme.

3. Template Files List

以下檔案命名在 Wordpress 裡都有特殊意義，當檔名為這些時，頁面內容將會依照該檔案裡的內容顯示：

style.css：網站樣式。
rtl.css：網站從右至左開始閱讀的樣式。
index.php：網站主要模板。
comments.php：留言模板。
front-page.php：靜態首頁模板。可由控制台設定。
home.php：首頁模板。可由控制台設定。
single.php：文章模板
single-{post-type}.php：文章類型模板。
page.php：獨立、一般頁面模板。
category.php：文章分類模板。
category-{category-name}.php：特定文章分類模板。
tag.php：標籤模板。
taxonomy.php：客製化分類模板。
author.php：作者為條件搜尋後的模板。
date.php：時間為條件搜尋後的模板。
archive.php：用在分類、作者以及時間搜尋後的模板。此模板會被category.php, author.php, 以及 date.php 覆蓋。
search.php：搜尋後的模板。
attachment.php：附加檔案模板。
image.php：附加圖片模板。
404.php：當使用者輸入不存在的路徑時顯示的模板。

以上不一定全部都會用到，只需要根據設計稿，整理出需要切版的即可。

另外如果要客製化一個模板，當檔案建立時，開頭應該要有以下文字：

<?php
/*
Template Name: your template name
*/
?>

這樣在後台選單中才能選中此模板。

4. 後台->外觀：「小工具」與「選單」顯示

需要在 functions.php 增加一段程式碼：

<?php
  if ( function_exists('register_sidebar') ) {
    function sidebar1() {
      $args = array(
        'name'          => 'sidebar-1',
        'id'            => 'sidebar-1',
        'description'   => '',
        'class'         => '',
        'before_widget' => '<p>',
        'after_widget'  => '</p>',
        'before_title'  => '<h2>',
        'after_title'   => '</h2>'
      );
      register_sidebar( $args );
    }
  add_action( 'widgets_init', 'sidebar1' );
  }
?>

範例來自：https://muki.tw/tech/wordpress-sidebar-widget/

這樣就可以看到「小工具」跟「選單」出現在畫面上了。

更多 Options ：https://codex.wordpress.org/Function_Reference/register_sidebar

如果要在前台顯示，那就需要新增sidebar.php，內容可以參考這篇文章。http://justintadlock.com/archives/2010/11/08/sidebars-in-wordpress

5. 後台->外觀：佈景主題選擇自己客製化的該項目。

6. Gutenberg 編輯器樣式修正

Easily Add styles to Gutenberg Block Editor !!! - Phantom Themes

A WordPress theme can add stylesheet to change the Gutenberg editor's appearance. Generally changes done in the visual…

phantomthemes.com

有以下目的需要達成，所以需要調整 Gutenberg 編輯器樣式：
1. 想要達成所見即所得
2. 又想要大幅限制作者調整樣式的自由度
3. 依照 Design Guideline 執行

所以我在 function.php 執行此段程式碼


  /**  * Enqueue Gutenberg block editor style  */ 
function lightpress_gutenberg_editor_styles() {       wp_enqueue_style( 'lightpress-block-editor-styles', get_theme_file_uri( '/style-editor.css' ), false, '1.0', 'all' ); 
}  add_action( 'enqueue_block_editor_assets', 'lightpress_gutenberg_editor_styles' );

然後建立一支 style-editor.scss 產出 style-editor.css 專門來修改。

7. 權限設置

// contributor可以上傳檔案if ( current_user_can('contributor') && !current_user_can('upload_files') )add_action('admin_init', 'allow_contributor_uploads');function allow_contributor_uploads() {$contributor = get_role('contributor');$contributor->add_cap('upload_files');}// contributor只可以看到他們上傳的檔案function my_files_only( $wp_query ) {  if ( strpos( $_SERVER[ 'REQUEST_URI' ], '/wp-admin/upload.php' ) !== false ) {    if ( !current_user_can( 'level_5' ) ) {      global $current_user;      $wp_query->set( 'author', $current_user->id );    }  }}// get the "contributor" role object$obj_existing_role = get_role( 'contributor' );// contributor只可以編輯他們的文章，但要重新送審$obj_existing_role->add_cap( 'edit_published_posts' );add_filter('parse_query', 'my_files_only' );// 某個category底下的全部子category都用同一個列表版型function catTemplateSelect() {  if (is_category() && !is_feed()) {      if (is_category(get_cat_id('特輯')) || cat_is_ancestor_of(get_cat_id('特輯'), get_query_var('cat'))) {        load_template(TEMPLATEPATH . '/category-featurette.php');        exit;  }    if (is_category(get_cat_id('活動')) || cat_is_ancestor_of(get_cat_id('活動'), get_query_var('cat'))) {      load_template(TEMPLATEPATH . '/category-activities.php');      exit;    }  }}add_action('template_redirect', 'catTemplateSelect');// 文章只能讓自己看到function posts_for_current_author($query) {  global $pagenow;  if( 'edit.php' != $pagenow || !$query->is_admin )    return $query;      if( !current_user_can( 'edit_others_posts' ) ) {        global $user_ID;        $query->set('author', $user_ID );      }      return $query;  }add_filter('pre_get_posts', 'posts_for_current_author');

8.限制搜尋範圍

看網站需求，通常只想搜尋文章
https://www.wpexplorer.com/limit-wordpress-search/

9.後台選單顯示

https://phptechnologytutorials.wordpress.com/2016/10/10/remove-menu-for-the-user-which-has-editor-role-in-wordpress/

3. Ultimate Member

官方網站

客製化 ultimate member template
functions
收費方式

1. 如何客製化自己的 ultimate member 頁面

安裝完之後，Ultimate Member 會給一些建好的頁面。

而我不想要用原本的樣式與 html 結構，所以接下來要來覆蓋原本的結構。
https://docs.ultimatemember.com/article/119-overriding-default-ultimate-member-profile-templates

1. 在自己主題資料夾下，建立 ultimate-member/templates 資料夾
2. 如果要用原來的檔案複製一份修改，可以至
   wp-content/plugins/ultimate-member/templates
   裡選擇要複製的檔案
3. 將複製的檔案貼到
   wp-content/themes/your-theme/ultimate-member/templates
4. 注意檔名要跟原來的名稱一樣才能覆蓋。

在自己主題資料夾下建立 ultimate-member/templates 資料夾

也不用擔心其他沒客製化的畫面就不見了，因為就算我們沒有製作，預設就會回去 wp-content/plugins/ultimate-member/trmplates 抓取預設的架構，如此一來就可以專心客製化自己的 ultimate-member 框架囉，再來就是要稍微熟練 Wordpress 本身以及 ultimate member 提供給我們方便的函式用法。

2. functions

用到的一些方便的函式：

um_get_avatar_url( um_user( ‘profile_photo’, 80 ))
後者取得使用者大頭照 <img>，前者取得使用者大頭照 <img> 裡的 src。

3. 收費方式

因為可能會用到其他功能，所以需要去暸解一下收費方式，決定購買方案。

另外也可以單一購買，但是有分 single / 5 / 20 個網站使用

4. WooCommerce

因為沒改太多，就僅帶一下如何客製化 WooCommerce 的頁面。

先看看有哪些是在template的資料夾：

然後複製一份想改的檔案到自己的theme資料夾：

跟 ultimate member 差不多方式。

5. 其他外掛輔助

1. 外掛衝突問題

在文章內文中，因為 Fancy Facebook Commnet 預設是放在 the_content 裡的最後面，但我又想要讓 Advanced Custom Fields 放在 Fancy Facebook Commnet 前面，所以勢必得對 contnet 做個小修改，所以在 function.php ：

// 客製化欄位先放function theme_slug_filter_the_content( $content ) {
  if( get_field('ad-image') ):
    $articleCorpporate = get_field('ad-image');
    $custom_content = 
      '<img src="' . $articleCorpporate['url'] . '">';
  endif;
  $custom_content = $content . $custom_content;
  return $custom_content;
}add_filter( 'the_content', 'theme_slug_filter_the_content' );

先把客製化欄位放到 the_content 最後面，Fancy Facebook Commnet 再接續後面放置。

2. Block Lab 輔助

為了要在 Gutenberg 內可以插入自己設計的區塊，會使用到這個外掛。
照著影片教學就可以使用了，大致上就是設定完後，到 template 開個資料夾存放 html。

非常推薦這個外掛，讓我原本需要用 Advance Custom Field 做的東西都改用他來做了，編輯文章時更顯簡潔俐落！

其他參考：

17+ Killer WordPress Gutenberg Plugins in 2019 (Death of Page Builders?)
https://bloggingx.com/gutenberg-plugins/?fbclid=IwAR1IpViFToFzpif0S3k8_t89eNuT4PjvbEHcwfhQX2RmP1vUscK3L7gwBGA

基本上這樣摸過一輪，對 wordpress 的運作算是挺熟悉了，比較在意的客製化頁面也沒遇到什麼大麻煩以及找不到解答的地方，上手程度個人覺得比 joomla! 更易上手，function 的提供也是非常多元與方便，不太會為了找不到或是不知道怎麼 print 出自己想要的東西而苦惱。

這篇基本就是紀錄一下自己碰到過的問題以及之後可以回來複習遺忘的東西，如果還有機會碰到 wordpress 專案的話應該會再更深入地鑽研，目前這樣的程度已經夠了 :)

請 Neil 一杯珍奶！

BobaMe is a fun way to connect with your supporters.

neillin.bobaboba.me