如何在WordPress中自定义特定页面及文章列表？新手求助

方案一：无插件自定义实现（适合有前端基础的你） #

依托你掌握的HTML/CSS/JS知识，这种方式灵活性最高，无需依赖第三方插件。

1. 人员信息展示页面（照片、邮箱、姓名） #

• 步骤1：创建「人员信息」自定义文章类型
  在当前主题的functions.php文件末尾添加以下代码，WP后台会新增「人员信息」管理入口：

  function create_person_post_type() {
    register_post_type('person',
      array(
        'labels' => array(
          'name' => __('人员信息'),
          'singular_name' => __('人员')
        ),
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'editor', 'thumbnail'),
        'rewrite' => array('slug' => 'people'),
      )
    );
  }
  add_action('init', 'create_person_post_type');
  

  后续在后台添加人员时，用「标题」存姓名，「特色图片」存照片，「编辑器」或自定义字段存邮箱。

• 步骤2：创建自定义页面模板
  在主题文件夹内新建page-people.php文件，写入以下代码实现人员信息循环展示：

  <?php get_header(); ?>
  <div class="people-container">
    <?php
    $args = array(
      'post_type' => 'person',
      'posts_per_page' => -1
    );
    $people_query = new WP_Query($args);
    if ($people_query->have_posts()) :
      while ($people_query->have_posts()) : $people_query->the_post();
    ?>
      <div class="person-card">
        <?php if (has_post_thumbnail()) : ?>
          <div class="person-photo">
            <?php the_post_thumbnail('medium'); ?>
          </div>
        <?php endif; ?>
        <h3 class="person-name"><?php the_title(); ?></h3>
        <p class="person-email"><?php echo get_post_meta(get_the_ID(), 'person_email', true); ?></p>
      </div>
    <?php
      endwhile;
      wp_reset_postdata();
    endif;
    ?>
  </div>
  <?php get_footer(); ?>
  

  其中person_email是自定义字段，可在后台「屏幕选项」中勾选「自定义字段」手动添加，或用轻量插件Advanced Custom Fields可视化配置。

• 步骤3：CSS美化布局
  在主题style.css中添加样式，调整卡片排版：

  .people-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
  }
  .person-card {
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
  }
  .person-photo img {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin: 0 auto 10px;
  }
  

2. 课程信息展示页面（标题、日期、描述） #

• 步骤1：创建「课程信息」自定义文章类型
  同样在functions.php中添加：

  function create_course_post_type() {
    register_post_type('course',
      array(
        'labels' => array(
          'name' => __('课程信息'),
          'singular_name' => __('课程')
        ),
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'editor', 'custom-fields'),
        'rewrite' => array('slug' => 'courses'),
      )
    );
  }
  add_action('init', 'create_course_post_type');
  

• 步骤2：创建自定义页面模板
  新建page-courses.php文件，实现课程列表展示：

  <?php get_header(); ?>
  <div class="courses-container">
    <?php
    $args = array(
      'post_type' => 'course',
      'posts_per_page' => -1,
      'orderby' => 'meta_value',
      'meta_key' => 'course_date',
      'order' => 'ASC'
    );
    $courses_query = new WP_Query($args);
    if ($courses_query->have_posts()) :
      while ($courses_query->have_posts()) : $courses_query->the_post();
        $course_date = get_post_meta(get_the_ID(), 'course_date', true);
        $formatted_date = date('Y-m-d', strtotime($course_date));
    ?>
      <div class="course-card">
        <h2 class="course-title"><?php the_title(); ?></h2>
        <p class="course-date">日期：<?php echo $formatted_date; ?></p>
        <div class="course-description"><?php the_content(); ?></div>
      </div>
    <?php
      endwhile;
      wp_reset_postdata();
    endif;
    ?>
  </div>
  <?php get_footer(); ?>
  

  course_date为存储课程日期的自定义字段，添加方式和人员邮箱一致。

• 步骤3：CSS美化布局

  .courses-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  .course-card {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
  }
  .course-title {
    color: #2c3e50;
    margin-bottom: 10px;
  }
  .course-date {
    color: #7f8c8d;
    font-size: 0.9em;
    margin-bottom: 15px;
  }
  

方案二：插件快速实现（适合不想写代码的场景） #

如果不想折腾代码，可通过以下组合快速搭建：

• 人员信息页面：用Profile Builder或WP User Frontend，可视化配置人员档案字段，直接生成展示页面。
• 课程信息页面：用Custom Post Type UI创建课程自定义文章类型，搭配Advanced Custom Fields添加日期等字段，无需编写代码即可完成配置；若为在线课程，可直接用LearnPress这类专用插件。

注意事项 #

• 修改主题核心文件前，建议使用子主题，避免主题更新导致代码丢失；或提前备份functions.php文件。
• 自定义字段操作若嫌麻烦，Advanced Custom Fields是轻量且易用的选择，可可视化添加各类字段。

内容的提问来源于stack exchange，提问作者Oscar Gonzalez