(確認事項)この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の記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

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

コメント

【広告】