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

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

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

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

このサイトの環境

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

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

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

サイト内検索ー後-2

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

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

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

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

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

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

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

 
確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新

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

こちらのカスタマイズはマクリンさん(@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を作成
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。

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