WordPress × Cocoon × Gutenberg｜4. ウィジェットブロック編

2022年4月10日2023年9月30日

【PR】本ページはプロモーションが含まれます

ウィジェットとか、難しい言葉使わないで

ウィジェットってなんだろう？最近iPhoneの画面に追加されて話題になりましたね

ウィジェットとは、システム画面などに小さく表示される単機能のアプリケーションソフト。
IT用語辞典

ウィジェットブロックの多くは、ショートカットのようなイメージでいいかと思います
使いこなせればとっても助けになります

簡単に埋め込める
簡単に呼び出せる
勝手に更新してくれる

また、ブログ本文というよりは、ここで覚えたことをWordPressサイトの外観（メニューやサイドバー）をいじるときに使うといいかもしれません
また、カテゴリなどWordPressのダッシュボードで設定している部分とも影響し合います

ダッシュボード＞外観＞ウィジェット＞サイドバーで表示させるウィジェットを調整できる

ブログ初心者に必須な項目を見出しに★★★ で表現しました

目指せWordpressマスター！

私の環境

WordPress 5.9.3, Cocoon Child バージョン: 1.1.3, スキンなし,
Gutenberg 12.9.0
（2022.04.10時点での最新バージョン）
M1 macOS Monterey 12.2.1
ブラウザはBrave バージョン: 1.36.117

ウィジェットブロックの種類は全部で 12個

まずは、トップメニュー、もしくはコンテンツエリアの「+」マークを押して、
ウィジェットブロックを開いてみましょう、全部で 12種類あります

全 12 種類を上から順に紹介していきます

アーカイブ ★☆☆

ブログ記事を書いた月ごとのアーカイブ（月ごとの記事へのリンク付一覧表）が表示されます

月ごとの表示はこんな感じです
埋め込んだ後も、自動で更新してくれます

作成後自動でリンクが作られていて、例えば2022年3月の箇所をクリックすると、3月に書いた記事一覧に飛べます

投稿数を表示をオン
サイドバーで、投稿数を表示をオンにすると、月ごとの投稿数を表示することもできますが、
私の場合一番後ろに（）なしでついてしまうので調整が必要なようです

↓例えば、2022年03月は 9記事投稿しました

ドロップダウンで表示をオン
サイドバーで、ドロップダウンで表示をオンにするとこんな感じです、右側のサイドバーから変更できます

おまけ：背景色をつけたいときは、一旦グループ化させましょう

ツールバーからは配置の変更が行えます

シンプルでいいですね！

カレンダー ☆☆☆

記事投稿のあった日にリンクがあるカレンダーを設置できます
現在の月のカレンダーが表示され、下記にように反映されます
薄い色：記事をアップした日
濃い色：本日

青色下線付きのリンク付の日付をクリックすると、その日にアップした記事が読めます
前の月（<<Jan）をクリックすると、その月に書いた記事の一覧に飛びます
（それより前の月も同じようにカレンダーに出してくれるわけではないのですね‥）

2025年4月
月	火	水	木	金	土	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

自分のサボった日が一気にわかってしまいそうです笑

カテゴリー ☆☆☆

WordPress内で設定しているカテゴリを貼り付けられます

↓こちらが一番シンプルな状態

この順番が何に基づいているのかちょっとわからず…
最近追加した「Gutenbergまとめ記事」が一番上に来ているので、新規追加が上に来るのか？ちょっと不明です

サイドバーで細かな設定が行なえます

ドロップダウンで表示をオンにするとこのようになります

投稿数を表示をオンにすると（ドロップダウンでも投稿数表示オンオフできます）

カテゴリで親子を作ることができます

ダッシュボード＞カテゴリー＞新規カテゴリを追加
新規追加する際に親カテゴリを設定すると、新規追加したカテゴリが子になります

サイドバー＞階層を表示をオンにすると、親子のカテゴリを表示させられます

そもそもどうやってカテゴリ分けするかが、難しいですよね汗
こちらも、カテゴリが変更されれば自動で更新されていきます
記事が非公開状態や下書きだと、上のカテゴリ一覧に表示されません

カスタムHTML ☆☆☆

HTMLを直に入力できます、ツールバーでHTMLとプレビューを切り替えられます

しばらく私は使うことがなさそうですが…
コードをバチバチ打ち込めるようになりたいものです

Let'sプログラミング

カスタムHTMLブロック WordPress のブロックエディタで利用可能な「カスタムHTML」ブロックの使い方について解説します。「カスタムHTML」ブロックはフォーマットブロックの中に含まれており、任...

ページリスト ☆☆☆

投稿した記事ではなく固定ページを挿入します

こちらも自動更新です
シンプル！

最初はこの固定ページと投稿記事の違いがわからなかったんですよね‥

ものすごく簡単な理解でいうと、こんな感じです

投稿記事は通常のブログ記事
固定ページはプロフィールやプライバシーポリシーなど、
一旦作成した後にサイトのどこかに常時表示させておきたいページ
注：サイトのどこに表示させるかは自分で設定しないといけない

他にも色々違いはありますが、最低限ここを押さえておくと、
投稿と固定ページで迷うこともなくなりますね

RSS ★☆☆

RSSは好きなサイトの最新情報をゲットすることができる仕組みです

RSSブロックを開き「URLをここに入力…」に、
「最新記事を乗せたいURL」を入力し、「URLを使用」を押すと
そのサイトの最新記事を掲載することができます

「最新記事ブロック」や「アーカイブブロック」は自分のサイトのものしか選べませんが、他のサイトの最新記事を載せたい場合はこちらを使います

ツールバーからリスト表示・グリッド表示を選べます

サイドバーからは

表示する記事数
投稿者を表示オンオフ
日付を表示オンオフ
抜粋文章を表示オンオフ
抜粋内の最大単語数をいくつにするかなどの設定が可能です

GIZMODOのRSS を取得してみました

Metaの新スマートグラスは「小型ディスプレイ」が搭載？価格はかなりお高め
2025年4月2日投稿者: そうこ
Image:TadaImages/Shutterstock.comMetaが現在開発中と言われるスマートグラス、コードネーム「Hypernova」について新しい噂が聞こえ […]
迫力すご！太陽観測衛星が撮影した「太陽風」の動画
2025年4月2日投稿者: そうこ
Image:ESA&NASA/SolarOrbiter/Metis&EUITeams,V.AndrettaandP.Romano/INAF欧州宇宙機関（ESA）の太陽観測 […]
【Nintendo Switch 2 まとめ】これ見とけばOK。特徴・価格・予約方法・新機能など
2025年4月2日投稿者: ヤマダユウス型
Image:Nintendo公式チャンネル/YouTube予約、どうするかなコレ…。2025年4月2日のNintendoDirectにて詳細が発表された、任天堂の新しい家 […]

関連したサイトなどうまく活用していきたいですね

検索 ★★☆

検索窓を設置できます

ツールバーではボタンの位置や文字 or マークなどカスタマイズできます

また、「検索」部分の文字色や背景色は変えられますがなぜか縦方向に検索という字が並んでいます

「任意のプレースホルダー…」の部分にテキストを入力すると、検索窓に好きな文字を表示してくれます
（何も入力しなければ空白の状態です）
が、このまま検索マークを押しても検索はされず、
ユーザーが自分で文字を打たないと検索できないようになっているようです

↑なぜか入力部分に文字を入れたら、「検索」の文字が縦になりました…

ボタンが外側の状態で検索部分に文字入力をすると、「検索」の文字が縦になるみたいです‥

この検索も、実はCOCOONブロックに「検索案内」というブロックがあります
そちらだと事前に「検索文字が入力された状態の検索窓」が作れます！

COCOONブロックの記事の公開までお待ち下さい

ショートコード ★★☆

ショートコードを入力することができます

ショートコードとは‥簡単に言うとショートカット！
テキストブロック＞段落＞ツールバーでも出てきていましたね

ソーシャルアイコン ★☆☆

各種SNSのアイコンを設置できます
ソーシャルアイコンブロックを配置して「＋マーク」を押し、「全て表示」を押すと大量のアイコンが選べます
それぞれのブランドカラーで色がついています

ソーシャルアイコンブロックを選択

コンテンツエリア右あたりの「＋マーク」をクリック

「全て表示」をクリック

大量のアイコンが！

「WordPress」を選び、URLを入れてみました

出来上がったアイコン↓
サイズは上から「小」「普通」「大」「特大」

カーソルを合わせると少し大きくなります

URLを入力もしくは追加したい場合は「アイコン自体」をクリックすると変更できます

サイドバーでは、下記の項目が選べます

ロゴの形状
レイアウト位置
複数の場合の横方向に配置 or 縦方向に配置
新しいタブでリンクを開くのオンオフ
ラベルを表示のオンオフ

色々アイコンを作ってみました

デフォルト

ロゴのみ

カプセル型

デフォルト＋ラベルを表示

ただアイコンを「＋マーク」から選択しただけではリンクはついていません
また、リンクURLがない状態ではエディタ上でアイコンが薄く表示されており、プレビューでも表示されません

アカウントないものは公式HPを貼ってみました
ただ、これもプロフィールにはSNSアイコン置くとは思うんですが、本文中で要るかな‥？どうだろう
たとえばインタビューした相手のSNSアイコンを、記事内で紹介したい時にはいいかもしれませんね！

タグクラウド ★★☆

これまでブログで使ったタグを表示できます
表示するタグの数を増減させたり、それぞれのタグの投稿数を後ろに表示することもできます

サイドバーから下記の項目を変更できます

表示形式デフォルトもしくは輪郭
タグもしくはカテゴリ
投稿数の表示のオンオフ
表示させる数
最小サイズ最大サイズ

「カテゴリ」「輪郭」「投稿数表示オン」はこんな感じです

最小サイズと最大サイズがどう変わるかは検証できませんでした‥！

タグがいい感じに配置してあると、読んでいてどんどん次のページに進んでいって楽しいですよね
私は闇雲にタグを増やしてしまい、カテゴリもどうしたものか‥と言った感じだったので、
今後調整していきたいと思います笑

ウィジェット編はこれで終了です！お疲れさまでした☆

プラグインを入れている方はこの「ウィジェットブロック」に他のブロックが追加されているかもしれません
（私の環境だと Contact Form7とRinkerがあります）

次は、テーマブロック
（テーマって何‥ですよね、Cocoonなどの「テーマ」とはまた違うので別、と考えてください）
それでは次のブロックでお会いしましょう！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

WordPress × Cocoon × Gutenberg｜4. ウィジェットブロック編

ウィジェットとか、難しい言葉使わないで

私の環境

ウィジェットブロックの種類は全部で 12個

アーカイブ ★☆☆

カレンダー ☆☆☆

カテゴリー ☆☆☆

カスタムHTML ☆☆☆

最新のコメント ★☆☆

最新記事 ★☆☆

ページリスト ☆☆☆

RSS ★☆☆

検索 ★★☆

ショートコード ★★☆

ソーシャルアイコン ★☆☆

タグクラウド ★★☆

コメント

コメントする

WordPress × Cocoon × Gutenberg｜4. ウィジェットブロック編

ウィジェットとか、難しい言葉 使わないで

私の環境

ウィジェットブロックの種類は全部で 12個

アーカイブ ★☆☆

カレンダー ☆☆☆

カテゴリー ☆☆☆

カスタムHTML ☆☆☆

最新のコメント ★☆☆

最新記事 ★☆☆

ページリスト ☆☆☆

RSS ★☆☆

検索 ★★☆

ショートコード ★★☆

ソーシャルアイコン ★☆☆

タグクラウド ★★☆

コメント

コメントする

ウィジェットとか、難しい言葉使わないで