《Synology VPN架設》可翻牆、可當WordPress後台安全防謢鎖

April 30, 2015, 3:00 pm

≫ Next: WordPress教學－顯示WordPress當前文章的分類樣式

≪ Previous: WordPress教學－讓WordPress小工具標題支援html標籤語法

$

0

0

　　說到VPN大家第一印象就是翻牆，透過VPN就可讓自己在網路上變成小飛俠，想到那一國就到那一國，而VPN除了翻牆外，其實還有個特殊的用法，那就是可用來當成Wordpress後台防護，由於只要是使用Wordpress架設的話，後台位置大家都一模一樣，雖然說有些外掛可防護後台，那必竟只防君子不防小人，所以最終極的作法就是直接透過.htaccess鎖ip來防護後台，雖然說很安全，但很麻煩的是，每當到其它的網路環境，就得重新設定ip，且這時後台在這個網路環境下，大家都可連進WP的後台，所以既安全又簡單的作法，就是架設VPN，直接透過家中的IP連出去，如此一來就不用一直修改IP，同時也只有家中的成員才進的去，由於梅干的無線分享器沒有VPN功能，好在synology的NAS有VPN Server的套件，且架設完畢後，無論是手機還是電腦都可連，因此有使用NAS的朋友，不妨也一塊來看看吧!!

---

Synology NAS-VPN Server架設與設定：
Step1
首先，進到Synology DSM後台，進到套件中心，找到「VPN Server」後，點一下「安裝套件」。

---

Step2
安裝好後，進入VPN Server後，點一下PPTP，並將PPTP VPN....勾選起來，以及下方要將DNS設為8.8.8.8否則，連上後VPN後，會發現所有的網頁都解析不出來。

---

Step3
接著記得到無線分享器，將1723的port給開啟。

---

Step4
完成後，再到權限的地方，勾選可連入的使用者。

---

Windows VPN連線設定：
Step5
進入網路管理中心，點一下右邊的「設定新的連線或網路」選項。

---

Step6
選擇「連線到工作地點」。

---

Step7
再點上方的選項。

---

Step8
接著輸入VPN的位置與名稱。

---

Step9
設定好後，再按立即連線。

---

Step10
正常沒意外的話，就可完成連線。

---

Step11
這時候在VPN的狀態中，就可看到目前已連線的狀態，與IP的位置已經切換至家中的IP了。

---

Step12
上網查一下，可看到原來是61.xx.xx.xx，現在已變成219.xx.xx.xx。

---

Step13
這時候開啟網頁，輸入梅問題的後台位置，立即就可顯示啦!

---

iPhone VPN連線設定：
Step14
使用手機一樣也是可以的，進到設定/VPN，並新增一個VPN的設定。

---

Step15
一樣切到PPTP後，再輸入伺服器位置、帳號、密碼，好了之後點一下它。

---

Step16
當連線成功後，一樣的也可正常的造訪梅問題的管理後台。

---

WordPress教學－顯示WordPress當前文章的分類樣式

May 19, 2015, 3:00 pm

≫ Next: WordPress教學－《Google自訂搜尋》整合到WordPress頁面中

≪ Previous: 《Synology VPN架設》可翻牆、可當WordPress後台安全防謢鎖

$

0

0

　　現在有愈來愈朋友使用Wordpress，除了簡單好上手外，再來就是有無數的外掛元件，甚至佈景也相當容易修改，因此無論是要用來架設官網、形象網站，或購物也沒問題，因此最近梅干就將用許久的Opencat購物車，改用Wordpress來架設，並且搭配歐付寶的付款機制，以梅干商品不多的情況下，還蠻簡易好用的，但有個小問題就是，當今天進入單一頁面時，就無法顯示該頁面的分類，這對於使用者經驗來說，會讓人搞不清楚目前是在那個階層下，所以梅干花了點時間，研究了一下它的分類顯示方式，並再搭配一點javascript後，立即就可實現在當頁面中，也能顯示該分類的狀態，因此有需要的朋友也一塊來看看囉!

---

Step1
開啟footer.php後，在下方加入以下的語法。

<?php
　if(is_single()){
　　$categories = get_the_category();
　　$category_id = $categories[0]->cat_ID;
　　$cId = '.cat-item-'.$category_id;
　}
?>
<script>
$(function(){
　　$('<?php echo $cId?>').addClass('current-cat');
});
</script>

---

---

Step2
由於它會在該分類中加入current-cat的樣式名稱，所以在style的地方，也要加入current-cat的顯示效果。

---

Step3
當都加入完畢後，馬上重整一下看看，這時無論是在分類頁面下，還是單一的頁面下，能顯示當前分類的樣式，如此一來才不會傻傻分不清楚，自己目前是在那個分類下。

WordPress教學－《Google自訂搜尋》整合到WordPress頁面中

July 6, 2015, 3:00 pm

≫ Next: WordPress教學－免裝外掛!2招有效WordPress後台防護

≪ Previous: WordPress教學－顯示WordPress當前文章的分類樣式

$

0

0

　　其實Google的自訂搜尋相當的方便好用，因此梅干在很早之前就已將Google自訂搜尋整合到Wordpress中，同時梅干當時還是將搜尋與結果拆開來，而最近才發現到，梅干嫂的部落格竟然沒有站內搜尋，所以就想說幫梅干嫂加一下，這時才發現到現在Google的自訂搜尋與之前差好多，且之前有的設定現在也不知跑到那去的，所以只能用手動的方式來作設定，因此有想用Google自訂搜尋的朋友，不妨也一塊來看看囉!

---

Google自訂搜尋：

網站名稱：Google自訂搜尋引擎
申請網址：https://cse.google.com/cse/

---

Step1
首先進入後，點一下右上角的「建立自訂搜尋引擎」。

---

Step2
接著輸入要搜尋的網址，若是全站搜尋的話再加/*，與搜尋引擎的名稱，搜尋名稱只要自己認得就行了。

---

Step3
新增好後，再點控制台。

---

Step4
接著再點左邊的外觀和風格選項，再選擇只顯示結果。

---

Step5
再按下儲存產生原始碼，就會看到灰色框中出現一堆原始碼，再把它全部選取並複製起來，而需注意到cx後會有一串編號，這在待回會用到。

---

Step6
接著新增一個頁面，再將剛的code貼到下方的文章輸入框中(記得先切到文字模式)。

---

Google自訂搜尋－搜尋框：
Step7
接著下方是搜尋框的語法，有二個地方要修改成自己的部分，分別是action=""這要輸入自己WP所建立的頁面網頁，以及在cx的部分，要輸入所產生的一串編碼。
加在要出現的佈景頁面中：

^?View Code HTML

1 2 3 4 5 6 7

<form id="searchform1" action="頁面網址" > <input type="hidden" name="cx" value="輸人cx編號" /> <input type="hidden" name="cof" value="FORID:11" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="31" value="" class="csetext"> <input type="submit" name="sa" value="搜尋" class="search_btn"> </form>

---

Google自訂搜尋－樣式：
Step8
再將下方的CSS樣式，貼到style.css中，由於使用Google自訂搜尋，因此在輸入框中需要有Google的圖樣才行。
加在style.css：

^?View Code CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.csetext { margin-left: 20px; padding: 2px 5px; width: 80%; height: 30px; border: solid 1px #e1e1e1; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: url(http://www.google.com/cse/intl/zh-Hant/images/google_custom_search_watermark.gif) #fff 5px 50% no-repeat; color: #5e7380; } .search_btn{ height: 36px; background: #eee; border:0; border-radius: 6px; } .csetext.focus { background-image: none; }

---

Google自訂搜尋－互動效果：
Step9
接著下方是一些互動效果，當滑鼠碰到輸入框時，圖片會消失，以及當輸入框有文字時，也會自動消失。
加在</body>前：

^?View Code JAVASSCRIPT

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ var $searchform = $('#searchform1'), $csetext = $searchform.find('.csetext');   $csetext.focus(function(){ $csetext.addClass('focus'); }).blur(function(){ if(!!!$csetext.val()) $csetext.removeClass('focus'); });   }); </script>

---

Google自訂搜尋－結果預覽：
Step10
這時輸入框就出現了。

---

Step11
接著搜尋結果就會出現在剛所設定的頁面中啦!是不是超方便的呀!

WordPress教學－免裝外掛!2招有效WordPress後台防護

August 5, 2015, 3:00 pm

≫ Next: WordPress外掛《Easy WP SMTP》使用免費外部信箱伺服器來發送

≪ Previous: WordPress教學－《Google自訂搜尋》整合到WordPress頁面中

$

0

0

　　Wordpress是目前相當主流的平台之一，也愈來愈多的中小企業採用Wordpress來架設官網或是產品頁面，雖然說Wordpress很方便，但相對的有些所有目錄結構大家也都一樣，所以後台防護就變成一個相當重要的課題，而之前梅干都是採用.htaccess鎖定ip的方式來進行防護，雖然說安全性高，但比較麻煩的是，一旦ip改變後就得進到ftp後，分別修改.htaccess的文件，再上傳後才能登入後台，而最近與主機商詢問是否有比較好的防護方式，發現了二個更方便且完全無需安裝任何外掛的防護後台方法，因此也是使用Wordpress架設的朋友，不妨參考一下囉!!

---

FTP資料夾權限設定：
Step1
首先，開啟FTP進到網站目錄後，對著wp-admin按滑鼠右鍵，選擇檔案權限。

---

Step2
接著將數值改為700，再按確認。

---

Step3
當設定好後，回到前台，這時再進入wp-admin目錄時，就會出現403的錯禁止畫面啦!當要解除時，只要將目錄權改回755，就可進入管理後台啦!

---

Cpanel設定：
Step4
另一種方式，是進到cpanel管理後台，選擇資料夾隱私。

---

Step5
接著選擇文件根目錄。

---

Step6
再點選wp-admin目錄。

---

Step7
接著再輸入要隱藏的目錄名稱，以及要加保護的使用名稱與密碼。

---

Step8
這樣就設定完成囉!

---

Step9
這時當進入wp-admin的管理後台時，就會跳出帳密的輸入框，這時則是輸入剛在cpanel中所設定的，當輸入正確後，就可進到wordpress的管理介面啦!二種方法提供給各位，有在用wordpress的朋友，不妨也試試看囉!

WordPress外掛《Easy WP SMTP》使用免費外部信箱伺服器來發送

September 16, 2015, 3:00 pm

≫ Next: WordPress教學－讓WordPress後台"選單"的子選單，支援收合機制

≪ Previous: WordPress教學－免裝外掛!2招有效WordPress後台防護

$

0

0

　　一般來說虛擬主機都會提供SMTP的服務，如此一來線上就可透過表單，將訊息寄到指定的信箱中，像是常見的聯絡我、合作提案、資料庫自動備份，這些都需要使用SMTP的服務，才能將信件寄送出來，但最近梅干在一個專案中，因此對方則是將WordPress架設在自己的NAS中，由於NAS本身並沒有SMTP服務，因此就無法將線上表單的內容寄出，因此梅干也找了好幾隻相關SMTP的外掛，並試用了好幾隻外掛後，最後發現到Easy WP SMTP這外掛，可解決此問題，因此有需要的朋友，不妨也一塊來看看吧!!

---

Easy WP SMTP：

外掛名稱：Easy WP SMTP
外掛下載：https://wordpress.org/plugins/easy-wp-smtp/

---

Step1
首先將下載回來的外掛，直接放到plugins資料夾下。

---

Step2
接著到WordPress後台，將Easy WP SMTP外掛給啟用。

---

Step3
當啟用完畢後，在設定的地方，就會看到Easy WP SMTP，進入設定畫面後，依續的輸入外部信箱的相關資訊，經梅干測試使用的結果，用yahoo的信箱比較沒問題。

---

Step4
都設定好後，立馬來測試一下，由於目前這站台是架設在自己的筆電中，因此也沒有SMTP的服務，所以立馬填寫線上表單來試試。

---

Step5
填寫完畢，按送出當成功時，下方會出現已寄成功的訊息，這樣就表示已透過外部的信箱寄出啦!

---

Step6
由於梅干是指定到Gmail，這時就會收到剛從線上表單傳來的資訊啦!是不是超方便又好用。

WordPress教學－讓WordPress後台"選單"的子選單，支援收合機制

September 24, 2015, 3:00 pm

≫ Next: WordPress外掛: All in One SEO不可不知的設定

≪ Previous: WordPress外掛《Easy WP SMTP》使用免費外部信箱伺服器來發送

$

0

0

　　使用WordPress的朋友，應該很習慣使用WordPress後台所提供的選單管理工具，來製作網站中的選單，且還可直接拖拉改變排序，或是增加子選單，相當的方便好用，但今天選單太長時，是否會發現到，無論是要改變選單排序，還是新增項目，要放到指定的選單項目中，是否感到相當的麻煩，要不斷的瘋狂向上拉，才能將它放到指定的選項下，而那一天梅干在修改佈景時，打算把網站的選單，改由後台的選單來控制，但當把選單產生完畢後，光是想到要移動就一個頭二個大，找了好久的外掛，卻沒找到相關的外掛可用，因此梅干只好自己動手來處理，所以就簡單的寫了javascript來控制，因此有需要的朋友，不妨也可參考看看囉!

---

Step1
在佈景主題中的functions.php中加入以下的語法。
functions.php

^?View Code PHP

1 2 3 4 5 6 7

<?php function load_custom_wp_admin_script() { wp_register_script( 'custom_wp_admin_script', get_template_directory_uri() . '/admin-script.js'); wp_enqueue_script( 'custom_wp_admin_script' ); } add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_script' ); ?>

---

Step2
在佈景中，新增admin-script.js檔案，並在admin-script.js加入下方的語法。
admin-script.js

^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

$(function(){ $('h3:contains(選單結構)').append('  <a href="#" id="on">開啟</a> | <a href="#" id="off">隱藏</a>'); $('h3 a').click(function(){ $this = $(this); var active = $this.html(); if(active == "開啟"){ $('.menu-item-depth-1').show(); $('.menu-item-depth-2').show(); }else{ $('.menu-item-depth-1').hide(); $('.menu-item-depth-2').hide(); }   return false; });   $('.menu-item-depth-0').click(function() { var $this = $(this); $this.toggleClass('hide-child'); $this.nextUntil('.menu-item-depth-0')[$this.hasClass('hide-child')?'hide':'show'](); }); })

---

Step3
都完成後，再到WordPress後台的選單下，在選單結構後方，分別就會看到開啟跟隱藏，當點一下隱藏後，選單中的子選單就會全部隱藏起來，這樣就方便拖拉改變選單排序啦!

---

Step4
除了點上方的開啟外，也可點每個選單大項的區塊，可單獨開啟該選單的子選項。

---

Step5
若要改變選項的內容，也可點選項右上的三角符號，就可開啟選項進行修改啦!有這樣的收合是不是方便許多啦!由於這個擴充是加在自己的佈景中，因此完全不用擔心WordPress更新時而無法使用。

WordPress外掛: All in One SEO不可不知的設定

November 4, 2015, 2:00 pm

≫ Next: WordPress教學－批次修改文章分類、標籤、資訊

≪ Previous: WordPress教學－讓WordPress後台"選單"的子選單，支援收合機制

$

0

0

　　許多使用WordPress架設的朋友，都會必裝All in One SEO這隻外掛，來優化網站的SEO，因此有不少朋友，都以為只要將它啟用後，一切就相安無事了，其實這是天大的錯誤，當啟用後在新增文章的版面中，就會看到多了許多可自訂的欄位，因此這些是需要自行輸入的，這樣才能讓資料完整的呈現，讓搜尋引擎來連行檢索，除此之外還是有些小地方要再加以調整，否則當啟用了，不但對SEO沒幫助，反而還造成標籤重覆出現的問題，因此有安裝此外掛的朋友，也一塊來看看，有那些需要進行調整的。

---

接著進入All in One SEO的設定畫面，將Canonical URLs給勾選起來，如此一來才能避免網址重復的問題。

---

由於目前各搜尋引擎，已不再參照Keywords關鍵字的標籤，因此設為Disabled關閉，不顯示。

---

接著還有Autogenerate Descriptions勾給取消，否則會造成網頁中重覆出現Descriptions的標籤。

---

將標題重新定義設為Enabled開啟，這樣可避免造成標重覆的問題。

---

接著在Webmaster網站管理的地方，分別將Google、Bing的ID給輸入。

---

最後再Google Analytics流量分析的ID給輸入，這樣就大功告成囉!因此有使用此外掛的朋友，也趕快檢查並設定一下。

WordPress教學－批次修改文章分類、標籤、資訊

November 25, 2015, 2:00 pm

≫ Next: WordPress中自訂添加短代碼shortcode

≪ Previous: WordPress外掛: All in One SEO不可不知的設定

$

0

0

　　當今天文章數還不足以一個細類時，則會將文章融合在一大分類中，當文章數慢慢累積到一定時，就會將它一一的獨立出來，接著再慢慢的擴展出大分類與子分類，但這時就會發現到，現在併到一個更大分類時， 原來的分類就會變成子分類，這時在顯示分類時，則會出現大分類與子分類的連結變成同一組，而不會各自獨立出來，這時就得手動一一的作修改，一旦文章數多時，那還真是要命的，其實在WordPress中，內建就可批次修改大量文章的分類、標籤甚至作者，因此當在使WordPress也有此問題的朋友，不妨也可看看囉!

---

Step1
當今天進入WordPress後台，將要修改的文章勾選起來，再從上方的下拉選單中，選擇編輯後，再按套用。

---

Step2
接著就可重新設定分類、標籤，以及作者、迴響和狀態...等。

---

Step3
接著就放著給他跑，當要修改的文章數愈多時，所需的時間愈長，同時有時也會造成主機負擔，因此可自行測試一下主機可承受的數量，這樣就不用一篇一篇改到手軟啦!

---

WordPress中自訂添加短代碼shortcode

December 28, 2015, 2:00 pm

≫ Next: Tap 免費WordPres虛擬主機，可任意安裝外掛與佈景

≪ Previous: WordPress教學－批次修改文章分類、標籤、資訊

$

0

0

wordpress中所提供的功能相當的強大，因此今天要入享一個實用的wordpress教學，那就是在wordpress佈景主題中，自行建立專用的短碼，透過這短代碼，可快速的產生出所需的資料外，對於版面控制上更加自由與便利，因此有使用wordpress的朋友，也一塊來看看囉!

Tap 免費WordPres虛擬主機，可任意安裝外掛與佈景

January 25, 2016, 2:00 pm

≫ Next: WordPress教學－WordPress購物車套件WooCommerce安裝與設定

≪ Previous: WordPress中自訂添加短代碼shortcode

$

0

0

　　雖然說WordPress架設已相當的簡單，但還是得具備一些網站的基本觀念，這也讓許多想架設自己網站的朋友感到卻步，同時WordPress官方也有推出BSP的方案，只需要註冊為會員，就能開始使用WordPress，完全不用自己架設，雖然很簡易，但相對的限制也很多，使用WordPress官方的平台，除了無法任意的安裝外掛、佈景主題外，甚至也無法綁定自己的網域。 　　但最近梅干發現國外一個免費的WordPress平台，一樣只需註冊會員，立即就能享用WordPress，同時與官方所提供平台最大不同的地方就在於，這個平台不但可任意的安裝外掛、套件，甚至當付費升級為專業版時，不但可綁定網域，還有FTP與無限流量，因此想架設一個屬於自己網站的朋友，這個Tap WordPress免費空間也一塊來體驗看看囉!

---

Tap：

網站名稱：Tap | Managed WordPress Hosting
網站連結：https://thisistap.com/

---

Step1
進入網站後，點一下Pricing選項，就會跳到此畫面，可看到免費版與PRO間的差異，再點FREE下方的GET STARTED鈕。

---

Step2
輸入姓名、Email與密碼。

---

Step3
接著再輸入網址名稱，以及WordPress網站名稱與管理者帳密。

---

Step4
這時系統就會開始進行安裝與設定。

---

Step5
當設定完畢後，在MySites的面板下，就會看到剛所建立好的網站。

---

Step6
接著登入WordPress後台，在Settings的面板下，將語系改為繁體中文，這樣WordPress就會變成中文啦!

---

Step7
這時就可任意的安裝外掛、佈景主題，相當的方便完全不受限制。

---

Step8
這樣就可任何的替換佈景主題，這個Tap平台，無論是使用還是速度，都相當的不錯，因此想自行架站的朋友，這平台不坊可考慮看看囉!

---

示範網站：http://minwt.thisistap.com/

WordPress教學－WordPress購物車套件WooCommerce安裝與設定

January 27, 2016, 2:00 pm

≫ Next: WordPress教學－WooCommerce第三方金流串接與付款方式設定(歐付寶)

≪ Previous: Tap 免費WordPres虛擬主機，可任意安裝外掛與佈景

$

0

0

　　近來身旁朋友，則有購物車的需求，之前梅干都會建議使用Opencart來架設，一來是功能完整，二來是安全性也要高，但這對於產品數量不多的朋友來說，用Opencart有點殺雞用牛刀， 所以梅干之後也將自己的購物車改用WordPress來架設，中間金流再串接朋友寫好的系統，但這需要自訂佈景主題，並將欄位相對應後，才能正常運作，這對於一般朋友來說，有些複雜與難度，所以也花了點時間，研究了一下WordPress中的購物車模組Woocommerce。 　　雖然Woocommerce與Opencart相較下，在功能上與架構上，則來的更簡易且好操控，對於只有10、20件商品來說，反而相當的合適，同時目前第三方的二大金流系統皆支援，因此無論是要用歐付寶還是智付寶，來進行線上刷卡付款也沒問題，因此想自行架設購物車的朋友，也一塊來看看，如何在WordPress下架設與設定Woocommerce購物車系統。

---

Step1
進到WordPress後台，並在外掛面板中，輸入woocommerce關鍵字，再按搜尋。

---

Step2
接著再按立即安裝。

---

Step3
下載正安裝完畢後，再點啟用外掛。

---

Step4
接著就會跳到woocommerce的安裝畫面，再按下角的出發吧!

---

Step5
再按繼續。

---

Step6
接著設定幣別與單位。

---

Step7
再設定運送與稅金。

---

Step8
接著則設定金流，預設的部分有ATM、貨到付款，以及PayPal。

---

Step9
到這邊就已安裝完成了，你的WordPress已具備購物車系統啦!接著再點左下角的按鈕。

---

Step10
當跳回WordPress後台，則會看到WooCommerce的選項，同時下方就有各種的設定，像是優惠券、報單、訂單甚至付款方式，都在這裡進行設定。

---

Step11
在WooCommerce下方則會看到商品，所有的商品上下架都由這邊進行管控，所以設定上相當的清楚分明。

---

Step12
除了會新增WooCommerce與商品外，在頁面的地方，分別會看到有商店、我的帳號、結帳、購物車的頁面，這些頁面請勿刪除，否則將會無法運行。

---

Step13
接著到設定 / 閱讀，將首頁的地方，設為商店。

---

Step14
接著回到前台，就會看到首頁就會直接顯示商店的那個畫面，由於目前沒新增任何的商品，所以則是空空如也。

---

Step15
WooCommerce新增商品也相當的簡單，當新增完商品後，在前台就會看到目前商品的資訊啦!

WordPress教學－WooCommerce第三方金流串接與付款方式設定(歐付寶)

February 4, 2016, 2:00 pm

≫ Next: WordPress教學－Woocommerce佈景標示外掛WooCommerce Template Hints，修改購物車佈景更容易

≪ Previous: WordPress教學－WordPress購物車套件WooCommerce安裝與設定

$

0

0

woocommerce購物車架設教學，今天要與大家來分享，如何將woocommerce購物車串接金流，以及付款的方式，目前二大金流平台，歐付寶與智付寶都支援woocommerce購物車的支付，同時都有出相關的套件，因此要如何安裝金流套件與設定付款方式，現在就一塊來看看吧!!

WordPress教學－Woocommerce佈景標示外掛WooCommerce Template Hints，修改購物車佈景更容易

February 15, 2016, 2:00 pm

≫ Next: WP Super Cache開啟CDN設定，讓網站變靜態網頁開啟速度更快

≪ Previous: WordPress教學－WooCommerce第三方金流串接與付款方式設定(歐付寶)

$

0

0

　　先前已分享過，在WordPress下安裝購物車套件，透過WooCommerce就可快速的把WordPress升級成購物車，甚至串接金流也相當的簡單，只需註冊好第三方的金流會員後，再把註冊帳號的API KEY，輸入到指定的欄位中，以及收款的方式，立即就能完成線上收款的機制，接下來就是購物車的佈景設計，才能表現出具自己特色的購物車平台，才不會變成一個制服型的購物車。 　　因此梅干則開始研究WooCommerce購物車的佈景主題設計，這時才發現到，WooCommerca的佈景竟然不在WordPress的themes中，而是在本身外掛模組的資料夾裡，且檔案相當分散，比OpenCart還來的更複雜，光一個頁面就用了好幾隻的php所組成，當一個一個找那還真累人，好在有隻WooCommerce的佈景外掛套件，可將頁面所用到的php用紅色線框標示出來，同時也會秀出該php的路徑與檔名，因此有用WooCommerce架設購物車的朋友，也趕快來看看，如何自製一個具自己特色的購物車版面。

---

WooCommerce Template Hints：

外掛名稱：WooCommerce Template Hints
外掛下載：tw.wordpress.org

---

Step1
首先，進到WordPress後台，切到外掛再點上方的安裝外掛。

---

Step2
接著輸入WooCommerce Template Hints關鍵字，再對著第一個外掛按立刻安裝。

---

Step3
當下載完畢後，再按啟用外掛。

---

Step4
啟用完畢後，再回到WordPress前台，並進入購物車，這時就會看到，頁面會出現一塊一塊的紅色框，且在紅色線框左上方，也會顯示該php的檔名與路徑。

---

Step5
而WooCommerce佈景主題的路徑在，wp-content/plugin/woocommerce/templates。

---

Step6
當要修改佈景檔案時，可用網頁編輯器，就可進行修改，這時先簡單打個123。

---

Step7
再回到前台時，就會看到剛所加入的123文字，有了這隻外掛後，就可更輕易的修改WooCommerce的佈景啦!

WP Super Cache開啟CDN設定，讓網站變靜態網頁開啟速度更快

March 7, 2016, 2:00 pm

≫ Next: WP Fastest Cache自動合併與壓縮CSS、JS、HTML，讓網站加速200%

≪ Previous: WordPress教學－Woocommerce佈景標示外掛WooCommerce Template Hints，修改購物車佈景更容易

$

0

0

　　最近梅干發現台灣竟然有專用的圖床主機，不但主機在台灣且價格也意外的吸引人，所以梅干就把網站中的圖床，搬回台灣的圖床主機後，整個網站在開啟的速度，比之前快了許多，最主要是網站的圖片相當的多，大部分時間都會卡讀取圖片的時間，現在也終於解決了圖片載入的問題，而為了讓網站還能再加速一點，所以梅干最近就在找看有無台灣的CDN主機，雖然提到CDN一定不得不推cloudflare，雖然說他也有提供免費的CDN服務，但卻沒有台灣主機的點。 　　所以梅干找了好久，終於找到竟然戰國策有CDN的主機，且價格也很迷人，同時還有14天的試用期，所以梅干就租來測試看看，但戰國的CDN與CF設定上完全不同，需要指定一個子域名才能啟用，而之前的子域就無法使用，這實在讓梅干感到相當的困擾，好在WP Super Cache有提供CDN的設定，如此一來就可透過WP Super Cache來切換CDN啦!即便不是使用戰國策的CDN也可設定。

---

Step1
首先，要建立一個CDN的主機。

---

Step2
再點click here to add。

---

Step3
接著上方設定CDN的主機位置，下方是來源位置，以及CDN的主機區域。

---

Step4
可看到這台CDN主機，就位於台北市區中。

---

Step5
新增完畢後，下方會出現要建立一個CANME的位置。

---

Step6
這時進入DNS設定面板，再建立一個CANME。

---

Step7
一般正常需等8~24小時，但透過CF差不多15分就通了，接著開啟命令字元，ping一下看是否連的到。

---

Step8
當通了後，再進到WP Supder Cache，切到CDN頁籤，將啟CDN支援勾選，再輸入CDN的URL。

---

Step9
這時可以輸入CDN的主機位置，先測試一下是否都能正常的顯示。

---

Step10
接著這時就會自動偵測，當CDN主機中的暫存時，就會直接顯示CDN的主機中內容，就不會再繞到原來的糖果主機，而這邊比較殘念的是，戰國策的CDN竟然不支援ICON Fonts，所以可看到原來的圖示都變成框框啦!XD~讓梅干只好無奈的再尋求其它的CDN主機，下回有申請其它CDN主機，也需設定子域時，不妨可透過此方法來設定。

WP Fastest Cache自動合併與壓縮CSS、JS、HTML，讓網站加速200%

March 16, 2016, 3:00 pm

≫ Next: Woocommerce佈景教學－如何讓佈景主題支援Woocommerce購物車

≪ Previous: WP Super Cache開啟CDN設定，讓網站變靜態網頁開啟速度更快

$

0

0

　　每當使用WordPress架完網站後，第一件事就會先裝上快取，來降低網站的對主機的負擔外，再來是使用者在瀏覽網站時，也會變得比較快速，而目前常被拿使用的快取外掛，不外乎就是W3 Total Cache、Hyper Cache、Quick Cache、WP Super Cache.....等，這麼多款的快取套件中，梅干個人比較偏愛WP Super Cache，一來是效能好，二來是操控簡單，但最近梅干在研究一些CDN主機的服務，希望提升網站的載入速度。 　　因而無意間發現到，某個CDN主機商，竟然推薦WP Fastest Cache這款快取外掛，稍為上網爬了一下文，從官方的說明文件來看，還真是挺厲害的， 除了快取外，還會將佈景主題，所使用到的多個javascript與css檔，自動合併成一隻檔外，還會進行壓縮，甚至還可針對圖片也進行壓縮，真是一隻不可多得的快取外掛，而梅干發現似乎沒什麼人在分享，因此梅干就整理了一下，與大家來分享這隻外掛，而有用WordPress架站的朋友，也趕快換上吧!

---

WP Fastest Cache：

外掛名稱：WP Fastest Cache
適用平台：WordPress　3.3+
外掛下載：https://wordpress.org/plugins/wp-fastest-cache/screenshots/

---

Step1
首先，將外掛下載並解壓縮後，再上傳到wp-content / plugins目錄下。

---

Step2
接著進到WordPress後台，點左邊的外掛，再將WP Fastest Cache啟用。

---

Step3
接著依序將以下的幾個選項勾選起來，並將下方的語系設定為中文。

---

Step4
當啟用完畢後，在原始碼最下方，就會看到WP Fastest Cache的文字訊息。

---

Step5
從這可看到，原先用WP Supder Cache時，全部是1.2MB，同時整個載入完畢花了4.63秒，但改用WP Fastest Cache，經壓縮與合併後，只剩下598KB，同時整個載入時間只剩下2.69，與原先的足足快一倍。

---

Step6
當要清除暫存時，也是回到後台，進到WP Fastest Cache後，將頁籤切到刪除緩存，就可將已暫存的快取給刪除。

---

Woocommerce佈景教學－如何讓佈景主題支援Woocommerce購物車

June 26, 2016, 3:00 pm

≫ Next: WordPress外掛－Polylang將WordPress網站建立多國語言平台

≪ Previous: WP Fastest Cache自動合併與壓縮CSS、JS、HTML，讓網站加速200%

$

0

0

　　先前已分享過Woocommerce的架設與金流的串接，與佈景主題的修改套件，透過該外掛就可清楚知道每個頁面是由那些php所組合而成的，再加上Woocommerce是架構在WordPress下，因此Woocommerce的購物畫面，也會使用到WordPress的佈景主題，因此當不用Woocommerce所提供的佈景主題，而是用自己所設計的佈景主題時，則會發現啟用的佈景主題上方會出現一段警告訊息，因此這時只需手動將Woocommerce的購物畫面，加到自己所設計的佈景主題中後，立即就可讓佈景主題支援Woocommerce了。

---

Step1
當佈景主題不支援時，進到Woocommerce的購物畫面版型就會大跑版。

---

Step2
首先，將原來佈景中的page.php複製一份，並重新命名為woocommerce.php。

---

Step3
接著再複製wp-content/plugins/woocommerce/templages目錄到佈景主題中。

---

Step4
再重新命名為woocommerce。

---

Step5
都將檔案複製完畢後，開啟woocommerce.php，將原來迴圈的地方，改為以下的語法。

<?php if (have_posts()):?>
 　
<?php woocommerce_content(); ?>

<?php endif;?>

---

Step6
接著再開啟functions.php，加入以下的語法。

<?php /* woocommerce */

  remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);

  remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

  add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);

  add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);
function my_theme_wrapper_start() {

  echo '<section id="main">';

  }
function my_theme_wrapper_end() {

  echo '</section>';

  }

  add_action( 'after_setup_theme', 'woocommerce_support' );

  function woocommerce_support() {

  add_theme_support( 'woocommerce' );

  }

  ?>

---

Step7
都完成後，再重新整理後台的佈景主題，這時原先的警告訊息已消失了。

---

Step8
接著再回到前台看一下，哈~畫面終於正常啦!

---

Step9
就連結帳畫面也ok了，因此有在用woocommerce的朋友，也可將現有的佈景主題，支援woocommerce。

WordPress外掛－Polylang將WordPress網站建立多國語言平台

August 3, 2016, 3:00 pm

≫ Next: Woocommerce 2.6版運費設定與免運費修正

≪ Previous: Woocommerce佈景教學－如何讓佈景主題支援Woocommerce購物車

$

0

0

　　最近由於梅干的客戶，因為產品都有作外銷，因此網站需要有多國語言的機制，雖然說Google或微軟，有提供網站的翻譯功能，但翻譯完畢後，充其量只有文字變成該國文字，而語意上還是原本的，會讓人有看沒有懂的感覺，因此只要有多國語言的客戶，梅干都會建議還是得架設二個平台，分別再將內容，依當地的語意進行翻譯，這樣才有意義，老外也才看的懂，而以前梅干都會一個語系一個平台，說真的無論在管理還是資料的維護都相當的麻煩，所以這陣子梅干也不斷在找相關的外掛套件，找了好久終於找到一款好用，且操作容易也好維護的多國語系的外掛，因此也有多國語言需求的朋友，現在也一塊來看看。

---

Step1
進到WordPress後台，切到「外掛」搜尋「Polylang」。

---

Step2
下載並啟用完畢後，在設定的地方會看到「語言」選項。

---

Step3
點一下進入後，在上方的下拉選單，選擇所需的語系。

---

Step4
依序的建立所需的語系。

---

Step5
建立完畢後，切到「字串翻譯」頁籤，針對網站的名稱進行翻譯。

---

Step6
接著在文章的地方，先新增預設的語系，寫好後按下發表，再對著右邊的語言點一下加號，就可再針對該語言進行翻譯的部分。

---

Step7
都新增完畢後，在文章列表的地方，就會看到剛所分別建立的繁中與英文二個語言，後方打勾的地方表示目前該文章的語言是那一個。

---

Step8
文章弄好後，接著切到小工具，建立一個多國語言切換的模組。

---

Step9
都完成後，回到前台，可看到左手邊就有英文語系，接著對著該語言點一下。

---

Step10
這時頁面就會瞬間變成所設定的語言啦!是不是超方便的呀!因此有需多國語言的朋友，千萬別錯過了。

Woocommerce 2.6版運費設定與免運費修正

August 8, 2016, 3:00 pm

≫ Next: WordPress網站優化外掛「WP Minify Fix」自動合併與壓縮佈景中多個JS、CSS檔，有助於提升Google Speed評分

≪ Previous: WordPress外掛－Polylang將WordPress網站建立多國語言平台

$

0

0

　　最近把Woocommerce更到新版後，在設定運送方式的地方，會發現到先前的像單一運費、免運費、貨到付款....似乎都不見了，而並不是不見了，Woocommerce2.6版則是將運送方式變成一個模組統來控管，之前的那些選項則全部集合在裡面，當需要時再逐一的新增，雖然說Woocommerce內建就有免運費的機制，同時在消費金額達到門檻時，則是出現免運費選項，而不是直接跳到免運費，這樣的結帳方式，實在有點怪異，不符目前大家的購物習慣，因此一塊來看看，要如何來修正這個免運費的設定吧!

---

Woocommerce免運費修正：

修正：免運費
適用版本：2.6+

---

Step1
首先，切到 Woocommerce設定 / 運送方式，接著點右下的新增按鈕。

---

Step2
接著從下拉選單中，選擇所需的運費方式。

---

Step3
新增完畢後，再點下方的設定。

---

Step4
就可設定運費的費用。

---

Step5
完成單一運費後，接下來再新增一個免運費。

---

Step6
新增完畢後，再設定免運費的門檻外，同時在下拉選單中，設定免費的條件。

---

Step7
這樣就完成單一運費與免運費的運送方式啦!

---

Step8
這時當購物金額超過剛所設定的的1000元，在運送方式的地方，卻出現免費運的選項，這實在有點怪異。

---

Step9
接著開啟佈景主題中的functions.php，再加入以下的修正碼。

add_filter( 'woocommerce_package_rates', 'hide_shipping_when_free_is_available', 100 );
function hide_shipping_when_free_is_available( $rates ) {
	$free = array();


	foreach ( $rates as $rate_id => $rate ) {
		if ( 'free_shipping' === $rate->method_id ) {
			$free[ $rate_id ] = $rate;
			break;
		}
	}


	return ! empty( $free ) ? $free : $rates;
}

---

Step10
這時再回到原來的結帳畫面，在運費方式的地方，就會自動變成免運費啦!

WordPress網站優化外掛「WP Minify Fix」自動合併與壓縮佈景中多個JS、CSS檔，有助於提升Google Speed評分

August 21, 2016, 3:00 pm

≫ Next: Woocommerce修正中文化不完全與字詞修改 (附完整繁中包)

≪ Previous: Woocommerce 2.6版運費設定與免運費修正

$

0

0

　　身為網頁設計師都知道，當今天將網頁發佈到真實環境時，除了會將網頁中所使用到的JavaScript與CSS檔進行壓縮外，甚至還盡可能的將多隻JavaScript與CSS合併成一隻，讓網頁開啟與瀏覽速度上更快速，但今天當使用WordPress架設的朋友，若是自己佈景主題中所使用到的JavaScript與CSS要合併與壓縮都沒問題，但若是外掛所產生的就無法進行壓縮，相信這問題是不少的困擾，因此今天要來分享一隻超方便的外掛，可將WordPress中所有的Javascript或CSS全部合併起來並壓縮，除了可讓網站開啟速度變更快外，甚至還有助於提升Google Speed的網站評分喔！

---

WP Minify Fix

外掛名稱：WP Minify Fix
適用版本：WordPress 2.8+
外掛下載：https://wordpress.org/plugins/wp-minify-fix/

---

Step1
進到此外掛的頁面後，點右上的Download鈕，將外掛下載解壓後，再上傳到 wp-content / plugins的目錄下。

---

Step2
接著登入WordPress後台，將剛所上傳的WP Minify Fix啟用。

---

Step3
當啟用後，就會自動將WordPress佈景所有的JavaScript與CSS全部合併起來與壓縮，但有些當合併出現錯誤時，可在管理頁面中，設定要排除的JavaScript與CSS。

---

Step4
沒想到開啟此外掛後，竟然有助於Google Speed，讓原來手機版只有82分變成89，但桌機版依然為持65分，但開啟此外掛後，整個站台在開啟時也順暢許多，因此有使用WordPress架設的朋友，這隻外掛則有助於網站的優化喔!

---

Woocommerce修正中文化不完全與字詞修改 (附完整繁中包)

September 1, 2016, 3:00 pm

≫ Next: WordPress外掛－「WP Editor」強化後台編輯器，讓原始碼支援HighLight的高光效果

≪ Previous: WordPress網站優化外掛「WP Minify Fix」自動合併與壓縮佈景中多個JS、CSS檔，有助於提升Google Speed評分

$

0

0

　　Woocommerce對於許多想架購物車的朋友，是一個不錯的選擇，不但架設簡單功能齊全，甚至就連金流串接也很容易，對於初期商品數不多的朋友來說，確實是一個很不錯的選擇，再加上又有繁中語言包，雖然內建中文包，隨著Woocommerce更新後，造成翻譯不完全，甚至有些字詞，翻的不是那麼的合宜，而各位若對這翻譯感到不滿意時，是可自行修改與調整，因此今天就來分享，要如何自行修改這翻譯檔外，梅干也提供自己的繁中語言包，與大家來分享，因此有用Woocommere架設的朋友，現在就一塊來看看吧!!

---

Poedit

工具名稱：Poedit
適用平台：Win/MAC
軟體下載:https://poedit.net/

---

Woocommerce繁中完整語言包

適用版本：Woocommerce 2.6.2
語言包下載：梅干特製版(2016.09.02)

---

編修Woocommerce繁中語言包：
Step1
首先，將Poedit安裝好後，再開啟Poedit編輯器。

---

Step2
接著到wp-content/languages/plugins/woocommerce-zh_TW.po，開啟Woocommerce的語言包

---

Step3
開啟Woocommerce的語言包後，點一下立即就會秀出原來的英文字串，與相應的中文，這時將要翻譯的字詞，輸到下方的輸入框，再按儲存時Poedit除了會將它儲存起來外，還會產生出一個.mo檔，而這個.mo檔就是編譯過的檔案。

---

手動安裝Woocommerce繁中語言包：
Step4
若覺得麻煩，也可下載梅干的繁中包，將woocommerce-zh_TW.mo覆蓋到原來的wp-content/languages/plugins/目錄下的檔案。

---

Step5
覆蓋過去後，這時候就可看到，當刪除物品時，原來的Undo就會變成復原。

---

Step6
甚至就連訂購單未填寫時，原來的英文提示也會變成中文。

---

Step7
以及會員區，也一樣變成中文，如各位在使用上有那些未翻譯到，也歡迎隨時提報告知。