WordPress個別サポート

特定のカスタム投稿タイプの記事をサイドバーに一覧表示するには、通常の投稿と同じようにquery_posts関数を使ってデータを取得して表示することもできますが、プラグインを使って簡単に表示することもできます。プラグインを使う方法と、テンプレートをカスタマイズするコードの両方を紹介します。

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

プラグインを使ってカスタム投稿タイプの投稿を一覧表示する

Custom Post Type List Widgetプラグインが役立ちます。ウィジェットメニューから、サイドバーに一覧表示するカスタム投稿タイプを設定することができます。

まず、「プラグイン」‐「新規追加」メニューからCustom Post Type List Widgetプラグインをインストール、有効化して、「外観」‐「ウィジェット」メニューでパーツをサイドバーウィジェットにドラッグアンドドロップします。

サイドバーに表示するカスタム投稿タイプ

サイドバーに表示するカスタム投稿タイプ

これにより、サイドバーにカスタム投稿タイプの投稿が一覧表示されます。

カスタム投稿タイプの記事をサイドバーに表示

カスタム投稿タイプの記事をサイドバーに表示

ポイントはPost Typeでカスタム投稿タイプを選ぶことですが、これを含めて次のような表示オプションを使用可能です。

  • Include Post-Type description --- カスタム投稿タイプの説明文を表示
  • Shorten Long Titles --- 10文字を超えるタイトルは省略(文字化けします)
  • Title --- 一覧のタイトルを入力
  • Post Type --- カスタム投稿タイプを選択(投稿「post」や固定ページ「page」も選択可)
  • Count --- 件数、日付などで絞り込む
  • Sort Order --- 並び順を選択(日付、タイトル、ランダム、著者など)
  • Format --- フォーマット(箇条書き、ドロップダウンリスト、改行)

テンプレートを編集してサイドバーにカスタム投稿タイプの投稿を一覧表示する

通常の投稿をサイドバーに一覧表示するコードは、次のようになります。サイドバーテンプレート(sidebar.php)に記述します。

※通常の最新投稿をサイドバーに一覧表示したいだけなら、ウィジェットメニューを使えば良いのでコードを書く必要はありません。

<ul>
<?php
query_posts('showposts=10');
if (have_posts()) : while (have_posts()) : the_post();
?>
<li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</ul>

実行結果は次のようになります。

サイドバーに投稿を一覧表示する

サイドバーに投稿を一覧表示する

カスタム投稿タイプの投稿を一覧表示する場合は、投稿を取得するquery_postsにカスタム投稿タイプのデータを取得するように条件「post_type=shops」を追加します。

<ul>
<?php
query_posts('showposts=10&post_type=shops');
if (have_posts()) : while (have_posts()) : the_post();
?>
<li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</ul>

実行結果は次のようになります。

カスタム投稿タイプの投稿を一覧表示する

カスタム投稿タイプの投稿を一覧表示する

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート