再贴吧看到一位吧友的提问 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 | 捕获到 10 个小伙伴

大宝进行回复 取消回复

上传图片
  1. Steppinna
    Steppinna Reply
  2. KelDramma
    KelDramma Reply
  3. Steppinna
    Steppinna Reply
  4. Tester
    Tester Reply
  5. 张角弓
    张角弓 Reply
    1. 张角弓
      张角弓
    2. E丶白
      E丶白
  6. BanYuner
    BanYuner Reply
  7. 大宝
    大宝 Reply
    1. E丶白
      E丶白
Back