【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPress関連Cocoon

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

アイキャッチ画像 Cocoon
この記事は約4分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

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

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむための情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

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

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

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

【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">&lt;/span></button>
</form>

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

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

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

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

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

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

今回のカスタマイズによって、「ウィジェット 検索」のスタイルは次の様になりました。

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

「ウィジェット 検索」内の文字列変更と合わせて、今回のカスタマイズでは、

  1. フォント変更
  2. フォントカラー変更
  3. 文字間隔設定
  4. サーチアイコンのカラー変更
  5. サーチアイコンのサイズ変更

を行いました。

最後に

今回「ウィジェット 検索」内の文字列を変更したことで、タイトルを省くことができスッキリしました。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

下記バナーからスマホゲームのインストールお願いします!
ザ・グランドマフィア
イース6 オンライン〜ナピシュテムの匣〜
リネージュ2M
魔剣伝説
超次元彼女
ライフアフター
グランドサマナーズ
ロードモバイル
駅メモ!-ステーションメモリーズ!

MASAa.net

コメント