在Genesis主题中创建一个基于列表的外观更好的帖子
你是否创建了大量基于列表的博客文章并使用Genesis Framework?如果是, 那么你可能会喜欢这样。
例子:
- 创意代理商的10个WordPress主题
- 前5个SEO优化的Joomla模板
- 改善网站搜索引擎排名的5种方法
有时候, 我通过tagDiv购买了Newspaper主题, 我喜欢他们的智能列表功能。但我是如此爱Genesis, 以至于我没有放弃。过了一会儿, 我想为什么不在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;
}
添加后, 转到要转换为智能列表的帖子, 然后选中” 智能列表” 旁边的复选框。
文章图片
保存帖子以查看结果。
你可以使用CSS进行设计以适合你的品牌。我知道它没什么大不了的, 但是它的确使该帖子看起来比默认帖子更好。
推荐阅读
- 十大WordPress备份和迁移插件
- 如何使用EasyEngine在Docker中设置WordPress()
- 如何使用WordPress编辑器解决文件更新问题()
- 使用适用于WordPress的AdBlock检测解决方案来恢复你的收入
- 用于内容优化的10个WordPress技巧
- 用繁荣的主题为你的WordPress网站增压
- 如何在Android中启用String修饰方法
- Visual Studio中的Android文档
- Google Apps脚本(引用 ActiveXObject)