WordPress中argon主题右侧工具栏添加热门阅读和文章分类
|
WordPress
|
220

感谢 TurboAI对本博客的的大力赞助。 创作不易，如果您觉得有帮助，请 支持LIncol29! 为了让我能够继续创作更好的内容，你也可以选择订阅博客的 VIP ，包年VIP仅需10元/年，所有VIP内容免费观看

前言

lincol 是使用的argon主题，一开始是设置的两侧分栏。后来发现右侧的空间处于空闲状态，对于个人博客来说，充分利用所有空间是站长需要考虑的一点。(ps：过犹不及，后期又会回到精简)

最后 lincol确定了我现在使用的界面。在右侧添加文章分类 和 热门阅读两项，如下图。

在此期间，有许多来我博客的小伙伴都在问具体的代码实现，那么这篇文章主要就是教学如何在argon主题去实现右侧添加文章分类 和 热门阅读的功能。

image-20241223191952229

argon主题开启三栏

argon主题选项——页面布局——三栏

image-20241223192929671

function.php内添加代码

优化前的代码：打开网站的每个页面都会从数据库读取文章数据和文章分类，并且排序。此过程是重复的，会造成数据库读取压力大。如果网站处于高并发状态，网站响应速度会特别慢，并且容易宕机。

优化后的代码：将从数据库查到的数据保存到缓存中，一天查询一次。这样子直接从缓存读取数据会极大的提高网站响应速度。

尝试从缓存中获取数据：

  • $category_articles = get_transient('category_articles_data')：从缓存中获取之前保存的分类数据。如果缓存中没有数据，则返回 false。

如果缓存中没有数据：

  • $categories = get_categories(array(...))：执行数据库查询获取所有分类信息。

  • 构建 HTML 内容并保存到 $category_articles 变量中。

将数据保存到缓存中：

  • set_transient('category_articles_data', $category_articles, 24 \* HOUR_IN_SECONDS)：将查询结果保存到缓存中，过期时间设置为 24 小时。

如果缓存中有数据：

  • 直接使用缓存的数据，避免重新查询数据库。

echo $category_articles：输出缓存或查询的结果。

优化效果：

  • 减少数据库查询：通过缓存结果，可以减少对数据库的频繁查询，特别是在流量较大的网站上。
  • 提升性能：减少数据库负载，提高页面加载速度。
// 显示热门文章 
add_shortcode('hot_articles', 'hot_articles_shortcode');

function hot_articles_shortcode() {
    ob_start();

    // 尝试从缓存中获取数据
    $hot_articles = get_transient('hot_articles_data');

    if (false === $hot_articles) {
        // 如果缓存中没有数据，则进行数据库查询
        $hotPosts = new WP_Query(array(
            'posts_per_page' => 6, // 获取6篇文章
            'meta_key' => 'views', // 假设您使用一个自定义字段来存储文章的浏览量
            'orderby' => 'meta_value_num', // 根据浏览量排序
            'order' => 'DESC' // 降序排列
        ));

        $hot_articles = '';

        if ($hotPosts->have_posts()) {
            $hot_articles .= '<div class="hot-articles-container">';
            $hot_articles .= '<h2>热门阅读</h2>';
            $hot_articles .= '<ul class="hot-articles-list">';
            while ($hotPosts->have_posts()) : $hotPosts->the_post();
                $views = get_post_meta(get_the_ID(), 'views', true); // 获取浏览量
                $category = get_the_category();
                $category_name = !empty($category) ? $category[0]->name : '未分类'; // 获取分类名称
                $category_link = !empty($category) ? get_category_link($category[0]->term_id) : '#'; // 获取分类链接
                $hot_articles .= '<li>';
                $hot_articles .= '<a href="' . get_permalink() . '" rel="bookmark" class="title">' . get_the_title() . '</a><br>';
                $hot_articles .= '<i class="fa fa-eye" aria-hidden="true"></i><span class="views">' . $views . ' 浏览</span>';
                $hot_articles .= '<span class="category"><a href="' . esc_url($category_link) . '">' . esc_html($category_name) . '</a></span>';
                $hot_articles .= '</li>';
            endwhile;
            $hot_articles .= '</ul>';
            $hot_articles .= '</div>';
            wp_reset_postdata();
        } else {
            $hot_articles = '没有热门文章';
        }

        // 将数据保存到缓存中，过期时间为一天（24小时）
        set_transient('hot_articles_data', $hot_articles, 24 * HOUR_IN_SECONDS);
    }

    echo $hot_articles;

    return ob_get_clean();
}


// 显示文章分类以及分类的文章数量 
add_shortcode('category_articles', 'category_articles_shortcode');

function category_articles_shortcode() {
    ob_start();

    // 尝试从缓存中获取数据
    $category_articles = get_transient('category_articles_data');

    if (false === $category_articles) {
        // 如果缓存中没有数据，则进行数据库查询
        $categories = get_categories(array(
            'orderby' => 'count',
            'order' => 'DESC'
        ));

        $category_articles = '';

        if (!empty($categories)) {
            $category_articles .= '<div class="category-articles-container">';
            $category_articles .= '<h2>文章分类</h2>';
            $category_articles .= '<ul class="category-articles-list">';
            foreach ($categories as $category) {
                $category_link = get_category_link($category->term_id);
                $category_name = $category->name;
                $post_count = $category->count;

                $category_articles .= '<li>';
                $category_articles .= '<a href="' . esc_url($category_link) . '" class="category-name">' . esc_html($category_name) . '</a>';
                $category_articles .= '<span class="post-count"> (' . $post_count . ' 篇文章)</span>';
                $category_articles .= '</li>';
            }
            $category_articles .= '</ul>';
            $category_articles .= '</div>';
        } else {
            $category_articles = '没有分类';
        }

        // 将数据保存到缓存中，过期时间为一天（24小时）
        set_transient('category_articles_data', $category_articles, 24 * HOUR_IN_SECONDS);
    }

    echo $category_articles;

    return ob_get_clean();
}

右侧小工具添加简码

外观——小工具——右侧栏小工具——添加简码

category_articles

hot_articles

文章分类


热门阅读

image-20241223193924349

添加额外CSS

外观——自定义——额外CSS，添加以下CSS代码

/* 右侧工具栏 热门阅读 */
.hot-articles-container {
  width: 100%;
  max-width: 600px;
  margin: 0;
  padding: 0;
}

.hot-articles-container h2 {
  font-size: 29px;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
    font-weight: bold;
}

.hot-articles-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hot-articles-list li {
  margin-bottom: 15px;
  padding: 0;
  border-bottom: 1px solid #eee;
}

.hot-articles-list li:last-child {
  border-bottom: none;
}

.hot-articles-list li a.title {
  font-size: 16px;
  color: #0073aa;
  text-decoration: none;
  font-weight: bold;
}

.hot-articles-list li a.title:hover {
  text-decoration: underline;
}

.hot-articles-list li .meta {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  color: #999;
}

.hot-articles-list li .views {
  margin-left: 4px;
    font-size: 14px;
}

.hot-articles-list li .category {
  color: #0073aa;
    font-size:15px;
        float:right;
}

/*右侧工具栏的文章分类*/
.category-articles-container {
    width: 100%;
    max-width: 600px;
    margin: 0;
    padding: 0;
}

.category-articles-container h2 {
    font-size: 29px;
        margin-bottom: 20px;
        color: #333;
        text-align: center;
    font-weight: bold;
}

.category-articles-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-articles-list li {
    margin-bottom: 15px;
    padding: 0;
    border-bottom: 1px solid #eee;
}

.category-articles-list li:last-child {
    border-bottom: none;
}

.category-articles-list li a.category-name {
    font-size: 16px;
    color: #0073aa;
    text-decoration: none;
    font-weight: bold;
    margin-left:3px;
}

.category-articles-list li a.category-name:hover {
    text-decoration: underline;
}

.category-articles-list li .post-count {
    font-size: 13px;
    color: #666;
            float:right;   
}

总结

通过以上步骤，相信你可以顺利完成右侧栏小工具添加热门阅读和文章分类的功能。如果你在实现过程中存在问题，可以下方留言。

希望我的文章可以帮助到你，创作不易，如果您觉得有帮助，请 支持 LIncol29! 为了让我能够继续创作更好的内容，你也可以选择订阅博客的 VIP 。

创作不易，如果您觉得有帮助，请支持LIncol29!
如有需要，请至网站地图学习本博客的教程
博客订阅：通过RSS或关注公众号[Lincol的编程世界] | 广告招租与合作请留言
本文链接：https://www.lincol29.cn/addhot-article
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0协议转载请注明文章地址及作者哦~
argon

评论

  1. Bensz
    Macintosh Safari
    3 周前
    2024-12-23 20:36:17

    这里测试一下 (～￣▽￣)～

  4. ztrztr
    Windows Edge
    3 周前
    2024-12-23 21:16:45

    感谢分享ヾ(≧∇≦*)ゝ

  7. 静风说
    Windows Edge
    3 周前
    2024-12-24 12:36:07

    这2个功能我用的是WordPress自带的小工具实现的，太复杂的我也不会搞。

    • Lincol
      博主
      静风说
      iPhone Chrome
      3 周前
      2024-12-25 8:16:11

      能实现就是好事啦，我对这个也不懂，全靠gpt

      • 静风说
        Lincol
        Windows Edge
        3 周前
        2024-12-25 8:36:52

        我也是刚开始用gpt，才知道好强大

  10. rie
    Windows Edge
    3 周前
    2024-12-24 14:41:42

    看样子挺不错的，可以试一下

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
WordPress主题代码修改

							
							

							
WordPress评论回复提醒设置教程及SMTP配置指南

							
							

							
WordPress中argon主题如何给友链进行排序

							
							

							
WordPress中修改code短代码

							
							

							
WordPress中blockquote如何使用

							
							

							
WordPress中添加图像描述figcaption和alt—提升文章SEO

							
							

							
WordPress文章转换成本地Markdown文件—一键备份网站文章