オリジナルの WordPress テーマ Bliss flow の紹介記事です。

当記事では「 Bliss flow でヘッダーの メインメニュー を設定する方法」について解説致します。

メインメニューの表示位置

メインメニューは最上部の右に位置します。

Bliss flow メインメニュー
Bliss flow メインメニュー

必ず目に入る位置ですね。
重要なコンテンツへの導線として活用してください。

メインメニュー 未設定時の表示

メインメニューを設定していない初期状態の表示について解説いたします。

ログインしていない場合の表示

メインメニュー未設定時、ログインしていない一般の方に対しては 図 1 のように、真っ白な状態で表示されます。

図 1 : メインメニュー未設定時のサイトでの表示 通常ユーザ
図 1 : メインメニュー未設定時のサイトでの表示 通常ユーザ

うーん、かっこよいとは言えませんね。

ログインしている場合の表示

それでは WordPress のログインを行ってください。

[入門] 管理画面のログイン方法
管理画面はWordPress全体をコントロールする画面です。当記事は管理画面を使用するためにログインする方法について解説いたします。
WordPress の"ワ"の字から

ログインすると、メインメニューは 図 2 のように表示されます。

図 2 : メインメニュー未設定時のサイトでの表示 ログイン状態
図 2 : メインメニュー未設定時のサイトでの表示 ログイン状態

これは、「メニューを設定するとどのように表示されるか」をイメージしやすいように用意したものです。
管理画面からメニューを編集することで、任意に設定したメニューが表示されます。


それではメニューを編集しましょう。

図 2 の右上で囲った箇所に「編集」ボタンをクリックしてください。
すると、メインメニューの編集フォームにすばやくジャンプすることができます。

管理画面のサイドメニュー「テーマ設定」より同じ画面に遷移します。

メインメニューを設定する

図 3 のメインメニューの編集フォームが表示されましたか ?

図 3 : メインメニューの編集フォーム
図 3 : メインメニューの編集フォーム

それでは、メニューを設定しましょう。
図 3 に示したリンク 1 の「メニューを編集する」ボタンをクリックします。

すると、図 4 のようにリンク設定画面が表示されます。

図 4 : メインメニュー リンク設定画面
図 4 : メインメニュー リンク設定画面

図 4 に示した URL とリンク文言を入力します。
入力方法の詳細は後述いたします。


今回 図 5 のように入力しました。
URL とリンク文言を入力後、リンク設定画面の「設定する」ボタンをクリックしてください。

図 4 : メインメニュー リンク設定画面 URL とリンク文言を入力
図 4 : メインメニュー リンク設定画面 URL とリンク文言を入力

すると、リンク設定画面が閉じ、図 6 のようにメインメニューの編集フォームに戻ります。

先ほど入力した内容が反映されていますね。

図 6 : メインメニューの編集フォーム リンク設定状態
図 6 : メインメニューの編集フォーム リンク設定状態

リンク 2 以降は、同様の手順を繰り返して埋めていってください。


最後に 図 7 に示す「変更を保存」ボタンをクリックして保存を行ってください。

図 7 : メインメニューの編集フォーム 画像指定状態
図 7 : メインメニューの編集フォーム 画像指定状態

これで、メインメニューの設定は完了です。

メインメニュー 設定後の表示

メインメニューを設定し、サイトでは次の表示となりました。

図 8 : メインメニュー設定時のサイトでの表示
図 8 : メインメニュー設定時のサイトでの表示

入力項目の説明

メインメニューの各リンクには 2 つの設定項目があります。

図 9 : メインメニュー リンク設定画面
図 9 : メインメニュー リンク設定画面

それぞれ、解説いたします。

URL

URL はそれぞれのページに一つずつ割り振られたアドレス (住所のようなもの) です。
当テーマのリンク設定はこの URL を入力する方式をとっています。

具体的には、ドメインを入力するかどうかで次の 2 つの形式に対応しています。

形式 1 : URLをそのまま入力する

1 つめは URL をすべて入力する形式です。

図 10 : 形式 1 の入力イメージ
図 10 : 形式 1 の入力イメージ

これはたとえば、投稿や記事を開き、ブラウザのアドレスバーに表示された URL をそのまま入力することができます。

形式 2 : 省略形式

2 つめは URL の先頭部分を省略する形式です。

図 10 : 形式 2 の入力イメージ
図 10 : 形式 2 の入力イメージ

WordPress の設置状況により差がありますが、「 http(s) やドメインを省略 」する形式です。

混乱する場合は、形式 1 で入力すれば間違いありません。


このような方式を採用した理由は、 外部サイトとの連携を用意にするため です。

これによって、たとえば、「某ブログも更新しているため、そちらにもジャンプできるように」ということが可能です。

URL については次もご覧ください。

[入門] HTTPS の S って何 ?
今新しくブログやホームページを制作する場合 HTTPS することが推奨されています。では、HTTPS とは何でしょうか。SSL と HTTPS について解説いたします。
WordPress の"ワ"の字から

リンク文言

リンク文言は「画面に表示する文字」です。
リンク文言に設定した内容が、そのままサイトに表示されます。


各メニュー文言は 8 文字程度を推奨いたします。

極端に長い文言を設定した場合は、一部リンクが見切れて表示されなくなってしまいます。
ご注意ください。

まとめ

うぇぶろう

Bliss flow のテーマ設定機能のうち メインメニュー の設定方法を解説いたしました。

メインメニューは次の手順で設定することができます。

  • テーマ設定 > メインメニューへ遷移し
  • 「メニューを編集する」ボタンをクリックしてメディアを編集フォームを開き
  • URL と リンク文言を入力し
  • 「設定する」ボタンをクリックして反映
  • すべてのメニューを編集後、「変更を保存」ボタンをクリックして変更を保存

Bliss flow は「外部サイトと連携できる」ことがメリットの一つです。

Bliss flow でカンタンに WordPress サイトを構築してみませんか ?