WordPressのウィジェットは訪問者がサイトを閲覧しやすくするパーツ
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-02.png)
他の人のサイトを見ると全然違って見やすく感じるねぇ
![](https://kumaklasse.com/wp-content/uploads/2021/01/dchichi-1.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/dchichi-1.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/dchichi-1.png)
具体的にどんなところが気になるんだい
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-02.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-02.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-02.png)
人気の記事はついつい見ちゃうし、サムネイル画像が表示されていて気になってしまうよ
![](https://kumaklasse.com/wp-content/uploads/2021/01/dchichi-1.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/dchichi-1.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/dchichi-1.png)
ウィジェットを配置すれば、おむたんもすぐに表示できるよ
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-02.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-02.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-02.png)
ウィジェット??気になるねぇ
ウィジェットとは
WordPressやITの中でウィジェットは、画面に表示される一つの機能を持ったアプリケーションのことを指します。
単語自体の意味
一つの機能を持ったアプリケーション?となるかもしれません。
ですが、皆さんが普段から使用しているスマホにもウィジェットは設置されています。
例えば、カレンダーや時計、検索バーなどが当てはまります。
意識していなくてもウィジェットを配置して、使っています。
WordPressのウィジェットは導線作りに役立つ
画像の赤枠にある一つ一つがウィジェットにあたります
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2620.51.45.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2620.51.45.png)
それぞれが一つの機能を持ったウィジェット
- 「検索」
- 「最近の投稿」
- 「最近のコメント」
- 「アーカイブ」
- 「カテゴリー」
サイドメニューにあるウィジェットを主に紹介しました。
設置できるのは他にもヘッダーやフッター、投稿した記事の中などに設置できます。
閲覧しやすく、サイト内に導線を作ることがウィジェットの大きな役割の一つと言えます。
Cocoonテーマのウィジェット設定方法
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-01.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-01.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-01.png)
おむたんがお買い物に行く時のチラシみたいなものだね
![](https://kumaklasse.com/wp-content/uploads/2021/02/gomifukurotaro-01.png)
![](https://kumaklasse.com/wp-content/uploads/2021/02/gomifukurotaro-01.png)
![](https://kumaklasse.com/wp-content/uploads/2021/02/gomifukurotaro-01.png)
日付ごとに分かれてるからお出かけする日も決めやすい
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-02.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-02.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-02.png)
そうなんだよねぇ〜
なんとなくわかったから設定方法が知りたいな
![](https://kumaklasse.com/wp-content/uploads/2021/02/gomifukurotaro-01.png)
![](https://kumaklasse.com/wp-content/uploads/2021/02/gomifukurotaro-01.png)
![](https://kumaklasse.com/wp-content/uploads/2021/02/gomifukurotaro-01.png)
得意だから教えてあげる
Cocoonで使えるウィジェット一覧
無料テーマの代表「Cocoon」
無料とは思えないほど、ウィジェットも豊富です。
一覧から確認してみましょう。
「WordPress管理画面」→「Cocoon設定」→「ウィジェット」をクリック
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2621.01.20.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2621.01.20.png)
「ウィジェット表示」画面でウィジェット名と用途が確認可能
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2621.05.55.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2621.05.55.png)
多すぎてわからない!となるかもしれません。
上のウィジェット表示画面では、ウィジェットの除外が可能です。
使用することがないウィジェットを予め除外できます。
使うことがないウィジェットは「チェック」して「変更をまとめて保存」をクリック
ウィジェットのプレビュー設定画面
ウィジェットを設定していきます。
「WordPress管理画面」→「外観」→「カスタマイズ」をクリック
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2621.16.17.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2621.16.17.png)
良く見ると下に「ウィジェット」の設定項目があります。
「ウィジェット」からでも設定できますが、今回はプレビュー画面を見ながらやりたいのでカスタマイズから実施します。
「カスタマイズ」→「ウィジェット」をクリック
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2621.22.32.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2621.22.32.png)
「サイドバー」-「フッター(モバイル用)」とずらっとタブが並んでおり、ここでサイト上のどこにウィジェットを表示するか選択します
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2621.23.34-1.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2621.23.34-1.png)
最初から表示されていたウィジェットは右側の「サイドバー」と呼ばれる場所のウィジェットです。
「サイドバー」にウィジェットを追加、削除していきます。
ウィジェットの詳細変更
「サイドバー」をクリックすると、サイドバーのウィジェットエリアに表示しているウィジェット一覧が出てきます。
「検索」「最近の投稿」と上から順番にサイドバーとリンクしています
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2621.35.09.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2621.35.09.png)
各ウィジェットを開くと変更が可能です。
「検索」をクリックします。
「タイトル」欄に「サイト内検索」と入力してみます。
サイドバーの検索ウィジェットの上にタイトルが表示されました
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2621.43.45.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2621.43.45.png)
「公開」をクリックして設定を保存できます。
ウィジェットの追加
新しいウィジェットを追加します。
一つ前、サイドバーのウィジェットエリアに戻ります。
「+ウィジェットを追加」をクリック
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2622.47.43.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2622.47.43.png)
新着記事ウィジェットを追加してみます。
「新着記事」ウィジェットをクリック
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2622.52.57-300x569.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2622.52.57-300x569.png)
サイドバーに「新着記事」のリストが表示されました。アイキャッチに設定したサムネイル付きです。
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2622.57.08.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2622.57.08.png)
詳細設定
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2623.02.56.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2623.02.56.png)
- 表示モード
- 全ての新着記事を表示するかorカテゴリ別に表示するかを選択
- 新着記事のタイトル
- 新着記事以外のタイトルを付けたい場合、入力します。空欄で問題ありません。
- 表示数
- 記事の最大表示数です。
- 表示タイプ
- 記事リストの区切り方、サムネイルの大きさを選べます。
- チェックボックス
- タイトル文字の太さ
- 表示方法
- 固定表示の記事を表示するか
- 入力後、「完了」で追加できます。
同様に他のウィジェットもプレビューで確認しながら追加できます。
ウィジェットの削除
新着記事を追加しましたので役割が類似している「最近の投稿」ウィジェットを削除します。
やり方は削除したいウィジェットを開いて、「削除」をクリックするだけです
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2623.13.01.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2623.13.01.png)
サイドバーから「サイト内検索」の下にあった「最近の投稿」が削除されました
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2623.16.23.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2623.16.23.png)
ウィジェットの並べ替え
「新着記事」を「サイト内検索」の真下に持ってきたいので並べ替えを行います。
サイドバーのメニューから「並べ替え」をクリック
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2623.18.19.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2623.18.19.png)
上下矢印マークが表示されます。移動したい方向の矢印をクリックして、移動
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2623.22.35.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/2021-01-2623.22.35.png)
「完了」をクリックでウィジェットの並べ替えが完了です。
まとめ:ウィジェットでサイトの導線を作れる!設定方法は簡単!
![](https://kumaklasse.com/wp-content/uploads/2021/01/dchichi-1.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/dchichi-1.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/dchichi-1.png)
ウィジェットを使いこなせば、サイトの導線も思うがまま
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-01.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-01.png)
![](https://kumaklasse.com/wp-content/uploads/2021/01/omutan-01.png)
使い方を覚えたよー次は人気の記事コーナー作っちゃうね
![](https://kumaklasse.com/wp-content/uploads/2021/02/gomifukurotaro-01.png)
![](https://kumaklasse.com/wp-content/uploads/2021/02/gomifukurotaro-01.png)
![](https://kumaklasse.com/wp-content/uploads/2021/02/gomifukurotaro-01.png)
ウィジェットの設定は誰でも簡単です!プレビューで試しながら使いたいウィジェットを見つけていってください!
コメント