家ブログの登録はこちらをクリック!

【WordPress設定編⑤】ウィジェットの基本と設定方法|はじめてのWordPress家ブログの作り方

WordPressテーマのウィジェットの基本と設定方法

今回は、WordPress設定編第5回「ウィジェットの基本と設定方法」について解説します。それでは、ごゆっくり見ていってください!

すべての記事をこちらにまとめました↓

あわせて読みたい
はじめてのWordPress家ブログの作り方(全記事まとめ) 「はじめてのWordPress家ブログの作り方」へようこそ! このシリーズでは、これからWordPressで施主ブログを作ってみようと思っている方に向けて、はじめてでもスムーズ...
この記事を書いている人
みんなの家ブロげ検索管理人

ホームページやWEBシステムを作るお仕事をやっています。自らもWordPressで施主ブログを6年目運営中です→こちら

目次

ウィジェットの基本と設定方法

WordPressのウィジェットの設定方法とは?

WordPressのウィジェットについて抑えておくべきポイントは以下の5つです。

  1. ウィジェットとは?
  2. ウィジェットを設置できる場所(ウィジェットエリア)とは?
  3. ウィジェットにはどんなものがある?
  4. ウィジェットの設定方法
  5. 施主ブログのおすすめウィジェットサンプル

今回は、ウィジェットの基礎知識から設定方法まで詳しく解説します。それでは行ってみましょう!

ウィジェットとは?

WordPressのウィジェットとは?ウィジェットエリアとは?

ウィジェットとは、簡単にいうとブログパーツのことです。

ウィジェットを使えば、サイドバーやフッターなどのブログの共通部分に、カレンダーや新着一覧、カテゴリー一覧などのブログパーツをいとも簡単に追加することができます。

このウィジェットが追加できる共通部分のことを「ウィジェットエリア」とよびます。

管理人tiu

全ページに表示したいものをウィジェットで追加するイメージです

ウィジェットにはどんなものがある?

実際に、ウィジェットにはどのようなものがあるかご紹介します。

WordPress公式テーマ「Twenty Twenty」のウィジェット一覧のイメージ

まずこちらは、公式テーマである「Twenty Twenty」のウィジェット一覧です。カレンダーやカテゴリーなど基本のものが18個用意されていることが分かります。

WordPressテーマ「Cocoon」のウィジェット一覧のイメージ37か所

一方、こちらは非公式の高性能テーマである「Cocoon」のウィジェット一覧です。なんと17個も多い37個のウィジェットが用意されていました。

何が追加されているかは、[C]と書いているものが目印になっています(テーマによってことなります)。プロフェールやランキングなど、ブログに役立つウィジェットがたくさん用意されています。ウィジェットの種類を下に記載しているので参考にしてください。

高性能テーマには、ウィジェットがたくさん用意されていることが多い

標準のウィジェットの種類

具体的にどのようなウィジェットがあるか表にしました。こちらは、標準のウィジェットの種類になります。

ウィジェット名説明
RSS任意の他サイトのRSS/Atomフィードから記事一覧を生成
アーカイブ年月ごとの記事リンク一覧
カスタムHTML任意の HTML コード、TwitterやFacebook、アフィリエイトなどの埋め込みに使用
カテゴリーカテゴリーの一覧
カレンダー記事リンク付きカレンダー
ギャラリー画像ギャラリー
タグクラウドよく使用されているタグ一覧
テキスト任意のテキストの出力
ナビゲーションメニューメニューを出力
ブロックブロックを含むウィジェット
メタ情報ログイン、RSS、WordPress.org へのリンクなどの出力
リンクサイドメニューのリンクからリンクを作成しその一覧をリンクとして出力
動画メディアライブラリ内から、または YouTube・Vimeo・その他のプロバイダからの動画を出力
固定ページブログ内の固定ページ一覧を出力
最新のコメントこのサイトの最近のコメントを出力
最新の投稿ブログ内の新着記事一覧を出力
検索サイト内検索フォームを出力
画像画像を出力
音声音声プレーヤーを表示

高性能テーマ(Cocoon)で追加されたウィジェットの一例

そして、こちらが高性能テーマ(Cocoon)に追加されていたウィジェットになります。(一部)

ウィジェット名説明
SNSフォローボタンSNSサービスのフォローアイコンボタンを表示するウィジェット
Facebookボックス「この記事が気に入ったらいいね!しよう」ウィジェットです。
おすすめカードおすすめカード一覧を表示するウィジェットです。
プロフィール記事を書いた著者のプロフィール情報を表示するウィジェットです。
ランキング商品・サービスのランキング表示をウィジェットです。
人気記事人気記事リストをサムネイルつきで表示するウィジェットです。
広告パソコンとモバイル端末両方に表示される広告ウィジェットです。
新着記事新着記事リストをサムネイルつきで表示するウィジェットです。
関連記事関連記事リストをサムネイルつきで表示するウィジェットです。投稿ページのみ表示されます。
メタ情報ログイン、RSS、WordPress.org へのリンクなどの出力
リンクサイドメニューのリンクからリンクを作成しその一覧をリンクとして出力

ウィジェットはテーマによって微妙に違うこともあるので、実際にひととおり試してみるのがおすすめです

ウィジェットを設置できる場所とは?

ウィジェットエリアは基本的に以下の場所が用意されていることが多いです。

  • サイドメニュー
  • コンテンツ上部
  • コンテンツ下部
  • フッター
WordPressウィジェットの場所の画面の説明

「多い」と書いたのは、ウィジェットを設置できる場所がテーマによって異なるからです。↓こちらをご覧ください。

テーマごとにウィジェットエリアは異なる

WordPress ウィジェットのテーマごとの違い

公式テーマである「Twenty Twenty」には2か所、非公式の高性能テーマである「Cocoon」にはなんと31か所もウィジェットを設置する場所が用意されています。このように、ウィジェットの配置場所はテーマの開発者が自由に選ぶことができるようになっています。

ウィジェットの設定箇所が多いほど、ユーザーは好きなところにウィジェットを追加することができるので柔軟性が上がるというわけです。

気の利いたところにウィジェットエリアが用意されているかどうかは、テーマ選びの重要な要素になっているので、高性能テーマではウィジェットエリアがたくさん用意されているケースが多くなっています。

管理人tiu

テーマ開発時に競合テーマより便利にしようとするのでだんだんと増えてきました

ウィジェットの作成と設定方法

それでは、実際にウィジェットを作っていきしょう。今回は↓こちらのサンプルを作ってみたいと思います。

WordPressウィジェットサンプル

ウィジェットの新規作成方法

WordPressウィジェット設定場所

まず、[外観]ー[ウィジェット]をクリックします。

WordPressウィジェット設定画面ウィジェットエリア

ウィジェット設定画面が表示されました。ウィジェット設定画面は左と右に分かれていて、左が「ウィジェット一覧」右が「ウィジェットエリア」となっています。

WordPressウィジェットをドラッグ

設定はとても簡単です。左のウィジェット一覧から追加したいウィジェットを右のウィジェットエリアにドラッグするだけです。

ここでは、[C]プロフィールを追加してみました。ちなみにこのウィジェットは「Cocoon」専用のウィジェットになります。

WordPressウィジェット保存クリック

ドラッグしたらウィジェットの設定が展開されるので、必要事項を入力して保存をクリックします。

WordPressウィジェット カテゴリーをドラッグ

続いてカテゴリーウィジェットも同じようにドラッグしてみましょう。

WordPressウィジェット カテゴリーを設定

こちらも設定をしたら「保存」をクリックします。それでは完成図を見てみましょう。

WordPressウィジェット完成

このとおり、サイドメニューにプロフィールとカテゴリーが追加されました。

ウィジェットの並び順を変える方法

WordPressウィジェットの並び順を変更する方法

並び順を変えたい時は「ウィジェット」をドラッグします。ドラッグが完了すると自動的に保存されます。

ウィジェットを削除する方法

WordPressウィジェットの削除方法

ウィジェットの削除は、ウィジェットを開いて「削除」をクリックするだけです。

施主ブログのおすすめウィジェットサンプル

おすすめのウィジェット設定 投稿ページ

おすすめといっても、決まったウィジェットはありませんが、よく見かける一番オーソドックスな投稿ページのウィジェットの設定パターンをご紹介します。

  • サイドバー
  • 投稿上部(投稿本文上)
  • 投稿下部(投稿本文下)

設定箇所は基本的にこの3箇所が多いかと思います。

スマホを意識する

ポイントはスマホを意識することです。スマホではサイドバーは下の方に移動してしまうので、注目して欲しいウィジェットをサイドメニューに表示してもほとんど見られないということになってしまいます。そこで、スマホ対策では投稿本文上や投稿本文下がメインのウィジェットの設定になってきます。

ウィジェットの設定

WordPressおすすめのウィジェット設定画面

サイドバーのウィジェットの設定はこちらです。広告のコードは基本的には「カスタムHTML」で設定します。テーマによっては専用のウィジェットを用意していてくれたりしますので、お使いのテーマをご確認ください。

WordPressおすすめのウィジェット設定画面投稿本文上

投稿本文の上下もウィジェットを設定することがある場所になります。

最も見られやすい箇所は「投稿本文上」となりますので、一番見て欲しいウィジェットを張ることが多いです。投稿本文したでは、記事を読み終えた読者がさらに他のページのリンクを押してくれるような配置にしておきます。

まとめ

以上、今回は、WordPressのウィジェットについて解説してきました。

今回の記事が少しでも参考になれば幸いです。それではまた!

目次
閉じる