WordPressの使い方
WordPressの使い方『ウィジェットの使い方』

WordPress『ウィジェット』の編集の仕方

WordPressのウィジェットとは、デフォルトにあるアーカイブやカテゴリー、メタ情報などの部分を指します。
それ以外にもたくさんのウィジェットをWoedPressは搭載しています。
この記事では、ウィジェットを更に追加したり削除したり、場所を変えたりなどの編集の仕方を説明していきます。

アストラのテーマでウィジェットが表示される場所

サイトの画面右側のサイドバーがウィジェットエリアになります。
※こちらではサンプルとして『Astra』のテーマを使用しています。

ウィジェット編集ページへの行き方

ウィジェットの編集画面への行き方

左側のバーの中の『外観』にカーソルをあて、出てきたボックスの中の『ウィジェット』をクリックします。

ウィジェット編集のページ

するとこちらのウィジェットの編集ページの表示になります。

ウィジェットの位置とサイト表示の関係

ウィジェット編集画面でのウィジェットの表示と並び順

こちらのサンプルの編集画面のメインスライダーには、

  • アーカイブ
  • カテゴリー
  • メタ情報

とあります。

ウィジェットの並び順を示したサイトの表示画面

こちらは実際のサイトの画面です。
ウィジェットの編集画面のメインスライダーに上から下に表記してある順番通りにサイトにウィジェットが並びます。

※尚、サンプルのテーマ『Astra』では、メインスライダーはサイトの右側に大きく表示されます。
テーマによって、また有料版か無料版かによってリストの表示場所は異なります。

また、メインスライダー以外のヘッダーやフッターのウィジェットの位置関係も、編集画面で上から順番に配置されているウィジェットの順番がサイトに反映します。
サイトで縦並びで表示の場合はメインスライダーの表示の順番と同じ様に上から下、横並びで表示される場合は左から右になります。

ドラッグ&ドロップでウィジェットの配置を変える

ウィジェットをドラッグ&ドロップで並び替えする

例えば、『アーカイブ』を1番下に持っていきたい場合は、『アーカイブ』をドラッグ&ドロップで『メタ情報』の下に配置します。

並び替えした後の編集画面の表示

この様にウィジェットの並び順が簡単に変更されました。

ウィジェットの並び替えをした後のサイト表示

実際のサイトの表示でも配置が変更されているのがわかると思います。

利用できるウィジェットについて

利用できるウィジェットの一覧

ウィジェットの編集画面の左側に『利用できるウィジェット』の一覧が表示されます。

ですが、どの様なウィジェットが利用できるかは、有効化しているテーマやプラグインに大きく左右されます。

※こちらの利用できるウィジェットはテーマに『Astra』を入れているのでAstraに強く影響を受けています。

テーマ別のウィジェット編集画面(参考例)

アストラの無料版と有料版の違い

(例1)こちらは無料版の『Astra』を有効化している時のウィジェット表示画面です。
デフォルトからヘッダーやフッターのウィジェットエリアの表示はありますが、実際に無料版では使用できるウィジェットエリアは『メインスライダー』のみです。
Astra Proは有料テーマになります。
購入をすれば、、メインスライダー以外のウィジェットエリアの使用が可能になります。

サンプル・ Twenty Seventeenを有効化した時のウィジェット編集画面

(例2)こちらは『Twenty Seventeen』のテーマを有効化した時のウィジェットの編集画面です。
利用可能なウィジェットの一部と、画面右側ウィジェットエリアのリストの内容も変わりました。

Twenty Seventeenを有効化した時のサイトの表示画面

こちらはテーマ『Twenty Seventeen』を有効化した時のサイトの表示画面です。

サンプル・Twenty Fifteenのテーマよ有効化した時のウィジェット編集画面

(例3)こちらは『Twenty Fifteen』のテーマを有効化した時のウィジェットの編集画面です。
こちらも他のものと同様に少し仕様が異なりました。

Twenty Fifteenが有効化している時のサイトの表示画面

尚、こちらはテーマ『Twenty Fifteen』を有効化した時のサイトの表示画面です。
こちらのテーマの特徴として、左サイドバーになっていますね。

テーマによってウィジェットエリアが上にあったり下にあったり、左側に持ってこれたりなど、好みの仕様に変更することが可能です。

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

参考に、メインスラーダーの1番上に『カレンダー』ウィジェットを追加したいと思います。

ウィジェット編集画面からウィジェットを追加する方法・カレンダーウィジェットを追加

『カレンダー』をドラッグ&ドロップでメインスライダーに挿入します。

カレンダーを追加した後のサイトの表示画面

すると、サイトでカレンダーがこの様に表示されました。

検索ウィジェットと画像ウィジェットの追加

他にも『検索』ウィジェットと『画像』ウィジェットを追加してみました。

検索と画像を追加した後のサイトの表示画面

サイト画面には、検索バーと画像が更に追加されました。

この様に、サイト内に簡単にウィジェットを追加することができます。

ウィジェットをライブプレビューで編集する方法

『ライブプレビューで管理』とは、実際のサイトの表示を見ながら、ウィジェットの編集をすることができる機能です。

ウィジェットをライブプレビューで編集する方法

ウィジェットの編集画面の一番上に『ライブプレビューで管理』というボタンがあるのでそちらをクリックします。
※こちらはサンプルとして『Twenty Twenty』のテーマ有効化しました。

ライブプレビューで管理をクリックした後の画面

するとこの様な画面表示になります。
実際のサイトの表示画面と左側にウィジェットの編集タブが表示されました。
Twenty Twentyには、『フッター1』と『フッター2』の2つのウィジェットエリアがあります。

Twenty Twentyで編集できるウィジェットエリア

フッター1(左側)とフッター2(右側)がこの様に表示されます。
こちらの画面では、フッター1の編集タブが開いており、ここから新たなウィジェットの追加や削除など、ウィジェットの編集ページでできることがここでも行えます。
ドラッグ&ドロップでのウィジェットの並び替えもできますが以下の様に、

ウィジェットをドラッグ&ドロップ以外で並べ変える方法
『並べ替え』をクリックした後の表示画面

上記画像左、ウィジェットエディター下部にある『並べ替え』をクリックすると、画像右の様にウィジェット名の横に▽△ボタンが表示されるので、そちらのボタンで上下並べ替えが可能です。
並べ替えが終わったら、『完了』をクリックします。

ライブプレビューでウィジェットを追加

ライブプレビューでウィジェットを追加する方法

では、試しに『フッター2』でウィジェットを追加してみます。

編集タブにある『+ウィジェットを追加』をクリックすると、その右側に利用可能なウィジェットが表示されますので、そこから追加したいウィジェットをクリックします。

ウィジェットを追加した後の同表示画面

『フッター2』のセクションにウィジェットを挿入しました。
画像ウィジェットなら画像挿入タブ、テキストウィジェットならテキストエディターが表示されますのでテキストを入力します。

ライブプレビューで編集を終えたら公開をクリック

編集後は公開をクリック

ひととおり編集を終えたら、画面左上にある『公開』をクリックします。
公開完了後、左側の×をクリックします。

ウィジェット編集ページ

すると、こちらのウィジェット編集の画面に戻ります。

サイトの表示確認

サイトを表示させるとこの様に、編集した通りにサイトが表示されました。
※こちらのセクションではサンプルとして『Twenty Twenty』のテーマを使用しています。

ライブプレビューでの編集画面は外観のカスタマイズからも行ける!

外観のカスタマイズからウィジェットのライブプレビュー編集に行く

画面左側のバーの外観内の『カスタマイズ』をクリックします。

左サイドバーのウィジェットをクリック

画面左側のバーの中の『ウィジェット』をクリックします。

ウィジェットの編集画面

するとこの様に、『ライププレビュー』での編集画面に行くことができます。


ウィジェットの編集で、簡単に機能を追加したり、配置を変えることができます。
また、ライブプレビューでは実際にサイトを見ながら編集・構築できるのでとても便利です。
ぜひ、自分オリジナルのWebサイト作りに役立ててくださいね!

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通