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

在Genesis主题中创建一个基于列表的外观更好的帖子

你是否创建了大量基于列表的博客文章并使用Genesis Framework？如果是, 那么你可能会喜欢这样。

例子：

• 创意代理商的10个WordPress主题
• 前5个SEO优化的Joomla模板
• 改善网站搜索引擎排名的5种方法

这些类型的帖子有一个共同点-数字。

有时候, 我通过tagDiv购买了Newspaper主题, 我喜欢他们的智能列表功能。但我是如此爱Genesis, 以至于我没有放弃。过了一会儿, 我想为什么不在Genesis中实现该功能？

一个典型的列表帖子如下所示。

智能列表将所有标题转换为漂亮的数字, 如下所示。

看起来好点吗？喜欢它？你可以在我以前的一篇文章中看到实时演示。

如果这是你要找的东西, 那么这里是代码。我已经在Authority Pro主题中对此进行了测试, 但是没有理由不使用其他主题。

在临时站点进行修改或测试之前, 请备份文件。

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

// Smartlist metabox for post
add_action( 'add_meta_boxes', 'cd_meta_box_add' );
function cd_meta_box_add(){
add_meta_box( 'smartlist_meta_field', 'Smartlist Metabox', 'smartlist_meta_field', 'post', 'side', 'high' );
}

function smartlist_meta_field(){
global $post;
// Noncename needed to verify where the data originated
echo '<input type="hidden" name="smartlistmeta_noncename" id="eventmeta_noncename" value="' .
wp_create_nonce( plugin_basename(__FILE__) ) . '" />';

// Get the location data if its already been entered
$check = get_post_meta($post->ID, 'smartlist_check', true);

// Echo out the field
?> <p>
<input type="checkbox" id="smartlist_check" name="smartlist_check" <?php checked( $check, 'on' ); ?> value="on" />
<label for="smartlist_check"><?php _e('Smartlist', 'authority-pro')?></label>
</p><?php
}

// Save the Metabox Data
function wpt_save_smartlist_meta($post_id, $post) {
// verify this came from the our screen and with proper authorization, // because save_post can be triggered at other times
if ( !wp_verify_nonce( $_POST['smartlistmeta_noncename'], plugin_basename(__FILE__) )) {
return $post->ID;
}

// Is the user allowed to edit the post or page?
if ( !current_user_can( 'edit_post', $post->ID ))
return $post->ID;

// OK, we're authenticated: we need to find and save the data
// We'll put it into an array to make it easier to loop though. 
$smartlist_meta['smartlist_check'] = $_POST['smartlist_check']?$_POST['smartlist_check'] :'';

// Add values of $smartlist_meta as custom fields 
foreach ($smartlist_meta as $key => $value) { // Cycle through the $smartlist_meta array!
if( $post->post_type == 'revision' ) return; // Don't store custom data twice
$value = implode(', ', (array)$value); // If $value is an array, make it a CSV (unlikely)
if(get_post_meta($post->ID, $key, FALSE)) { // If the custom field already has a value
update_post_meta($post->ID, $key, $value);
} else { // If the custom field doesn't have a value
add_post_meta($post->ID, $key, $value);
}
if(!$value) delete_post_meta($post->ID, $key); // Delete if blank
}

}
add_action('save_post', 'wpt_save_smartlist_meta', 1, 2); // save the custom fields

// Single Post Smart-List
add_action('wp_footer', 'geekflare_single_smartlist');
function geekflare_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)){ ?>
<script>
var count = 1;
if(jQuery('.entry-content h2').length > 0)
{
jQuery('.entry-content h2').each(function(){
jQuery(this).prepend( '<span class="num-count">'+count+'</span>' );
count++;
});
}
</script>
<?php
}
}
}

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

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

添加后, 转到要转换为智能列表的帖子, 然后选中”智能列表”旁边的复选框。

保存帖子以查看结果。

你可以使用CSS进行设计以适合你的品牌。我知道它没什么大不了的, 但是它的确使该帖子看起来比默认帖子更好。