WordPressのテーマ「Diver」でサイト上部のロゴを消す方法

こんにちは。

ゆうです。

自分はこのブログをWordpressの

Diverというテーマを使って作っています。

他のテーマでもそうだとは思いますが、

このDiverというテーマでは

サイトトップページのいわゆるトップ画像と

サイトのロゴ画像というものを別々に設定することができます。

ぼくの場合、

トップ画像にもロゴを入れています。

この状態でサイトロゴを設定すると

2重表示されてしまうんですよ。

ロゴ2重表示

一番上に小さいロゴ、

更にトップ画像。

なんかかっこ悪いですよね?

今日はこれを直して、トップ画像のみを表示させる方法

ご紹介したいと思います。

スポンサーリンク

サイトロゴが使われている場所

まず小さい方の画像、

サイトロゴが使われている場所を確認します。

もう上の画像でも見ましたが、サイトロゴはこの画像の部分です。

サイトロゴ

このサイトロゴの画像が使われる場所は次の3箇所。

サイトロゴが使われている場所
  • トップページの一番上のところ
  • スクロール時に現れるメニューバー
  • 記事ページの一番上のところ

参考までにですが、

サイトロゴの設定はWordpressダッシュボードにて設定できます。

「外観」→「カスタマイズ」→「サイトロゴ・アイコン」→「ロゴ画像をアップロード」

設定したものが表示されるようになりますね。

トップページ一番上の部分

まずここ。

ロゴ2重表示囲い

今回の記事で非表示にしたいのはこの部分になります。

スクロール時のメニューバー

Diverはそもそもの設定で

ページを下にスクロールしていくとこのようなメニューバーが現れます。

このメニューバーでもサイトロゴが使われています。

スクロール時メニューバー

スマホから見るとこう。

スマホサイトロゴスクロール時

で、こっちはロゴが表示されるようにしておきたいんです。

記事ページの一番上

あともう一つ、

各記事ページの一番上のところにもロゴが表示されるようになります。

個別記事上部ロゴ

この部分も残しておきたいですね。

サイトロゴを設定しないとどうなる?

ちなみにサイトロゴを設定しないということも試しましたが、

その場合、ロゴが会った場合にただ文字で

サイトタイトルが表示されるようになります。

こんな風に。

スクロール時のメニューバー文字のみ

ちょっと味気ないですよね。

やっぱりロゴは設定しておいて、

一番上の部分だけが表示されないようにしていきたいです。

ページ一番上のサイトロゴだけを非表示にする

さて、ここからがこの記事の本題。

実際にトップページ一番上のサイトロゴを非表示にする作業を行っていきます。

手順は大きく次の4つの行程に分けられます。

サイト一番上のサイトロゴを非表示にする手順
  1. header.phpをダウンロードする
  2. header.phpを編集してheader2.phpにする
  3. index.phpを編集する
  4. header2.phpとindex.phpを子テーマにアップロードする

さっそく順番にやっていきましょう。

header.phpとindex.phpをダウンロードする

まず今回の作業ではWordpressの様々なデータが詰まっている

phpファイルというものを編集します。

まずFTPアプリを使ってDiverのファイル群から

header.phpとindex.phpというファイルをダウンロードします

自分の場合、FileZillaというアプリを使っています。

有名なアプリですよね。

WindowsでもMacでも使えます。

FilleZilla経由でサーバーにアクセスしましょう。

では、自分のドメイン名のファイルがあると思うのでまずそこに入りましょう。

(このサイトの場合ならyu-and-you.comという名前のフォルダがある)

更に「public_html」→「wp-content」→「themes」→「diver_child」と進みます。

そこまで行くとファイルがバーっと並んでいますが、

その中から「header.php」という名前のファイルを探しましょう。

もし「index.php」もあれば確認してください。

もしその中に2つのファイル、もしくは片方のファイルがなければ、

参照箇所を「public_html」→「wp-content」→「themes」→「diver」として下さい。

この中には「header.php」「index.php」の両方のファイルがあるはずです。

で、その上で右クリック。

で、ダウンロード。

FileZillaダウンロード

これで指定されたフォルダにheader.phpがダウンロードされます。

同じようにindex.phpもダウンロードしてしまいましょう。

ちなみに指定されたフォルダというのはここの部分のことです。

FileZillaダウンロード先設定

この赤枠部分で指定したフォルダにダウンロードされます。

自分の場合、デスクトップにダウンロードされるようになっているということですね。

header.phpを編集する

さあ、ここからいよいよphpファイルの中身をいじっていきます。

サーバー上に編集前のファイルがあるので、

特にバックアップはしなくても問題ないかと思います。

phpのファイルはメモ帳などの

テキストエディタで開くことができます。

自分の場合、Sublime Textというテキストエディタを使っています。

さて、先程のheader.phpをテキストエディタで開くと、

次のような文字列が表示されるのですが…

Diver Header

ぶっちゃけ、何が何だかわからんですよね…。

Chromeの検証機能を使いながら、

どこをいじればいいのか当たりをつけていくわけです。

そうすると、どうも今回は

「logo」というidが設定されている場所が怪しそうだということが分かりました。

Idlogo

なので、header.phpの中にid=“logo”が設定されている場所があれば、

そこをいじると何とかなりそうな感じがしますよね。

ちなみにChromeの検証機能について知りたい方は

こちらの記事をそれぞれお読みください。

さて、header.phpをザーッと見ていくと

少し下の方にそれっぽい部分が見つかりました。

Header

この部分です。

ここはphpというプログラム言語が記述されているのですが、

細かい説明は今回はしません。

後日、別記事で説明するようにしますね。

結論だけ言うと、130の行にある1列をまるごと削除します

それだけ。

このファイルに対する変更はこれだけで完了なんです。

で、これが変更後の状態。

Header

本当に消しただけですよね。

この状態になったら、「header2.php」と名前をつけて保存しましょう。

ただの上書き保存ではなく、名前をつけて保存してくださいね

index.phpを編集する

続いてindex.phpを編集していきます。

index.phpは簡単に言うと、トップページを表示させるためのファイル。

各個別ページを表示させるためのファイルはsingle.phpという

別のファイルが用意されています。

なので、今回はトップページのためのindex.phpだけを編集して、

トップページではサイトロゴを表示しないheader2.phpを読み込み、

記事ページではサイトロゴを表示する従来のheader.phpが読み込まれる形にします。

では、さきほど編集したheader2.phpを読み込むように

index.phpの内容をいじっていきましょう。

一番最初の1行をちょっと打ち替えるだけ

もともと次のようになっているのを…

このように打ち替えるだけです。

なぜこれでいいのかという理由は話しだすと長くなるので

割愛しますが、

とにかくこれで先程作ったheader2.phpというファイルが

トップページの際に読み込まれるようになりました。

header2.phpを子テーマにアップロードする

では編集したphpファイルをアップロードして

変更を反映させましょう。

header.phpのファイルをダウンロードする際に

FTPアプリで「public_html」→「wp-content」→「themes」→「diver」、

もしくは「public_html」→「wp-content」→「themes」→「diver_child」と進んで

ファイルをダウンロードしてもらいましたよね。

今度は必ず「diver_child」の方を選んでください

このフォルダの中にドラッグ&ドロップで

編集済みのheader2.phpをアップロードします。

同じようにindex.phpもアップロード。

これでサイト一番上のロゴは非表示になり、

かつスクロールした時に現れるメニューバーにはロゴが表示される状態となります。

個別記事ページのロゴも表示された状態となります。

ロゴ2重表示修正後

うん、スッキリしましたね。

くどい感じもなくなり、

トップ画像がよりいっそう映える形となりました。

スポンサーリンク

まとめ

今日はWordpressのテーマ「Diver」で、

サイトロゴの表示を消して、トップページをスッキリさせる方法、

かつ、スクロール時のロゴや記事ページのロゴは表示させる方法を紹介しました。

行程としてはそんなに難しいこともなく、

次の4ステップで行えるんでしたね。

サイト一番上のサイトロゴを非表示にする手順
  1. header.phpをダウンロードする
  2. header.phpを編集してheader2.phpにする
  3. index.phpを編集する
  4. header2.phpとindex.phpを子テーマにアップロードする

 phpファイルの中身をいじるということで

気持ち的にハードルは高いと感じる方もいたかもしれませんが、

やること自体はそんなに難しくありませんでしたよね?

大丈夫、

phpなんてわからんというあなたにもできます

基本的にDiverはphpやwordpressのいじり方が

わからなくてもガンガンカスタマイズできるように作られています。

今回は中身をいじるお話をしましたが、

HPの作り方はわかんないけど、ガンガンいじりたいという方には非常におすすめです。

よかったらDiverのHPのリンクをはっておくので、

覗くだけ覗いてみてください。

Diver ホームページ

WordPressの中身をいじるのってちょっと勇気がいりますが、

慣れてしまえばものすごい難しいということでもありません。

もし勉強してみたいという方がいれば、

取っ掛かりとして次の記事が参考になることかと思います。

文中でも紹介しましたが、

Chromeの検証機能もWordpressのカスタマイズには非常に便利です。

ついでにブログのデザインについての記事もありますので、

気に入るものがあれば覗いてもらえれば嬉しいです。

それでは。

今日よりほんのちょっとステキな明日があなたに訪れますように。

Twitterでフォローしよう

こんな記事はいかが?