質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • WordPress

    8740questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

WooCommerce独自デザイン(テーマ) での作り方について

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,073

nats

score 14

WooCommerceプラグインを使用して、ECサイトを現在作っています。

カラーミーやMakeshopでECを作成した経験と、MTのECプラグイン利用してECサイトを作っておりましたが、
MTからWPに完全に移行したのがキッカケで、WPでECサイトを作る事になりました。

WP自体まだまだ初心者ですが、ループとタグを呼び出して表示するやり方は
今まで経験してきたシステム構築とさほど違いがなかったので、
WPでのサイト作成(独自テーマ作り)はいくつか問題なくできております。

WooCommerceを導入した独自テーマ作りも、プラグインから発行されるタグを並べて組んでいく、
というシステム構築で問題ない....と思っておりましたが、全然違いました。


ネット上で見つけたやり方は

  1. woocommerce_content()関数を使う
  2. フックを使う
    https://docs.artws.info/document/third-party-custom-theme-compatibility/

という2つが基本になっていそうです。

他にもプラグインを使うだとか、置き換えをする、などいくつか見つけましたが、
woocommerce_content()関数を使う、や、置き換えでは柔軟なカスタマイズが出来ないと思われます。

teratail内でも似たような質問を見つけました。
https://teratail.com/questions/27300
関数一覧があるからここから呼び出せるよ、と。
https://docs.woocommerce.com/wc-apidocs/

ここで自分は、
「フックを使う」と「関数一覧」の2方面から色々な記事を読み漁って試みたのですが、
どうしても求めてる要素を読み出す事ができませんでした。フックの使い方や関数の呼び出し方が分かりません。
出てくる記事が英語ばかりなので、理解できてないだけと思いますが...

フックについては使い方ページも見つけたのですが...
https://www.cloudways.com/blog/about-woocommerce-hooks/
分かりません。


以下は、商品一覧を作成しようと思ったコードです。

<?php
  $params = array('post_type' => 'product');
  $wc_query = new WP_Query($params);
?>
<?php if ($wc_query->have_posts()) : ?>
  <?php while ($wc_query->have_posts()) : $wc_query->the_post(); 
    $thumbnail_id = get_post_thumbnail_id();
    $img = wp_get_attachment_image_src( $thumbnail_id , 'large');
  ?>

    /* 商品の名 */
    <?php the_title(); ?>

    /* 商品画像 */
    <img src="<?php echo $img[0]; ?>">

    /* 商品の価格 */
    ????

    /* 商品の所属カテゴリー一覧 */
    <?php do_action( 'woocommerce_product_meta_start' ); ?>
      <?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( 'Category:', 'Categories:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
      <?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
    <?php do_action( 'woocommerce_product_meta_end' ); ?>

  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
<?php endif; ?>


'post_type' => 'product'を使えば、Woocamarceで登録した商品が抽出でき、
titleやimgはいつものソースで呼び出す事ができました。

商品が所属しているカテゴリーを表示できるソースはネット上で見つけました。複雑ですね。。
ただこのカテゴリのように、タグで要素を呼び出す事ができると思われますが、価格の呼び出し方が分かりません。
そもそもフックを利用したカスタマイズではないです。

WooCommerceで独自テーマを作った事ある方はどのようにカスタマイズを行っているのでしょうか?
フック?関数呼び出し?一番簡単で分かりやすいカスタマイズ方法があれば教えて頂ければ幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

WooCommerceの独自テーマをつくるのであれば、まずは既存のテーマ(WooCommerceに付属してくるサンプルテーマ)をカスタマイズして理解することをおすすめします。
また、WooCommerceはWordPressのシステムを活用したプラグインなので、WordPressの基本的な機能を理解しておくことも重要だと思います。

たとえば、以下の項目はWordPressの機能ですが、WooCommerceで存分に使われている機能です。

  • テーマ
  • アクションフック
  • フィルターフック
  • カスタム投稿タイプ
  • カスタム分類(カスタムタクソノミー)
  • カスタムフィールド

これらを理解した上で、WooCommerce向けのテーマの作り方(ドキュメント)を読むと理解が簡単になるはずです。


たとえば、natsさんが例としてあげている「商品の価格」表示の方法は、サンプルテーマ\wp-content\plugins\woocommerce\templatessingle-product.phpcontent-single-product.phpとたどっていくことで、do_action( 'woocommerce_single_product_summary' );で表示されていることがわかります。

さらに見ていくと「商品の価格」は「カスタムフィールド」機能で保存されていることがわかり、WooCommerceの関数を使用しなくても、(WordPressの標準関数である)get_post_meta関数で直接呼び出せそうに思えてきます。


以上のように、遠回りに思えるかもしれませんが、独自テーマを今後もつくっていくのであれば、このような基本情報を習得することからはじめていくことをおすすめします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • WordPress

    8740questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。