だからあなたはあなたのテーマにショップを追加したいのです。 WooCommerceは素晴らしい選択です。技術的に話す すべて テーマはプラグインなので「WooCommerce互換」です。理論的には、どのプラグインもWordPressテーマ(正しくコーディングされている)で動作するはずです。.
テーマ開発者としては、WooCommerceの出力を微調整して、テーマに合わせたり、WooCommerceの設定ではすぐに利用できないオプション(ショップの列数の変更など)をエンドユーザーに提供したりすることもできます。以下に、テーマでWooCommerceの「より良い」サポートを提供したり、特定のデザインの変更を行ったりするために使用できる役立つスニペットをいくつか示します。.
重要:以下のスニペットの多くは、WooCommerceでのみ使用可能な関数を使用しています。したがって、これらのスニペットが配布用に作成されたテーマのfunctions.phpファイルの下部に単にダンプされていないことを確認してください。テーマを他の人と共有したり販売したりする場合は、WooCommerceプラグインがアクティブな場合にのみロードされる独自のファイルにスニペットを配置してください。.
WooCommerceが有効かどうかを確認する
私のテーマでは、WooCommerceがこのように有効になっているかどうかを確認するために使用できるカスタム定数を定義したいのですが、WooCommerceがアクティブな場合にのみファイルを含めたり、関数を実行したりできます(まだ有効になっていない場合は、上記の重要なメッセージを参照してください)。.
// WooCommerceがアクティブな場合にtrueを返す新しい定数を追加します
define( 'WPEX_WOOCOMMERCE_ACTIVE'、class_exists( 'WooCommerce'));
// WooCommerceがアクティブかどうかを確認します
if(WPEX_WOOCOMMERCE_ACTIVE){
//何かをする...
//すべてのWoo編集を含む新しいファイルを含めるなど.
}
WooCommerceサポートの宣言
これは、WooCommerceサポートを「有効」にし、エンドユーザーにテーマに互換性がないことを通知するプラグインからの警告を防ぐ、テーマに追加する最初で最も重要なコードです.
add_action( 'after_setup_theme'、function(){
add_theme_support( 'woocommerce');
});
WooCommerce CSSを削除します
個人的には、WooCommerceスタイルをオーバーライドして、サードパーティのWooCommerceプラグインで起こりうる問題を回避しています。ただし、すべてのWooCommerceスタイルを削除する場合は、非常に簡単です。.
次のスニペットは、すべてのWooCommerceスタイルを削除するためのものです。
//すべてのWooスタイルを削除します
add_filter( 'woocommerce_enqueue_styles'、 '__return_empty_array');
このスニペットは、特定のCSSスタイルを条件付きで削除する例です。
function wpex_remove_woo_styles($ styles){
unset($ styles ['woocommerce-general']);
unset($ styles ['woocommerce-layout']);
unset($ styles ['woocommerce-smallscreen']);
$ stylesを返します。
}
add_filter( 'woocommerce_enqueue_styles'、 'wpex_remove_woo_styles');
WooCommerce製品ギャラリー、ズーム、ライトボックスを有効にする(v3.0以降)
WooCommerce 3.0では、彼らは新しい製品ギャラリー、ズーム、ライトボックスを導入しました。テーマで使用する場合は、「add_theme_support」でこれらをすべて有効にする必要があります.
add_theme_support( 'wc-product-gallery-slider');
add_theme_support( 'wc-product-gallery-zoom');
add_theme_support( 'wc-product-gallery-lightbox');
ショップタイトルを削除
多くのテーマには、アーカイブのタイトルを表示する機能がすでにあるので、このコードは、WooCommerceから余分なタイトルを削除します。CSSを介して非表示にするよりも優れています。.
add_filter( 'woocommerce_show_page_title'、 '__return_false');
ショップのアーカイブタイトルを変更する
テーマがarchive_title()またはget_archive_title()関数を使用してアーカイブのタイトルを表示している場合、ショップのアーカイブタイトルではなく、フィルターを介して簡単に調整して、製品ページの名前を取得できます。.
function wpex_woo_archive_title($ title){
if(is_shop()&& $ shop_id = wc_get_page_id( 'shop')){
$ title = get_the_title($ shop_id);
}
$ titleを返します。
}
add_filter( 'get_the_archive_title'、 'wpex_woo_archive_title');
ショップのページごとに表示される商品の数を変更する
ショップおよび製品アーカイブ(カテゴリーおよびタグ)のページごとに表示される製品の数を変更するために使用されます.
// WooCommerceショップの投稿をページごとに変更します
function wpex_woo_posts_per_page($ cols){
12を返します。
}
add_filter( 'loop_shop_per_page'、 'wpex_woo_posts_per_page');
行ごとにショップに表示される列の数を変更する
WooCommerceがこのように機能する理由がわかりませんが、「loop_shop_columns」フィルターを変更するだけでなく、列を機能させるためにbodyタグに一意のクラスを追加する必要もあります。 Woo Shortcodesには、ショップページにはない正しいクラスのdivラッパーがありますが、そのため2つの関数が必要です.
//ショップの列を変更します
function wpex_woo_shop_columns($ columns){
リターン4;
}
add_filter( 'loop_shop_columns'、 'wpex_woo_shop_columns');
//ショップ列に正しいボディクラスを追加します
function wpex_woo_shop_columns_body_class($ classes){
if(is_shop()|| is_product_category()|| is_product_tag()){
$ classes [] = 'columns-4';
}
$ classesを返します。
}
add_filter( 'body_class'、 'wpex_woo_shop_columns_body_class');
次および前のページ区切り矢印を変更する
このスニペットを使用すると、ショップのページネーション矢印を微調整して、テーマの矢印と一致させることができます.
function wpex_woo_pagination_args($ args){
$ args ['prev_text'] = '';
$ args ['next_text'] = '';
$ argsを返します。
}
add_filter( 'woocommerce_pagination_args'、 'wpex_woo_pagination_args');
OnSaleバッジのテキストを変更する
異なる言語を使用しているサイトや、私があまり好きではない感嘆符を削除するのに特に役立ちます.
function wpex_woo_sale_flash(){
戻る ''。 esc_html __( 'Sale'、 'woocommerce')。 」';
}
add_filter( 'woocommerce_sale_flash'、 'wpex_woo_sale_flash');
製品ギャラリーのサムネイル列を変更する
レイアウトに応じて、単一の製品ギャラリーのサムネイルの列数を変更することができます。この関数はそれを実行します.
function wpex_woo_product_thumbnails_columns(){
リターン4;
}
add_action( 'woocommerce_product_thumbnails_columns'、 'wpex_woo_product_thumbnails_columns');
表示される関連商品の数を変更する
単一の製品ページの関連製品に表示される製品の数を変更するために使用されます.
//関連商品を設定して4つの商品を表示します
function wpex_woo_related_posts_per_page($ args){
$ args ['posts_per_page'] = 4;
$ argsを返します。
}
add_filter( 'woocommerce_output_related_products_args'、 'wpex_woo_related_posts_per_page');
製品の関連セクションとアップセルセクションの行ごとの列数を変更する
ショップのように、単一の製品ページで関連製品とアップセル製品の列数を適切に変更したい場合は、列をフィルタリングし、それに応じてボディクラスも変更する必要があります。.
//アップセル列をフィルタリングします
function wpex_woo_single_loops_columns($ columns){
リターン4;
}
add_filter( 'woocommerce_up_sells_columns'、 'wpex_woo_single_loops_columns');
//関連する引数をフィルタリングします
function wpex_woo_related_columns($ args){
$ args ['columns'] = 4;
$ argsを返します。
}
add_filter( 'woocommerce_output_related_products_args'、 'wpex_woo_related_columns'、10);
//ボディクラスをフィルタリングして列クラスを追加します
function wpex_woo_single_loops_columns_body_class($ classes){
if(is_singular( 'product')){
$ classes [] = 'columns-4';
}
$ classesを返します。
}
add_filter( 'body_class'、 'wpex_woo_single_loops_columns_body_class');
メニューに動的カートリンクとカート費用を追加する
このスニペットは、カート内のアイテムのコストを表示するWooCommerceカートアイテムをメニューに追加します。さらに、サイトでFont-Awesomeが有効になっている場合は、小さなショッピングバッグアイコンが表示されます. 重要:これらの関数は、AJAXに依存してコストを更新するため、is_admin()条件でラップしないでください。is_admin()がtrueとfalseを返したときに、関数が使用可能であることを確認する必要があります。.
//カートのリンクをメニューに追加します
function wpex_add_menu_cart_item_to_menus($ items、$ args){
// 'wpex_main'がメニューの場所に変更されていることを確認します !!!!
if($ args-> theme_location === 'wpex_main'){
$ css_class = 'menu-item menu-item-type-cart menu-item-type-woocommerce-cart';
if(is_cart()){
$ css_class。= 'current-menu-item';
}
$ items。= '';
$ items。= wpex_menu_cart_item();
$ items。= '';
}
$ itemsを返します。
}
add_filter( 'wp_nav_menu_items'、 'wpex_add_menu_cart_item_to_menus'、10、2);
//関数はメインメニューカートリンクを返します
function wpex_menu_cart_item(){
$ output = '';
$ cart_count = WC()-> cart-> cart_contents_count;
$ css_class = 'wpex-menu-cart-total wpex-cart-total-'。 intval($ cart_count);
if($ cart_count){
$ url = WC()-> cart-> get_cart_url();
} そうしないと {
$ url = wc_get_page_permalink( 'shop');
}
$ html = $ cart_extra = WC()-> cart-> get_cart_total();
$ html = str_replace( 'amount'、 ''、$ html);
$ output。= '';
$ output。= '';
$ output。= wp_kses_post($ html);
$ output。= '';
$ outputを返します。
}
// AJAXでカートリンクを更新します
function wpex_main_menu_cart_link_fragments($ fragments){
$ fragments ['。wpex-menu-cart-total'] = wpex_menu_cart_item();
$ fragmentsを返します。
}
add_filter( 'add_to_cart_fragments'、 'wpex_main_menu_cart_link_fragments');
結論
WooCommerceはデフォルトですべてのテーマで動作しますが、プラグインの追加サポートを追加して、テーマにより適合するようにすることは非常に簡単です。私が実際にこの投稿を書いたのは、ニューヨークのワードプレスのブログとショップのテーマをコーディングしているため、これらの調整のほとんどがテーマに含まれています。または、テーマを購入してすべてがどのように行われたかを確認することもできます(wpex-new-york / inc / woocommerceのファイルを参照)–適切に追加する方法を学習するための簡単な方法かもしれませんすでにコード化されたテーマを見ることによるWooCommerceプラグインのカスタムサポート.
このリストに含まれると思われる他のスニペットはありますか、または新しいWooCommerce対応のテーマを開発するときに役立ちます?
07.06.2020
WordPressテーマをWooCommerceに対応させる方法
Jeffrey Wilson チュートリアル
だからあなたはあなたのテーマにショップを追加したいのです。 WooCommerceは素晴らしい選択です。技術的に話す すべて テーマはプラグインなので「WooCommerce互換」です。理論的には、どのプラグインもWordPressテーマ(正しくコーディングされている)で動作するはずです。.
テーマ開発者としては、WooCommerceの出力を微調整して、テーマに合わせたり、WooCommerceの設定ではすぐに利用できないオプション(ショップの列数の変更など)をエンドユーザーに提供したりすることもできます。以下に、テーマでWooCommerceの「より良い」サポートを提供したり、特定のデザインの変更を行ったりするために使用できる役立つスニペットをいくつか示します。.
重要:以下のスニペットの多くは、WooCommerceでのみ使用可能な関数を使用しています。したがって、これらのスニペットが配布用に作成されたテーマのfunctions.phpファイルの下部に単にダンプされていないことを確認してください。テーマを他の人と共有したり販売したりする場合は、WooCommerceプラグインがアクティブな場合にのみロードされる独自のファイルにスニペットを配置してください。.
Contents
WooCommerceが有効かどうかを確認する
私のテーマでは、WooCommerceがこのように有効になっているかどうかを確認するために使用できるカスタム定数を定義したいのですが、WooCommerceがアクティブな場合にのみファイルを含めたり、関数を実行したりできます(まだ有効になっていない場合は、上記の重要なメッセージを参照してください)。.
WooCommerceサポートの宣言
これは、WooCommerceサポートを「有効」にし、エンドユーザーにテーマに互換性がないことを通知するプラグインからの警告を防ぐ、テーマに追加する最初で最も重要なコードです.
WooCommerce CSSを削除します
個人的には、WooCommerceスタイルをオーバーライドして、サードパーティのWooCommerceプラグインで起こりうる問題を回避しています。ただし、すべてのWooCommerceスタイルを削除する場合は、非常に簡単です。.
次のスニペットは、すべてのWooCommerceスタイルを削除するためのものです。
このスニペットは、特定のCSSスタイルを条件付きで削除する例です。
WooCommerce製品ギャラリー、ズーム、ライトボックスを有効にする(v3.0以降)
WooCommerce 3.0では、彼らは新しい製品ギャラリー、ズーム、ライトボックスを導入しました。テーマで使用する場合は、「add_theme_support」でこれらをすべて有効にする必要があります.
ショップタイトルを削除
多くのテーマには、アーカイブのタイトルを表示する機能がすでにあるので、このコードは、WooCommerceから余分なタイトルを削除します。CSSを介して非表示にするよりも優れています。.
ショップのアーカイブタイトルを変更する
テーマがarchive_title()またはget_archive_title()関数を使用してアーカイブのタイトルを表示している場合、ショップのアーカイブタイトルではなく、フィルターを介して簡単に調整して、製品ページの名前を取得できます。.
ショップのページごとに表示される商品の数を変更する
ショップおよび製品アーカイブ(カテゴリーおよびタグ)のページごとに表示される製品の数を変更するために使用されます.
行ごとにショップに表示される列の数を変更する
WooCommerceがこのように機能する理由がわかりませんが、「loop_shop_columns」フィルターを変更するだけでなく、列を機能させるためにbodyタグに一意のクラスを追加する必要もあります。 Woo Shortcodesには、ショップページにはない正しいクラスのdivラッパーがありますが、そのため2つの関数が必要です.
次および前のページ区切り矢印を変更する
このスニペットを使用すると、ショップのページネーション矢印を微調整して、テーマの矢印と一致させることができます.
OnSaleバッジのテキストを変更する
異なる言語を使用しているサイトや、私があまり好きではない感嘆符を削除するのに特に役立ちます.
製品ギャラリーのサムネイル列を変更する
レイアウトに応じて、単一の製品ギャラリーのサムネイルの列数を変更することができます。この関数はそれを実行します.
表示される関連商品の数を変更する
単一の製品ページの関連製品に表示される製品の数を変更するために使用されます.
製品の関連セクションとアップセルセクションの行ごとの列数を変更する
ショップのように、単一の製品ページで関連製品とアップセル製品の列数を適切に変更したい場合は、列をフィルタリングし、それに応じてボディクラスも変更する必要があります。.
メニューに動的カートリンクとカート費用を追加する
このスニペットは、カート内のアイテムのコストを表示するWooCommerceカートアイテムをメニューに追加します。さらに、サイトでFont-Awesomeが有効になっている場合は、小さなショッピングバッグアイコンが表示されます. 重要:これらの関数は、AJAXに依存してコストを更新するため、is_admin()条件でラップしないでください。is_admin()がtrueとfalseを返したときに、関数が使用可能であることを確認する必要があります。.
結論
WooCommerceはデフォルトですべてのテーマで動作しますが、プラグインの追加サポートを追加して、テーマにより適合するようにすることは非常に簡単です。私が実際にこの投稿を書いたのは、ニューヨークのワードプレスのブログとショップのテーマをコーディングしているため、これらの調整のほとんどがテーマに含まれています。または、テーマを購入してすべてがどのように行われたかを確認することもできます(wpex-new-york / inc / woocommerceのファイルを参照)–適切に追加する方法を学習するための簡単な方法かもしれませんすでにコード化されたテーマを見ることによるWooCommerceプラグインのカスタムサポート.
このリストに含まれると思われる他のスニペットはありますか、または新しいWooCommerce対応のテーマを開発するときに役立ちます?