PRこの記事には商品プロモーションを含む場合があります。

デザイン

WordPress ウィジェットをカスタマイズしよう!おすすめ無料プラグイン8選

Taka
会社員がブログ運営4カ月で月2万PV達成。4年目の現在は3サイトを運営しています。 こんな悩みを解決できる記事を用意しました!

この記事では サイト全体がおしゃれになる おすすめウィジット便利なプラグイン を紹介しています。

ウィジットコンテンツの設定手順もすべて画像ベースでまとめているので、内容をまねするだけで完成度のたかいブログサイトを実現可能。

ささっと記事を読んでおしゃれなブログサイトを作っていきましょう。

\この記事を読んだ人に人気/

おしゃれなブログの作り方|参考例をテーマごとに42コ厳選【webデザイン】

WordPressのウィジェットとは

WordPressの ウィジェットとは サイドバー や フッター などのエリア にコンテンツを追加するためのブロックです。

ウィジェットのイメージ画像

サイドバー や フッター をカスタマイズしたい場合は、ウィジェットを設定しましょう。

ウィジェットの役割
  • サイトのデザイン・見栄えをおしゃれにする
  • 読者の回遊率をたかめる
  • 広告に流動して収益UPにつなげる

 

つぎの画像は、サイドバーウィジェットに「広告」と「おすすめ記事」を追加したサイトのイメージです。

サイドバーウィジェットに「広告」と「おすすめ記事」を追加したサイトのイメージ

WordPress にはデフォルトで ウィジェットをカスタマイズするための機能 が搭載されています

さらに無料のプラグインも併用することで自由度はさらに高くなるので、初心者でも思いのままカスタマイズできちゃいます。

ブロックウィジェットとクラシックウィジェットの違い

WordPress のアップデートにより、ウィジェットの画面レイアウトが大幅に変更しました。

 

【現在(WordPress 5.8 以降):ブロックウィジェット】

画像:ブロックウィジェット

 

【従来(WordPress 5.7 以前):クラシックウィジェット】

画像:クラシックウィジェット

 

このように、ご利用の WordPress のバージョンによって画面レイアウトが異なります。

なお、現在の WordPress では ブロックウィジェット が標準搭載されているため、この記事ではブロックウィジェットをベースに解説していきます

ブロックウィジェットが標準化してまだ日が浅いため、ネット上のほとんどの記事はクラシックウィジェットをベースにまとめられています。

「クラシックウィジェットの方がカスタマイズしやすそうだ」と思った人は、以下のプラグインをインストールすれば、クラシックウィジェット を利用できるようになります。

画像:Classic Widgets

【Classic Widgets】

前置きが長くなりましたが、つぎの章から ウィジェットの設定方法について解説していきます。

 

ウィジェットの設定手順

この章ではウィジェットの設定手順について解説していきます。

  1. ウィジェットを追加する
  2. ウィジェットの配置を入れ替える
  3. ウィジェットを削除する

ではひとつずつ見ていきましょう。

ウィジェットを追加する

ウィジェットの設定は「ウィジェット設定画面」から行います。

STEP
「ウィジェット設定画面」を表示

WordPress の管理画面 へログインし、左メニューから「 外観 > ウィジェット 」を選択します。

画像:ウィジェット設定画面を表示

STEP
ウィジェットに コンテンツを追加

ウィジェット設定画面が表示されたら、カスタマイズしたいウィジェットを選択しましょう。

画像:カスタマイズしたいウィジェットを選択する

ご利用のテーマによって、ウィジェットの や タイトル が異なります

テーマによっては サイドバー、フッター 関連 のウィジェットが複数ある場合もある ので、いずれか適当なものを選択してください。

ウィジェットを選択すると + ボタンを表示されます。

+ ボタンを押して任意のコンテンツを追加しましょう。

画像:+ ボタンを押して任意のコンテンツを追加する

⇒ サイドバーがおしゃれになるおすすめコンテンツ10選【 画像ベースで設定手順を解説します】

STEP
カスタマイズを保存

コンテンツを追加したら画面右上の「更新」ボタンを押してください。

画像:コンテンツを追加したら画面右上の「更新」ボタンを押す

これでウィジェットのカスタマイズは完了です。

簡単ですよね。

それでは おしゃれなサイドバー、フッターを作っていきましょう。

⇒ サイドバーがおしゃれになるおすすめコンテンツ10選【 画像ベースで設定手順を解説します】

 

ウィジェットの配置を入れ替える

つぎにウィジェットを入れ替える方法について解説します。

ウィジェットの配置を入れ替えた場合のイメージ画像

上の画像では、サイドバーに表示されている「おすすめ記事」と「広告」の上下が入れ替わっていますよね。

設定前後のイメージとしてはこんな感じです。

では手順を見ていきましょう。

STEP
「ウィジェット設定画面」を表示

WordPress の管理画面 へログインし、左メニューから「 外観 > ウィジェット 」を選択します。

画像:ウィジェット設定画面を表示

STEP
ウィジェット内コンテンツの配置を入れ替える

表示順を変更したいウィジェットコンテンツを選択して「∨」ボタンをクリック。

画像:コンテンツを選択して配置を移動

「∨」ボタンを押したら、コンテンツが入れ替わるかと思います。

コンテンツの表示順を入れ替えたら「更新」ボタンをクリックして保存しましょう。

画像:コンテンツの表示順を入れ替えたら「更新」ボタンをクリックする

はい完了。これだけです。

 

ウィジェットを削除する

つぎにウィジェットを削除する方法を解説します。

ウィジェットを削除した場合のイメージ画像

上の画像では、サイドバーに表示している「おすすめ記事」がウィジェットから削除されています。

設定前後のイメージとしてはこんな感じです。

それでは 削除の手順を見ていきましょう。

STEP
「ウィジェット設定画面」を表示

WordPress の管理画面 へログインし、左メニューから「 外観 > ウィジェット 」を選択します。

画像:ウィジェット設定画面を表示する

STEP
コンテンツを削除

ウィジェットから削除したいコンテンツを選択して「カスタムHTMLを削除」をクリックします。

画像:コンテンツを削除する

コンテンツが削除されたら「更新」ボタンを押して、設定を保存しましょう。

画像:コンテンツが削除されたら「更新」ボタンを押して保存する

ハイ完了です。

 

ウィジェットが表示されない原因

ウィジェットが表示されない原因のほとんどが、以下のいずれかに該当します。

  • WordPress テーマの設定が「1カラム表示」になっている
  • 投稿編集画面のレイアウト設定が「1カラム表示」になっている
  • ウィジェットの変更が保存できてない
  • プラグインが干渉してる

ではそれぞれの対処法を見ていきましょう。

原因1:WordPress テーマの設定が「サイドバー非表示」になっている 場合の対処法

WordPress テーマによっては

  • サイトを1カラムで表示するのか
  • サイトを2カラムで表示するのか

を設定できます。

1カラム表示・2カラム表示のイメージ画像

1カラムで表示するよう設定していたらサイドバーが表示されないので、2カラムで表示する設定に変更してください。

また、テーマごとに設定方法が異なります。ご利用のテーマのやり方をご参照ください。

check

Affinger で設定する場合
⇒ 参考:https://seashell-spa.com/affinger6-wordpress-scroll/

Cocoon で設定する場合
⇒ 参考:https://kenjineer0224.com/cocoon-sidebar-contents-follow/

SWELL で設定する場合
⇒ 参考:https://swell-theme.com/function/3373/

 

原因2:投稿編集画面のレイアウト設定が「1カラム表示」になっている 場合の対処法

WordPress テーマによっては、投稿編集画面から投稿記事ごとにサイドバー表示・非表示を切り替えられるものがあります。

「投稿 > 新規追加 」で投稿編集画面をひらいて「カラム変更」の設定項目があるかを確かめてみましょう。

投稿編集画面のレイアウト設定のイメージ画像

設定の項目に「カラム変更」がある場合「レイアウトをリセットする」を選択するとサイドバーを表示できます。

 

原因3:ウィジェットの変更が保存できてない 場合の対処法

ウィジェット設定画面でウィジェットを変更した後、「更新」ボタンを押さなければ変更が保存されません。

画像:ウィジェット設定画面を編集したら更新ボタンをクリック

設定を変更した後は、かならず「更新」ボタンを押して変更を保存しましょう。

 

原因4:プラグインが干渉してる 場合の対処法

WordPress にインストールしているプラグインが原因で、ウィジェットが表示できないこともあります。

原因が思い当たらない場合は、プラグインをひとつずつ無効化して「原因になっているものはないか」を確認してみてください。

 

ウィジェット自体を非表示にする方法

3タイプのサイドバーのイメージ画像

サイドバー の 表示・非表示 や 配置位置 はサイトごとにさまざま。

例えばサイドバーが左側に設置されていたり、サイドバー自体なかったりするサイトもあります。

Taka
基本的にサイドバーはあったほうが無難ではありますが、お好みのデザインでサイトを構成していきましょう。

サイドバー自体 の 表示・非表示 や 配置位置の設定は WordPress テーマごとに異なります。

ご利用のテーマの設定方法をご参照ください。

check

Affinger で設定する場合
⇒ 参考:https://seashell-spa.com/affinger6-wordpress-scroll/

Cocoon で設定する場合
⇒ 参考:https://kenjineer0224.com/cocoon-sidebar-contents-follow/

SWELL で設定する場合
⇒ 参考:https://swell-theme.com/function/3373/

 

サイドバーがおしゃれになるウィジェット 10選

ここからはサイドバーがおしゃれになるおすすめウィジットを紹介していきます。

おすすめは10個がおすすめ。

  • プロフィール
  • 検索ボックス
  • カテゴリ
  • 広告
  • 人気記事
  • おすすめ記事
  • 新着記事
  • 関連記事
  • 目次
  • Twitter

それぞれどんなイメージになるのか実際に見ていきましょう。

 

プロフィール

画像:プロフィールをサイドバーに設定した場合のイメージ

\プロフィールの設定方法はこちら/

プロフィール の設定方法を見る

 

検索ボックス

画像:検索ボックスをサイドバーに設定した場合のイメージ

\検索ボックスの設定方法はこちら/

検索ボックス の設定方法を見る

 

カテゴリ

画像:カテゴリタグをサイドバーに設定した場合のイメージ

\カテゴリの設定方法はこちら/

カテゴリ の設定方法を見る

 

広告

画像:広告をサイドバーに設定した場合のイメージ

\広告の設定方法はこちら/

広告の設定方法を見る

 

人気記事

画像:人気記事をサイドバーに設定した場合のイメージ

\人気記事の設定方法はこちら/

人気記事の設定方法を見る

 

おすすめ記事

画像:おすすめ記事をサイドバーに設定した場合のイメージ

\おすすめ記事の設定方法はこちら/

おすすめ記事 の設定方法を見る

 

新着記事

画像:新着記事をサイドバーに設定した場合のイメージ

\新着記事の設定方法はこちら/

新着記事 の設定方法を見る

 

関連記事

画像:関連記事をサイドバーに設定した場合のイメージ

\関連記事の設定方法はこちら/

関連記事 の設定方法を見る

 

目次

画像:目次をサイドバーに設定した場合のイメージ

\目次の設定方法はこちら/

目次 の設定方法を見る

 

Twitterの投稿

画像:Twitterの投稿をサイドバーに設定した場合のイメージ

\Twitter投稿の設定方法はこちら/

Twitter投稿の設定方法を見る

 

「サイドバーには何を表示しようか」「どんな構成にしようか」と悩んだら、あなたがサイドバーから得たい効果を重視すると良いでしょう。

サイドバーコンテンツの選択基準
  • 実績をアピールしたい・権威性を出したい場合
    ⇒ サイドバーに プロフィール を設置する
  • 収益を得たい
    ⇒ サイドバーに 広告 を設置する
  • ユーザを特定のページに流したい
    ⇒ サイドバーに おすすめ記事 を設置する
  • ほかの関連記事も回遊してほしい
    ⇒ サイドバーに 関連記事 を設置する

こんな感じ。

まあ、サイドバーのウィジット構成はいつでも変更できるので、とりあえずで作ってみるのが良いかと思います。

 

無料プラグインを使ってもっとおしゃれに

WordPress にはデフォルトでさまざまなウィジットコンテンツが搭載されています。

しかし、デフォルト機能だけでは

  • デザインがいまいち
  • サイドバーに表示したいコンテンツがない

といったことが多いのが現状。

また、AFFINGER や SANGO、Coccon などの WordPress テーマにもウィジットコンテンツが搭載されているものの、みんなが同じテーマを使っているわけでもないので、ウィジットコンテンツの 有無 や デザイン は利用環境によってはさまざまです。

そんな時、無料プラグインを利用すると、WordPress テーマ に囚われずに ウィジット を作成できるのでとても便利です。

つぎの章では、ウィジットを設定するうえで効果的な 8つのプラグインを紹介します。

 

ウィジェットの設定におすすめなプラグイン

ここからは 簡単にウィジェットをおしゃれできる 無料プラグイン を紹介しいていきます。

おすすめはつぎの7個。

  • Cool Tag Cloud
  • WordPress Popular Posts
  • Content Views
  • Similar Posts
  • Table of Content Plus
  • Fixed Widget and Sticky Elements
  • Content Aware Sidebars

それではひとつずつ見ていきましょう。

Cool Tag Cloud

Cool Tag Cloudのイメージ画像

Cool Tag Cloud を利用すると、ブログのカテゴリを「タグ風にデザインしたボタン」として表示できます。

タグの色やサイズ、文字フォントなども自由にカスタマイズ可能。

設定もパパっとでき、簡単にブログがおしゃれになるおすすめのプラグインです。

\設定方法はこちら/

設定方法を見る

 

WordPress Popular Posts

WordPress Popular Postsのイメージ画像

WordPress Popular Postsは、あなたのサイトで人気のある投稿をリスト形式で表示できるプラグインです。

記事ごとのアクセス数 を自動的に集計してランキング表示してくれるのでとても便利。

サイト回遊率の向上に効果的です。

設定はとても簡単なのでぜひ利用してみてください。

\設定方法はこちら/

設定方法を見る

 

Content Views

Content Viewsのイメージ画像

Content Viewsは リスト形式で記事の一覧を表示するためのプラグインです。

最大のポイントは ユーザに読んでもらいたい 特定の記事を 指定して一覧化できること。

アクセス数を高めたい記事に対して「ユーザを流動するための導線」を作れます。

\設定方法はこちら/

設定方法を見る

 

Similar Posts

Similar Postsのイメージ画像

Similar Postsは、ユーザが閲覧している投稿に対して関連記事の一覧リスト」を表示するためのプラグインです。

このプラグインを利用することで「関連記事としてこんな投稿もありますよ」と、ほかの記事を宣伝できます。

適当な記事でなく関連記事だけの一覧リストを表示するため、サイト回遊率がアップしやすいです。

\設定方法はこちら/

設定方法を見る

 

Table of Content Plus

Table of Content Plusのイメージ画像

Table of Content Plusは、目次を自動生成するプラグイン

HTML や CSS の知識がない人でも、簡単に目次を設置できます。

ポイント

サイドバーにスクロール追従する目次を表示すると、ユーザが「記事のどの部分を読んでいるのか」ひと目で判断できるようになるので、利便性がぐっと向上します。

※スクロール追従させるためには、プラグイン「Fixed Widget and Sticky Elements」も併用する必要があります。

\設定方法はこちら/

設定方法を見る

 

Fixed Widget and Sticky Elements

Fixed Widget and Sticky Elementsのイメージ画像

Fixed Widget and Sticky Elements を取り入れるとスクロールに追従するウィジットを設定できます

広告 や 目次など、ユーザーに注目してほしい要素におすすめ。

めちゃ簡単に設定できるのでぜひ実践してみてください。

\設定方法はこちら/

設定方法を見る

 

Content Aware Sidebars

Content Aware Sidebarsのイメージ画像

Fixed Widget and Sticky Elements を用いると、ウィジットコンテンツの表示条件を細かく指定できます。

たとえば

「固定記事にはサイドバーを表示しない」

「特定の記事だけウィジットコンテンツを表示する」

など、ウィジットコンテンツの表示・非表示を自由に設定できます

\設定方法はこちら/

設定方法を見る

 

まとめ

ウィジットには サイトの利便性を高める役割だけでなく、サイト全体をおしゃれにする効果があります。

WordPress テーマ や プラグインを活用すると、簡単かつプロ並みの高クウォリティーのサイトを実現できるので、ちょっと気合を入れて設定してはいかがでしょうか。

Taka
手順はすべてこの記事にまとめていますので、ぜひぜひ参考にしてもらえると嬉しいです。

それでは、この記事は以上になります。

最後まで読んでいただきありがとうございました。(≧▽≦)

\この記事を読んだ人に人気/

おしゃれなブログの作り方|参考例をテーマごとに42コ厳選【webデザイン】

-デザイン

Copyright© タカログ , 2024 All Rights Reserved Powered by AFFINGER5.