9 个 WordPress 代码为您的博客增添趣味并改善用户体验

9 个 WordPress 代码为您的博客增添趣味并改善用户体验


WordPress 易于配置和安装，在您发布博客后即可使用。

但是依赖 WordPress 的默认选项可能会为您带来损失：

  • 功能较少
  • 无聊的用户（他们在偶然发现的每个 WP 网站上看到相同的东西）
  • 搜索引擎排名下降。

您手中有一个灵活的工具，您可以对其进行调整以将其变成使用愉快且高效的工具。 为什么不为您的用户（和您自己）增添趣味呢？

本文希望通过添加有趣的内容来帮助您使基于 WordPress 的网站变得有趣和有用 代码片段 这也将增强您的搜索引擎优化。

需要帮助为您的 WordPress 博客增光添彩吗？
WHSR 现在与 Codeable.io 合作，为需要专业 WP 开发/定制服务的用户提供帮助。

要获得免费报价，请填写此申请表。

试一试，让我知道他们是如何为你工作的！ 😉

增强 WordPress 博客的 9 个代码

我将在这篇文章中为您提供两种类型的代码片段：

  1. 法典代码
  2. 代码片段和小部件

Codex 代码是我自己（在我的未婚夫 Simone 的帮助下）严格使用 WordPress.org Codex 作为参考编写的 PHP 片段。

代码片段和小部件是现成的 PHP 代码（或 WordPress 插件）片段，可在其他网站和 WordPress.org 上免费获得，但我还包括了我未婚夫和我使用开放和 Codex 引用从头开始编写的片段。

这两种类型的代码都易于实现和安装，但如果您不确定如何操作代码，则可能需要从小部件和插件开始。

法典代码

1.区分置顶帖

要让 WordPress 检查您当前的帖子是否为置顶帖子 – 并相应地显示它 – 您可以使用 Codex 布尔函数：

<?php is_sticky(); ?>

单独的函数只会返回 TRUE 或 FALSE 值，因此如果编写条件构造 (if/else) 来管理您的置顶帖子，您可以在这里做什么。 一个例子：

<?php if is_sticky() {
  the_title();
  the_time('M, d, Y');
  the_excerpt();
}
else {
  include 'post-template.php';
}

在这个示例用法中，我将置顶帖子显示为仅包含标题、发布日期和摘录（不是整个帖子）的框，而其他帖子的标准模板包含在 post-template.php 中。

每种类型的帖子都有自己的 CSS 样式表，但我们不在这里定义样式； 只有模板。

Single.php 是单个帖子的默认模板（您会发现它包含在每个默认的 WP 主题中）。

如果您开发了自己的 WP 主题，但没有为单个帖子设置模板，您可以在此处遵循 Codex 指南。

2.显示帖子网址

添加到您的模板中可能会很有趣。 如果您希望您的读者获取您的每个页面（或帖子）的 URI，只需在您的 single.php、page.php 甚至 index.php 模板中使用以下标记：

<a href="https://www.webhostingsecretrevealed.net/blog/wordpress-blog/9-wordpress-codes-to-spice-up-your-blog-and-improve-ux/<?php echo get_page_link();?>"><?php echo get_page_link(); ?></a>

而不是使用 the_permalink，这是最明显的选择并且适用于所有情况，WP 允许您使用两种替代形式的帖子和页面：

<?php echo get_post_permalink(); ?>
 <?php echo get_page_link(); ?>

例如，您的页面模板可以包括：

<p>Link: <a href="https://www.webhostingsecretrevealed.net/blog/wordpress-blog/9-wordpress-codes-to-spice-up-your-blog-and-improve-ux/<?php echo get_page_link();?>"><?php echo get_page_link(); ?></a></p>

3.检索并显示帖子ID号

即使您将永久链接结构设置为对用户和 SEO 友好，您仍然可以通过将以下简单功能添加到元行来向访问者显示帖子 ID：

<?php the_ID(); ?>

示例用法：

<p class="meta">Posted by Author's Name. Post ID is <?php the_ID(); ?></p>

4. 按 ID 列出类别

WordPress标准功能是：

<?php get_all_category_ids() ?>

这是我在我的一个博客上使用的示例，使用 Codex 中的代码和 StackOverflow 上的主题编写：

<?php
 $category_ids = get_all_category_ids();
 foreach($category_ids as $cat_id) {
   $cat_name = get_cat_name($cat_id);
 $category_link = get_category_link($cat_id); //we need the cat link for the URL to work!
 echo "<a href="{$category_link}">{$cat_id}</a>: {$cat_name}<br/>";
 }
 ?>

…以及它的显示方式：

类别 WP 代码

注意：get_all_category_ids() 现在是一个已弃用的函数，但您仍然可以毫无问题地使用它，就像我在我的博客上所做的那样（上面的屏幕截图）。 但是，如果您希望为此片段使用新函数，请访问 Codex 的 get_terms() 页面。

这段代码有什么作用？

代码获取所有类别 ID 和每个 ID 的类别名称，然后将 ID 链接到类别链接，同时在“：”之后显示类别名称 – 因此 回声（） 表达 {$cat_id}：{$cat_name}
.

5.您博客的详细用户/作者页面

您是否曾经想构建一个无需依赖插件即可显示所有博客作者或用户的自定义页面？

嗯，你 能够 仅使用文本编辑器、FTP 上传器和您心爱的 WordPress 仪表板创建您自己的自定义作者/用户页面。

首先，您需要创建 page.php 文件的副本。 将您的副本重命名为任何名称——我命名为我的 users.php。

将模板标签添加到此模板的顶部，以便 WordPress 将其识别为模板，然后转到您的仪表板 -> 页面 -> 添加新的 并为您的用户/作者列表创建一个页面。 返回页面列表，单击新页面标题下的快速编辑，然后从模板下拉菜单中选择新模板。 保存您的更改。

现在打开您的 users.php（或任何您命名的文件）文件并应用以下代码：

 <?php
 $result = count_users();
 echo 'There are ', $result['total_users'], ' total users';
 foreach($result['avail_roles'] as $role => $count)
 echo ', ', $count, ' are ', $role, 's';
 echo '.';
 ?>

此代码使用 count_users 函数，在 Codex 中列为“默认用法”。 您可以在 http://robocity.in/users/ 查看此代码的实时示例。

在该代码之后，让我们添加一些关于博客管理员的内容：

<?php printf( __( 'Number of posts published by user "Leaders": %d', 'text-dom-here' ), count_user_posts(1) ); ?>

我在这里使用了 count_user_posts 函数，遵循 Codex 建议的使用格式。

get_userdata 函数很好地显示了某个用户名与使用它的人的真实姓名之间的相关性。 见下文：

<?php $user_info = get_userdata(1);
      $username = $user_info->user_login;
      $first_name = $user_info->first_name;
      $last_name = $user_info->last_name;
      echo "$first_name $last_name logs into their WordPress site with the username of $username.";
?>

现在，这是您可以在“作者/用户”页面上使用的最有趣的函数 – get_users 函数：

<?php
$blogusers = get_users( 'blog_id=1&orderby=nicename&role=administrator' );
// Array of WP_User objects.
foreach ( $blogusers as $user ) {
    echo '<span>' . esc_html($user->user_login) . ' - ' . esc_html($user->user_email) . '</span><br/>';
}
?>

此函数将根据您可以在代码中配置的某些参数检索用户列表。 在上面的示例中（取自 Codex 页面并经过编辑以适合我在 Robocity.in 的用户页面），我想获取按“nicename”排序的博客 ID 1（当前博客）的管理员列表，并且对于每个用户，我想在“用户名-”类型的句子中显示用户名和电子邮件 [email protected]”。

如果您想向登录的用户显示一些关于他们自己的信息，您可以使用 get_currentuserinfo 函数来检索，例如，用户的姓名和地址。 在我的示例中我没有使用此功能，但创造力不知道限制，对吧？ 😉

代码片段和小部件

6. 另类……档案！

更好的博客档案

想象一下，如果您可以将旧的侧边栏存档列表（随着您的博客增长并迫使用户滚动而不断增长）替换为您可以在右侧看到的片段。

这不是让您的读者更容易一目了然地了解您的博客年龄和档案深度吗？ 🙂

我和我的未婚夫使用 Codex 中的 get_post 和档案列表的简单下拉菜单编写了这个简单的片段。 我们创建了自己的函数来使这个想法顺利进行。

<?php
 function formatPostDate($postId, $format="%F") {
 $post = get_post($postId);
 $output = strftime($format, strtotime($post->post_date));
 return $output;
 }

function getLastPostID() {
 list($post) = get_posts(array('posts_per_page' => 1));
 return $post->ID;
 }
 ?>

<p>This blog has posts since <?php echo formatPostDate(1, '%B %e, %Y'); ?>.<br/>
 Last post was published on <?php echo formatPostDate(getLastPostID(), '%B %e, %Y'); ?>.</p>

<p>Do you wish to visit a specific archive?</p>

<select name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
 <option value=""><?php echo esc_attr( __( 'Select Archive' ) ); ?></option>
 <?php wp_get_archives( array( 'type' => 'monthly', 'format' => 'option', 'show_post_count' => 1 ) ); ?>
 </select>

这段代码有什么作用？

函数 formatPostDate 采用帖子的 ID 和日期格式，并以您选择的格式返回日期。 第二个函数 getLastPostID 采用仅包含一个帖子的帖子数组并返回其 ID。

为了获得博客的第一篇文章——通常 ID=1，我们在第一段写 echo formatPostDate(1, ‘%B %e, %Y’)：这段代码使用了 formatPostDate 函数并将文章 ID 作为参数#1 和日期的标准英文格式，并返回日期。

要获取博客的最后一篇文章，我们使用 formatPostDate(getLastPostID(), ‘%B %e, %Y’) 来获取最后一篇文章的 ID 和日期格式（同样是英文）并打印日期屏幕。

7. 检查访客是否使用移动设备

WP-Snippets.com 的 Muneeb 分享了一个有趣的代码片段（一个函数），用于检查您网站上的访问者是否使用移动设备。

代码可在此处获得。

此功能有助于移动优化，因为如果您只想向移动用户显示某些功能或将移动用户排除在某些网站功能之外，它会很有用。

8. 使用 if/else 结构来操作你的页面侧边栏内容

此代码片段基于 WordPress 的 Codex，但我将其放置在本节中是因为它可以带来很多创意，并且您可以在 Web 上找到现成的片段。

假设您想在您的网站上使用多个侧边栏。 你可以用 div 和 section 填充你的侧边栏，但是文件增长得越多（即使你使用小部件）它就越重。

Codex 使用 get_sidebar($name) 函数来帮助您。 用法很简单：

  1. 为您的报价片段创建（比如说）一个侧边栏。 将其命名为 sidebar-quotes.php
  2. 在主 sidebar.php 文件（或标题或索引文件，根据您的 WP 主题结构）写入 get_sidebar(“quotes”); 包括“sidebar-quotes.php”文件。

您将获得一个更纤细的侧边栏，其中包含对其他子侧边栏的调用，如果您了解一些 WordPress 的 PHP 编码，您可以使用 if/else 结构对其进行优化。

您可能不知道这一点，但是当您使用通用的 get_sidebar() 代码时，它将包含“sidebar.php”，因为您没有添加 $name 参数。 这是默认用法。 当您在“sidebar*.php”之后添加“-name”时，您可以使用 $name 参数调用该名称插件。

如果您想在博客的某些页面上显示广告、特别优惠或侧边栏功能，或者代码会超载标准侧边栏，您会发现此代码片段是 UX 的救星。

9. 将代码片段集成到您的 WordPress 网站的工具

代码片段截图

Code Snippets 是由 Shea Bange 创建的免费 WordPress 插件，可让您轻松地将代码片段添加到您的博客。

这个插件的好处是你不再需要编辑你的 函数.php 文件，但您可以直接从 WordPress 仪表板添加自定义代码。 基本上，您可以像添加新帖子或页面一样添加代码片段。

WPMUDev.org 的 Tom Ewer 为这个插件写了一篇有趣的介绍，但到目前为止，我发现的 Code Snippets 最有用的资源是 WordPress.org 上的插件支持论坛。

交给你了！

在下面的评论中分享您的 WordPress 编码实验！ 并随时就本文中介绍的片段提出问题…

Leave a Comment