WordPressで特定のカテゴリ(タグ)記事だけを表示させる方法

WordPressで指定した特定のカテゴリ(タグ)内の記事だけ表示させたいときに使うPHPコードを覚書しておきます。

今日はアイキャッチ画像を使った表示方法と、リスト形式の表示方法をご紹介します。

スポンサードリンク

アイキャッチ画像を使って記事を表示させたい場合

2012-12-10_13h59_50
↑この様に左側にアイキャッチ画像を使って記事一覧を表示させたい場合は、まず、投稿記事にアイキャッチを指定する必要があります。

2012-12-10_14h03_31
アイキャッチ画像を指定するところは、記事を投稿する画面の右下にあります。

ただ、これだと、1投稿ずつ設定しないとダメんです。。。
過去記事もアイキャッチ画像を設定するとなるとちょっと面倒ですよね。

2012-12-10_14h12_19
そこで、便利なプラグイン!Auto Post Thumbnail を使います。

このAuto Post Thumbnailは過去の記事の一番上に挿入されている画像を自動的にアイキャッチ画像に指定してくれる!という便利なプラグインです。

2012-12-10_14h15_14
インストールして有効化にしたら、設定⇒Auto Post Thumbnailを開き
「Generate Thumbnails」をクリックするだけ!便利ですね♪
(次から新しく投稿する記事にも自動的にアイキャッチが設定されるようになります。)

2012-12-10_14h21_27
次にデフォルトでインストールされているプラグイン「WP Multibyte Patch」を有効化してください。

そしていよいよPHPコード!

<?php
$my_query = new WP_Query( array(
'cat' => 34,
'posts_per_page' => '3',
'orderby' => 'date',
'order' => 'DESC'
));
if( $my_query->have_posts() ) :
?>
<h3>サイト制作に関すること</h3>
<?php while( $my_query->have_posts() ) : $my_query->the_post(); ?>
<div class="contents">
<div class="fl-l" style="width:30%;">
<?php if(has_post_thumbnail()){
the_post_thumbnail( array(135,135) );
}else{
echo '<img src="http://exsample.com/image/no-image.gif" />';
} ?>
</div>
<div class="icach" style="width:70%;">
<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
<p>
<?php
echo mb_substr(get_the_excerpt(), 0, 110);
?>...<a href="<?php the_permalink() ?>">≫続きを読む</a>
</p>
</div>
</div>
<div class="fl-c"></div>
<?php endwhile; wp_reset_query();?>
<?php else : ?>
no posts!
<?php endif; ?>

このコードを表示させたい場所にコピー&ペーストしてみてください。

'cat' => 34,

カテゴリを指定するところ。こちらは管理画面を開いてカテゴリIDを確認してください。

'posts_per_page' => '3',

何件記事を表示させるか設定するところ。

※画像がまったくない場合は特定の画像「No Image」を表示させるようにしています。自分で用意してくださいね。

スタイルシート

.icach{	float: right;}
.fl-l{ float: left; }/*左に回り込み*/
.fl-c{ clear: both; }

特定のカテゴリ(タグ)内の記事をリスト表示にしたい場合

2012-12-10_14h27_43
特定のカテゴリ(タグ)内の記事をリスト表示にしたい場合はこちらのPHPコード


<?php
$my_query = new WP_Query( array(
'tag' => 'wordpress',
'posts_per_page' => '3',
'orderby' => 'date',
'order' => 'DESC'
));
if( $my_query->have_posts() ) :
?>
<div id="cat_kiji">
<h3>WORDPRESS</h3>
<ul>
<?php while( $my_query->have_posts() ) : $my_query->the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; wp_reset_query();?>
</ul>
</div>
<?php else : ?>
no posts!
<?php endif; ?>

リスト表示したい場所に上記のコードを貼り付けしてください。

'tag' => 'wordpress',

※タグを指定したい場合。

参考サイト:
【wordpressで特定のカテゴリーの最新記事を表示する】WP_Queryを使えば簡単ですね

関連記事リスト

WordPress関連のコンテンツ移転
WordPressのカスタマイズ関連の情報がこれから多くなりそうなので...

2012-12-10_10h50_11

あるとちょっと便利なWordPressプラグイン3個
最近はサイト作りはWordPressが基本なのですが、入れているプラグ...

2013-01-28_16h13_53

カスタム投稿タイプを使ってカメラ専用のページを作る①
カスタム投稿タイプを使ってカメラ専用のページを作りました。プラグインの...

WordPress親固定ページで子ページの記事一覧を表示させる方法
サイト型アフィリエイトサイトを作る時に便利なのが固定ページの利用です。...

wordpressのデータベース(mySQL)に独自テーブルを作りデータを取り出す方法まとめ
WordpressのMySQLデータベースに独自テーブルを追加して、そ...

2013-02-21_15h44_16

WordPressにCSV Importerを使ってWeb APIデータをインポートする
Web APIで取得したXMLデータをCSVで保存をし、そのデータをW...

2014-06-20_10h11_18

WordPressの固定ページでカスタムフィールドを使って関連記事を表示させる方法
WordPressの固定ページでカスタムフィールドを使って関連記事を表...

2012-07-28_20h52_48

コメントスパム対策プラグインAkismetのAPIキー(無料)を取得する方法
コメントスパム対策プラグインAkismetのAPIキー(無料)を取得す...

IMG_0799

Googleアドセンス収益アップセミナーに参加して改善したこと。
大阪Googleアドセンス収益アップセミナーに参加してWordPres...

2012-08-09_10h17_36

WordPressのバックアップ・プラグイン「BackWPup」でサイト全体を保存する
WordPressのバックアップ・プラグイン「BackWPup」でサイ...

コメントを残す

このページの先頭へ