WordPressCocoon

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

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ARKA-蒼穹の門
三国志外伝:戦姫覚醒
Cave Shooter
ナナリズムダッシュ
イース6オンライン
ザ・アンツ
クッキーランキングダム
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
戦国布武
我が天下

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

MASAa.net

コメント