讲师中心 微信公众号

工具推荐

视频效率加速
剧云
剧云

中文短剧剧本制作平台

Laper
Laper

剧本策划到成片协作

AniShort
AniShort

AI短剧协同制作平台

updream

一键生成高质量推广成片

WordPress自定义主题中根据文章数量动态显示/隐藏“查看更多”按钮的教程

轻明同学_6577

轻明同学_6577

发布时间:2025-11-20 12:53:54

|

991人浏览过

|

来源于php中文网

原创

WordPress自定义主题中根据文章数量动态显示/隐藏“查看更多”按钮的教程

本教程旨在指导开发者如何在wordpress自定义主题中,根据特定文章类型和分类的实际数量,动态控制“查看更多”按钮的显示与隐藏。我们将利用 wp_query 及其 found_posts 属性,精确判断符合条件的文章总数,从而在有更多文章时显示按钮,在无文章时显示提示信息,优化用户体验。

引言

在WordPress自定义主题开发中,常见需求之一是在首页或特定区域展示最新文章列表,并提供一个“查看更多”按钮,引导用户前往文章归档页。然而,当符合条件的文章数量不足以填满当前显示区域,甚至没有任何文章时,盲目显示“查看更多”按钮可能会造成困惑或不良用户体验。本教程将详细介绍如何通过PHP代码,智能地根据文章总数来动态管理此按钮的可见性。

理解问题与挑战

通常,我们使用 get_posts() 或 WP_Query 来获取并显示指定数量的文章。例如,在首页新闻区域可能只显示最新的3篇文章。此时,我们需要解决以下问题:

  1. 如何准确获取所有符合条件的文章总数? 即使我们只显示3篇文章,也需要知道实际上有多少篇新闻文章发布了。
  2. 如何根据这个总数来判断“查看更多”按钮是否应该出现? 如果总文章数少于或等于当前显示的3篇,就没有“更多”可查看,按钮应隐藏。
  3. 当没有任何文章时,如何显示一个友好的提示信息?

直接使用 get_posts() 返回的文章数组长度来判断总数是不准确的,因为它受 posts_per_page 参数的限制,只返回指定数量的文章,而非所有符合条件的文章。

解决方案核心:WP_Query 与 found_posts

WordPress 提供了强大的 WP_Query 类,用于构建和执行复杂的数据库查询。它的一个关键特性是 found_posts 属性。

  • WP_Query: 允许你以高度灵活的方式查询WordPress数据库中的文章、页面、自定义文章类型等。
  • found_posts: 这是 WP_Query 对象的一个属性,它返回所有符合当前查询条件的文章总数,不受 posts_per_page 参数的限制。这正是我们解决问题的关键所在。

通过 found_posts,我们可以独立于实际显示的文章数量,获取到真正的文章总数,从而进行精确的条件判断。

实现步骤与代码示例

以下是实现动态显示/隐藏“查看更多”按钮的详细步骤和完整代码示例。

1. 定义查询参数

首先,我们需要定义一个数组,包含我们希望查询的文章的所有条件,例如文章类型、每页显示数量、分类、排序方式等。

SEO Keyword Density
SEO Keyword Density

SEO关键词密度优化与页面审计技能。使用场景:①提供页面路径与关键词进行SEO优化;②提升页面关键词密度;③提升搜索引擎排名;④进行SEO审计(meta标签、OG、hreflang等)。触发词:关键词密度、SEO优化、关键词优化等。

下载
<?php
$args = array(
    'post_type'      => 'post',          // 文章类型:默认为 'post',也可以是自定义文章类型,如 'news'
    'posts_per_page' => 3,               // 每页显示3篇文章
    'category_name'  => 'news',          // 限制为 'news' 分类下的文章
    'orderby'        => 'post_date',     // 按发布日期排序
    'order'          => 'DESC',          // 降序排列(最新文章在前)
    'post_status'    => 'publish',       // 只显示已发布的文章
);
?>

2. 执行 WP_Query 并获取总文章数

接下来,我们使用这些参数创建一个 WP_Query 对象,并从中获取 found_posts。

<?php
// ... (上一步的 $args 定义) ...

// 使用 WP_Query 执行查询
$the_query = new WP_Query( $args );

// 获取所有符合条件的文章总数
$total_posts_found = $the_query->found_posts;
?>

3. 循环显示文章内容

使用 WP_Query 的 have_posts() 和 the_post() 方法来遍历并显示文章。

<?php
// ... (上一步的 $args 和 $total_posts_found 获取) ...

// 循环显示文章内容
if ( $the_query->have_posts() ) :
    while ( $the_query->have_posts() ) : $the_query->the_post();
?>
    <div class="newbox">
        <div class="newimg">
            <?php if (has_post_thumbnail()) : ?>
                <?php the_post_thumbnail('small-img'); ?>
            <?php else : ?>                                    
                <img  src="<?php echo esc_url( get_template_directory_uri() . '/img/image/default-img.png' ); ? alt="WordPress自定义主题中根据文章数量动态显示/隐藏“查看更多”按钮的教程" >" alt="<?php the_title_attribute(); ?>">
            <?php endif; ?>
        </div>
        <h3 class="title1"><?php the_title(); ?></h3>
        <p class="cont"> <?php the_excerpt(); ?></p>
        <p class="date"><?php the_time('Y.m.d'); ?></p>
        <a href="<?php the_permalink(); ?>">
            <h5 class="btnmr">Read</h5>
        </a>
    </div>
<?php
    endwhile;
    wp_reset_postdata(); // 重置全局 $post 数据,非常重要!
endif;
?>

4. 条件判断显示“查看更多”按钮或提示

这是最关键的一步。我们将根据 total_posts_found 和 posts_per_page 进行判断:

  • 如果 total_posts_found 大于 posts_per_page,说明还有更多文章未显示,此时应显示“查看更多”按钮。
  • 如果 total_posts_found 等于 0,说明没有任何文章,此时应显示“暂无文章发布”的提示。
  • 如果 0
<!-- “查看更多”按钮或“暂无文章”提示的条件显示 -->
<div class="col-lg-12">
    <?php
    if ( $total_posts_found > $args['posts_per_page'] ) {
        // 如果总文章数大于当前显示的文章数,则显示“查看更多”按钮
    ?>
        <a href="<?php echo esc_url( home_url( '/post/newspage' ) ); ?>">
            <div class="btn-default1">
                <p>VIEW MORE</p>
            </div>
        </a>
    <?php
    } elseif ( $total_posts_found === 0 ) {
        // 如果没有找到任何文章
        echo "<p>暂无文章发布。</p>";
    }
    // else { // 0 < total_posts_found <= $args['posts_per_page']
    //     // 此时有文章,但所有文章都已显示,无需“查看更多”按钮,也无需“暂无文章”提示。
    //     // 此处留空即可。
    // }
    ?>
</div>

完整代码示例

将以上所有片段组合起来,形成一个完整的PHP代码块,通常放置在你的主题模板文件(如 home.php, front-page.php 或某个自定义模板文件)中。

<?php
/**
 * WordPress 自定义主题:根据文章数量动态显示/隐藏“查看更多”按钮
 */

// 1. 定义查询参数
$args = array(
    'post_type'      => 'post',          // 文章类型:默认为 'post',也可以是自定义文章类型,如 'news'
    'posts_per_page' => 3,               // 每页显示3篇文章
    'category_name'  => 'news',          // 限制为 'news' 分类下的文章
    'orderby'        => 'post_date',     // 按发布日期排序
    'order'          => 'DESC',          // 降序排列(最新文章在前)
    'post_status'    => 'publish',       // 只显示已发布的文章
);

// 2. 使用 WP_Query 执行查询并获取总文章数
$the_query = new WP_Query( $args );
$total_posts_found = $the_query->found_posts; // 获取所有符合条件的文章总数

// 3. 循环显示文章内容
if ( $the_query->have_posts() ) :
    while ( $the_query->have_posts() ) : $the_query->the_post();
?>
    <div class="newbox">
        <div class="newimg">
            <?php if (has_post_thumbnail()) : ?>
                <?php the_post_thumbnail('small-img'); ?>
            <?php else : ?>                                    
                <img  src="<?php echo esc_url( get_template_directory_uri() . '/img/image/default-img.png' ); ? alt="WordPress自定义主题中根据文章数量动态显示/隐藏“查看更多”按钮的教程" >" alt="<?php the_title_attribute(); ?>">
            <?php endif; ?>
        </div>
        <h3 class="title1"><?php the_title(); ?></h3>
        <p class="cont"> <?php the_excerpt(); ?></p>
        <p class="date"><?php the_time('Y.m.d'); ?></p>
        <a href="<?php the_permalink(); ?>">
            <h5 class="btnmr">Read</h5>
        </a>
    </div>
<?php
    endwhile;
    wp_reset_postdata(); // 重置全局 $post 数据,避免影响后续查询
else :
    // 如果没有文章,这里不直接输出提示,统一在下方“查看更多”逻辑中处理
endif;
?>

<!-- “查看更多”按钮或“暂无文章”提示的条件显示区域 -->
<div class="col-lg-12">
    <?php
    // 4. 根据总文章数和每页显示数进行条件判断
    if ( $total_posts_found > $args['posts_per_page'] ) {
        // 如果总文章数大于当前显示的文章数,则显示“查看更多”按钮
    ?>
        <a href="<?php echo esc_url( home_url( '/post/newspage' ) ); ?>">
            <div class="btn-default1">
                <p>VIEW MORE</p>
            </div>
        </a>
    <?php
    } elseif ( $total_posts_found === 0

热门AI工具

更多
切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

相关专题

更多
数据库三范式
数据库三范式

数据库三范式是一种设计规范,用于规范化关系型数据库中的数据结构,它通过消除冗余数据、提高数据库性能和数据一致性,提供了一种有效的数据库设计方法。本专题提供数据库三范式相关的文章、下载和课程。

3165

2023.06.29

如何删除数据库
如何删除数据库

删除数据库是指在MySQL中完全移除一个数据库及其所包含的所有数据和结构,作用包括:1、释放存储空间;2、确保数据的安全性;3、提高数据库的整体性能,加速查询和操作的执行速度。尽管删除数据库具有一些好处,但在执行任何删除操作之前,务必谨慎操作,并备份重要的数据。删除数据库将永久性地删除所有相关数据和结构,无法回滚。

4201

2023.08.14

vb怎么连接数据库
vb怎么连接数据库

在VB中,连接数据库通常使用ADO(ActiveX 数据对象)或 DAO(Data Access Objects)这两个技术来实现:1、引入ADO库;2、创建ADO连接对象;3、配置连接字符串;4、打开连接;5、执行SQL语句;6、处理查询结果;7、关闭连接即可。

3551

2023.08.31

MySQL恢复数据库
MySQL恢复数据库

MySQL恢复数据库的方法有使用物理备份恢复、使用逻辑备份恢复、使用二进制日志恢复和使用数据库复制进行恢复等。本专题为大家提供MySQL数据库相关的文章、下载、课程内容,供大家免费下载体验。

1107

2023.09.05

vb中怎么连接access数据库
vb中怎么连接access数据库

vb中连接access数据库的步骤包括引用必要的命名空间、创建连接字符串、创建连接对象、打开连接、执行SQL语句和关闭连接。本专题为大家提供连接access数据库相关的文章、下载、课程内容,供大家免费下载体验。

3087

2023.10.09

数据库对象名无效怎么解决
数据库对象名无效怎么解决

数据库对象名无效解决办法:1、检查使用的对象名是否正确,确保没有拼写错误;2、检查数据库中是否已存在具有相同名称的对象,如果是,请更改对象名为一个不同的名称,然后重新创建;3、确保在连接数据库时使用了正确的用户名、密码和数据库名称;4、尝试重启数据库服务,然后再次尝试创建或使用对象;5、尝试更新驱动程序,然后再次尝试创建或使用对象。

3067

2023.10.16

vb连接access数据库的方法
vb连接access数据库的方法

vb连接access数据库方法:1、使用ADO连接,首先导入System.Data.OleDb模块,然后定义一个连接字符串,接着创建一个OleDbConnection对象并使用Open() 方法打开连接;2、使用DAO连接,首先导入 Microsoft.Jet.OLEDB模块,然后定义一个连接字符串,接着创建一个JetConnection对象并使用Open()方法打开连接即可。

2993

2023.10.16

vb连接数据库的方法
vb连接数据库的方法

vb连接数据库的方法有使用ADO对象库、使用OLEDB数据提供程序、使用ODBC数据源等。详细介绍:1、使用ADO对象库方法,ADO是一种用于访问数据库的COM组件,可以通过ADO连接数据库并执行SQL语句。可以使用ADODB.Connection对象来建立与数据库的连接,然后使用ADODB.Recordset对象来执行查询和操作数据;2、使用OLEDB数据提供程序方法等等。

2881

2023.10.19

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

0

2026.11.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
墨刀帮助中心
墨刀帮助中心

共0课时 | 0人学习

MyEclipse学习中心
MyEclipse学习中心

共0课时 | 0人学习

Apache Subversion 官方手册
Apache Subversion 官方手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn