のCSS + WordPressテーマを作成する

数ヶ月前、最初に始まったときAdam Wathan’s TailwindCSS , いろいろなフレームワークの一部としてインストールするのがどれくらい難しいかによって、私は本当に延期されました.このように、私は効率的なTailWindCSS + WordPress開発セットアップを足場にする方法を示すために、このガイドを一緒に置くことに決めました.
このガイドでは、私たちの長所と短所をWordPressを使用して、どのように迅速に私が作成したテンプレートを設定するには、どのように自分で何かをインストールする必要はありませんし、どのようにそろそろを使用してゼロから空白のテーマを作成するために行く.
任意の質問や勧告がある場合は、さえずる私を躊躇しないでください!私は常に私がしていることについての2番目の意見を得るために熱心であり、フィードバックをprojects I’m working on .
Jump to: Quick Setup

なぜWordPressでTailWindCSSを使用する

あなたがベストプラクティスとして考えていることに応じて、WordPressを使用してユーティリティベースのCSSフレームワークを使用して、少し混乱していると思うかもしれません-私たちは、HTMLを清潔で読みやすいようにするつもりではありませんか?
さて、WordPress + Elementor +ソリッドテーマの私の以前のセットアップが私に問題を与えていたところで、Tarwindは若干の利益を提供するとわかります.より詳細にこれらの地域のいくつかを調査しましょう.

テーマ開発のためのTarwindCSSの4つの利点

TailWindCSSを使用して、特にテーマ開発のために、他のフレームワークと比較して4つの目立つ利点があります.これらのすべての長所は、任意の自己尊重デザイナーは、少なくとも理解してください、同意しない場合.

能力

あなたがこれを読んでいるならば、テーマは重要です.それは我々が全体のプロジェクト全体の共通のスタイルを定義することができます実践、ブランドのアイデンティティと視覚的な階層を可能にするように輝きを可能にする.テイウインドtailwind.config.js ファイルは、フォント、色、ユーティリティなどのパラメータを設定することができます.
このように、我々が我々のプロジェクトを新しい領域(例えば、同じ会社名の下で製品を起動する)に拡大したいならば、我々は単にtailwind.config.js 正確に同じベースCSS設定を使用して、新しいプロジェクトにファイルします.

性能最適化

TailWindCSS (バージョン1.8以降)は200 KBのgzipで動作します.これは小さいです、しかし、我々がこのウェブサイトのためにスタイルシートをとるならば、それはちょうど15 Kb未満です.
これは、あなたが実際に使用したCSSクラスを出力ファイルにミックスするモジュールです.使わなかったmax-w-lg ? 出力スタイルには存在しません.CSS

読みやすさ

TailWindCSSの私のお気に入りの部分の1つは、フレームワークの字句でグリップを取得すると、それがどのように読みやすいです.ワードプレスのテーマにディップすることができるとスタイル、ロジックを参照してマークアップを一緒にきちんと一緒に配置される主要なプロです.
さらに、あなたがTarwind CSSクラスの追加を条件付きロジックで結合するとき.PHPファイルは、あなたの方法でいくつかの本当にクールな状態またはロジック応答コンポーネントをあなたのテーマを構築する方法です.

TailWindCSSコミュニティ

大規模で人気の高い成長のフレームワークであるため、そこには多くのリソースがそこから- Tarwindの-ライブウェブサイトから、例やチュートリアル、さらにはfree component libraries あなたのために使用する.これは急速に人気が高まっているフレームワークを使用する最大の利点の一つです.

クイックスタート：HTML 5ブランク+ TarwindCSSテンプレート

それで、私が作成したテンプレートから始めましょう.私はあなたにこのチュートリアルでTowwindでさらにゼロからテーマを設定するようにお教えしますが、今のところ簡単なセットアップオプションを探索しましょう.
あなたはdownload the template here .

テーマインストールとセットアップ

最初にclone the repo I published スターターとして.それは基づいているHTML5Blank これはテーマの開発を学ぶために使用できる最高の空白のテーマの一つです.

git clone https://github.com/knightspore/wordpress-tailwind.git

次に、パッケージマネージャを使用して依存関係をインストールする必要があります

npm install --save-dev
or
yarn

今すぐあなたのテーマを使用して開始する準備が整いました!ランnpm run dev or yarn dev あなたの資産をunminifiedにコンパイルするにはwatch 保存するたびにテーマを再コンパイルするにはprod ビルドを実行するには.
編集できますassets/style.css CSSを編集するにはassets/main.js JavaScriptを編集するには

WordPressテーマを作成する

簡単なセットアップのオプションを持っているので、HTML 5 blankを使用したくない場合は、空白のWordPressテーマのインストールを実行しましょう.

テーマの設定

まず始めましょうwp-content/themes ランmkdir example (ここで'例は、あなたのテーマ名です).WordPressがテーマとしてこのフォルダを認識するためには、いくつかの項目を追加する必要があります.
フォルダを開きましょうtouch style.css index.php . これで、これらの2つのファイルが表示され、WordPress Adminのダッシュボードの外観のテーマの空白のテーマを使用することができます.走りましょうtouch header.php footer.php 我々が後でこれらを必要とするので.

ララベルミックスのインストール

次にララベルミックスをインストールする必要があります.これは私が見つけたWebpackのための最もきれいなラッパーです、そして、それは混乱している構文の多くとしてWordPressテーマ開発のために本当にうまく機能します.
ファーストラン

npm install laravel-mix cross-env --save-dev 
or 
yarn add laravel-mix cross-env

次は走る

cp node_modules/laravel-mix/setup/webpack.mix.js ./

あなたは今見るnode_modules/ ディレクトリと同様にpackage.json and webpack.mix.js ルートディレクトリのファイル.
ララベルミックス設定ファイルの中を見ると、簡単なセットアップがscaffoldedされています.と呼ばれるフォルダから資産を取っているsrc/ そしてそれらをフォルダにコンパイルするdist/ . ミックスの設定を完了するには、ミックスが探しているソース資産を作成する必要があります.
ラン

mkdir src; touch src/app.js src/app.css

(注意: Tailwindがプリプロセッサを必要としないため、ここではSSSの代わりにCSSを使用しています)
最後に、コピーと貼り付けrecommended Laravel Mix Build Scripts into package.json

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

インストール

Tailwindをインストールするには、パッケージマネージャで追加しましょう

yarn add tailwindcss
or
npm install tailwindcss --save-dev

次に、TailWindCSSディレクティブをsrc/app.css ファイル.

@tailwind base;
@tailwind components;
@tailwind utilities;

最後に、我々は更新する必要がありますwebpack.mix.js 資産を正しく構築する.これらのコードスニペットのほとんどと同様に、TailWindCSSのインストールページがもう一度カバーされています.

let mix = require('laravel-mix');

mix.js('src/app.js', 'js/app.js')
    .postCss('src/app.css', 'style.css', [
        require('tailwindcss'),
        require('autoprefixer'),
      ]);

空白の設定ファイルを生成するnpx tailwindcss init (このファイルが後で必要になるでしょう)そして、私たちは行く準備ができています!

ララヴァミックスを使用して資産を構築する

テストを実行するにはnpm run dev or yarn dev . このコマンドを実行すると、パッケージマネージャーから確認が表示されます.

我々のインデックスに若干の基本的なHTMLを加えてみましょう.Tarwindが適切に動作しているかどうかを調べるPHP.

<h1 class=”text-xl text-red-500”>Hello World</H1>

あなたがあなたの仕事をしているならば、あなたはこの時点であなたの腕時計スクリプトを走らせることができますsrc/app.css インラインスタイルの代わりにファイル.
正しくフォローした場合、H 1のスタイルはすぐに動作しないはずです.我々は、最初に加える必要がありますwp_head() ヘッダへのディレクティブ.これは、我々のスタイルのような参照を我々のテーマに加えます.
これを行うには、まず最初に我々のヘッダーに簡単なHTMLセットアップを生成しましょう.PHPとヘッダディレクティブを追加します.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <?php wp_head(); ?>
</head>
<body>

</body>
</html>

ここから、私たちは最後の2つの線を切って、我々のフッターにそれらをペーストすることができます.PHPファイル.次に、我々のインデックスに我々のヘッダーとフッターを含めましょう.PHPファイル.

<?php get_header(); ?>
<h1 class="text-xl text-center text-red-500">Hello World</h1>
<?php get_footer(); ?>

そして最後に、作成することによってスタイルシートをenqueueする必要がありますfunctions.php と以下を追加する

<?php
wp_enqueue_style('style', get_stylesheet_uri());
?>

現在、あなたのサイトをリフレッシュするとき、あなたはインラインスタイルを示しているのを見るべきです.

ファイルサイズの制御

さて、あなたが私たちのスタイルをコンパイルしたとき、私たちの出力CSSは、わずかに2.28 MBであることに気づいたかもしれません.これは、デフォルトでは、tailwindに出力ファイルのすべてのユーティリティが含まれているためです.
幸いにも、以前に述べたように、TarwindはPurgecssを使って、出力から未使用のクラスを簡単に削除します.我々は、ちょうど我々のパージ部を更新する必要がありますtailwind.config.js ファイル.

purge: [
    './**/*.php',
]

現在、我々が走るときyarn prod , 我々の出力ははるかに小さく見える!あなたが開発中に保存を打つたびに、あなたのコンピュータが残業時間に資産をパージするために働いていないように、このパージは起こるだけです.

クロージングノート

おめでとう、あなたは今、WordPressテーマをToodWindowを実行している働いて、パフォーマンスを最適化しました!あなたがこのプロセスを簡単にするために任意のメモや提案を持っている場合、またはタッチしてください.