WordPress個別サポート

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

スポンサーリンク

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

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でお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • サイトのデザインをカスタマイズしたい
  • CSS・PHPのカスタマイズがうまくいかない
  • 引っ越し(サーバー移転)したい
  • サイトをSSL対応(https://)したい
WordPress個別サポートの連絡先

WordPress個別サポートへの問い合わせWordPress個別サポートの申し込み

関連記事

スポンサーリンク