WordPress 如何在搜尋表單中插入跨度？

問題描述

當我呼叫 get_search_form()時，它輸出：

<form class="search-form">
  <meta itemprop="target">
  <input type="search">
  <input type="submit">
</form>

但是我想讓它生成一個 span 裡面，像：

<form class="search-form">
  <meta itemprop="target">
  <input type="search">
  <span class="submit-icon"></span>
  <input type="submit">
</form>

有任何想法嗎？

最佳解決方案

如果我們檢視 get_search_form()的原始碼，請注意在表單渲染之前，search_form_format 過濾器鉤子被觸發。我們可以使用它來新增附加到 get_search_form 的另一個過濾器，其中回撥依賴於格式。

add_filter( 'search_form_format', 'wpse_259716_search_form_format', 99, 1 );
function wpse_259716_search_form_format( $format ) {
  if( in_array( $format, array( 'xhtml', 'html5' ) ) ) {
    add_filter( 'get_search_form', "wpse_259716_get_search_form_$format", 99, 1 );
  }
  return $format;
}

function wpse_259716_get_search_form_xhtml( $form ) {
  $search = '<input type="submit"';
  $xhtml = 'some xhtml';
  $replace = $xhtml . $search;
  return str_replace( $search, $replace, $form );
}

function wpse_259716_get_search_form_html5( $form ) {
  $search = '<input type="submit"';
  $html5 = 'some html5';
  $replace = $html5 . $search;
  return str_replace( $search, $replace, $form );
}

或者，您可以使用 class-based 方法。

$wpse_259716 = new wpse_259716();
add_filter( 'search_form_format', array( $wpse_259716, 'search_form_format' ), 99, 1 );
add_filter( 'get_search_form', array( $wpse_259716, 'get_search_form' ), 99, 1 );

class wpse_259716 {
  protected $format;
  public function search_form_format( $format ) {
    return $this->format = $format;
  }
  public function get_search_form( $form ) {
    $search = $replace = '<input type="submit"';
    if( 'xhtml' === $this->format ) {
      $xhtml = 'some xhtml';
      $replace = $xhmtl . $search;
    }
    elseif( 'html5' === $this->format ) {
      $html5 = 'some html5';
      $replace = $html5 . $search;
    }
    return str_replace( $search, $replace, $form );
  }
}

次佳解決方案

測試和工作正常。

將這段程式碼新增到 functions.php 中，你會得到你想要的。現在您可以根據需要修改搜尋表單。

function my_search_form( $form ) {
    $form = '<form role="search" method="get" class="search-form" action="' . home_url( '/' ) . '" >
    <div><label>
        <span class="screen-reader-text"> ' . _x( 'Search for:', 'label' ) .'</span>
        <input type="search" class="search-field"
            placeholder="' . get_search_query() . '"
            value="' . get_search_query().'" name="s"
            title="' . esc_attr_x( 'Search for:', 'label' ).' " />
    </label>
    <span class="submit-icon"></span>
    <input type="submit" class="search-submit"
        value="' . esc_attr_x( 'Search', 'submit button' ). '" />
      </form>
    ';

    return $form;
}
add_filter( 'get_search_form', 'my_search_form', 99 );
echo get_search_form();

第三種解決方案

您需要在主題中建立一個名為 searchform.php 的 php 檔案，然後只需複製並貼上下面的搜尋表單程式碼

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <label for="s" class="assistive-text"><?php _e( 'Search', 'theme_text_domain' ); ?></label>
        <input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'theme_text_domain' ); ?>" />
        <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'theme_text_domain' ); ?>" />
    </form>

現在您可以修改上述程式碼中刪除或插入任何內容的表單。

參考文獻

• How to insert a span inside a search form?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。