更新:我还发现它是Chrome之外的Safari。
这里是我发现的一些信息的更新。但是首先,让我简短地介绍一下标题中的搜索所遇到的问题。在我们的网站上通过移动版Google Chrome或桌面版Google Chrome隐身浏览我们的网站时,如果您触摸标题中的搜索图标或菜单图标,则会出现突出显示的动画,但不会填充搜索框。相反,它在URL的末尾添加了一个标签,并将您跳到顶部。要解决此问题,您必须刷新页面。此外,提交搜索后,您会进入搜索结果页面,然后单击菜单或搜索图标,它会添加井号标签,清除搜索结果并将您跳到顶部。页面刷新将解决问题,但您的搜索结果将不存在。我无法通过Mozilla Firefox或Webroot Secure Anywhere浏览器移动版复制该问题。话虽如此,我已将其范围缩小到特定的浏览器。我还想提到搜索结果页面本身没有问题。搜索框和结果按其应有的作用。
此外,我的目标是将标题中主题的搜索替换为Google自定义搜索,我相信我可以使用searchform.php文件来实现这一目标?我坚信这与searchform.php和/或search.php文件(下面列出的两个原始代码)有关。我已经完成了一些有关如何更改searchform.php文件以添加Google CSE的研究,而我所能找到的都是过时的文章。
[如果您还不知道,我们将使用WordPress,并使用默认主题将Layout设置为Compact,然后设置Google CSE,并添加CSS来设置搜索框和搜索结果的样式。我已经进行了几次测试,但只有一个结果占了上风。另外,我在进行所有测试时要注意的一件事是,我通过浏览器和Supercacher清除了网站的缓存。更改主题有效。通过移动版Google Chrome或台式机隐身版没有问题。我们的主题BuddyBoss具有search.php文件和searchform.php文件。我切换到的主题只有一个searchform.php文件(不确定是否很重要)。我删除了searchform.php文件中的PHP,并添加了以下代码(使用我的子主题):
<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联系,他们告诉我我正在使用不推荐使用的代码,并给了我一个链接,其中提供了有关Element Control 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>
然后,我在子主题中创建了自己的search.php,并使用Google CSE的“获取代码”代码进行了填写
<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>
您可以看到我摆脱了方法=“ get”,删除了/ form上方的输入type =“ submit”行,将name =“ s”替换为name =“ q”,并在第一行我更改回显URL。我可以保留主题搜索框的样式,同时将其结果执行到Google CSE。
我不确定我的修复程序是否合适,但是可以正常工作!