ザ・トールの「ウィジェットエリア」と基本的な配置方法

 
サトコハ
この記事でわかること。
  • THE THORのウィジェットエリア
  • WordPressのウィジェット配置方法

「THE THOR」10のウィジェットエリア

「THE THOR」のウィジェットエリアは10カ所あります。

  1. トップページ上部エリア
  2. トップページ下部エリア
  3. 投稿ページ上部エリア
  4. 投稿ページ下部エリア
  5. メニューパネル
  6. サイドバーエリア
  7. 追従サイドバーエリア
  8. フッターエリア(左)
  9. フッターエリア(中央)
  10. フッターエリア(右)

 

ちなみに、WordPress標準テーマ「TwentyTwenty」のウィジェットエリアは、「フッター1」「フッター2」の2カ所です。

トップページ上部エリア

コントローラー(新着順・人気順と表示されているところ)の上部に、配置したウィジェットアイテムが表示されます。

 

  コントローラーの設定方法

トップページ下部エリア

アーカイブ記事一覧の下に表示されますが、カスタム投稿タイプを使っている場合はその下に表示されます。

 

  アーカイブページの設定方法
  カスタム投稿タイプの設定方法

投稿ページ上部エリア

投稿ページは3つのレイアウトから選択できるので、レイアウト別にご紹介します。

ノーマル(アイキャッチなし)

ノーマル(アイキャッチなし)を選択している場合、タイトルの下に配置したウィジェットアイテムが表示されます。

ノーマル(アイキャッチあり)

ノーマル(アイキャッチあり)を選択している場合、アイキャッチ画像の下にウィジェットアイテムが表示されます。

バイラル風

バイラル風はメインカラムにアイキャッチ画像が配置されるのではなく、ヘッダー下部に配置されるます。そのため、ウィジェットアイテムはメインカラム上部に表示されます。

 投稿ページの設定方法

メニューパネル

メニューボタンを押すと表示されるのがメニューパネルです。ヘッダー上部にボタンがあります。

 

このエリアにウィジェットアイテムを配置すると、メニューパネル内で表示されます。

表示されたメニューパネル

 メニューパネル内にウィジェットアイテムを配置する方法

サイドバーエリアと追従サイドバーエリア

サイドバーエリア」と「追従サイドバーエリア」の違いは次の通り。

画面に表示されるページを下にずらしていくと見えなくなるのが「サイドバーエリア」。

逆に、ページを下へずらしても追いかけるように常に表示されるのが「追従サイドバーエリア」です。

 

 サイドカラムエリアの設定方法

フッターエリア(左・中央・右)

コピーライトが表示されるフッター上部にウィジェットアイテムが表示されます。

 

 フッターエリアの設定方法
 フッターCTAの設定方法

ウィジェットアイテムを配置する方法は2つ

ウィジェットアイテムを配置する方法は2つあります。

  1. 外観 > ウィジェット から設置する方法
  2. 外観 > カスタマイズ > ウィジェット から設置する方法

 

それぞれの特徴を簡単にまとめると次の通りです。

「外観 > ウィジェット」の場合

ドラッグ&ドロップで簡単に設置と削除ができる
・エリアから削除しつつも設定を維持できる


「外観 > カスタマイズ > ウィジェット」の場合

ライブプレビューで管理しながら設置が行える
順番にクリックしていくだけなので迷わず設置できる

それでは、詳しく見ていきましょう。

1.「外観 > ウィジェット」から設置する方法

ウィジェットアイテムを設置する方法は2つあります。

  1. ドラッグ&ドロップして設置する方法
  2. パーツをクリックエリアを選択する方法

1.ドラッグ&ドロップで設置する方法

「利用できるウィジェット」の中から使いたいパーツを、設置したいエリアへドラッグ&ドロップするだけです。

 

ドロップした後は、ウィジェットアイテムの設定項目が表示されます。

2.パーツをクリックしエリアに配置する方法

  1. ウィジェットアイテムをクリック
     エリアが表示されます。

  2. エリアを選択
     選択したエリアは、チェックマークが表示され背景も着色されます。
  3. 「ウィジェットを追加」ボタンをクリック
     追加ボタンを押すと、ドラッグ&ドロップで配置したときと同じように、パーツの設定項目が表示されます。

削除する方法

エリアに配置したアイテムを削除する方法です。

ただ単に削除する場合

 右側のエリアにドラッグ&ドロップ

これだけでエリアから削除することができます。

 

 クリックして削除

エリア内にある削除したいアイテムをクリックすると設定項目が表示されます。項目の一番下にある「削除」をクリックしましょう。

設定を維持しつつ削除したい場合

「配置していたウィジェットアイテムを一時的に外したい」「設定した内容はそのままにウィジェットエリアから外したい」場合などに利用します。

 「使用停止中のウィジェット」エリアにドラッグ&ドロップ

「利用できるウィジェット」の一番下に「使用停止中のウィジェット」エリアがあります。ここへ一時的にエリアから外したいウィジェットアイテムをドラッグ&ドロップすることで、設定内容を維持したまま保管しておくことができます。

 

再配置したい場合は、「使用停止中のウィジェット」内にあるアイテムを表示させたいエリアへドラッグ&ドロップします。

エリア内のウィジェットアイテムを並び替える方法

ウィジェットアイテムをドラッグ&ドロップすることで、並び替えることができます。

2.外観 > カスタマイズ > ウィジェットで設定する方法

ライブプレビューを見ながら設置できるという利点があります。

設定方法

設定手順は以下の通りです。

  1. ウィジェットエリアをクリック

  2. 「ウィジェットを追加」ボタンをクリック
      ウィジェットアイテムの一覧が表示されます。

  3. ウィジェットアイテムを選択
      パーツを選択すると設定項目が表示されるので必要事項を入力します。

  4. 「公開」ボタンをクリック
      公開ボタンを押すと設定が保存されます。

注意点

お使いのテーマには他に2個のウィジェットエリアがありますが、このページでは表示していません。」というメッセージが表示されることがあります。下の画像を見ると、「投稿ページ上部・下部エリア」が表示されていません。

その理由は、外観 > カスタマイズ をクリックした際に表示されるのは、常にサイトのトップページ。つまり、そのページに配置することができるウィジェットエリアのみが表示されるように設定されているのです。

 

ハテナちゃん
「投稿ページ上部・下部エリア」にウィジェットを配置したい場合はどうしたらいいの?
サトコハ
ライブプレビュー画面に投稿ページを表示しましょう。プレビュー画面内の投稿記事をクリックすると表示されるよ。

すると、今まで「トップページ上部・下部エリア」と表示されていた項目が「投稿ページ上部・下部エリア」に変わるよ。

 

 

削除する方法

  1. ウィジェットアイテムをクリック
  2. 一番下の「削除」をクリック

「外観 > カスタマイズ > ウィジェット」で削除する場合は、「外観 > ウィジェット」のような設定を維持したまま削除する方法はありません

並び替える方法

 ドラッグ&ドロップで並び替える

ウィジェットアイテムをドラッグすることで並び替えることができます。

 矢印で移動させる方法

  1. 「並び替え」ボタンをクリック
  2. 矢印マークをクリックし、パーツを移動させる
  3. 「完了」ボタンをクリック
広告