行业新闻

    wordpress页面模板制作WordPress 默认主题自定义页面模板

    2022-06-26    来源:www.8001717.cn

    有时您想在您的网站上显示一些特殊形式的页面,您需要使用自定义页面模板。本文以内置的 (2011) 和 (2010) 主题为例进行详细介绍。与官方文档不同,本文重点介绍默认主题静态页面模板的内部结构,以方便我们在定制的时候进行修改。

    文章先介绍了主题的大体结构,然后以内置主题,主要是2011主题为例,说明页面模板的构成,最后给出三个制作自定义页面模板的例子.

    1.主题的大致结构

    以(2011)的主题为例,文件夹下的文件组织结构如下。//号后面的内容是我的评论描述。相信即使是刚接触过的朋友开始阅读这篇文章你也可以对主题有更全面的了解,修改主题也会更顺畅。

    在阅读下面的解释之前,你需要了解一个情况,那就是php代码的复用。我们看到的网页不一定是由单个php文件生成的,而是可以由一个主文件调用多个其他文件组成。这样便于代码复用:比如我想在每个网页上显示相同的段落,不需要在不同的网页对应的不同php文件中重复这一段,而只需要创建一个单独的php文件即可生成这句话,然后在主文件中需要的地方引用这个文件。

    有一个要求,所有主题的页面模板(主要的php文件,可以调用形成网页),或者它调用的模板wordpress网站制作,必须在开头附近包含()(通常放在. php 文件,由 () 调用),和 () 接近结尾(通常放在 .php 文件中,由 () 调用),因为在这些地方需要处理一些数据。所以如果我们在一个主题中打开一个文件wordpress网站建设,发现开头有(),结尾有(),那么它一定是一个主php文件,用于显示某种/某种类型的网页。

    为了避免混淆,下面将单独的php文件统称为模板。如果是主文件,也称为页面(或页面模板),我们浏览的称为网页。至于php文件的调用,可以通过自己写的函数来实现,也可以直接使用php的or方法,涉及到php编程,这里不再介绍。

    twentyelven 文件夹内部文件组织结构图:
    // 先介绍重要的
    │ index.php // 主题的引导文件,也是默认的首页的模板
    │ header.php
    // 这个文件包含 HTML 的  部分(不显示在网页上,但是通过查看网页源文件就能看到), // 同时还可能包含一部分正文(HTML的  标签内的东西); // get_header() 就是调用它的。 // 比如水景一页下面整个浅灰色色背景的部分都是在这个文件中处理的
    │ footer.php
    // 用于显示页面下面的内容,包含  标签 // 比如水景一页上面整个黑色背景的部分都是在这个文件中处理的
    // 下面 9 个文件都是页面模板,都调用了 get_header() 和 get_footer() // 并且一般都会调用 comments.php 以处理评论列表和评论框
    │ 404.php // 用于显示自定义 404 错误网页的页面模板
    │ archive.php // 用于显示文章存档网页的页面模板,比如按日期存档等页面
    │ author.php // 作者文章存档页面模板(显示该作者所有文章列表网页)
    │ category.php // 分类页面模板
    │ image.php // 用于显示图片附件,页面模板
    │ page.php
     // 用于显示静态页面(page)的页面模板,通过 get_template_part( 'content', 'page' ) 调用了 content-page.php
    │ tag.php // 标签页面模板
    │ single.php // 单一文章(post)页面,这是标准形式的 post,调用了 content-single.php
    │ showcase.php // 特色文章页面模板;用这个模板来做首页其实挺不错的
    // 下面这一组 11 个以 content 开头的文件,都只是某个页面的一部分,类似于上面的 comments.php 文件 // Twenty Ten 主题中用的是 loop 开头
    │ content-aside.php
    │ content-featured.php
    

    wordpress页面模板制作_wordpress 模板制作_wordpress模板制作视频教程

    │ content-gallery.php │ content-image.php │ content-intro.php │ content-link.php │ content-page.php │ content-quote.php │ content-single.php │ content-status.php │ content.php // 以上 11 个文件是用来处理网页主体部分的; // 包含正文内容,包括文章(post)、静态页面(page),也就是我们通常所说的文章内容; // 2011 主题内置了几种文章形式(post format),可针对不同的文章形式使用不同的模板; // 当然如果你乐意,使用同一个模板也没有问题 │ comments.php // 评论模板;这个不是一个单独的页面,需要在别的页面中调用此模板 // 使用 comments_template( '', true ) 来调用 │ searchform.php // 搜索框模板 │ search.php // “搜索”页面模板,还会调用 searchform.php 来显示搜索框,这是个页面模板 │ sidebar-footer.php │ sidebar-page.php │ sidebar.php // get_sidebar() 会调用此文件 // 这三个是用于显示网页上 WordPress 边栏的模板 // sidebar.php 会根据情况调用 sidebar-page.php 或者 sidebar-footer.php 或者同时调用两个 │ functions.php // 主题自定义的一些功能函数,如果有的话可以覆盖 WordPress 内建函数 │ rtl.css │ style.css // 这两个是主题的样式表文件,其中 rtl 只用于显示从右到左写法的语言 │ editor-style-rtl.css │ editor-style.css // 这两个是主题提供给后台的编辑器样式文件,一般不修改 │ screenshot.jpg

    wordpress 模板制作_wordpress模板制作视频教程_wordpress页面模板制作

    │ screenshot.png // 这两个是主题的缩略图 │ readme.txt // 主题的说明文档 │ license.txt // 主题的许可证内容 ├─colors // 文件夹,包含选择黑色风格时需要调用的样式文件(省略其下的文件) │ ├─images // 文件夹,包含主题网页上用到的图片(省略其下的文件) │ │ │ └─headers // 文件夹,包含顶部背景图片(省略其下的文件) │ ├─inc // 文件夹一些内部函数,基本不会自己修改(省略其下的文件) │ │ │ └─images // 文件夹,包含一些图片(省略其下的文件) │ ├─js // 文件夹,包含主题自己的 JavaScript 文件(省略其下的文件) │ └─languages // 文件夹,包含语言文件的文件夹(省略其下的文件)

    2010 年的主题离它不远,不再冗长。

    2. 页面模板结构

    我们来介绍一个完整的页面模板,仍然以2011主题为例。

    根据前面的描述,我们已经知道一个完整的页面模板其实就是page.php,但是它会调用.php形成页眉,-page.php处理静态页面文章,.php形成侧边栏,最后 .php 形成页脚。

    其中.php、.php、.php全站一致,我们一般不做改动wordpress页面模板制作,所以剩下的自定义部分就是page.php + -page.php。

    结合page.php源码,其中红色字体是我的注释。这是直接来自 2011 主题的源代码:

    wordpress模板制作视频教程_wordpress 模板制作_wordpress页面模板制作

    * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site will use a * different template. * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */上面全都是文件中的注释,php 标签内的注释一般用 /* */ 包围,单行可以直接在注释前前用 // 如果要自定义页面模板,需要在这里添加下面的代码(绿色字体),TemplateName 就是模板名称了。 我们在编辑页面的时候,通过旁边的下拉菜单选择模板的时候看到的就是这个名字。
    这两行是 HTML 结构标签 开始处理内容 调用 content-page.php,实际上可以将 content-page.php 里的内容全部复制过来替换掉这一行 调用评论 comments.php 内容处理结束
    封闭 id="content" 那个 div
    封闭 id="primary" 那个 div 可以在这里加上 那么页面就有了边栏了,不过就需要调整样式了(style.css)

    3.自定义页面模板的三种方式

    其实有4种,最后的C也可以像前面的A和B一样分

    A.简单页面模板 - 包含页面内容

    wordpress页面模板制作_wordpress模板制作视频教程_wordpress 模板制作

    如果我们只是想简单的在页面上添加一些其他的东西,比如放一张地图什么的,或者把新浪微博嵌入到页面中,同时保持页面上其他的东西不变,我们可以直接添加自己的随便挑插入代码或内容的适当位置。

    看了上面的评论,应该很容易找到你想放东西的地方吧?比如我的Buzz页面(页面评论被我关闭了,所以看不到评论和评论框),现在在

    中间插入新浪微博的小工具代码

    (新浪微博-->顶部工具栏上的账号-->我的工具)。

    B.简单页面模板 - 无页面内容

    很多时候,我们自定义的页面模板中并没有用到页面内容,也就是说,我们新建一个模板,然后在编辑页面内容的时候将内容留空。我们只希望它显示适用于该页面的自定义内容,例如 单页网站上的链接和购物通道页面。这样,您就可以将上面所有蓝色字体标记的代码替换为您自己的自定义内容。

    C.复杂的页面模板

    但是,许多主题对帖子和静态页面 (style.css) 的内容进行了样式设置。为了使自定义内容样式与站点上其他页面的样式保持一致wordpress页面模板制作,我们需要使用 -page.php 文件中的代码。复制里面的代码(不加注释),替换成上面的代码

    这行代码构成:

    
    

    wordpress模板制作视频教程_wordpress 模板制作_wordpress页面模板制作

    这两行是 HTML 结构标签 开始处理内容
    >

    这 3 行是内容标题,不想要就删除
    这 1 行是内容,不想要就删除 '' ) ); ?> 这 1 行是……我也不知道是什么东西,不想要就删除
    ', '' ); ?>
    这 3 行是那个“编辑”按钮,不想要就删除
    调用评论 comments.php 内容处理结束
    封闭 id="content" 那个 div
    封闭 id="primary" 那个 div 可以在这里加上 那么页面就有了边栏了,不过就需要调整样式了(style.css)

    然后我们可以将代码放入

    在这条线之前或之后,自行调整。 ©

    这篇文章发表在 页面上。固定链接:。转载请保留此信息及相关链接。

    文章来自互联网,侵权请联系删除,文章阐述观点来自文章出处,并不代表本站观点。 www.8001717.cn



X