企业主题模板制作教程
www.xfq1234
课程目标：制作出一个企业的主题
课后作业，跟着视频，完成一个相同主题的制作。
第一课、企业网站模板分析
1、首页产品图片和滚动图片
2、产品页面
3、文章列表页面
4、single和page页面
第二课、静态页面转化成WP模板和头部制作
1、 静态转模板
1-1、制作style.css
移动images文件夹下面的css到主题文件夹下面，重命名为style.css
添加主题版权信息：
/*
Theme Name: 莎莎公主 
Theme URI: www.wpbaike
Description:这是我们做的第一个企业主题哦
Author: 莎莎公主
Author URI: www.wpbaike
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。