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

在Genesis主题中创建一个基于列表的外观更好的帖子
你是否创建了大量基于列表的博客文章并使用Genesis Framework?如果是, 那么你可能会喜欢这样。
例子:

  • 创意代理商的10个WordPress主题
  • 前5个SEO优化的Joomla模板
  • 改善网站搜索引擎排名的5种方法
这些类型的帖子有一个共同点-数字。
有时候, 我通过tagDiv购买了Newspaper主题, 我喜欢他们的智能列表功能。但我是如此爱Genesis, 以至于我没有放弃。过了一会儿, 我想为什么不在Genesis中实现该功能?
一个典型的列表帖子如下所示。
如何在WordPress Genesis主题中创建智能列表()

文章图片
【如何在WordPress Genesis主题中创建智能列表()】智能列表将所有标题转换为漂亮的数字, 如下所示。
如何在WordPress Genesis主题中创建智能列表()

文章图片
看起来好点吗?喜欢它?你可以在我以前的一篇文章中看到实时演示。
如果这是你要找的东西, 那么这里是代码。我已经在Authority Pro主题中对此进行了测试, 但是没有理由不使用其他主题。
在临时站点进行修改或测试之前, 请备份文件。
首先, 将以下内容添加到functions.php文件中。这会将所有h2标签转换为智能列表。
// Smartlist metabox for postadd_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 originatedecho '< 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="http://www.srcmini.com/on" /> < label for="smartlist_check"> < ?php _e('Smartlist', 'authority-pro')?> < /label> < /p> < ?php}// Save the Metabox Datafunction 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 timesif ( !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 = http://www.srcmini.com/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 valueupdate_post_meta($post-> ID, $key, $value); } else { // If the custom field doesn't have a valueadd_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-Listadd_action('wp_footer', 'geekflare_single_smartlist'); function geekflare_single_smartlist(){if(is_single()){global $wp_query; $postid = $wp_query-> post-> ID; $post_data = http://www.srcmini.com/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; }

添加后, 转到要转换为智能列表的帖子, 然后选中” 智能列表” 旁边的复选框。
如何在WordPress Genesis主题中创建智能列表()

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

    推荐阅读