怎么把HotNewspro主题图文幻灯放到自己网站

作者: 鲁智深 分类: wordpress 发布时间: 2013-04-04 19:01

关于wordpress技术研究方面,本人基本是利用百度找一些现成的代码,但最近看上的一个幻灯片让我非常难受,网上说的方法已经过时,问老师,老师说别人网站上的不能用,对于我这个比较固执的人,别人能用我怎么不能用,自己摸索了1天终于攻克了,下面分享一下:

怎么把HotNewspro主题图文幻灯放到自己的网站上。(ps:我非常喜欢)

图文幻灯

图文幻灯操作方法

要用到的文件有:

sti_slider.php
slider.php
cat_slider.php
jquery.cycle.all.min.js
首先把:jquery.cycle.all.min.js文件放到js文件夹中,在把slider.php,sti_slider.php,cat_slider.php放到主题目录下的includes文件夹中。
用Dw打开index.php,在要实现幻灯片的地方插入以下代码
    <?php include (TEMPLATEPATH . '/includes/slider.php'); ?>
    <?php wp_reset_query();?>
    <div></div>
    <?php
    $sticky = get_option( 'sticky_posts' );
    $args = array(
        'ignore_sticky_posts' => 1,
        'post__not_in' => $sticky,
        'paged' => $paged
    );
    query_posts( $args );
    ?>

在functions.php中插入如下代码

    //支持外链缩略图
    if ( function_exists('add_theme_support') )
    add_theme_support('post-thumbnails');
    function catch_first_image() {
      global $post, $posts;
      $first_img = '';
      ob_start();
      ob_end_clean();
      $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
      $first_img = $matches [1] [0];
      if(empty($first_img)){ //Defines a default image
                    $random = mt_rand(1, 2);
                    echo get_bloginfo ( 'stylesheet_directory' );
                    echo '/images/random/'.$random.'.jpg';//注意这段的路径
      }
      return $first_img;
    }

注意:你的网站有以上缩略图这段代码就不必添加,反之代码冲突。

//菜单
register_nav_menus();
//截字
function dm_strimwidth($str ,$start , $width ,$trimmarker ){$output = preg_replace('/^(?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$start.'}((?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$width.'}).*/s','\1',$str); return $output.$trimmarker;};
//title cut
function cut_str($src_str,$cut_length){$return_str='';$i=0;$n=0;$str_length=strlen($src_str);
    while (($n<$cut_length) && ($i<=$str_length))
    {$tmp_str=substr($src_str,$i,1);$ascnum=ord($tmp_str);
                if ($ascnum>=224){$return_str=$return_str.substr($src_str,$i,3); $i=$i+3; $n=$n+2;}
        elseif ($ascnum>=192){$return_str=$return_str.substr($src_str,$i,2);$i=$i+2;$n=$n+2;}
        elseif ($ascnum>=65 && $ascnum<=90){$return_str=$return_str.substr($src_str,$i,1);$i=$i+1;$n=$n+2;}
        else {$return_str=$return_str.substr($src_str,$i,1);$i=$i+1;$n=$n+1;}
    }
    if ($i<$str_length){$return_str = $return_str . '...';}
    if (get_post_status() == 'private'){ $return_str = $return_str . '(private)';}
    return $return_str;};

最后在header.php中加入如下js代码

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.cycle.all.min.js"></script>

css样式

/*--幻灯 --*/
#slideshow {position:relative; background:#fff; width:595px; height:248px; padding:10px; border:1px solid #dbdbdb;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 4px;margin-bottom:12px;z-index:0;}
.slideshow {width:680px;height:248px;overflow:hidden;}
.featured_post{line-height:24px; width:600px;height:248px;overflow:hidden;}
.slider_image,.slider_image img {float: left;width:290px;height:248px;}
.slider_post {float:right;width:290px;padding-right:10px;}
.slider_post p{font-size:13px;text-indent:2em;margin-top:5px;}
#slider_nav  {position:absolute;display:block;width:200px;height:34px;margin:210px 0 0 220px;z-index:999;}
#slider_nav a {background:url(images/bg.png) 0 -405px;display:block;float:left;font-size:12px;font-weight:bold;padding:0 8px;color:#ebebeb;z-index:999;}
div#slider_nav a.activeSlide { color:#f99356;}
#featured_tag {background:url(images/bg.png) 0 -245px;width:21px;height:79px;left:0px;position:absolute;top:20px;z-index:999;}
#tag_c {background:url(images/bg.png) 0 -325px;width:21px;height:79px;right:0px;position:absolute;top:170px;z-index:999;}
.news {background:url(images/bg.png) 0 -148px;position:absolute;width:51px;height:51px;right:-3px;top:-3px;z-index:999;}

#slider_nav {
    display: block;
    height: 34px;
    margin: 215px 0 0 150px;
    position: absolute;
    width: 200px;
    z-index: 999;
}
#slider_nav a {
    background: url(images/bg.png) repeat scroll 0 -405px transparent;
    color: #EBEBEB;
    display: block;
    float: left;
    font-size: 12px;
    font-weight: bold;
    padding: 0 8px;
    z-index: 999;
}
div#slider_nav a.activeSlide {
    color: #F99356;
}

图文幻灯演示地址:常熟土特产

相关文章

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注