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

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

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

サブトピックとは何か?

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

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

  • サブテーマのファイルは、公式のウッドマートやテーマパックの中にあります。 ウッドマート?チャイルド.zip 書(shū)類(lèi).
  • WordPressバックエンド > 外観 > テーマ > テーマのインストール > アップロード ウッドマート?チャイルド.zip.
畫(huà)像 [2] - WoodMart子テーマのカスタムスタイル完全ガイド
  • インストールが完了したら "Enable "をクリックする。
畫(huà)像 [3] - WoodMart子テーマのカスタムスタイル完全ガイド

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

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

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

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

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

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

畫(huà)像 [4] - WoodMart子テーマのカスタムスタイル完全ガイド

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

ステップ3:テーマの構(gòu)造を変更する(オプション)

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

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

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

ステップ4:カスタム関數(shù)の追加

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

例えば、各記事の一番下に著者の傍線(xiàn)を加える:

add_filter('the_content', function($content) {)
  if (is_single()) { .
    $content .= '<p style="font-style: italic;">著者:サイトエディター</p>';
  }
  return $content.
}).
畫(huà)像 [5] - WoodMart子テーマのカスタムスタイル完全ガイド

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

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

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

また、ブラウザの開(kāi)発者ツールを開(kāi)き(F12キーを押す)、CSSが正常に読み込まれているか、競(jìng)合がないかを確認(rèn)することをお?jiǎng)幛幛筏蓼埂?/p>

概要

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


お問(wèn)い合わせ
チュートリアルが読めない?無(wú)料でお答えします!個(gè)人サイト、中小企業(yè)サイトのための無(wú)料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話(huà):020-2206-9892
QQ咨詢(xún):1025174874
Eメール:info@361sale.com
勤務(wù)時(shí)間: 月~金、9:30~18:30、祝日休み
? 複製に関する聲明
この記事はリトル?リンが執(zhí)筆した。
終わり
好きなら応援してください。
クドス1385 分かち合う
おすすめ
解説 ソファ購(gòu)入

コメントを投稿するにはログインしてください

    コメントなし