最近把博客打包成了app，才发现是有点不太方便，不太方便搜索。

WordPress主题移动端新增搜索框&搜索地址输出为IP域名的问题

一、问题概述

自用Layui风格WordPress主题存在两个遗留问题：

1. 桌面端自带搜索框，移动端完全隐藏，手机浏览无法搜索内容；

2. 主题原生搜索表单使用$_SERVER['SERVER_NAME'] 获取地址，反向代理/宝塔环境下会输出服务器真实IP，暴露服务器地址，不安全且不美观。

本次修改做到：移动端独享搜索功能、全站搜索统一域名URL、不改动PC端原有布局。

二、修复点1：彻底解决搜索结果IP暴露问题

问题原因

主题自定义搜索函数 get_search_obj() 位于 inc/obj.php，表单地址采用服务器变量获取，反向代理环境下优先输出IP。

原代码

function get_search_obj()
{
    ?>
    <form class="search-form" action="//<?php echo $_SERVER['SERVER_NAME']; ?>" method="get" role="search">
        <div class="toolbar-search"><input type="text" name="s" value="" placeholder="搜索内容"></div>
    </form>
    <?php
}

修复后代码

function get_search_obj()
{
    ?>
    <form class="search-form" action="<?php echo esc_url( home_url('/') ); ?>" method="get" role="search">
        <div class="toolbar-search"><input type="text" name="s" value="" placeholder="搜索内容"></div>
    </form>
    <?php
}

修改说明

1. 废弃 $_SERVER['SERVER_NAME'] 动态服务器变量，规避IP输出；

2. 使用WordPress官方函数 home_url()，强制读取后台设置的官方域名；

3. esc_url() 安全过滤，符合WP开发规范，杜绝URL异常。

修改后：全站顶部原生搜索框搜索结果统一为 域名/?s=关键词，不再泄露服务器IP。

三、修复点2：移动端专属搜索框（分页下方）

实现需求

PC端保留原有右上角搜索框，仅移动端显示分页底部搜索框，不重复、不冲突，补齐移动端搜索空白。

核心新增代码（index.php 分页区域）

<!-- 移动端专属搜索框 - PC端自动隐藏 -->
<div class="mobile-only-search" style="margin-top:12px;">
    <form action="<?php echo esc_url( home_url('/') ); ?>" method="get" style="display:inline-flex;gap:5px;align-items:center;margin:0;">
        <input type="text" name="s" placeholder="搜索关键词" style="padding:3px 6px; border:1px solid #ddd; border-radius:3px; font-size:14px;width:200px;">
        <button type="submit" style="padding:3px 8px;border:1px solid #ddd;border-radius:3px;background:#f8f8f8;cursor:pointer;font-size:14px;">搜索</button>
    </form>
</div>

四、显示效果

封面