WordPress企业主题制作教程

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

企业主题模板制作教程

课程目标：制作出一个企业的主题

第1课WordPress企业网站主题分析

1、首页产品图片和滚动图片

2、产品页面

3、文章列表页面

4、单个文章（产品）页面和page页面

第2课静态页面转化成WP模板和头部制作

1、静态转模板

1.1、制作style.css

移动images文件夹下面的css到主题文件夹下面，重命名为style.css

添加主题版权信息：

/*

Theme Name: WPHost

Theme URI: /

Description: WPYOU官方主题定制设计和开发: WPYOU. Version: 3.6

Author: WPYOU

Author URI: /

Copyright: (c) WPYOU

*/

1.2、制作index.php

1-2-1、修改css文件路径

Style.css路径调用：

1-2-2、修改所有相对路径为WP绝对路径

第1页/共11页

获取主题存放路径：

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、二级目录导航制作

分类目录调用标签：

页面调用：

自定义首页：”>首页

第2页/共11页

顶部空白如何处理

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

add_filter( 'show_admin_bar', '__return_false' );

2-3、幻灯片替换

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

第3课侧边栏和底部制作

1、分离侧边栏

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

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

更多按钮链接：/

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

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

第3页/共11页