【Simplicity2】メニューとメインビジュアル(TOP画像)を入れ替える

【Simplicity2】メニューとメインビジュアル(TOP画像)を入れ替える

Simplicity2」は、デフォルトだとロゴメインビジュアル(TOP画像)が最上部に表示され、次いでグローバルメニューが表示されます。

今回は、グローバルメニュー最上部にする方法をご紹介します。

※「Simplicity2」での方法ですので他のテーマではご利用できません。(phpの処理は似ているかもしれませんが)




完成画像

完成画像

今回の内容を実施すると以下のようにサイトのデザインが変化します。

修正前(PC)

修正前(PC)

修正後(PC)

修正後(PC)

上の画像のように、メインビジュアル」と「グローバルメニュー」の位置を入れ替えることができます。

ただ入れ替えただけですので、パッと見は少し変な感じがするかもしれませんがCSSを用いることでグッとデザイン性の良いサイトに仕上げることができます。

多くのサイトは、最上部にグロバールメニューが来ることが多いです。

モバイル版の見た目はこうなります。

修正前(モバイル)】      【修正後(モバイル)

修正前(モバイル)         修正後(モバイル)

前準備

前準備

編集前にバックアップを取りましょう!

今回の作業は、PHPのファイルを直接操作していきますので必ずバックアップを取っておき、編集前の状態に戻せるようにしておきましょう。

また、「子テーマ」を利用している場合は、親テーマから「header.php」をコピーして子テーマのフォルダに配置しましょう。

直接、親テーマのファイルを編集することもできますがお勧めはしません。

メインビジュアルとグローバルメニューを入れ替える

メインビジュアルとグローバルメニューを入れ替える

PHPのファイルはWordPressのダッシュボードより編集できます。

まずは、ダッシュボードを開き「外観」→「テーマの編集」を選択してください。

外観→テーマの編集を選択。

すると、以下のような画面が表示されます。

テーマの編集画面。

こちらで、PHPファイルの編集を行っていきます。

右側のテンプレートの項目に「テーマヘッダー(header.php)」がありますので、そちらを選択してください。

※ない場合は、子テーマのファイルの「header.php」のファイルが配置されていません。FTPなどで配置してください。

選択すると、「header.php」のファイルの中身が表示されます。

header.php編集画面。

下のほうまでスクロールしていき、次の文を探してください。

これが、「グローバルメニュー」を出力するためのPHPです。

見つけることができたら、このコードを切り取ってください。

切り取ったコードを以下の個所に貼り付けてください。

<header itemscope itemtype=”http://schema.org/WPHeader”>のすぐ下です。

貼り付けが完了したら、「ファイルを更新」を選択して変更を保存してください。

たったこれだけで完了です。

あとは、Webブラウザで変更が適応されているか確認してください。

その際に、スマートフォンでの確認を忘れないようにしてください。

コードの挿入場所を間違えてしまうと、モバイル版でグローバルメニューが表示されないことがあります。

まとめ

グローバルメニュー」と「メインビジュアル」の位置を入れ替える方法をご紹介しました。

このままの状態では、少し違和感を感じてしまいますがメニューを横幅いっぱいにしたり、高さを出してみたりすることでよりデザイン性の高いサイトに仕上げることができます。

Simplicity2」は、カスタムがしやすい作りになっている反面、デフォルトだと少し味気ないデザインになっています。

自分好みのサイトデザインに仕上げてみましょう。

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク