自定义 Wordpress 搜索表单模板 (Genesis)
Customizing Wordpress search form template (Genesis)
我想通过在搜索输入中添加 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" 这样的任何变量，所以无法定位该属性。估计要直接介绍了，所以我把parent主题文件夹里的search.php复制到child主题文件夹文件夹里
文件的原始代码如下：
<?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' ) . ' …' );
$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' ) . ' …' );
$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 );
}
它目前在主页上运行良好，但在任何其他页面上只生成 header 和标语。我可以直接编辑 parent 主题文件，但想要一个替代方案来避免搞砸一切。有任何见解或建议吗？
Documentation for get_search_form
我看到 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 主题对其进行了测试。
在这里你可以找到我的Dev Wordpress site with the genesis theme installed and you can inspect the search input box and see it has the autocomplete attribute set to off: http://wp.dev.lytrax.net/
下面是显示具有 autocomplete 属性的表单搜索输入元素的屏幕截图：
编辑 2
genesis-sample 主题，使用 HTML5 搜索表单，它在代码中包含一些 meta 标签，createDocumentFragment 元素可以使用 appendXML 处理这些标签，因此它会抛出许多警告并且无法继续。您看不到那些 PHP 警告，因为很可能您已禁用它们。请尝试我更新的代码。将其添加到 genesis-sample/functions.php 文件的末尾，并检查它是否添加了 autocomplete 属性。
我想通过在搜索输入中添加 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" 这样的任何变量，所以无法定位该属性。估计要直接介绍了，所以我把parent主题文件夹里的search.php复制到child主题文件夹文件夹里
文件的原始代码如下：
<?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' ) . ' …' );
$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' ) . ' …' );
$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 );
}
它目前在主页上运行良好，但在任何其他页面上只生成 header 和标语。我可以直接编辑 parent 主题文件，但想要一个替代方案来避免搞砸一切。有任何见解或建议吗？
Documentation for get_search_form
我看到 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 主题对其进行了测试。
在这里你可以找到我的Dev Wordpress site with the genesis theme installed and you can inspect the search input box and see it has the autocomplete attribute set to off: http://wp.dev.lytrax.net/
下面是显示具有 autocomplete 属性的表单搜索输入元素的屏幕截图：
编辑 2
genesis-sample 主题，使用 HTML5 搜索表单，它在代码中包含一些 meta 标签，createDocumentFragment 元素可以使用 appendXML 处理这些标签，因此它会抛出许多警告并且无法继续。您看不到那些 PHP 警告，因为很可能您已禁用它们。请尝试我更新的代码。将其添加到 genesis-sample/functions.php 文件的末尾，并检查它是否添加了 autocomplete 属性。