【お寺のホームページ作成講座23】ウィジェットの使い方と設定方法 - ワードプレスを使って自分で作る!お寺のホームページ作成講座

【お寺のホームページ作成講座23】へようこそ！

【講座23】では、ウィジェットという機能を使ってページ内の細かいところを設定していく作業をします。

ウィジェットというのは、ページ内の特定の位置に画像や文章、パーツなどを設置できる機能のことです。

ウィジェットを使いこなせるようになるとページの中で告知をしたり、広告のバナーを貼ったりできるようになりますよ。

ここまでの講座でホームページの重要な部分はほぼ完成していますが、よりクオリティの高いサイトにするために細部を設定していく方法です。

ウィジェットの設定の仕方

ワードプレスにログインした状態で、ダッシュボードから「外観」→「ウィジェット」へ入ります。

ウィジェットの画面はこんな感じです。

画面左側がウィジェットの要素、右側が表示するエリアや場所を表しています。

ここでサイドバーなど、メインコンテンツ以外の画面表示の設定や編集をおこないます。

ウィジェットで設定できる場所

メインサイドバー(PC・スマホそれぞれ設定)
ハンバーガーメニュー(PC・スマホ共通)
スクロール領域(PCサイドバーで画面スクロールに追従)
記事タイトル上(PC・スマホ共通)
記事タイトル下(PC・スマホそれぞれ設定)
記事コンテンツ下(PC・スマホそれぞれ設定)
トップページ上部(PC・スマホそれぞれ設定)
トップページ下部(PC・スマホそれぞれ設定)
フッター(PC・スマホそれぞれ設定)
CTA設定(PC・スマホ共通)

PCはパソコンでサイトを見たときに表示されるエリアです。

SPは(SmartPhone)の略でスマホでサイトを見たときに表示されるエリアを意味しています。

ウィジェットを追加する方法

ウィジェットを追加するときは画面左側のウィジェットをクリックして、追加したい場所を選択しましょう。

マウスでドラッグ＆ドロップでもウィジェットを追加することができます。

ウィジェットで表示される場所の説明

メインサイドバー(PC・スマホそれぞれ設定)

メインサイドバーは以下の部分を設定するエリアです。

ハンバーガーメニュー(PC・スマホ共通)

ハンバーガーメニューは画面左上にでてくる三本線のメニューのことです。

【講座20】サイトタイトルロゴの設定と作り方でヘッダーロゴの位置を中央に配置してPCで表示した時と、スマホでサイトを表示したときに画面左上に表示されます。

このメニューをタップしたときに表示するものを設定します。

スクロール領域(PCサイドバーで画面スクロールに追従)

サイドバーの下に表示されるエリアです。

サイドバーは画面のスクロールと同じように動きますが、スクロール領域はスクロールに追従したあと、画面の一番上に固定されるように表示されます。

記事タイトル上(PC・スマホ共通)

記事タイトル上は「投稿」で作った各ページのタイトルの上のエリアになります。

記事タイトルやアイキャッチ画像よりも上に表示されます。

記事タイトル下(PC・スマホそれぞれ設定)

記事タイトル下はPCとスマホをそれぞれ表示設定できます。

アイキャッチ画像やSNSシェアボタンと本文の間にコンテンツを追加することができます。

記事コンテンツ下(PC・スマホそれぞれ設定)

記事コンテンツ下は本文の終わりの位置にコンテンツを追加できます。

トップページ上部(PC・スマホそれぞれ設定)

トップページ上部は【講座22】トップページの作成方法で固定ページをトップページに設定した場合は表示されません。

固定ページでのトップページ作成をせずに、初期状態で表示してある場合のみトップページの上部にコンテンツを追加することができます。￥

トップページ下部(PC・スマホそれぞれ設定)

こちらのトップページ下部も【講座22】トップページの作成方法で固定ページをトップページに設定した場合は表示されません。

固定ページでのトップページ作成をせずに、初期状態で表示してある場合のみトップページの下部にコンテンツを追加することができます。

フッター(PC・スマホそれぞれ設定)

フッターは画面下部のエリアです。

PC表示の場合は3つの要素を入れると均等割りされて、4つ目が下に回り込みます。

スマホの場合は下に一列に長く表示されます。

PCとスマホを分けて設定できますので、PCは3つのコンテンツ(例：ロゴ・メニュー・問い合わせボタンなど)を設定。

スマホは1つか2つ(ロゴと問い合わせボタンなど)を設定して、冗長にならないように設定してみてください。

CTA設定(PC・スマホ共通)

CTAはCall To Actionの略で、各ページの最後に行動を促すことを目的にしたエリアです。

お寺のホームページでも特別見てもらいたいページがあればCTAにリンクを用意するのが良いかもしれません。

CTAには「カスタムHTML」というウィジェットをいれて、以下のコードをコピペしてください。

[cta_in]
[cta_ttl]ここにキャチコピーやタイトルを記入[/cta_ttl]
説明の文章をここに入力サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
[cta_btn link="ここにリンク先アドレスを入力"]ボタン内に表示するテキストを入力[/cta_btn]
[/cta_in]

コンテンツ下のSNSシェアボタンの下に特別なエリアが表示されます。