ブログカスタマイズ ワードプレス

ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説

ワードプレスでウィジェットを使っていると、「トップページには表示したくない」「この投稿ページにのみ表示させたい」といった要望が出てくるものです。

Widget Logic」というプラグインも便利ですが、条件分岐タグを記載する必要があり、初心者はそれを調べることから始めないといけないので、やや面倒です。

しかしながら、「Widget Options」を使えば、条件分岐タグ無しに感覚的にウィジェット表示をカスタマイズできます。

Widget Optionsには無料版と有料版の2つがあるのですが、無料版でできることだけでもかなりの条件指定ができます。
細かく設定できるので、ウィジェットのことなら「Widget Options」だけで十分です。

この記事では、便利なプラグイン「Widget Options」の無料版機能と、使い方を徹底紹介しています。

Widget Optionsのインストール

まずはWordPressにプラグインをインストールしていきましょう。
「プラグイン」→「新規追加」→「Widget Options」で検索してください。かわいい恐竜のイラストが目印です。

ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説

有効化すると、すぐにウィジェットの設定をカスタマイズできるようになります。

Widget Optionsの機能と使い方

Widget Optionsは、ウィジェットの設定画面から使うことができます。

「外観」→「ウィジェット」で設定画面を開きましょう。

ウィジェットを開くと、設定項目がタブで表示されています。

ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説

無料版で利用できるタブは、以下のような役割があります。

  • ウィジェットの表示設定
  • デバイスごとの表示設定
  • ウィジェット表示位置の設定
  • 詳細設定

無料版で使えるタグの機能と使い方を、一つずつ紹介していきます。

ウィジェットの表示設定

ウィジェットの表示設定では、どのページでウィジェットを表示するのか設定できます。

ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説

タブごとの役割は、以下のようになっています。

  • Misc ➡ ページの種類
  • Post Types ➡ 投稿(固定ページや記事)
  • Taxonomies ➡ カテゴリー

これらタブの上に「Hide/Show」とあります。意味は以下のようになります。

Hide/Show

「Hide on checked devices」➡「チェックした項目で非表示」
「Show on checked devices」➡「チェックした項目で表示」

これさえ理解できれば、あとは感覚的にウィジェット表示/非表示ができるようになります。

以下に、ウィジェットの表示設定の使い方の例を提示します。

  • トップページにのみ非表示にしたいときは「Hide on checked devices」を選択の上、「Misc 」→「 Home/Front」にチェックをいれます。
ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説
  • 投稿記事にのみ表示させていときは「Show on checked devices」を選択の上、「Post Types」→「投稿」にチェックを入れます。
  • 「Taxonomies」は、サイドバーに広告を入れたとき、カテゴリー毎に表示される広告を変えたいという使い方に便利です。
ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説

最後は「保存」クリックをお忘れなく。

※一つのタグ内で「Hide on checked devices」と「Show on checked devices」はどちらか一方のみしか設定できません。たとえば、MiscではHide on checked devices、TaxonomiesではShow on checked devicesという使い方はできません。

※Widget Optionsは一部のみ日本語対応となっていますので、英語と日本語がごっちゃで表示されています。

デバイスごとの表示設定

ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説

デバイスごとの表示設定では、デスクトップ・タブレット・モバイルの表示設定を変更できます。

こちらでも「Hide on checked devices:チェックしたデバイスに非表示」「Show on checked devices:チェックしたデバイスに表示」で設定していきます。

  • たとえば、サイドバーに追従する目次を設置した場合、モバイルでは非表示にすることで、長々とした記事になることを防ぐことができます。
ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説

WordPressのテーマであるアフィンガーにてプラグイン「Rich Table of Conten」を利用した追従する目次を設定した方法は、こちらの記事ご覧ください

ウィジェット表示位置の設定

表示位置の設定では、ウィジェット毎に表示位置(Defaurt,Center,Left,Right,Justify)を指定できます。

ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説

詳細設定

ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説

詳細設定では、より高度なウィジェットのカスタマイズができます。

タブごとの役割は、以下のようになっています。

  • Misc ➡ タイトルの表示設定
    「Check to hide widget title」にチェックを入れると、ウィジェットタイトルを非表示にできます。
ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説
  • ID・Class ➡ classとIDを振ることができます。
ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説
  • (animetionは有料)

  • Logic ➡ 条件分岐タグの入力します。
    「Logic」は、「Widget Logic」と同じ機能です。ほかの機能とあわせて使いたいときに便利です。
ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説

まとめ

ウィジェットをカスタマイズできるプラグインは複数ありますが、その中でも「Widget Options」はかなり高機能であることがわかります。

また、WordPress関数やPHPの知識がなくても、条件指定ができますので、初心者にも使いやすいやさしい設計です。

ウィジェットの表示/非表示はぜひ、Widget Optionsをご利用ください!

アフィンガー|「目次に戻る」をスマホの固定フッターメニューの中に入れる

2022/9/2

アフィンガー|「目次に戻る」をスマホの固定フッターメニューの中に入れる

今やスマホでサイトを閲覧することが多いです。 「興味あるところだけ読みたい」「さっき読んだところをもう一度確認したい」というニーズが発生することは、往々にしてあります。そのときにあると便利なのが「目次に戻るボタン」なのです。 今回は、フッターの中に「目次に戻る」項目を作っていきたいと思います。 フッターメニューに入れることで、追従してくれますのでとても便利です。 この記事を読めば、以下の動画のようなことができるようになります。 まだ、スマホに固定するフッターメニューを設置していない方は、こちらご参照くださ ...

ReadMore

UpdraftPlusで自動バックアップから復元方法を解説|保存先はGoogle ドライブ

2022/8/28

UpdraftPlusで自動バックアップから復元方法を解説|保存先はGoogleドライブ

UpdraftPlusは、WordPressのデータをバックアップ・復元できるプラグインです。 WordPressで構築したウェブサイトのデータベース、プラグイン、テーマ、アップロードファイル、wp-content ディレクトリと、WordPressを丸ごとバックアップして、復元までプラグインで行えます。 WordPressのデータをバックアップとして有名なプラグイン「BackWPup」がありますが、BackWPupの復元はFTPでファイルアップロードして、phpMyAdminでデータベースを復元する手順 ...

ReadMore

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

2022/8/23

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

AFFINGERで"ヘッダーカード"を設定する方法をご紹介します。 ヘッダーカードを入れることで、以下のようにサイトが変化します。 ヘッダーカードを設置することで、「サイトがおしゃれに華やかになる」「サイト訪問者に読んでもらいやすくなる」というメリットがあります。 作成方法【簡易版】 どのようなヘッダーカードを作るか、構想を練る ヘッダーカードの背景画像を作る(canvaなど) ヘッダーカードの挿入と設定(デザインや文字入など) ヘッダーカードの背景を変更する(必要な場合のみ) Contentsどのような ...

ReadMore

2022/8/24

ブログの作り方|当ブログのサイトマップ

ブログを始めるにあたり、おすすめのサーバーやテーマ、またブログをはじめたら押さえておくべき設定などの記事をまとめました。 Contentsおすすめサーバー「スターサーバー」スターサーバーのメリット・デメリットスターサーバーの契約方法・設定方法独自ドメインからメールアドレスを作成するブログのバックアップ問い合わせフォームを作成するスパム対策アフィンガー関連設定ヘッダーとヘッダーメニューをおしゃれにするスマホでも追従する目次を設定するスマホに固定フッターメニューを追加する記事の文字をカラフルにするアフィンガー ...

ReadMore

Contact Form 7の問い合わせフォーム作成方法と使い方を紹介

2022/8/28

Contact Form 7の問い合わせフォーム作成方法と使い方を紹介

ブログをはじめたら必ず導入するべき、問い合わせフォームのプラグイン「Contact Form 7」。作成者は日本人ですので、公式サイトは日本語で解説されています。 Contact Form 7公式サイト Contact Form 7の導入方法と、問い合わせフォームを作成する方法を紹介します。 下記のようにお問い合わせフォームを作り、サイトのフッターメニュー(ブログの最下部エリア)に設置していきます。 ContentsContact Form 7の使い方【簡易】step1.Contact Form 7をイン ...

ReadMore

このサイトはアフィンガーを使用しています

アフィンガー

WING(AFFINGER6 ver)

デザイン簡単、SEO対策と広告収入UPの機能が標準装備。さらに美しく、パワフルに。「稼ぐ」に特化したテーマ。

WING(アフィンガー6)公式サイト

2022年最新!おすすめレンタルサーバー

月額料金がライトプランで220円〜(税込)なので、コスパよく爆速なサイト運営が可能に!

管理画面は使いやすくなっているので、これからはじめてサイト運営をする方にもおすすめです!

Twitterでも口コミ良好!

スターサーバー公式サイト

-ブログカスタマイズ, ワードプレス
-, , ,