西城公司网站制作:对WordPress根主题进行高级自定义

2019.05.27 西城公司网站制作

95

WordPress以拥有任何内容管理平台中最大和最活跃的开发社区而闻名,而大型的开发社区已经创造了一些最强大的预先制作好的主题。最近,大多数开发人员一直致力于将他们的设计迁移到新技术上,包括HTML 5CSS 3,它们更能根据不同的屏幕大小进行缩放。HTML 5是对抗这种向不同屏幕大小和设备过渡的主要方法,但对于大多数人来说,它不是一个众所周知的实体。WordPress管理员。

西城公司网站制作在那里WordPress根主题进来。主题是使用HTML 5样板,使之成为当前任何内容管理平台都可以使用的最严格和最标准的HTML 5主题之一。与其名称相符的是,Root主题基本上是一个精简的、不需要修饰的WordPress主题,它是专为更好地采用HTML 5、知识和定制而设计的一个启动板。主题使用充足的空白、基本设计元素和一个简单的样式表,其中只包含创建设计列和标头所需的最基本类。除了样式信息之外,WordPress管理员还必须添加和编辑自己的CSS类和ID元素,以便使Root主题的外观成为他们自己的博客和个人需求所特有的。

西城公司网站制作

虽然自定义主题的包含的样式表文件并不是很困难,但是有一些更高级的自定义可以在Root主题上进行,这需要对WordPress本身有更多的了解,同时也需要对WordPress本身有更多的了解。PHP和XHTML代码。

这些事情可能是众所周知的最经验丰富的WordPress管理员和网页设计,但大多数用户会发现自己完全没有办法,当需要对根主题的实际结构和布局进行定制。对于这些用户,本教程将重点关注一些关键的自定义,以及如何使用WordPress安装版本3.0及更高版本的当前版本的Root主题来执行这些定制。

了解如何执行这些自定义,以及为什么它们更具挑战性

WordPress的根主题不是一个传统的主题。实际上,它不使用直接编码和静态HTML 5元素,而是严重依赖HTML 5样板和引导响应设计框架。该框架本身包含在主题中,包括几个库文件和默认设计元素,这些元素是由推特。大多数人可能还记得,Twitter使用了自己独特的设计元素,包括静态标头和“永久内容流”,后者在到达当前内容的末尾时加载较旧的tweet。

自举它是非常先进的,而且它必须如此:它为世界上第二受欢迎的社交网站提供动力。在Root主题的模板文件中发现的许多设计元素并不是直接编码的;相反,这些设计元素是从包含的Bootstrap框架中提取出来的,并且只有在相关的设计元素得到支持时才会包含这些元素。其中一个例子是网站的标题,它是直接从Bootstrap响应设计框架中提取的。大多数人喜欢这个简单的,静态的标题,但很多其他人更喜欢定制它的设计,使它更无缝地融入网站的其他设计元素。这是怎么做的?

步骤1*找到将引导头拖到Header.php模板中的代码

Root主题的表现不像传统的WordPress主题,也不以传统的方式组织其文件。为此,主题在其主要模板文件中广泛使用模板“部件”。在标题的情况下,这意味着Root主题实际上从另一个目录中的模板中提取一个默认的标头。这个标题直接放在页面的下面<HEAD><BODY>标记;主题的开发人员认为,以这种方式创建文件可以提供更简单、更直接的自定义。

为了将模板“部件”拉到更大的模板文件中,WordPress需要使用几个条件变量来检查兼容性和模板文件位置。在Root主题的情况下,将头“部件”拉进更大范围的代码header.php文件,如下所示:

if (current_theme_supports(‘bootstrap-top-navbar’)) {
get_template_part(‘templates/header’, ‘top-navbar’);
} else {
get_template_part(‘templates/header’, ‘default’);
}

精明的WordPress管理员和开发人员会注意到get_template_part代码实际上是指“模板”文件夹中的一个文件。查看Root主题的目录结构,很容易看到“模板”文件夹位于主题自己的根文件夹中。导航到该文件将显示header.php拖到主题更大的标题模板中的文件。该文件可以根据用户的需要进行编辑,并从引导程序框架中移开,或者可以用一个新的头(或一个新的头“部件”文件)完全替换。

为了本教程的目的,标题本身不会改变它的基本设计。相反,它的地位将被改变,以更好地适应网站整体主题和宗旨的独特内容展示需求。这是通过编辑HTML 5代码和进行样式表调整来实现的。仅供参考,从这一点开始编辑的文件位于以下服务器路径:

/home/public_html/wp-content/themes/roots/templates/header.php

步骤2*将标头重新定位为设计中的流体元素

西城公司网站制作继续打开这个部分header.php档案。在此文件中,<DIV>标记必须被移除,以便标题停止“粘贴”到页面顶部,而与内容一起滚动。在许多情况下,这是可取的,包括它可以过分减少可观看的网站内容的数量。要删除的标记将直接位于部分头文件的顶部,如下所示:

<div class="navbar-fixed-top">

移除该标记,并将其替换为“容器”。<DIV>标签。这应该非常简单,但作为参考,替换的标记将类似于以下示例:

<div id="container">

这个步骤是可选的,但是在精心设计HTML 5时,它具有很好的语义意义。不愿使用容器的用户<DIV>标记可以简单地省略“容器”id元素,然后删除现在无效的闭包。</DIV>标记,该标记位于部分的末尾。header.php档案。

步骤3:更改标头的样式

接下来,查找app.css文件,该文件也位于Root主题的“模板”目录中,并编辑名为navbar-inner。对于那些不熟悉CSS代码的WordPress管理员,这个示例如下所示:

.navbar-inner {
DESIGN CODE APPEARS HERE
}

要删除、添加或更改的内容,包括图像、文本、边框半径、阴影和边距或空白。自定义标题以满足网站的设计和内容要求,然后保存app.css档案。还保存header.php此时存档。继续通过以下方式将两个文件上载到服务器FTP如果出现提示,则覆盖服务器上这些文件的旧版本。

上传完成后,Root主题将停止将导航条“粘贴”到网站顶部,就好像它是浏览器窗口的一部分一样。它现在将滚动与网站,虽然被认为是老式的,仍然是一个非常理想的功能,这一关键要素的设计。

一个可教的时刻:在Root主题中使用模板部件

自定义Root主题的标题是讨论如何使用Root主题本身生成模板的好时机。标题远远不是使用模板部分的Root主题中包含的唯一设计元素。实际上,模板部件用于从页眉到页脚,以及中间的所有循环或侧边栏。这就是为什么WordPressRoot中包含的几乎每个模板文件看起来都太短,而不是真实的。实际上,这些模板文件仅仅是从适当命名的“模板”子目录中提取模板部件的PHP包含文档。

每当主题引用模板部件时,都应该对位于上面引用的子目录中所需的部分模板进行修改。虽然修改可以在模板文件本身,它是很好的工作与主题的结构,并保持每个模板部分有效和良好的发展。这实际上是一种高效的创建和维护WordPress主题的方法,大多数站点管理员将倾向于使用编辑轻松地定制多个页面,而不是只使用一个部分的PHP模板文件。

删除默认的Root主页,并将其替换为其他内容

很明显,Root主题有它自己的主页设计,但是很多设计师已经表达了使用不同的主页来实现他们自己的内容的愿望。这可以很容易做到,即使是复杂的性质的WordPress根主题本身。事实上,它的完成方式与目前市场上的每一个WordPress主题都是一样的。

步骤1:创建自定义主页模板

与任何其他定制模板或主页一样,一切都是从一个新的定制模板开始的,该模板由WordPress网站的网页设计师或管理员设计。此模板的商标“标题”应位于内容上方,包括一行注释的PHP代码,该代码使用Template Name: Homepage排队。在PHP代码行之后,模板可以按管理员要求的任何方式设计。它甚至可以利用现有的模板“部件”在已安装的Root主题内,由设计者自行决定,尽管它当然不需要这样做。完成模板后,将其命名为new-homepage.php然后上传到Root主题的主目录。

步骤2:删除根主题提供的当前主页模板

驱动根主题默认主页的模板名为front-page.php。应该删除或重命名为不同的名称,例如,代码>old-homepage.php。这将导致Root主题不再向任何人显示默认主页,这将为最终用户显示新的主页设计铺平道路。

步骤3:告诉WordPress使用新主页模板作为其实际主页

尽管删除了默认的Root主页模板,WordPress将不会显示新的主页设计,直到它得到了具体的指示这样做。这是通过单击“设置“在仪表板侧边栏中标题,然后单击指向“设置页。在那里,WordPress将呈现一个模板下拉框,可用作“静态”主页。在本教程的第一步中选择名为“主页”的模板,并保存新设置。WordPress现在将显示新的主页设计,而不是Root主题的标准front-page.php充满内容的模板文件。

很难自定义,但不一定是件坏事

根主题可能是最难定制的主题之一,尽管它将自己推销为欢迎任何更改的基本主题。这一困难并不是因为开发人员显然试图阻止对其主题的更改;相反,定制的困难是因为Root开发人员认为定制部分模板更容易,效率更高,并且在站点范围内使用它们,而不是为几乎相同的每个功能开发单独的模板。

一旦用户了解了模板“部件”是如何工作的,西城公司网站制作以及如何通过修改CSS 3代码而不是HTML 5设计元素来更多地定制基本主题,他们会发现Root主题是他们曾经使用过的最简单和最有效的主题之一。


寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP