WordPress原始内容标签指南

只适配默认文章、页面、分类，代码直接复制可用，小白也能轻松上手

开始生成循环代码

什么是“原始内容”？

WordPress最核心、最不需要自定义的3类内容，也是本指南的唯一焦点：

  • 文章（Post）

    用于发布新闻、博客、动态等“时效性内容”，支持分类、标签

  • 页面（Page）

    用于创建“关于我们”“联系我们”等固定内容，支持子页面层级

  • 分类（Category）

    用于给文章归类（如“新闻”“产品动态”），点击分类显示对应文章列表

小白关键提示

本指南所有代码都只针对这3类内容，无需安装插件、无需自定义字段、无需改数据库，复制到主题文件夹即可用！

核心标签分类

按“文章/页面/分类”划分，每个标签附使用场景和示例

常用 <?php the_title(); ?>

功能

显示当前文章的标题，必须在循环中使用

使用示例

<?php while ( have_posts() ) : the_post(); ?>
    <h2 class="post-title">
        <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>
        </a>
    </h2>
<?php endwhile; ?>

场景

文章列表页、文章详情页显示标题

常用 <?php the_content(); ?>

功能

显示当前文章的完整内容（含图片、格式），必须在循环中使用

使用示例

<?php while ( have_posts() ) : the_post(); ?>
    <div class="post-content">
        <?php the_content(); ?>
    </div>
<?php endwhile; ?>

场景

文章详情页显示完整内容

常用 <?php the_excerpt(); ?>

功能

显示文章摘要（默认前55字，或编辑时手动填写的“摘要”），必须在循环中使用

使用示例

<?php while ( have_posts() ) : the_post(); ?>
    <div class="post-excerpt">
        <?php the_excerpt(); ?>
    </div>
    <a href="<?php the_permalink(); ?>">阅读全文</a>
<?php endwhile; ?>

场景

首页、分类页显示文章简介，引导点击

原始内容循环选择器

选择内容类型和参数，一键生成可直接使用的循环代码

1. 选择内容类型

3. 显示设置

显示数量

排序方式

完整模板示例

3个核心模板文件，直接复制到主题文件夹即可用

文章详情页（single.php） 

<?php get_header(); ?>

<div class="content-area max-w-4xl mx-auto px-4 py-8">
    <main class="site-main">
        <?php if ( have_posts() ) : ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <!-- 文章主体 -->
                <article id="post-<?php the_ID(); ?>" <?php post_class( 'bg-white rounded-xl p-6 mb-8' ); ?>>
                    <!-- 文章标题 -->
                    <header class="entry-header mb-6">
                        <h1 class="entry-title text-2xl font-bold"><?php the_title(); ?></h1>
                        <!-- 文章日期、分类 -->
                        <div class="entry-meta text-sm text-gray-500 mt-4">
                            <span><i class="fa fa-calendar-o mr-2"></i><?php the_date( 'Y年m月d日' ); ?></span>
                            <span class="ml-4"><i class="fa fa-folder-o mr-2"></i><?php the_category( '，' ); ?></span>
                        </div>
                    </header>

                    <!-- 文章内容 -->
                    <div class="entry-content text-gray-700 leading-relaxed">
                        <?php the_content(); ?>
                    </div>

                    <!-- 上下篇导航 -->
                    <nav class="post-navigation mt-8 flex justify-between">
                        <div><?php previous_post_link( '上一篇：%link' ); ?></div>
                        <div><?php next_post_link( '下一篇：%link' ); ?></div>
                    </nav>
                </article>

                <!-- 评论区 -->
                <?php if ( comments_open() ) : ?>
                    <div class="comments-area bg-white rounded-xl p-6">
                        <?php comments_template(); ?>
                    </div>
                <?php endif; ?>
            <?php endwhile; ?>
        <?php else : ?>
            <div class="bg-white rounded-xl p-6 text-center">
                <p class="text-gray-600">未找到相关文章</p>
            </div>
        <?php endif; ?>
    </main>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

分类页（category.php） 

<?php get_header(); ?>

<div class="content-area max-w-4xl mx-auto px-4 py-8">
    <main class="site-main">
        <!-- 分类标题和描述 -->
        <header class="page-header mb-8 text-center">
            <h1 class="page-title text-2xl font-bold">分类：<?php single_cat_title(); ?></h1>
            <?php if ( category_description() ) : ?>
                <div class="category-description mt-4 text-gray-600">
                    <?php echo category_description(); ?>
                </div>
            <?php endif; ?>
        </header>

        <!-- 分类文章列表 -->
        <?php if ( have_posts() ) : ?>
            <div class="posts-list grid grid-cols-1 md:grid-cols-2 gap-6">
                <?php while ( have_posts() ) : the_post(); ?>
                    <article id="post-<?php the_ID(); ?>" <?php post_class( 'bg-white rounded-xl overflow-hidden shadow-sm' ); ?>>
                        <!-- 文章缩略图 -->
                        <?php if ( has_post_thumbnail() ) : ?>
                            <a href="<?php the_permalink(); ?>">
                                <?php the_post_thumbnail( 'medium', array( 'class' => 'w-full h-48 object-cover' ) ); ?>
                            </a>
                        <?php endif; ?>

                        <div class="p-5">
                            <h2 class="entry-title text-lg font-semibold mb-2">
                                <a href="<?php the_permalink(); ?>" class="text-gray-800 hover:text-primary">
                                    <?php the_title(); ?>
                                </a>
                            </h2>
                            <div class="entry-meta text-xs text-gray-500 mb-3">
                                <?php the_date( 'Y年m月d日' ); ?>
                            </div>
                            <div class="entry-summary text-sm text-gray-600 line-clamp-3">
                                <?php the_excerpt(); ?>
                            </div>
                            <a href="<?php the_permalink(); ?>" class="inline-block mt-4 text-primary text-sm">
                                查看详情 <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </article>
                <?php endwhile; ?>
            </div>

            <!-- 分页 -->
            <div class="pagination mt-10 flex justify-center">
                <?php
                the_posts_pagination( array(
                    'prev_text' => '<i class="fa fa-angle-left"></i> 上一页',
                    'next_text' => '下一页 <i class="fa fa-angle-right"></i>'
                ) );
                ?>
            </div>
        <?php else : ?>
            <div class="bg-white rounded-xl p-8 text-center">
                <i class="fa fa-folder-open text-gray-300 text-4xl mb-4"></i>
                <p class="text-gray-600">该分类下暂无文章</p>
            </div>
        <?php endif; ?>
    </main>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

页面模板（page.php） 

<?php get_header(); ?>

<div class="content-area max-w-4xl mx-auto px-4 py-8">
    <main class="site-main">
        <?php if ( have_posts() ) : ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <article id="post-<?php the_ID(); ?>" <?php post_class( 'bg-white rounded-xl p-6 mb-8' ); ?>>
                    <!-- 页面标题 -->
                    <header class="entry-header mb-6">
                        <h1 class="entry-title text-2xl font-bold"><?php the_title(); ?></h1>
                    </header>

                    <!-- 页面内容 -->
                    <div class="entry-content text-gray-700 leading-relaxed">
                        <?php the_content(); ?>
                    </div>

                    <!-- 子页面列表（如有） -->
                    <?php
                    $child_pages = get_pages( array(
                        'child_of' => get_the_ID(),
                        'sort_column' => 'menu_order'
                    ) );
                    if ( $child_pages ) : ?>
                        <div class="child-pages mt-8 border-t border-gray-200 pt-6">
                            <h3 class="text-lg font-semibold mb-4">相关页面</h3>
                            <ul class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <?php foreach ( $child_pages as $child ) : ?>
                                    <li>
                                        <a href="<?php echo get_permalink( $child->ID ); ?>" class="text-primary hover:text-primary/80">
                                            <i class="fa fa-angle-right ml-1"></i> <?php echo $child->post_title; ?>
                                        </a>
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    <?php endif; ?>
                </article>

                <!-- 页面评论 -->
                <?php if ( comments_open() ) : ?>
                    <div class="comments-area bg-white rounded-xl p-6">
                        <?php comments_template(); ?>
                    </div>
                <?php endif; ?>
            <?php endwhile; ?>
        <?php else : ?>
            <div class="bg-white rounded-xl p-6 text-center">
                <p class="text-gray-600">未找到相关页面</p>
            </div>
        <?php endif; ?>
    </main>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>