WordPressや旅・買い物・勝手な情報!

テーマを「もしもドロップシッピング」サイト用にカスタマイズしてみる!(その4)

前3回で、ナビゲーション、サイドバー、商品詳細ページ(投稿)についてのカスタマイズについて解説してきました。
今回が最後になりますが、トップページの記事一覧をドロップシッピングサイト向けの商品一覧にカスタマイズする方法について検討してみます。

 

トップページ商品一覧表示のサンプル

下図は、「クールでかっこいいシリーズ ver.15」のドロップシッピング向けのサンプルサイトです。

スポンサーリンク

 

トップページに商品一覧表示を作成する

index.phpnに商品一覧を追加して、表示させてみます。ただし、商品IDを自動で取得できないので、価格については自動表示できません。

 
 

商品一覧表示のHTML例

上図の商品一覧は、index.htmlの

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘トップページコンテンツ’) ) : ?>
(ここに挿入)
<?php endif; ?>

の全体と入れ替えるか、「ここに挿入」の部分に記述してください。

 
下記が商品一覧表示のHTML部分です。カテゴリーを指定して表示させています。

<div class="ds-idx"  style="border-color: #d93863;">カテゴリー名<span class="all-goods"><a href="<?php echo get_category_link(カテゴリーID);?>">全商品を見る</a></span></div>
<div class="ds-postlist">
<?php $args = array('cat' => カテゴリーID,'order' => 'DESC','posts_per_page' => 8);  ?>
<?php $the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) :
		while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<article>
<div class="s-img">
<?php  if ( has_post_thumbnail() ): ?><div class="img-set"><a href="<?php the_permalink() ?>" class="link"><?php the_post_thumbnail(); ?></a></div><?php endif; ?>
</div>
<div class="ds-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></div>
</article>
<?php endwhile; endif; ?>
</div>
※カテゴリー名とカテゴリーIDは、作成されるドロップシッピングサイトで確認して変更します。また、複数のカテゴリーを表示したい場合は、上記のコードを複数配置して表示させます。

 
 

商品一覧表示のCSS例

下記のCSSを、カスタマイザーの追加CSSに記述するとサンプルの表示に整形されます。

.ds-idx {
margin: 10px 0;
padding: 5px 0 5px 10px;
font-size: 125%;
font-weight: bold;
color: #444;
border-left: 2em solid #3CF;
background-color: #EFEFEF;}
.ds-postlist{
margin: 0 auto;
padding: 0 15px;
letter-spacing: -.4em;}
.ds-postlist article {
display: inline-block;
width: 25%;
vertical-align: top;
margin: 0;
padding: 0 0.5% 10px;
letter-spacing: 0; }
.ds-postlist article .ds-title{
margin: 0;
padding: 0;
font-size: 11px;
line-height: 1.2em;}
.ds-postlist article .ds-title a {
font-weight: bold; 
word-wrap: break-word;
text-align: justify;
text-justify: inter-ideograph;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;}
.ds-postlist .img-set {
border: 1px solid #CCC;
overflow: hidden;}
.ds-postlist img {
max-width: 100%;
margin-bottom: 10px;
z-index: 10;}
.all-goods {
padding: 2px 10px;
font-size: 85%;
float: right;}
.all-goods:before {
font-family: 'FontAwesome'; content:'\f14a';
font-weight: normal;
padding-right: 2px;
vertical-align: middle;
color: #3CF; }
.all-goods a{
color: #444;}

 
実際の利用時には、ウィジェットにすると非常に使いやすくなるでしょう。
次の機会に、ウィジェットにして利用する方法について解説したいと思っています。

 
 

ドロップシッピング用へのカスタマイズは面倒! と思われた方へ

プラグイン化して簡単にカスタマイズできるようにした、「クールでかっこいいWordPressテーマ V15 ドロップシッピング版」が作業効率化に貢献します。

 
 

スポンサーリンク

同ジャンル・関連ページ



2 Comments »

  • 「クールでかっこいいWordPressテーマ Ver.13」をアフィリエイトとドロップシッピング(もしも)で使っています。

    Ver.15の「Coolweb Dropshipping V5」では、「もしも」商品の感想や購入理由の自動表示には対応していますでしょうか?

    以前はもしもAPIで引っ張れたかと思うのですが。

    今は対応していないのであれば、今後の時期バージョンでは対応予定はありませんか?

    よろしくお願いします。

    • テーマのご利用有り難うございます。
      商品の感想や購入理由の自動表示については、もしもの「らくぺた」機能が対応すれば、簡単に追加できますが、当方で追加予定はありません。
      以前は、「もしも商品登録プラグイン」の利用ができましたが、サイト閉鎖されましたので動作しなくなりました。
      申し訳ありませんが、当方でAPIによるプラグイン化は予定していません。
      よろしくお願いします。


コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA