ワードプレスをインストールして、記事も書けるようになったら、サイト全体のレイアウトが気になりますよね？
今回は、サイドバーやフッターなどサイトのあらゆる場所に便利なパーツを配置できる「ウィジェット」について説明していきます。
もくじ
ウィジェットとは
ウィジェットという言葉は、あまりなじみのない方も多いと思います。
簡単に言うと、サイトの各所にパーツを配置できる仕組みのことです。
サイドバーやフッターに「検索窓」や「新着記事一覧」、「カテゴリー」や「お問い合わせ」など、これ以外にも膨大な数の便利なパーツを配置できます。
ウィジェットに配置できるもの
ウィジェットとして配置できるものは様々ありますが、ポイントは、ワードプレスの状況によって変化するということです。
実は、最初から使えるウィジェットのほかに、ワードプレステーマが独自に用意しているウィジェットや特定のプラグインが用意しているウィジェットというものがあります。
今回は比較的よく使われるウィジェットの一例を紹介していきます。
ワードプレス標準搭載のウィジェット
アーカイブ
過去に公開した記事が月別にリンクになって表示されます。
タグクラウド
記事にはハッシュタグをつけることができるので、そのハッシュタグが一覧表示されます。
ナビゲーションメニュー
WEBサイトでよく見かける画面上部などの横並びメニューを任意の位置に設置ができます。
検索
サイト内検索が設置できます。
カスタムHTML
好きなようにHTMLを設置することができます。
テーマ独自のウィジェット
新着記事一覧
投稿した記事のタイトルにリンクをつけて新着順に表示します。
人気記事一覧
閲覧数などランキング形式でリンクつきの記事一覧を表示します。
SNSフォローボタン
各種SNSへ誘導するためのボタンを設置します。
広告枠
各種広告を設置することができます。
プラグイン独自のウィジェット
目次
作成した記事の目次をサイドバーなどに設置ができます。
翻訳ボタン
各国の言語に変換するためのボタンを設置することができます。
ウィジェットの種類
あなたのウィジェットはどんな画面？
動画や記事をご覧頂いた方は、ワードプレスの投稿機能であるエディターが、現在はクラシックエディターとブロックエディターの2種類存在していることはご存知ですよね？
実はウィジェットも2種類になってしまいました。
従来のウィジェットはこんな画面です。
そして、最新のワードプレスをインストールした場合やワードプレスを最新の状態に更新した方は、このような画面になっていると思います。
最新の投稿画面である、ブロックエディターをウィジェットでも採用した感じですね。
正直に言うと、この最新のウィジェット画面を使うのはまだ時期尚早といった感じです。
もちろんウィジェット単体としては使えるのですが、ウィジェットはテーマやプラグインとも関連性があります。
その為ウィジェット自体の仕組みが最新過ぎて、今まで使えていたテーマやプラグイン独自のウィジェットが正しく機能しない可能性があります。
とはいえ、新しいウィジェット画面が標準になっていきますから、現在新しいウィジェット画面が表示される場合は、最新の方で慣れていくと良いでしょう。
以前までのウィジェット画面に戻す方法もちゃんとあるので、万が一、何かしらの不具合が出る方や今までのウィジェットの方が使いやすいという場合は戻して利用すれば良いと思います。
旧型のウィジェットに戻す方法
以前までのウィジェットを「クラシックウィジェット」と呼びます。
こちらのタイプに戻したい方は、エディターと同じように、プラグインを追加すれば元に戻せます。
プラグインの新規追加画面の右上の検索窓から「Classic Widgets」と検索して、最初に出てきたClassic Widgetsのプラグインをインストール、有効化しましょう。
ウィジェットの使い方
ワードプレス管理画面の左メニューから「外観」にマウスをのせて、さらに表示される項目から「ウィジェット」をクリック。
するとウィジェットの編集画面が表示されますが、ここからは新旧別に操作を説明していきます。
クラシックウィジェットの使い方
まずは、クラシックウィジェットの方で簡単に使い方を説明します。
最新のウィジェットを利用する方は飛ばしてください。
ウィジェットの画面はこのようになっています。
画面上の右側がすでに設置済みのウィジェットでいわゆる、サイト上のパーツです。
それぞれのウィジェットはドラッグ&ドロップで移動可能なので、簡単に入れ替えが可能となっています。
このように入れ替えればサイト上でもすぐにこんな感じで入れ替わっています。
改めて管理画面を見てみるとウィジェットの管理画面、左側は、設置できるパーツが一覧で並んでいます。
ここから右側にドラッグすれば、好きな位置に好きなパーツを入れることが可能です。
ドラッグ以外にも直接クリックして、表示された位置へ移動することも可能です。
それでは実際にウィジェットを操作してみます。
現在のテーマは、ワードプレスをインストールした初期状態なので「Twenty Twenty-One」となっています。
このテーマは見ての通り、フッターにしかウィジェットを配置できません。
サイドバーが存在しないテーマだからですね。
これがテーマ変更でどう変わるかもこの後見ていきましょう。
まずは、わかりやいすいので「カレンダー」のウィジェットを入れてみます。
左側からカレンダーウィジェットをドラッグして好きな位置に移動してみましょう。
すると、画面右側のフッター内に入りました。
さらに、カレンダーにタイトルという項目が表示されました。
ここに「カレンダー」と入力して保存してみます。
それではWEBサイト上でどうなったか見てみましょう。
先ほどウィジェットで配置したカレンダーが入っていることがわかりますね。
カレンダーの上には入力した「タイトル」が表示されます。
他のウィジェットも同様に、タイトルが入っています。
先ほど入力したタイトルを空欄で保存すると、タイトルが無い状態で配置することもできます。
設置したウィジェットを移動したい場合は、ウィジェット管理画面で直接ドラッグすればレイアウトを変更することもできます。
ウィジェットを削除したい場合は、該当するウィジェットを展開して削除ボタンで削除ができます。
先ほどのカレンダーでは、編集項目がタイトルしかありませんでしたが、ウィジェットによっては詳細な内容を編集することもできるので色々と試してみましょう。
これまでに、ウィジェットはテーマと大きく関係していると説明しました。
実際にテーマ変更でどのように変わるかを見てみましょう。
わかりやすく、サイドバーがあるテーマに変更します。
そのままウィジェットの管理画面を見てみると先ほどフッターに設置されていたものがサイドバーに所属しています。
変わりにフッターは空になりました。
WEBサイトを見てみると、管理画面通り、サイドバーにウィジェットが配置されています。
一度管理画面に戻ってみます。
変更したテーマには、独自のウィジェットエリアがあります。
仮に、フッター3という場所にカレンダーを移動します。
この後、テーマをTwenty Twenty-Oneに戻すとどうなるでしょうか。
管理画面の「テーマ」へ移動して、Twenty Twenty-Oneを有効にしてみます。
そして、ウィジェットの管理画面を見てみるとカレンダーのウィジェットがなくなってしまいました。
実は、これは無くなったのではなく、Twenty Twenty-Oneにフッター3という場所が存在しないため、一時的に、「使用停止中のウィジェット」という場所に移動しただけなんです。
いわば、ウィジェットの仮の置き場です。
このように、テーマを変更すると、使用停止中のウィジェットに移動してしまうものもあると理解していれば、「なくなってしまった」と焦ることもありませんので、覚えておきましょう。
ウィジェットブロックエディターの使い方
次は、最新のウィジェットの使い方を説明します。
クラシックウィジェットの方は飛ばしてください。
ワードプレス本体を更新して最新の状態にした方、もしくは、最新の状態でワードプレスを始めた方はこのようなウィジェット管理画面になります。
基本的に仕組みとしては、クラシックウィジェットと同じ考え方で使いますが、操作方法は最新の投稿画面、ブロックエディターに似ています。
現在のテーマはTwenty Twenty-Oneになっているので、サイドバーは存在しません。
その為、ウィジェットが配置できるのもフッターのみとなっています。
最新のウィジェット管理画面では、画面中央が実際のWEBサイト上の見た目になっているので直感的に操作ができます。
画面上のところどころで「ブロックを追加」という＋マークが表示されます。
それをクリックすると、追加できる要素が表示されます。
ここに表示されていない要素を追加したい場合は、「すべて表示」から選ぶことができるようになります。
また、画面上部の青い＋マークからも同じように追加が可能です。
わかりやすくカレンダーを設置してみます。
画面右上の「更新」ボタンで状態を保存して実際のWEBサイトを見てみましょう。
すると、カレンダーが追加されています。
設置したウィジェットを移動したい場合は、該当のウィジェットをクリックしておきます。
すると、ウィジェットの上に、ツールバーが表示されます。
点が6個並んだボタンをクリックしたまま移動すると、クリックを離した場所に移動することができます。
上下の矢印ボタンで入れ替えることも可能です。
試しに一番上に移動してサイトを見てみます。
すると、移動した位置にレイアウトが変更されています。
ウィジェットを削除する場合は、ツールバー右端の3つの点のボタンをクリックして、一番下の「ブロックを削除」から、もしくは、削除したいウィジェットをクリックして選択状態にしてから、キーボードの「Delete」キーで削除が可能です。
ウィジェットを配置した状態でテーマを変更すると、レイアウトが変わってしまう場合があります。
それは、テーマによってウィジェットの配置場所が違うからです。
現在はサイドバーがないテーマですが、他のテーマに変更してみましょう。
サイドバーがある、「Hestia」というテーマに変更してみました。
改めてウィジェット管理画面に戻ってみると、なんとウィジェット管理画面が全然違いますね。
これは旧型のクラシックウィジェットです。
このように、現段階では新しいウィジェットに対応していないというテーマも多いです。
時期尚早という話をしたのはこのためです。
改めて管理画面を見てみると、先ほどフッターに入っていたウィジェットがサイドバーに移動しています。
このようにテーマを変更するとウィジェットが別の場所に移動する場合がありますので覚えておきましょう。
新しいウィジェット画面はまだまだ登場したばかりなので不具合なども出てくるかもしれませんので、どうしても新しいウィジェット画面が良いという場合や
慣れておきたいという場合を除いてクラシックウィジェットを使うことをお勧めします。
まとめ
お疲れ様でした。
ウィジェットはWEBサイトのパーツを管理するための機能です。
テーマやプラグインにも大きく影響を受ける部分なので、その点をしっかりと理解した状態で利用していきましょう。
ウィジェット管理画面の種類についても、新しいウィジェット管理画面が今後標準になっていくかもしれませんが、現段階では対応し切れていないこともありますので、 旧式のクラシックウィジェットを使うことをお勧めします。
