既存および既存のWordPressテーマにTai​​lwind CSSを追加します

WordPressのWebサイトを作成し始めてから、約15年で、私がどれだけ生産的であるか、フロントエンド開発でどれだけ楽しんだかに大きな影響を与えていません（そして大きなギャップはありませんでした）。

Tailwindを使用し始めたとき、WordPressでTailwindを使用する方法を説明する最新のファーストパーティリポジトリがGitHubにありました。リポジトリは2019年から更新されていません。しかし、更新の欠如は、WordPress開発者の追い風の実用性を示していません。 WordPressは両方のプラットフォームの最良の部分であり、より少ない時間で最新のWebサイトを構築することで、Tailwindをその最高の状態で作業させることにより。

この記事の最小設定の例は、元の設定リポジトリを更新するように設計されており、TailwindとWordPressの最新バージョンと互換性があるように変更されています。このアプローチは、派生したデフォルトのテーマから完全にカスタムのテーマまで、さまざまなWordPressテーマに拡張できます。

WordPress開発者がTailwindに従う必要がある理由

設定について議論する前に、Tailwindの仕組みとWordPress環境での意味を確認する価値があります。

Tailwindを使用すると、既存のユーティリティクラスを使用してHTML要素をスタイリングでき、WebサイトのCSSを自分で作成する必要性を排除できます。 （ hidden for display: hiddenまたはtext-transform: uppercaseのuppercase ：大文字のようなクラスについて考えてみましょう。これらのプロパティにより、開発者をフレームワーク自体の美的組み込みに押し付けることなく、高度に最適化されたWebサイトが可能になります。

さらに、他の多くのCSSフレームワークとは異なり、既存のCDNからテールワインドCSSをロードするための「標準」ビルドを実行できません。生成されたCSSファイルは、含まれているすべてのユーティリティクラスのために大きすぎます。 Tailwindは「Play CDN」を提供しますが、Tailwindのパフォーマンスの利点を大幅に削減するため、生産環境では使用されません。 （ただし、迅速なプロトタイピングを行う場合や、実際にインストールしたり、ビルドプロセスを設定したりせずにTailwindを試してみたい場合は、本当に便利です。）

これには、Tailwindのビルドプロセスを使用して、プロジェクトに固有のフレームワークユーティリティクラスのサブセットを作成する必要があります。Tailwindがどのユーティリティクラスが含まれているかを決定する方法と、このプロセスがWordPressエディターでのユーティリティクラスの使用にどのように影響するかを理解することが非常に重要です。

最後に、TailwindのAggressive Sprelight（そのCSSリセットバージョン）は、WordPressの一部の部分がデフォルト設定にフレームワークに正確に適合しないことを意味します。

まず、Tailwindのどの側面がWordPressでうまく機能するかを見てみましょう。

TailwindとWordPressの側面が一緒に動作します

Tailwindが多くのカスタマイズなしでうまく実行されるには、特定のページのメインCSSとして機能する必要があります。

たとえば、WordPressプラグインを構築しており、フロントエンドCSSを含める必要がある場合、TailwindのPreflightはアクティブなテーマと直接競合します。同様に、WordPress管理エリア（エディターの外部）をスタイリングする必要がある場合、管理エリアのスタイルが上書きされる場合があります。

これらの2つの問題を解決するには、いくつかの方法があります。FREATLIGHTを無効にして、すべてのユーティリティクラスをプレフィックスするか、POSTSを使用してすべてのセレクターの名前空間を追加できます。いずれにせよ、構成とワークフローはより複雑になります。

ただし、テーマを作成している場合は、Tailwindを直接使用できます。クラシックエディターとブロックエディターを使用してカスタムテーマを作成しましたが、サイト全体の編集が成熟するにつれて、Tailwindでうまく機能する多くのサイト全体の編集機能があると思います。

彼女のブログ投稿では、「Gutenbergサイト全体の編集者が完全である必要はありません」とTammie Listerは、サイト全体の編集者を、部分的または完全に採用できるスタンドアロン機能セットとして説明しています。サイト全体の編集のためのグローバルスタイルの機能は、Tailwindで動作する可能性は低いですが、他の多くの機能は可能性があります。

だから：あなたはテーマを構築し、Tailwindがインストールされ、構成されており、笑顔でユーティリティクラスを追加しています。しかし、これらのユーティリティクラスはWordPressエディターで機能しますか？

計画を通して、あなたはできます！ユーティリティクラスは、使用するユーティリティクラスを事前に決定する限り、エディターで利用できます。エディターを開いて、すべてのTailwindユーティリティクラスを使用することはできません。テールウィンドは、トピックのみが使用するユーティリティクラスに組み込みの制限があるため、コードの他の場所に存在しなくても、Tailwindを事前に知らせる必要があります。

これを行うには、Tailwind構成ファイルにセーフリストを作成できます。

編集者のクラスは、事前に私のために働く障壁ではありませんでしたが、これはTailwindとWordPressの関係について私が尋ねられた中で最も尋ねられています。

最小限のテールワインドCSS統合を備えた最小のWordPressテーマ

基本的なWordPressテーマからできる限り始めましょう。必要なファイルは2つしかありません。

• style.css
• index.php

Tailwindを使用してStyle.cssを生成します。 index.phpについては、シンプルなものから始めましょう：

 

<main id="site-content" role="main">

    

</main>

<p> WordPressテーマがすべきことはたくさんありますが、上記のコードはそれを行いません - ページネーション、サムネイル後、キューイングのスタイルシートの代わりにリンク要素を使用するなど - しかし、それはTailwindが予想どおりに機能するかどうかを投稿してテストするのに十分です。</p><p> Tailwindに関しては、3つのファイルが必要です。</p>

• package.json
• Tailwind.config.js
• Tailwindの入力ファイル

先に進む前にnpmが必要です。あなたがそれを使用することに慣れていない場合、私たちはNPMを始めるためのガイドを持っています。これは始めるのに最適な場所です！

Package.jsonファイルはまだないため、端末で次のコマンドを実行することにより、index.phpと同じフォルダーに空のjsonファイルを作成します。

 echo {}> ./package.json

このファイルを使用すると、Tailwindをインストールできます。

 NPMインストールTailwindcss  -  save-dev

Tailwind構成ファイルを生成します。

 NPX Tailwindcss init

Tailwind.config.jsファイルでは、PHPファイルでユーティリティクラスを検索するようにTailwindに伝える必要があります。

 module.exports = {
  コンテンツ：["./**/*.php"]、
  テーマ： {
    伸ばす： {}、
  }、
  プラグイン：[]、
}

テーマが作曲家を使用している場合、ベンダーディレクトリを無視する必要があります。これは、コンテンツ配列に「！**/Vendor/**」などを追加することで実行できます。ただし、すべてのPHPファイルがテーマの一部である場合、上記は機能します！

入力ファイルに名前を付けることができます。 Tailwind.cssというファイルを作成し、次のファイルを追加しましょう。

 /*！
テーマ名：WordPress Tailwind
*/

@tailwindベース;
@tailwindコンポーネント;
@tailwindユーティリティ;

WordPressがテーマを認識するには、上部の注釈が必要です。

それでおしまい！これで、次のコマンドを実行できます。

 npx tailwindcss -i ./tailwind.css -o ./style.css -watch

これにより、Tailwind CLIがTailwind.cssを入力ファイルとして使用してStyle.cssファイルを生成するように指示します。 -Watchフラグは、プロジェクトリポジトリのPHPファイルからユーティリティクラスを追加または削除するときに、style.cssファイルを継続的に再構築します。

それは追い風駆動のWordPressのテーマと同じくらい簡単ですが、それがあなたが生産環境に展開したいものであることはまずありません。それでは、生産対応のトピックへのいくつかの経路を議論しましょう。

既存のテーマにtailwindcssを追加します

既存のテーマにTai​​lwind CSSを追加したい理由は2つあります。

• Tailwindコンポーネントをスタイルのテーマに追加することを実験します
• テーマをネイティブCSSからTailwindに変換します

TailwindをTwenty21にインストールして、これを実証します（WordPressのデフォルトテーマ）。 （Twenty22をしないのはなぜですか？最新のWordPressデフォルトテーマは、フルサイトの編集を表示するように設計されており、Tailwind統合には適していません。）

まず、テーマが開発環境にインストールされていない場合は、ダウンロードしてインストールする必要があります。その後、次の手順に従う必要があります。

• 端子のテーマフォルダーに移動します。
• Twenty21Oneにはすでに独自のPackage.jsonファイルがあるため、新しいファイルを作成せずにTailwindをインストールできます。

 NPMインストールTailwindcss  -  save-dev

• tailwind.config.jsonファイルを追加します：

 NPX Tailwindcss init

• Tailwind.config.jsonファイルを前のセクションと同じファイルに更新します。
• Twenty21の既存のstyle.cssファイルをtailwind.cssにコピーします。

次に、TailWind.cssファイルに3つの@TailWindディレクティブを追加する必要があります。次のように、tailwind.cssファイルを構築することをお勧めします。

 /* WordPressテーマファイルヘッダーはこちらです。 */

@tailwindベース;

/*既存のすべてのCSSはここにあります。 */

@tailwindコンポーネント;
@tailwindユーティリティ;

トピックタイトルの直後に草の根を配置すると、WordPressがトピックを検出し続けることが保証され、同時にTailwind CSSリセットができるだけ早くファイルに表示されるようにします。

既存のすべてのCSSはベースレイヤーの後ろにあり、これらのスタイルがリセットよりも優先されることを確認します。

最後に、コンポーネント層とユーティリティ層がすぐに守られているため、同じ特異性を持つCSS宣言よりも優先される可能性があります。

さて、最小限のトピックと同様に、次のコマンドを実行します。

 npx tailwindcss -i ./tailwind.css -o ./style.css -watch

新しいstyle.cssファイルがPHPファイルを変更するたびに生成されると、変更されたテーマと元のテーマの間の微妙なレンダリングの違いを確認する必要があります。これらは、TailwindのCSSリセットによって引き起こされます。これは、一部のテーマが予想されるよりも少し徹底的です。 21対1の場合、私が行った唯一の変更は、テキストデカレーションラインを追加することです。

レンダリングの問題を解決した後、Tailwind UI（Tailwindのファーストパーティコンポーネントライブラリ）からヘッダーバナーコンポーネントを追加しましょう。 Tailwind UI Webサイトからコードをコピーし、header.phpの「コンテンツジャンプ」リンクの後に貼り付けます：

とても良い！現在、ユーティリティクラスを使用して、トピックに組み込まれている既存の高等特異性クラスを上書きするため、Tailwind.config.jsファイルに行を追加します。

 module.exports = {
  重要：本当、
  コンテンツ：["./**/*.php"]、
  テーマ： {
    伸ばす： {}、
  }、
  プラグイン：[]、
}

これにより、すべてのTailwind CSSユーティリティが重要であるため、既存のクラスをより高い特異性でオーバーライドできるようにします。 （私は生産環境でTrueに重要になることはありませんが、ネイティブCSSからTailwindにウェブサイトを変換している場合、ほぼ確実に行います。）

クイックアンダーラインクラスをより多くのリンクに学び、BG透明とBorder-0をクローズボタンに追加することにより、私たちは完了です。

Tailwind UIのコンポーネントがWordPressのデフォルトテーマに融合するのを見るのは少し厳しいように見えますが、これはTailwindコンポーネントとその固有の移植性の素晴らしいデモンストレーションです。

ゼロから始めます

Tailwindを使用して新しいトピックを作成する場合、プロセスは上記の最小例と非常に似ています。コマンドラインからTailwind CLIを直接実行する代わりに、開発と生産の構築と監視のために、個別のNPMスクリプトを作成することをお勧めします。また、WordPressエディター用の個別のビルドを作成することもできます。

上記の最小の例を超えた出発点を探しているが、それ自体が独善的なスタイルを持っている範囲を超えていない場合、私はアンダースコア（_s）に触発されたTailwind -Optimized WordPressテーマジェネレーターを作成しました。 _twという名前で、これは私が最初にWordPressでTailwindを使用したときに望んでいるクイックスタートです。これは、すべてのクライアントプロジェクトの最初のステップです。

典型的なWordPressテーマの構造からさらに逸脱し、Laravel Bladeテンプレートをツールキットに追加することをいとわない場合、Sageは素晴らしい選択肢であり、Tailwindのセットアップガイドがあり、開始を支援します。

開始方法に関係なく、Tailwind CSSに適応し、ユーティリティクラスを使用してHTMLドキュメントをスタイルするために時間をかけることをお勧めします。

以上が既存および既存のWordPressテーマにTai​​lwind CSSを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。