【2023年最新版】Custom Post Type Widgetsの基本的な使い方
![Custom Post Type Widgetsの基本的な使い方](https://usagicode.com/wp-content/uploads/2023/07/post50.jpg)
WordPress(ワードプレス)のウィジェットにカスタム投稿を追加できるようになるプラグイン、Custom Post Type Widgetsについて紹介します。
本記事を読むことで、カスタム投稿の「アーカイブ」や「カテゴリー」、「検索」「最近の投稿」などをサイドバーに表示させることができるようになります。
Custom Post Type Widgetsとは
![Custom Post Type Widgets](https://usagicode.com/wp-content/uploads/2023/08/post50-image03-1024x296.jpg)
デフォルトでは、WordPressのウィジェットに含まれているのは投稿だけで、カスタム投稿は含まれていません。テーマファイルを編集するか、プラグインを追加することでカスタム投稿を含めることができるようになります。
専門的な知識がなくても、Custom Post Type Widgetsを利用することで、誰でも手軽にウィジェットにカスタム投稿を追加することができるようになります。
また、Custom Post Type Widgetsは、Things(シングス)という中小企業のマーケティングやブランディングのコンサルティングを行っている日本人エンジニアによって開発されたプラグインです。
WordPressのバージョン6.2.0以上に対応し、更新も定期的に行われているため、安心して利用することができます。※2023年7月31日時点
本記事では、カスタム投稿が設定されている前提で進めていきます。WordPress上でカスタム投稿を作成していない場合は、こちらの記事で作成方法を紹介しているので、ぜひご覧ください。
Custom Post Type Widgetsのインストール方法
それでは、WordPressにCustom Post Type Widgetsをインストールする方法を紹介します。インストールの手順として下記になります。
- WordPressにログイン
- プラグインのメニューへ移動
- 新規追加ボタンをクリック
- プラグインの検索
- Custom Post Type Widgetsをインストール
- Custom Post Type Widgetsを有効化
WordPressにログイン
まずはWordPressにログインし、ダッシュボード(管理画面)へ移動します。
プラグインのメニューへ移動
ダッシュボードの左サイドメニューから「プラグイン」をクリックし、プラグインページへ移動します。
新規追加ボタンをクリック
プラグインページで、「新規追加」をクリックし、Custom Post Type Widgetsをインストールする作業を行います。
※プラグインのアップロードを行う場合
プラグインを追加の横に表示されている「プラグインのアップロード」をクリックします。ファイルを選択するボタンが表示されるので、所有しているCustom Post Type Widgetsの構成ファイル(zipファイル)をアップロードします。
その後は「Custom Post Type Widgetsをインストール」の手順になります。Custom Post Type Widgetsの構成ファイルを持っていない場合は、WordPressの公式プラグインページからダウンロードします。
プラグインの検索
![プラグインの検索](https://usagicode.com/wp-content/uploads/2023/08/post50-image01-1024x427.jpg)
プラグインを追加ページの画面左側の検索窓に、「Custom Post Type Widgets」を入力します。画面がローディングされ、検索が開始され、Custom Post Type Widgetsが表示されます。※上部に表示されない場合、少しスクロールすると出てくるかと思います。
Custom Post Type Widgetsをインストール
![Custom Post Type Widgetsをインストール](https://usagicode.com/wp-content/uploads/2023/08/post50-image02-1024x230.jpg)
Custom Post Type Widgetsが表示されたら、「インストール」をクリックします。インストールが開始されるので、完了まで待ちましょう。
Custom Post Type Widgetsを有効化
インストールが完了したら、「有効化」をクリックします。Custom Post Type Widgetsが使用できるようになります。
Custom Post Type Widgetsの使い方
プラグインのインストールが完了したら、使い方を見ていきましょう。
![「ウィジェット」ページ](https://usagicode.com/wp-content/uploads/2023/08/post50-image04-1024x278.jpg)
Custom Post Type Widgets専用のページはなく、WordPressのダッシュボード内、サイドメニューの「外観」から、「ウィジェット」ページへ移動します。
※本記事では、カスタム投稿「制作事例」、カスタムタクソノミー「制作事例のカテゴリー」を例にしています。
アーカイブの追加
カスタム投稿の日付別アーカイブ一覧をウィジェットに追加する方法を紹介します。
![ブロック追加](https://usagicode.com/wp-content/uploads/2023/08/post50-image05-1024x612.jpg)
追加するウィジェットの「ブロック追加ボタン」をクリックします。ブロック選択のポップアップが立ち上がりますが、Custom Post Type Widgetsの項目は表示されていないので、「すべて表示」をクリックします。
![ウィジェットグループ](https://usagicode.com/wp-content/uploads/2023/08/post50-image06-1024x529.jpg)
左側に表示されるブロック一覧の「ウィジェット」グループから「Archives (Custom Post Type)」をクリックします。
![Archives (Custom Post Type)](https://usagicode.com/wp-content/uploads/2023/08/post50-image07-1024x704.jpg)
ウィジェットにアーカイブが追加されたら、必要事項を入力して、「更新」ボタンをクリックします。
Title | 任意 |
Post Type | 制作事例※表示したいカスタム投稿 |
Archive Type | Monthly※任意 |
Display as dropdown | 任意 |
Show post counts | 任意 |
Order | DESC※デフォルト |
実際には下記のようにサイドバーにアーカイブが表示されます。
![Archives (Custom Post Type)の表示](https://usagicode.com/wp-content/uploads/2023/08/post50-image08-1024x381.jpg)
Archive Type
Yearly(年別)、Monthly(月別)、Weekly(週別)、Daily(日別)を任意で選択します。
Display as dropdownをチェックした場合
![Display as dropdownをチェックした場合](https://usagicode.com/wp-content/uploads/2023/08/post50-image09-1024x381.jpg)
ドロップダウン形式でアーカイブが表示されます。選択肢に含まれた日付を選択すると、ページがリロードされ、選択した日付別のアーカイブ一覧が表示されます。
Show post countsをチェックした場合
![Show post countsをチェックした場合](https://usagicode.com/wp-content/uploads/2023/08/post50-image10-1024x381.jpg)
日付別アーカイブの項目に、投稿件数が表示されます。
Order
デフォルトでは「DESC(降順)」が選択されているので新しい順に表示されています。投稿を古い順に表示させたい場合は「ASC(昇順)」を選択します。
カレンダーの追加
![Calendar (Custom Post Type)](https://usagicode.com/wp-content/uploads/2023/08/post50-image11-1024x515.jpg)
カスタム投稿が投稿された日付が反映されたカレンダーをウィジェットに追加する方法を紹介します。アーカイブと同様に、ブロック選択から「Calendar (Custom Post Type)」を選択します。
Title | 任意 |
Post Type | 制作事例※表示したいカスタム投稿 |
必要事項を入力して「更新」をクリックすると、下記のようにカレンダーが表示されます。
![Calendar (Custom Post Type)の表示](https://usagicode.com/wp-content/uploads/2023/08/post50-image12-1024x381.jpg)
表示されるカレンダーにはスタイルが適用されていないので、CSSを編集してスタイルを適用させましょう。
カテゴリーの追加
![Categories (Custom Post Type)](https://usagicode.com/wp-content/uploads/2023/08/post50-image13-1024x675.jpg)
カスタム投稿に設定されているカテゴリー(カスタムタクソノミー)をウィジェットに追加する方法を紹介します。アーカイブと同様に、ブロック選択から「Categories (Custom Post Type)」を選択します。
Title | 任意 |
Taxonomy (slug) | カスタム投稿に設定されているカスタムタクソノミーを選択 |
Dropdown label | 任意 |
Select Category | 任意 |
Display as dropdown | 任意 |
Show post counts | 任意 |
Show hierarchy | 任意 |
実際のページでは下記のようにサイドバーにカテゴリーが表示されます。
![Categories (Custom Post Type)](https://usagicode.com/wp-content/uploads/2023/08/post50-image14-1024x381.jpg)
Dropdown label
Display as dropdownにチェックを入れ、ドロップダウン形式にした場合に表示するラベル名を入力します。デフォルトでは「Select Category」になっているので、「カテゴリーを選択」といったテキストに変更することはできます。
Show hierarchyをチェックした場合
![Show hierarchyをチェックした場合](https://usagicode.com/wp-content/uploads/2023/08/post50-image15-1024x381.jpg)
カテゴリー表示する際に、親子関係を持つカテゴリーを階層表示させることができます。カスタムタクソノミーの設定で「hierarchy(階層)」を有効化し、タームを登録している必要があります。
最近のコメントの追加
![Recent Comments (Custom Post Type)](https://usagicode.com/wp-content/uploads/2023/08/post50-image16-1024x580.jpg)
カスタム投稿にユーザーから追加されたコメントの一覧をウィジェットに追加する方法を紹介します。アーカイブと同様に、ブロック選択から「Recent Comments (Custom Post Type)」を選択します。
Title | 任意 |
Post Type | 制作事例※表示したいカスタム投稿 |
Number of comments to show | 5※デフォルト |
カスタム投稿の各投稿にコメントが追加されている場合、下記のように表示されます。
![Recent Comments (Custom Post Type)の表示](https://usagicode.com/wp-content/uploads/2023/08/post50-image17-1024x381.jpg)
Number of comments to show
コメントを表示させる件数を入力します。デフォルトでは5件になっています。
最近の投稿の追加
![Recent Posts (Custom Post Type)](https://usagicode.com/wp-content/uploads/2023/08/post50-image18-1024x619.jpg)
最近投稿されたカスタム投稿の一覧をウィジェットに追加する方法を紹介します。アーカイブと同様に、ブロック選択から「Recent Posts (Custom Post Type)」を選択します。
Title | 任意 |
Post Type | 制作事例※表示したいカスタム投稿 |
Number of comments to show | 5※デフォルト |
最近投稿したカスタム投稿が下記のようにサイドバーに一覧で表示されます。
![Recent Posts (Custom Post Type)の表示](https://usagicode.com/wp-content/uploads/2023/08/post50-image19-1024x381.jpg)
検索の追加
![Search (Custom Post Type)](https://usagicode.com/wp-content/uploads/2023/08/post50-image20-1024x514.jpg)
カスタム投稿で絞り込み検索をすることができる検索窓をウィジェットに追加する方法を紹介します。アーカイブと同様に、ブロック選択から「Search (Custom Post Type)」を選択します。
![Search (Custom Post Type)の表示](https://usagicode.com/wp-content/uploads/2023/08/post50-image21-1024x381.jpg)
サイドバーに検索窓が表示されました。
タグクラウド(タグ一覧)の追加
![Tag Cloud (Custom Post Type)](https://usagicode.com/wp-content/uploads/2023/08/post50-image22-1024x550.jpg)
カスタム投稿に設定されているタグ(階層設定のないカスタムタクソノミー)をウィジェットに追加する方法を紹介します。アーカイブと同様に、ブロック選択から「Tag Cloud (Custom Post Type)」を選択します。
Title | 任意 |
Taxonomy (slug) | タグ works_tag※表示させたいカスタムタクソノミー |
Show tag counts | 任意 |
下記のようにタグの一覧がサイドバーに表示されます。タグクラウドの仕様で、重要度に合わせてフォントサイズが大きくなっています。
![Tag Cloud (Custom Post Type)の表示](https://usagicode.com/wp-content/uploads/2023/08/post50-image23-1024x381.jpg)
Show tag counts
投稿に紐づいているタグの件数を表示させることができます。
まとめ
本記事では、WordPressのウィジェットにカスタム投稿を追加できるプラグイン、Custom Post Type Widgetsの使い方について紹介しました。Custom Post Type Widgetsを利用することで、カスタム投稿を利用したサイト運営に役立つでしょう。
本サイトでは、Custom Post Type Widgetsだけではなく、他のWordPressプラグインに関する情報も発信しているので、ぜひご覧ください。少しでもお役に立てれば幸いです。