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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

1回答

6396閲覧

woocommerceを導入し、サポートを宣言していないテーマを連携する方法

akkkkin

総合スコア83

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2016/12/01 08:28

編集2022/01/12 10:55

掲題の件でご質問です。

現在 ホームページにWooCommerce を導入しています。

しかし、互換性のあるテーマではないため、商品の一覧ページのレイアウトが崩れています。
そこで、WooCommerce Docsのサイトを参照しながら原因を探っているのですが、
すべて英語で記載されているため理解に苦しんでおります。

解読できた箇所としては現在使っているテーマのpage.phpの名前をwoocommerce.phpに変更してね、
ということだけです。

後は何をどう変更すれば、レイアウトが崩れること無く、表示させることができますでしょうか?

■WooCommerce Docsサイト
https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/

以上、ご教示いただけますとありがたいですm(__)m

追記:なんとかアドバイス頂きましたお陰で、woocommerce.php(商品一覧ページ)は表示させることができました。

しかし、商品一覧ページから特定の商品へページ遷移する場合、
通常ならsingle-product.phpが読み込まれるはずが、
woocommerce.phpが読み込まれます。

上記の解決策はどのようにすればいいか行き詰まっております。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

解読できた箇所としては現在使っているテーマのpage.phpの名前をwoocommerce.phpに変更してね、ということだけです。

いや、あともう少し実装方法が書かれていますよ。

英語ではありますが、プログラミングのドキュメントは基本的に全て英語ですし、WooCommerce は海外で開発されたプラグインです。サポートやドキュメントが英語なのは仕方ない話しです。最近では、翻訳サイトや翻訳サービスが充実しているので、それらを活用し、なるべく正確に読み取るようにした方がよいと思います。

凄い簡単な実装に関する説明

大雑把に説明すると以下のような感じです。

functions.php の after_setup_theme アクション内に追加。

php

1function teratail57267_after_setup_theme() { 2 /** 3 * WooCommerce support. 4 */ 5 add_theme_support( 'woocommerce' ); 6} 7add_action( 'after_setup_theme', 'teratail57267_after_setup_theme' );

page.php や single.php、archive.php をコピーして、ファイル名を woocommerce.php に変更。通常であれば記事本文になる部分に woocommerce_content() 関数を追加、本来であれば、ページタイトルになる部分に woocommerce_page_title() 関数、というような感じで、簡単な実装は終わりです。

注意点として、woocommerce_content() 関数内で、if ( have_posts() ) という感じでメインループが書かれているので、woocommerce.php に woocommerce_content() 関数を書く場合は、メインループを書く必要はありません。詳しくは、以下の WooCommerce コアのソースをご覧ください。

php

1if ( ! function_exists( 'woocommerce_content' ) ) { 2 3 /** 4 * Output WooCommerce content. 5 * 6 * This function is only used in the optional 'woocommerce.php' template. 7 * which people can add to their themes to add basic woocommerce support. 8 * without hooks or modifying core templates. 9 * 10 */ 11 function woocommerce_content() { 12 13 if ( is_singular( 'product' ) ) { 14 15 while ( have_posts() ) : the_post(); 16 17 wc_get_template_part( 'content', 'single-product' ); 18 19 endwhile; 20 21 } else { ?> 22 23 <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?> 24 25 <h1 class="page-title"><?php woocommerce_page_title(); ?></h1> 26 27 <?php endif; ?> 28 29 <?php do_action( 'woocommerce_archive_description' ); ?> 30 31 <?php if ( have_posts() ) : ?> 32 33 <?php do_action('woocommerce_before_shop_loop'); ?> 34 35 <?php woocommerce_product_loop_start(); ?> 36 37 <?php woocommerce_product_subcategories(); ?> 38 39 <?php while ( have_posts() ) : the_post(); ?> 40 41 <?php wc_get_template_part( 'content', 'product' ); ?> 42 43 <?php endwhile; // end of the loop. ?> 44 45 <?php woocommerce_product_loop_end(); ?> 46 47 <?php do_action('woocommerce_after_shop_loop'); ?> 48 49 <?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?> 50 51 <?php wc_get_template( 'loop/no-products-found.php' ); ?> 52 53 <?php endif; 54 55 } 56 } 57}

より複雑なことをしたい場合は、WooCommerce 対応テーマを参考にする、WooCommerce コアのソースコードを参考にするとよいと思います。ただ、レイアウトが崩れないようにしたいだけであれば、30 分もあれば実装できると思います。

投稿2016/12/01 16:46

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

akkkkin

2016/12/02 01:42 編集

回答ありがとうございます。 >page.php や single.php、archive.php をコピーして、ファイル名を woocommerce.php に変更。 →これはthemes/hogetheme/にある、page.php や single.php、archive.phpのファイルを全てコピーしてwoocommerce1.php,woocommerce2.php,woocommerce3.phpというファイル名に変更するということでしょうか?そして、WooCommerce コアのソースの記述に変更するということでしょうか?
退会済みユーザー

退会済みユーザー

2016/12/02 03:28

> これはthemes/hogetheme/にある、page.php や single.php、archive.phpのファイルを全てコピーしてwoocommerce1.php,woocommerce2.php,woocommerce3.phpというファイル名に変更するということでしょうか? 書き方が悪かったですね。page.php か single.php、もしくは archive.php をコピーして、ファイル名を woocommerce.php に変更してください。woocommerce.php は 1 ファイルだけ作成すればよいです。 > そして、WooCommerce コアのソースの記述に変更するということでしょうか? ??? どういうことでしょうか?
akkkkin

2016/12/02 03:34

>woocommerce.php は 1 ファイルだけ作成すればよいです。 →かしこまりました。 > そして、WooCommerce コアのソースの記述に変更するということでしょうか? woocommerce.phpファイル内のコードを下記に変更するということでしょうか? if ( ! function_exists( 'woocommerce_content' ) ) { /** * Output WooCommerce content. * * This function is only used in the optional 'woocommerce.php' template. * which people can add to their themes to add basic woocommerce support. * without hooks or modifying core templates. * */ function woocommerce_content() { if ( is_singular( 'product' ) ) { while ( have_posts() ) : the_post(); wc_get_template_part( 'content', 'single-product' ); endwhile; } else { ?> <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?> <h1 class="page-title"><?php woocommerce_page_title(); ?></h1> <?php endif; ?> <?php do_action( 'woocommerce_archive_description' ); ?> <?php if ( have_posts() ) : ?> <?php do_action('woocommerce_before_shop_loop'); ?> <?php woocommerce_product_loop_start(); ?> <?php woocommerce_product_subcategories(); ?> <?php while ( have_posts() ) : the_post(); ?> <?php wc_get_template_part( 'content', 'product' ); ?> <?php endwhile; // end of the loop. ?> <?php woocommerce_product_loop_end(); ?> <?php do_action('woocommerce_after_shop_loop'); ?> <?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?> <?php wc_get_template( 'loop/no-products-found.php' ); ?> <?php endif; } } } まだまだ初心者で理解が及ばないところがあり、不快な気持ちにさせてしまっていましたら申し訳ございません。
退会済みユーザー

退会済みユーザー

2016/12/02 03:52

> woocommerce.phpファイル内のコードを下記に変更するということでしょうか? 回答としてそのようには書いていないと思います。再度お読みいただけますでしょうか。
akkkkin

2016/12/02 03:59

>注意点として、woocommerce_content() 関数内で、if ( have_posts() ) という感じでメインループが書かれているので、woocommerce.php に woocommerce_content() 関数を書く場合は、メインループを書く必要はありません。 →つまり、<?php if ( have_posts() ) : ?>から<?php endif;までは記述不要ということでしょうか?つきましては以下のコードをwoocommerce.phpに記述するという理解でいいでしょうか? if ( ! function_exists( 'woocommerce_content' ) ) { /** * Output WooCommerce content. * * This function is only used in the optional 'woocommerce.php' template. * which people can add to their themes to add basic woocommerce support. * without hooks or modifying core templates. * */ function woocommerce_content() { if ( is_singular( 'product' ) ) { while ( have_posts() ) : the_post(); wc_get_template_part( 'content', 'single-product' ); endwhile; } else { ?> <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?> <h1 class="page-title"><?php woocommerce_page_title(); ?></h1> <?php endif; ?> <?php do_action( 'woocommerce_archive_description' ); ?> } } } 以上何卒よろしくお願いします。
退会済みユーザー

退会済みユーザー

2016/12/02 04:14

> つきましては以下のコードをwoocommerce.phpに記述するという理解でいいでしょうか? いえ、違います…。 えっと…、大変恐縮なのですが、再度回答内容をお読みいただけますでしょうか。というのも、先程回答した内容と重複したコメントになってしまうので、読んでいただきたいと思います。
akkkkin

2016/12/02 04:33

下記がpage.phpをwoocommerce.phpにファイル名を変更したものです。 >通常であれば記事本文になる部分に woocommerce_content() 関数を追加 →下記で正しいでしょうか? <?php get_header(); ?> <?php get_template_part( 'parts_homeheader' ); ?> <div id="content"> <div id="inner-content" class="wrap cf"> <main id="main" class="m-all t-all d-5of7 cf" role="main"> <?php get_template_part( 'parts_add_top' ); ?> /**↓↓↓↓追加した woocommerce_content() 関数↓↓↓↓*/ if ( ! function_exists( 'woocommerce_content' ) ) { /** * Output WooCommerce content. * * This function is only used in the optional 'woocommerce.php' template. * which people can add to their themes to add basic woocommerce support. * without hooks or modifying core templates. * */ function woocommerce_content() { if ( is_singular( 'product' ) ) { while ( have_posts() ) : the_post(); wc_get_template_part( 'content', 'single-product' ); endwhile; } else { ?> /**↑↑↑↑追加した woocommerce_content() 関数↑↑↑↑*/ <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article"> <header class="article-header entry-header animated fadeInDown"> <h1 class="page-title entry-title" itemprop="headline"><?php the_title(); ?></h1> <?php if ( has_post_thumbnail() && !get_option( 'post_options_eyecatch' ) ) :?> <figure class="eyecatch animated fadeInUp"> <?php the_post_thumbnail('single-thum'); ?> </figure> <?php endif; ?> <?php if ( !get_option( 'sns_options_hide' ) &&!is_home() && !is_front_page() && get_option( 'sns_options_page' )) : ?> <?php get_template_part( 'parts_sns_short' ); ?> <?php endif; ?> </header> <section class="entry-content cf"> <?php the_content(); ?> </section> <?php if ( !get_option( 'sns_options_hide' ) &&!is_home() && !is_front_page() && get_option( 'sns_options_page' )) : ?> <footer class="article-footer"> <div class="sharewrap wow animated bounceIn" data-wow-delay="0.5s"> <?php if ( get_option( 'sns_options_text' ) ) : ?> <h3><?php echo get_option( 'sns_options_text' ); ?></h3> <?php endif; ?> <?php get_template_part( 'parts_sns' ); ?> </div> </footer> <?php endif; ?> </article> <?php endwhile; endif; ?> <?php get_template_part( 'parts_add_bottom' ); ?> </main> <?php get_sidebar(); ?> </div> </div> <?php get_footer(); ?>
退会済みユーザー

退会済みユーザー

2016/12/02 05:08

質問ですが、PHP の基礎レベル(変数、if、switch、for、foreach、function 程度)知識はありますでしょうか?もし、PHP の知識が全くないということでしたら、少々厳しいかもしれません…。 まず > 注意点として、woocommerce_content() 関数内で、if ( have_posts() ) という感じでメインループが書かれているので、woocommerce.php に woocommerce_content() 関数を書く場合は、メインループを書く必要はありません。詳しくは、以下の WooCommerce コアのソースをご覧ください。 と、僕は回答しております。その中で「詳しくは、以下の WooCommerce コアのソースをご覧ください。」と記述していますが、これは、「注意点として、woocommerce_content() 関数内で、if ( have_posts() ) という感じでメインループが書かれているので、woocommerce.php に woocommerce_content() 関数を書く場合は、メインループを書く必要はありません。」の理解を深めるために、以下のソースコードを参考にしてくださいという意味であり、コピペしてくださいということではありません。 実際に作業をして頂きたい部分は「page.php や single.php、archive.php をコピーして、ファイル名を woocommerce.php に変更。通常であれば記事本文になる部分に woocommerce_content() 関数を追加、本来であれば、ページタイトルになる部分に woocommerce_page_title() 関数、というような感じで、簡単な実装は終わりです。」の部分と「functions.php の after_setup_theme アクション内に追加。」の部分です。 恐らく、PHP の関数の使い方が理解されていないのかな?とお見受けします。関数の使い方については、以下の PHP のドキュメントをご覧ください。 PHP: ユーザー定義関数 - Manual http://php.net/manual/ja/functions.user-defined.php
akkkkin

2016/12/02 05:58 編集

回答ありがとうございます。 if、switch、for、foreachの基礎レベルはあります。しかしfunctionについて内に等しいかもしれません。 >本来であれば、ページタイトルになる部分に woocommerce_page_title() 関数、というような感じで、簡単な実装は終わりです。」の部分と →<h1 class="page-title entry-title" itemprop="headline"><?php woocommerce_page_title(); ?></h1>と記述しました。 >「functions.php の after_setup_theme アクション内に追加。」の部分です。 →これはfunction.php内に以下をコピペではダメなのでしょうか? function teratail57267_after_setup_theme() { /** * WooCommerce support. */ add_theme_support( 'woocommerce' ); } add_action( 'after_setup_theme', 'teratail57267_after_setup_theme' );
退会済みユーザー

退会済みユーザー

2016/12/02 11:58 編集

>>「functions.php の after_setup_theme アクション内に追加。」の部分です。 >→これはfunction.php内に以下をコピペではダメなのでしょうか? そこはコピペでよいです。 えっと、まず、僕が回答した内容、コメントした内容は、落ち着いて読んでいただいてもよいでしょうか? akkkkin さんからいただくコメントを読む限り、 akkkkin さんは、僕の回答などを読んでいない気がしてしまいます…(話しが噛み合わないといいますか)。 > if、switch、for、foreachの基礎レベルはあります。しかしfunctionについて内に等しいかもしれません。 function は PHP の基礎です。 下記のサイトで無料で学べますので、お時間があるときにやってみてください。 http://prog-8.com/lessons/php/study/1
akkkkin

2016/12/03 03:42

回答ありがとうございます。もっと知識を付けます。 以下に記述したのですが正しいでしょうか? woocommerce.phpのコードの中身です。 記載した箇所はコメントで挟んでおります。 <?php /* Template Name:shopサイト(1カラム) */ ?> <?php get_header(); ?> <?php get_template_part( 'parts_homeheader' ); ?> <div id="content"> <div id="inner-content" class="wrap page-full cf"> <main id="main" class="m-all t-all d-all cf" role="main"> <?php get_template_part( 'parts_add_top' ); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?>> <header class="article-header entry-header animated fadeInDown"> <!-- ★★ページタイトルになる部分に woocommerce_page_title() 関数の箇所★★ --> <h1 class="page-title entry-title" itemprop="headline"><?php woocommerce_page_title(); ?></h1> <!-- ★★ページタイトルになる部分に woocommerce_page_title() 関数の箇所★★ --> <?php if ( !get_option( 'sns_options_hide' ) &&!is_home() && !is_front_page() && get_option( 'sns_options_page' )) : ?> <?php get_template_part( 'parts_sns_short' ); ?> <?php endif; ?> </header> <section class="entry-content cf"> <!-- ★★通常であれば記事本文になる部分に woocommerce_content() 関数を追加の箇所★★ --> <?php woocommerce_content(); ?> <!-- ★★通常であれば記事本文になる部分に woocommerce_content() 関数を追加の箇所★★ --> </section> <?php if ( !get_option( 'sns_options_hide' ) &&!is_home() && !is_front_page() && get_option( 'sns_options_page' )) : ?> <footer class="article-footerfull"> <div class="sharewrap wow animated bounceIn" data-wow-delay="0.5s"> <?php if ( get_option( 'sns_options_text' ) ) : ?> <h3><?php echo get_option( 'sns_options_text' ); ?></h3> <?php endif; ?> <?php get_template_part( 'parts_sns' ); ?> </div> </footer> <?php endif; ?> </article> <?php endwhile; endif; ?> <?php get_template_part( 'parts_add_bottom' ); ?> </main> </div> </div> <?php get_footer(); ?> 以上よろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問