攻击二十十七字谜主题的5种优秀方法

二十十七是曾经看过的WordPress最多的默认主题之一.但是,主题内置的选项留下了一些需要的事情.

在这篇文章中,我会向你展示五个黑客,你可以用来用它唯一的唯一自己.我们将从基础开始,并继续前进到更具有挑战性和有影响力的自定义.

在我们进入代码之前,请快速查看我们要覆盖的自定义.如果一个人抓住你的眼睛前进,直接向该部分抬头!

    • 黑客#1:如何创建社交链接菜单
    • 黑客#2:如何更改"以WordPress"自豪地支持"
    • 黑客#3:如何使用动态单页导航(改进!)
    • hack#4:如何将自定义侧栏添加到每个前页部分和每个页面
    • 黑客#5:如何将巨大的特色图像添加到每个帖子和页面


在我们完成的时候,您将能够将二十十七变成一个美丽而现代的商业或博客网站.不要相信我?看一看.以下是您将构建的内容,如果您实施所有五个Hacks:

准备开始播放代码?让我们来吧.

#1.创建社交链接菜单

好的,所以第一个比黑客更多的尖端.但这是一种自定义,使二十十七是独一无二的,所以我们将覆盖它.

二十十七包括页面页脚中的一个有吸引力的社交链接菜单.

The Twenty Seventeen WordPress theme's social links in the footer. 20个十七个Wordpress主题在页脚中的社交链接.

问题是,超过一些用户报告难以弄清楚如何将社交网络链接添加到此菜单.谢天谢地,一旦你知道如何做到这一点,这真的很简单.

您所要做的就是创建一个菜单,其中包含与社交网络的链接,并将其分配给社交链接菜单位置.

让我们走过这个过程.

  • 首先打开自定义程序(外观>自定义).
  • 选择 menus 选项,然后单击创建新菜单.
  • 名称是显而易见的,如"社交链接菜单".
  • 菜单位置部分中选择 seeware leng 旁边的复选框,然后单击下一个.
  • 单击 +添加项,并使用自定义链接选项添加到每个社交网络帐户的链接.

当你完成后,你的菜单应该看起来像这样:

更新二十十七字WordPress主题中的社交链接.

最后一步是点击自定义程序中的发布按钮以保存新菜单.您的社交网络链接现在将显示在页脚菜单中.

这并不难.让我们继续触摸更多挑战的东西.

#2.更改"由WordPress"自豪地支持"

有两个原因,为什么你可能想要更改声明的页脚中的文本,声明您的网站是"由WordPress自豪地供电."

  • 也许你想扩展它,并用WebPress Designs设计的WordPress,由WebPress设计设计,并由Lampress托管托管."
  • 也许你想去另一个方向并说出真正吸引人的东西,就像"版权所有2022 mybiz |版权所有."很好.

无论你的原因还是目标,我们都不会判断.我们会告诉你如何完成工作.

您需要做的第一件事是创建和激活子主题.

一旦您创建并激活了您的子主题,将二十十七到子主题目录复制到二十十七的 focker.php 文件.接下来,打开页脚php 并查找该代码:

get_template_part('模板-零件/页脚/网站','INFO');

现在你有几个选项.只需在代码之前添加//即可通过添加//即可注释该行,或者您可以考虑使用自己的自定义页脚文本替换它.这是我添加的代码,以创建您在上面的图像中看到的页脚文本:

加载GIST 2754983DA5AA610319D7725CD4C20635

#3.动态一页导航(改进!)

在我上一篇文章中大约二十十七篇我包含一个简单的jQuery脚本,您可以使用它来构建与不同的前页部分链接的动态一个页面导航.那个脚本完成了工作,但它确实需要一点细化.

在这篇文章中,我们需要进一步处理两步.除了创建功能单页导航外,我们还将修复导航菜单悬停效果并加入平滑滚动以提高整体体验.

首先,让我们从新jQuery开始,您需要添加到您的网站:

加载GIST 101B800B4F93CB12A75281E216A57E5B

您可以将此代码添加到由子主题加载的JavaScript文件(这是我所做的)或使用允许您将JavaScript添加到您的网站(这是我之前在二十十七的帖子中推荐的插件添加).只需在 jQuery已加载后加载代码.

代码的第一部分与上一个教程不变.其余的代码修复了导航链接突出显示.看看代码中的评论,以获得正在发生的事情的完整图片.

此外,我们可以通过安装和激活一个自由插件来使每个部分的运动更加光滑:易于平滑滚动链路平滑滚动锚.

当然,您仍然需要通过使用该部分中显示的页面的名称添加到每个部分的自定义链接来构建导航菜单.

例如,要链接到"关于"部分,您将创建自定义链接并使用"#有关"作为链接锚.有关详细信息,请参阅如何自定义自由二十十七字WordPress主题.

需要一点,但努力是值得的.不相信?看看结果:

非常好,即使我确实这样说.

二十七岁充分利用空白,但我知道你在想什么.你认为这也许有点太多了空格.你知道什么可能真实有用吗?如果您可以向每个前页部分添加不同的侧栏小部件,并且还向页面添加侧栏.

例如,例如,您想向主页的博客部分添加搜索字段,类别下拉列表和其他小部件.能够做到这样的事情很好:

Blog section custom sidebar. 博客部分自定义侧栏.

当然,您不希望在关于部分中显示的相同小部件.不,你想在该部分添加一些不同的东西.现在我想到了它,能够在首页的关于部分的关于部分部分上显示一个侧边栏,但是在实际/关于</em上的不同侧栏>页面.

朋友,我有好消息.您可以将自定义侧栏部分添加到每个前页部分,然后在您网站的每个页面上重复使用相同的侧栏或完全不同的侧栏.但是,这不是一个非常简单的黑客.我们在这里回到儿童主题领土,我们也需要使用插件.

默认情况下,二十十七个不会向首页部分添加侧边栏-或者对于此事项的任何页面.它确实在各个帖子上显示了一个侧边栏,但页面有一个鲜明的,宽阔的,几乎空的外观.

为了改变它并将侧边栏区域添加到页面,我们需要做一些事情:

  • 复制在二十十七用于显示页面和前页面部分的模板文件上.
  • 通过修改模板文件,向页面模板和每个前页部分添加侧边栏代码.
  • 安装自定义侧栏.
  • 为每个前页部分创建自定义侧栏,以及我们要显示侧栏的每个页面.
  • 将侧边栏添加到要显示侧栏的每个页面.

让我们一次走过步骤.

步骤1:复制 content-page.php content-fort-page.php ,以及内容前页面.php 给您的孩子主题.

您将通过转到 \ wp-content \ themes \ twentyseventeen \ template \ page 来找到这些文件.在该目录中,您将看到三个文件.复制所有三个.

您需要通过将模板-零件目录添加到您的子主题和嵌套它内部的页面.然后将文件粘贴到页面目录中.

当您完成后,您的子主题目录结构应该如下所示:

Page template files. 页面模板文件.

步骤2:向每个模板文件添加侧边栏代码.

首先,打开 content-page.php 并在关闭header标记之前添加<?php get_sidebar(); ?>,如下所示:

Content page code added. 添加的页面代码.

第二,打开其他两个模板文件, content-front-page.php content-fort-page-panels.php ,并在关闭之前删除以下代码 header 标记在每个文件中:

加载GIST 94083437AF5FC624A5072B5C2849B10A

插入该代码后,这是什么 content-fort-page.php content-fort-page-panels.php 应该看起来像添加所需的代码:

Front page sidebar code. 首页侧栏代码.

步骤3:安装自定义侧栏.

wpmu dev的免费自定义侧栏插件可从WordPress.org获取.

步骤4:为每个前页部分创建自定义侧栏.

头到外观>小部件并为每个前页面部分创建一个新的侧栏.

现在要注意,因为您将其获得前页侧栏的下一个部分是至关重要的.按照以下步骤创建每个侧栏:

  1. 单击创建新的侧栏.使用精确与页面名称命名每个侧栏.例如,如果您的头页面部分中的一个填充了标题""的页面,则创建一个具有完全相同的名称的侧栏:"关于".

Naming the custom sidebar. 命名自定义侧栏.

在步骤2中添加到前页模板的代码将在部分标题和侧边栏标题之间​​观看匹配,以了解要显示的侧栏.

  1. 单击高级-编辑自定义包装代码并添加以下代码:

  • 在第一个框中,在标题之前,添加<h2 class="widget-title">.
  • 在第二盒中,标题后,添加</h2>.

  • 在第三盒中,在窗口小部件之前,添加<section id="%1$s" class="widget %2$s">.
  • 在第四盒中,之后窗口小部件,添加</section>.

Widget wrapper. 窗口小部件包装器.

此代码匹配在每个窗口小部件和小部件标题之前和之后的二十个十七个添加.通过在此代码中包装自定义侧栏内容,您将确保将默认的二十十七件样式应用于您的首页侧栏内容.

  1. 现在您已准备好向侧栏添加内容.从可用窗口小部件中选择,并构建要在每个部分中显示的自定义侧栏.

你完成后.您的自定义侧栏列表应该看起来像这样,每个侧栏命名为匹配首页部分:

Custom sidebars list. 自定义侧栏列表.

注意:最近的帖子小部件不适用于此自定义.如果您将其添加到任何首页侧栏区域,您会注意到它出现的部分将加载主页内容而不是自定义页面内容.

步骤5:将侧边栏添加到要显示侧栏的每个页面.

现在,要头到要显示侧边栏并打开页面编辑器的任何页面.向下滚动,直到在右侧列中看到侧栏管理员元框.从下拉,选择要显示的侧栏.

Sidebars admin meta box. sidebars管理元框.

滚动备份,单击 更新 并查看页面.您将看到您选择的侧栏现在显示在页面标题下方.

Page with sidebar. 页面

#5.为每个页面添加一个巨大的特色图片

The Twenty Seventeen theme with a huge feature image. 具有巨大的特征图像的二十个十七个主题.

我喜欢全高标题图像或视频在20岁十七岁的主页上看起来.但是,我真的不喜欢特色图像在其他地方呈现的方式.相反,我更宁愿使用主页上使用的全部页面或帖子显示每个页面的特色图像.这就是这个黑客是什么,它是一个自定义,它落下了稳定的 >进入黑客类别.我不会撒谎,你即将看到的代码并不美丽,但是-这是重要的部分-它有效!

您需要做的第一件事就是复制超过二十十七到孩子主题的标题.然后,您需要用以下代码替换header标记的整个内容:

加载GIST B193FAD7E8CDDF32D8A85B5F1A968361

下一步,我们需要向我们的孩子主题添加一点CSS,以复制内置于二十十个主页中的样式,并将其应用于我们的自定义标题图像.

加载GIST F866E75C8AF39AFECC9F96AAEAC3FB5B.

只是将CSS粘贴到您的孩子主题的样式.

new 标题为php代码和添加到 style.css 的样式将迫使图像到完整的高度.但是,由于在二十十七中动态地应用和移除了类,粘性导航不太正常工作.我们将需要向我们的主题添加一点jQuery以获得粘性导航,以表现自己.

此代码可以添加到子主题JavaScript文件或使用插件,只需确保在jQuery核心加载后加载.

加载GIST 67415187D6E7D893B509A75D5C970B6F
令人敬畏的.现在,当您将特色图像添加到帖子或页面时,将使用视口的完整高度显示,就像主页上的完整高度标题一样.

一个子主题中的所有黑客攻击

我们已经覆盖了很多地面,并让这些黑客中的任何一个正常工作可能有点棘手.为了让您更容易发生,我将所有这些修改滚到儿童主题并在Github上扔掉它.如果您只想通过通过构建儿童主题的过程,只想完成所有这些修改,只需将发布ZIP文件夹下载到您的网站,并激活它.

此外,您需要安装两个插件-自定义侧栏且易于平滑的滚动链接平滑滚动锚-以访问本教程中描述的所有自定义项.

然后,只需走过我们之前的二十十个教程中描述的前页部分和自定义单页导航菜单的过程.然后自定义您的社交媒体菜单,将页脚文本绘制到您的喜好,添加前页部分侧栏,您将获得所有五个黑客的全部效果二十十七.

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

1
订阅评论
提醒
0 评论
内联反馈
查看所有评论