自定义Wordpress搜索表单模板（Genesis）

时间：2017-03-08 13:18:49

标签： php wordpress genesis search-form

我想通过在搜索输入中添加autocomplete="off"来稍微更改搜索表单。

我最初寻找一个简单的过滤器，如下所示：

//* Customize search form input box text
add_filter( 'genesis_search_text', 'sp_search_text' );
function sp_search_text( $text ) {
    return esc_attr( 'Search my blog...' );
}

但由于/genesis/lib/structure/search.php没有像autocomplete="%s"这样的变量，因此该属性无法定位。我可能不得不直接介绍它，所以我将search.php从父主题文件夹复制到子主题文件夹文件夹。

该文件的原始代码如下：

<?php

/**
 * Replace the default search form with a Genesis-specific form.
 *
 * The exact output depends on whether the child theme supports HTML5 or not.
 *
 * Applies the `genesis_search_text`, `genesis_search_button_text`, `genesis_search_form_label` and
 * `genesis_search_form` filters.
 *
 * @since 0.2.0
 *
 * @return string HTML markup for search form.
 */

add_filter( 'get_search_form', 'genesis_search_form' );

function genesis_search_form() {
    $search_text = get_search_query() ? apply_filters( 'the_search_query', get_search_query() ) : apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) . ' &#x02026;' );

    $button_text = apply_filters( 'genesis_search_button_text', esc_attr__( 'Search', 'genesis' ) );

    $onfocus = "if ('" . esc_js( $search_text ) . "' === this.value) {this.value = '';}";
    $onblur  = "if ('' === this.value) {this.value = '" . esc_js( $search_text ) . "';}";

    // Empty label, by default. Filterable.
    $label = apply_filters( 'genesis_search_form_label', '' );

    $value_or_placeholder = ( get_search_query() == '' ) ? 'placeholder' : 'value';

    if ( genesis_html5() ) {

        $form  = sprintf( '<form %s>', genesis_attr( 'search-form' ) );

        if ( genesis_a11y( 'search-form' ) ) {

            if ( '' == $label )  {
                $label = apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) );
            }

            $form_id = uniqid( 'searchform-' );

            $form .= sprintf(
                '<meta itemprop="target" content="%s"/><label class="search-form-label screen-reader-text" for="%s">%s</label><input itemprop="query-input" type="search" name="s" id="%s" %s="%s" /><input type="submit" value="%s" /></form>',
                home_url( '/?s={s}' ),
                esc_attr( $form_id ),
                esc_html( $label ),
                esc_attr( $form_id ),
                $value_or_placeholder,
                esc_attr( $search_text ),
                esc_attr( $button_text )
            );

        } else {

            $form .= sprintf(
                '%s<meta itemprop="target" content="%s"/><input itemprop="query-input" type="search" name="s" %s="%s" /><input type="submit" value="%s"  /></form>',
                esc_html( $label ),
                home_url( '/?s={s}' ),
                $value_or_placeholder,
                esc_attr( $search_text ),
                esc_attr( $button_text )
            );
        }


    } else {

        $form = sprintf(
            '<form method="get" class="searchform search-form" action="%s" role="search" >%s<input type="text" value="%s" name="s" class="s search-input" onfocus="%s" onblur="%s" /><input type="submit" class="searchsubmit search-submit" value="%s" /></form>',
            home_url( '/' ),
            esc_html( $label ),
            esc_attr( $search_text ),
            esc_attr( $onfocus ),
            esc_attr( $onblur ),
            esc_attr( $button_text )
        );

    }

    return apply_filters( 'genesis_search_form', $form, $search_text, $button_text, $label );

}

然后我删除了原始过滤器并添加了我的过滤器：

remove_filter( 'get_search_form', 'genesis_search_form' );

add_filter( 'get_search_form', 'my_search_form' );

并将autocomplete="off"添加到搜索输入中，因此当前为：

<?php

/**
 * Replace the default search form with a Genesis-specific form.
 *
 * The exact output depends on whether the child theme supports HTML5 or not.
 *
 * Applies the `genesis_search_text`, `genesis_search_button_text`, `genesis_search_form_label` and
 * `genesis_search_form` filters.
 *
 * @since 0.2.0
 *
 * @return string HTML markup for search form.
 */

remove_filter( 'get_search_form', 'genesis_search_form' );

add_filter( 'get_search_form', 'my_search_form' );

function my_search_form() {
    $search_text = get_search_query() ? apply_filters( 'the_search_query', get_search_query() ) : apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) . ' &#x02026;' );

    $button_text = apply_filters( 'genesis_search_button_text', esc_attr__( 'Search', 'genesis' ) );

    $onfocus = "if ('" . esc_js( $search_text ) . "' === this.value) {this.value = '';}";
    $onblur  = "if ('' === this.value) {this.value = '" . esc_js( $search_text ) . "';}";

    // Empty label, by default. Filterable.
    $label = apply_filters( 'genesis_search_form_label', '' );

    $value_or_placeholder = ( get_search_query() == '' ) ? 'placeholder' : 'value';

    if ( genesis_html5() ) {

        $form  = sprintf( '<form %s>', genesis_attr( 'search-form' ) );

        if ( genesis_a11y( 'search-form' ) ) {

            if ( '' == $label )  {
                $label = apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) );
            }

            $form_id = uniqid( 'searchform-' );

            $form .= sprintf(
                '<meta itemprop="target" content="%s"/><label class="search-form-label screen-reader-text" for="%s">%s</label><input itemprop="query-input" type="search" name="s" id="%s" %s="%s" autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="off" dir="auto" /><input type="submit" value="%s" /></form>',
                home_url( '/?s={s}' ),
                esc_attr( $form_id ),
                esc_html( $label ),
                esc_attr( $form_id ),
                $value_or_placeholder,
                esc_attr( $search_text ),
                esc_attr( $button_text )
            );

        } else {

            $form .= sprintf(
                '%s<meta itemprop="target" content="%s"/><input itemprop="query-input" type="search" name="s" %s="%s" autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="off" dir="auto" /><input type="submit" value="%s"  /></form>',
                esc_html( $label ),
                home_url( '/?s={s}' ),
                $value_or_placeholder,
                esc_attr( $search_text ),
                esc_attr( $button_text )
            );
        }


    } else {

        $form = sprintf(
            '<form method="get" class="searchform search-form" action="%s" role="search" >%s<input type="text" value="%s" name="s" class="s search-input" onfocus="%s" onblur="%s" autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="off" dir="auto" /><input type="submit" class="searchsubmit search-submit" value="%s" /></form>',
            home_url( '/' ),
            esc_html( $label ),
            esc_attr( $search_text ),
            esc_attr( $onfocus ),
            esc_attr( $onblur ),
            esc_attr( $button_text )
        );

    }

    return apply_filters( 'my_search_form', $form, $search_text, $button_text, $label );

}

它目前在主页上完美运行，但在任何其他页面中只生成标题和标语。我可以直接编辑父主题文件，但想要一个替代方案，以避免搞乱一切。任何见解或建议？

Documentation for get_search_form

Documentation for genesis_search_form

Documentation for Genesis Snippets

1 个答案:

答案 0 :(得分：1)

我发现genesis_search_form函数最后应用了genesis_search_form过滤器。您可以使用它来操作表单，并在新过滤器中使用genesis_search_form来添加所需的DOMDocument属性，而不是重写整个autocomplete函数。在您的子主题functions.php中尝试以下代码，看看它是否有效：

add_filter( 'genesis_search_form', 'my_search_form_filter', 5 );
function my_search_form_filter($form) {

    $document = new DOMDocument();
    $document->loadHTML($form);
    $xpath = new DOMXPath($document);
    $input = $xpath->query('//input[@name="s"]');
    if ($input->length > 0) {
        $input->item(0)->setAttribute('autocomplete', 'off');
    }

    # remove <!DOCTYPE 
    $document->removeChild($document->doctype); 
    # remove <html><body></body></html> 
    $document->replaceChild($document->firstChild->firstChild->firstChild, $document->firstChild);
    $form_html = $document->saveHTML();

    return $form_html;
}

请勿忘记禁用禁用默认get_search_form过滤器的代码并添加您的代码。

修改

之前的代码错误，请使用最新的上述代码进行更新。我已使用genesis和genesis-child主题对其进行了测试。

在这里，您可以找到安装了genesis主题的Dev Wordpress网站，您可以检查搜索输入框，看其autocomplete属性设置为off： http://wp.dev.lytrax.net/

这是一个屏幕截图，显示了具有autocomplete属性的表单搜索输入元素：

Wordpress screenshot

编辑2

genesis-sample主题使用HTML5搜索表单，它在meta元素可以使用createDocumentFragment处理的代码中包含一些appendXML标记，因此会引发许多警告它无法继续。您无法看到这些PHP警告，因为很可能您已将其禁用。请尝试我的更新代码。将其添加到genesis-sample/functions.php文件的末尾，并检查它是否添加了autocomplete属性。

相关问题
最新问题