台州高端网站设计:如何自定义WordPress读取更多链接文本

台州网站建设 | 2019-04-02

如果将WordPress站点设置为将文章显示为摘录,则很可能会显示一定数量的文本,然后显示一个通常称为“多读一点“链接。

这个链接的目的是为用户提供文章的快速摘录,这样他们就可以快速浏览你博客上所有最近的文章。这样做可以为用户提供更多的选择,从而提供更丰富的体验。

今天台州高端网站设计将剖析“读更多“在WordPress里面贴上标签,教你如何根据自己的喜好定制它。

基础

的大多数用途读更多标记与WordPress节选函数一起使用,该函数显示一个设置数量的单词/字符。默认情况下,WordPress将其限制在一定数量的单词上,但台州高端网站设计将很快向您展示如何调整此设置。

WordPress中的节选标记是一行PHP,如下所示:

<?php the_excerpt(); ?>

可以换掉the_content()模板标签可行时。通常情况下,你会有一个博客指数列出您最近的文章的页面。这些帖子可以通过简单的交换来使用摘录。内容()模板标签节选()模板标签

如果你去拜访我们博客把你的注意力集中在那一页上的一个帖子上,你就会明白我指的是什么。

台州高端网站设计

这是我们试图实现的东西,以优雅的主题博客为例。

这篇课文是一段小摘录,带着“尾声”。…“后面是一个有标题的按钮查看满邮

自定义读更多标签

要开始,您首先需要确保在WordPress安装的管理区域内启用了摘录。

头到你的WordPress管理员和登录。导航到将军设置链接位于左侧,并在其中单击读

将阅读设置更改为摘要,而不是全文。

您应该会看到一些设置,但是我们关注的是带有标签的部分。对于提要中的每一篇文章,请显示。您还可以控制在博客页面上显示的帖子数量。那我就交给你了。现在,我将保持原样。

继续选择摘要而不是全文单选按钮。带着摘要选中,单击保存更改

默认情况下,一些主题将经过优化,以显示摘录,而不是我刚才概述的设置区域所指示的全文设置。我们的divi2.0主题就是一个很好的例子。

下面我有一个Divi主题的简单安装。我生成了一些假的内容,以显示一个活跃的博客将如何使用我们的主题。你的可能看起来有点不同,特别是如果你使用的是不同的主题。

我喜欢这些帖子的样子,但我想在每个帖子的末尾加上一个按钮,就像你在自己的博客上看到的一样。这使用户清楚地知道,他们可以查看完整的帖子,但单击“ReadMore”按钮。

要做到这一点,我们需要深入研究我们网站的代码。在代码编辑器中打开活动主题。我使用的是崇高的文本2,Divi主题如下所示:

台州高端网站设计的Divi2.0主题是在代码编辑器中打开的。

我有index.php档案打开。它的内部有一些代码,可以输出您在博客页面上看到的内容。对于Divi主题,有相当多的正在进行,但基本的仍然在那里。我们想要集中注意力的部分如下:

修改the_content() 标签

如果您从未接触过divi内部的代码,那么您可以在查看自己的代码时参考行号。index.php档案。这只适用于你们中使用Divi的人。行号50-57将是我们修改的。

让我们将代码更改为the_excerpt()而不是the_content(),以及自定义函数。

下面是更新的代码块。为了清晰和安全起见,我刚刚注释掉了我们不使用的代码。

在这里,我们将代码更改为只包括the_excerpt()标签

如果您保存您的更改,并返回到您的网站,您可能不会看到任何区别。我们仍然需要修改_excerpt()的默认功能。

我们需要在每个节选的末尾添加链接文本。为此,我们需要在一个名为functions.php。找到它并在代码编辑器中打开它。

滚动到最底层并添加以下PHP代码:

/* Modify the read more link on the_excerpt() */

function et_excerpt_length($length) {
    return 220;
}
add_filter('excerpt_length''et_excerpt_length');

/* Add a link  to the end of our excerpt contained in a div for styling purposes and to break to a new line on the page.*/

function et_excerpt_more($more) {
    global $post;
    return '<div class="view-full-post"><a href="'. get_permalink($post->ID) . '" class="view-full-post-btn">View Full Post</a></div>;';
}
add_filter('excerpt_more''et_excerpt_more');

上面的前4行形成了一个自定义函数来控制博客文章中每个节选中出现的字数。定义一个函数,然后添加一个过滤器来设置(执行)该函数。作为WordPress API的一部分,我们的目标是excerpt_length函数来优化我们的帖子,使其不超过220个字符。

第二个函数通过重写WordPress默认值来定制ReadMore链接。在这里,我添加了一个包含在div中的链接,这样我们就可以对它进行样式设置。我会稍微讲一下样式设计,但是有了这段代码,你可以直接去你的网站,希望能看到一些类似我的东西。

我们每个博客文章的摘录都被我们的功能修改了。

链接和POST的默认CSS样式是用我们的Divi2.0主题自动表示的,因此要使链接成为一个按钮,只需要做一些工作。

我们给函数s.php文件中的锚链接提供了一个类view-full-post-btn。有了这个,我将添加一些CSS来锁定链接。将下面的CSS添加到style.css文件在您的主题内,以自定义我们的链接。在哪里添加它并不重要,但是将它添加到一个可以在将来参考的值得记忆的领域总是明智的。

.view-full-post-btn{
  display:inline-block;
  /*border-radius*/
  -webkit-border-radius:10px;
     -moz-border-radius:10px;
          border-radius:10px;
  padding:8px 16px;
  margin-top:10px;
  color:#454545;
  border:1px solid #d8dcdc;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:16px;
}
.view-full-post-btn:hover{
  background:#454545;
  /*transition*/
  -webkit-transition:all .3s ease;
  -moz-transition:all .3s ease;
  -o-transition:all .3s ease;
          transition:all .3s ease;
  border:1px solid #000000;
  color:#FFFFFF;
}

在添加样式后,我现在有一个非常漂亮的按钮,具有倒挂状态。

的默认状态查看满邮纽扣。

我们的悬停或活动状态查看满邮纽扣。

与其保持按钮对齐,不如向前走一步,将其浮动到容器的右侧。我们还需要在每个帖子中修改一些空白。将下面的代码添加到style.css档案。

.et_pb_post {
    margin-bottom100px;
    border-top1px solid #e1e1e1;
}
.et_pb_post:first-of-type {
    border-topnone;
}
.view-full-post { floatright; }

在所有这些样式就位之后,您现在应该会看到一个功能齐全的最终结果。每个按钮将点击你的博客文章,让你的用户阅读整个帖子。

我们的读更多的标签已经成功地实现了。

结语

添加诸如WordPress、ReadMore标记等增强功能,可以帮助用户更轻松地浏览博客。在适当的情况下,保持信息的组织和总结将帮助你的博客比以往任何时候都更清晰。使用内置到WordPress中的摘录功能是一个让您的内容更易于理解的好方法。台州高端网站设计只要付出一点努力,再加上一些造型,你就可以在几乎没有时间的时间内完成我在本教程中所介绍的内容。


上一篇:台州公司网站设计:WordPress与Tumblr:比较两个最流行的博客平台下一篇:台州网站开发公司:如何用WordPress确立自己的行业思想领袖地位