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.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、元信息调用

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

分类目录调用标签：

页面调用：

自定义首页：”>首页

顶部空白如何处理

functions.php里面添加下面代码。

add_filter( 'show_admin_bar', '__return_false' );

2-3、幻灯片替换

参考《div+css入门实战2012版》最后一课，幻灯片专题。

第三课、侧边栏和底部制作

1、分离侧边栏

通过WP标签调用回来，调用侧边栏标签：

2、调用某个分类下的文章

get_posts('numberposts=5&category=1&orderby=date');foreach($rand_posts as $post) : ?>

更多按钮链接：/

3、产品树形结构调用

• wp_list_categories('title_li=0&orderby=name&show_count=0&depth=3'); ?>

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;}