Webコンパス Written by rickey

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

WordPressを学びたい スノーモンキーを学びたい

  • wordpress  固定ページをホームページに設定したい 投稿一覧がでてしまう なぜ?
  • WordPress 上に出てくるメニュー 
  • メニューの作り方 グローバルメニューの作り方 
  • 上のメニューを選択すると他のページに飛べる
  • ヘッダーコンテンツ ページの右上に入れたい
  • ヘッダーコンテンツ 画像入れたい
  • サイトのタイトルを左に寄せたい
  • サイトのタイトルに画像を入れたい
  • ロゴに画像

こんな悩みを抱えて検索ワードを入れた人のための記事です。

今回のデモサイトです。

ホームページの作成

「固定ページ」→「新規追加」

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

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

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

これは投稿ページ

「投稿ページ」じゃなくて、「HOMEしたいページです」が表示されるようにしたい。

「投稿ページ」じゃなくて、「HOMEにしたいページ」(特定の固定ページ)をホームページにしたい
はじめて君

「wordpress ホームページに設定したい 投稿一覧がでてしまう」

「設定」→「表示設定」

【変更前】

【変更後】

「表示設定」→「ホームページの表示」で「固定ページ(以下で選択)をチェック→自分の選びたいページを選択する。

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

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

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

あれ?題名が「HOMEページにしたいです」じゃないじゃん。ここに表示されるのは、このページのタイトルではなく、このサイトのタイトルが表示されます。気にせず続けていきましょう。

グローバルメニューの作り方
はじめて君

「WordPress 上に出てくるメニュー メニューの作り方 グローバルメニューの作り方 上のメニューを選択すると他のページに飛べる」

最初に飛べる先のページを作ります。メニューをクリックしたら表示したい「固定ページ」を追加してください。このページの①を復習してくださいね。※投稿ページではなくて、固定ページを追加してください。

「外観」→「メニュー」

メニュー名(好きな名前でよいが、何の名前かわかるように)を入力→メニュー設定にチェックを入れる→「メニューを作成」をクリック

「どれにチェックするとどうなるの?」という声が聞こえてきそうなので別記事まとめます。

全体画像
拡大画像 

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

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

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

画像に alt 属性が指定されていません。ファイル名: image-92.png
ヘッダーの左上にロゴを入れよう。

このヘッダーメニューのレイアウトは変更できます。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」をコピーしておいて、ください。

↓人により、また、画像事にことなるので、下記をコピペしても、画像は貼られません。

https://ayakolife.com/how-to-header/wp-content/uploads/sites/9/2021/02/image-1.png

(初級者~中級者レベル)右上にも画像を入れてみよう。

「外観」→「カスタマイズ」→「デザイン」→「ヘッダー」→「ヘッダーコンテンツ」

<img width=”500px” src=”上のところで画像のURLを調べたのでそのURLを入れる”>

width(画像の幅)は適宜調整してください。

左上の「公開」ボタンを忘れずに。

これで完成です!!