您已经运行wordpress网站一段时间了,它一直在做您需要做的事情。但是现在,您决定需要对其进行自定义。
塔什库尔干塔吉克网站制作公司哪家好,找成都创新互联!从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作,到程序开发,运营维护。成都创新互联公司2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。
或者,您可能正在使用从主题目录下载的主题或已购买的主题创建站点,但您意识到它不能完全按照您的需要运行。
那你怎么办呢?
您可以找到一个插件来提供您需要的自定义或切换到新主题。但是,如果您对当前的主题感到满意并且找不到可以添加您需要的功能的插件怎么办?
答:您需要自定义您的主题。最佳实践说:您通过(WordPress)子主题来做到这一点。
在本教程中,我们将更多地讨论子主题是什么以及它是如何工作的。我们还将带您完成从头开始创建主题的过程,并向您展示如何将修改后的主题变成子主题。
修改现有主题是开始WordPress开发的好方法。更改的结果将很容易看到和理解。但是,直接对活动主题进行编辑可能会导致问题,因为即使是一个小错误也可能导致主题无法使用。每当主题更新时,您所做的所有更改也将丢失。
然而,有一种方法可以避免这些问题,那就是创建“子主题”。子主题的工作方式与任何其他WordPress主题大致相同,不同之处在于它使用现有主题作为基础(或“父”)。您对子主题所做的更改将反映在您的站点上,而无需直接更改父主题。
自定义主题有风险。如果您在第三方主题(例如您从市场上购买的主题)中编辑代码,那么当您下次更新主题时,您所做的所有更改都将丢失。这意味着您的网站不仅会恢复原状,而且您的所有工作都被浪费了。
可以通过三种方式自定义您的WordPress网站:
让我们依次来看看其中的每一个。
如果您的网站运行自定义WordPress主题,这意味着它是专门为您的网站开发的,您可以选择安全地编辑它,因为下次更新主题时不会丢失您的自定义设置。
相反,如果您或您的开发人员将来对主题进行更改,您将编辑的是主题的自定义版本,而不是更改之前的原始版本。
这并不意味着编辑您的主题并非没有风险。如果您没有编写主题的经验,创建子主题可能仍然更安全(我们稍后会看到如何)。这是我做的事情:我有一个基本主题,我在我所有的网站上使用,具有标准布局、钩子和函数,然后我在每个网站上使用子主题对其进行自定义。
如果您直接编辑主题,请确保保留原始主题的备份,不要在实时站点中编辑主题(改用开发或临时站点),并使用版本控制来跟踪您的更改。
如果您使用的是第三方主题,则永远不要直接编辑它。相反,使用插件或创建子主题。
自定义WordPress主题的第二个选项是安装或编写插件。
如果您要进行的自定义是功能性的而不是与设计相关的,那么插件是一种更合适的方法。所以如果你想添加额外的代码,最好还是创建一个插件。
插件不必很大或很复杂:如果您需要向主题中的functions.php文件添加额外的代码,请创建一个简单的插件来向您的站点添加几行代码。一个很好的例子是注册自定义文章类型。
将代码添加到主题的functions.php可能很诱人,但添加帖子类型是对网站的功能更改,而不是设计更改。如果您以后要切换主题,您不会希望丢失这些帖子类型以及您使用它们创建的所有帖子。这就是为什么您应该安装或创建插件的原因。
有时您可以找到一个现有的插件来满足您的需求,但有时您可能需要自己编写插件代码。
WordPress插件库
如果对是否应该创建插件或自定义主题(或子主题)有疑问,请问自己:如果我想在将来更改网站的设计并安装新的WordPress主题,我是否希望保留此更改? 如果答案是肯定的,这意味着更改是功能性的而不是美学的,它应该包含在插件中。
自定义WordPress主题的第三个选项是创建子主题。
以下是您使用子主题的一些场景:
因此,子主题是一种向您的网站添加自定义内容的有效且安全的方式。因此,让我们更深入地了解它们。
那么,WordPress中的子主题究竟是什么?它是如何工作的?
子主题是与另一个主题协同工作的主题,称为父主题。
它包含一些特定的说明来告诉WordPress这是一个子主题以及父主题是什么。WordPress 然后在大多数情况下使用来自父主题的代码,但会使用来自子主题的代码(如有必要)覆盖它。
在许多方面,子主题的功能就像一个“正常”的WordPress主题。它以相同的方式安装、启用和配置。子主题的独特之处在于它依赖于另一个主题来确定其大部分内容。另一个主题被称为“父主题”。
WordPress将始终优先考虑子主题的设置。因此,你能想到的子主题为坐在前面的家长。如果子主题中的设置覆盖了父主题中的匹配设置,则子主题优先。这使您可以仅更改要更改的主题部分,其他所有内容都由现有父级处理。
例如,大多数父主题包含定义不同标题文本级别的样式,例如h1、h2、h3、h4等。假设父主题将h1字体大小定义为20px,但子主题指定与32px相同的标题。在这种情况下,WordPress会将后一种样式应用于所有h1文本。但是,如果同一个子主题不包含h2、h3 和 h4 的特殊样式说明,则仍将应用父主题定义的样式。
如果您可以直接编辑主题,您可能想知道为什么子主题值得麻烦。使用子主题实际上有很多优点,因为它:
每个WordPress子主题必须至少有两个文件:样式表和函数文件。样式表将在顶部包含注释掉的文本,告诉WordPress这是一个子主题以及父主题是什么。函数文件将包含一个函数,该函数将来自父主题的样式表排入队列。
注意:您可能会遇到一些指南,告诉您从子主题的样式表调用父主题样式表。这不再是正确的方法,您应该在函数文件中使用排队。我很快就会告诉你如何做到这一点。
你的子主题并不必须 包含的任何其他文件。与父主题不同,如果主题中没有更多特定文件,它不需要index.php文件作为后备。这是因为如果子主题中不存在模板文件,WordPress将使用父主题中的文件。
因此,根据您希望子主题执行的操作,您可以向样式表、函数文件中添加额外的代码,或者在子主题中创建额外的文件以覆盖父主题。这些可能包括以下一项或多项:
但是,如果您确实添加了额外的文件和功能,WordPress怎么知道该使用哪个呢?来自父主题的那些还是来自子主题的那些?这就是我们接下来要讲的。
WordPress在您的站点上显示内容时从您的主题中选择模板文件的方式是参考模板层次结构。
WordPress模板层次结构
WordPress使用此层次结构来处理主题中的模板文件,并在显示给定类型的内容时找到要使用的正确模板文件。它将从顶部开始(在上图中的左侧)并依次查找给定内容类型的每个文件。当它找到将显示该内容的文件时,它将使用它。
假设您的主题有一个archive.php文件和一个category.php文件,但没有tag.php文件。显示类别档案时,WordPress将使用category.php,因为它更特定于内容类型。当显示标签档案时,它将使用archive.php代替。
如果WordPress没有为给定的内容类型找到模板文件,它会默认为包罗万象的index.php文件,这就是为什么每个独立主题(即不是子主题)都必须有一个index.php文件的原因.
这同样适用于单个文章和页面。假设您的主题有一个single.php文件,它是任何文章类型(包括页面和自定义帖子类型)的单个帖子的统称。它还有一个page.php文件。当显示单个页面时,它将使用page.php。显示文章时,它将使用singular.php。如果您注册自定义文章类型并且不为该帖子类型添加模板文件,它将再次使用singular.php。
当您使用子主题时,WordPress仍然使用模板层次结构来决定在您的站点上输出内容时使用哪个文件。它查看父主题和子主题中的文件并使用它遇到的第一个文件。
所以想象你的子主题有singular.php和post.php,你的父主题有page.php和index.php。输出单个文章时,WordPress将使用子主题中的post.php。输出页面时,它将使用父主题中的page.php。当输出自定义帖子类型的单个帖子时,它将使用来自子主题的single.php。
但是,如果您的子主题和父主题都有相同文件的实例怎么办?
假设您将page.php文件添加到上一个示例中的子主题。因为该主题位于子主题中,所以它会覆盖父主题中的相同文件。因此,当显示单个页面时,WordPress将使用来自子主题的新page.php文件。
这就是为什么创建子主题可以让您自定义父主题。如果您将父主题中的模板文件副本添加到子主题,然后对其进行编辑以包含您要进行的自定义,WordPress将使用这个新模板文件,而不是来自父主题的模板文件。这意味着您的自定义将在显示内容时使用,而无需您编辑父主题。好的!
如果您不想对主题中的模板文件进行自定义,而是对功能进行自定义,该怎么办?
你也可以这样做。首先,您需要让自己满意,这样做的正确方法是通过子主题而不是插件。一个示例可能是您想要编辑父主题中已有的函数,例如,在页脚中输出版权页的函数。
然后将新函数添加到子主题中的函数文件,或添加到从函数文件调用的包含文件。
为确保您的新函数覆盖父主题的功能,您需要了解如何覆盖函数。有三种方法可以做到这一点:
我们将在本文稍后介绍您如何执行所有这些操作。但首先,让我们看一下您何时会使用和不会使用子主题的场景。
您现在知道什么是子主题以及如何使用它们来覆盖父主题中的模板文件或函数。
简要回顾一下,如果您在网站上运行主题并且想要执行以下一项或多项操作,则应使用子主题:
一些优点包括:
当您不使用子主题时呢?
有时您不会使用子主题,而应该使用不同的方法来自定义您的网站。这些是:
一些缺点包括:
现在您知道何时(以及何时不)使用子主题,是时候开始工作并学习如何在WordPress中创建子主题了。
现在您知道为什么应该使用子主题,现在是创建一个的时候了。这个过程有点复杂,但我们将引导您完成每一步。
在创建子主题之前,您需要做一些准备工作。首先,在执行任何其他操作之前创建站点备份非常重要。这样,您就可以处理您的主题,而不必担心破坏您的网站或丢失其任何内容。事实上,最好使用临时站点来编辑和测试您的主题,而不是您的实时站点。
我们还建议您在开始之前熟悉CSS和PHP。虽然您不需要任何使用这些语言创建子主题的经验,但它肯定有助于编辑主题的过程。花时间了解这些关键语言的基础知识将使您有一个良好的开端。
在WordPress中设置一个基本的子主题涉及创建两个文件:样式表和函数文件。
Step 1:为您的子主题创建一个文件夹
您需要的第一件事是为您的孩子主题生活的地方。但是,在此之前,您需要一种直接处理站点文件的方法。这通常意味着使用像FileZilla这样的SFTP解决方案来访问您的站点。
一旦你安装和设置FileZilla中,您可以使用登录你的虚拟主机提供的凭据。完成后,您将看到整个站点组织成一系列文件夹和文件。从这里,您需要导航到/wp-content/themes/,这是所有主题所在的位置。
右键单击此文件夹内的任意位置,然后选择创建目录。此文件夹将保存您的子主题,因此我们建议您以其父主题命名。例如,一个二〇一七的子主题可能被称为twentyseventeen-child。
保存文件夹后,就可以开始向子主题添加内容了。
Step 2:创建样式表
层叠样式表 (CSS)是一种定义HTML内容外观的语言。主题的CSS文件控制您网站上的文本、图像、超链接和大多数其他内容的外观。当我们谈论更改主题的外观时,我们通常谈论的是编辑其CSS。
这听起来可能很复杂,而且CSS确实为您提供了很多自定义选项。但是,现在您无需担心具体细节。您需要做的就是创建CSS文件本身。您将在刚刚创建的子主题文件夹中执行此操作。只需打开文件夹,右键单击其中的任意位置,然后选择创建新文件。
当您被要求命名文件时,将其命名为style.css,注意使用确切的大小写和拼写(因为WordPress否则将无法识别该文件)。
该文件自然是空的,因此您需要为其提供一些内容。要开始编辑文件,请右键单击它并选择查看/编辑。这将在您的默认文本编辑程序中打开文件,例如TextEdit或记事本。
在创建文件之前,您需要创建一个文件夹来保存您的主题。这在WordPress安装的wp-content/themes文件中。
在新主题的文件夹中,创建一个名为style.css的文件。添加以下内容:
/* Theme Name: My Child Theme. Child for Twenty Nineteen. Theme URI: https://rachelmccollin.com Description: Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme. Author: Rachel McCollin Textdomain: mccollin Author URI: https://rachelmccollin.com/ Template: twentynineteen Version: 1.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html */
这段文字被注释掉了。它不是在您的网站上运行任何东西或提供任何功能的代码。相反,它会告诉WordPress主题。每个主题中都需要这样的文本,否则WordPress无法将其识别为主题。
让我们通过每一行来确定它们的作用:
子主题最重要的一行是Template: 行。没有这个,主题将不能作为子主题工作。只有子主题将包含此行。
将此添加到您主题的样式表中,对其进行编辑以添加您自己的详细信息而不是我的。您需要编辑Template: 行以添加存储现有主题的文件夹,因为这将是您的父主题。
现在保存文件。如果您现在查看站点中的主题详细信息屏幕,您会看到显示的所有内容:
WordPress中没有截图的主题页面
这看起来不太好,因为没有截屏。这是一张图像,可以让您了解主题的外观。除非您的主题看起来与父主题非常不同,否则只需将screenshot.png文件从您的父主题复制到您的子主题。
带有屏幕截图的WordPress中的主题页面
Step 3:引用父主题
到目前为止,您的主题已经有了一个主页和一些基本信息。现在,是时候给它一些功能了。您可以通过创建一个函数文件来做到这一点。除其他外,此文件决定了主题的独特功能。这是一个功能强大的工具,用途广泛,但现在,您只需要创建它。
下一步是将函数文件添加到您的子主题。您需要它,以便您可以将来自父主题的样式表排入队列。没有它,您的网站将根本没有样式,看起来像这样:
我们的主页没有CSS
不好,我相信你会同意的!因此,让我们添加样式以使其看起来应该如此。
在您的子主题文件夹中,添加一个名为functions.php的文件。打开它并添加以下代码:
它使用
wp_enqueue_style()
函数将来自父主题的样式表排入队列,get_template_directory_uri()
函数定位该文件的存储位置。该函数位于我创建的一个名为wbolt_parent_styles()
的函数中,与wp_enqueue_scripts
钩子挂钩。您可能想知道为什么它使用名为
wp_enqueue_scripts
而不是的函数wp_enqueue_styles
。这是因为wp_enqueue_scripts
用于脚本和样式,并且没有像wp_enqueue_styles
.随意编辑我的代码,将您自己的前缀添加到您的函数名称中。我使用“childtheme”作为前缀,以确保我的函数不会与来自父主题或任何插件的任何其他函数发生冲突。
现在保存您的文件。
Step 4:启用子主题
您的子主题现在可以使用了,所以您需要做的就是启用它。最简单的方法是通过WordPress管理界面。只需登录,然后访问外观>主题。您应该已经在此处看到您的子主题:
此时,您只需要单击“启用”即可启用您的主题。当然,此时您可能不会注意到您的站点有任何差异。这是因为您实际上还没有添加任何自定义。子主题仍然是一张白纸,等着你把它变成特别的东西。
正如我们之前提到的,您现在应该花一些时间来了解有关CSS和PHP的更多信息。这将使您能够使用内置主题编辑器通过子主题向您的站点添加新样式和功能。如果你想扩展您的主题的功能,它也是一个聪明的想法,详细了解了functions.php的文件。只需稍加努力,您就可以使用全新的子主题对 WordPress 网站进行任何您想要的更改!
如何激活WordPress子主题
一旦您的子主题准备就绪,您就需要激活它。如果您担心激活子主题会关闭父主题,请不要担心:WordPress会知道使用父主题中的文件,除非您向子主题添加新文件来覆盖它们。到目前为止,您还没有向子主题添加任何额外的文件或功能,因此您的站点的工作方式与激活父主题时完全相同。
请记住:首先在您的开发或临时站点上执行此操作。在您测试之前,不要在您的实时站点上激活您的子主题。
在WordPress管理中,转到外观 > 主题。您会发现您的子主题列在您网站上安装的主题中。
将鼠标悬停在主题上,然后单击“激活” 按钮。这将激活您的子主题。现在,当您访问您的实时站点时,它看起来和以前一样:
网站首页
它看起来相同,因为您尚未添加任何自定义。但是你现在有一个工作子主题。做得好!
如何在WordPress中自定义子主题
现在您的WordPress网站有了一个可用的子主题,是时候添加您的自定义设置了。在这里,我将向您展示如何添加模板文件以覆盖父主题上的模板文件、如何为子主题添加样式以及如何添加新功能。
让我们从模板文件开始。
如何将模板文件添加到您的WordPress子主题
我们已经了解了WordPress在您的网站上显示内容时如何选择要使用的模板文件。有两件事要记住:
要添加自定义,我发现首先从父主题制作相关文件的副本,将其添加到子主题,然后编辑它更容易。
这适用于您的子主题中的文件是否与父主题中的命名文件相同,或者它是用于显示不同内容类型的新文件,还是层次结构中更高的文件。
因此,如果我将新版本的page.php添加到我的子主题中,这将覆盖我父主题中的page.php,我会将page.php从我的父主题复制到我的子主题,然后对其进行编辑。确保复制文件:不要移动它,因为您不想对父主题进行任何更改。
例如,如果我想要在我的子主题中使用自定义页面模板,我会将page.php复制到我的子主题,重命名它,然后对其进行编辑。
这样,您可以确保不需要自定义的文件的所有方面仍然可以正常工作。这同样适用于模板部件。
您还可以向子主题的style.css文件添加样式,这将增强或覆盖父主题样式表中的样式。
WordPress将首先从父主题调用样式表,然后从子主题调用样式表。这意味着如果您将样式添加到与父主题中的样式相同的元素的子主题,只要您使用相同的选择器,它就会覆盖父主题的样式。
因此,假设您想更改站点标题的颜色。在父主题中,这可能是这样的:
h1.site-title { color: #000; }
要在您的子主题中覆盖它,您可以添加以下内容:
h1.site-title { color: #303030; }
由于浏览器会在父主题中的样式之后遇到这个,它将覆盖它并被使用。
因此,您在WordPress中创建了子主题并不是因为您想要编辑任何模板文件,而是因为您想要添加额外的功能或覆盖父主题中的一个或多个功能。
在子主题中编写函数比添加模板文件要复杂一些,但这是可能的。
如果您想添加一个不与父主题中的任何功能交互的新功能,您可以继续这样做。只需将该函数添加到子主题中的functions.php文件中,将其挂接到相关的操作或过滤器挂钩上,就可以了。
但是,如果您计划覆盖或编辑父主题中的函数,则需要了解可用于执行此操作的方法。您可以通过三种方式覆盖子主题中的父主题功能:
让我们仔细看看你是如何做到的。
可插拔函数由环绕在它周围的条件检查标识。这将检查是否有另一个同名的函数已经被触发。如果是这样,它不会运行该功能。
WordPress将在来自父主题的函数之前触发来自您的子主题的函数。如果它在父主题中遇到一个可插拔函数,并且您已向子主题添加了一个同名的函数,则该可插拔函数将不会运行。
一个示例是在WooCommerce站点的Storefront主题中输出版权页的函数。这是没有内容的函数:
if ( ! function_exists( 'storefront_credit' ) ) { function storefront_credit() { // contents for function here } }
如果您想覆盖它,您可以编写另一个具有相同名称 ( storefront_credit()
) 的函数并将其挂接到与父主题相同的钩子上。
如果父主题的函数不可插入,您仍然可以阻止它运行。假设您的父主题有一个名为parent_function()
的函数,函数init
以20
的优先级挂接到钩子上。您想阻止它运行,以便您可以用自己的函数替换它。
下面是父主题函数的样子:
function parent_function() { //contents of function here } add_action( ‘init’, ‘parent_function’, 20 );
要解开它,您可以在您的子主题中对此进行编码:
function remove_parent_function() { remove_action( ‘init’, ‘parent_function’, 20 ); } add_action( ‘wp_head’, ‘remove_parent_function’ );
请注意,您将第二个函数挂接到在每个页面顶部运行的wp_head挂钩,并且您必须包含与原始函数中相同的优先级参数值。如果原始add_action()
函数没有优先级,您可以从子主题的remove_action()
函数中省略它。
注意:如果原始函数被挂钩到过滤器挂钩而不是动作挂钩,则您将以remove_filter()
相同的方式使用。
有时您可能想要添加到它而不是覆盖或删除函数。在这种情况下,您将编写一个具有不同名称的新函数,并将其附加到同一个钩子上。
假设您的父主题中的页脚有一个名为parent_footer
. 您附加到该钩子的任何函数都将在该钩子所在的位置运行。
在父主题中,已经有一个parent_footer_content()
用于填充页脚的函数。但是如果你想给它添加一些额外的代码怎么办?
以下是该parent_footer_content()
函数在父主题中的样子:
function parent_footer_content() { // content of function here } add_action( ‘parent_footer’, ‘parent_footer_content’ );
现在,如果您想在那之后添加其他内容,您将在您的子主题中创建一个函数,挂钩到同一个动作钩子,优先级意味着它在第一个函数之后运行。由于未为父主题的功能设置优先级,因此默认为10。因此您需要使用更高的数字,以便在此之后触发。
function child_footer_extra_content() { // contents of function here } add_action( ‘parent_footer’, ‘child_footer_extra_content’, 20 );
这将在来自父主题函数的代码之后添加来自子主题函数的代码。
所以现在您知道如何在WordPress中创建子主题以及如何使用它来覆盖模板文件、添加额外样式以及为您的站点添加功能。
但是,如果您的子主题没有按预期工作怎么办?如果内容没有按照您预期的方式显示,或者函数没有触发怎么办?
使用此清单对您的子主题进行故障排除:
希望这些步骤中的一个或多个步骤可以帮助您识别问题并在您的子主题中修复它。记住:不要直接编辑父主题。
子主题是一个非常重要的话题,也是WordPress一个非常有价值的功能。我在我建立的每个网站上都使用它们。
为了帮助您找到最有效地利用子主题所需的方法,以下是我的提示,可帮助您解决这些问题:
remove_action()
或remove_filter()
从父主题中解开函数,然后编写新函数。创建子主题是在不承担任何相关风险的情况下修改主题的最佳方式。使用此过程,您几乎可以更改网站外观和布局方面的任何内容。更重要的是,您将能够立即创建您的子主题。
子主题是 WordPress 的一项有用功能,可让您自定义主题而无需直接编辑其代码。您可以使用一个来向主题添加附加功能、自定义样式或创建/编辑模板文件。
如果您遵循上述建议,您将能够按照最佳实践在 WordPress 中创建子主题,并利用它们完成各种任务。当您更新父主题时,所有这些都不会丢失您的更改和自定义。
网站名称:如何开发一款WordPress子主题
网站路径:http://www.shufengxianlan.com/qtweb/news49/22749.html
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联