wordpress主题制作之《主题文件层次结构简介》

 前言

上文介绍到如何制作一个简单的主题,这篇文章教大家如何组织文件结构和为什么组织。在项目的过程中,其实文件组织也是一个技术活,文件少随便你怎么组织;但是一旦文件多了,你就要多注意文件的组织形式,否则后期维护会头大的,信我!好了开始今天的正文。

正文如下

今天拿我们将要使用的主题来说吧!

%title插图%num%title插图%num

1. 对于上图主题总体可拆分为几个部分

%title插图%num%title插图%num

header部分:是网站的头部 ,对应效果图中的导航栏及以上的部分(包含导航栏);

main部分: 是网站的主要内容区域,对应效果图中的站长推荐所在区域;

aside部分:对应的是侧边栏区域,对应效果图中的文章排行榜和猜你喜欢所在区域;

footer部分: 对应的是网站底部的区域, 对应效果图中的黑色的区域。

注:可能大家在效果图中也看到了,还有面包屑导航区域和友情链接区域。其实这两个区域我们可以看做网站主体内容部分。

2. 为什么要分这几块区域呢?

目前我已经会两种cms模板的编写了,一种是mipcms, 一种是wordpress(半吊子)。对于mipcms模板来说其实也可以分这么几块,个人觉得应该大多数模板都应该是这样设计吧!因为这样的设计更符合模块化的原则,使用起来更加灵活(个人见解)

我们试想一个场景,我们制作一个模板,用html写的页面每个页面应该都是独立的吧!不知道大家有没有发现,其实我们有时候写了很多费代码,例如网站的头部区域和底部区域,很多页面其实都可以共用的,但是我们还是每次都写。这样写有一个最大的弊端便是:如果头部区域改了一点东西,每个页面的头部都可能需要更改。

如果将一个html拆分成: header.html/footer.html/main.html/aside.html 四个页面,然后index.html 页面引入这四个页面,采用这种方式相对而言可以减少一个页面改动,多个页面要同时改动的情况。

其实这也是这些模板为什么这么设计的原因。

3. wordpress模板文件目录结构

%title插图%num%title插图%num

上图是我的个人博客: ligo100.cn使用的主题文件组织形式,个人对这样的文件组织形式还是比较认同的。下面我们就来拆分解读一下。

component: 组件模块,这个模块主要放置一些通过的模块的,例如上文中的面包屑和友情链接个人觉得就比较适合放在这里。

geekframe: 这是这个主题自己写的一些通用方法和使用的第三方库。其实我们也可以有自己的myframe。

static: 静态文件存储目录,例如:css font images js等都可放这里比较好。

widgets: 这个区域我还没有发现有何妙用,但是感觉上也是一个组件模块,但是比component高级点。

404.php: 404页面不多说了。

category.php: 分类目录页

  1. category-{slug}.php - 如果分类的缩略名为news,WordPress将会查找category-news.php(WordPress 2.9及以上版本支持)
  2. category-{id}.php -如果分类ID为6,WordPress将会查找category-6.php

comments.php: 评论页面

footer.php: 模板公共底部

functions.php:文件的行为类似于 WordPress 插件,为 WordPress 网站添加一些特性和功能。您可以使用它来调用 WordPress 函数或定义自己的函数

header.php: 模板公共头文件

index.php:模板首页文件

page-(*).php: 模板自定义文件

  1. 自定义模板 - 在WordPress后台创建页面的地方,右侧边栏可以选择页面的自定义模板
  2. page-{slug}.php - 如果页面的缩略名是news,WordPress将会查找 page-news.php(WordPress 2.9及以上版本支持)
  3. page-{id}.php - 如果页面ID是6,WordPress将会查找page-6.php

screenshot.png:主题缩略图

search.php: 主题搜索页

searchform.php: 主题搜索表单

single.php: 文章页

  1. single-{post_type}.php - 如果文章类型是videos(即视频),WordPress就会去查找single-videos.php(WordPress 3.0及以上版本支持)
  2. single.php

style.css: 全局样式文件

tag.php: 标签页文件

 

最后

文件目录解读完毕,对于模板开发其实最好的方式是多看官方给的模板示例。

自3.0版以来,每个版本的WordPress都打包了默认主题(并以发布它们的年份命名),默认主题是研究主题构建方式的最佳方式。这是因为它们的设计考虑了广泛的用途,并且完全遵守WordPress编码标准。您可以下载和研究它们的主题文件,并在学习如何开发自己的主题的同时保留它们作为示例以供参考:

Twenty Seventeen

Twenty Sixteen (only packaged in WordPress 4.8)

Twenty Fifteen

Twenty Fourteen

Twenty Thirteen

Twenty Twelve

Twenty Eleven

Twenty Ten

Underscores 主题

与WP默认主题不同,_s(或Underscores)主题是针对开发人员而非最终用户的。它旨在成为入门主题  ,您可以以此为基础来加快开发速度。它具有许多功能:

注释完善的HTML5模板,包括错误模板。

自定义页眉实现示例inc/custom-header.php。

自定义模板标签inc/template-tags可保持模板井井有条并防止代码重复。

提供了许多改善键盘导航的脚本,js/keyboard-image-navigation.js以及中的小屏幕导航js/navigation.js。

五个示例CSS布局  /layouts 以及用于设计的入门CSS。

GPL许可代码。

上面的功能使Underscores成为想要创建自己主题的开发人员的绝佳主题。即使您删除了这些额外功能,剩下的基础仍然是精心编写的主题的一个很好的示例,该主题的开发考虑了标准和最佳实践。

版权声明:
作者:小何
链接:https://ligo100.cn/qianduanjishu/ui/115.html
来源:小何博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录