再贴吧看到一位吧友的提问 WordPress如何让当天发布文章的日期或者标题变红 ,对于懂代码的小伙伴简单粗暴改主题这是很容易实现的,但如果对主题结构不熟悉可以采用 WordPress 强大的钩子来快速实现。

用钩子让当天发布的文章标题变红

将以下代码放入主题的functions.php

/**
 * Name:用钩子让当天发布的文章标题变红
 * Author:E丶白
 * URL:https://zsky.me/22.html
 */
function underlineTodayPost( $title ) {
	global $post;
	if(get_the_time('Y-m-d')==date('Y-m-d')){
		return '<span class="underlineTodayPost">'.$title.'</span>';
	}
	else{
		return $title;
	}
}
add_filter( 'the_title', 'underlineTodayPost' );

然后再主题的style.css结尾加入变红的样式代码就可以了

span.underlineTodayPost {
    color: #F44336;
}


如果只想让首页变红可以在判断中加入is_home()

用钩子给当天发布的文章加个小红点

既然是给标题加点料自然不是变红这么简单,变红个人觉得可能会显得唐突破坏主题的配色,我们可以加个小红点,稍微改一下上面的代码即可,当然你也可以继续使用上面的PHP代码然后使用CSS的:after:before伪元素来实现
将以下代码放入主题的functions.php

/**
 * Name:用钩子给当天发布的文章加个小红点
 * Author:E丶白
 * URL:https://zsky.me/22.html
 */
function underlineTodayPost( $title ) {
	global $post;
	if(get_the_time('Y-m-d')==date('Y-m-d')){
		return '<i class="underlineTodayPost"></i>'.$title;
	}
	else{
		return $title;
	}
}
add_filter( 'the_title', 'underlineTodayPost' );

CSS代码仅供参考,还需根据主题调整

i.underlineTodayPost{
    width: 12px;
    height: 12px;
    display: block;
    float: left;
    background: #F44336;
    border-radius: 50%;
    margin: 5px 0 0 -12px;
}


或者加个 NEW 标识

i.underlineTodayPost {
    display: block;
    float: left;
    background: #F44336;
    /* border-radius: 5px; */
    margin: 12px 5px 0 0;
    color: #fff;
    font-size: 2px;
    padding: 2px 5px;
    /* font-style: normal; */
    letter-spacing: 0;
}

给当天发布的文章加个Class类

如果要对当天发布的文章样式更深入的定制,可以用post_class钩子给当天发布的文章加个Class 类这样的话就可以给新文章单独写样式了

/**
 * Name:用钩子给当天发布的文章加个class类
 * Author:E丶白
 * URL:https://zsky.me/22.html
 */
function addClassTodayPost( $classes, $class, $post_id ){
	global $post;
	if(get_the_time('Y-m-d')==date('Y-m-d')){
		$classes[] = 'today-post';
	}
	return $classes;
}
add_filter( 'post_class', 'addClassTodayPost', 10,3);


就酱.

Comments | 捕获到 7 个小伙伴

Paulflult进行回复 取消回复

上传图片
  1. Tester
    Tester Reply

    图片测试评论图片

  2. 张角弓
    张角弓 Reply

    首先感谢技术分享。
    其次我有一个问题请教:
    我将加NEW标识的那段代码复制到了functions.php底部
    之后错误操作将
    span.underlineTodayPost {
    color: #F44336;
    }
    这段代码放到了style.css最后
    之后刷新网站显示
    zhang-ao.com 目前无法处理此请求。
    HTTP ERROR 500
    请问我该如何解决这个问题……
    谢谢!

    1. 张角弓
      张角弓

      @张角弓 我使用的是TWENTY SEVENTEEN这个主题……实测不能套代码
      我对代码一窍不通……
      用FTP删除之后恢复正常了
      我还是再找个插件吧……
      谢谢!

    2. E丶白
      E丶白

      @张角弓 style.css 就算改错也不会引起500错误,PHP 代码是要放在 function.php 最后的 ?> 前,看看是不是这个问题。

  3. BanYuner
    BanYuner Reply

    很全面的教程,加一些判断比较好,比如首页有这个功能,但是其他页面就没有比较好

  4. 大宝
    大宝 Reply

    好像对我这个主题没作用啊

    1. E丶白
      E丶白

      @大宝 理论上对所有主题适用,没安装代码高亮,贴出来的html代码有问题我去改一下你再试试

Back