如何在WordPress Genesis主题中创建智能列表?

在Genesis主题中创建一个更好看的基于列表的文章

您是否经常创建基于列表的博客文章并使用Genesis Framework?如果是的话,那么您可能会喜欢这个。

例子:

  • 一个创意代理机构的10个WordPress主题
  • 前5个优化SEO的Joomla模板
  • 提高您的网站搜索引擎排名的5种方法

这些类型的文章有一个共同之处-数字。

不久前,我购买了tagDiv的一个主题,我喜欢他们的智能列表功能。但是我太喜欢Genesis了,所以我没有放弃。过了一段时间,我想为什么不在Genesis中实现这个功能呢?

一个典型的列表文章的样子如下:

一个智能列表将把所有的标题转换为一个好看的数字,如下所示:

看起来更好了吗?喜欢吗?您可以在live demo in one of my previous posts中看到。

如果这是您正在寻找的东西,那么这里是代码。我已经在Authority Pro theme上测试过了,但是我没有看到任何原因不能与其他主题一起使用。

在修改之前备份文件或在一个暂存站点中测试。

首先,在functions.php文件中添加以下内容。这将把所有的h2标签转换为智能列表。

// 帖子的智能列表metabox
add_action( 'add_meta_boxes', 'cd_meta_box_add' );
function cd_meta_box_add(){
add_meta_box( 'smartlist_meta_field', '智能列表MetaBox', 'smartlist_meta_field', 'post', 'side', 'high' );
}

function smartlist_meta_field(){
global $post;
// 需要非空名来验证数据的来源
echo '';

// 如果已经输入了位置数据,则获取
$check = get_post_meta($post->ID, 'smartlist_check', true);

// 输出字段
?> 

<input type="checkbox" id="smartlist_check" name="smartlist_check" value="on" />

ID; } // 用户是否有编辑帖子或页面的权限? if ( !current_user_can( 'edit_post', $post->ID )) return $post->ID; // OK,我们经过身份验证:我们需要找到并保存数据 // 我们将把它放入一个数组中,以便更容易循环。 $smartlist_meta['smartlist_check'] = $_POST['smartlist_check']?$_POST['smartlist_check'] :''; // 将$smartlist_meta的值作为自定义字段添加 foreach ($smartlist_meta as $key => $value) { // 遍历$smartlist_meta数组! if( $post->post_type == 'revision' ) return; // 不要存储自定义数据两次 $value = implode(',', (array)$value); // 如果$value是一个数组,则将其转换为CSV(不太可能) if(get_post_meta($post->ID, $key, FALSE)) { // 如果自定义字段已经有一个值 update_post_meta($post->ID, $key, $value); } else { // 如果自定义字段没有一个值 add_post_meta($post->ID, $key, $value); } if(!$value) delete_post_meta($post->ID, $key); // 如果为空,则删除 } } add_action('save_post', 'wpt_save_smartlist_meta', 1, 2); // 保存自定义字段 // 单个帖子的智能列表 add_action('wp_footer','yaoweibin_single_smartlist'); function yaoweibin_single_smartlist() { if(is_single()) { global $wp_query; $postid = $wp_query->post->ID; $post_data = get_post_meta($postid); $smartlist_check = !empty($post_data['smartlist_check'][0]) ? $post_data['smartlist_check'][0] : ''; if(!empty($smartlist_check)){ ?> <?php } } }

接下来,在style.css文件中添加以下内容

.num-count{
        background:#ff4e00;
        color:#fff;
        padding: 0px 16px;
        margin-right: 15px;
}

添加后,转到您想要转换为智能列表的帖子,并在“Smartlist”旁边打勾。

保存帖子以查看结果。

您可以使用CSS进行设计,以适应您的品牌形象。我知道这只是一个小细节,但它确实可以使帖子看起来比默认的更好。

类似文章