寫在筆記之前
這是記錄個人使用 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 )就可以使用了。
如果需要更多的功能與自訂式樣,外掛程式也有提供付費版本可以選購
沒有留言:
張貼留言