WordPress主题的 HTML静态页面模板制作教程

上文说完 wordpress主题文件结构,接着来说对应 wordpress主题的文件静态页面模板制作。

虽然说制作 WordPress主题需要了解 PHP,但是不管怎样,你的博客页面都是一张静态网页,网页之所以能够在浏览器中显示出来,是因为最终传送给浏览器的是HTML、CSS和 JS等终端代码,最终由这些代码控制浏览器的显示结果。

所以制作 WordPress主题也不例外,它们都是网页,网页最基本的是HTML。要想制作 WordPress主题,首先得设计主题界面,简约、含蓄、厚重、奔放……,风格完全随你,接着再将你的设计理念转化为.html,并能在浏览器中正常显示出来就可以了。

WordPress主题制作

本文教程是不会教你如何去设计博客的界面的,也不会教你 HTML和 CSS的基础知识,而是设定你已经有 HTML和 CSS基础知识了,如果你不会 HTML,也完全不懂 CSS,后面要说的东西恐怕对你来说就像是听天书了。

下面将使用WordPress自带默认主题 twentysixteen为例,来讲解 WordPress主题的制作过程,其他模板的制作也类似。你可以在wordpress的安装包里找到该主题模板文件下载,我们将以此来练习如何将 HTML静态页面与 PHP代码结合制作 WordPress主题。

下载后,里面的文件都是可以用后面的软件直接双击打开的。(建议使用 Dreamweaver、UltraEdit、NotePad++、sublime_text等)

也许使用这个模板很多人会觉得简单,但这个用于我们的主题制作练习应该已经足够了。下面说说下载到的这些文件的用途:

首页:index.php

存档页:archive.php

页面:page.php

文章页:single.php

搜索页:search.html

侧边栏页:sidebar.php

图片页:image.php

头部文件:header.php

底部文件:footer.php

404页面:404.php

评论页面:comments.php

函数模板:functions.php

样式表:style.css

主题缩略图:screenshot.png

有了这些文件,只需要把这些文件按照我们的要求改成我们需要的模板文件就好了。从这里开始可能有些朋友会看不太懂了,不过没关系为了达成在开篇所提的两个目标,完全可以继续往下看下去,暂时忽略不太懂的地方,到最后你会发现相比最开始懵懂的你还是有很大收获的。

 

转载请注明链接地址:荐爱小站 » WordPress主题的 HTML静态页面模板制作教程

赞 (1) 赏 !

觉得文章有用就打赏一下吧,赠人玫瑰手有余香!

支付宝扫一扫打赏

微信扫一扫打赏