如何自定义自由二十十七号WordPress主题

技术教程 2022年2月23日
438 0

二十十七运送为具有WordPress 4.7的新默认主题.这项面向商业的主题标志着过去的博客以来的默认主题出发，并将从博客平台的Wordpress'更广泛转换到适合创建各种网站的平台.

如果您计划尝试二十十七，您将快速解决问题:这个主题与其前辈们没有任何东西.过去的默认主题只需要最小的设置，并且旨在将框中成为功能博客主题.这不是二十十七的情况.

当然，您可以将其用作博客主题，但这真的不是它设计或打算的.它真的旨在使用基于部分的着陆页面样式建立业务网站-通过看看官方主题演示网站来快速辨别.

焦点转变的结果是设置二十十七次比过去默认主题更多地完成.在这篇文章中，我们将探讨二十十七，看看它提供了什么，我会浏览主题设置，以便您可以轻松地建立一个二十十七的专业商务着陆页.继续阅读，或使用以下链接跳转:

  • 二十七个主题
  • 如何在二十十七个创建主页部分

    • 步骤1:为每个主页部分创建一个页面
    • 步骤2:将特色图像添加到每个页面
    • 步骤3:分配静态页面和帖子页面
    • 步骤4:将页面分配给每个前页部分
    • 第5步:创建主导航菜单
    • 步骤6:添加视频头
    • 额外信用:在页面导航时创建动态



二十十七个主题

The Twenty Seventeen default WordPress theme. 二十十七个默认Wordpress主题.

使用着陆页作为商业网站的主页，通过武力占据了网络.二十七个使得默认WordPress主题容易建立一个有吸引力的商务着陆页.

要了解可能性，请看看官方二十十七个主题演示.

就在蝙蝠，你会注意到视频标题.向下滚动一点，页面的分段设计将变得显而易见.每个部分都由醒目的视差背景图像分隔，占据视口的全宽和高度.

导航是简单的粘性顶部导航栏.和一个单一的字体，自由富兰克林在各种重量，亮度值和样式的整个主题中使用.

一旦正确设置，二十十七个呈现出现代专业的外观，建立在可读的字体选择和强烈使用空白的慷慨使用时突出的视觉效果.

如何在二十七十七个中创建主页部分

提供了在近期历史上的定制者上的重点，毫无奇怪的是，在定制者中发生的二十个十七个设置工作中的大部分情况都不令人惊讶.

A look at the menu options available in the Customizer with the Twenty Seventeen WordPress theme activated. A look at the menu options available in the Customizer with the Twenty Seventeen WordPress theme activated. 查看自定义程序中可用的菜单选项，并激活了二十十七字WordPress主题.

除了菜单和窗口小部件设置之类的标准功能外，可以从自定义程序设置标题图像或视频，切换到不同的颜色方案，并将内容分配给您的前页部分.

WordPress 4.7还介绍了一个名为可见编辑快捷方式的新功能-它们显示在上面的图像中的蓝色图标.单击任何这些快捷方式将打开自定义程序菜单，其中可以自定义该部位的该部分.

使其很容易编辑20个十七岁的许多功能，例如标题图像，站点标记和标题，以及每个页面部分出现的内容.只需找到要编辑的内容，请单击可见的编辑快捷方式，并自定义为您的心内容.

WordPress 4.7还使用新的自定义程序功能进行船舶，您将在附加CSS 自定义程序菜单选项中找到.我们之前写了关于新的额外的CSS 功能，因此我们刚刚在这里再次提及它并指出它是一个核心功能，而不是特定于二十十七的功能.

为了演示如何设置二十十七，我将要设置主题，就像我要为我的个人网站使用它一样.让我们走吧.

步骤1:为每个主页部分创建一个页面

Creating pages for the Twenty Seventeen WordPress themes. 创建要在前页面中显示的页面.

您需要做的第一件事是创建几页:

  • 创建一个页面以作为您的静态主页.
  • 创建一个页面以作为您的博客或帖子页面.
  • 创建多达四个附加页面以包含将在主页部分中显示的内容-如果您计划使用博客或帖子页面作为主页部分之一，则会使其三个附加页面.

在我的示例网站的情况下，我创建了一个主页，博客页面，关于页面，服务页面和联系页面.

步骤2:将特色图像添加到每个页面

为了实现视差图像效果，您需要将大型特色图像添加到将成为前页部分的一部分的每个页面.您可能不希望将特色图像添加到您在上一步中创建的主页，但您需要将特色图像添加到其他页面.

Setting a feature image for a WordPress page. 为每个页面设置特色图像.

二十十七个演示使用2000像素宽的图像高1200像素高.靠近该大小的图像非常好.不要使用小图像，或者结果将非常差.

在我的情况下，我从Stocksnap采购了免费图像，并调整了所有到2000像素宽，大约1200像素高，给予或花费10％.

步骤3:分配静态前页和帖子页面

Selecting the option to display a static front page. 选择要显示静态页面的选项.

现在是时候开始自定义了.启动自定义程序-转到外观>自定义在管理区域中的 customize 查看站点前端时.

选择静态前页菜单项，并进行以下设置调整:

  • 下面首页显示，选择静态页面的单选按钮.
  • 从首页下拉菜单中，选择您的网站主页.
  • 从帖子页面下拉菜单，选择您的帖子或博客页面.

别忘了点击保存并发布，然后继续下一个步骤.

步骤4:将页面分配给每个前页部分

要分配先前在前页面中创建的各种页面，请从自定义程序中选择主题选项菜单项.接下来，使用下拉菜单将每个页面分配给您希望它显示的相关前页部分.

步骤5:创建主导航菜单

您可以通过从自定义程序菜单中选择菜单选项或在管理区域中的外观>菜单中选择菜单选项来创建导航菜单.在任何一种情况下，在WordPress 4.7中创建WordPress菜单并没有更改，所以在过去的工作时，创建菜单，并将其分配给顶部菜单位置.

步骤6:添加视频头

下一个，让我们用视频替换Ho-Hum标题图像.通过单击相应的可见编辑快捷方式或找到自定义程序中的标题介质菜单项来访问自定义程序的相关部分.

上载或选择您要使用的视频.或者，您还可以提供YouTube视频的URL，如果您愿意，可以在标题中显示.如果您要上传视频，请注意主题指令建议视频尺寸为2000乘1200像素.

我选择了一个免费的股票视频用于我的网站.在1920年乘1080像素，它不完全达到推荐的尺寸，但它仍然看起来非常好.

此时，使用前页部分的静态主页完成！

额外信用:在页面导航时创建动态

一个特征在于二十十七次特别缺席的功能是支持前页部分之间的导航.如果导航将您直接浏览主页的相关部分，肯定会很好.值得庆幸的是，这是一个遗漏我们可以快速弥补.

首先要做的是创建一个链接到ID属性而不是网站的不同页面的菜单.为此，请创建如下所示的自定义菜单链接:

Create custom menu links for WordPress using IDs. 使用ID创建自定义菜单链接.

当制作ID时，只需使用从显示为前页部分的每个页面的页面标题，但将标题转换为小写，并用破折号替换标题中的任何空格.

如果您在子目录中安装了WordPress -在本地开发环境中开发的站点的相当常见的做法-您需要在链接中包含子目录.例如，对于此项目，我的开发网站URL是 http://localhost/wp4point7 .这意味着WordPress安装在子目录中:.../WP4POINT7 .为了使链接正常工作，我需要在类似的URL中包含子目录:/WP4POINT7/#约.

如果您不使用子目录安装，则可以省略子目录并使用上面图像中显示的结构.

使用您的导航到位，您需要将ID添加到每个前页部分.您可以通过两种方式之一进行这一点.

最简单的解决方案是使用WordPress Page编辑器直接将ID直接添加到页面标题.

Adding HTML directly to the title field in the page editor is not ideal. 您可以将html直接添加到页面编辑器中的标题字段，但此方法不理想.

请注意，添加ID，我在跨度元素中包装标题.ID本身只是小写的页面标题，标题中的任何空格用破折号替换-这意味着ID将与我们添加到自定义导航菜单链接的ID.此外，我添加了一个样式属性和96像素的顶级填充.点击链接时，此填充值将内容推下来，以便可以在粘性导航栏下方看到.

说实话，这种方法有点黑客，我对此不太关心.我宁愿做的是使用jQuery添加跨度元素，ID和填充.这样，我不是在编辑器中解除页面标题，但仍然完成相同的最终结果.

这里有一点代码，我提出了它产生所需的结果:

加载GIST JPEN365/1FE6F1942945696F2C1DB88DCDE6B812

该代码所做的是定位每个部分的标题，然后在具有所需的必要样式的跨度中包装标题.此外，代码通过抓取部分标题来创建ID值，将其转换为小写，然后用短划线替换空格.因此，如果您要有一个具有标题我的博客的部分(例如上面的图像)，则此代码将添加以下ID属性:id='my-blog'.

此ID格式匹配我建议您为自定义导航菜单链接的相同的语法.

要在您的网站上加载该代码，您可以将其添加到两个不同的地方之一:是一个javascript文件，它是激活的二十十七个小儿童主题的一部分或加载自定义JavaScript的插件.

p>个人，我走了第二条路线并使用了文章中描述的自定义CSS和JavaScript插件如何将任何WordPress主题修改转换为简单的插件.但是，您可以轻松地使用像简单的自定义CSS和JS等插件来添加jQuery.

使用jQuery加载和创建的新导航菜单，这就是我的网站的主要导航现在的工作原理.

现在，二十十七将被设置为着陆页，主要导航在主页部分之间的页面导航.如果您想进一步获取几步，您可以考虑实施以下其他增强功能:

  • 添加重定向，以便直接在显示为主页部分的页面上的任何人被重定向到主页上的相关部分.例如，将页面 http://example.com/contact 重定向到前页部分 http://example.com/#contact .
  • 如果选择使用jQuery以在前页部分之间启用导航，请使用条件标记仅在主页上加载代码.
  • 如果您的网站将包含不属于主页部分的其他页面，请将其中的导航菜单添加到导航菜单中，并在下拉菜单中嵌套所有首页部分链接，如下图所示.

Adding panel links to a drop down menu to link to other pages with a WordPress navigation menu. 如果要链接到其他方式，请将面板链接添加到下拉菜单中带导航菜单的页面.

结论

二十十七表示全新的WordPress主题-至少，就默认主题而言.很明显，二十十七位背后的WordPress开发人员致力于将WordPress进一步推动其博客根源，进入商业和电子商务网站世界.

二十七十七十七十七十型首页设计.但是，将其设置为比以前的标准主题所需的更多努力.

如你在这篇文章中，投入努力是值得的，结果是一个更专业和有吸引力的商业网站，以前默认主题可以梦想创造.

编辑器注意: 此帖子已更新以获得准确性和相关性.[最初发布时间:2016年12月/修订:2月2022]

主题(26)二十(2)十七(2)
♥赞4

相关文章

发表评论