為何在你的 WordPress 網站上突出版新文章？

突出版新文章可以幫助回訪訪客輕鬆找到你的新內容，確保他們不會錯過任何新增的資訊或更新。標記新文章還能提升用戶在網站上的體驗，節省他們的時間，增加你的網頁瀏覽量。

良好的網站使用者體驗不僅能讓訪客感到滿意，還對 WordPress SEO 有幫助。當你網站易於使用時，會提升搜索引擎排名，增加訪客找到你內容的機會。

方法 1：使用 WordPress 插件突出台新文章

步驟 1：安裝並啟用 Mark New Posts 插件

首先，你需要安裝並啟用 Mark New Posts 插件。安裝完成後，進入 WordPress 後台的設定 » Mark New Posts 頁面，進行插件的設置。

步驟 2：配置標記設置

選取標籤顯示的位置，可以是文章標題後、標題前或標題前後。我們建議選擇標題後，因為這樣能更好地吸引用戶注意。

選擇標記類型，有“New”文本、橙色圓圈、旗標、圖片等選項。根據網站設計選擇最合適的標記類型。

你還可以為新文章的標題設置背景顏色，但是我們發現這項設置沒必要，所以關閉了它。在“標記已讀”設置中，我們推薦選擇“打開後”，確保用戶在打開一篇文章後，其他未讀文章仍保留新標籤。

最後，設置標籤顯示天數，選擇是否為新訪客顯示所有現有文章為新文章，以及是否為自定義文章類型禁用新標籤。

配置完成後，點擊“保存”。現在可以開啟隱身模式訪問你網站，查看新標籤是否顯示。

方法 2：通過添加自定義程式碼突出台新文章

如果你對前一個方法中的新標籤選項不滿意，可以通過自定義程式碼來實現。對於初學者來說，這可能會有些困難，但使用 WPCode 插件可以安全地在 WordPress 中插入程式碼片段。

步驟 1：安裝 WPCode 插件

首先，安裝並啟用 WPCode 插件，然後進入 WordPress 後台的 Code Snippets » + Add Snippet 頁面，選擇‘Add Your Custom Code (New Snippet)’。

步驟 2：添加並配置程式碼片段

給程式碼片段取一個名字，例如“WordPress Last Visit Title Modifier”。然後在程式碼類型中選擇‘PHP Snippet’，並將以下程式碼複製粘貼到程式碼預覽框中：

// Define a function to modify post titles based on the last visit
function wpb_lastvisit_the_title($title, $id) {
    if (!in_the_loop() || is_singular() || get_post_type($id) == 'page') return $title;
    if (!isset($_COOKIE['lastvisit']) || $_COOKIE['lastvisit'] == '') {
        $current = current_time('timestamp', 1);
        setcookie('lastvisit', $current, time() + 60 * 60 * 24 * 7, COOKIEPATH, COOKIE_DOMAIN);
    }
    $lastvisit = $_COOKIE['lastvisit'];
    $publish_date = get_post_time('U', true, $id);
    if ($publish_date > $lastvisit) $title .= 'New';
    return $title;
}
add_filter('the_title', 'wpb_lastvisit_the_title', 10, 2);

這段程式碼根據用戶的最後訪問時間來修改 WordPress 文章標題，並在適當的位置添加新標籤。

插入程式碼後，選擇‘Auto Insert’為插入方式，並確保選擇‘Frontend only’為位置。然後將程式碼設置為‘Active’，並點擊‘Save Snippet’。

步驟 3：添加樣式程式碼

接下來，添加一個新自定義程式碼片段來設置新標籤的樣式。這次，程式碼類型選擇‘CSS Snippet’，並粘貼以下程式碼：

/* CSS to style the "New" label in blog post titles */
.new-article {
    background-color: #4CAF50; /* Green background color */
    color: #ffffff; /* White text color */
    padding: 2px 5px; /* Padding around the label */
    margin-left: 5px; /* Adjust the margin to your preference */
    border-radius: 3px; /* Rounded corners for the label */
    font-size: 12px; /* Adjust the font size to your preference */
}

這段程式碼自定義了新標籤的背景色、文本色、邊距和字體大小等屬性。

在插入區域中，選擇‘Site Wide Header’為位置。設置程式碼為‘Active’，並點擊‘Save Snippet’。