Google 通过 Chrome/Safari 在移动设备上单击搜索 Icon/Menu 图标时，CSE 出现故障。如何进行 Google CSE 默认主题搜索
Google CSE Malfunctions via Chrome/Safari on Mobile When clicking on either Search Icon/Menu Icon. How to Make Google CSE Default Theme Search
更新：我也发现除了Chrome之外还有Safari。
这是我找到的一些信息的更新。但首先，让我简要回顾一下 header 中的搜索问题。在我们的网站上通过 Google Chrome 移动设备或 Google Chrome 隐身桌面设备时，您触摸 header 突出显示中的搜索图标或菜单图标动画发生但搜索框不会填充。相反，它会在 URL 的末尾添加一个主题标签并将您跳到顶部。要解决此问题，您必须刷新页面。此外，一旦您提交搜索并进入搜索结果页面，然后单击菜单或搜索图标，它会添加一个主题标签、清除搜索结果并跳转到顶部。刷新页面将解决问题，但您的搜索结果将不存在。我无法通过 Mozilla Firefox 或移动版 Webroot Secure Anywhere 浏览器复制该问题。话虽如此，我已将其缩小到特定的浏览器。我还想提一下，搜索结果页面本身没有问题。搜索框和结果功能正常。
此外，我的目标是用 Google 自定义搜索替换我们主题在 header 中的搜索，我相信我可以用 searchform.php 文件来完成这个？我坚信它与 searchform.php and/or 和 search.php 文件（下面列出的两个原始代码）有关。我对如何更改 searchform.php 文件以添加 Google CSE 进行了一些研究，但我能找到的都是过时的文章。
如果您还不知道，我们使用 WordPress 并设置 Google CSE，使用默认主题将布局设置为紧凑，并添加了 CSS 来设置搜索框和结果的样式。我进行了 运行 多项测试，但只有一项结果有效。此外，在进行所有测试时我要注意的一件事是我通过浏览器和 Supercacher 为我的网站清除了缓存。更改主题有效。通过 Google Chrome 移动设备或桌面设备隐身都没有问题。我们的主题 BuddyBoss 有一个 search.php 文件和一个 searchform.php 文件。我切换到的主题只有一个 searchform.php 文件（不确定这是否重要）。我删除了 searchform.php 文件中的 PHP 并添加了以下代码（使用我的 Child 主题）：
<script>
(function() {
var cx = 'CSE ID';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only resultsUrl="https://www.example.com/"></gcse:searchbox-only>
我就此问题联系了 Google，他们告诉我我使用的是已弃用的代码，并给了我一个 link，其中提供了有关元素控件的详细信息 API https://developers.google.com/custom-search/docs/element .那是当我发现我的 searchform.php 文件中的上述代码是以前的版本时。然后，我按照 Google 的指示进行操作：
<!-- Put the following javascript before the closing </head> tag
and replace 123:456 with your own Custom Search engine ID. -->
<script async src="https://cse.google.com/cse.js?cx=123:456"></script>
<!-- Place this tag where you want both of the search box and the search results to render -->
<div class="gcse-search"></div>
然后我尝试保持 searchform.php 代码与我们的主题开发人员拥有它的方式相同：
<?php
/**
* The template for displaying search form
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
*
* @package BuddyBoss_Theme
*/
?>
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label>
<span class="screen-reader-text"><?php esc_html_e( 'Search for:', 'buddyboss-theme' ); ?></span>
<input type="search" class="search-field-top" placeholder="<?php echo esc_attr( apply_filters( 'search_placeholder', __( 'Search', 'buddyboss-theme' ) ) ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
</label>
<input type="submit" class="search-submit" value="<?php echo esc_attr_e( 'Search', 'buddyboss-theme' ); ?>" />
</form>
然后，我在我的 child 主题中创建了我自己的 search.php 并用来自 Google CSE
的 "Get Code" 代码填充了它
<script async src="https://cse.google.com/cse.js?cx=My ID"></script>
<div class="gcse-search"></div>
这是我们主题的 search.php 文件，如果有人觉得它有用的话：
/**
* The template for displaying search results pages
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
*
* @package BuddyBoss_Theme
*/
get_header();
$blog_type = 'standard'; // standard, grid, masonry.
$class = 'bb-standard';
?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php if ( have_posts() ) : ?>
<header class="page-header">
<h1 class="page-title">
<?php
/* translators: %s: search query. */
printf( esc_html__( "Showing results for '%s'", 'buddyboss-theme' ), '<span>' . get_search_query() . '</span>' );
?>
</h1>
</header><!-- .page-header -->
<div class="post-grid <?php echo esc_attr( $class ); ?>">
<?php
/* Start the Loop */
while ( have_posts() ) :
the_post();
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/content', apply_filters( 'bb_blog_content', get_post_format() ) );
endwhile;
?>
</div>
<?php
buddyboss_pagination();
else :
get_template_part( 'template-parts/content', 'none' );
?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar('search'); ?>
<?php
get_footer();
在 search.php 文件中执行该代码无效。在这一点上，我只是在尝试不同的东西并测试它们。我现在正在尝试熟悉 WordPress 的 get_search_form( array $args = array() ) 以便我可以了解如何在我们的网站 https://developer.wordpress.org/reference/functions/get_search_form/ 上实施我自己的 Google CSE。
我是编码方面的新手，希望收到任何关于我能做什么的反馈，或者如果有人能指出我正确的方向！我很感激你给我的时间以及我得到的任何帮助。希望这将是一件容易修复的事情。
这篇文章超长，但我尽量描述得淋漓尽致。我希望我是清楚的，容易理解的，并回答了你所有的问题。谢谢！
感谢和问候，
乔什
我找到了解决该问题的方法。在一个单独的论坛上，有人说这听起来像是当您单击该图标时应该触发的脚本正在倒塌。确实是这样。一个名为 SG Optimizer 的插件将代码添加到我的 .htaccess 文件中以延迟渲染阻塞 JS，所以我停用了该功能并且问题消失了。
我还想出了要在我的子主题的 searchform.php 文件中添加的内容。我稍微修改了我的主题代码，你可以比较一下：
我的主题 searchform.php 文件：
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label>
<span class="screen-reader-text"><?php esc_html_e( 'Search for:', 'buddyboss-theme' ); ?></span>
<input type="search" class="search-field-top" placeholder="<?php echo esc_attr( apply_filters( 'search_placeholder', __( 'Search', 'buddyboss-theme' ) ) ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
</label>
<input type="submit" class="search-submit" value="<?php echo esc_attr_e( 'Search', 'buddyboss-theme' ); ?>" />
</form>
我的代码：
<form role="search" class="search-form" action="<?php echo ( '/_search' ); ?>">
<label>
<span class="screen-reader-text"><?php esc_html_e( 'Search for:', 'buddyboss-theme' ); ?></span>
<input type="search" class="search-field-top" placeholder="<?php echo esc_attr( apply_filters( 'search_placeholder', __( 'Search', 'buddyboss-theme' ) ) ); ?>" value="<?php echo get_search_query(); ?>" name="q" />
</label>
</form>
如您所见，我去掉了 method="get"，删除了 /form 上方的 input type="submit" 行，将 name="s" 替换为 name= "q"，并在第一行更改回显 URL。在将结果执行到 Google CSE 时，我可以保留主题搜索框的样式。
我不确定我的修复是否合适，但它有效！
更新：我也发现除了Chrome之外还有Safari。
这是我找到的一些信息的更新。但首先，让我简要回顾一下 header 中的搜索问题。在我们的网站上通过 Google Chrome 移动设备或 Google Chrome 隐身桌面设备时，您触摸 header 突出显示中的搜索图标或菜单图标动画发生但搜索框不会填充。相反，它会在 URL 的末尾添加一个主题标签并将您跳到顶部。要解决此问题，您必须刷新页面。此外，一旦您提交搜索并进入搜索结果页面，然后单击菜单或搜索图标，它会添加一个主题标签、清除搜索结果并跳转到顶部。刷新页面将解决问题，但您的搜索结果将不存在。我无法通过 Mozilla Firefox 或移动版 Webroot Secure Anywhere 浏览器复制该问题。话虽如此，我已将其缩小到特定的浏览器。我还想提一下，搜索结果页面本身没有问题。搜索框和结果功能正常。
此外，我的目标是用 Google 自定义搜索替换我们主题在 header 中的搜索，我相信我可以用 searchform.php 文件来完成这个？我坚信它与 searchform.php and/or 和 search.php 文件（下面列出的两个原始代码）有关。我对如何更改 searchform.php 文件以添加 Google CSE 进行了一些研究，但我能找到的都是过时的文章。
如果您还不知道，我们使用 WordPress 并设置 Google CSE，使用默认主题将布局设置为紧凑，并添加了 CSS 来设置搜索框和结果的样式。我进行了 运行 多项测试，但只有一项结果有效。此外，在进行所有测试时我要注意的一件事是我通过浏览器和 Supercacher 为我的网站清除了缓存。更改主题有效。通过 Google Chrome 移动设备或桌面设备隐身都没有问题。我们的主题 BuddyBoss 有一个 search.php 文件和一个 searchform.php 文件。我切换到的主题只有一个 searchform.php 文件（不确定这是否重要）。我删除了 searchform.php 文件中的 PHP 并添加了以下代码（使用我的 Child 主题）：
<script>
(function() {
var cx = 'CSE ID';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only resultsUrl="https://www.example.com/"></gcse:searchbox-only>
我就此问题联系了 Google，他们告诉我我使用的是已弃用的代码，并给了我一个 link，其中提供了有关元素控件的详细信息 API https://developers.google.com/custom-search/docs/element .那是当我发现我的 searchform.php 文件中的上述代码是以前的版本时。然后，我按照 Google 的指示进行操作：
<!-- Put the following javascript before the closing </head> tag
and replace 123:456 with your own Custom Search engine ID. -->
<script async src="https://cse.google.com/cse.js?cx=123:456"></script>
<!-- Place this tag where you want both of the search box and the search results to render -->
<div class="gcse-search"></div>
然后我尝试保持 searchform.php 代码与我们的主题开发人员拥有它的方式相同：
<?php
/**
* The template for displaying search form
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
*
* @package BuddyBoss_Theme
*/
?>
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label>
<span class="screen-reader-text"><?php esc_html_e( 'Search for:', 'buddyboss-theme' ); ?></span>
<input type="search" class="search-field-top" placeholder="<?php echo esc_attr( apply_filters( 'search_placeholder', __( 'Search', 'buddyboss-theme' ) ) ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
</label>
<input type="submit" class="search-submit" value="<?php echo esc_attr_e( 'Search', 'buddyboss-theme' ); ?>" />
</form>
然后，我在我的 child 主题中创建了我自己的 search.php 并用来自 Google CSE
的 "Get Code" 代码填充了它<script async src="https://cse.google.com/cse.js?cx=My ID"></script>
<div class="gcse-search"></div>
这是我们主题的 search.php 文件，如果有人觉得它有用的话：
/**
* The template for displaying search results pages
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
*
* @package BuddyBoss_Theme
*/
get_header();
$blog_type = 'standard'; // standard, grid, masonry.
$class = 'bb-standard';
?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php if ( have_posts() ) : ?>
<header class="page-header">
<h1 class="page-title">
<?php
/* translators: %s: search query. */
printf( esc_html__( "Showing results for '%s'", 'buddyboss-theme' ), '<span>' . get_search_query() . '</span>' );
?>
</h1>
</header><!-- .page-header -->
<div class="post-grid <?php echo esc_attr( $class ); ?>">
<?php
/* Start the Loop */
while ( have_posts() ) :
the_post();
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/content', apply_filters( 'bb_blog_content', get_post_format() ) );
endwhile;
?>
</div>
<?php
buddyboss_pagination();
else :
get_template_part( 'template-parts/content', 'none' );
?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar('search'); ?>
<?php
get_footer();
在 search.php 文件中执行该代码无效。在这一点上，我只是在尝试不同的东西并测试它们。我现在正在尝试熟悉 WordPress 的 get_search_form( array $args = array() ) 以便我可以了解如何在我们的网站 https://developer.wordpress.org/reference/functions/get_search_form/ 上实施我自己的 Google CSE。
我是编码方面的新手，希望收到任何关于我能做什么的反馈，或者如果有人能指出我正确的方向！我很感激你给我的时间以及我得到的任何帮助。希望这将是一件容易修复的事情。
这篇文章超长，但我尽量描述得淋漓尽致。我希望我是清楚的，容易理解的，并回答了你所有的问题。谢谢！
感谢和问候，
乔什
我找到了解决该问题的方法。在一个单独的论坛上，有人说这听起来像是当您单击该图标时应该触发的脚本正在倒塌。确实是这样。一个名为 SG Optimizer 的插件将代码添加到我的 .htaccess 文件中以延迟渲染阻塞 JS，所以我停用了该功能并且问题消失了。
我还想出了要在我的子主题的 searchform.php 文件中添加的内容。我稍微修改了我的主题代码，你可以比较一下：
我的主题 searchform.php 文件：
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label>
<span class="screen-reader-text"><?php esc_html_e( 'Search for:', 'buddyboss-theme' ); ?></span>
<input type="search" class="search-field-top" placeholder="<?php echo esc_attr( apply_filters( 'search_placeholder', __( 'Search', 'buddyboss-theme' ) ) ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
</label>
<input type="submit" class="search-submit" value="<?php echo esc_attr_e( 'Search', 'buddyboss-theme' ); ?>" />
</form>
我的代码：
<form role="search" class="search-form" action="<?php echo ( '/_search' ); ?>">
<label>
<span class="screen-reader-text"><?php esc_html_e( 'Search for:', 'buddyboss-theme' ); ?></span>
<input type="search" class="search-field-top" placeholder="<?php echo esc_attr( apply_filters( 'search_placeholder', __( 'Search', 'buddyboss-theme' ) ) ); ?>" value="<?php echo get_search_query(); ?>" name="q" />
</label>
</form>
如您所见，我去掉了 method="get"，删除了 /form 上方的 input type="submit" 行，将 name="s" 替换为 name= "q"，并在第一行更改回显 URL。在将结果执行到 Google CSE 时，我可以保留主题搜索框的样式。
我不确定我的修复是否合适，但它有效！