【WordPress SnowMonkey】ヘッダー(グローバルメニュー)の作り方、初心者向け一つ一つ手順を紹介・行程を飛ばしません。

- wordpress 固定ページをホームページに設定したい 投稿一覧がでてしまう なぜ?
- WordPress 上に出てくるメニュー
- メニューの作り方 グローバルメニューの作り方
- 上のメニューを選択すると他のページに飛べる
- ヘッダーコンテンツ ページの右上に入れたい
- ヘッダーコンテンツ 画像入れたい
- サイトのタイトルを左に寄せたい
- サイトのタイトルに画像を入れたい
- ロゴに画像
こんな悩みを抱えて検索ワードを入れた人のための記事です。
「固定ページ」→「新規追加」

とりあえず、表題を書いて、「更新」

サイトがどうなったか確認しよう。

おかしい、HOMEが表示されず、投稿された一覧が表示されている。

「投稿ページ」じゃなくて、「HOMEしたいページです」が表示されるようにしたい。
「wordpress ホームページに設定したい 投稿一覧がでてしまう」
「設定」→「表示設定」

【変更前】

【変更後】

「変更を保存」をクリック

現在の状態を確認しましょう。

無事に、投稿一覧ではなく、固定ページが表示されました。

あれ?題名が「HOMEページにしたいです」じゃないじゃん。ここに表示されるのは、このページのタイトルではなく、このサイトのタイトルが表示されます。気にせず続けていきましょう。
「WordPress 上に出てくるメニュー メニューの作り方 グローバルメニューの作り方 上のメニューを選択すると他のページに飛べる」
最初に飛べる先のページを作ります。メニューをクリックしたら表示したい「固定ページ」を追加してください。このページの①を復習してくださいね。※投稿ページではなくて、固定ページを追加してください。

「外観」→「メニュー」

メニュー名(好きな名前でよいが、何の名前かわかるように)を入力→メニュー設定にチェックを入れる→「メニューを作成」をクリック
「どれにチェックするとどうなるの?」という声が聞こえてきそうなので別記事まとめます。


追加したいページにチェックを入れて、「メニューを追加」をクリック


クリックして、押しながら上下に動かすと並び替えができます。親子関係を作りたい場合は、クリックしながら少しだけ右に動かします。(やってみるとわかります)→「メニューを保存」をクリックする

上部にメニューが出ます。親子関係もできています(クリックするとそのページに飛びます)


このヘッダーメニューのレイアウトは変更できます。1例を紹介しますが、他のパターンについては別記事で紹介します。
「外観」→「カスタマイズ」→「デザイン」→「ヘッダー」

「デザイン」

「ヘッダー」


【中央ロゴ グローバルナビゲーションを縦書きにする】

【シンプル】

【2行】 (今回はこれを選んでおきます)

【左】

【1行】

【1行 グローバルナビゲーションを縦書きにする】

「外観」→「カスタマイズ」→「デザイン」→「ヘッダー」
ヘッダーコンテンツにHTML・CSSを追加します(これ以外の方法が見つかりませんでした)

<div class="header-info"><div class="header-wrapper"><a class="c-btn" href="tel:0337801080" style="color:#fff; background-color:green;border:1px solid"><i class="fas fa-phone-alt"></i> <b>0123-456-7890</b><br>11:30〜22:00(日曜定休)</div></a>
※このコードはじゃんきーさんのスノモンマスター講座で習った内容を改変して使用させていただきました。ありがとうございます。

→できます。まずはテキストの変更方法を解説します。
「外観」→「カスタマイズ」→「デザイン」→「サイト基本情報」→「サイトタイトルを変更」

「デザイン」

「サイト基本情報」

「サイトのタイトル」を変更すると、テキストを変えられます。

ここを画像にするには、サイトタイトルのすぐ上の「ロゴ」の「ロゴを選択」をクリックして画像を挿入してください。

ロゴに入れたい画像にチェックを入れて、右下の「選択」をクリック

忘れずに、左上の「公開」をクリック

次の項目で、右上に画像を入れることを行います。右上に入れたい画像を「ファイルのURL」をコピーしておいて、ください。

↓人により、また、画像事にことなるので、下記をコピペしても、画像は貼られません。
「外観」→「カスタマイズ」→「デザイン」→「ヘッダー」→「ヘッダーコンテンツ」
<img width=”500px” src=”上のところで画像のURLを調べたのでそのURLを入れる”>
width(画像の幅)は適宜調整してください。


これで完成です!!