资源描述
企业主题模板制作教程
课程目标：制作出一个企业的主题
课后作业，跟着视频，完成一个相同主题的制作。
第一课、企业网站模板分析
1、首页产品图片和滚动图片
2、产品页面
3、文章列表页面
4、single和page页面
第二课、静态页面转化成WP模板和头部制作
1、 静态转模板
1-1、制作style.css
移动images文件夹下面的css到主题文件夹下面，重命名为style.css
添加主题版权信息：
/*
Theme Name: 莎莎公主
Theme URI:
Description:这是我们做的第一个企业主题哦
Author: 莎莎公主
Author URI:
Version: 1.0
Tags: white, company, blue
*/
1-2、制作index.php
1-2-1、修改css文件路径
Style.css路径调用：<?php bloginfo( 'stylesheet_url' ); ?>
1-2-2、修改所有相对路径为WP绝对路径
获取主题存放路径：<?php bloginfo('template_directory'); ?>
1-2-3、删除多余的CSS代码
1-2-4、修改style.css里面图片路径
2、顶部模板制作
分离头部，改用WP调用，调用顶部标签：<?php get_header();?>
2-1、元信息调用
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
<title><?php if (is_home()||is_search()) { bloginfo('name'); } else { wp_title(''); print " - "; bloginfo('name'); } ?> </title>
<?php wp_head(); ?>
2-2、二级目录导航制作
<script type="text/javascript">
var topMenuNum = 0;
$("#nav_sgBhgn li").hover(
function(){
topMenuNum++;
$(this).attr("id","kindMenuHover"+topMenuNum);
$("#kindMenuHover" + topMenuNum + " > ul").show();
$(this).parent().addClass("hover");
},
function(){
$("#"+$(this).attr("id")+" > ul").hide();
$(this).attr("id","");
$(this).parent().removeClass("hover");
}
);
</script>
分类目录调用标签：
<?php wp_list_categories('title_li=0&orderby=name&show_count=0&depth=1'); ?>
页面调用：
<?php wp_list_pages('sort_column=menu_order&title_li=&depth=2&include='); ?>
自定义首页：<a href=” <?php echo get_option('home'); ?>”>首页</a>
顶部空白如何处理
functions.php里面添加下面代码。
add_filter( 'show_admin_bar', '__return_false' );
2-3、幻灯片替换
参考《div+css入门实战2012版》最后一课，幻灯片专题。
第三课、侧边栏和底部制作
1、分离侧边栏
通过WP标签调用回来，调用侧边栏标签：<?php get_sidebar();?>
2、调用某个分类下的文章
<?php $rand_posts = get_posts('numberposts=5&category=1&orderby=date');foreach($rand_posts as $post) : ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach;?>
更多按钮链接：<?php echo get_option('home'); ?>/
3、产品树形结构调用
<div class="sidebar">
<ul>
<li >
<ul >
<?php wp_list_categories('title_li=0&orderby=name&show_count=0&depth=3'); ?>
</ul>
</li>
</ul>
</div>
Css样式：
.sidebar{ float:left; width:250px; overflow:hidden;}
.sidebar h3{ float:left; padding:8px 5px 6px 10px; width:230px; font-size:14px; color:#0B3779; }
.sidebar ul{ float:left; width:250px;}
.sidebar ul li{ float:left; margin-bottom:20px;}
.sidebar ul li.widget_text{ padding:0px 0px; }
.sidebar ul li.widget div{ padding:15px 10px 0px; line-height:20px; clear:both;}
.sidebar ul li ul{ float:left; margin-top:15px;}
.sidebar ul li ul li{ width:230px; margin:6px 4px 5px; padding-left:10px; background:url(images/news_arrow.gif) no-repeat 0px 6px; overflow:hidden;}
.sidebar ul li ul li ul{ border:none;}
.sidebar ul li ul.sub li{ padding-left:0px; background:none;}
.sidebar ul li ul.sub li a:link, .sidebar ul li ul.sub li a:visited{ padding:2px 5px 10px 22px; width:210px; color:#333; font-weight:bold; text-decoration:none; border-bottom:1px solid #E6E6E6; display:block;}
.sidebar ul li ul.sub li a:hover{ color:#0B3779; border-bottom:1px solid #CCC;}
.sidebar ul li ul.sub .current_page_item{ border-bottom:1px solid #CCC;}
.sidebar ul li ul.sub .current_page_item a:link, .sidebar ul li ul.sub .current_page_item a:visited, .sidebar ul li ul.sub .current_page_item a:hover{ color:#0B3779; font-weight:bold; background:none;}
4、友情链接只在首页显示
<?php if ( is_home()) { ?>
<?php wp_list_bookmarks('title_li=&categorize=0&orderby=rand&limit=24'); ?>
<?php } ?>
5、底部制作
通过WP标签调用回来，调用底部标签：<?php get_footer();?>
获取主页路径：<?php echo get_option('home'); ?>
版权信息：
Copyright © 2012<a href=” <?php echo get_option('home'); ?>”> <?php bloginfo(’name’); ?></a>
第四课、企业首页制作
1、产品图片调用
循环调用：
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
标题调用：<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 16, ''); ?></a>
操作步骤：
1-1、在主题文件夹中建thumbnail.php文件，添加如下代码：
<?php if ( get_post_meta($post->ID, 'thumbnail', true) ) : ?>
<?php $image = get_post_meta($post->ID, 'thumbnail', true); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>"/></a>
<?php else: ?>
<!-- 截图 -->
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<?php if (has_post_thumbnail()) { the_post_thumbnail('thumbnail'); }
else { ?>
<img class="home-thumb" src="<?php echo catch_first_image() ?>" width="140px" height="100px" alt="<?php the_title(); ?>"/>
<?php } ?>
</a>
<?php endif; ?>
1-2、 在主题文件夹里面的functions.php文件中添加下面代码：
<?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;
}
?>
1-3、在images文件夹下建立random文件夹，放入图片，图片必须已1.jgp，2.jpg这种格式。以数字1~10作为名字。
1-4、 通过下面代码调用。
<?php include( TEMPLATEPATH . '/thumbnail.php' ); ?>
2、某个分类产品图片动态滚动
第一步、删除原有图片调用所有代码
第二步、放上我们自己的图片div代码：
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
第三步、复制css样式
#demo {
background: #FFF;
overflow:hidden;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
第四步、调用某个分类下面的图片
<?php if (have_posts()) : ?>
<?php query_posts('cat=3' . $mcatID. '&caller_get_posts=1&showposts=6'); ?>
<?php while (have_posts()) : the_post(); ?>
<?php endwhile;?>
<?php endif; wp_reset_query(); ?>
第五课、产品展示页面制作
1、制作category-id.php页面
2、调用header、sidebar、footer文件
调用头部标签：<?php get_header();?>
调用底部标签：<?php get_footer();?>
调用侧边栏标签：<?php get_sidebar();?>
3、图片方式调用
循环调用：
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
标题调用：<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 16, ''); ?></a>
图片调用：<?php include( TEMPLATEPATH . '/thumbnail.php' ); ?>
页面名字调用：<?php wp_title('');?>
4、分页插件使用
wp-page-numbers插件
使用：
<?php if(function_exists('wp_page_numbers')) : wp_page_numbers(); endif; ?>
第六课、文章列表页面制作
1、制作archive.php页面
2、调用header、sidebar、footer文件
调用头部标签：<?php get_header();?>
调用底部标签：<?php get_footer();?>
调用侧边栏标签：<?php get_sidebar();?>
3、循环调用文章
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
标题调用：<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>
日期调用：<?php the_date_xml()?>
页面名字调用：<?php wp_title('');?>
4、分页插件使用
wp-page-numbers插件
使用：
<?php if(function_exists('wp_page_numbers')) : wp_page_numbers(); endif; ?>
第七课、内容页面制作
1、制作single.php
2、调用header、sidebar、footer文件
调用头部标签：<?php get_header();?>
调用底部标签：<?php get_footer();?>
调用侧边栏标签：<?php get_sidebar();?>
3、循环调用文章
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
标题调用：<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>
内容：<?php the_content(""); ?>
4、元信息调用
日期调用：<?php the_date_xml()?>
分类目录： <?php the_category(', ') ?>
文章标签：<?php the_tags('标签： ', ', ', ''); ?>
大小调整：
调整大小：
<a href="javascript:ContentSize(16)">16px</a> <a href="javascript:ContentSize(14)">14px</a> <a href="javascript:ContentSize(12)">12px</a>s
上一篇调用：<?php previous_post_link('« %link'); ?>
下一篇调用：<?php next_post_link('%link »'); ?>
5、最新文章
<?php $rand_posts = get_posts('numberposts=10&orderby=date');foreach($rand_posts as $post) : ?>
<li><a href="<?php the_permalink(); ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?>
</a></li>
<?php endforeach;?>
6、相关文章调用
相关文章：通过分类来判断相关文章
<ul id="cat_related">
<?php
$cats = wp_get_post_categories($post->ID);
if ($cats) {
$args = array(
'category__in' => array( $cats[0] ),
'post__not_in' => array( $post->ID ),
'showposts' => 6,
'caller_get_posts' => 1
);
query_posts($args);
if (have_posts()) :
while (have_posts()) : the_post(); update_post_caches($posts); ?>
<li>* <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; else : ?>
<li>* 暂无相关文章</li>
<?php endif; wp_reset_query(); } ?>
</ul>
第八课、page页面和搜索功能制作
1、制作page页面，复制single.php
2、制作搜索功能
2-1、复制搜索代码
<form id="search" action="<?php bloginfo('url'); ?>/" target="_blank">
<input id="s" name="s" class="searchInput" style="border-style:none" type="text" value="<?php the_search_query(); ?>"/>
<input type="submit" class="searchBtn" onClick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';" alt="Search" />
</form>
2-2、制作search.php，直接复制分类目录页面
2-3、调试搜索功能和界面
3、企业模板制作总结
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
