请在Chrome、Firefox等现代浏览器浏览本站。记住我们的域名:tmy123.com   加入本站QQ群,大家一起HIGH:点击加入QQ群

修改YUSI主题默认幻灯片,仿百度新闻

WP教程 Jophen 俞 2821℃ 已收录 11评论

要修改欲思主题首页幻灯片,得先找好替代的幻灯片效果,我这里使用的幻灯片效果是百度新闻首页的幻灯片效果,兼容IE6,修改欲思主题的代码量很少,只要修改modules/sticky.php即可。,原文来自:醉光阴(原文代码有误,本文做了修改)

效果如下:

news 1

WP教程 2

1、完成这个效果,首先将YUSI主题目录下modules/sticky.php的内容全部改成
<?php if (!Yusi_is_mobile() ): ?> 
<div id="wowslider-container1"> 
<div class="yx-rotaion" > 
<ul class="rotaion_list"> 
<?php 
$i=0; 
$d_sticky_count=dopt('d_sticky_count')?dopt('d_sticky_count'):4; 
$sticky = get_option('sticky_posts'); rsort( $sticky ); 
query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1, 'showposts' => 20 ) ); 
while (have_posts()) : the_post(); 
$str_src=get_post_thumbnail_url('full'); 
if (!empty($str_src)&&!strstr($str_src,'/img/pic/')) { 
 
echo '<li><a target="_blank" href="'.get_permalink().'" title="'.get_the_title().'"><img src="'.get_bloginfo("template_url").'/timthumb.php?src='.$str_src.'&h=360&w=856&q=90&zc=1&ct=1" title="'.get_the_title().'" alt="'.get_the_title().'" /></a></li>'; 
$i++; 
if ($i>=$d_sticky_count) break; 
} 
endwhile; 
wp_reset_query(); 
?> 
</ul> 
</div> 
</div> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.yx_rotaion.js"></script> <script type="text/javascript"> $(".yx-rotaion").yx_rotaion({auto:true}); </script> 
<?php endif ;?>
2、在主题样式表:style.css中加入样式(建议将代码放到文件底部)
 /*yx_rotaion*/
.yx-rotaion{margin:0 auto;width:780px;height:320px}
.yx-rotaion-btn,.yx-rotaion-title,.yx-rotation-focus,.yx-rotation-t,.yx-rotaion-btn{position:absolute}
.yx-rotation-title{position:absolute;width:100%;height:40px;line-height:40px;background:#000;filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;opacity:0.4;left:0;bottom:0;_bottom:-1px;z-index:1}
.yx-rotation-t{color:#fff;font-size:16px;font-family:microsoft yahei;z-index:2;bottom:0;left:10px;line-height:40px}
.yx-rotation-focus span,.yx-rotaion-btn span{background:url(img/ico.png) no-repeat;display:block;}
.yx-rotation-focus{height:40px;line-height:40px;right:20px;bottom:0;z-index:2}
.yx-rotation-focus span{width:12px;height:12px;line-height:12px;float:left;margin-left:5px;position:relative;top:14px;cursor:pointer;background-position:-24px -126px;text-indent:-9999px}
.yx-rotaion-btn{width:100%;height:41px;top:50%;margin-top:-20px;}
.yx-rotaion-btn span{width:41px;height:41px;cursor:pointer;filter:alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity:0.3;opacity:0.3;position:relative}
.yx-rotaion-btn .left_btn{background-position:-2px -2px;float:left;left:10px}
.yx-rotaion-btn .right_btn{background-position:-2px -49px;float:right;right:10px}
.yx-rotaion-btn span.hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.yx-rotation-focus span.hover{background-position:-10px -126px}
.rotaion_list{width:0;height:0;overflow:hidden;}

3、

在主题的functions.php中加入以下代码(用于获取图片和自动裁剪大小)

function get_post_thumbnail_url($thumbnail = 'thumbnail', $post_id = ''){
global $post;
$post_id = (null === $post_id) ? get_the_ID() : $post_id;
$thumbnail_id = get_post_thumbnail_id($post -> ID);
$thumb_src = '';
if($thumbnail_id){
$thumb = wp_get_attachment_image_src($thumbnail_id, $thumbnail);
$thumb_src = $thumb[0];
if ($thumbnail != 'full' && empty($thumb_src)){
$thumb = wp_get_attachment_image_src($thumbnail_id, 'full');
$thumb_src = $thumb[0];
}
}
if (empty($thumb_src)){
$thumb_src = preg_match_all('/<img.*?src=[\'"](.*?)[\'"]/is', $post -> post_content, $matches) ? $matches[1][0]:'';
}
if (!empty($thumb_src)){
return $thumb_src;
}else{
$random = mt_rand(1, 10);
return get_bloginfo('template_url') . '/img/pic/' . $random . '.jpg';
}
}

4、最后一步。将所需素材文件拷贝到YUSI主题相应目录(下载相应的素材文件,放到相应目录下)

JS及图片素材文件下载
VOER,清空缓存,看看首页的新幻灯片吧 😉

本站文章如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权,转载请注明转自:https://tmy123.com/YUSI-slide.html
喜欢 (11)
发表我的评论
取消评论
表情 代码 加粗 链接 私信 删除线 签到

Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(11)条精彩评论。
  1. 这个幻灯片效果给力,有空我也要研究研究才行
    boke123网址大全2015年-01月-26日发表回复| Firefox 34.0| Windows XP
  2. 你的网站用的就是这个模板吧,跟windows风格
    中国历史2015年-01月-26日发表回复| Firefox 33.0| Windows 7 x64
    • 是啊,首页幻灯片就是百度新闻首页的那个图片轮换效果
      Jophen 俞2015年-01月-26日发表回复| Google Chrome 38.0.2125.122| Windows 7
  3. 改得却来越好了,666666,能帮我主题弄个幻灯吗 :mrgreen:
    钊哥博客2015年-01月-25日发表回复| Google Chrome 31.0.1650.63| Windows 8 x64
    • 你这个大图风格加了幻灯片反而显得不协调了,而且现在你博客改的操作性不佳,那个小人老是挡在内容前面
      Jophen 俞2015年-01月-25日发表回复| Google Chrome 38.0.2125.122| Windows 7
  4. 博主的主题挺好看的
    IT疯狂女2015年-01月-25日发表回复| Google Chrome 36.0.1985.125| Windows 7
  5. IE678已成为历史了。
    王语双2015年-01月-25日发表回复| Google Chrome 33.0.1750.117| Windows XP
  6. 不错,Nb
    harries2015年-01月-24日发表回复| Google Chrome 40.0.2214.91| Windows 8 x64
  7. 改成这样就不会再非得716*297了吧 :mrgreen:
    厘米天空2015年-01月-24日发表回复| Google Chrome 38.0.2125.122| Windows 7 x64
    • 不用了,自动截取的
      Jophen 俞2015年-01月-24日发表回复| Google Chrome 38.0.2125.122| Windows 7