如何自定义修改LearnPress默认archive-course.php页面的样式与功能

1 基础结构逻辑说明 #

• LearnPress采用WordPress钩子机制实现模板逻辑解耦，你看到的archive-course.php只是页面入口文件，90%以上的布局、功能逻辑都通过钩子函数挂载实现，并未直接写在该文件内
• 正式修改前先完成模板覆盖：将wp-content/plugins/learnpress/templates/archive-course.php复制到wp-content/themes/你的当前子主题/learnpress/archive-course.php路径下，后续修改子主题内的该文件即可，避免插件更新覆盖你的修改

2 样式调整方案 #

如果仅需修改视觉样式无需调整功能，无需修改PHP代码：

• 用浏览器开发者工具的元素审查功能，定位你需要调整的模块对应的CSS类名，常见默认类名如下：
  • 课程列表容器：.lp-archive-courses
  • 单个课程卡片：.lp-course-card
  • 顶部排序筛选栏：.lp-courses-ordering
  • 分页控件：.lp-pagination
• 将自定义CSS代码写入子主题style.css文件，或者WordPress后台「外观-自定义-额外CSS」面板即可生效，示例如下：

/* 修改课程卡片圆角、内边距 */
.lp-archive-courses .lp-course-card {
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 24px;
}

3 功能与结构调整方案 #

3.1 移除默认模块 #

如果要删除页面自带的某个功能模块，在子主题functions.php中添加移除对应钩子的代码即可，注意优先级参数要和原挂载参数一致才能生效，示例：

// 移除顶部排序筛选栏
remove_action( 'learn-press/before-courses-loop', 'learn_press_course_ordering', 10 );
// 移除课程列表分页
remove_action( 'learn-press/after-courses-loop', 'learn_press_courses_pagination', 10 );

3.2 新增自定义内容 #

如果要在页面指定位置插入自定义内容，将你自己的函数挂载到对应钩子即可，示例：

// 在课程列表顶部插入自定义提示
add_action( 'learn-press/before-courses-loop', 'custom_archive_top_notice', 5 );
function custom_archive_top_notice() {
  echo '<div class="custom-top-notice">提示：所有课程购买后永久有效，支持无限次回放</div>';
}

3.3 修改课程卡片结构 #

如果要调整单个课程卡片的输出字段、布局，不要修改archive-course.php，复制wp-content/plugins/learnpress/templates/content-course.php到子主题wp-content/themes/你的当前子主题/learnpress/content-course.php路径下，直接修改该文件内的代码即可。

3.4 调整课程查询规则 #

如果要修改默认的课程筛选逻辑（比如默认只显示在售课程、按销量排序），通过pre_get_posts钩子修改主查询参数即可，示例代码写入子主题functions.php：

add_action( 'pre_get_posts', 'custom_lp_course_archive_query' );
function custom_lp_course_archive_query( $query ) {
    // 仅对前端课程归档页的主查询生效
    if ( $query->is_main_query() && is_post_type_archive( 'lp_course' ) && ! is_admin() ) {
        // 示例：默认按销量从高到低排序
        $query->set( 'meta_key', '_lp_sales' );
        $query->set( 'orderby', 'meta_value_num' );
        $query->set( 'order', 'DESC' );
    }
}

4 调试技巧 #

• 要查找某个模块对应的钩子与挂载函数，直接在LearnPress插件目录下搜索对应do_action的钩子名称，即可查到原始挂载的函数名、优先级参数
• 不确定钩子对应位置时，可在目标do_action代码附近插入测试注释，刷新页面后查看前端源代码确认位置是否正确

内容的提问来源于stack exchange，提问作者Sabbir Ahmed Talukdar