【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(画像の幅)は適宜調整してください。
これで完成です!!