如何在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进行设计，以适应您的品牌形象。我知道这只是一个小细节，但它确实可以使帖子看起来比默认的更好。