【自分でSANGOをカスタマイズ】サイト内検索ウィジェットをシンプルにする

サイト内検索をシンプルにするよ

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。


この記事では
サイト内検索の部分をシンプルにカスタマイズした方法を説明。

このサイトの環境

テーマ
子テーマ
プラグイン

 
Before
サイト内検索 前-
After
サイト内検索ー後-1

文字を入力しているとき↓

サイト内検索ー後-2

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

サイト内検索ウィジェットをカスタマイズをする準備

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードを追加

style.cssにコードを追加する

 

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

検索欄に文字を表示させる

こちらのカスタマイズはマクリンさん(@Maku_ring)のTwitterでの素晴らしい発言を参考にさせていただきました。  

1. 子テーマにsearchform.phpファイルを作成

テキストエディタソフトでファイル名「searchform.php」を作成します。

保存先は子テーマのstyle.cssとかがある場所でOKです。


2. コードを記入

作成したsearchform.phpに下記のコードを記入します。

searchform.php(追加するコード:サイト内検索ウィジェット)
このコードはぼくもよくわかりませんが、これを追加すればOKです。 表示させる文字は「サイト内を調べてみる」の部分を好きな文字に変更してください。


3. アップロードして完了

コードを記入して、保存したらFTPソフトなどでアップロードブラウザのキャッシュ削除・更新すれば表示されます。

MENくん

素晴らしいカスタムをありがとうございます!

   

まとめ:サイト内検索部分をシンプルにするカスタマイズ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
  • 文字を追加する場合は、searchform.phpを作成
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。

ちょっとした部分を変えるだけでも違いがでますね!