如何更改,部落格頁面文章標題 & 文章頁面標題樣式?

本篇小翔將分享,該如何利用 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」。

搜尋 Code Snippets

step 3

找到名稱為「Code Snippets」的外掛,點選 立即安裝,並 啟用 該外掛。

啟用 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 標題樣式,如下圖所示,箭頭所指的文章標題就是要修改的部分。

如何修改文章頁面的 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 } );

畫面 :

文章頁面 H1 標題樣式 (程式碼)

step 3

完成後記得滑到底部,點擊「儲存設定並啟用」按鈕,儲存並啟用你的程式碼。

儲存設定並啟用

0 0 選票
文章評分

如果對文章內容有任何問題,歡迎在底下留言讓我知道。
如果你喜歡我的文章,可以按分享按鈕,讓更多的人看見我的文章。
還沒訂閱部落格的朋友們,記得在右上角填入信箱,收到我最新文章的通知。

by 小翔

訂閱
通知
guest
0 評論
在線反饋
查看所有評論