文章最後更新於 2023 年 7 月 5 日
文章發佈時間久了，如果有調整或資訊更新，就會進行編輯修改，我自己通常就是在更新處手動另外標註一下，蠻多站長也會直接修改標題加入該年年份，告知使用者這些為最新資訊，後來發現蠻多文章有提到，近年Google也看重dateModified這個屬性，也就是「文章最後更新日期」，除了在結構化資料中添加以外，最好在前台也顯示出來，有利於SEO排名。
本身使用的是soledad佈景主題，這次主要以直接添加程式碼操作。
學習WordPress架站推薦購入網站帶路姬所著「用WordPress打造賺錢副業」
∣ 購買soledad佈景主題 ∣
∣ 更多WordPress佈景主題 ∣
增加更新日期而不是修改發佈日期
如果更新何不調整發佈日期就好？簡單理解因為太常更改時間會被視為作弊，因為Google畢竟會傾向提供最新資訊給使用者，正常來說「發佈日期」除非是有大幅度的更動調整才合理。
至於怎麼判斷就不太清楚了，另外也有說法更新太頻繁也可能視為作弊(？！)，中年女子常常手快眼殘錯別字第一時間沒有看到，動不動就更新，這…(請Google大神開恩)，本來因為這點加上又嫌麻煩沒有添加，後來想想在文章一開始就讓網友理解該篇文章的更新狀態，加上方法不難也成功顯示了，筆記分享一下。
顯示最後更新日期的3種方式
蒐羅網路大神們的教學文章，有3種方式可選擇，簡單說明並附上教學文章資訊(挑選我自己比較看得懂的)，有興趣可直接前往參考。
使用外掛WP Last Modified Info
WP的世界凡事有外掛，大家一致推這件一款 WP Last Modified Info ，也可在後台搜尋該款外掛。
教學參考文章
步驟很詳細，可以跟著照做
但怪異的是我的WP後來顯示不相容，不死心勉強裝了，但設定上好像因為有更新，介面有點不太一樣，結果沒有成功顯示，所以就放棄。
使用外掛Code Snippets加入程式碼
一個外掛只做一件事好像有點浪費又佔空間，如果之後還需要添加程式碼，加入 Code Snippets 這個專門放程式碼的外掛很多人口碑推薦，也可在後台搜尋到。
但目前暫時關閉，想安裝可能要等一等
另外單純加入程式碼，發佈日期和更新日期的位置是不一樣的，如果進階想要和發佈日期對稱在同一個位置，會需要另外手動調整，對我來說有點難，下面2篇教學文章都有提到，可以參考看看。
教學參考文章
不安裝的外掛是指不裝WP Last Modified Info只為了顯示最新日期的外掛
WordPress 顯示最後更新日期的 3 種方法 (外掛、程式碼、Post Meta Data) – 提高 SEO 排名
三種方法都有介紹，而且很詳盡
∣ 購買soledad佈景主題 ∣
∣ 更多WordPress佈景主題 ∣
直接在佈景主題加入程式碼
由於我實在不想再多裝外掛了，找到以下文章除了有提供程式碼也有說明放入的位置，還有提供CSS的語法，只要2個步驟可完成，真是太歡喜感恩了。
個人照做有成功，覺得開心感恩
實作：使用程式碼顯示最後更新日期
以下是我根據上述 馬思特電商學院教學文章 操作，成功顯示的實作步驟，參考如下：
步驟一 / 到function.php加入程式碼
程式碼如下
function wp_last_updated_date( $content ) {
if( is_front_page() || is_home() ) {
return $content;
}
if( is_page(array(1017,927))){
return $content;
}
$u_time = get_the_time(‘U’);
$u_modified_time = get_the_modified_time(‘U’);
if ($u_modified_time >= $u_time + 86400) {
$updated = get_the_modified_time(“Y 年 F \ j 日 “);
$custom_content .= ‘<p class=”last-modified”>文章最後更新於 ‘. $updated .'</p>’;
}
$custom_content .= $content;
return $custom_content;
}
add_filter( ‘the_content’, ‘wp_last_updated_date’ );
貼哪裡？到後台找的function.php
路徑：外觀/佈景主題檔案編輯器/切換到function.php
步驟二 / 調整CSS語法
也是根據Google的建議，前台顯示最好要明顯可見，所以就調整背景顏色凸顯，同樣使用教學文章中提供的CSS語法。
CSS語法如下
/*文章最後更新日期tech.masterweb.com.tw*/
.last-modified {
font-size: 1rem;
background-color: #ffbb0d;
text-align: center;
color: #ffffff;
border-radius: 15px;
margin: 20px auto;
}
想要調整顏色，可以參照色碼表
貼哪裡？自訂項目 Custom CSS
路徑：外觀/自訂/ Custom CSS
然後就簡單完成了，前台顯示樸實無華這樣。
加入之後，所有文章和頁面都會顯示，如果頁面不想顯示，可以額外加入以下語法。
CSS語法如下
.page .last-modified {
display: none!important;
}
驗證：複合式搜尋結果(datemodified屬性)
加入程式碼，前台也成功顯示出來，Google驗證一下也是必須的，和 FAQ Schema驗證 一樣，到Google複合式搜尋結果測試頁，填入文章網址查看。
∣ 延伸閱讀 ∣ SEO優化：加入FAQ Schema 常見問題結構化資料，推薦使用Rank Math/數據生成器(鬍子科技學院提供)
點擊文章中的結構化資料查看，有出現dateModified屬性和時間就OK囉~
結語
雖然前台只是一個簡單的顯示，但若要進階作法和追求細節還是有難度，中年腦袋不好使，一次只能多裝一樣小新知，還要筆記下來不然會全忘光，自架站覺得有趣但也很挑戰，真是學無止境。
∣ 購買soledad佈景主題 ∣
∣ 更多WordPress佈景主題 ∣
學習WordPress架站推薦購入網站帶路姬所著「用WordPress打造賺錢副業」
香港的朋友對網頁設計、WP有興趣可以參考鬍子科技學院~ 🙂
➡ 鬍子科技學院網站
不過還是看個人習慣，想要進階或是多參考，幾個線上課程平台也都有推出類似課程，參考如下
∣ Hahow 好學校 / 網站架設 ∣
∣ YOTTA / 網頁設計課程 ∣ (包含梅干桑的WordPress課程)
∣ 窩課360 / 網頁設計 ∣ (較專業進階)
∣ 六角學院 / 網頁設計 ∣ (較專業進階)
感謝閱覽！若您願意額外點讚鼓勵(至多5讚)，那就真的太圓滿了~ 😉
∣ Google ∣ FB ∣ Twitter ∣ APPLE ID ∣ 皆可登入/註冊
