wp企业模板制作教程

企业主题模板制作教程课程目标：制作出一个企业的主题课后作业，跟着视频，完成一个相同主题的制作。

第一课、企业网站模板分析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.0Tags: white, company, blue*/1-2、制作index.php1-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=<?phpbloginfo( '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 ><?phpwp_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这种格式。