本篇小翔將分享,該如何利用 Code Snippets 這個程式碼片段外掛,來修改「部落格頁面文章標題」&「文章頁面標題」的樣式。
由於有些 WordPress 佈景主題自定義功能較少,或者你是使用某某某主題的免費版本,相較於付費版功能會有閹割導致設定功能不全,所以不支援修改「部落格頁面文章標題」&「文章頁面標題」的樣式。
所以,本篇就是為了應對以上你佈景主題自定義功能不足無法更改文章標題的問題,來加以補全的文章。
Code Snippets 外掛介紹
本篇教學,將使用「Code Snippets」程式碼片段外掛來更改「部落格頁面文章標題」&「文章頁面標題」的樣式,使用該外掛,也方便了程式碼與程式碼之間的管理,未來要修改程式碼也比較方便。
因為 WordPress 有許多豐富的外掛可供下載使用,豐富了我們的網站,但外掛一旦下載太多,可能會造成網站效能不佳,速度太慢等問題。
而 Code Snippets 是一個輕便、易用,且專為在網站上執行 PHP 程式碼片段所設計的解決方案。 使用 Code Snippets 外掛後,便不再需要為了網站功能去下載外掛,只需新增一個程式碼片段,輸入程式碼,即可為網站增加所需要的功能,且不會占用太多網站空間,從而降低網站速度。
圖片來源 : Code Snippets 外掛頁面
使用教學
安裝外掛
以下教學需安裝並啟用 Code Snippets 外掛,不會安裝 WordPress 外掛的可以點擊以下連接前往教學文章學習。 文中會教你如何搜尋、安裝、啟用、停用和刪除外掛。
教學文章:外掛安裝教學 文章網址:https://xiaoxiang.blog/how-to-install-the-plug-in/
step 1
開啟 WordPress 後臺管理介面,前往 外掛 > 安裝外掛。
step 2
使用關鍵字搜尋外掛,輸入「Code Snippets」。
step 3
找到名稱為「Code Snippets」的外掛,點選 立即安裝,並 啟用 該外掛。
如何修改部落格頁面文章標題樣式?
以下教學,將修改部落格頁面的文章標題樣式,如下圖所示,箭頭所指的文章標題就是要修改的部分。
step 1
外掛啟用後,點擊 程式碼片段 > 新增程式碼片段。
step 2
- 在標題框中輸入「部落格頁面文章標題樣式」,方便程式碼與程式碼之間的管理。
- 如下圖所示,複製貼上以下程式碼到程式碼輸入框中。
程式碼 :
add_action( 'wp_head', function () { ?>
<style>
/* 更改部落格頁面的文章標題樣式 */
.entry-title, .entry-title a {
/* 文字字體 */
font-family: "微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
/* 文字粗細 */
font-weight: 900;
/* 文字大小 */
font-size: 30;
}
</style>
<?php } );
畫面 :
step 3
完成後記得滑到底部,點擊「儲存設定並啟用」按鈕,儲存並啟用你的程式碼。
如何修改文章頁面的 H1 標題樣式?
以下教學,將修改所有文章頁面的 H1 標題樣式,如下圖所示,箭頭所指的文章標題就是要修改的部分。
step 1
外掛啟用後,點擊 程式碼片段 > 新增程式碼片段。
step 2
- 在標題框中輸入「文章頁面 H1 標題樣式」,方便程式碼與程式碼之間的管理。
- 如下圖所示,複製貼上以下程式碼到程式碼輸入框中。
程式碼 :
add_action( 'wp_head', function () { ?>
<style>
/* 更改文章頁面的 h1 文章標題 */
.page-title, .entry-title {
/* 文字字體 */
font-family: "微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
/* 文字粗細 */
font-weight:bold;
}
</style>
<?php } );
畫面 :
step 3
完成後記得滑到底部,點擊「儲存設定並啟用」按鈕,儲存並啟用你的程式碼。
如果對文章內容有任何問題,或有想讓小翔另外補充的的內容,歡迎在底下留言讓我知道。
在這裡,我想讓您知道在 小翔教你SEO 網站中,有些連結為聯盟營銷連接,這代表,當人們點擊該連結,並前往其他網站進行購買動作時,我將會從銷售中獲得少部分佣金(但不會影響你購買的價格)。
有關更詳細的聯盟連接說明,請前往 聯盟計畫聲明(FTC) 頁面觀看。
by 小翔