通过移动设备上的Chrome / Safari的Google CSE故障,单击“搜索”图标/菜单图标。如何使Google CSE默认主题搜索

问题描述 投票:0回答:1

更新:我还发现它是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。

我在编码方面是新手,很乐意对我的工作或任何人可以向正确的方向指出我的反馈!感谢您给我的时间以及我所获得的任何帮助。希望这将是一件容易修复的事情。

这很长,但是我尽力做到尽可能地描述。我希望我很清楚,易于理解,并回答了您所有的问题。谢谢!

谢谢,

乔什

javascript php css google-chrome google-custom-search
1个回答
0
投票

我找到了解决该问题的方法。在另一个论坛上,有人说这听起来像脚本,当您单击该图标时,该脚本应该触发。确实是这样。名为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。

我不确定我的修复程序是否合适,但是可以正常工作!

© www.soinside.com 2019 - 2024. All rights reserved.