如何在WordPress项目中定位对应HTML文件并修改标题与按钮链接
WordPress项目:页面标题与错误URL按钮定位修改指南
问题背景
刚接手基于Litho主题的WordPress项目,经验有限,需要修改页面标题(当前显示为big tag company)和页面内错误URL的按钮,但找不到对应代码位置。以下是提供的相关代码:
前端渲染后的头部HTML
<html lang="en-US" class="no-js"><head> <!-- keywords --> <meta charset="UTF-8"> <!-- viewport --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- profile --> <link rel="profile" href="https://gmpg.org/xfn/11"> <title> big tag company</title>
主题根模板头部代码
<!DOCTYPE html> <html <?php language_attributes(); ?> class="no-js"> <head> <!-- keywords --> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <!-- viewport --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <!-- profile --> <link rel="profile" href="https://gmpg.org/xfn/11" /> <?php wp_head(); ?> </head> <?php $litho_custom_attr_body = ''; if ( function_exists( 'litho_custom_attr_helper_obj' ) ) { ob_start(); litho_custom_attr_helper_obj()->attr( 'body' ); $litho_custom_attr_body = ob_get_contents(); ob_end_clean(); } ?> <body <?php body_class();?> <?php echo sprintf( '%s', $litho_custom_attr_body ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>> <?php if ( function_exists( 'wp_body_open' ) ) { wp_body_open(); } else { do_action( 'wp_body_open' ); } get_template_part( 'templates/header/header', 'wrapper' );
template/header.php代码
<?php /** * The template for displaying the main header builder * * @package Litho */ // Exit if accessed directly. if ( ! defined( 'ABSPATH' ) ) { exit; } $litho_data_sticky_column = ''; $litho_nav_class = array( 'header-common-wrapper', 'header-img' ); $litho_enable_header_general = litho_builder_customize_option( 'litho_enable_header_general', '1' ); $litho_enable_header = litho_builder_option( 'litho_enable_header', '1', $litho_enable_header_general ); $litho_header_section_id = litho_builder_option( 'litho_header_section', '', $litho_enable_header_general ); /* Main header section */ if ( 1 == $litho_enable_header && ! empty( $litho_header_section_id ) ) { $litho_header_sticky_type = get_post_meta( $litho_header_section_id, '_litho_header_sticky_type', true ); /* Header sticky type */ $litho_template_header_style = get_post_meta( $litho_header_section_id, '_litho_template_header_style', true ); /* Header style */ $litho_template_header_style = ( ! empty( $litho_template_header_style ) ) ? $litho_template_header_style : 'standard'; $litho_header_sticky_type = ( ! empty( $litho_header_sticky_type ) ) ? $litho_header_sticky_type : ''; $litho_nav_class[] = $litho_template_header_style; $litho_nav_class[] = 'navbar'; switch ( $litho_template_header_style ) { case 'standard': default: $litho_nav_class[] = 'navbar-expand-lg'; if ( ! empty( $litho_header_sticky_type ) ) { $litho_nav_class[] = $litho_header_sticky_type; } if ( 'no-sticky' != $litho_header_sticky_type ) { $litho_nav_class[] = 'fixed-top'; } break; case 'left-menu-classic': case 'left-menu-modern': $litho_nav_class[] = 'header-left-wrapper'; $litho_data_sticky_column = ' data-sticky_column'; break; } } $litho_header_wrapper_class = apply_filters( 'litho_main_header_wrapper_class', $litho_nav_class ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped $class = ( is_array( $litho_header_wrapper_class ) ) ? ' ' . implode( ' ', $litho_header_wrapper_class ) : ''; ?> <nav class="<?php echo esc_attr( $class );?>"<?php echo esc_attr( $litho_data_sticky_column );?>> <?php if ( current_user_can( 'edit_posts' ) && ! is_customize_preview() && ! empty( $litho_header_section_id ) ) { $edit_link = add_query_arg( array( 'post' => $litho_header_section_id, 'action' => 'elementor', ), admin_url( 'post.php' ) ); ?> <a href="<?php echo esc_url( $edit_link ); ?>" target="_blank" data-placement="right" title="<?php echo esc_attr__( 'Edit header section', 'litho' ) ?>" class="edit-litho-section edit-header litho-tooltip"> <i class="ti-pencil"></i> </a> <?php } ?> <?php do_action( 'theme_header' ); ?> </nav>
核心纠正:关于get_head()的误解
你提到的get_head()不存在,代码里的是WordPress核心动作钩子wp_head(),它会触发主题、插件挂载的回调函数,输出头部的标题、脚本、样式等内容。
一、修改页面标题的方法
1. 后台可视化修改(最快)
- 进入WordPress后台 → 设置 → 常规,修改「站点标题」和「副标题」,保存后前端标题会同步更新;
- 若为Litho主题专属设置,进入后台 → 外观 → 自定义,找到「站点标识」或「标题设置」板块直接修改。
2. 代码层面定位
如果是特定页面的自定义标题,可通过以下方式查找:
- 打开主题根目录下的
functions.php,全局搜索wp_title或document_title_parts钩子,这是主题修改标题的常用入口; - 查看Litho主题的
inc或framework目录,搜索「title」关键词,找到主题自定义的标题处理逻辑。
二、定位并修改错误URL的按钮
从template/header.php代码能看出,头部是通过Elementor可视化构建的:
1. 直接通过Elementor编辑
- 登录管理员账号后,前端页面头部会显示「编辑」按钮(对应代码里的
.edit-litho-section),点击后进入Elementor编辑器,找到目标按钮组件修改URL即可。
2. 代码/数据库层面查找
- 若Elementor入口不可用,可在数据库
wp_posts表中,搜索post_type为elementor_library的记录,找到标题含「Header」的条目查看内容; - 查看主题
templates/header目录下的关联文件,比如header-wrapper.php(代码里通过get_template_part( 'templates/header/header', 'wrapper' )加载)。
三、查找wp_head()的关联回调函数
wp_head()是WordPress核心钩子,所有挂载到它的函数都会在这里执行,查找方法:
- 全局搜索项目文件:用代码编辑器的全局搜索功能,搜索
add_action( 'wp_head',找到所有自定义回调函数; - Litho主题特定查找:在主题
inc目录下搜索wp_head,定位主题专属的头部输出逻辑; - WordPress核心默认内容:核心本身会通过
wp_head()输出字符集、RSS链接等,但你的页面标题大概率是主题通过该钩子添加的。
内容的提问来源于stack exchange,提问作者RAMI
相关产品推荐
相关产品推荐

