Wordpress模版如何修改

WooCommerce是一款非常灵活的电子商务WordPress插件，喜欢它的原因很多，除了漂亮的界面、人*化的后台、很少的数据表等等，还有一个重要的原因是修改功能比较方便，比如修改WooCommerce的默认模版。

WooCommerce提供两种修改模版的方法，一个是通过钩子函数，这也是WordPress中*常见的修改方式；另一个方法是“覆盖”模版。

覆盖这种方式在WordPress插件中也比较常见，中心思想是如果用户在主题目录下放置了一个和某插件模版文件名称相同的文件，某插件就会先调用这个文件。

WooCommerce也支持这种方式，下面具体介绍。

WooCommerce的默认模版文件位于插件的templates目录（/wp-content/plugins/woocommerce/templates）下，打开模版文件，可以发现里面有很多hooks（eg. do_action('woocommerce_before_main_content');

），所以修改模版应该遵循以下原则：

可以用hooks完成的修改，尽量使用hooks

针对某个文件有大量的修改，或者仅使用hooks无法完成修改，则使用模版覆盖的方式

通过这两种方式所做的修改都不会在升级时丢失。

例一：修改My Account页面

在当前主题目录下创建woocommerce目录

在woocommerce目录下再创建一个myaccount目录

把plugins/woocommerce/templates/myaccount/my-account.php文件拷贝到yourtheme/woocommerce/myaccount/目录下，对应关系如下

1

plugins/woocommerce/templates/myaccount/my-account.php

=>

1

yourtheme/woocommerce/myaccount/my-account.php

这时主题下的my-account.php拥有更高的优先级，会覆盖插件目录下的my-account.php，修改这个文件即可。

例二：覆盖所有模版

覆盖所有模版，需要把所有模版文件拷贝到主题中，并保留目录结构。也就是要把

1

plugins/woocommerce/templates/

这个目录下所有文件复制到

1

yourtheme/woocommerce/

其实修改和制作主题并没有想像中的那么复杂，当然你要作出一款惊世骇俗的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或者phpStudy，自己搜索一下。

必备工具软件：

■文本编辑器

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

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

■火狐浏览器（Mozilla Firefox）

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

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

php中注释一般为：<!-- ***-->

css中为：/** *****/

但一些注释可能只有作者自己知道是什么。因此，很难在打开的模板文件中找到准备修改的部分，这时我们就会用到火狐的扩展：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下面为例：

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

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

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

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

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

分享3种安装WordPress主题的方法：

通过WordPress后台安装主题

WordPress安装和使用非常方便，很重要一点就是它大部分功能可以在后台完成，主题安装就是其中一项

依次打开 WordPress后台–外观–主题–添加

然后就进入到了WordPress的主题库，你可以选择类别预览主题，也可以直接搜索自己想要的主题，大部分的WordPress主题都能在这里找到，并且都可以免费使用

找到需要安装的主题后，只要点击安装按钮即可安装主题到WordPress站点

*后，再点击启用按钮，更换到新主题

在WordPress后台安装主题是我们*推荐的方法，尤其是对于新手，操作简单而且不会出现问题

通过上传方式安装WordPress主题

虽然绝大部分主题都可以在后台直接安装，但是有时候也会有一些并未在WordPress主题中心上架的主题，比如一些付费主题、一些Github的开源主题等等，此时，我们就需要通过上传的方法来安装

上传安装和后台安装方法类似，同样是打开 WordPress后台–外观–主题–添加

不同的是这次你需要点击上传主题按钮

然后点击选择文件，把下载好的主题安装包上传到站点，并点击现在安装

如有类似下方的提升字样，则证明主题安装成功，你可以选择现在启用，或者稍后再启用

上传方式主题也是我们常用的主题安装方式之一，不过需要注意一点是一定要确保你是从可信的网站下载的主题安装包，比如从WordPress**的主题中心、主题**等，不要下载不明来源的主题

通过宝塔面板或FTP安装主题

上面介绍的两种方法都是在WordPress网站正常状态下的安装方式，有时候也会有一些特殊的情况，比如说当无法登陆WordPress后台时，我们该如何安装和更换主题，下面的方法就是采用操作文件和数据库的方式来为WordPress安装新的主题

首先上传主题安装包到网站的主题文件目录，可以使用宝塔面板或FTP软件来完成，下面我以宝塔面板做演示

打开宝塔后台，选择文件，进入到主题目录，路径一般为/***/***root/domain****/wp-content/themes，比如WP主题站就是/***/***root/themeforwp****/wp-content/themes

然后点击上传按钮，将主题安装包上传到这个目录

上传完成后解压安装包，得到主题文件夹

一般主题文件夹会和主题同名，比如我用的twentytwenty主题文件夹就是twentytwenty

这样我们的主题就算安装完成了，不过还处于没有启用的状态，此时，有两种选择，如果能登陆后台的话，你可以直接到主题管理中启用主题，如果你目前无法登陆WordPress后台的话，则可以修改数据库来启用主题。