Need help? Chat now!

Hostwinds 博客

寻找结果为:


Hostwinds的使用方法:如何制作WordPress儿童主题 特色图片

Hostwinds的使用方法:如何制作WordPress儿童主题

通过: Hostwinds Team  /  七月 12, 2019


Maya Angelou曾经说过,"是时候父母教授年轻人,在多样性中有美丽,有力量。"现在,你可能会问自己,"这与WordPress博客帖子有关吗?"

好问题。答案是一点延伸,但在这里:WordPress父主题鼓励WordPress儿童主题作为心灵可以想象的不同。事实上,每个孩子主题都需要父母主题,后者使前者能够提供更多多样性,美容和力量。因此,父母主题遵循伟大的Maya Angelou的建议。那是什么?这不仅仅是一个伸展的"有点",最好将这个博客发布结束,假装像这些段落从未存在过?这听起来像一个好主意。在这种情况下…

你好,人们!欢迎回到WordPress儿童主题博客系列!在第1部分中,我们介绍了一些WordPress事实和细节,定义了WordPress子主题,并未插入Hostwinds WordPress托管。那是什么?您还希望有关此所谓的"Hostwinds WordPress托管"的大量信息,因为它听起来像是一个精彩而有益的服务?

我的回答是双重的:

1.您绝对正确– Hostwinds WordPress托管 美好而有益的服务!

我很乐意为您提供。

WordPress托管是Web托管,与使用WordPress建造的网站完全兼容。由于各种原因,它使构建和维护WordPress网站更容易,所有这些都在本博客系列的第1部分中讨论。那是什么?你想知道在哪里去订购Hostwinds Wordpress托管这一秒吗?

周到的观众,适合您的一切! 该链接将您带到正确的位置:

https://www.hostwinds.com/hosting/wordpress

那是什么?你还想知道去哪里去寻找这个WordPress儿童主题博客系列的第1部分?

我的回答是双重的:

1.观众,您今天很健谈,我很喜欢!

2.单击下面的链接签出第1部分。

WordPress儿童主题及其使用方式

Epic Saga在第2部分进行了进展,我们将学习如何使用子主题。想要改变你的WordPress主题吗?如果您不可避免地安装安全性和功能目的,请确保这些编辑不会被删除?儿童主题在这里拯救你!我们将在此博客件中创建和激活其中一个神奇的儿童主题。

只是为了简要介绍我们在我们的假设示例中进行的内容,将对我们WordPress网站的CSS样式进行以下更改:

1.当访问者将鼠标悬停在我们网页上的某些标题上时,会产生抖动效果。

2.当游客悬停在它上面时,一张图像的颜色反转。

繁荣,简单。让我们开始创建一个团队。

创建子主题之前的步骤

在我们领先于自己并潜入儿童主题世界之前,让我们安装WordPress。

这是使用Softaculous App Installer安装WordPress的方法(Softaculous随Hostwinds Shared和Business Web Hosting计划免费提供,这使得安装WordPress变得轻而易举):

步骤#1:登录到您的客户区: https://clients.hostwinds.com/clientarea.php

步骤2:点击Hostwinds服务

步#3。单击左侧的"操作"菜单中的"登录CPANEL"

第四步。登录CPANEL >>单击"软件"菜单中的"软侵扰应用程序"

步#5。一旦在Poictach,点击页面左侧菜单上的"博客">>单击"WordPress"

首先,点击博客

二,点击WordPress

步骤#6。单击"安装"

步骤#7。 填写信息,例如您的域名,管理员用户名和管理员密码

你做到了! 全做完了!

WordPress全部设置好后

现在是时候激活您的父主题,这是您的操作方法:

第1步。使用刚刚在安装WordPress的凭据时登录WordPress,同时安装WordPress >>点击页面左侧的菜单上的"外观">>点击"主题"

第2步。选择您的首选主题,然后单击"激活"

首先,点击外观

二,点击主题

点击激活按钮

父主题有效激活! 进入下一个!

现在,创建儿童主题的步骤

是的,我们终于可以创建我们的儿童主题了。 这是操作方法:

第1步。巡航回到您的CPANEL帐户>>单击"文件管理器"在"文件"菜单中,进入"Public_html"文件夹>>转到"WP"文件夹>>转到"WP-Content"文件夹>>转到"主题"文件夹

首先,点击public_html

第二,点击wp /第三,点击wp-content

第2步。 做一个 新建文件夹 在您的WP-Content /主题文件夹中,题为"[您的父主题名称进入此处] - 兄弟。您还可以将其命名为"[您的父主题名称进入此处] _child。"要实现此目的,请单击页面左上角的"+文件夹"。

步骤#3。 进入新文件夹并创建一个 新文件。点击您的新文件夹>>单击页面顶部左上角的"+文件">>命名新文件"style.css"。

我们首先创建一个style.css文件,因为它是一个最基本的东西来制作子主题。等等,听起来很熟悉。哦,是的,这是非常让人从这个WordPress儿童主题博客系列中的第1部分引用:"最简单的子主题包括一个样式.CSS文件。"

继续执行第4步!

第四步。通过右键单击它并选择"编辑">>复制并将以下代码粘贴到Style.css文档中,然后单击"保存更改",然后单击"保存更改",然后单击"编辑">>

12345678910 / *主题名称:主题URI:说明:作者:作者URI:模板:版本:许可证:* /

现在,在我们填写其余代码之前,请允许我解释一下这些字段的确切含义。

主题名称 是您刚刚激活的父主题的名称。

主题URI 通常是您将主题的主页的URL提供的位置,因为它是可以找到有关您主题的数据的网页的URL。

描述 是一个简短的句子,概述了您的孩子主题。

作者 是你,所以你的名字或WordPress用户名在这里。

作者URI 是您首页的网址。

模板 是父主题文件夹的名称。

版本 是您的子主题的版本号。 我们将使用1.0.0。

执照 是您的子主题的许可声明。

您还可以添加诸如"文本域"和"标记"的字段,但不需要这些字段。

这是我填写以获得期望结果的代码:

12345678910 / *主题名称:二十七个孩子主题URI:http://mydomain.com/wp/twentyseventeen-child/描述:二十七个孩子主题的作者:ErinCAuthor URI:http://mydomain.com模板:二十七个孩子版本:1.0.0许可证 :GNU通用公共许可证v2或更高版本* /

如果您需要进一步说明要为特定主题/子主题信息插入什么内容,请查看以下内容:

12345678910 / *主题名称:[您的父母主题名称已在此] -childTheme URI:http:// [您的主页名称名称已在此] .com / [您的父母主题名称已在此] -child描述:[您的父母主题的子主题] NAME GOES HERE]主题作者:[YOUR NAME GOES HERE]作者URI:http:// [您的首页名称HERE HERE] .com模板:[您的父母主题名称HERE]版本:1.0.0许可证:GNU通用公共许可证v2或更高版本 * /

键入此块的代码后,您可以填写文档的其余部分,因为您通常会填写CSS文档。顺便说一句,如果您没有任何对CSS的经历或需要刷新CSS知识,我们碰巧发布了一个博客帖子,解释了CSS基础知识。

以下链接将指示您到我们的"Hostwinds CSS聊天"博客片:

Hostwinds CSS聊天

是时候激活我们的儿童主题了! 请按照以下步骤操作:

  1. 导航到WordPress仪表板,然后单击菜单上的"出版物"一直到页面左侧的方式
  2. 单击"主题">>单击子主题名称下的"激活"

现在,您会发现您的WordPress网站看起来有些不同,但是 不要恐慌。 完成接下来的几个步骤后,它将恢复正常。

第1步。返回CPANEL文件管理器中的子主题文件夹(包含您样式的文件夹)

Step#2.创建一个新文件并将其命名为"function.php"

Step#3.右键单击文件>>单击"编辑"

Step#4。将此确切代码复制并粘贴到文档中,然后单击页面右上角的蓝色"保存更改"按钮:

PHP 1234567.

如果您刷新WordPress网站上的页面,它应该神奇地恢复正常状态,并且看起来更漂亮。

请允许我解释为什么前面的步骤是必要的。 您刚刚复制和粘贴的代码使所有WordPress父主题都能读取WordPress随附的标准CSS。

现在,添加CSS代码的步骤

为了有效地对您的CSS代码进行更改,您必须在WordPress父主题中标识正确的类名。以下是您的方式:右键单击您的网站的主页>>点击"检查"

如果您不熟悉Google Chrome Inspect Tool(也称为"Google Chrome Developer Tools"),则是一种现象资源,因为它允许任何人查明网站上的每行代码创建的内容。例如,如果右键单击任何网页,请单击"检查",然后单击开发人员工具的左侧角落上的小游标图标,您可以单击页面上的任何元素查看哪个块代码创建它。

在此之上,您可以双击任何代码,编辑它,推送输入,并测试网页的样本如何了解。那是什么?检查工具是 很棒! 哇,你读懂了我的想法。 我们将使用Google Chrome开发者工具来标识我们需要在style.css文档中引用的CSS选择器,以进行更改。

P.S.虽然我们正在使用Google Chrome的开发工具,但Firefox和Internet Explorer都具有非常相似的工具。

P.P.S. 就本教程而言,我们将使WordPress网站保持与首次激活时相同的条件,并且仅进行本博客文章简介中提到的两项更改。

P.P.P.S.另外一件我们想解决CSS文档的事情:您是否知道浏览器从上到下读取CSS文档?同样,浏览器读取了子主题样式中包含的CSS。代码低于父主题的CSS代码。换句话说,您在子主题的style.css文档中拥有的代码始终覆盖父主题的style.css文档的代码。

哇,好长的P.P.P.S. 那好吧! 如前所述,我们将为我们的网站更改两件事。 这是#1:

让我们说,例如,当您的网站用户悬停在它们上时,您发现有必要拥有所有标题抖动。

将以下代码粘贴到style.css文档中以实现此目的:

123456789101112131415161718192021222324 h2:hover {透视:900px; 背面可见度:隐藏; 转换:translate3d(0,0,0); 动画:同时摇动0.70s立方贝塞尔曲线(.25,.10,.17,.88);} @ keyframes摇动{{12%,88%{变换:translate3d(-2px,0,0); } 19%,82%{转换:translate3d(3px,0,0); } 32%,53%,68%{转换:translate3d(-3px,0,0); } 42%,58%{转换:translate3d(3px,0,0); }}

首先,注意"H2"选择器。我们使用Google Chrome Developer工具来弄清楚在此代码中引用的选择器。其次,您可以调整上面代码中的数字,使标题速度快或更慢。最后,确保在粘贴文档中的代码后单击"保存更改"按钮。

2.我们将要做的第二件事是:我们将通过将以下代码添加到我们的新创建的style.css文档来遍历它时,我们将倒置我们的主页图像的颜色。当您完成复制和粘贴时,请按"保存更改"。

123 img:hover {过滤器:反转(100%);}

这就是你如何制作光荣有效的儿童主题!您都是设置的,您的网站有一些自定义触摸,在安装前进的WordPress更新时,不会被删除。刷新您的页面后,一旦拍摄了这些步骤,并注意到当您在标题上悬停时会令人难以置信地令人难以置信,并且它会摇晃。注意当您在主页上悬停在图像上时,它看起来有多令人难以置信的,它的颜色反转。这个更新的网站现在,正如孩子们所说的那样,"点亮"。

(字)按

难道你不只是在博客标题中爱一个伟大的双关语吗?那是什么?双关语是令人难以置信的俗气,但很棒?当孩子们说这些天时,"真实的dat ......兄弟。"

值得一提的是,这是我们网站上WordPress托管页面的引文:

"WordPress Web托管通常针对那些想要快速获取WordPress站点并运行的人量身定制,以便开始构建,设计或更新它。使用从CPANEL帐户中的软件应用程序安装程序,您可以在托管帐户上安装WordPress并开始在服务器上使用此免费软件,该软件针对正常运行时间进行了优化,由Hostwinds 24/7/365监控。"

Hostwinds团队专门制定了WordPress托管,以使人们可以方便地构建WordPress网站,而不必担心将其服务器配置为与WordPress兼容。 为此,Hostwinds创建的所有内容都是专门制定的,以使我们的客户轻而易举地进行托管程序。

Maya Angelou总结了我们的团队在她说的时候对帮助我们有价值的客户的方式总结了"如果你发现它在你的心里照顾别人,你将成功。"

对于我们使用我们的服务时,我们的工作人员真的很重要。 当我们以某种方式改善客户的生活时,我们认为我们的公司成功。 考虑到这一点,请知道,当您创建一个WordPress儿童主题时,如果您需要帮助,您总是欢迎您随时随地到达我们的专家团队,如果您需要帮助,请通过实时聊天,电话或支持机票。 我们总是在这里给你。

撰写者 Hostwinds Team  /  七月 12, 2019