WPサイトの特定カテゴリ内の特定タグの記事を表示＋一覧表示

ちょっとWPでのサイト制作で悩んでしまったため、それの解決方法を自分へのメモ書きと言うことで残しておきたいと思います。

１．やりたかったこと

カテゴリーページに、そのカテゴリーのおススメ商品を3つほど一番上に表示させようと考えました。

その3つは、誰でもいつでも変更できるようにします。

そして、3つのおススメ商品の下に、そのカテゴリー内の商品一覧を陳列します。

ということが今回私がしたかったことです。

問題点となるのは、「それぞれのカテゴリーでそれぞれのおススメ商品をピックアップすること」と「3つの商品を自由にピックアップすること」、さらに「カテゴリー内の商品のレイアウトを3つのおススメ商品と同じレイアウトを使用する」ということでした。

２．「PHP Code」を使用した

色々方法はあるかと思うのですが、今回は「PHP Code」というプラグインを使用しました。「PHP Code」はショートコードを作成することができます。まず「PHP Code」で以下のようなコードを記述しました。

<dl>
<?php $temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query(‘post_type=post’ . ‘&posts_per_page=表示させる記事の数’ . ‘&cat=カテゴリー番号’ . ‘&tag=タグを入力’ . ‘&paged=’ . $paged); ?>
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<!– ループさせたい内容 –>
<div class=”waku”>
<dt><?php the_time(‘Y.m.d’); ?></dt>
<span><?php the_post_thumbnail( ‘medium’ ); ?></span>
<dd><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></dd>
</div>
<!– ループさせたい内容 end –>
<?php endwhile; ?>
<?php $wp_query = null; $wp_query = $temp; ?>
</dl>

そして使用したCSSは以下のものです。

.waku{
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 20px;
padding: 5px 5px 5px 5px;
border: 1px solid #ccc;
list-style: none; display: inline-block;
width: 31%;
text-align: left;
}

これで商品が3つ、横並びで並ぶと思います。

「posts_per_page」という所に表示させたい記事の数を入力します。
「cat」に該当するのカテゴリーの番号を入力します。
「tag」が重要で、ここに設定したタグを入力した商品が、ピックアップ商品となります。そのため、記事ページでタグを入力するところがありますが、ここに指定したタグを入力することでピックアップ商品として表示されるようになります。

次に、作成したショートコードをカテゴリーのテンプレートである「archive.php」の中に入れます。

その際「条件分岐」を使用して、任意のカテゴリーに任意の表示をさせるようにします。

<!–▼条件分岐–>
<?php $url = $_SERVER[‘REQUEST_URI’]; ?>
<?php if(strstr($url,’カテゴリー１のスラッグ’)): ?>
<?php echo do_shortcode(‘[php snippet=1]’); ?>
<?php elseif(strstr($url,’カテゴリー２のスラッグ’)): ?>
<?php echo do_shortcode(‘[php snippet=2]’); ?>
<?php elseif(strstr($url,’カテゴリー３のスラッグ’)): ?>
<?php echo do_shortcode(‘[php snippet=3]’); ?>
<?php else: ?>
カテゴリーに条件なし
<?php endif; ?>
<!–▲条件分岐–>

３．スラッグに反応させてショートコードの中身を条件分岐させる

分かりやすく説明します。

?php if(strstr($url,’カテゴリー１のスラッグ’)): ?>

これを記述することで、「カテゴリー１に表示させるよ」という命令となります。では何を表示させるのかというと、その下に書いてある

<?php echo do_shortcode(‘[php snippet=1]’); ?>

このショートコードを表示させるという命令になります。

ですから今回の場合は、

カテゴリー１に「PHP cpde」で作成した[php snippet=1]というショートコードの中身を表示
カテゴリー２に「PHP cpde」で作成した[php snippet=2]というショートコードの中身を表示
カテゴリー３に「PHP cpde」で作成した[php snippet=3]というショートコードの中身を表示

ということになります。

恐らくサイトを作っていて、カテゴリーは増えてくると思います。そんな時に、おススメ商品がなく、特に何も表示させない場合には、



<?php else: ?> ここを空白にする（カテゴリーに条件なしと書いてある所） <?php endif; ?>

空白にすることで、カテゴリー１，２，３以外の時は、何も表示されなくなります。

次に、例えばカテゴリー１でおススメ商品3つを表示させた後に、そのカテゴリーの商品を一覧にして下に表示させたいと考えた場合の話です。



<h2>このカテゴリー内の商品一覧</h2>
<dl>
<?php
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query('post_type=post' . '&posts_per_page=表示させたい記事の数' . '&cat=指定するカテゴリー番号' . '&tag=' . '&paged=' . $paged); ?> <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?> <!-- ループさせたい内容 --> 
<div class="waku">
<dt class="date"><?php the_time('Y.m.d'); ?></dt>
<span><?php the_post_thumbnail( 'medium' ); ?></span>
<dd>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</dd>
</div>
<!-- ループさせたい内容 end -->
<?php endwhile; ?>
<?php $wp_query = null; $wp_query = $temp; ?>
</dl>