个性化Wordpress主题

其实修改和制作主题并没有想像中的那么复杂，当然你要作出一款惊世骇俗的Wordpress主题除外。

先说说修改Wordpress模版所需掌握的知识。Wordpress函数大部分都可以在WP官方Codex找到，也可以说是固定的，并不需深入学习，知道某句函数从哪开始与到哪结束就可以，已免修改主题时造成错误。关键是掌握DIV+CSS，网上教程很多，对于修改Wordpress模板粗略学一下原理就够了，也就是那么几句属性写法，因为我也还在学习，这里就不现丑教大家了，自己找个教程看看吧。

一套完整的WordPress模版应至少包括如下文件：

style.css : 样式表文件
index.php : 首页模板
archive.php : 文章归档/分类目录模板
404.php : 404 模板
comments.php : 留言/回复模板
footer.php : 底部模板
header.php : 顶部模板
sidebar.php : 侧栏模板
page.php : 页面模板
single.php : 文章页面模板
functions.php : 模板函数
search.php : 搜索结果模板

当然，有些主题可能不止这些文件，比如我的HotNews Pro主题模板文件有上百个，但以上文件是每套模板所必备的。

知道上面模板的作用可以让你知道当前页面应该修改哪个对应的模板。

下面是这篇的重点：工欲善其事，必先利其器！

可能很多人一想到网页制作工具，就会联想到＂网页三剑客＂中的Dreamweaver（简称DW）号称所见即所得，那是指当初流行用Table表格制作网页，而现如今是DIV+CSS时代了，所见即所得的优势再也没有了，这个DW几乎已无用武之地（个人认为）。另外国外原来常用的网页制作工具是Adobe GoLive，由于中文版推出较晚，才造成DW在国内流行，DIV+CSS网页制作大型软件也是首推Adobe GoLive，不过该软件目前已停止开发，可惜。今天推荐的工具并不是这两个售价高昂，体积庞大软件．修改和制作Wordpress主题根本无需使用什么专业软件，不过也不像某些人吹嘘的那样用系统自带的记事本就能写主题。

首先，你需要搭建一个本地PHP测试环境，方便修改模版，当然你也可以在Wordpress后台主题编辑页面中修改，临时用一下还可以，不适合修改较多的情况。如何搭建本地测试环境网上教程很多，这里就不详细说了，推荐使用Wamp，自己搜索一下。

必备工具软件：

■ 文本编辑器

EmEditor（收费软件）、EditPlus（收费软件）、Notepad++（免费）

前两款是收费软件，后者是免费的功能也非常不错，适合新手使用，绝不能用系统自带的记事本编辑模版文件，特别是中文模版，否则会造成模板借位，中文模版编码为：UTF-8 无BOM。

■ 火狐浏览器（Mozilla Firefox）

有的人会问，为什么要用火狐，系统自带的IE一样可以浏览网站？当然不是完全用火狐去浏览网站，而是利用火狐强大的扩展能力，为我们仙人指路。

当我们要修改某部分样式及结构时，都会直接打开Wordpress主题模板文件或在后台编辑主题，密密麻麻的代码，就是主题作者自己看了也会头晕眼花，所以会经常在关键部位加上一些注释，

php中注释一般为：

css中为：/** 　XXX **/

但一些注释可能只有作者自己知道是什么。因此，很难在打开的模板文件中找到准备修改的部分，这时我们就会用到火狐的扩展：Firebug，下载地址

IE浏览器也有类似的插件，但功能上无法与火狐的扩展相比，一些浏览器本身就集成了该功能比如Opera，功能貌似同样的强大。

具体操作方法

如果你已安装火狐并已添加Firebug扩展，可以继续往下看如何具体修改Wordpress主题。

■ 修改页面元素的文字大小

以修改HotNews Pro主题CMS布局，最新文章标题文字大小为例：

鼠标停在最新文章标题上，右键调出菜单选择“使用Firebug”查看元素（如图）

之后默认会在火狐浏览器底部调出Firebug窗口，左侧显示的是当前网页元素的HTML结构，右侧是当前元素选择器的样式属性和所在的文件及行数（如图），在style.css文件的第277行。

用上面介绍的文本编辑软件，打开主题style.css文件在277行找到：

#post h3 {
font-size: 13px;
font-weight: bold;
}

修改其中的数字13，为自己认为合适的大小即可。

如果当前元素选择器的样式中没有控制字体大小的 font-size: 13px; 属性，而是使用的全局字号设定，可以为其单独加上这个 font-size: 13px; 属性

看了上面的一个实例，是不是很简单，修改主题样式，关键是要找到所需修改元素选择器名称及样式属性的位置。

本人在修改主题模版时也用同样的方法，没有Firebug扩展的仙人指路，就是修改自己作的模板也决不是一件易事。

■ 如何确定某个网页元素（模块）的整段代码，便于调整位置。

以HotNews Pro主题导航菜单移动到LOGO下面为例：

首先，用上面的方法确定导航菜单最外层的选择器名称为：top

然后，用Notepad++文本编辑器，打开主题顶部模板header.php，搜索查找top位置，并用鼠标点击该选择器，会发现Notepad++已为我们明确标示了该段代码开始和结束的位置（如图）：

下面的就简单了，用同样的方法找到导航菜单下面元素最外层的选择器结束的位置将代码移动至此即可。

以上就是修改模板的基本方法和步骤，所谓的高手基本都这么折腾模版，如果你花一两天时间学一下DIV+CSS相信会更得心就手，

另一个比较不错的扩展是：Web Developer，这里就不介绍了，请自行研究。

这里要提醒大家：制作一款主题不容易，作者为此付出了无数的不眠日夜和汗水，请大家尊重作者的辛苦劳动，修改主题模版请保留作者版权链接，不要做让大家BS的无耻之人。

后记：这篇日志其实是去年年初写的，竟然忘记发布了，今天进后台清理才发现，重新修改发布，希望对你有所帮助。

个性化Wordpress主题相关推荐

wordpress 主题开发
https://www.cnblogs.com/welhzh/p/6937243.html wordpress 主题开发 https://yusi123.com/3205.html https://t ...
盘点18个免费的WordPress主题后台选项开发框架
https://yusi123.com/3205.html/3 13.Warp Framework Warp框架不仅支持WordPress和Joomla,还可以可扩展到其他的适用Web程序.使用War ...
CorePress-v4.5网站主题 WordPress主题
简介: CorePress是果核剥壳站长开发的一款WordPress主题,适合个人网站,极客网站,CMS等多种站点使用. 主题特色: 超小体积主题体积小于2m,代码精,功能全,颜值高,兼容好. 无框 ...
WordPress主题-果核剥壳站长开发CorePress v2.6
介绍: CorePress是果核剥壳站长开发的一款WordPress主题,适合个人网站,极客网站,CMS等多种站点使用. 主题特色: 无框架设计主题无前端界面库框架,加载更迅速. 响应式设计主题采 ...
几款优秀的国内wordpress主题和其作者网站推荐
这篇文章分享的是几款非常优秀的.值的花钱购买的收费wordpress中文主题.主题作者的网站用的就是各自开发的wordpress主题. 这些主题设计简洁.精美,功能齐全,兼容性好,响应式布局,各类小工 ...
2023年10个最适合外贸网站的WordPress主题推荐
搭建外贸wordpress网站的时候,大家最经常问起的一个问题是:选择什么样的wordpress主题才是最合适的.外贸面对的是国外市场以及国外客户,选择国外外贸WordPress主题可以带来以下好处: ...
博客要考虑的最佳WordPress主题
有太多的选择会瘫痪你做决定的能力.有太多的WordPress主题,但仅仅只需要一个并且它是要合适的.我们建立了数十个 WordPress 博客并安装了数百个主题.根据我们所有的经验,我们发现Newsp ...
wordpress主题黑镜主题 2.0下载卡片式主题原创正版设计素材教程网站模板
黑镜主题是一款卡片式多图流的wordpress模板,黑白灰简约风格,非常适合图片作品分享.站长素材下载类型网站使用. 响应式布局,完美匹配电脑.平板.和移动端.个性化后台菜单,纯手工原生代码,未集成任 ...
wordpress主题
1.创建wordpress主题:在themes文件下建立新主题black文件夹 2.在black文件夹中放入index.php和style.css文件, 其中index对style.css文件的引用 ...

个性化Wordpress主题

个性化Wordpress主题相关推荐

最新文章

热门文章