WP DEVELOP

EP058. “清理 single-campus.php 遗留代码 + 修复归档页只查 10 篇的问题”

首页 WordPress 开发课程 GOOGLE MAPS 互动地图 · EP058
约 11 分钟· #EP058#GOOGLE MAPS 互动地图
🔒 登录后可标记已读

篇幅很短,做两件收尾的事:① single-campus.php 是当初复制 single-program.php 建的,里面还留着一段没用到的「查关联 event」的 WP_Query 和 while 循环(因为课程没有做 campus ↔ event 的关联关系,留着只会白白拖慢页面),直接删掉;② campus 归档页目前没有像 program/event 归档页那样在 university_adjust_queries() 里设置 posts_per_page => -1意味着一旦校区超过 WordPress 默认的 10 篇,地图就只会显示前 10 个点,这一讲把这个坑也用同一套写法补上。做完这两件事,Campus 文章类型这块就算收尾了,下一讲开始进入 Live Search(JS 驱动的即时搜索)章节。

涉及文件

  • wp-content/themes/fictional-university-theme/single-campus.php (修改,删掉没用到的 events 查询代码)
  • wp-content/themes/fictional-university-theme/functions.php (修改,university_adjust_queries() 新增 campus 归档页的查询调整)

代码实现


1. single-campus.php:删掉遗留的 events 查询

删掉 related_programs 查询和 wp_reset_postdata() 之间这一整段(复制 single-program.php 时带过来的,没有实际使用):

// wp-content/themes/fictional-university-theme/single-campus.php
// 删除:以下这段(复制 single-program.php 时遗留下来的 events 查询,campus 没有做跟 event 的关联,用不到)

$today = date('Ymd');
$homepageEvents = new WP_Query(array(
  'posts_per_page' => 2,
  'post_type' => 'event',
  'meta_key' => 'event_date',
  'orderby' => 'meta_value_num',
  'order' => 'ASC',
  'meta_query' => array(
    array(
      'key' => 'event_date',
      'compare' => '>=',
      'value' => $today,
      'type' => 'numeric'
    ),
    array(
      'key' => 'related_programs',
      'compare' => 'LIKE',
      'value' => '"' . get_the_ID() . '"'
    )
  )
));

if ($homepageEvents->have_posts()) {
  echo '<hr class="section-break">';
echo '<h2 class="headline headline--medium">Upcoming ' . get_the_title() . ' Events</h2>';

while($homepageEvents->have_posts()) {
  $homepageEvents->the_post();
  get_template_part('template-parts/content-event');
}
}

删完之后,最后剩下的自定义 PHP 就只有 $relatedPrograms 查询那一段,后面紧跟着的 wp_reset_postdata(); 保留(继续养成习惯性收尾)。


2. functions.php:给 campus 归档页也设置 posts_per_page => -1

// wp-content/themes/fictional-university-theme/functions.php

function university_adjust_queries($query) {
  // 新增:让 campus 归档页也查询全部文章,不受默认 10 篇分页限制
  if (!is_admin() AND is_post_type_archive('campus') AND $query->is_main_query()) {
    $query->set('posts_per_page', -1);
  }

  if (!is_admin() AND is_post_type_archive('program') AND $query->is_main_query()) {
    $query->set('orderby', 'title');
    $query->set('order', 'ASC');
    $query->set('posts_per_page', -1);
  }

  // ...event 那段维持不变
}

思路跟前面 program/event 归档页的查询调整完全一样:判断「不在后台 + 当前是 campus 归档页的主查询」时,把 posts_per_page 设成 -1(查询全部)。campus 不需要像 program 那样按标题排序,也不需要像 event 那样按日期筛选,所以只加了这一行。transcript 里提到调试时先临时把值改成 1 存盘验证「这段代码确实作用在这个查询上」,确认无误后再改回 -1(刷新后地图真的只剩一个点)。

Hook / Function 速查

名称类型用途
is_post_type_archive('campus') + pre_get_postsWP 内建 function + hook(沿用既有 university_adjust_queries()只在 campus 归档页的主查询上生效,设置 posts_per_page => -1

常见坑

  • single-campus.php 是复制 single-program.php 建的,如果不手动清理,会一直带着永远不会触发(或者说没有对应关联字段支撑)的 events 查询代码,白白拖慢页面。
  • WordPress 默认每次查询只拉 10 篇文章,campus 归档页如果不显式设置 posts_per_page => -1,校区一旦超过 10 个,地图就会漏掉后面的校区,这个坑在测试阶段(只有 2 篇校区)不会显现出来,要留意

延伸 / 后续讲座会用到

Campus 文章类型 + 交互地图到这里就完整收尾了。下一讲开始换到 Live Search(用 JavaScript 做即时搜索结果)这个新主题。

Sources

Udemy:

  • Become a WordPress Developer: Unlocking Power With Code — Section 12, EP058