我運行了一些網(wǎng)站,這些網(wǎng)站在其主頁的橫幅中包含通知和重要信息。我傾向于為此使用自定義帖子類型,添加橫幅并在主題中需要的位置顯示它們。 (如果您想做類似的事情,本教程中對此進(jìn)行了解釋。)
但我的橫幅總是有到期日。例如,它們可能包含有關(guān)即將舉行的活動或職位空缺的信息。一旦活動結(jié)束或職位空缺被填補,我就必須進(jìn)入網(wǎng)站并手動刪除該帖子。
如果在創(chuàng)建此類帖子時,我可以給它們一個到期日期,那么它們將不再在我的網(wǎng)站上可見,那就容易多了。
在本教程中,我將向您展示如何做到這一點。共有三個步驟:
- 在帖子編輯屏幕中為到期日期創(chuàng)建一個元框。
將 jQuery UI 日期選擇器應(yīng)用到元框字段以增強界面。
最后,使用
pre_get_posts
掛鉤確保不會顯示過期日期的帖子。
您需要什么
要完成本教程,您需要:
WordPress 的開發(fā)安裝
代碼編輯器
您將使用到期日期所需的所有代碼創(chuàng)建一個插件,并在您的網(wǎng)站上激活它。那么讓我們開始吧!
設(shè)置插件
首先您需要創(chuàng)建插件。在 wp-content
目錄的插件文件夾中,創(chuàng)建一個名為 tutsplus-post-expiry-date-php
的空文件。
在代碼編輯器中打開文件并向其中添加以下內(nèi)容:
<?php /* Plugin Name: Add an Expiry Date to Posts Plugin URI: https://.tutsplus.com/tutorials/add-an-expiry-date-to-wordpress-posts--cms-22665 Description: Adds an expiry date to posts, using a the jQuery UI datepicker Author: Rachel McCollin Version: 1.0 */
登錄后復(fù)制
您需要編輯該文件以使用您自己的名稱和插件 URL,但這就是您需要告訴 WordPress 這是一個插件及其用途的信息。
現(xiàn)在轉(zhuǎn)到 WordPress 管理員中的插件屏幕并激活插件。
創(chuàng)建元框
首先,我們將為到期日期創(chuàng)建元框。
使用 add_meta_box() 顯示元框
第一步是創(chuàng)建將元框添加到帖子編輯屏幕的函數(shù)。將其添加到您的插件文件中:
function tutsplus_add_expiry_date_metabox() { add_meta_box( 'tutsplus_expiry_date_metabox', __( 'Expiry Date', 'tutsplus'), 'tutsplus_expiry_date_metabox_callback', 'post', 'side', 'high' ); } add_action( 'add_meta_boxes', 'tutsplus_add_expiry_date_metabox' );
登錄后復(fù)制
這使用 add_meta_box()
函數(shù),該函數(shù)有六個參數(shù):
'tutsplus_expiry_date_metabox'
:此元框的唯一ID
__( 'Expiry Date', 'tutsplus')
:這顯示為元框的標(biāo)題
'tutsplus_expiry_date_metabox_callback'
:將填充元框的回調(diào)函數(shù)(我們接下來將創(chuàng)建它)
'post'
:此元框?qū)⒊霈F(xiàn)在其編輯屏幕上的帖子類型
'side'
:元框?qū)⒊霈F(xiàn)在屏幕的哪一部分
'high'
:元框?qū)⒊霈F(xiàn)在哪個位置
然后將該函數(shù)附加到 add_meta_boxes
掛鉤,使其在正確的時間觸發(fā)。
創(chuàng)建回調(diào)函數(shù)
如果您現(xiàn)在保存插件并加載編輯屏幕,您會看到錯誤,因為回調(diào)函數(shù)尚未定義。所以我們接下來就這樣做。
將其添加到您的插件文件中:
function tutsplus_expiry_date_metabox_callback( $post ) { ?> <form action="" method="post"> <?php //retrieve metadata value if it exists $tutsplus_expiry_date = get_post_meta( $post->ID, 'expires', true ); ?> <label for "tutsplus_expiry_date"><?php __('Expiry Date', 'tutsplus' ); ?></label> <input type="text" class="MyDate" name="tutsplus_expiry_date" value=<?php echo esc_attr( $tutsplus_expiry_date ); ?> / > </form> <?php }
登錄后復(fù)制
讓我們看看它的作用:
它定義了 tutsplus_expiry_date_metabox_callback()
回調(diào)函數(shù),以 $post
作為其對象。
它打開一個表單元素。
它會創(chuàng)建一個名為 $tutsplus_expiry_date
的變量,并將 'expires'
元鍵的值作為其值。
它為元框中的字段創(chuàng)建一個標(biāo)簽。
它使用日期選擇器工作所需的 MyDate
類創(chuàng)建一個輸入元素,名稱為 tutsplus_expiry_date
,我們稍后在保存字段數(shù)據(jù)時將使用它,以及值 $tutsplus_expiry_date
。
它關(guān)閉表單。
現(xiàn)在我們有了表單,但它實際上不會執(zhí)行任何操作,除非我們創(chuàng)建另一個函數(shù)來保存用戶添加到其中的數(shù)據(jù)。
保存后保存數(shù)據(jù)
要將任何數(shù)據(jù)輸入保存到表單中,我們需要創(chuàng)建一個函數(shù),然后將其附加到 save_post
掛鉤。
在您的插件文件中,添加以下內(nèi)容:
function tutsplus_save_expiry_date_meta( $post_id ) { // Check if the current user has permission to edit the post. */ if ( !current_user_can( 'edit_post', $post->ID ) ) return; if ( isset( $_POST['tutsplus_expiry_date'] ) ) { $new_expiry_date = ( $_POST['tutsplus_expiry_date'] ); update_post_meta( $post_id, 'expires', $new_expiry_date ); } } add_action( 'save_post', 'tutsplus_save_expiry_date_meta' );
登錄后復(fù)制
這會執(zhí)行以下操作:
它檢查當(dāng)前用戶是否具有當(dāng)前帖子的 edit_post
能力。
如果是,它會使用 isset
檢查數(shù)據(jù)是否已添加到元框字段。
如果是這種情況,它會創(chuàng)建一個名為 $new_expiry_date
的變量,并將其定義為輸入的值。
最后,它會使用該值更新帖子的元數(shù)據(jù)。
所以我們現(xiàn)在有一個元框,它可以讓用戶添加文本并將其保存到帖子元數(shù)據(jù)中。讓我們讓它更安全。
添加隨機數(shù)以確保安全
為了確保帖子元數(shù)據(jù)僅通過此表單進(jìn)行編輯,我們將添加一個隨機數(shù)。
在回調(diào)函數(shù)中,在函數(shù)的其余內(nèi)容之前,添加以下代碼:
wp_nonce_field( 'tutsplus_expiry_date_metabox_nonce', 'tutsplus_nonce' );
登錄后復(fù)制
接下來,在用于保存數(shù)據(jù)的 tutsplus_save_expiry_date_meta()
?函數(shù)中,在函數(shù)開頭添加以下內(nèi)容:
if( !isset( $_POST['tutsplus_nonce'] ) || !wp_verify_nonce( $_POST['tutsplus_nonce'], 'tutsplus_expiry_date_metabox_nonce' ) ) return;
登錄后復(fù)制
現(xiàn)在保存您的插件并查看您的帖子編輯屏幕。您將看到您的元框:
這是一個好的開始,但問題是目前這是一個普通的文本字段,所以沒有辦法確保您的用戶僅以正確的格式輸入日期。我們將通過添加 jQuery UI 日期選擇器來糾正這個問題。
添加 JQuery UI 日期選擇器
好消息是 jQuery UI 日期選擇器預(yù)裝了 WordPress,因此您無需注冊或安裝它:只需將其放入函數(shù)中即可。
在插件文件的頂部添加以下內(nèi)容:
function tutsplus_load_jquery_datepicker() { wp_enqueue_script( 'jquery-ui-datepicker' ); wp_enqueue_style( 'jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css' ); } add_action( 'admin_enqueue_scripts', 'tutsplus_load_jquery_datepicker' );
登錄后復(fù)制
這會將腳本本身和存儲在 Google API 上的腳本樣式表排入隊列。請注意,您必須將其掛鉤到 admin_enqueue_scripts
操作掛鉤,而不是像在前端使用腳本時那樣掛鉤到 wp_enqueue_scripts
。
接下來,您需要將腳本添加到輸出表單的回調(diào)函數(shù)中。在 input 元素之后和結(jié)束 </form>
標(biāo)記之前,添加以下內(nèi)容:
<script type="text/javascript"> jQuery(document).ready(function() { jQuery('.MyDate').datepicker({ dateFormat : 'dd-mm-yy' }); }); </script>
登錄后復(fù)制
這引用了您已添加到輸入元素的 MyDate
類,并向其中添加了日期選擇器腳本。
您的回調(diào)函數(shù)現(xiàn)在將如下所示:
function tutsplus_expiry_date_metabox_callback( $post ) { ?> <form action="" method="post"> <?php // add nonce for security wp_nonce_field( 'tutsplus_expiry_date_metabox_nonce', 'tutsplus_nonce' ); //retrieve metadata value if it exists $tutsplus_expiry_date = get_post_meta( $post->ID, 'expires', true ); ?> <label for "tutsplus_expiry_date"><?php __('Expiry Date', 'tutsplus' ); ?></label> <input type="text" class="MyDate" name="tutsplus_expiry_date" value=<?php echo esc_attr( $tutsplus_expiry_date ); ?> / > <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.MyDate').datepicker({ dateFormat : 'dd-mm-yy' }); }); </script> </form> <?php }
登錄后復(fù)制
現(xiàn)在讓我們看看保存插件文件后元框的樣子:
那好多了!但是,盡管您現(xiàn)在可以為帖子添加到期日期,但這對于它們是否顯示在您的網(wǎng)站上沒有任何影響。現(xiàn)在讓我們改變這一點。
修改查詢以排除過期帖子
最后一步是使用 pre_get_posts
掛鉤修改主查詢。
仍在您的插件文件中工作,添加以下代碼:
function tutsplus_filter_expired_posts( $query ) { // doesn't affect admin screens if ( is_admin() ) return; // check for main query if ( $query->is_main_query() ) { //filter out expired posts $today = date('d-m-Y'); $metaquery = array( array( 'key' => 'expires', 'value' => $today, 'compare' => '<', 'type' => 'DATE', ) ); $query->set( 'meta_query', $metaquery ); } } add_action( 'pre_get_posts', 'tutsplus_filter_expired_posts' );
登錄后復(fù)制
這做了六件事:
首先,它定義 tutsplus_filter_expired_posts()
函數(shù),并以 $query
作為其對象。
它會檢查我們是否位于管理屏幕中,因為我們不想排除其中過期的帖子。
接下來,它檢查主查詢是否正在運行。
如果是這樣,它將變量 $today
定義為今天的日期,并使用與日期選擇器相同的日期格式。
然后,它使用 compare
運算符定義 $metaquery
來排除過期日期早于今天的帖子。
最后,它使用 $metaquery
變量重置查詢。
該函數(shù)與 pre_get_posts
掛鉤,這將使其在查詢獲取帖子時運行。
現(xiàn)在保存您的插件文件并嘗試一下。創(chuàng)建一個發(fā)布日期為幾天前的帖子,然后為其指定昨天的到期日期。保存并切換到您的博客主頁。您會發(fā)現(xiàn)您剛剛創(chuàng)建的帖子不在那里!
摘要
能夠讓您的帖子在給定日期自動過期非常有用。如果帖子的內(nèi)容不再相關(guān),或者您不希望人們在給定日期之后看到它,則添加到期日期可以讓您不必記住在不再需要該帖子時編輯或刪除該帖子。
通過使用 jQuery 日期選擇器,您創(chuàng)建了一個用戶友好的元框,您可以使用它來節(jié)省時間并避免訪問者的困惑。
以上就是給WordPress帖子添加過期日期的詳細(xì)內(nèi)容,更多請關(guān)注www.92cms.cn其它相關(guān)文章!