ホーム > デザインテーマについて > 既存のテーマを利用したショップの作り方 その1

既存のテーマを利用したショップの作り方 その1

2010 年 2 月 4 日

WordPress2.9.1 にWelcart0.3 をインストールし、テーマはWordPress Default 1.6 を使っているという状況で、どのように商品を見せるかという観点でショップの作り方を紹介したいと思います。主に出力をコントロールするという話になります。レイアウトなどデザインに関しては、皆さん独自のスタイルを組んでいただきたいと思います。

ただ、出力をコントロールするといってもテンプレートタグを使ってテーマをカスタマイズする範囲となります。テーマはWelcart のアップグレードを行っても変更されることはありませんのでカスタマイズは有効です。

初期状態

初期状態のブログトップ

なお、styleはWelcart が持っているusces_cart.css が有り、Welcart が生成するソースに対してstyle を指定しています。このカスタマイズ方法については「商品ページのCSS」を参照してください。
 
 
まずはWelcart の管理画面から”基本設定”、”配送設定”を済ませた後、商品を2つほど登録してみましょう。

この段階でブログのトップページは右のようになります。この状態から次の課題に取り組みたいと思います。

  1. このトップページのようなブログ記事ループに商品を含ませない
  2. 商品だけのループページを作る
  3. ブログ投稿記事や特定のページの中で「カートへ」投入ボタンを表示させる
  4. メイン(ヘッダー)ナビゲーションの構成方法
  5. Welcartウィジェットを使う

? 

 
 

1. ループに商品を含ませない

Welcart では商品は投稿記事として扱われます。ですのでそのまま表示させると通常のブログ記事と混ざって表示されてしまいます。混ぜて表示させるのも一つの手ですが、ここでは商品を表示させない方法を説明いたします。
 
 
このテーマのトップページを表示しているテンプレートはindex.php です。このファイルの12行目に次の1行を付け加えます。

<?php query_posts(“cat=-3”); ?>

トップページ

”商品以外”を施したトップページ

この query_posts() というテンプレートタグはループの絞込みや並び替えを行うもので、挿入する位置は通常 <?php if (have_posts()) : ?> のすぐ下となります。

カッコ()の中にある文字列は引数といい、「cat=」は「カテゴリーIDが」という意味で「-3」は「3以外」を表しています。

このブログでは3 がカテゴリー「商品」のIDでした。

カテゴリーIDの調べ方は、管理画面の”投稿”メニューの中の”カテゴリー”に入り、該当する商品をクリックして編集に入ります。その時URLの一番後ろあたりにある「cat_ID=3」という文字列から知ることができます。
 
 
query_posts() は並び替えもできます。

例えば、商品以外の記事を日時降順で並べたい場合の引数は、’cat=-3&orderby=date&order=DESC’ となります。

このテンプレートの詳細は「テンプレートタグ/query posts」をご覧ください。
 
 
トップページ以外にもタグアーカイブや年月アーカイブなど、商品を含ませたくないループページがあります。WordPress Default テーマではこれらをまとめてarchive.php テンプレートで表示させています。index.php よりも複雑に見えますが、これは条件分岐によりタイトルを切り替えて表示しているだけです。この条件分岐の中にquery_posts() を置いてやることで、各ページごとに絞込みを変更できます。

次のコードはarchive.php の条件分岐の中にquery_posts() を挿入した例です。

<?php /* If this is a category archive */ if (is_category()) { ?>
<h2 class=”pagetitle”><?php printf(__(‘Archive for the ‘%s’ ************** ?>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<?php query_posts(“cat=-3”); ?>
<h2 class=”pagetitle”><?php printf(__(‘Posts Tagged ‘%s’’,************** ?>
<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
<?php query_posts(“cat=-3”); ?>
<h2 class=”pagetitle”><?php printf(_c(‘Archive for ************* ?>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<?php query_posts(cat=-3”); ?>
<h2 class=”pagetitle”><?php printf(_c(‘Archive for %s|************* ?>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<?php query_posts(“cat=-3”); ?>
<h2 class=”pagetitle”><?php printf(_c(‘Archive for %s|************** ?>
<?php /* If this is an author archive */ } elseif (is_author()) { ?>
<h2 class=”pagetitle”><?php _e(‘Author Archive’, ‘kubrick’); ?></h2>
<?php /* If this is a paged archive */ } elseif (isset($_GET[‘paged’]) && !empty($_GET[‘paged’])) { ?>
<h2 class=”pagetitle”><?php _e(‘Blog Archives’, ‘kubrick’); ?></h2>
<?php } ?>

 
 このテーマではarchive.php でいろんなループページを賄っていますが、テーマによっては別テンプレートになっている場合も少なくありません。どのテンプレートファイルがどのページを表示するためのものかどうかを調べるには「テーマテンプレートファイル一覧」をご覧ください。
 
 
次回は「商品だけのループページを作る」方法を紹介します。

関連記事
  1. afroparty
    2010 年 2 月 9 日 11:55 | #1

    【1. ループに商品を含ませない】
    index.phpの追加分で早速つまづきました。

    追加のテキストは

    と成っていますが、このままだとエラーが出て表示されませんでした。

    1日悩んでやっと解決しました。

    ですよね。
    catの手前が全角でおかしなことになってたみたいです。

    同じようにつまづいた方がいらっしゃったら参考にしてください。
    phpが分かる人には悩むレベルじゃないと思うけど。

  2. afroparty
    2010 年 2 月 9 日 12:00 | #2

    あれ? テキストの一部が表示されてない。
    これじゃなんだかわからないですよね。

    つまり、index.phpの12行目に使いする一文に修正が必要です。
    catの手前に書いてある記号が全角になっています。
    それを削除し、shift+7の記号を入れれば正しく表示されるようです。

  3. nanbu
    2010 年 2 月 9 日 14:15 | #3

    こんにちは。

    どうもコピペすると一部文字が全角になってしまうようです。
    コードは全て半角です。
    コピペする場合はご注意ください。

    また、分岐の部分のコードにミスがありました。既に修正済みです。

    ご指摘ありがとうございました。

  4. 芳川昌之
    2010 年 6 月 23 日 15:55 | #4

    こんにちは

    ここですが

    ではないでしょうか?

    上のPHP文だとエラーにでしたが、下のにしたらうまくいきましたので。

    環境によるのかもしれませんが。

    ちなみに私はPHPはほとんどわかってません。。。

  5. 芳川昌之
    2010 年 6 月 23 日 15:59 | #5

    すいません、PHPコードが読み取られちゃったみたいですので、記したのは

    php query_posts(“cat=-3″);

    php query_posts(‘cat=-3’);

    です。

    芳川昌之 :
    こんにちは
    ここですが

    ではないでしょうか?
    上のPHP文だとエラーにでしたが、下のにしたらうまくいきましたので。
    環境によるのかもしれませんが。
    ちなみに私はPHPはほとんどわかってません。。。

    @芳川昌之

  6. 2010 年 6 月 29 日 13:53 | #6

    既存のテーマを利用したショップの作り(その1)を参考に基本設定と配送設定を終わらせて、商品を2つ登録して公開しました。その直後は最新記事なので当然トップページ部分に表示されました。

    現在、Carringtonというテーマをダウンロードして運用してます。
    http://wordpress.org/extend/themes/carrington-blog

    こちらのindex.phpには以下の記述がありませんでした。

    なので、文字検索で探したところ、attachment-default.phpに以下の記述がありました。

    近いものでしたので、その直後に以下を書き加えて、上書き保存させてもらいました。
    (商品カテゴリーは46)

    しかしブログを更新しても相変わらずトップ画面に商品が表示され続けています。
    大変お手数なのですが、解決策をご教授願えればと思います。
    お忙しいとは思いますが、どうぞ宜しくお願い致します。

    【以下attachment-default.phpより近辺を抜粋させて頂きました】

    <a class="wrapper" href="post_parent); ?>” rev=”up post”>← post_parent)); ?>

    <a title="” href=”ID); ?>”>ID, ‘large’ ); ?>

    post_excerpt) ) the_excerpt(); // this is the “caption” ?>

  7. 2010 年 6 月 29 日 14:00 | #7

    2重投稿申し訳ありません。

    既存のテーマを利用したショップの作り(その1)を参考に基本設定と配送設定を終わらせて、商品を2つ登録して公開しました。その直後は、当然最新記事なのでトップページ最初に表示されました。

    現在、Carringtonというテーマをダウンロードして運用してます。
    http://wordpress.org/extend/themes/carrington-blog

    こちらのindex.phpには以下の記述がありません。
    /*

    */
    なので、文字検索で探したところ、attachment-default.phpに以下の記述がありました。
    /*

    */
    近いものでしたので、その直後に以下を書き加えて、上書き保存させてもらいました。
    (商品カテゴリーは46)
    /*

    */
    しかしブログを更新しても相変わらずトップ画面に商品が表示され続けています。
    大変お手数なのですが、解決策をご教授ねがえればと思います。
    どうぞ宜しくお願い致します。

    【以下attachment-default.phpより抜粋させて頂きました】
    /*

    <a class="wrapper" href="post_parent); ?>” rev=”up post”>← post_parent)); ?>

    <a title="” href=”ID); ?>”>ID, ‘large’ ); ?>

    post_excerpt) ) the_excerpt(); // this is the “caption” ?>

    */

  8. 2010 年 6 月 29 日 14:03 | #8

    調べてコメント行で表示されるかと思い2回投稿させて頂きました。
    しかしPHPを掲載することができません。大変申し訳ありません。

  9. nanbu
    2010 年 6 月 30 日 04:40 | #9

    こんにちは。
    ソースやコードを記述する場合はバックティックで挟みます。
    現在の記事へのコメントなのでここでも構わないのですが、「開発フォーラム」でご質問いただけると助かります。

  1. 2010 年 2 月 27 日 22:44 | #1
  2. 2010 年 3 月 4 日 17:00 | #2
  3. 2010 年 5 月 9 日 14:27 | #3
  4. 2010 年 10 月 22 日 02:01 | #4
  5. 2013 年 3 月 13 日 02:00 | #5
  6. 2013 年 11 月 13 日 19:54 | #6
  7. 2014 年 3 月 28 日 11:28 | #7