竭诚为您提供优质文档/双击可除
wp文章页面模板
篇一:wordpress_主题模板制作及修改教程
wordpress主题模板制作及修改教程
每一套wp主题都由结构层、表现层和数据层构成,可以说是典型的、符合web体系标准的“三层结构”。wp主题的这种模式块化的特点决定了其设计其实是非常简单,但又极其灵活的。可以说,学会了制作wp主题,就相当于基本理解了web开发的客户端模型,对进一步学习掌握web技术具有重要意义。这也正是wp的魅力所在!
在一套wp主题中,最基本的两个文件是index.php和style.css。其中,前者定义结构和内容,后者定义样式。所谓结构,就是由指由xhtml标签构成的网页基本架构。在wp主题中,结构层主要使用的是添加了适当的id或(和)class属性的div和ul元素,以便更好地通过表现层来控制页面的布局和外观。所谓表现层,其实就是网页的布局和样式--也就是外观。表现层由css(级联样式表)规则定义构成。而数据层,顾名思义,也就是网站中实际显示的内
容,是通过调用wp内置的函数(有时需要传递适当的参数)从数据库中取得的。
说明:为简明起见,本教程不涉及如何定义样式表(css)文件的内容。
事实上,当我们打开某个主题的文件夹时,看到的并不止这两个文件,而是更多。但一般来说,在一个完整的wp主题文件夹中都应该包含下列文件(也称为模板文件):
等页面(其中部分页面稍后介绍)。
虽然上面列出了与wp内置功能对应的9个php文件,但制作一套主题远没有想像得那么复杂。因为事实上,你只需要制作一个index.php文件,就可以派生出另外8个文件来!
从wp应用主题的机制来说,这9个模板文件是存在优先级差别的,也可以认为是重要性不同。它们的优先级顺序是:index.php->single.php->page.php->archive.php->search.php->404.php。
这样,当不存在后边的页面时,wp会自动调用前面的页面,直至调用index.php。比如,当程序调用页面页page.php
时,如果page.php模板文件不存在,那么程序会尝试调用前面的文件--single.php。而如果single.php也不存在,那么就会调用最终的index.php来显示页面页。可见index.php属于“垫底儿”的缺省页面,它的重要性是最高的。但当存在具体页面时,还是要优先使用具体
说明:为简明起见,本教程不涉及如何定义样式表(css)文件的内容。
事实上,当我们打开某个主题的文件夹时,看到的并不止这两个文件,而是更多。但一般来说,在一个完整的wp主题文件夹中都应该包含下列文件(也称为模板文件):
等页面(其中部分页面稍后介绍)。
虽然上面列出了与wp内置功能对应的9个php文件,但制作一套主题远没有想像得那么复杂。因为事实上,你只需要制作一个index.php文件,就可以派生出另外8个文件来!
从wp应用主题的机制来说,这9个模板文件是存在优先级差别的,也可以认为是重要性不同。它们的优先级顺序是:index.php->single.php->page.php->archive.php->search.php->404.php。
这样,当不存在后边的页面时,wp会自动调用前面的页面,直至调用index.php。比如,当程序调用页面页page.php
时,如果page.php模板文件不存在,那么程序会尝试调用前面的文件--single.php。而如果single.php也不存在,那么就会调用最终的index.php来显示页面页。可见index.php属于“垫底儿”的缺省页面,它的重要性是最高的。但当存在具体页面时,还是要优先使用具体
的页面,可见具体的页面优先级最高。
在明确了index.php是一套wp主题的核心之后,我们就可以将制作wp主题的过程简单地分成两步,即--定义主模板文件index.php和派生其他模板文件。
定义主模板文件index.php从页面布局的角度上,有必要将主模板文件index.php拆分成header.php、sidebar.php和footer.php三个子页面。wp专门为在index.php中包含这三个子页面提供了对应的get_header()、get_sidebar()和get_footer()函数。
下面,就来详细介绍一下制作index.php页面的过程:
首先,建立一个mythemes文件夹,在文件夹中建立一个文本文件并将其重命名为index.php,
然后再建立一个style.css文件(内容暂时留空)。
然后,用你喜欢的文本编辑器dw打开index.php并输入下列代码(最好复制,因为这一部分不重要):
“/tR/xhtml1/dtd/xhtml1-transitional.dtd“>
在明确了index.php是一套wp主题的核心之后,我们就可以将制作wp主题的过程简单地分成两步,即--定义主模板文件index.php和派生其他模板文件。
定义主模板文件index.php从页面布局的角度上,有必要将主模板文件index.php拆分成header.php、sidebar.php和footer.php三个子页面。wp专门为在index.php中包含这三个子页面提供了对应的get_header()、get_sidebar()和get_footer()函数。
下面,就来详细介绍一下制作index.php页面的过程:
首先,建立一个mythemes文件夹,在文件夹中建立一个文本文件并将其重命名为index.php,
然后再建立一个style.css文件(内容暂时留空)。
然后,用你喜欢的文本编辑器dw打开index.php并输入下列代码(最好复制,因为这一部分不重要):
“/tR/xhtml1/dtd/xhtml1-transitional.dtd“>
;
charset=”/>
blogarchive
”/>
”
type=”text/css”media=”all”/>
/print.css”type=”text/css”media=”print”/>
RssFeed”href=””/>
”/>
charset=”/>
blogarchive
”/>
”
type=”text/css”media=”all”/>
/print.css”type=”text/css”media=”print”/>
RssFeed”href=””/>
”/>
显然,这是一些构成网页文件的html代码,当然其中包含php代码。如前所述,
html代码定义结构,而php代码用于生成内容。
在wp后台的“主题”模块中,选择mytheme主题。然后,在浏览器中观察你的wp外观。此时,应该显示页面一片空白。但通过“查看源文件”,你会发现index.php中的php代码已经生成了一些头部内容。
接着,我们开始动手定义index.php中body部分的结构和内容。
(一)构建header在body元素内,新建如下结构化标记元素,注意各元素都带有不同的id属性:
wordpress主题怎么安装
然后,在该元素的两个标签之间输入下列代码:
”title=””> bloginfo(’name’);>
这里用到了wp内置的bloginfo函数来生成内容,其中:
bloginfo(’url’)返回网站主页链接;
bloginfo(’name’)返回网站标题;
bloginfo(’description’)返回网站描述。
保存index.php文件,然后在浏览器中按F5刷新一下页面,看能看到什么?再通过“查看源文件”,核对一下由wp的bloginfo()函数生成的相关信息。
(二)构建content在中,我们要通过循环显示博文,包括每个博文的标题、作者、发表日期以及其他相关信息。并且,可以分页显示博文(取决于wp后台的设置)。
首先,在与之间输入下列代码:
”>
”rel=”bookmark”title=””>
:
:
”rel=”bookmark”title=””>
:
:
class=”next-entries”>
看似复杂,其实不然。首先:
这三行,在wp中表示if控制结果。注意,if语句通过测试ha
ve_posts()函数来测试是否存在博文。而
这两行,是wp中的while循环。其中,while语句通过测试have_posts()决定是否调用the_post()函数。如果
测试have_posts()返回true,则调用the_post()函数,初始化与博文相关的内置变量。
在while循环内部,首先要注意通过div、h2、span这三个元素定义的嵌套语义结构,以及相应元素的class和id属性(其中只为class为post的div元素定义了一个id属性--post-)。这是将来使用css控制外观的关键所在。在这个div元素中,为显示博文的相关信息,分别调用了以下wp函数:
the_id():返回博文id;
这三行,在wp中表示if控制结果。注意,if语句通过测试ha
ve_posts()函数来测试是否存在博文。而
这两行,是wp中的while循环。其中,while语句通过测试have_posts()决定是否调用the_post()函数。如果
测试have_posts()返回true,则调用the_post()函数,初始化与博文相关的内置变量。
在while循环内部,首先要注意通过div、h2、span这三个元素定义的嵌套语义结构,以及相应元素的class和id属性(其中只为class为post的div元素定义了一个id属性--post-)。这是将来使用css控制外观的关键所在。在这个div元素中,为显示博文的相关信息,分别调用了以下wp函数:
the_id():返回博文id;
the_permalink():返回博文固定链接uRl;
the_title():返回博文标题;
the_time(’m’):返回发表日期中的月份;
the_time(’d’):返回发表日期中的天;
the_author():返回博文作者;
the_category():返回博文的类别;
the_content():返回博文的内容,其中的参数表示用于“更多内容”的链接文本;
以上函数都是以the_开头的,加上后面的函数名不仅颇有自解释的味道,而且令人联想到this关键字。此外_e()函数是一个包装函数,这个函数主要用于语言的转换,如果调用该函数并传递标准的wp术语,如:author或categories,则返回你相应语言包中的译文,在中文包中分别是“作者”和“类别”。当然,不用也可。但会失去一些适应性。
还有,omments_popup_link()和edit_post_link()两个函数,分别显示注释和编辑链接,这里不多说了。另外,在后面显示了分页导航链接,调用的函数分别是:next_posts_link()和
previous_posts_link()。此时,如果你的博文总数小于wp后台设置的最多显示数目,比如:你在后台设置最多显示5篇,而你有10篇博文,就会分页显示;否则,如果你的博文少
the_title():返回博文标题;
the_time(’m’):返回发表日期中的月份;
the_time(’d’):返回发表日期中的天;
the_author():返回博文作者;
the_category():返回博文的类别;
the_content():返回博文的内容,其中的参数表示用于“更多内容”的链接文本;
以上函数都是以the_开头的,加上后面的函数名不仅颇有自解释的味道,而且令人联想到this关键字。此外_e()函数是一个包装函数,这个函数主要用于语言的转换,如果调用该函数并传递标准的wp术语,如:author或categories,则返回你相应语言包中的译文,在中文包中分别是“作者”和“类别”。当然,不用也可。但会失去一些适应性。
还有,omments_popup_link()和edit_post_link()两个函数,分别显示注释和编辑链接,这里不多说了。另外,在后面显示了分页导航链接,调用的函数分别是:next_posts_link()和
previous_posts_link()。此时,如果你的博文总数小于wp后台设置的最多显示数目,比如:你在后台设置最多显示5篇,而你有10篇博文,就会分页显示;否则,如果你的博文少
于或等于5篇则看不到分页导航链接。
最后,不要丢下语句后面的内容:
显然,这是一个错误提示信息。
(三)构建sidebarsidebar的内容当然要在元素中构建了。sidebar,中文叫侧边栏,其中可以包含很多内容。比如:分类、页面、链接、日历等等导航及相关信息。
在wp中,sidebar中的内容都以无序(ul)或有序(ol)列表的形式输出。因此,需要在中输入以下标记:
最后,不要丢下语句后面的内容:
显然,这是一个错误提示信息。
(三)构建sidebarsidebar的内容当然要在元素中构建了。sidebar,中文叫侧边栏,其中可以包含很多内容。比如:分类、页面、链接、日历等等导航及相关信息。
在wp中,sidebar中的内容都以无序(ul)或有序(ol)列表的形式输出。因此,需要在中输入以下标记:
页面’);>
’,‘’,‘
’,False,‘id’,False,False,-1,False);>
以上代码从第三行开始,分别通过包含searchform.php显示搜索表单;
调用get_calendar()函数显示日历;
调用wp_list_pages()函数显示页面导航;
调用wp_list_cats()函数显示分类导航;
调用wp_get_archives()函数显示存档导航;
调用get_links()函数显示链接导航。
在构建侧边栏时,要为生成搜索框新建一个searchform.php文件,其内容如下:
/”>
”name=”s”id=”s”size=”15″/>
将其保存在mytheme文件夹中,通过include语句包含进来就可以了。注意,常量templatepath中保存的是模板路径。
最后,说明一下以上代码第二行和倒数第二行。显然这是一个if语句块。那这个if语句块包含sidebar是何用意呢?这是部件化侧边栏的需要,就是让sidebar适合widget插件(wp2.0后内置了widget,所以不用再安装了)。如果要使用widget插件,必须对sidebar进行部件
调用get_links()函数显示链接导航。
在构建侧边栏时,要为生成搜索框新建一个searchform.php文件,其内容如下:
/”>
”name=”s”id=”s”size=”15″/>
将其保存在mytheme文件夹中,通过include语句包含进来就可以了。注意,常量templatepath中保存的是模板路径。
最后,说明一下以上代码第二行和倒数第二行。显然这是一个if语句块。那这个if语句块包含sidebar是何用意呢?这是部件化侧边栏的需要,就是让sidebar适合widget插件(wp2.0后内置了widget,所以不用再安装了)。如果要使用widget插件,必须对sidebar进行部件
化。这样,在wp后台通过widget插件你就可以使用拖动来方便地定义侧边栏的组件了。部件化侧边栏,除了在ul元素内侧放入这个if语句之外,还必须在mytheme文件夹中建立一个文件functions.php,其内容如下:
if(function_exists(’register_sidebar’))
register_sidebar(array(
‘before_widget’=>‘’,
‘after_widget’=>‘’,
‘before_title’=>‘’,
‘after_title’=>‘’,
));
>
(四)构建footerfooter中一般都一些版权信息和不太重要的链接。所以可以在元素中简单地放入下列代码:
copyright20xx
if(function_exists(’register_sidebar’))
register_sidebar(array(
‘before_widget’=>‘’,
‘after_widget’=>‘’,
‘before_title’=>‘’,
‘after_title’=>‘’,
));
>
(四)构建footerfooter中一般都一些版权信息和不太重要的链接。所以可以在元素中简单地放入下列代码:
copyright20xx
至此,核心index.php文件就算是大功告成了!
接下来,是拆分index.php和基于index.php派生子模板文件。
在mytheme文件夹中新建header.php、sidebar.php和footer.php三个文件。把index.php中的 id=”header”>、和三个结构化元素及其内容分别转移(剪切)到这三个新文件中。然后,在原来的位置处输入代码:
篇二:wordpress中文企业主题wpteam企业网站模板wp源码cm使用说明69
wordpress中文企业主题wpteam企业网站模板wp源码cm_使用说明
特功能:
首页预设多个自定义栏目设置,无需代码修改,支持后台可视化自定义各栏目分类和不同的显示模式;
3个可选显示模式:文章列表模式、图片+文章列表模式、图片列表模式;全面满足不同栏目的显示需求;
具体设置效果如下:
1,选择栏目分类
2,设置栏目的显示模式
接下来,是拆分index.php和基于index.php派生子模板文件。
在mytheme文件夹中新建header.php、sidebar.php和footer.php三个文件。把index.php中的 id=”header”>、和三个结构化元素及其内容分别转移(剪切)到这三个新文件中。然后,在原来的位置处输入代码:
篇二:wordpress中文企业主题wpteam企业网站模板wp源码cm使用说明69
wordpress中文企业主题wpteam企业网站模板wp源码cm_使用说明
特功能:
首页预设多个自定义栏目设置,无需代码修改,支持后台可视化自定义各栏目分类和不同的显示模式;
3个可选显示模式:文章列表模式、图片+文章列表模式、图片列表模式;全面满足不同栏目的显示需求;
具体设置效果如下:
1,选择栏目分类
2,设置栏目的显示模式
主题特:
完美支持wordpress3.0+自定义网站背景
(后台–外观–背景)
完美支持自定义菜单功能(可自定义全
站3处:右上菜单、顶部菜单、底部菜单)(自定义菜单教程)
完美支持自定义网站背景(后台–外观
篇三:wordpress中文企业主题cms企业网站模板wp源码使用说明262
wordpress中文企业主题cms企业网站模板wp源码_使用说明
此源码是php+mysql的
bizshow企业网站主题是专门为用户搭建中小型企业网站开发设计的,完全满足中小企业
完美支持wordpress3.0+自定义网站背景
(后台–外观–背景)
完美支持自定义菜单功能(可自定义全
站3处:右上菜单、顶部菜单、底部菜单)(自定义菜单教程)
完美支持自定义网站背景(后台–外观
篇三:wordpress中文企业主题cms企业网站模板wp源码使用说明262
wordpress中文企业主题cms企业网站模板wp源码_使用说明
此源码是php+mysql的
bizshow企业网站主题是专门为用户搭建中小型企业网站开发设计的,完全满足中小企业
公司的在线网站建设需求,后台方便灵活的自定义功能和可扩展性,可以帮助您方便快捷地在线建立企业网站平台。
网站整体设计力求设计简洁大方,功能完善实用,是帮助您建立高效的企业级在线网站的一款优质
网站主题,网站采用通用的左右结构布局设计,而且您可以根据自身需求,设置边栏的左右显示模式,自定义首页显示等特功能。
bizshow企业网站符合绝大多数不同行业的企业用户的网站建设需求,可以快速为企业建立一个完善的企业网络平台。
首页效果图
主题特:
完美支持wordpress3.0+自定义菜
单功能(自定义菜单教程)
网站整体设计力求设计简洁大方,功能完善实用,是帮助您建立高效的企业级在线网站的一款优质
网站主题,网站采用通用的左右结构布局设计,而且您可以根据自身需求,设置边栏的左右显示模式,自定义首页显示等特功能。
bizshow企业网站符合绝大多数不同行业的企业用户的网站建设需求,可以快速为企业建立一个完善的企业网络平台。
首页效果图
主题特:
完美支持wordpress3.0+自定义菜
单功能(自定义菜单教程)
完美支持wordpress3.0+自定义网
站背景(后台–外观–背景)
自动首页幻灯片图片(在文章编辑
页面,添加自定义字段(自定义域)名称为
【slider】,对应的值为【1】,即为满足条件如何添加和使用自定义字段(自定义域))
自定义首页幻灯片个数自定义“是否开启自定义菜
单”(默认为不开启,显示分类列表)
自定义顶部(右上角)信息自定义新闻分类id自定义新闻列表页显示文章数自定义产品列表
站背景(后台–外观–背景)
自动首页幻灯片图片(在文章编辑
页面,添加自定义字段(自定义域)名称为
【slider】,对应的值为【1】,即为满足条件如何添加和使用自定义字段(自定义域))
自定义首页幻灯片个数自定义“是否开启自定义菜
单”(默认为不开启,显示分类列表)
自定义顶部(右上角)信息自定义新闻分类id自定义新闻列表页显示文章数自定义产品列表
页显示文章数支持侧边栏产品分类展示支持侧边栏栏目二级页面支持留言嵌套回复内置独立产品图片列表模板内置相关新闻(产品)列表功能自定义侧边栏内容
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论