wordpress最好用的主题

WordPress主题二次开发-使用子主题的详细说明

为什么要使用子主题对WordPress主题二次开发

WEB主题公园提供对付费主题的二次开发,我们所提供的二次开发分2种形式交付:

1.增加主题额外的内容,如增加模块,增加选项,增加功能等,以插件形式交付。2.修改现有主题的内容,如修改内页模板、修改头部、底部等,以子主题的形式交付。

插件是额外提供的内容,不需要修改到主题,而子主题也不需要直接修改主题的文件,这样做的原因是,WEB主题公园提供主题的长期更新和维护,当WordPress、woocommerce等升级时,不会让二次开发被更新的内容所覆盖掉而导致无法更新的情况发生。

我们知道,WordPress和woocommerce官方是更新的非常快的,如果得不到主题商的更新支持,可能在更新WordPress或者woocommerce之后无法使用,或者会出现各种不兼容的状态。

而如果为了保存自己二次开发的内容,而不更新WordPress、woocommerce,得不到最新版本,则会让网站变得很不安全。

WordPress子主题简介和原理

根据上文所述,WordPress也提供了子主题这样的方法给我们,让我们可以通过使用子主题进行修改WordPress主题,而不需要直接修改源码,而出现无法更新的内容。

WordPress子主题修改原理

子主题需要有一个父级主题存在才能启用,根据WordPress主题的主要文件,子主题存在,WordPress则会自动使用子主题的文件,而放弃使用父主题。

这样,我们先要修改父级主题的哪一个文件,则可以复制这个文件到子主题中,然后再修改这个文件,这样就可以达到修改的目的了。

当然,WordPress的主题核心文件才能够被识别替换,而大部分主题除了主要文件,还有较多其他的文件是无法进行修改的。

下面我们就以WEB主题公园云端系列框架为例,教大家如何进行修改。

实战修改-使用WordPress子主题修改父级主题的各个部分

1.概述,子主题能够被替换的文件(WordPress主题的核心文件)

WordPress子主题可覆盖的的核心文件列表如下:

主要文件

style.css -主样式表,WordPress主题信息存储(主题名称、版本、作者等)【子主题必须含有,注意这个文件不会覆盖,而是增加样式】screenshot.jpg 子主题封面【最好是有,方便分别】functions.php -主题功能文件,主题所需要使用的函数、方法、类均可在此文件输入【注意这个文件不会覆盖,而是增加函数,或者类】index.php – 主题首页文件header.php – 主题顶部文件footer.php -主题底部文件

列表

archive.php -所有归档列表(如果没有tag.php、category.php、author.php、date.php等页面,则会使用这个作为默认列表)tag.php -标签结果列表(点击一个标签,含有这个标签的所有文章列表)category.php- 分类目录列表author.php -作者文章列表date.php – 时间归档search – 搜索列表

页面/文章

page.php – WordPress页面(单页)single.php -文章页

其他

404.php -404状态页面woocommerce文件夹(若主题支持woocommerce,则会在主题找到woocommerce模板文件夹,woocommerce文件子主题全部能够覆盖掉)

以上文件,子主题若存在,WordPress则会直接使用子主题的文件,而放弃使用父级主题,因此,如果你需要修改父主题的哪一个文件,则直接找到父级主题的文件,复制粘贴到子主题中进行修改即可。

ps.注意,子主题中,style.css 和functions.php 不是覆盖父级主题,而是增加:

style.css 输入css源码,在用WordPress钩子输出到head ,增加的css样式则会对网站产生影响functions.php,输入函数、钩子、类,直接会对网站产生影响,但不影响父级主题的函数、钩子和类,这里需要注意,不要输入和父级主题相同的函数名、类名,否则会出现函数名冲突报错。

2.实例空子主题下载,利用此空子主题制作你自己的子主题

子主题(空)下载:子主题空模板下载

子主题空模板说明:

style.css

按照上面的说明进行修改成你自己的,即可正确的制作成你自己的子主题。

这个css文件是空的,除了这一段注释之外,没有任何css样式,在修改之后,你需要增加一些样式进去的话,直接增加是无效的,因为这个css样式没有在网站头部输出。

因此我们增加了一个函数文件 functions.php

这个里面包含一个主题挂载css的函数和钩子:

因此如果你直接使用我们所提供的这个子主题进行的话,style.css的样式会对网站直接产生作用。

3.使用WordPress子主题修改简述

本文实战修改的第一部分说明了所有可被直接替换的内容以及对应的文件,因此如果你想要修改任意上文所述的文件,则是直接复制父级主题的文件到子主题,然后直接修改即可。

还有很多的内容,直接替换是无法进行修改的,下面我们就来说一说,哪一些内容无法被替换,应该如何进行。

不可被替换的原因

不可被替换的文件,不是WordPress主题的核心文件,而是主题开发者增加WordPress主题的功能而写的一些文件,这些文件通常在functions.php中 使用php关联函数被关联了。

也就是说,实际上这些文件的代码都是可以放入functions.php的,为了方便维护和管理,分成了文件和文件夹,之后主题作者可以轻松的找到这些内容,而不是将所有的功能代码都放入functions.php中,这样难以维护。

而前文所说,functions.PHP是不可被替换的,而只能增加内容,因此,除了WordPress主题的核心文件,其他文件不可被替换。

1.额外的页面模板- page(?).php

WordPress提供了页面模板,你可以制作多个页面模板在后台进行选择,任意文件名称,带有如下php注释的,即可被识别为页面模板:

这个模板在后台显示:

php注释 Template Name: 可以让WordPress识别,

但是子主题中,不要直接覆盖,你可以复制此文件,修改Template Name后面的名称,制作成一个新的页面模板,在后台选择即可。

2.WordPress的小工具(widget)

WordPress的小工具,在子主题中是无法直接被替换的(上文已说明原因,此处不再重复)

因此,如果我们想要修改某一个主题提供的小工具,我们只能新建一个小工具,而非替换掉他。

新建小工具,首先你需要建立一个文件夹(分类好你的各种功能文件,养成良好习惯)widget

然后将你的父级主题的widget文件夹中对应的小工具文件复制到子主题的文件夹(或者其他文件夹,一般来说,widget就是小工具的意思)

然后打开这个文件,修改这个小工具的类名称、id、小工具名称和描述

此处 case_show 为类名称,上图所有case_show都需要修改(小工具注册,是使用类进行注册的)

$name变量后面是小工具的名称

description 后面 是小工具描述(填写描述请用单引号包裹)

最底部的注册函数类名称也需要修改,这样我们就复制了一个和父级主题一样的小工具,但这时候我们在后台还无法看到这个小工具,

因为还需要在functions.php中进行关联,打开子主题的functions.php

输入如下代码

include_once(“widget/case_show.php”);

这样,widget/case_show.php就被包含在functions.php里面了,这样小工具就能被后台识别出来了,现在可以随意进行修改,这个新增的小工具就可以修改为你想要的了。

3.其他的功能

其他的功能文件和小工具类似,你可以用同样的方法,比如seo的类、函数和钩子,你可以新建一个文件夹 seo 再放入文件,关联到functions.php内即可直接使用。

除了WordPress主题的核心文件之外,其余所有的功能、设置和函数,都是通过WordPress钩子实现的,因此,你可以放入任意你想要的内容,通过WordPress钩子去实现。

4.需要注意子主题的资源路径

我们知道获取到WordPress主题模板的路径是get_bloginfo(‘template_url’) 函数,如果你在子主题使用这个函数,他依然会调用父级主题的资源。

子主题的模板路径是get_stylesheet_directory_uri(),使用这个函数,才能调用子主题的资源,不要弄混淆了。

ps.这里是模板路径,一般调用静态资源,包含图片(jpg/png/gif)、视频(MP4)、脚本(js)、样式表(css),还有zip、pdf等等静态资源,而WordPress提供的get_template_part(),则没有此区别,在子主题中则是直接获取子主题的内容。

到此,使用WordPress子主题进行开发的详细说明就到这里了,如果你对于WordPress或者php有一定的基础,相信这篇文章非常清晰的说明了如何使用子主题进行WordPress的二次开发和修改的。

如果你对于子主题有什么好的见解和不懂得地方,也可以在此文章下和我们一起讨论。

盘点:2020年适合电商自建站的10个免费WordPress主题模板

2020年10个较佳的免费WordPress主题

1、Twenty Seventeen

Twenty Seventeen仍然受到WordPress社区的欢迎,是迄今为止广为流行的默认主题。Twenty Seventeen提供了一种简单的呈现方式,同时还允许你通过标题图片实现一些基本的品牌塑造。

下载总次数:4,928,891

评分:90/100(106评论)

性能等级:B 87

页面大小:507.1 KB

Requests:44

设计:???

自定义:??

2、Astra

Astra是当今广受欢迎的WordPress主题之一,也是增长较快的WordPress主题之一。

Astra的与众不同之处在于,它是一个以性能为导向的极简主题,尽管使用了功能非常强大的包装器,但它只能提供非常基本的功能。你可以选择所需的模块,然后相应地激活或停用它们。

Astra的另一个优势是,它与市场上广受欢迎的页面构建器(Elementor、Beaver Builder、Brazy)兼容。还有可供每个构建器使用的启动站点。这意味着你可以使用Astra快速建立一个网站,然后还可以对其进行自定义以100%满足你的需求。但是,在你将主题网站导入入门网站之前,该主题的现成设计并不多。

下载总次数:2,359,825

评分:100/100(3184评论)

性能等级:B 89

页面大小:172.3 KB

Requests:26

设计:???

自定义:?????

3、OceanWP

OceanWP在许多方面与Astra相似,比如:主题提供功能的方式相似,对极简主义和性能的关注也是相似的。

你可以通过选择所需的功能使用此主题,然后对网站的各个方面进行微调。OceanWP的自定义程度也与Astra相似。

除此之外,OceanWP在涉及到与电子商务相关的功能和设置时表现非常好。如果你打算开设一家WooCommerce在线商店,可以考虑一下OceanWP。该主题还与页面构建器插件兼容。

下载总次数:2,111,506

评分:98/100(3090评论)

性能等级:B 87

页面大小:395.3 KB

Requests:44

设计:???

自定义:?????

4、Storefront

这是WooCommerce的官方主题。它具有你可能需要的所有基本功能和自定义功能,但仅此而已。

该主题设计整洁,可与页面构建器很好地配合。此外,该主题是WooCommerce的官方主题,你可以放心使用,不会出现任何异常情况。

但是,如果要使用Storefront建立在线商店,那么可能还需要创建一个子主题进行自定义。

下载总次数:3,772,401

评分:90/100(110评论)

性能等级:B 87

页面大小:448 KB

Requests:43

设计:???

自定义:???

5、GeneratePress

这是另一个WordPress主题,原理上与Astra和OceanWP类似。同样,你将获得一个扩展的自定义界面,其中包含许多刻度盘和旋钮。你可以调整排版、颜色、布局和其他细节。

但是,此主题更倾向于在专业版中提供其功能。与Astra或OceanWP相比,免费版本中的可用功能稍有逊色。

下载总次数:2,365,324

评分:100/100(938评论)

性能等级:B 88

页面大小:338.4 KB

Requests:42

设计:???

自定义:????

6、Sydney

Sydney一直是WordPress.org主题目录受欢迎标签中的中流砥柱。该WordPress主题提供了定期更新的现代设计,这也是Elementor团队正式推荐的主题之一。

下载总次数:2,449,599

评分:98/100(275评论)

性能等级:B 87

页面大小:599.2 KB

Requests:37

设计:????

自定义:????

7、ColorMag

ColorMag提供了几种不同的布局和配置,每个人都可以找到适合自己细分市场的东西。设计本身经过了优化,可以处理大量内容。但是,如果你的网站没有产生太多的内容,可以考虑其他主题。

在功能方面,该主题与WooCommerce兼容,提供良好的颜色选择和排版,拥有15个以上的小部件区域,并提供了其他有趣的功能。

下载总次数:2,073,598

评分:98/100(854评论)

性能等级:B 88

页面大小:311.4 KB

Requests:35

设计:???

自定义:???

8、Hestia

几年来,Hestia主题一直是WordPress.org上流行的主题,并且每天都有稳定的新增下载量。

该主题为用户提供了一定程度的简易性,这是在市场上的其他免费主题中很难找到。与WordPress Customizer完全集成,你还可以选择一些入门网站,这些网站涵盖了不同的利基市场和风格。

Hestia可以与Elementor、Beaver Builder、Brizy、Divi Builder和WordPress中的新块编辑器一起使用。这个主题非常适合在线商店、商业网站、应用程序、代理商。

下载总次数:1,957,627

评分:96/100(300评论)

性能等级:B 86

页面大小:403.8 KB

Requests:40

设计:????

自定义:????

9、OnePress

OnePress在平面设计原理上进行了全新的现代化改进。它提供了良好的排版、良好的空白使用,并确保你的内容受到应有的关注。

顾名思义,这是一个“单页”主题。虽然你可以根据需要创建更多的子页面,但网站结构的核心将围绕单个内容丰富的主页展开。

该设计完全响应,有自定义内容块可供选择,你可以在WordPress Customizer中获得高级主题自定义选项。

下载总次数:1,317,819

评分:94/100(135评论)

性能等级:B 87

页面大小:451.5 KB

Requests:40

设计:????

自定义:????

10、Neve

Neve是一个很好的WordPress主题,可使网站快速联机,只需单击几次即可导入。Neve的设计是现代的,针对移动设备进行了优化,可快速加载并且不会占用网络服务器的大量资源。它还提供20多个免费的入门网站,如果你决定升级到专业版,则还会有更多免费的入门网站。

下载总次数:530,990

评分:98/100(210评论)

性能等级:B 90

页面大小:125 KB

Requests:22

设计:??????

自定义:????

如何挑选理想的免费WordPress主题?

提示:你可以将范围缩小到3个。

我们已经介绍了10个广受欢迎的免费WordPress主题,每个主题都提供了一些很棒的功能、设计和自定义选项。那么,如何为你的电商自建站选择合适的主题呢?

这取决于你的需求和用户类型,可分为3种情况:

场景A

如果你想随心所欲地调整、自定义主题功能的每个小细节,可以选择Astra。这个主题可以满足你的DIY梦想,并为你提供所有选择。

场景B

如果你想要一个容易上手,又提供良好自定义功能和现成设计的主题(只需单击几下即可安装),则可以使用Neve。

此WordPress主题涵盖了所有受欢迎的利基领域,例如电子商务、商业、摄影、代理商、博客、美食、生活方式等。

场景C

如果你只是想建立电商自建站,又不太在乎设计的多样性,可以使用默认的WordPress主题Twenty Seventeen。对于注重清晰和简约设计的用户而言,这仍然是一个不错的解决方案。

(来源:跨境喵的碎碎念)

以上内容属作者个人观点,不代表雨果网立场!本文经原作者独家授权供稿,转载需经雨果网授权同意。

上雨果网搜索“跨境资料库”,领取欧美/东南亚各国市场商机、各大平台热销品报告、跨境电商营销白皮书!