将CMS首页焦点幻灯移植到BLOG布局中

王朝学院·作者佚名  2016-04-29
窄屏简体版  字體: 小  |  中  |  大  |  超大  

经常有童鞋问如何将CMS首页焦点幻灯也显示在BLOG布局中,留言中无法说明白,现在就教大家将CMS首页焦点幻灯移植到BLOG布局中,不要看见长长的代码就头晕,只要按着下面的步骤操作就可以了。

具体效果如图:

提示:编辑修改模版文件,请使用notepad++或EmEditor文本编辑软件,通过FTP软件上传覆盖原文件,或者在WordPRess后台外观→编辑中修改模版文件,切记不能用操作系统自带的记事本修改中文模板,否则会改变模版编码,造成主题错位或乱码(中文模版编码为:UTF-8 无BOM)。首先打开blog.php,把CMS首页焦点幻灯调用代码:

<?php include (TEMPLATEPATH . '/includes/slider.php'); ?>

<?php wp_reset_query();?>

<div class="clear12"></div>

加第12行

<!-- end: navigation -->

下面。再把幻灯JS代码:

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

加到header.php模版:

<script type="text/Javascript" src="<?php bloginfo('template_directory'); ?>/js/muscript.js"></script>

后面。将幻灯样式加到HotNewspro\CSS目录中的css.css最后:

/** slideshow **/

#slideshow {

position:relative;

background:#fff;

width:710px;

height:248px;

padding:10px;

border:1px solid #ccc;

}

.slideshow {

width:710px;

height:248px;

overflow:hidden;

}

.featured_post{

width:708px;

height:248px;

overflow:hidden;

}

.slider_image,.slider_image img {

float: left;

width:400px;

height:248px;

}

.slider_post {

float:right;

width:280px;

padding-right:10px;

}

.slider_post p{

font-size:13px;

text-indent:2em;

margin-top:5px;

line-height:24px;

}

#slider_nav {

position:absolute;

z-index:999;

margin:210px 0 0 270px;

}

#slider_nav a {

background:url(../images/slider_nav.png);

float:left;

line-height:24px;

padding:0 8px 0 8px;

color:#ebebeb;

text-shadow: none;

}

#slider_nav a.activeSlide { color:#f99356;}

#featured_tag {

background:url(../images/featured.png);

position:absolute;

width:21px;

height:79px;

left:0px;

top:20px;

z-index:999;

}

.news {

position:absolute;

width:51px;

height:51px;

rightright:-3px;

top:-3px;

z-index:10;

}

.cat_name {

position:absolute;

line-height:20px;

rightright:100px;

top:-1px;

text-align:center;

padding:0 20px 0 20px;

border:1px solid #ccc;

}

#map_h {

width:980px;

}

.time_h {

float: left;

margin: 0 0 0 10px;

}

.tag_t {

float:right;

width:750px;

height:23px;

overflow:hidden;

}

.tag_t a {

padding:0 0 0 10px;

font-weight:bold;

text-shadow: 0px 1px 0px #fff;

}

最后刷新页面,看看是不是幻灯也正常显示在BLOG布局中了。

同理,还可将幻灯加到blog_page.php独立博客模版中。

原文地址:知更鸟

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航