【教學】wordpress 繼續閱讀 英文按鈕改中文

Posted by

wordpress-com-read-more-buttom-custom2

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

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

read-more-buttom

分隔線利用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文檔的。

wordpresscomvswordpressorg

圖表出處點此

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

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

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

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

wordpress-com-read-more-buttom-custom3

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

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

wordpress-com-read-more-buttom-custom4

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

wordpress-com-read-more-buttom-custom1

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-com-read-more-buttom-custom5

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

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

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

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

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


發表迴響