WordPressテーマ Cocoon
このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。
今回は、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
}
カスタマイズ後のウィジェット 検索
今回のカスタマイズによって、「ウィジェット 検索」のスタイルは次の様になりました。
「ウィジェット 検索」内の文字列変更と合わせて、今回のカスタマイズでは、
- フォント変更
- フォントカラー変更
- 文字間隔設定
- サーチアイコンのカラー変更
- サーチアイコンのサイズ変更
を行いました。
最後に
今回「ウィジェット 検索」内の文字列を変更したことで、タイトルを省くことができスッキリしました。
コメント