ワードプレス・作り方

6.ウィジェットの設定

目安時間 9分

本テーマではサイトをより魅力的にするオリジナルウィジェットをご用意しました。
ウィジェットの設定方法と対応箇所についてはこちらをご覧ください。

6-01. ウィジェットの使い方
6-02. ウィジェットスペースと有効化
6-03. オリジナルウィジェットを設定する

6-01. ウィジェットの使い方

ウィジェットの基本的な使用方法については、下記をご参照ください。
参照:ウィジェットの使い方

ウィジェットの設定方法については動画でもご覧頂けます。
(※音声が出力されますのでご注意ください。)
参照:ウィジェットの設定方法 【はじめてのWordpress無料講座12】

6-02. ウィジェットスペースと有効化

本テーマのウィジェットスペースは下記のとおりで、それぞれに設定が可能です。

  • 基本ウィジェット
  • ブログページ
  • ブログページ(スマホ用)
  • お知らせページ
  • お知らせページ(スマホ用)
  • サービスページ
  • サービスページ(スマホ用)
  • FAQページ
  • FAQページ(スマホ用)
  • スタッフページ
  • スタッフページ(スマホ用)
  • コラムページ
  • コラムページ(スマホ用)
  • キャンペーンページ
  • キャンペーンページ(スマホ用)
  • クリニックページ
  • クリニックページ(スマホ用)
  • 固定ページ
  • 固定ページ(スマホ用)

【基本ウィジェット】の使い方

ウィジェットスペース「基本ウィジェット」に設定したウィジェットが、
PC・スマホのすべてのページに表示される仕様となっています。(=基本のウィジェットセット)

そのため、すべてのページで共通のウィジェットを表示する場合には、ウィジェットスペース「基本ウィジェット」の設定のみでウィジェット設定が完了します。
「固定ページのみ」「スマホのみ」というように、個別にウィジェット構成を変えたい場合には、該当するウィジェットスペースにウィジェット設定を行ってください。

ウィジェットスペース一覧


各ウィジェットスペースの「▼」を押下する事で展開され詳細が表示されます。

ウィジェット設定画面左側の「利用できるウィジェット」から右側の各ウィジェットスペースにドラッグ&ドロップで移動することで有効化されます。
「スマホ用」ウィジェットスペースについても同様にウィジェットの設定を行って下さい。「スマホ用」に設定されたウィジェットがある場合、メインカラム下部にPC表示用に設定されたウィジェットと置き換わって表示される仕様となっています。

6-03. オリジナルウィジェットを設定する

当テーマのオリジナルウィジェット(ウィジェット名末尾に「tcdバージョン」の記載があるもの)は下記の通りです。

  • デザインされた記事一覧1
  • キャンペーン記事スライダー
  • キャンペーン記事一覧
  • アーカイブ一覧
  • カテゴリー一覧
  • コラムカテゴリー一覧
  • バナー一覧
  • Googleカスタム検索
  • 広告

デザインされた記事一覧1

投稿のアイキャッチ画像サムネイル、タイトル、日付を表示します。

設定サンプル

表示サンプル

タイトル、記事のタイプ(全ての記事、おすすめの記事1、おすすめの記事2、ピックアップ記事)、記事の数、記事の並び順(新しい順、古い順、ランダム)、(日付の)表示設定が可能です。

キャンペーン記事スライダー

カスタム投稿タイプ「キャンペーン」の記事スライダーを表示します。

表示サンプル

タイトル、記事の数、記事の並び順(新しい順、古い順、ランダム)、(カテゴリーの)表示設定が可能です。

設定サンプル

キャンペーン記事スライダーは、「キャンペーン」編集画面の右側にある「ピックアップ記事」にチェックを入れたもののみ表示されます。

キャンペーン記事一覧

カスタム投稿タイプ「キャンペーン」の記事一覧を表示します。

表示サンプル

タイトル、カテゴリーのタイプ、記事の数、記事の並び順(新しい順、古い順、ランダム)、(カテゴリーの)表示設定が可能です。

アーカイブ一覧

アーカイブ一覧をドロップダウンメニューで表示します。

表示サンプル

見出しタイトルを入力します。あとは、当ウィジェットを任意のスペースに配置すると、月別アーカイブをドロップダウンメニューで表示します。

設定サンプル

カテゴリー一覧

オリジナルデザインのカテゴリー一覧を表示します。

表示サンプル

タイトル、カラータイプ(ストライプパターン、シンプル(背景色なし))除外する(一覧に表示しない)カテゴリーの設定が可能です。(※除外するカテゴリーの設定に使用するカテゴリーIDの確認方法は下記の補足をご参照ください。)

設定サンプル

カテゴリー一覧で表示できるカテゴリ階層数は、2階層(子カテゴリ)までとなります。

カテゴリーIDを確認するにはダッシュボード左メニュー→【投稿】→【カテゴリー】を開きます。
①カテゴリー名にマウスカーソルをあわせ、②ブラウザウィンドウ左下のステータスバーに表示されるURL内の “category&tag_ID=” に続く数字をご確認ください。

コラムカテゴリー一覧

コラム用のカテゴリー一覧を表示します。

表示サンプル

タイトル、カラータイプ(ストライプパターン、シンプル(背景色なし))除外する(一覧に表示しない)カテゴリーの設定が可能です。(※除外するカテゴリーの設定に使用するカテゴリーIDの確認方法は下記の補足をご参照ください。)

設定サンプル

カテゴリー一覧で表示できるカテゴリ階層数は、2階層(子カテゴリ)までとなります。

カテゴリーIDを確認するにはダッシュボード左メニュー→【コラム】→【コラムカテゴリー】を開きます。
①カテゴリー名にマウスカーソルをあわせ、②ブラウザウィンドウ左下のステータスバーに表示されるURL内の “category&tag_ID=” に続く数字をご確認ください。

バナー一覧

バナー一覧を表示します。

表示サンプル

バナーは5つまで設定可能です。バナーにはアイキャッチ画像サムネイル、リンク先のURL、オーバーレイ(画像に重ねる色)の設定、オーバーレイの色、オーバーレイの透過率の設定が可能です。

設定サンプル

Googleカスタム検索

サイト内検索機能にGoogleカスタム検索エンジンを使用することができます。また、タイトルの設定が可能です。

表示サンプル

Googleカスタム検索IDを設定して下さい。IDの取得方法は、下記をご参照下さい。
参照:Googleカスタム検索IDを取得する

設定サンプル

広告

3つの広告を設定して、ランダムに表示させることが可能です。

表示サンプル

広告の設定方法は、アドセンスなどのコードを直接貼り付ける方法と、画像とリンク先を別々に登録する方法があります。

設定サンプル

WordPress標準ウィジェットの「カスタムメニュー」の名称が変更となりました。
新しい名称は「ナビゲーションメニュー」となりますので、ご注意ください。
詳しくは、Wordpress公式サイトをご確認ください。
参照:WordPress公式サイト(ja.wordpress.org)

→ 「7.記事投稿時の設定」に進む

→ 「5.テーマオプションの設定」に戻る


この記事を書いた人

国領きとうクリニック