【森山 様】WordPressテーマGraphyでヘッダー部分の検索ボックスを消したい

WordPressテーマGraphyでヘッダー部分の検索ボックスを消したいというご相談を頂きました。


WordpressのSEO対策ならRoot-013 Root-013ではWordPress・SEO対策・アフィリエイトなどサイト運営に関するご質問に無料でお答えしております。
WordPress 無料相談 アフィリエイト SEO 無料相談 無料!WPインストール代行・集客サポート

ヘッダー部分の検索ボックスを消したいです。

お世話になります。
Graphy(無料版)のテーマを使用してHPを作成中なのですが、
ヘッダー部分に表示される検索ボックス(添付参照)を消すにはどうしたらいいでしょうか。

テーマの編集から、該当の部分を削除するというのは判ったのですが、具体的にどの部分を消すべきか悩んでいます(ここかな?と思うところはあるのですが、不安で削除できません)

HTML等もよくわかっていない初心者で恐縮ですが、教えて頂けると嬉しいです。
宜しくお願い致します。

テーマのカスタマイズについて

>森山さま
ご相談ありがとうございます!

テーマをカスタマイズする方法はいくつかありますのでご紹介したいと思います。

(子)テーマの記述を消す or コメントアウトしてみる

テーマをカスタマイズする際は、テーマ、もしくはそのテーマの子テーマを作って行うのが通常取られる方法です。

子テーマについては公式の説明も確認しましょう。
WordPress Codex 子テーマ

こちらはどんな時に子テーマを作ると良いかご相談を受けてを解説した記事です。
WordPress 子テーマの必要性 どんな時に子テーマを使うとよい?

PHPの記述を変更するなら子テーマを作ってからの方が理想的です。
PHPファイルを開くときは、文字コードを認識できるエディタを選びましょう。(有名どころだとサクラエディタや秀丸、terapadなど)
PCにデフォルトで入っているテキストエディタで開くと文字化けの原因になります。

Graphyは使った事のあるテーマではありませんが、おそらくはheader.phpあたりに XXX_search_XXX(); のような記述があるでしょう。
多分searchで検索すれば見つかると思います。(Ctrl+F でファイル内の文字列を検索できます)
テーマフォルダは/wp-content/themes/の中にあります。

独自の関数が使われていなければ、get_search_form(); という部分がそれにあたります。そうった部分を削除もしくはコメントアウトしてみましょう。
コメントアウトとは、「この部分は人が見るためのコメントなので処理は実行しないでね!」というものです。

PHPのコメントアウトは
1.一行コメントアウトがスラッシュ2コ //
2.複数行の場合は/* */の間をコメントとして無効化できます
ちなみにPHPの開始と終了は<php ?>で、基本この中でなければPHPのコメントアウトは動作しません。

<?php get_search_form(); ?>

これをコメントアウトするなら、

<?php
  // 一行コメントアウト
  // get_search_form();
?>

または

<?php
  /* 複数行コメントアウト
  get_search_form();
  */
?>

このような形です。
この程度のカスタマイズであれば、サイトが真っ白になるような形にはならないでしょう。
くれぐれも <php?>を消さないようにしましょう。PHPの開始と終了が認識できなくなり、エラーになります。

一番恐ろしいのはfunctions.phpで、このファイルにエラーがあるとログインすらできなくなります。
WordPressに限ったことではありませんが、作業前にかならずダウンロードしておき、エラーがあったら過去のファイルをアップし直せる体制をとりましょう。(「バックアップを取る」ということです)

CSSで非表示

他に、PHPを直接編集したくない場合はCSSで非表示にする方法もあります。
個人で利用する分にはこの方法でも問題ないでしょう。

ブラウザで見たときに”見えなくなっているだけ”なので、実際には検索フォームのコードが存在します。

これは外観 > カスタマイズ > 追加CSSなどで、フォーム部分の領域にdisplay:none;と指定してあげるだけです。
サイトのURLは頂いていないのでデモサイトのものになりますが、このような形で非表示とすることができました。(以下を追記して保存)
graphy 検索ボックス 非表示

/* CSSのコメント このコードを追加CSSに追記して保存 */
.main-navigation .search-form {
    display: none;
}

添付画像はGoogle Chromeの開発者ツールです。F12キーもしくは、調べたい部分を右クリックで「検証」します。
class=”main-navigation”
の中に
class=”search-form”
という要素がある場合、それを非表示とする指定です。

参考にして頂ければ幸いです。

おすすめコンテンツ

コメントをどうぞ

  1. 質問させていただいた森山と申します。
    この度はご教示いただき、有り難う御座いました。
    個人サイトにつき、CSSで非表示にする形で、すぐに消すことができました。
    テーマを直接編集するのが少し怖かった為、より手軽な方法を教えて頂き助かりました。

    1. >森山さま
      ご確認ありがとうございます!
      参考にして頂けたようでなによりです!

コメントを残す

メールアドレスが公開されることはありません。

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。