5分钟生成10篇英文软文article forge软件试用

本教程由我们的一位出色的论坛忍者 – Jordan Hatch 编写。

google广告开户

我们的 WooThemes 论坛上的一个常见请求是如何将流行的 WP-PageNavi 插件与我们的主题之一集成。 使用这个快速简单的教程,真的很容易。

安装插件

您需要做的第一件事是从 WordPress.org 插件目录中获取插件的最新副本,并将其安装在您的站点上。 您可以通过转到 WordPress 管理面板的“设置”->“WP-PageNavi”部分来配置页面的显示方式,尽管对于本教程,默认值应该可以正常工作。

对于本教程,我们将把插件添加到类别和存档页面。 实际的文件编辑会因主题而异,但需要对主题文件夹中的以下文件(如果存在)进行编辑:

  • 存档.php
  • 标记.php
  • 搜索.php

您需要在文件中找到以下代码:

并将其替换为:

注意:如果您找不到代码,您应该尝试在文件中找到“next_posts_link”所在的代码块。 它应该与上面的代码非常相似。

保存文件并将其上传到您的博客,您会发现根据您网站上的帖子数量自动生成分页。 如果您喜欢这些链接当前的显示方式,那么您就完成了,但如果您想对它们进行一些样式设置,请继续阅读!

样式化链接

WP-PageNavi 插件能够根据您的喜好设置导航链接的样式。 例如,默认的蓝色可能不适合某些设计。 现在我们将看看如何为我们的链接创建自定义样式。

首先,您需要在主题文件夹中创建一个名为“pagenavi-css.css”的文件。 插件会自动寻找它,如果它存在,它将加载它而不是默认值。

WordPress divi主题

对于这个例子,我们将把链接设置为棕色。 首先,让我们将默认 CSS 代码从 WP-PageNavi 复制到我们的自定义 CSS 文件中。

wp-pagenavi a, .wp-pagenavi a:link {
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}
.wp-pagenavi a:visited {
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}
.wp-pagenavi a:hover {
border: 1px solid #000000;
color: #000000;
background-color: #FFFFFF;
}
.wp-pagenavi a:active {
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}
.wp-pagenavi span.pages {
padding: 2px 4px 2px 4px;
margin: 2px 2px 2px 2px;
color: #000000;
border: 1px solid #000000;
background-color: #FFFFFF;
}
.wp-pagenavi span.current {
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #000000;
color: #000000;
background-color: #FFFFFF;
}
.wp-pagenavi span.extend {
padding: 2px 4px 2px 4px;
margin: 2px;
border: 1px solid #000000;
color: #000000;
background-color: #FFFFFF;
}

不要让我们粘贴到文件中的 CSS 数量看起来令人望而生畏——如果您对 CSS 很熟悉,那么您会发现这是一件轻而易举的事。 但是,如果您不太了解 CSS,那也不是问题。 我们将更改链接的边框颜色,我将向您展示您需要更改的内容。

首先,让我们快速看一下每个类的含义:

  • .wp-pagenavi a,.wp-pagenavi a:链接: 这是当项目未被选中时用户看到的类——所以它是默认状态。
  • .wp-pagenavi a:已访问 这是当页面已经被访问但用户在不同页面上时用户看到的内容的类。
  • .wp-pagenavi a:悬停 这是用户将鼠标悬停在项目上时所看到的类。
  • .wp-pagenavi span.pages 这是包含文本“Page 1 of X”的框的类。
  • .wp-pagenavi span.current 这是包含当前页面的框的类。 这里没有链接。
  • .wp-pagenavi span.extend 这是用于在最右侧找到的带有“…”的框的类(仅在有很多页面时显示)

我们要将边框更改为“#993300”的颜色。 (如果您想使用不同的颜色,请转到此色轮,它将为您挑选代码。)

这是我们需要更改的行——CSS ‘border:’ 属性。

border: 1px solid #0066cc;

当前颜色是“#0066cc”,但我们想将其更改为我们的颜色——“#993300”。 这就像用另一个替换一个一样简单。 所以,它应该是这样的:

border: 1px solid #993300;

用我们更新的边界代码替换所有三个出现并上传到您的服务器。 你现在应该发现你的分页边框是棕色的。 您可以尝试使用背景颜色和悬停状态,这完全取决于您!

cta-banner-10-产品页面-v2_2x

5分钟生成10篇英文软文article forge软件试用
tiktok