寫在筆記之前
這是記錄個人使用 Wordpress + WooCommerce 成功建立的一個公司網站，內埋包括相關周邊安裝、使用、設定等等，而這個網站的建立是基於以下條件來製作：
1. 可以大量管理、上傳產品(進、銷、存)
2. 網上購物功能
3. 容易操作使用 + 界面美觀 + 手機/平板/電腦通用
4. 中英文界面(多國語言)
5. 採用免費 Plug-in 外掛
經過一年多時間測試和修正，筆者準備以面、文方式 Step by Step 做個記錄，留待有需要的讀者，又或者將來自己有需要做個參考。本文所採用的插件、方法等等未必是最理想的，但就在製作當刻，在有限的資源、環境和時間下，算是相當不俗的了。
未完待續 ...
(本文需要時間整理，筆者不定期更新)
大網草稿：
01) 安裝前準備
建網記錄 Wordpress 版本 5.3.2 | 03/02/2020
1. 安裝 Wordpress
－ 安裝前，新增數據庫。
－ 安裝後，在 wp-config.php 添加數據載資料，包括數據載名、使用者、密碼
2. 中文化設定：Settings > General > Site Language > 香港中文版
3. 安裝 WooCommerce 模組及設定
- Jetpack [ 數據分析、相關文章、分享按鈕、圖片 CDN(只需啟動它，上載的圖片就會存放於 CDN 中，
毋須額外設定。然而，上傳至 Jetpack CDN 的圖片會經有損壓縮處理，如果要追求高品質照片，或需改用 Flickr 等相片寄存空間。) ]
- 將首頁設為商店
Setting→閱讀→首頁：選擇商店選擇[靜態頁面、Shop]
4. 安裝及啟用 plugin: WP Reset (初始還原 Wordpress)
5. 優化網址結構和更改媒體(檔案)上傳路徑 參閱：https://edblog.net/archives/3586
上傳媒體(檔案)為 [img] - (不要以月分日期分類資料夾)
- 5a. 在wp-config.php內加上路徑設定值
在wp-config.php內加上檔案上傳路資料夾的路徑設定值： define( 'UPLOADS', 'img' );
若加上上傳那條設定值，檔案上傳路徑會更改為 [您的WordPress網址/img/]
- 5b. 進入後台 -> 設定 > 媒體 -> 將最下面的選項取消打勾，上傳路徑會統一為
『<您的WordPress網址>/wp-content/img/』。
- 5c. 縮圖：100x100 / 中等：300x300 / 大圖：600x600
- 5d. 設定 > 固定網址
6. 安裝佈景、子佈景、及相關 plugins
- 6a. 安裝Online Shop * * * * * * * * * * 20200217
安裝及點選 Online Shop 後，在佈景下面點選[install Plugins] 以安裝相關plugin
plug-in：Gutentor(多種頁面Sample以供選擇)
點選 Online Shop 下面點選[Demo Import] 以安裝 Demo 樣本
- 6b. Child Theme 建立子佈景 - Child Theme Configurator
使用方法：https://wordpress.blog.tw/wordpress-plugin-child-theme-configurator/
-在控制台的工具/Child Themes 可以看到外掛程式的設計頁面。
點選 CREATE a new Child Theme / Analyze（圖一），在建立子佈景主題前先檢測佈景主題。
- 父佈景主題檢測完成以後，如一切符合相關設計定義，就會出現綠色勾勾（圖二）。如果有不相符的設計就會出現警示符號說明，
那麼可以選擇改採其他佈景主題，或是聯絡佈景主題設計者進行修改。
- 顯示正確以後頁面往下進行，就可以開始建置子佈景主題了（圖三）。
- 以上完成，子佈景主題建置好了（圖四）
在控制台的工具/Child Themes 可以看到外掛程式的設計頁面。點選 CREATE a new Child Theme / Analyze（圖一），在建立子佈景主題前先檢測佈景主題。
父佈景主題檢測完成以後，如一切符合相關設計定義，就會出現綠色勾勾（圖二）。如果有不相符的設計就會出現警示符號說明，那麼可以選擇改採其他佈景主題，
或是聯絡佈景主題設計者進行修改。
顯示正確以後頁面往下進行，就可以開始建置子佈景主題了（圖三）
- 6c. 選擇 Online Shop Child 做佈景
7. 做佈景設定：
Home Main Content Area(設定首頁下面展示的產品)
- AT Woocommerce Products
Vimyield color: blue: #275791
8. Child Theme 建立子佈景 - Child Theme Configurator
使用方法：
https://wordpress.blog.tw/wordpress-plugin-child-theme-configurator/
-在控制台的工具/Child Themes 可以看到外掛程式的設計頁面。點選 CREATE a new Child Theme / Analyze（圖一），在建立子佈景主題前先檢測佈景主題。
- 父佈景主題檢測完成以後，如一切符合相關設計定義，就會出現綠色勾勾（圖二）。如果有不相符的設計就會出現警示符號說明，那麼可以選擇改採其他佈景主題，或是聯絡佈景主題設計者進行修改。
- 顯示正確以後頁面往下進行，就可以開始建置子佈景主題了（圖三）。
- 以上完成，子佈景主題建置好了（圖四）
在控制台的工具/Child Themes 可以看到外掛程式的設計頁面。點選 CREATE a new Child Theme / Analyze（圖一），在建立子佈景主題前先檢測佈景主題。
父佈景主題檢測完成以後，如一切符合相關設計定義，就會出現綠色勾勾（圖二）。如果有不相符的設計就會出現警示符號說明，那麼可以選擇改採其他佈景主題，或是聯絡佈景主題設計者進行修改。
顯示正確以後頁面往下進行，就可以開始建置子佈景主題了（圖三）
9) 其他plug in安裝及版面設定 (*必裝或必做)
- *Relevanssi (seach 功能設定)
- *WooCommerce Shortcodes (woocommerce 功能code)
- Kirki Toolkit (Customizer Framework)
- YITH WooCommerce Wishlist [ X ]
- CMB2 (Homepage template options))
- Woo Align Buttons (對齊產品)
- *remove 'add to cart'
安裝：YITH WooCommerce Catalog Mode ( Hide add to cart)
Enable YITH WooCommerce Catalog Mode [ √ ]
Disable shop [ √ ] Hide and disable "Cart" page, "Checkout" page and all "Add to Cart" buttons
- *隱藏產品列表中的子分類產品數量
http://woocommerce.chongyuan.cc/hide-sub-category-product-count-in-product-archives.html
https://www.zhudc.com/wordpress/2318/
將PHP代碼放在主題或子主題functions.php文件的底部加入：
add_filter( 'woocommerce_subcategory_count_html', 'jk_hide_category_count' );
function jk_hide_category_count() {
// No count}
- 隱藏標題(停用)
安裝：Hide Page And Post Title
*** 安裝多國語言 plug in前備份：
UpdraftPlus WordPress Backup Plugin – 網站自動備份外掛程式
https://wordpress.blog.tw/updraftplus-wordpress-backup-plugin/
10) 多國語言
- Ceceppa Multilingua
語言選單設定：(外觀>自定：)
a. 在 選單 > Top Menu 新增 [自訂連結 ]
連結網址：[#cml-no-current]
11) Google Web Fonts 自定義字款
https://wordpress.blog.tw/google-fonts/
試用：Google Fonts Typography
採用字體：Noto SansTc HK
20200414 安裝Ceceppa Multilingua後，運作OK，
唯獨 CSV 英文 import 方面要改進：
JOE 試裝 plug-in：
12) Relevanssi (JOE 安裝，search 字眼)
13) Product CSV Import Export (BASIC)
Product Reviews Import Export (Basic)
----------------- 舊筆記，可能有用 -----------------------
2A) theme – storefront
- 2a) Storefront Designer (頁面設計)
- 2b) Homepage Control (外觀>首頁>Homepage Control)
- Storefront Homepage Extra Sections (首頁內加Section)
- Storefront Footer Bar(首頁內加Section)
- storefront woocommerce customiser
(外觀>首頁>Homepage Control，設定、隱藏 Section標題，展示數量)
- Storefront Add Slider
- Storefront Header Picker(Hide cart items in the header)
- Title Toggle for Storefront Theme(隱藏post/page標題)
- Remove Add to Cart WooCommerce
- Storefront Homepage Contact Section (聯絡我們 Section)
- Storefront Footer Copyright Text 取消頁底Copyright Storefront字眼
- Storefront WooCommerce Customizer
-----------------------------------------------
佈景主題的式樣檔（style.css):
@import url(//fonts.googleapis.com/earlyaccess/notosanskannada.css);
body {
font-family: 'Noto Sans Kannada', sans-serif;}
- Display Product – Multi-Layout for WooCommerce 外掛
- 免費外掛：
https://www.webmart.tw/blog/16-nifty-free-woocommerce-extensions/
storefront 安裝配置
http://woocommerce.chongyuan.cc/installation-configuration.htm
>/myfiles/』。
css 限制行數字數
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow:ellipsis; /* for IE */
-o-text-overflow: ellipsis; /* for Opera */
-icab-text-overflow: ellipsis; /* for iCab */
-khtml-text-overflow: ellipsis; /* for Konqueror Safari */
-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
-webkit-text-overflow: ellipsis; /* for Safari,Swift*/
有用參考：
https://wordpress.blog.tw/wordpress-plugin-woocommerce/
https://192.168.100.101/robot360/
login:vimyieldadmin
password:VimYield56925
-------------------------------------------------
WordPress Plugin WP Catalogue
外掛程式：WP Catalogue
外掛程式網址：https://wordpress.org/plugins/wp-catalogue/
在 WordPress 後台管理介面外掛/新增外掛，安裝完成啟用即可。
設定介面非常簡單，基本的目錄區塊顏色設定，採取預設值也可以。
商品建置容易，每一項商品都支援三張圖片展示，還可以標示商品價格，不過沒有購物車的功能。
外掛程式雖然支援非常多的語系，稍微遺憾還沒有支援正體中文，有提供語系檔案，需要的朋友可以自行翻譯。
) 與佈景主題搭配容易，相容性高。
商品建置完成，在需要展示目錄的頁面填上簡碼（shortcode ）就可以使用了。
如果需要更多的功能與自訂式樣，外掛程式也有提供付費版本可以選購
