wp企业模板制作教程.doc

企业主题模板制作教程

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

第一课、企业网站模板分析
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路径调用：

1-2-2、修改所有相对路径为WP绝对路径
获取主题存放路径：

1-2-3、删除多余的CSS代码
1-2-4、修改style.css里面图片路径

2、顶部模板制作

分离头部，改用WP调用，调用顶部标签：

2-1、元信息调用

<?php if (is_home()||is_search()) { bloginfo('name'); } else { wp_title(''); print " - "; bloginfo('name'); } ?>
>

2-2、二级目录导航制作

var topMenuNum = 0;
$("#nav_sgBhgn li").hover(
function(){
topMenuNum++;
$(this).attr("id","kindMenuHover"+topMenuNum);
$("#kindMenuHover" + topMenuNum + " > ul").show();
$(this).parent().addClass("hover");
},
function(){
$</p><p style='padding:5px 0px;'>5、"#"+$(this).attr("id")+" > ul").hide();
$(this).attr("id","");
$(this).parent().removeClass("hover");
}
);

分类目录调用标签：

页面调用：
); ?>

自定义首页：”>首页

顶部空白如何处理
functions.php里面添加下面代码。

add_filter( 'show_admin_bar', '__return_false' );

2-3、幻灯片替换
参考《div+css入门实战2012版》最后一课，幻灯片专题。
第三课、侧边栏和底部制作

1、分离侧边栏
通过WP标签调用回来，调用侧边栏标签：

2、调用某个分类下的文章
nd_posts = get_posts('numberposts=5&category=1&orderby=date');foreach($rand_posts as $post) : ?>
4px; 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、友情链接只在首页显示

tegorize=0&orderby=rand&limit=24'); ?>

5、底部制作
通过WP标签调用回来，调用底部标签：
获取主页路径：
版权信息：
Copyright © 2012”>

第四课、企业首页制作
1、产品图片调用
循环调用：
)) : ?>

标题调用：

操作步骤：
1-1、在主题文件夹中建thumbnail.php文件，添加如下代码：
ID, 'thumbnail', true) ) : ?>
ID, 'thumbnail', true); ?>

1-2、 在主题文件夹里面的functions.php文件中添加下面代码：
ob_start();
ob_end_clean();
$output = preg_match_all('//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、 通过下面代码调用。
>

2、某个分类产品图片动态滚动

第一步、删除原有图片调用所有代码
第二步、放上我们自己的图片div代码：
href="#">

float: left;
}

第四步、调用某个分类下面的图片

第五课、产品展示页面制作
1、制作category-id.php页面
2、调用header、sidebar、footer文件

调用头部标签：
调用底部标签：
调用侧边栏标签：

3、图片方式调用
循环调用：

标题调用： mb_strimwidth(get_the_title(), 0, 16, ''); ?>

图片调用：

页面名字调用：

4、分页插件使用
wp-page-numbers插件
使用：

第六课、文章列表页面制作
1、制作archive.php页面
2、调用header、sidebar、footer文件

调用头部标签：
调用底部标签：
调用侧边栏标签：

3、循环调用文章

标题调用： mb_strimwidth(get_the_title(), 0, 32, ''); ?>

日期调用：

页面名字调用：

4、分页插件使用
wp-page-numbers插件
使用：

第七课、内容页面制作

1、制作single.php
2、调用header、sidebar、footer文件

调用头部标签
调用底部标签：
调用侧边栏标签：

3、循环调用文章

标题调用： 32, ''); ?>
内容：

4、元信息调用
日期调用：
分类目录：
文章标签：
大小调整：
调整大小：
16px  14px &nbsp;12pxs

上一篇调用：
下一篇调用：

5、最新文章

t_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); ?>
class="searchInput" style="border-style:none" type="text" value=""/>