最後更新日期：2023 年 2 月 14 日
1.文章最後更新時間的重要性
文章最後更新時間有多重要，想必網路上各個部落格都已經告訴你了
這邊廢話就不多說直接進入主題吧！
恩奇使用的環境是Astra主題+Elementor Free(免費版)
前幾個方法感謝 馬思特電商學院 的教學
2.顯示文章最後更新時間的四種方法
2-1.加入 程式碼 到主題的function.php檔案
用程式碼新增的方式可以減少網站的外掛數量，也能提高網站速度
在WordPress後台左側主選單中→外觀→佈景主題檔案編輯器→選擇「佈景主題函式庫(function.php)」
這邊建議使用Child子主題，以免未來主題更新時還要重新編輯
在最後一行插入以下程式碼：
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' ); 插入後再文章最前面會顯示「文章最後更新時間：」，由於是預設的樣子，所以很不明顯
在WordPress後台左側主選單中→外觀→「自訂」或「附加的CSS」
選擇「自訂」的只要點選後往下拉也可以找到「附加的CSS」，兩者是一樣的
將以下CSS插入並重新編輯你要的樣式即可
/*文章最後更新時間*/
.last-modified {
font-size: 1rem; //文字大小
background-color: #007500; //背景顏色
text-align: center; //文字置中
color: #ffffff; //文字顏色
border-radius: 15px;
margin: 20px auto;
} 成功了？那恭喜你！
但是對於Elementor編輯器的使用者來說，方法1是沒有效果的
如果你也沒有出現效果
接下來試試方法2
2-2使用 Code Snippets 來加入程式碼
如果你不想動主題的函式庫，或是不會找function.php檔案
那麼你可以使用 Code Snippets 這個外掛
在WordPress後台左側主選單中→外掛→「安裝外掛」→輸入「Code Snippets」並搜尋，找到如圖示圈選的這個外掛安裝並啟用
在WordPress後台左側主選單中→程式碼片段→「新增程式碼片段」
將以下程式碼貼上，並勾選「僅執行於網站前端」→儲存設定並啟用
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' ); 如果需要修改樣式，就再新增一個程式碼片段
將以下程式碼貼上儲存設定並啟用即可
add_action('wp_head',function(){?>
<style>
/*文章最後更新日期*/
.last-modified {
font-size: 1rem;
background-color: #007500; //背景顏色
text-align: center; //文字置中
color: #ffffff; //文字顏色
border-radius: 15px;
margin: 20px auto;
}
</style>
<?php } ) ; 成功了？那恭喜你！
但是對於Elementor編輯器的使用者來說，方法1、方法2是沒有效果的
如果你也沒有出現效果
接下來試試方法3(關鍵！)
2-3使用 WP Last Modified Info 外掛"自動"加入最後更新時間
如果以上程式碼你都嫌麻煩，使用 WP Last Modified Info 外掛可以幫你節省很多時間，前提是自動加入可以正常顯示的話…
在WordPress後台左側主選單中→外掛→「安裝外掛」→輸入「WP Last Modified Info」並搜尋，找到如圖示的這個外掛安裝並啟用
啟用後他會在在WordPress後台左側主選單中→設定→「WP Last Modified Info」
1.選擇「POSTS」頁籤
2.把顯示打開成綠色
3.選擇要顯示的位置
再往下找到HTML並貼上以下程式碼(如圖)，在「TEMPLATE TAG」頁籤同樣位置也請貼上相同的程式碼並儲存設定
<p id="post-modified-info"><p style="text-align:center">最後更新日期： %post_modified% </p></p>
需要修改樣式請到「MISC.」頁籤，將以下程式碼貼上並儲存設定
#post-modified-info {
background: #007500; //背景顏色
color: #fff; //文字顏色
text-align: center; //文字置中
border-radius: 10px;
margin: 20px auto;
} 成功了？那恭喜你！
但是對於Elementor編輯器的使用者來說，方法1、方法2及方法3是沒有效果的
如果你也沒有出現效果
接下來試試方法4(終於可以顯示了！)
2-4使用 WP Last Modified Info 外掛"手動"加入最後更新時間
寫到這裡，以上三個方法都沒用的應該不只有我一個
接下來教你顯示的方法
雖然只能手動插入但總比沒有好
前置需要安裝「WP Last Modified Info」
左側主選單中→設定→「WP Last Modified Info」
1.選擇「POSTS」頁籤
2.把顯示打開成綠色
3.請你選擇”手動(使用簡碼)”
4.其他步驟按2-3完成(不需設定CSS，因為用了也不會顯示)
接下來打開你的Elementor編輯器，在左側找到「短代碼」並拉到要放的位置
把以下短代碼輸入就會發現文章最後更新時間出現了！！
是不是感動到快哭了呢？
恩奇我找了好幾天翻遍中英文的方法最後突然靈機一動
想說作者有說過可以手動輸入簡碼加入
抱著死馬當活馬醫的心態嘗試竟然成功了
後來我有找到使用語法更改背景及文字的方法
不是透過CSS而是HTML設定
如果你需要更改區塊背景顏色及文字顏色
可以使用下面的程式碼
我都有註解好了
只要貼在「POSTS」及「TEMPLATE TAG」頁籤即可
<p id="post-modified-info">
<div style="background-color:#007500;"> <!--區塊顏色-->
<p style="text-align:center"> <!--文字置中-->
<span style="color:#ffffff">最後更新日期：%post_modified% <!--文字顏色-->
</span>
</p>
</div>
</p>
這樣文章就會出現最後更新時間囉！
3.加碼Elementor Pro內建新增的方法
Elementor Pro有一個內建功能可以顯示最後更新時間
但恩奇使用的是Elementor Free
所以這邊沒辦法截圖告訴你詳細步驟
但是Elementor官方會告訴你
如果看不懂英文也可以使用Chrome瀏覽器的擴充翻譯
點一下就會整頁翻譯囉
(改天介紹)
