9 【ウィジェット】WordPressの新旧ウィジェットと使い方

ワードプレスをインストールして、記事も書けるようになったら、サイト全体のレイアウトが気になりますよね?

今回は、サイドバーやフッターなどサイトのあらゆる場所に便利なパーツを配置できる「ウィジェット」について説明していきます。

ウィジェットとは

ウィジェットという言葉は、あまりなじみのない方も多いと思います。

簡単に言うと、サイトの各所にパーツを配置できる仕組みのことです。

WordPressの新旧ウィジェットと使い方1

サイドバーやフッターに「検索窓」や「新着記事一覧」、「カテゴリー」や「お問い合わせ」など、これ以外にも膨大な数の便利なパーツを配置できます。

WordPressの新旧ウィジェットと使い方2

ウィジェットに配置できるもの

ウィジェットとして配置できるものは様々ありますが、ポイントは、ワードプレスの状況によって変化するということです。

WordPressの新旧ウィジェットと使い方

実は、最初から使えるウィジェットのほかに、ワードプレステーマが独自に用意しているウィジェットや特定のプラグインが用意しているウィジェットというものがあります。

WordPressの新旧ウィジェットと使い方4

今回は比較的よく使われるウィジェットの一例を紹介していきます。

ワードプレス標準搭載のウィジェット

WordPressの新旧ウィジェットと使い方5

アーカイブ

WordPressの新旧ウィジェットと使い方6

過去に公開した記事が月別にリンクになって表示されます。

タグクラウド

WordPressの新旧ウィジェットと使い方7

記事にはハッシュタグをつけることができるので、そのハッシュタグが一覧表示されます。

ナビゲーションメニュー

WordPressの新旧ウィジェットと使い方8

WEBサイトでよく見かける画面上部などの横並びメニューを任意の位置に設置ができます。

検索

WordPressの新旧ウィジェットと使い方9

サイト内検索が設置できます。

カスタムHTML

WordPressの新旧ウィジェットと使い方10

好きなようにHTMLを設置することができます。

テーマ独自のウィジェット

WordPressの新旧ウィジェットと使い方11
WordPressの新旧ウィジェットと使い方12

新着記事一覧

WordPressの新旧ウィジェットと使い方13

投稿した記事のタイトルにリンクをつけて新着順に表示します。

人気記事一覧

WordPressの新旧ウィジェットと使い方14

閲覧数などランキング形式でリンクつきの記事一覧を表示します。

SNSフォローボタン

WordPressの新旧ウィジェットと使い方15

各種SNSへ誘導するためのボタンを設置します。

広告枠

WordPressの新旧ウィジェットと使い方16

各種広告を設置することができます。

プラグイン独自のウィジェット

目次

作成した記事の目次をサイドバーなどに設置ができます。

翻訳ボタン

各国の言語に変換するためのボタンを設置することができます。

ウィジェットの種類

あなたのウィジェットはどんな画面?

動画や記事をご覧頂いた方は、ワードプレスの投稿機能であるエディターが、現在はクラシックエディターとブロックエディターの2種類存在していることはご存知ですよね?

WordPressの新旧ウィジェットと使い方17

実はウィジェットも2種類になってしまいました。

WordPressの新旧ウィジェットと使い方18

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

WordPressの新旧ウィジェットと使い方19

そして、最新のワードプレスをインストールした場合やワードプレスを最新の状態に更新した方は、このような画面になっていると思います。

WordPressの新旧ウィジェットと使い方20

最新の投稿画面である、ブロックエディターをウィジェットでも採用した感じですね。

正直に言うと、この最新のウィジェット画面を使うのはまだ時期尚早といった感じです。

WordPressの新旧ウィジェットと使い方21

もちろんウィジェット単体としては使えるのですが、ウィジェットはテーマやプラグインとも関連性があります。

その為ウィジェット自体の仕組みが最新過ぎて、今まで使えていたテーマやプラグイン独自のウィジェットが正しく機能しない可能性があります。

WordPressの新旧ウィジェットと使い方22

とはいえ、新しいウィジェット画面が標準になっていきますから、現在新しいウィジェット画面が表示される場合は、最新の方で慣れていくと良いでしょう。

以前までのウィジェット画面に戻す方法もちゃんとあるので、万が一、何かしらの不具合が出る方や今までのウィジェットの方が使いやすいという場合は戻して利用すれば良いと思います。

旧型のウィジェットに戻す方法

以前までのウィジェットを「クラシックウィジェット」と呼びます。

WordPressの新旧ウィジェットと使い方23

こちらのタイプに戻したい方は、エディターと同じように、プラグインを追加すれば元に戻せます。

WordPressの新旧ウィジェットと使い方24

プラグインの新規追加画面の右上の検索窓から「Classic Widgets」と検索して、最初に出てきたClassic Widgetsのプラグインをインストール、有効化しましょう。

ウィジェットの使い方

ワードプレス管理画面の左メニューから「外観」にマウスをのせて、さらに表示される項目から「ウィジェット」をクリック。

WordPressの新旧ウィジェットと使い方25

するとウィジェットの編集画面が表示されますが、ここからは新旧別に操作を説明していきます。

WordPressの新旧ウィジェットと使い方26

クラシックウィジェットの使い方

まずは、クラシックウィジェットの方で簡単に使い方を説明します。

最新のウィジェットを利用する方は飛ばしてください。

ウィジェットの画面はこのようになっています。

WordPressの新旧ウィジェットと使い方27

画面上の右側がすでに設置済みのウィジェットでいわゆる、サイト上のパーツです。

WordPressの新旧ウィジェットと使い方28
WordPressの新旧ウィジェットと使い方29

それぞれのウィジェットはドラッグ&ドロップで移動可能なので、簡単に入れ替えが可能となっています。

WordPressの新旧ウィジェットと使い方30

このように入れ替えればサイト上でもすぐにこんな感じで入れ替わっています。

WordPressの新旧ウィジェットと使い方31

改めて管理画面を見てみるとウィジェットの管理画面、左側は、設置できるパーツが一覧で並んでいます。

WordPressの新旧ウィジェットと使い方32

ここから右側にドラッグすれば、好きな位置に好きなパーツを入れることが可能です。

WordPressの新旧ウィジェットと使い方33

ドラッグ以外にも直接クリックして、表示された位置へ移動することも可能です。

WordPressの新旧ウィジェットと使い方34

それでは実際にウィジェットを操作してみます。

現在のテーマは、ワードプレスをインストールした初期状態なので「Twenty Twenty-One」となっています。

このテーマは見ての通り、フッターにしかウィジェットを配置できません。

WordPressの新旧ウィジェットと使い方35

サイドバーが存在しないテーマだからですね。

これがテーマ変更でどう変わるかもこの後見ていきましょう。

まずは、わかりやいすいので「カレンダー」のウィジェットを入れてみます。

WordPressの新旧ウィジェットと使い方36

左側からカレンダーウィジェットをドラッグして好きな位置に移動してみましょう。

すると、画面右側のフッター内に入りました。

WordPressの新旧ウィジェットと使い方37

さらに、カレンダーにタイトルという項目が表示されました。

ここに「カレンダー」と入力して保存してみます。

WordPressの新旧ウィジェットと使い方38

それではWEBサイト上でどうなったか見てみましょう。

先ほどウィジェットで配置したカレンダーが入っていることがわかりますね。

WordPressの新旧ウィジェットと使い方39

カレンダーの上には入力した「タイトル」が表示されます。

WordPressの新旧ウィジェットと使い方40

他のウィジェットも同様に、タイトルが入っています。

WordPressの新旧ウィジェットと使い方41

先ほど入力したタイトルを空欄で保存すると、タイトルが無い状態で配置することもできます。

設置したウィジェットを移動したい場合は、ウィジェット管理画面で直接ドラッグすればレイアウトを変更することもできます。

WordPressの新旧ウィジェットと使い方42

ウィジェットを削除したい場合は、該当するウィジェットを展開して削除ボタンで削除ができます。

WordPressの新旧ウィジェットと使い方43

先ほどのカレンダーでは、編集項目がタイトルしかありませんでしたが、ウィジェットによっては詳細な内容を編集することもできるので色々と試してみましょう。

WordPressの新旧ウィジェットと使い方44

これまでに、ウィジェットはテーマと大きく関係していると説明しました。

実際にテーマ変更でどのように変わるかを見てみましょう。

わかりやすく、サイドバーがあるテーマに変更します。

WordPressの新旧ウィジェットと使い方45

そのままウィジェットの管理画面を見てみると先ほどフッターに設置されていたものがサイドバーに所属しています。

WordPressの新旧ウィジェットと使い方46

変わりにフッターは空になりました。

WordPressの新旧ウィジェットと使い方47

WEBサイトを見てみると、管理画面通り、サイドバーにウィジェットが配置されています。

WordPressの新旧ウィジェットと使い方48

一度管理画面に戻ってみます。

変更したテーマには、独自のウィジェットエリアがあります。

WordPressの新旧ウィジェットと使い方49

仮に、フッター3という場所にカレンダーを移動します。

WordPressの新旧ウィジェットと使い方50

この後、テーマをTwenty Twenty-Oneに戻すとどうなるでしょうか。

管理画面の「テーマ」へ移動して、Twenty Twenty-Oneを有効にしてみます。

WordPressの新旧ウィジェットと使い方51

そして、ウィジェットの管理画面を見てみるとカレンダーのウィジェットがなくなってしまいました。

WordPressの新旧ウィジェットと使い方52

実は、これは無くなったのではなく、Twenty Twenty-Oneにフッター3という場所が存在しないため、一時的に、「使用停止中のウィジェット」という場所に移動しただけなんです。

WordPressの新旧ウィジェットと使い方53

いわば、ウィジェットの仮の置き場です。

WordPressの新旧ウィジェットと使い方54

このように、テーマを変更すると、使用停止中のウィジェットに移動してしまうものもあると理解していれば、「なくなってしまった」と焦ることもありませんので、覚えておきましょう。

ウィジェットブロックエディターの使い方

次は、最新のウィジェットの使い方を説明します。

クラシックウィジェットの方は飛ばしてください。

WordPressの新旧ウィジェットと使い方55

ワードプレス本体を更新して最新の状態にした方、もしくは、最新の状態でワードプレスを始めた方はこのようなウィジェット管理画面になります。

WordPressの新旧ウィジェットと使い方56

基本的に仕組みとしては、クラシックウィジェットと同じ考え方で使いますが、操作方法は最新の投稿画面、ブロックエディターに似ています。

WordPressの新旧ウィジェットと使い方57

現在のテーマはTwenty Twenty-Oneになっているので、サイドバーは存在しません。

WordPressの新旧ウィジェットと使い方58

その為、ウィジェットが配置できるのもフッターのみとなっています。

WordPressの新旧ウィジェットと使い方59

最新のウィジェット管理画面では、画面中央が実際のWEBサイト上の見た目になっているので直感的に操作ができます。

画面上のところどころで「ブロックを追加」という+マークが表示されます。

WordPressの新旧ウィジェットと使い方60

それをクリックすると、追加できる要素が表示されます。

WordPressの新旧ウィジェットと使い方61

ここに表示されていない要素を追加したい場合は、「すべて表示」から選ぶことができるようになります。

WordPressの新旧ウィジェットと使い方62

また、画面上部の青い+マークからも同じように追加が可能です。

WordPressの新旧ウィジェットと使い方63

わかりやすくカレンダーを設置してみます。

WordPressの新旧ウィジェットと使い方64

画面右上の「更新」ボタンで状態を保存して実際のWEBサイトを見てみましょう。

WordPressの新旧ウィジェットと使い方65

すると、カレンダーが追加されています。

WordPressの新旧ウィジェットと使い方66

設置したウィジェットを移動したい場合は、該当のウィジェットをクリックしておきます。

すると、ウィジェットの上に、ツールバーが表示されます。

WordPressの新旧ウィジェットと使い方67

点が6個並んだボタンをクリックしたまま移動すると、クリックを離した場所に移動することができます。

WordPressの新旧ウィジェットと使い方68

上下の矢印ボタンで入れ替えることも可能です。

WordPressの新旧ウィジェットと使い方69

試しに一番上に移動してサイトを見てみます。

WordPressの新旧ウィジェットと使い方70

すると、移動した位置にレイアウトが変更されています。

WordPressの新旧ウィジェットと使い方71

ウィジェットを削除する場合は、ツールバー右端の3つの点のボタンをクリックして、一番下の「ブロックを削除」から、もしくは、削除したいウィジェットをクリックして選択状態にしてから、キーボードの「Delete」キーで削除が可能です。

ウィジェットを配置した状態でテーマを変更すると、レイアウトが変わってしまう場合があります。

WordPressの新旧ウィジェットと使い方72

それは、テーマによってウィジェットの配置場所が違うからです。

現在はサイドバーがないテーマですが、他のテーマに変更してみましょう。

サイドバーがある、「Hestia」というテーマに変更してみました。

WordPressの新旧ウィジェットと使い方73

改めてウィジェット管理画面に戻ってみると、なんとウィジェット管理画面が全然違いますね。

WordPressの新旧ウィジェットと使い方74

これは旧型のクラシックウィジェットです。

WordPressの新旧ウィジェットと使い方75

このように、現段階では新しいウィジェットに対応していないというテーマも多いです。

WordPressの新旧ウィジェットと使い方76

時期尚早という話をしたのはこのためです。

改めて管理画面を見てみると、先ほどフッターに入っていたウィジェットがサイドバーに移動しています。

WordPressの新旧ウィジェットと使い方77

このようにテーマを変更するとウィジェットが別の場所に移動する場合がありますので覚えておきましょう。

新しいウィジェット画面はまだまだ登場したばかりなので不具合なども出てくるかもしれませんので、どうしても新しいウィジェット画面が良いという場合や

慣れておきたいという場合を除いてクラシックウィジェットを使うことをお勧めします。

まとめ

WordPressの新旧ウィジェットと使い方78

お疲れ様でした。

ウィジェットはWEBサイトのパーツを管理するための機能です。

テーマやプラグインにも大きく影響を受ける部分なので、その点をしっかりと理解した状態で利用していきましょう。

ウィジェット管理画面の種類についても、新しいウィジェット管理画面が今後標準になっていくかもしれませんが、現段階では対応し切れていないこともありますので、 旧式のクラシックウィジェットを使うことをお勧めします。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA