【Cocoon】ウィジェット検索のカスタマイズ

INDEX

WordPressテーマ Cocoon
1. WordPressテーマ Cocoon ウィジェット検索
ウィジェット検索のカスタマイズ
1. カスタマイズ後のウィジェット検索
最後に

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | WordPressとPCのある生活を楽しむための情報発信サイト

WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。

今回は、WordPressテーマ Cocoonでの「ウィジェット検索」のカスタマイズについてまとめてみました。

WordPressテーマ Cocoon ウィジェット検索

現在のWordPressテーマ Cocoonでの「ウィジェット検索」のスタイルは、次の様になっています。

特に問題の無い「ウィジェット検索」です。

自分の場合、このように「ウィジェット検索」のタイトルを【MASAa.net内検索】として設定しています。

そこで「ウィジェット検索」内の【サイト内を検索】文字列を【MASAa.net内を検索】文字列に変更することで、わざわざタイトルを表示しなくても済みます。

と言うことで、今回「ウィジェット検索」内の【サイト内を検索】文字列を変更するカスタマイズを行います。

ウィジェット検索のカスタマイズ

WordPressテーマ Cocoonでの「ウィジェット検索」のカスタマイズを行います。

親テーマフォルダ「cocoon-master」内にあるファイル「searchform.php」を一旦自分のパソコン内に保存します。

ファイル「searchform.php」をエディタソフトで開き、【サイト内を検索】の文字列を見つけます。

この【サイト内を検索】の文字列を任意の文字列に変更しファイルを保存します。

参照：この場合【サイト内を検索】を【MASAa.net内を検索】に変更しています（このソースはコピーしないで下さい）。
<?php //検索フォーム
/**
* Cocoon WordPress Theme
* @author: yhira
* @link: https://wp-cocoon.com/
* @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
*/
if ( !defined( 'ABSPATH' ) ) exit;

if (!is_amp() || !is_ssl()): ?>
<form class="search-box input-box" method="get" action="<?php echo home_url('/'); ?>">
<?php else: ?>
<form class="amp-form search-box" method="get" action="<?php echo home_url('/'); ?>" target="_top">
<?php endif ?>
<input type="text" placeholder="<?php _e( 'MASAa.net内を検索', THEME_NAME ) ?>" name="s" class="search-edit" aria-label="input">
<button type="submit" class="search-submit" aria-label="button"><span class="fa fa-search" aria-hidden="true"></span></button>
</form>

次に保存したファイル「searchform.php」を、サーバーの子テーマフォルダ「cocoon-child-master」フォルダ内にアップロードします。

これで文字列の変更が完了しました。文字列変更ここまでで終了です。

次にスタイルを少しだけ変更したいと思います。

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を追記します。

/************************************
** ■サイト内を検索のカスタマイズ
************************************/
.search-edit::placeholder { /*コメント欄ラベルに変更*/
  font-family: "ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  color: #fe619a; /*フォントカラー*/
  letter-spacing: 2px; /*文字間隔*/
}
.search-box .fa-search { /*サイドバーの検索ボックス内のサーチアイコン*/
  color: #fe619a;
  font-size:22px
}