此篇教學文針對 自行設定「個人化佈景主題」中的繼續閱讀按鈕，continue reading或是 read more更改成中文「繼續閱讀」。

設定繼續閱讀閱覽線的好處，除了鼓勵讀者點擊文章看更多之外，部落格文章版面也可以顯示較多近期文章，將看全文收進單篇文章之中，版面清爽好閱讀。

分隔線利用html的語法為

 <!--more--> 

如果是用wordpress.com架設blog的朋友們，一定都會有個痛處，
就是wordpress.com無法像是由wordpress.org自行下載安裝檔，安裝wordpress來的自由。

由wordpress.com架設的wordpress是無法修改php檔案的，套用個人化佈景主題之後，
玩轉就碰到一個問題，「繼續閱讀」的標籤是英文的。

而google網路上尋找的方法大多都是在”主題編輯器內修改index.php“這隻檔案，
因為wordpress.com對於安全問題，所以嚴禁使用者修改php檔案，此方法對於wordpress.com是完全無法使用的。
如下 ftp訪問官方說明 和 樣式檔案修改差異表

下圖為wordpress.com 跟 wordpress.org之差異表，可以看右下紅框處，wordpress.org是可以修改php跟css文檔的。

圖表出處點此

所以如果用平常網路上找到修改index.php的方法，對於wordpress.com的用戶是完全無法使用的。因為com用戶無法提取php檔案修改，在外觀內也沒有主題編輯器。

所以芋圓要來教學替代方式，幸好wordpress.com是有保留自定義css的功能給com用戶，芋圓要教學如何用CSS偽元素來增加一個假按鈕，並且覆蓋在英文的「繼續閱讀」按鈕上。

*注意：有一點CSS底子的人，才會比較了解以下流程，如果沒有相關知識的人，需要多花點心思囉!簡化步驟，跟著順序操作即可。

1.尋找原本英文版繼續閱讀按鈕的CLASS名稱。用chrome瀏覽器開啟部落格，對按鈕點”右鍵”，選擇”檢查” (請對著你部落格 按鈕按右鍵)

2.這時候chrome會跳出程式碼視窗，就可以找到此按鈕的class名稱囉，玩轉芋圓用的佈景主題風格為Maxwell，按鈕class是.read-more，而.read-more內的a就是繼續閱讀的英文囉。

了解此名字後就可以寫css偽元素了。

3.進入「我的網站」→「設定」→「wp管理員」選擇外觀>自定義css，得到以下畫面，左邊空欄就是輸入自訂CSS的地方。

4.輸入以下CSS語法，將按鈕變成relative相對定位，如果不是網頁設計或是前端人員，聽不懂沒關係，將read-more改成你自己blog的按鈕class名稱，跟著貼就是。

.read-more a{
position: relative;
}

5.輸入以下CSS語法，為按鈕增加偽元素，請注意”read-more”要改成步驟2時找到的按鈕class名稱，每個部落格因為套用樣式不同，多少有差異。

.read-more a::before {
content: "繼續閱讀"; /*要顯示什麼字寫在這*/
display: inline-block; /*不要管*/
position: absolute; /*絕對定位，讓這個偽元素跟著父層的relative元素跑*/
top: 0; /*定位在父層上方*/
left: 0; /*定位在父層左邊*/
width: 150px; /*此按鈕寬度*/
height: 100%; /*此按鈕高度*/
font: 18px/40px "微軟正黑體"; /* 字的大小與行高和字型*/
text-align: center; /*<em>置中</em>對齊*/
letter-spacing: 1px; /*文字間距*/
background: #33bbcc; /*按鈕背景色*/
z-index: 10; /*圖層*/
}

6.這樣就完成囉，更改後按鍵文字效果如下圖

英文的continue reading成功變成中文的「繼續閱讀」。

以上是wordpress 繼續閱讀 英文按鈕改中文的教學步驟

作者芋圓是位喜歡寫程式的視覺設計師，因此可以用視覺人的邏輯去教學javascrip和jQuery、CSS如果有任何想學的又或者是疑問，都可以留言，芋圓樂意分享與教學。

作者網站：https://huangmaster.com/

有任何疑問可以留言告知，或是E-Mail給芋圓
nickhuang1121@gmail.com

看更多 芋圓語法教室 教學示範文章