1. 下载程序Drupal 6.19及中文包
2. 新建一个数据库
3. 解压缩后进行安装，这里要注意的是sites\default\default.settings.php这个文件是要复制一份并改名为settings.php。
1. 下载ZEN主题
2. 解压后放到sites\all\themes\目录下，如果没有themes目录则建立一个
1. 拷贝STARTERKIT目录到sites\all\themes\目录下并改名，如fy907
2. 把STARTERKIT.info.txt改名为fy907.info
3. 替换template.php和theme-settings.php文件中的STARTERKIT为fy907
4. 登陆后台，在admin/build/themes下找到新建的主题并启用。
如果你在使用江阴印刷网风格,而且升级到了WordPress3.0,那么你可以看看主题在3.0下首页的分类名不显示的解决办法，而这篇是使主题支持自定义菜单并支持二级分类。
编辑functions.php文件，在 include (TEMPLATEPATH . ‘/settings.php’); 下添加
1 2 3 4 5 6 7 8 9 | register_nav_menus( array( 'primary' => __( 'Primary Navigation', 'cnt1' ), ) ); function twentyten_page_menu_args( $args ) { $args['show_home'] = true; return $args; } add_filter( 'wp_page_menu_args', 'cnt1_page_menu_args' ); |
编辑header.php文件，查找下例代码
阅读全文 »
首先在header.php的head标签中加载jQuery库
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> |
新建一个JS文件，在header.php的head标签中加载，JS文件中加入下例代码：
1 2 3 4 5 6 7 8 9 | $(document).ready(function(){ $(".entry-foot span:first").addClass("current"); // 为第一个span添加 .current 的样式，默认选中 $(".entry-foot ul:not(:first)").hide(); //ul 不是第一个时隐藏 $(".entry-foot span").mouseover(function(){ // 鼠标移到 span 上时触发函数 $(".entry-foot span").removeClass("current"); //为第一个 span 移除 .current 样式 $(this).addClass("current"); //为触发的 span 添加样式 $(".entry-foot ul").hide(); // 隐藏 ul $("."+$(this).attr("id")).fadeIn("slow"); // 这句是核心，class(.) 和触发 span 的ID 一致的 fadeIn(渐显) });}); |
HTML代码如下：
1 2 3 4 5 6 7 8 9 | <div class="tab"> <p> <span ID="tab1">tab1</span> <span ID="tab2">tab2</span> <span ID="tab3">tab3</span></p> <ul class="tab1">以 LI 形式呈现的 tab1 的内容</ul> <ul class="tab2">以 LI 形式呈现的 tab2 的内容</ul> <ul class="tab3">以 LI 形式呈现的 tab3 的内容</ul> </div> |
添加CSS代码如下：
1 2 3 4 5 6 7 | .entry-foot{background-color:#FAFAFA;margin:5px 8px;padding:5px 10px;} .entry-foot p span{background-color:#EFEFEF;border:1px solid #CCCCCC;cursor:pointer;margin-right:6px;padding:2px 5px;} .entry-foot p span.current{background-color:#FAFAFA; border-bottom-color:#fafafa;} .entry-foot p{border-bottom:1px solid #CCCCCC;font-weight:bold;padding:0 10px 2px;} .entry-foot li{border-bottom:1px dotted #CCCCCC;padding-bottom:3px;margin:5px 0;} .entry-foot .mhot,.entry-foot.allhot{display:none;} |
首先在header.php的head标签中加载jQuery库
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> |
新建一个JS文件，在header.php的head标签中加载，JS文件中加入下例代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 | function slideSwitch() { var $current = $("#slideshow div.current"); if ( $current.length == 0 ) $current = $("#slideshow div:last"); var $next = $current.next().length ? $current.next() : $("#slideshow div:first"); $current.addClass('prev'); $next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 1000, function() { $current.removeClass("current prev"); }); } $(function() { $("#slideshow span").css("opacity","0.7"); $(".current").css("opacity","1.0"); setInterval( "slideSwitch()", 3000 ); }); |
HTML代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div ID="slideshow"> <div class="current"> <a href="http://www.koryi.net/"><img src="1.jpg" alt="" /></a> <span>The First Image</span> </div> <div> <a href="http://www.koryi.net/"><img src="2.jpg" alt="" /></a> <span>The Second Image</span> </div> <div> <a href="http://www.koryi.net/"><img src="3.jpg" alt="" /></a> <span>Yes, thd third.</span> </div> </div> |
添加CSS代码如下：
1 2 3 4 5 6 | #slideshow{position:relative;height:195px;width:425px;border:10px solid #ddd;margin:0 auto 15px;} #slideshow div{position:absolute;top:0;left:0;z-index:3;opacity:0.0;height:195px;overflow:hidden;background-color:#FFF;} #slideshow div.current{z-index:5;} #slideshow div.prev{z-index:4;} #slideshow div img{display:block;border:0;margin-bottom:10px;} #slideshow div span{display:none;position:absolute;bottom:0;left:0;height:50px;line-height:50px;background:#000;color:#fff;width:100%;} |
