效果如上图,还附带特效,当时在一个网站看到这个,觉得还不错,或许以后会用到,所以就给扒下来了。
Demo下载:[ GO ] 密码: my9f
如果想在wordpress中添加这个功能,该怎么弄呢?很简单,只需要添加几段代码即可。
主题 functions.php 中添加如下代码:
//添加文章ID
add_action('admin_menu', 'create_meta_box');
add_action('save_post', 'save_postdata');
$new_meta_box = array(
"id" => array(
"name"=>"id",
"std"=>"",
"title"=>"文章指定显示板块ID"
)
);
function create_meta_box(){
if(function_exists('add_meta_box')){
add_meta_box('new-meta-box','展示栏目设置','new_meta_box','post','normal','high');
}
}
function new_meta_box(){
global $post,$new_meta_box;
foreach($new_meta_box as $meta_box){
$meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);
if($meta_box_value == "")
$meta_box_value = $meta_box['std'];
echo '<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$mata_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'"/>';
echo '<div style="height: 20px;"><h4 style="width: 125px;">'.$meta_box['title'].'</h4>'.'<textarea cols="10" style="top: -40px;position: relative;left: 130px;" rows="1" name="'.$meta_box['name'].'_value">'.$meta_box_value.'</textarea><span style="top: -46px;position: relative;left: 140px;">默认5个栏目,根据顺序设置1-5,可以同时设置多个栏目显示,格式如:1 5 加个空格即可.</span></div>';
}
}
function save_postdata($post_id){
global $post,$new_meta_box;
foreach($new_meta_box as $meta_box){
if(!wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) )){
return $post_id;
}
if('page' == $_POST['post_type']){
if(!current_user_can( 'edit_page', $post_id ))
return $post_id;
}else{
if(!current_user_can( 'edit_post', $post_id ))
return $post_id;
}
$data = $_POST[$meta_box['name'].'_value'];
if(get_post_meta($post_id, $meta_box['name'].'_value') == "")
add_post_meta($post_id, $meta_box['name'].'_value', $data, true);
elseif($data != get_post_meta($post_id, $meta_box['name'].'_value', true))
update_post_meta($post_id, $meta_box['name'].'_value', $data);
elseif($data == "")
delete_post_meta($post_id, $meta_box['name'].'_value', get_post_meta($post_id, $meta_box['name'].'_value', true));
}
}
/*
前台调用方式:
$desc="id_value";
$alid=get_post_meta($post->ID,$desc,true);
echo $alid;
具体参考下方我给的案列代码
*/
然后将 Dome 压缩包中的代码套入到你的主题中,具体套入需要根据你的主题代码修改,附上我给一个客户做的主题中的代码:
<div id="portfolio" class="section anchor" style="padding-top: 53px; margin-top: -53px;">
<div class="dark-wrapper">
<div class="container inner">
<h2 class="section-title text-center"><?php echo dopt('d_dh_name'); ?></h2>
<p class="lead main text-center"><?php echo dopt('d_dh_jj'); ?></p>
<div class="grid-portfolio fix-portfolio">
<ul class="filter">
<li><a class="active" href="#" data-filter="*">全部</a></li>
<li><a href="#" data-filter=".1"><?php echo dopt('d_dh_name1'); ?></a></li> <!-- 这里我改成了后台可控。 -->
<li><a href="#" data-filter=".2"><?php echo dopt('d_dh_name2'); ?></a></li>
<li><a href="#" data-filter=".3"><?php echo dopt('d_dh_name3'); ?></a></li>
<li><a href="#" data-filter=".4"><?php echo dopt('d_dh_name4'); ?></a></li>
<li><a href="#" data-filter=".5"><?php echo dopt('d_dh_name5'); ?></a></li>
</ul>
<!-- /filter -->
<ul class="content-slider items isotope" style="position: relative; overflow: hidden; height: 918px;">
<?php $limit = get_option('posts_per_page');
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('post_type=post&post_status=publish&showposts=' . $limit=9 . '&paged=' . $paged);
if (have_posts()) : while (have_posts()) : the_post();
$desc="id_value";
$alid=get_post_meta($post->ID,$desc,true);
// 前台调用ID
?>
<li class="item thumb <?php echo $alid; ?> isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px);">
<figure><a href="<?php%20the_permalink();%20?>" data-contenturl="<?php%20the_permalink();%20?>" data-callback="callPortfolioScripts();" data-contentcontainer=".pcw">
<div class="text-overlay">
<div class="info"><?php the_title(); ?></div>
</div>
<img src="<?php%20bloginfo('template_url');?>/timthumb.php?src=<?php%20echo%20post_thumbnail_src();%20?>&h=160&w=200&zc=1" alt=""> </a></figure>
</li>
<?php endwhile;endif; ?>
</ul>
添加后台对前台的可控功能,如:
<li class="item thumb <?php echo $alid; ?> isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px);">
其他地方我就不多解释了,主要是看 li 标签中的 class ,不同栏目展示不同内容,是根据这个class中的数字决定的,因此我将这里改成了可控,在编辑文章的时候,填写了ID,那么他会在这里自动输出当时填写的ID,实现几个栏目内容切换的效果,为了方便,我也把导航设置成了后台可控。