PR
WordPress

【WordPress】フッターにウィジェットを追加する方法【Lightning】

【WordPress】フッターにウィジェットを追加する方法【Lightning】 WordPress

Lightningテーマを使っていて、フッターにウィジェットを追加する方法をお探しの方向け。

 

Lightningテーマでは、フッター部分にフッターナビゲーションやウィジェットを追加できます。

この記事では、Lightningテーマのフッターにメニューやウィジェットを追加する方法について解説します。

フッターにウィジェットを追加する意味

フッターはユーザーがWebページを最後まで閲覧した後に辿り着く最後の場所となりますので、ユーザーに訴求したい情報があればフッターに追加することで目を止めてもらいやすくなります。

フッターに情報が何も無ければユーザーはそのまま離脱する可能性があります。

フッターに誘導したい・アピールしたい項目を設置することで、ユーザーのアクションを促す事ができるようになります。

 

フッターに追加できるウィジェットポジションは2種類

Lightningテーマのフッター部に追加できるウィジェットポジションは2種類あります

  • フッターメニュー
  • フッターウィジェットエリア

上記のとおりです。

下図はフッターウィジェットの表示サンプルです。

フッター部分にフッターメニューやフッターウィジェットを追加して、ユーザーのアクションを促しましょう。

 

フッターにメニューを追加する手順

最初に、フッターにメニューを追加する手順を解説します。

  • 手順①:メニュー設定画面を開く
  • 手順②:新規メニューを作成する

上記のとおりです。

ちなみに、メニューの作成方法は「【WordPress】ナビゲーションメニューの作り方【メニュー追加・階層】」でも詳しく解説しています。

手順①:メニュー設定画面を開く

ダッシュボード>外観>メニュー を選択します。

手順②:新規メニューを作成する

メニューの設定画面に移動したら、「新規メニューを作成」をクリックします。

①任意のメニュー名を入れて、②「メニューを作成」をクリックします。

メニュー名は「footer」とでも入力しておけばOKです。

次に、①メニューに表示させたいページを左側から選択し、②「メニューに追加」をクリックします。

以下のようにメニューが追加されました。

同じ要領でメニューに表示させたい項目をどんどん追加していきましょう。

最後に、メニューの表示位置を①「Footer Navigation」にチェックを入れ、②「メニューを保存」をクリックします。

以上でフッターメニューの設置は完了です。

 

フッターにウィジェットを追加する手順

最後に、フッターにウィジェットを追加する手順を解説します。

  • 手順①:ウィジェット編集画面を開く
  • 手順②:フッターウィジェットエリアに表示させたいウィジェットを追加する

上記のとおりです。

手順①:ウィジェット編集画面を開く

ダッシュボード>外観>ウィジェット を選択します。

ウィジェットの設定画面が表示されます。

ウィジェット表示場所一覧の中に「フッターウィジェットエリア」という項目が確認できます。

「フッターウィジェットエリア」に表示させたいウィジェットを追加することでフッターにウィジェットを表示させる事ができます。

ちなみに、Lightningテーマのフッターは下図のように3ヶ所設置できます。

フッターウィジェットエリアの詳細

フッターウィジェットエリアは次のようになっています。

  • フッターウィジェットエリア1 → 左
  • フッターウィジェットエリア2 → 真ん中
  • フッターウィジェットエリア3 → 右

手順②:フッターウィジェットエリアに表示させたいウィジェットを追加する

【WordPress】新着記事一覧をサイドバーに表示する方法【Lightning】」でも解説しているとおり、フッターに表示させたいウィジェットを選択して、フッターウィジェットエリアにドラッグしてウィジェットを追加します。

フッターウィジェットエリアにウィジェットを追加したら、ウィジェットにタイトルを入力して「保存」をクリックします。

プレビューで確認する

プレビューで表示を確認すると、フッターにウィジェットが表示されている事が確認できます。

この調子でどんどん追加していきましょう。

ちなみに、フッターは一つの表示エリアに何個でも追加することができ、表示する順番はドラッグで変更可能です。

 

まとめ

以上、フッターにウィジェットを追加する方法について解説しました。

おわり。

 

 

人気記事Lightning有料版でノーコードカスタマイズ【デザイン強化】

タイトルとURLをコピーしました