WP企业模板制作标签文档.docx
《WP企业模板制作标签文档.docx》由会员分享,可在线阅读,更多相关《WP企业模板制作标签文档.docx(10页珍藏版)》请在冰点文库上搜索。
![WP企业模板制作标签文档.docx](https://file1.bingdoc.com/fileroot1/2023-5/21/4a1edf83-6522-436d-983e-840d4a983040/4a1edf83-6522-436d-983e-840d4a9830401.gif)
WP企业模板制作标签文档
Wp百科网企业主题模板制作教程
课程目标:
制作出一个企业的主题
课后作业:
跟着视频,完成一个相同主题的制作。
课程目录:
第一课、企业模板介绍 1
第二课、模板拆分制作 1
第三课、首页模板文件 5
第四课、其他页面制作 8
第五课、模板组件专题 12
第一课、企业模板介绍
第1节:
模板页面分析
1、首页产品图片和滚动图片
2、产品页面
3、文章列表页面
4、single页面
5、page页面
第2节:
模板素材准备
1、wordpress网站;
2、企业静态页面文件;
3、企业模板标签文档;
4、火狐浏览器和firebug插件;
5、DW软件。
第二课、模板拆分制作
第1节:
静态页面转化
1、移动.css样式文件到主题文件夹内,并重命名为style.css
2、添加主题版权信息:
/*
ThemeName:
WP百科网主题
ThemeURI:
Description:
这是我们做的第一个企业主题哦
Author:
WP百科网
AuthorURI:
Version:
1.0
Tags:
white,company,WP百科网,blue
*/
3、制作模板首页文件index.php;
3、添加主题后台缩略图screenshot.png或screenshot.jpg;
4、修改style.css文件/图片路径:
phpbloginfo('stylesheet_url');?
>
index.phpcss路径(这样网站才能打开)后修改
5、修改所有相对路径为WP绝对路径:
图片路径
phpbloginfo('template_directory');?
>
查找图片路径全部替换记得查看地址是否一致、
images替换
6、style.css文件 图片地址路径 查找url( 全部修改和替换 url(images/
第2节:
头部模板文件(header.php)制作
1、分离头部,改用WP调用,调用顶部标签:
phpget_header();?
>header.php
2、元信息调用
编码格式:
phpbloginfo('charset');?
>"/>header.phpu-8处修改
SEO标签:
phpinclude(TEMPLATEPATH.'/seo.php');?
>
header.php上删除修改标签栏信息目录须有seo.php文件、
可以调用相同目录的php然后打开seo.php可以适当的添加首页描述
适当的修改
Hook标签:
phpwp_head();?
>header.php的下方添加
去除顶部空白问题:
新建functions.php函数文件并添加下面代码。
phpadd_filter('show_admin_bar','__return_false');?
>
3、制作导航:
3-1、新建functions.php函数文件并添加以下代码:
php
//自定义菜单
register_nav_menus(
array(
'header-menu'=>__('导航自定义菜单'),
)
);?
>
3-2、导航位置添加菜单调用代码:
header.php
phpwp_nav_menu(array('container'=>'','menu_class'=>'navigation','menu_id'=>'nav_sgBhgn'));?
>
3-3、设置菜单。
扩展知识菜单的参数:
//最外层容器的标签名,默认div
'container'=>'div',
//最外层容器的class名
'container_class'=>'mainNavBlock',
//最外层容器的id名
'container_id'=>'menu',
//导航菜单ul标签的class名
'menu_class'=>'mainNav',
//导航菜单ul标签的id名
'menu_id'=>"nav",
//是否打印,默认是true,如果想将导航的代码作为赋值使用,可设置为false
'echo'=>true,
//备用的导航菜单函数,用于没有在后台设置导航时调用
'fallback_cb'=>'the_main_nav',
//显示在导航a标签之前
'before'=>'
',
//显示在导航a标签之后
'after'=>'
',
//显示在导航链接名之前
'link_before'=>'',
//显示在导航链接名之后
'link_after'=>'',
//显示的菜单层数,默认0,0是显示所有层
'depth'=>0,
//调用一个对象定义显示导航菜单
'walker'=>newWalker_Nav_Menu(),
//指定显示的导航名,如果没有设置,则显示第一个
'theme_location'=>'primary',
第3节:
侧边栏模板文件(sidebar.php)制作
1、分离侧边栏文件,并使用侧边栏标签调回:
phpget_sidebar();?
>
2、调用某个分类下的文章
php$rand_posts=
get_posts('category=ID&numberposts=5&orderby=date');foreach($rand_postsas$post):
?
>
phpthe_permalink();?
>">
phpthe_title();?
>
phpendforeach;?
>
选择某个分类下的文章
开始删除复制id=分类目录修改在下方的网址中修改成目录文类的网址
更多按钮链接:
首页连锁
phpechoget_option('home');?
>/
3、产品树形结构调用 产品导航(子目录)
上修改phpwp_list_categories('title_li=0&orderby=name&show_count=0&depth=0');?
>
Css样式:
style.css上添加样式
.prod_type{float:
left;width:
250px;overflow:
hidden;margin-left:
15px;padding-bottom:
10px;}
.prod_typeulli{background:
url("images/jiahao.gif")no-repeatscroll010pxtransparent;padding-left:
15px;font-weight:
bold;}
.prod_typeulliulli{background:
url("images/minus.gif")no-repeatscroll010pxtransparent;margin-left:
-8px;font-weight:
normal;}
.prod_typeullia{height:
30px;line-height:
30px;}
.prod_typeulul{display:
block!
important;}
4、友情链接只在首页显示 修改 删除
phpif(is_home()){?
>
phpwp_list_bookmarks('title_li=&categorize=0&orderby=rand&limit=24');?
>
php}?
>
1.全部显示直接复制第二段
2.1.首页显示 第一段放在友情链接上方的