给WordPress帖子添加过期日期

我运行了一些网站,这些网站在其主页的横幅中包含通知和重要信息。我倾向于为此使用自定义帖子类型,添加横幅并在主题中需要的位置显示它们。 (如果您想做类似的事情,本教程中对此进行了解释。)

但我的横幅总是有到期日。例如,它们可能包含有关即将举行的活动或职位空缺的信息。一旦活动结束或职位空缺被填补,我就必须进入网站并手动删除该帖子。

如果在创建此类帖子时,我可以给它们一个到期日期,那么它们将不再在我的网站上可见,那就容易多了。

在本教程中,我将向您展示如何做到这一点。共有三个步骤:

在帖子编辑屏幕中为到期日期创建一个元框。将 jQuery UI 日期选择器应用到元框字段以增强界面。最后,使用 pre_get_posts 挂钩确保不会显示过期日期的帖子。

您需要什么

要完成本教程,您需要:

WordPress 的开发安装代码编辑器

您将使用到期日期所需的所有代码创建一个插件,并在您的网站上激活它。那么让我们开始吧!

设置插件

首先您需要创建插件。在 wp-content 目录的插件文件夹中,创建一个名为 tutsplus-post-expiry-date-php 的空文件。

在代码编辑器中打开文件并向其中添加以下内容:

<?php/*Plugin Name: Add an Expiry Date to PostsPlugin URI: https://.tutsplus.com/tutorials/add-an-expiry-date-to-wordpress-posts--cms-22665Description: Adds an expiry date to posts, using a the jQuery UI datepickerAuthor: Rachel McCollinVersion: 1.0 */

您需要编辑该文件以使用您自己的名称和插件 URL,但这就是您需要告诉 WordPress 这是一个插件及其用途的信息。

现在转到 WordPress 管理员中的插件屏幕并激活插件。

创建元框

首先,我们将为到期日期创建元框。

使用 add_meta_box() 显示元框

第一步是创建将元框添加到帖子编辑屏幕的函数。将其添加到您的插件文件中:

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' );

这使用 add_meta_box() 函数,该函数有六个参数:

'tutsplus_expiry_date_metabox':此元框的唯一ID__( 'Expiry Date', 'tutsplus'):这显示为元框的标题

'tutsplus_expiry_date_metabox_callback':将填充元框的回调函数(我们接下来将创建它)

'post':此元框将出现在其编辑屏幕上的帖子类型

'side':元框将出现在屏幕的哪一部分

'high':元框将出现在哪个位置

然后将该函数附加到 add_meta_boxes 挂钩,使其在正确的时间触发。

创建回调函数

如果您现在保存插件并加载编辑屏幕,您会看到错误,因为回调函数尚未定义。所以我们接下来就这样做。

将其添加到您的插件文件中:

function tutsplus_expiry_date_metabox_callback( $post ) { ?>    ID, 'expires', true );?><input type="text" class="MyDate" name="tutsplus_expiry_date" value= / ><?php }

让我们看看它的作用:

它定义了 tutsplus_expiry_date_metabox_callback() 回调函数,以 $post 作为其对象。它打开一个表单元素。它会创建一个名为 $tutsplus_expiry_date 的变量,并将 'expires' 元键的值作为其值。它为元框中的字段创建一个标签。它使用日期选择器工作所需的 MyDate 类创建一个输入元素,名称为 tutsplus_expiry_date ,我们稍后在保存字段数据时将使用它,以及值 $tutsplus_expiry_date。它关闭表单。

现在我们有了表单,但它实际上不会执行任何操作,除非我们创建另一个函数来保存用户添加到其中的数据。

保存后保存数据

要将任何数据输入保存到表单中,我们需要创建一个函数,然后将其附加到 save_post 挂钩。

在您的插件文件中,添加以下内容:

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' );

这会执行以下操作:

它检查当前用户是否具有当前帖子的 edit_post 能力。如果是,它会使用 isset 检查数据是否已添加到元框字段。如果是这种情况,它会创建一个名为 $new_expiry_date 的变量,并将其定义为输入的值。最后,它会使用该值更新帖子的元数据。

所以我们现在有一个元框,它可以让用户添加文本并将其保存到帖子元数据中。让我们让它更安全。

添加随机数以确保安全

为了确保帖子元数据仅通过此表单进行编辑,我们将添加一个随机数。

在回调函数中,在函数的其余内容之前,添加以下代码:

wp_nonce_field( 'tutsplus_expiry_date_metabox_nonce', 'tutsplus_nonce' );

接下来,在用于保存数据的 tutsplus_save_expiry_date_meta() 函数中,在函数开头添加以下内容:

if( !isset( $_POST['tutsplus_nonce'] ) ||    !wp_verify_nonce( $_POST['tutsplus_nonce'],'tutsplus_expiry_date_metabox_nonce') ) return;

现在保存您的插件并查看您的帖子编辑屏幕。您将看到您的元框:

给WordPress帖子添加过期日期

这是一个好的开始,但问题是目前这是一个普通的文本字段,所以没有办法确保您的用户仅以正确的格式输入日期。我们将通过添加 jQuery UI 日期选择器来纠正这个问题。

添加 JQuery UI 日期选择器

好消息是 jQuery UI 日期选择器预装了 WordPress,因此您无需注册或安装它:只需将其放入函数中即可。

在插件文件的顶部添加以下内容:

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' );

这会将脚本本身和存储在 Google API 上的脚本样式表排入队列。请注意,您必须将其挂钩到 admin_enqueue_scripts 操作挂钩,而不是像在前端使用脚本时那样挂钩到 wp_enqueue_scripts

接下来,您需要将脚本添加到输出表单的回调函数中。在 input 元素之后和结束 标记之前,添加以下内容:

    jQuery(document).ready(function() {jQuery('.MyDate').datepicker({dateFormat : 'dd-mm-yy'});});

这引用了您已添加到输入元素的 MyDate 类,并向其中添加了日期选择器脚本。

您的回调函数现在将如下所示:

function tutsplus_expiry_date_metabox_callback( $post ) { ?>    ID, 'expires', true );?><input type="text" class="MyDate" name="tutsplus_expiry_date" value= / >jQuery(document).ready(function() {jQuery('.MyDate').datepicker({dateFormat : 'dd-mm-yy'});});<?php }

现在让我们看看保存插件文件后元框的样子:

给WordPress帖子添加过期日期

那好多了!但是,尽管您现在可以为帖子添加到期日期,但这对于它们是否显示在您的网站上没有任何影响。现在让我们改变这一点。

修改查询以排除过期帖子

最后一步是使用 pre_get_posts 挂钩修改主查询。

仍在您的插件文件中工作,添加以下代码:

function tutsplus_filter_expired_posts( $query ) {        // doesn't affect admin screens    if ( is_admin() )        return;    // check for main queryif ( $query->is_main_query() ) {    //filter out expired posts        $today = date('d-m-Y');        $metaquery = array(            array(                 'key' => 'expires',                 'value' => $today,                 'compare' => ' 'DATE',)        );        $query->set( 'meta_query', $metaquery );}}add_action( 'pre_get_posts', 'tutsplus_filter_expired_posts' );

这做了六件事:

首先,它定义 tutsplus_filter_expired_posts() 函数,并以 $query 作为其对象。它会检查我们是否位于管理屏幕中,因为我们不想排除其中过期的帖子。接下来,它检查主查询是否正在运行。如果是这样,它将变量 $today 定义为今天的日期,并使用与日期选择器相同的日期格式。然后,它使用 compare 运算符定义 $metaquery 来排除过期日期早于今天的帖子。最后,它使用 $metaquery 变量重置查询。

该函数与 pre_get_posts 挂钩,这将使其在查询获取帖子时运行。

现在保存您的插件文件并尝试一下。创建一个发布日期为几天前的帖子,然后为其指定昨天的到期日期。保存并切换到您的博客主页。您会发现您刚刚创建的帖子不在那里!

摘要

能够让您的帖子在给定日期自动过期非常有用。如果帖子的内容不再相关,或者您不希望人们在给定日期之后看到它,则添加到期日期可以让您不必记住在不再需要该帖子时编辑或删除该帖子。

通过使用 jQuery 日期选择器,您创建了一个用户友好的元框,您可以使用它来节省时间并避免访问者的困惑。

以上就是给WordPress帖子添加过期日期的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1551868.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 22:07:27
下一篇 2025年12月21日 22:07:50

相关推荐

  • CSS 多列布局的适用场景是什么?

    CSS 多列布局的应用价值 问题: CSS 多列布局 (Multi-column Layout) 是否还有存在的价值? 答案: 是的,CSS 多列布局仍然有其独特的应用场景。 具体来说,多列布局在以下情况下会非常有用: 立即学习“前端免费学习笔记(深入)”; 小说阅读中的横向滚动: 对于小说等长文内…

    2025年12月24日
    000
  • 多列布局在现代 CSS 布局中还有用武之地吗?

    Multi-column Layout在现代CSS布局中的实用性 CSS中的多列布局(Multi-column Layout)曾经是一种常见的布局技术,用于创建多列文本布局。近年来,随着弹性盒布局(Flexbox)和网格布局(Grid)的广泛应用,多列布局似乎逐渐失去了昔日的光辉。那么,在现代CSS…

    2025年12月24日
    000
  • CSS多列布局,仍在用武之地吗?

    CSS多列布局Multi-column Layout:依然有其用武之地 虽然CSS网格布局(CSS Grid Layout)和弹性盒布局(Flexbox)已经成为现代网页布局的主流,但多列布局(Multi-column Layout)仍然在某些特定场景下拥有一席之地。 独特的使用场景 尽管在大多数情…

    2025年12月24日
    000
  • 现代网页设计中,CSS 多列布局是否依然实用?

    CSS多列布局:在现代网页设计中还有用武之地吗? CSS多列布局(Multi-column Layout)是一种将内容分成多列显示的技术。在早期的网络发展阶段,它曾经被广泛用于创建多栏式布局,但近年来随着响应式设计的兴起,其使用率有所下降。 它是否有自己独特的使用场景? 虽然多列布局在响应式设计中并…

    2025年12月24日
    000
  • 网页设计服务终极指南

    对于任何追求在线成功的企业来说,拥有一个迷人且实用的网站至关重要。在 Arham Web Works,我们了解创建网页设计的复杂性,不仅能吸引访问者,还能将他们转化为忠实的客户。我们的网页设计方法是全面的,将美学吸引力与无缝功能相结合。本指南将深入探讨网页设计服务的关键方面,展示为什么我们的专业知识…

    2025年12月24日
    200
  • html5如何编辑网站_HTML5网站编辑与在线修改技巧【教程】

    可通过五种轻量级方式在线编辑HTML5网站:一、浏览器开发者工具实时修改;二、在线编辑器上传协作;三、FTP客户端远程编辑;四、CMS后台嵌入HTML5模块;五、VS Code配Live Server本地调试。 如果您希望对现有的HTML5网站进行内容更新或样式调整,但不具备专业开发环境,可以通过多…

    2025年12月23日
    000
  • 使用jQuery动态调整iFrame尺寸:解决animate函数单位问题

    本教程将详细指导如何利用jQuery的`animate`函数实现点击按钮动态调整iFrame尺寸的功能。文章将深入探讨在设置尺寸时常见的单位缺失问题,并提供正确的解决方案,确保iFrame在不同设备视图(如桌面、平板、手机)间流畅切换,同时强调jQuery库的正确引入方法。 概述 在网页开发中,有时…

    2025年12月23日
    300
  • 使用jQuery动态调整iFrame尺寸的实用指南

    本教程旨在指导您如何通过点击按钮动态调整iframe的宽度和高度,以实现桌面、平板和移动设备预览效果。文章将深入探讨在使用jquery `animate()` 方法时指定css尺寸单位的重要性,并提供完整的html和javascript代码示例,帮助您解决常见的尺寸调整问题,确保功能在各种web环境…

    2025年12月23日
    000
  • WordPress Elementor 实现滚动时文本动态变化效果教程

    本教程详细介绍了如何在wordpress和elementor中实现类似neom官网的滚动时文本动态变化效果,即当用户滚动页面时,标题文本的尺寸、颜色和位置随之改变,并平滑过渡到下一部分的标题。文章将从elementor页面结构搭建、css样式定义、javascript逻辑编写三个核心步骤展开,并提供…

    2025年12月23日
    000
  • 使用jQuery实现iFrame动态尺寸调整:桌面、平板与移动视图切换教程

    本教程详细讲解如何利用jquery动态调整iframe的宽度和高度,以模拟不同设备(如桌面、平板和手机)的预览效果。核心在于使用`animate`方法时,必须为宽度和高度值明确指定css单位(例如”px”),并确保正确引入jquery库,从而解决尺寸调整不生效的问题。 引言:…

    2025年12月23日
    200
  • 动态调整iFrame尺寸的教程:响应式预览实现与常见陷阱规避

    本教程旨在指导开发者如何通过javascript和jquery实现按钮点击动态调整iframe尺寸的功能,从而创建响应式的网页预览。文章将详细阐述html结构、jquery动画逻辑,并着重强调在css属性动画中指定单位的重要性,以解决在不同环境中(如wordpress)可能遇到的尺寸设置失效问题,确…

    2025年12月23日
    000
  • WordPress/WooCommerce:为产品标题添加必填属性的专业指南

    本教程旨在指导您如何在wordpress后台为产品(或其他自定义文章类型)的标题字段添加必填属性。我们将探讨避免直接修改核心文件的重要性,并提供一个基于wordpress钩子和javascript的专业解决方案,实现客户端和服务器端双重验证,确保产品标题在发布前必须填写。 引言:为什么产品标题需要必…

    2025年12月23日
    000
  • 纯CSS修改含多元素按钮文本的技巧与局限性

    本文探讨了在无法直接编辑html代码的场景下,如何仅通过css视觉上修改包含多个子元素的按钮文本。核心方法是利用css隐藏原有文本,并通过伪元素插入新内容。文章同时强调了这种纯css方案在seo和可访问性方面的潜在局限性,提醒开发者在应用时需权衡利弊。 在现代网页开发中,尤其是在使用内容管理系统(如…

    2025年12月23日
    000
  • 纯CSS修改包含嵌套元素的按钮文本:WordPress环境下的技巧与考量

    本文介绍在无法直接编辑html的wordpress等受限环境中,如何仅通过css修改包含嵌套元素的按钮文本。核心策略是利用css将原有文本和部分子元素隐藏,然后通过:after伪元素插入新的可见文本。文章将详细阐述实现步骤、提供代码示例,并强调此方法在seo和可访问性方面的局限性,建议在必要时作为权…

    2025年12月23日
    000
  • CSS修改包含多元素按钮文本的技巧与局限性

    本文探讨在无法直接编辑html代码的场景下,如何仅通过css修改包含多个子元素的按钮文本。核心方法是利用`font-size: 0`隐藏原有文本,并通过`:after`伪元素插入新文本。文章将详细介绍这种css技巧的实现步骤,并着重分析其在可访问性(accessibility)和搜索引擎优化(seo…

    2025年12月23日
    000
  • 使用CSS修改包含多元素按钮的文本内容

    本文探讨了在无法直接编辑HTML代码(如WordPress环境)的情况下,如何仅通过CSS修改包含多个嵌套元素的按钮文本。针对传统`content`属性无法直接修改特定文本的问题,文章提出了一种通过隐藏原始文本、保留特定子元素并利用`::after`伪元素插入新文本的CSS解决方案,同时强调了该方法…

    2025年12月23日
    000
  • HTML Iframe嵌入内容显示异常:深度解析与解决方案

    本文旨在解决使用html iframe嵌入视频或图片时内容不显示的问题。核心原因在于父级容器的高度设置不当,特别是当采用`padding-bottom`实现响应式布局时,`height:0px`会阻止内容渲染。教程将详细分析问题根源,提供正确的css配置方法,并通过示例代码演示如何确保iframe内…

    2025年12月23日
    000
  • edit as html代码怎么运行_edit as html运行方法【教程】

    首先确认编辑器是否支持HTML模式,查找“Edit as HTML”选项并进入代码编辑区域;若无此功能需更换平台。输入标准HTML代码如测试,避免使用等高危标签。退出HTML模式后手动保存更改,并点击预览检查显示效果。若异常,重新检查标签闭合情况或使用浏览器开发者工具(F12)排查元素加载问题。 如…

    2025年12月23日
    000
  • WordPress ACF中利用PHP正确输出嵌套HTML结构以匹配CSS样式

    本文旨在指导如何在WordPress的Advanced Custom Fields (ACF) 中,通过PHP正确处理重复字段的输出,以生成精确匹配CSS样式所需的嵌套HTML结构。核心在于理解PHP的字符串拼接机制,将动态内容(如数字和详细描述)无缝集成到单个HTML元素(如包含“的`…

    2025年12月23日
    000
  • 为WordPress产品名称添加必填(Required)属性的教程

    本教程详细介绍了如何在wordpress中为产品名称字段添加html的`required`属性,从而强制用户在发布或更新产品时必须填写该字段。文章强调了避免直接修改wordpress核心文件的重要性,并提供了一种通过使用wordpress钩子(hooks)和自定义javascript代码来实现此功能…

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信