WoodMart子テーマのカスタムスタイル完全ガイド

WoodMartは強力な WooCommerce 豊富なデザインオプションが用意されているテーマですが、あなたのブランドのスタイルに合ったサイトにするための実践的な微調整は、やはり子テーマ次第です。この記事では、WoodMartのサブテーマこのウェブサイトは "カスタム "の趣がある。

サブトピックとは何か？

サブテーマは以下の通り。ワードプレス WoodMartは、オリジナルのテーマコードを動かさずに、カスタムスタイルや機能を追加できる仕組みです。また、WoodMartの公式から子テーマのテンプレートが提供されているので、それを直接利用することで手間を省くことができます。

ステップ1：子テーマをインストールして有効にする

サブテーマのファイルは、公式のウッドマートやテーマパックの中にあります。 ウッドマート・チャイルド.zip 書類.
WordPressバックエンド > 外観 > テーマ > テーマのインストール > アップロード ウッドマート・チャイルド.zip.

インストールが完了したら "Enable "をクリックする。

サイトが子テーマで動いている今、変身を始めることができる。

ステップ2：カスタムスタイルの追加

フォント、色、間隔、その他のスタイルを変更したい場合は、サブテーマ・ディレクトリの スタイル.css ドキュメンテーション

例として、商品タイトルを赤と太字に変更するとします：

.product-grid-item .title { {.product-grid-item .title
  color: #d60000；
  color: #d60000; font-weight: bold；
}

保存してページを更新すると、結果が表示されます。

SCSSに慣れている方は、WoodMartが提供するSCSSコンパイルの仕組みを使って、スタイル構造をもう少し明確に管理することもできます。

ステップ3：テーマの構造を変更する（オプション）

に商品ページを追加するなど、レイアウトを変更する必要がある場合は、次のようにしてください。カスタムラベルカラムを使用すると、子テーマディレクトリにメインテーマと同じパスの新しいテンプレートファイルを作成できます。例

woodmart-child/woocommerce/single-product/tabs/tabs.php

WordPressはこのバージョンの子テーマを最初に読み込みます。

ステップ4：カスタム関数の追加

スタイルに加えて functions.php 新しい機能を追加したり、既存の機能を変更する。

例えば、各記事の一番下に著者の傍線を加える：

add_filter('the_content', function($content) {)
  if (is_single()) { .
    $content .= '<p style="font-style: italic;">著者：サイトエディター</p>';
  }
  return $content.
}).

子テーマは "コンソール "のようなものなので、アップデートを気にすることなく、自由に拡張できる。

ステップ5：デバッグとキャッシュクリーニング

スタイルや機能をデバッグした後は、キャッシュをクリアすることをお忘れなく。 WPロケットLiteSpeed Cacheなどのプラグインのサイト。そうしないと、アップデートの効果が表示されないことがあります。

また、ブラウザの開発者ツールを開き（F12キーを押す）、CSSが正常に読み込まれているか、競合がないかを確認することをお勧めします。

概要

ウッドマート子テーマの仕組みはとてもユーザーフレンドリーなので、小さな変更でも大きな模様替えでも、あなたが十分に手を動かせば、テンプレートを完全に自分のものにすることができます。もしあなたがカスケーディングスタイルシート PHPの基本的な知識があれば、そのプロセスは「レゴ」のようなもので、自分のスタイルのウェブサイトを組み立てるのはもはや難しいことではない。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み