WordPressのプラグイン「Welcart ウェルカート」でネットショップ運営している方から「タグをクリックしたときの一覧ページのタテに並ぶ表示をカテゴリー一覧と同じヨコに並ぶ表示にしたい」との依頼がありました。カスタマイズの対応させていただいたときのメモになります。
タグ一覧ページ表示形式のカスタマイズ方法！
Welcartのタグをクリックすると開く一覧ページは、各商品がタテ並びになります。左寄せで商品画像、その右側に商品説明が表示されます。それに対してカテゴリーの一覧ページはグリッド表示で各商品がヨコに並び、画像の下に商品名や販売価格が表示されます。それぞれの一覧ページを比べた時に違和感を感じているショップオーナーさんも多いかもしれません。
そこでタグ一覧ページの表示をカテゴリー一覧ページと同じ表示形式にカスタマイズする方法についてですが、編集するファイルは子テーマに移動した「Archive.php」ファイルになります。
編集する箇所は下記の部分
<?php if (have_posts()) : ?>
<div class="post-li">
<?php while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<p>
<time datetime="<?php the_time('c'); ?>">
<?php the_time(__('Y/m/d')) ?>
</time>
</p>
<h2 class="post-title">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php printf( esc_attr__( 'Permalink to %s', 'welcart_basic' ), the_title_attribute( 'echo=0' ) ); ?>">
<?php the_title(); ?>
</a>
</h2>
<?php the_excerpt() ?>
</article>
<?php endwhile; ?>
</div>
<?php endif; ?>
上記の部分を「category.php」ファイル内からコピーした下記のコードと差し替えます。
<?php if (have_posts()) : ?>
<div class="cat-il type-grid">
<?php while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="itemimg">
<a href="<?php the_permalink() ?>">
<?php usces_the_itemImage(0, 300, 300); ?>
</a>
<?php welcart_basic_campaign_message(); ?>
</div>
<div class="itemname">
<a href="<?php the_permalink() ?>" rel="bookmark"><?php usces_the_itemName(); ?></a>
</div>
<div class="itemprice">
<?php echo '¥'.archve_taxPrice(); ?><em class="tax">（税込）</em><?php //usces_crform( usces_the_firstPrice('return'), true, false ); usces_guid_tax(); ?>
</div>
<?php if(! usces_have_zaiko_anyone() ) : ?>
<div class="itemsoldout"><?php _e('Sold Out', 'usces' ); ?></div>
<?php endif; ?>
</article>
<?php endwhile; ?>
</div>
<?php endif; ?>
これだけで、カテゴリー一覧ページと同じ表示形式になりました。
まとめ
今回、コピーもとの「category.php」ファイルのソースにはすでに手が加わっていたようなので、お試しの際は、このページのソースではなく、カスタマイズしているサイトの「category.php」ファイルからのコピーをおすすめします。今後もカスタマイズ箇所の様子を見て、不具合が発生したら対応する姿勢ですのでこの記事内容はご参考程度にお願い致します。
私たち「クラフトアーツ」ではWordPressのカスタマイズにも対応いたします。お見積もりは無料ですので、お気軽にお問い合わせください。
※具体的な修正方法についてのご質問はご遠慮ください。