WordPress企业主题制作教程.docx

资源描述

WordPress企业主题制作教程.docx

《WordPress企业主题制作教程.docx》由会员分享，可在线阅读，更多相关《WordPress企业主题制作教程.docx（15页珍藏版）》请在冰豆网上搜索。

WordPress企业主题制作教程.docx

WordPress企业主题制作教程

企业主题模板制作教程

课程目标：

制作出一个企业的主题

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

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

2、产品页面

3、文章列表页面

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

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

1、静态转模板

1.1、制作style.css

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

添加主题版权信息：

ThemeName:

WPHost

ThemeURI:

Description:

WPYOU官方主题定制设计和开发:

Version:

3.6

Author:

WPYOU

AuthorURI:

（c）WPYOU

1.2、制作index.php

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

Style.css路径调用：

phpbloginfo（'stylesheet_url'）;?

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

获取主题存放路径：

phpbloginfo（'template_directory'）;?

1-2-3、删除多余的CSS代码

1-2-4、修改style.css里面图片路径

2、顶部模板制作

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

phpget_header（）;?

2-1、元信息调用

phpbloginfo（'charset'）;?

>"/>

<?</p><p>phpif（is_home（）||is_search（））{bloginfo（'name'）;}else{wp_title（''）;print"-";bloginfo（'name'）;}?</p><p>>

phpwp_head（）;?

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

vartopMenuNum=0;

$（"#nav_sgBhgnli"）.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"）;

}

）;

分类目录调用标签：

phpwp_list_categories（'title_li=0&orderby=name&show_count=0&depth=1'）;?

页面调用：

phpwp_list_pages（'sort_column=menu_order&title_li=&depth=2&include='）;?

自定义首页：

phpechoget_option（'home'）;?

>”>首页

顶部空白如何处理

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

add_filter（'show_admin_bar','__return_false'）;

2-3、幻灯片替换

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

第3课侧边栏和底部制作

1、分离侧边栏

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

phpget_sidebar（）;?

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

php$rand_posts=get_posts（'numberposts=5&category=1&orderby=date'）;foreach（$rand_postsas$post）:

phpthe_permalink（）;?

>">

phpthe_title（）;?

phpendforeach;?

更多按钮链接：

phpechoget_option（'home'）;?

3、产品树形结构调用

Css样式：

.sidebar{float:

left;width:

250px;overflow:

hidden;}

.sidebarh3{float:

left;padding:

8px5px6px10px;width:

230px;font-size:

14px;color:

#0B3779;}

.sidebarul{float:

left;width:

250px;}

.sidebarulli{float:

left;margin-bottom:

20px;}

.sidebarulli.widget_text{padding:

0px0px;}

.sidebarulli.widgetdiv{padding:

15px10px0px;line-height:

20px;clear:

both;}

.sidebarulliul{float:

left;margin-top:

15px;}

.sidebarulliulli{width:

230px;margin:

6px4px5px;padding-left:

10px;background:

url（images/news_arrow.gif）no-repeat0px6px;overflow:

hidden;}

.sidebarulliulliul{border:

none;}

.sidebarulliul.subli{padding-left:

0px;background:

none;}

.sidebarulliul.sublia:

link,.sidebarulliul.sublia:

visited{padding:

2px5px10px22px;width:

210px;color:

#333;font-weight:

bold;text-decoration:

none;border-bottom:

1pxsolid#E6E6E6;display:

block;}

.sidebarulliul.sublia:

hover{color:

#0B3779;border-bottom:

1pxsolid#CCC;}

.sidebarulliul.sub.current_page_item{border-bottom:

1pxsolid#CCC;}

.sidebarulliul.sub.current_page_itema:

link,.sidebarulliul.sub.current_page_itema:

visited,.sidebarulliul.sub.current_page_itema:

hover{color:

#0B3779;font-weight:

bold;background:

none;}

4、友情链接只在首页显示

phpif（is_home（））{?

phpwp_list_bookmarks（'title_li=&categorize=0&orderby=rand&limit=24'）;?

php}?

5、底部制作

通过WP标签调用回来，调用底部标签：

phpget_footer（）;?

获取主页路径：

phpechoget_option（'home'）;?

版权信息：

phpechoget_option（'home'）;?

>”>

phpbloginfo（’name’）;?

第4课企业首页制作

1、产品图片调用

循环调用：

phpif（have_posts（））:

phpwhile（have_posts（））:

the_post（）;?

phpendwhile;?

phpendif;?

标题调用：

phpthe_permalink（）?

>">

phpechomb_strimwidth（get_the_title（）,0,16,''）;?

操作步骤：

1-1、在主题文件夹中建thumbnail.php文件，添加如下代码：

phpif（get_post_meta（$post->ID,'thumbnail',true））:

php$image=get_post_meta（$post->ID,'thumbnail',true）;?

phpthe_permalink（）?

>"rel="bookmark"title="

phpthe_title（）;?

>">

phpecho$image;?

>"alt="

phpthe_title（）;?

>"/>

phpelse:

--截图-->

phpthe_permalink（）?

>"rel="bookmark"title="

phpthe_title（）;?

>">

phpif（has_post_thumbnail（））{the_post_thumbnail（'thumbnail'）;}

else{?

phpechocatch_first_image（）?

>"width="140px"height="100px"alt="

phpthe_title（）;?

>"/>

php}?

phpendif;?

1-2、在主题文件夹里面的functions.php文件中添加下面代码：

php

//支持外链缩略图

if（function_exists（'add_theme_support'））

add_theme_support（'post-thumbnails'）;

functioncatch_first_image（）{

global$post,$posts;

$first_img='';

ob_start（）;

ob_end_clean（）;

$output=preg_match_all（'//i',$post->post_content,$matches）;

$first_img=$matches[1][0];

if（empty（$first_img））{//Definesadefaultimage

$random=mt_rand（1,2）;

echoget_bloginfo（'stylesheet_directory'）;

echo'/images/random/'.$random.'.jpg';

}

return$first_img;

}

1-3、在images文件夹下建立random文件夹，放入图片，图片必须已1.jgp，2.jpg这种格式。

以数字1~10作为名字。

1-4、通过下面代码调用。

phpinclude（TEMPLATEPATH.'/thumbnail.php'）;?

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

第一步、删除原有图片调用所有代码

第二步、放上我们自己的图片div代码：

php$rand_posts=get_posts（'numberposts=10&orderby=date'）;foreach（$rand_postsas$post）: