(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連Cocoon

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

アイキャッチ画像 Cocoon
この記事は約4分で読めます。

【広告】

※ 記事内には【広告】が含まれています

WordPressテーマ Cocoon

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

MASAa.net | WordPressとPCのある生活を楽しむための情報発信サイト
WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作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テーマ THE THOR(ザ・トール)
WordPressテーマ Diver
WordPressテーマ WING(AFFINGER6)

※ 記事内には【広告】が含まれています
MASAa.net

コメント

【広告】