如何自定义GeneratePress主题阅读更多按钮

如何自定义GeneratePress主题阅读更多按钮

如何自定义GeneratePress主题阅读更多按钮?

  您是否正在寻找如何在使用 GeneratePress 主题构建的 WordPress 网站中自定义“阅读更多”按钮?将帮助您借助 CSS 代码为您的 WordPress 网站创建漂亮的阅读更多按钮。您可以将此代码应用于使用 GeneratePress 主题或其他主题构建的 WordPress 网站。

如何自定义GeneratePress主题阅读更多按钮
如何自定义GeneratePress主题阅读更多按钮

  在GP 主题中添加阅读更多或继续阅读按钮非常容易,本文晓得博客为你介绍如何自定义GeneratePress主题阅读更多按钮。

  推荐:GeneratePress Free vs Premium,GeneratePress主题优点和缺点

为什么要在网站上使用阅读更多按钮?

  如果您显示的是全文而不是摘要或摘录,那么您博客的点击率将会很低。阅读更多按钮鼓励用户点击并查看我们的博客文章。这直接影响您网站的跳出率和停留时间。

  大多数博主使用他们网站上的阅读更多按钮。但是他们中的一些人避免在他们的网站上使用它。是否要使用阅读更多按钮是个人的选择,在WordPress建站中建议使用它。

  • 阅读更多按钮吸引网站用户点击按钮。
  • 可以提高您网站上的点击率(CTR)。
  • 这些按钮压缩主页和博客页面上的内容。这样,您可以在更少的空间中添加更多的内容。
  • 阅读更多按钮可帮助您增加网站上的页面加载量。
  • 如果您在每篇博客文章中使用全文而不是摘要或摘录,那么您博客的点击率将会降低。
  • 阅读更多按钮鼓励站点用户点击并查看您的博客文章。它直接影响您网站的跳出率和用户停留时间。

  推荐:WordPress网站如何减少DOM大小

在 GeneratePress 主题中自定义阅读更多按钮

  在这里,我们基本上是在自定义摘录中添加阅读更多链接,并使用 CSS 代码为现有的阅读更多按钮设置样式。在此之前,需要检查一些 WordPress 和 GeneratePress 设置。

  登录WordPress仪表盘,转到“ 设置 “->” 阅读 “->” 对于Feed的帖子 ” ->”选择摘要”->”保存更改”

  在 GP Premium 中,转到“ 外观 ”->” GeneratePress ”->“ Enable Blog Module激活文章模块 ”

激活Generatepress文章模块
如何自定义GeneratePress主题阅读更多按钮

  之后选择博客在Archives存档部分,选择内容类型为Excerpt摘要,Read more 标签为Read More,启用显示更多按钮。

在GeneratePress主题中自定义阅读更多按钮
如何自定义GeneratePress主题阅读更多按钮

  推荐:WordPress优化修复WordPress网站速度慢加载慢

设置阅读更多按钮的CSS样式

  转到您的仪表板 ,” 外观 “->” 自定义 “->” 额外CSS “。复制并粘贴以下代码。点击发布按钮。

a.read-more.button {
	background-image: linear-gradient(to right, #008060 0%, #00a9d3 51%, #009ac9 100%);
}

a.read-more.button {
	font-size: 13px;
	padding: 8px 25px;
	text-align: center;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;
	box-shadow: rgba(0,0,0,.14) 0 2px 6px 0;
	border-bottom: 2px solid rgba(0, 0, 0, .2);
	border-radius: 120px;
}

a.read-more.button:hover {
	background-position: right center;
	transform: translateY(0);
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.4);
	/* change the direction of the change here */
	color: #fff;
	text-decoration: none;
}

  如果您想在右侧阅读更多按钮,请使用以下代码将按钮浮动在右侧。

a.read-more.button {
    float: right;
}

  推荐:如何在GeneratePress主题中添加面包屑

在 WordPress 摘录中显示阅读更多链接

  如果您在 GeneratePress 主题中使用自定义摘录,则默认情况下找不到阅读更多按钮。使用 GeneratePress 子主题,那么可以直接将代码插入到 functions.php 中。也可以使用使用 Code Snippets 插件来插入代码。

在WordPress摘录中显示阅读更多链接
如何自定义GeneratePress主题阅读更多按钮
add_filter( 'wp_trim_excerpt', 'tu_excerpt_metabox_more' );
function tu_excerpt_metabox_more( $excerpt ) {
    $output = $excerpt;

    if ( has_excerpt() ) {
        $output = sprintf( '%1$s <p class="read-more-button-container"><a class="read-more button" href="%2$s">%3$s</a></p>',
            $excerpt,
            get_permalink(),
            __( 'Read More', 'generatepress' )
        );
    }
	
    return $output;
}

  可以使用上面发布的相同 CSS 代码来设置 GP 主题中阅读更多链接的样式。转到外观 > 自定义 > 附加 CSS。粘贴上面的代码。

  推荐:如何将自定义CSS添加到WordPress网站

GeneratePress主题自定义阅读更多按钮效果

  GeneratePress主题中自定义的阅读更多按钮如下所示。

GeneratePress主题自定义阅读更多按钮效果
如何自定义GeneratePress主题阅读更多按钮

总结

  以上是晓得博客为你介绍的如何自定义GeneratePress主题阅读更多按钮的全部内容,现在可以使用上面的代码在 GeneratePress 主题中自定义阅读更多按钮,当然使用GeneratePress Pro主题会有更多的功能,更方便,如有问题欢迎联系我们。

  推荐:GeneratePress主题建站教程

给文章评分

Claude、Netflix、Midjourney、Chatgpt Plus账号购买,ChatGPT API购买,优惠码XDBK,用户购买的时候输入优惠码可以打95折

Chatgpt-Plus注册购买共享账号
Kinsta-free-hosting主机
Kinsta-free-hosting主机
Elementor可视化创建WordPress网站
Elementor可视化创建WordPress网站
滚动至顶部