순풍 CSS+WordPress 테마 템플릿을 만드는 방법

몇 달 전, 내가 처음 사용Adam Wathan’s TailwindCSS을 시작했을 때, 나는 그것이 각종 프레임의 일부로서 설치하기 어렵다는 것을 발견했는데, 이것은 정말 나를 반감하게 했다.따라서 이 안내서를 함께 놓아서 효율적인 TailwindCSS+WordPress 개발 설정을 구축하는 방법을 보여 주기로 했습니다.
이 안내서에서 우리는 워드프레스에서 TailwindCSS를 사용하는 장단점, 내가 만든 템플릿을 신속하게 설정하는 방법, 그리고 Tailwind를 사용하는 공백 테마를 처음부터 만드는 방법에 대해 토론할 것이다.
만약 당신에게 어떤 문제나 건의가 있다면, 조금도 주저하지 않고 저에게 트위터를 보내주세요!나는 항상 내가 한 일에 대한 두 번째 의견과 projects I’m working on에 대한 피드백을 얻기를 갈망한다.
Jump to: Quick Setup

TailwindCSS와 WordPress를 결합하여 사용하는 이유

당신이 생각하는 최선의 실천에 따르면, 당신은 실용 프로그램 기반의 CSS 프레임워크를 워드프레스와 결합하여 사용하는 것이 좀 곤혹스럽다고 생각할 수도 있습니다. 우리는 HTML의 깨끗함과 가독성을 유지해야 하지 않습니까?
사실이 증명하듯이Tailwind는 약간의 수익을 제공했고, 내가 이전에 설정한 워드프레스+Elementor+Solid 테마는 나에게 많은 문제를 주었다.우리들은 그 중의 몇 가지 방면을 더욱 상세하게 토론합시다.

테마 개발에 대한 TailwindCSS의 4가지 장점

다른 프레임워크에 비해 TailwindCSS를 사용하는 것은 네 가지 두드러진 장점이 있다고 생각합니다. 특히 테마 개발에 있어서.자존심 있는 디자이너라면 누구나 최소한 이해해야 할 장점이다. 동의하지 않는다면.

테마 기능

만약 네가 본문을 읽고 있다면, 주제는 너에게 매우 중요하다.이것은 우리가 전체 프로젝트에서 유니버설 스타일을 정의할 수 있도록 하는 방법으로 브랜드 표지와 시각적 차원 구조가 제 역할을 발휘하도록 허용한다.Tailwind tailwind.config.js 파일은 글꼴, 색상, 유틸리티 등의 매개 변수를 설정하고 기본 Tailwind 스타일을 덮어쓸 수 있도록 합니다.
이렇게 하면 프로젝트를 새로운 영역으로 확장하려면(예를 들어 같은 회사 이름으로 제품을 발표하는 것), 우리는 완전히 같은 기본 CSS 설정을 사용하여 tailwind.config.js 파일을 간단하게 새 프로젝트로 복사할 수 있다.

성능 최적화

TailwindCSS(버전 1.8부터)의 압축 용량이 200kb 미만입니다.이것은 매우 작지만, 만약 우리가 이 사이트의 스타일시트를 사용한다면, 그것은 15kb도 안 된다.
이것은 Tailwind에서 실제 사용하는 CSS 클래스를 출력 파일에 혼합하는 모듈인 PurgeCSS를 사용한 덕분입니다.사용하지 않음max-w-lg?출력 스타일에는 나타나지 않습니다.css.

가독성

내가 가장 좋아하는 TailwindCSS 부분 중 하나는 프레임워크의 어휘를 익히면 가독성이 어떻다는 것이다.워드프레스 주제를 깊이 있게 이해하고 스타일, 논리, 표기가 모두 가지런하게 놓여 있는 것을 볼 수 있는 것이 주요한 장점이다.
또한 추가된 순풍 CSS 클래스를 의 조건 논리와 결합할 때.php 파일, 테마에서 멋진 상태나 논리적 응답 구성 요소를 구축합니다.

TailwindCSS 커뮤니티

대형 인기 성장 프레임워크로서 Tailwind는 실시간 사이트, 예시와 강좌, 심지어 free component libraries 까지 사용할 수 있는 자원이 많습니다.이것은 신속하게 유행하는 프레임워크를 사용하는 가장 큰 장점 중 하나이다. 왜냐하면 이것은 당신이 문제에 부딪혔을 때 다른 사람들이 해결 방안을 찾았을 수도 있다는 것을 의미하기 때문이다.

빠른 시작: HTML5Blank+TailwindCSS 템플릿

그래서 모든 소개를 버리고 제가 만든 템플릿부터 시작하겠습니다.이 강좌에서 저는 당신에게 처음부터 주제를 설정하고 뒤에서 순풍을 설정하는 것을 가르쳐 드리겠습니다. 그러나 지금은 간단한 설정 옵션만 탐색해 보겠습니다.
너는 할 수 있다.

템플릿 다운로드 테마 설치 및 설정

먼저 을 이니시에이터로 사용합니다.이것은 가장 좋은 공백 주제이기 때문에 주제 개발을 배울 수 있다.

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

다음은 기본 패키지 관리자를 사용하여 의존 항목을 설치해야 합니다

npm install --save-dev
or
yarn

이제 이 테마를 사용할 수 있습니다!실행npm run dev 또는 yarn dev 통일되지 않은 자산을 컴파일하거나, watch 저장할 때마다 테마를 다시 컴파일하거나, prod 생산 구축을 실행합니다.
CSS (@apply 및 비내연 스타일) 및 assets/style.css 를 편집하여 Javascript를 편집할 수 있습니다.

내가 발표한 리셋 프로토콜 복제 TailwindCSS를 사용하여 WordPress 테마 만들기

빠른 설치 옵션이 있으니, HTML5Blank를 사용하지 않으려면 공백 WordPress 테마에서 설치를 실행합시다.

HTML5 공백 테마 설정

우선, assets/main.js 로 이동하여 wp-content/themes 를 실행합시다. ("example"는 테마 이름입니다.)워드프레스가 이 폴더를 테마로 식별하기 위해서는 항목을 추가해야 합니다.
폴더를 열고 실행합니다mkdir example.이제 두 파일이 나타나고 WordPress 관리 대시보드의 외관 > 테마에서 공백 테마를 사용할 수 있습니다.우리도 운행한다touch style.css index.php. 왜냐하면 우리는 잠시 후에 이것들이 필요하기 때문이다.

Laravel Mix 설치

다음은 Laravel mix를 설치해야 합니다.이것은 내가 발견한 가장 깨끗한 웹 패키지 입니다. 이것은 워드프레스 테마 개발에 매우 효과적입니다. 왜냐하면 많은 곤혹스러운 문법이 삭제되었기 때문입니다.
우선

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

다음, 실행

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

이제 touch header.php footer.php 디렉터리와 루트 디렉터리의 node_modules/ 및 package.json 파일을 보셔야 합니다.
Laravel Mix 프로필을 보면 간단한 설정이 되어 있는 것을 볼 수 있습니다.이것은 webpack.mix.js라는 폴더에서 자산을 가져와 src/라는 폴더로 컴파일합니다.믹스 설정을 완성하기 위해서, 우리는 믹스가 찾고 있는 원본 자산을 만들어야 한다.
달아나다

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

(주의: SASS 대신 CSS를 사용합니다. Tailwind는 사전 프로세서가 필요하지 않기 때문입니다.)
마지막으로 를 복사하여 dist/ 에 붙여넣습니다.

"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"
}

TailwindCSS 설치

Tailwind를 설치하기 위해 먼저 패키지 관리자에 추가합니다.

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

그런 다음 TailwindCSS 명령을 package.json 파일에 추가합니다.

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

마지막으로 우리는 자산을 정확하게 구축하기 위해 갱신src/app.css이 필요하다.대부분의 코드 세션과 마찬가지로, TailwindCSS 설치 페이지에서 파일 내용을 다음과 같이 대체하는 것을 다시 한 번 알 수 있습니다.

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

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

webpack.mix.js 를 사용하여 공백 프로필을 생성합니다. (이 파일이 필요할 것입니다.) 시작할 수 있습니다!

권장되는 Laravel 혼합 구축 스크립트 Laravel Mix를 사용하여 자산 구축

구축을 테스트하려면 npx tailwindcss init 또는 npm run dev 을 실행하십시오.이 명령을 실행할 때, 패키지 관리자로부터 확인 정보를 볼 수 있을 것입니다.

색인에 기본적인 HTML을 추가해 보겠습니다.php에서 Tailwind가 제대로 작동하는지 확인합니다.

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

인라인 스타일 대신 yarn dev 파일을 사용하고 있다면, 시계 스크립트를 실행할 수 있습니다.
만약 당신이 정확하게 따랐다면, H1의 스타일은 즉시 적용되어서는 안 됩니다.우선 src/app.css 명령을 제목에 추가해야 합니다.이것은 테마에 스타일시트와 같은 인용을 추가합니다.
이를 위해 우선 제목에 간단한 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>

여기서, 우리는 마지막 두 줄을 잘라서 페이지 끝에 붙일 수 있다.php 파일.다음은 색인에 눈썹과 꼬리를 포함합시다.php 파일.

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

마지막으로 스타일시트를 작성wp_head()하고 다음 내용을 추가하여 줄을 서야 합니다.

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

현재, 당신이 사이트를 새로 고칠 때, 당신의 내연 스타일이 나타나는 것을 볼 수 있습니다.

TailwindCSS 파일 크기 제어

현재, 우리가 스타일을 컴파일할 때, 우리의 출력 CSS는 2.28mb에 달한다는 것을 알 수 있습니다.기본적으로 Tailwind는 출력 파일에 가능한 모든 유틸리티를 포함하기 때문입니다.
다행히도, 앞에서 언급한 바와 같이, Tailwind는 PurgeCSS를 사용하여 출력에서 사용하지 않은 클래스를 쉽게 삭제합니다.우리는 functions.php 파일의 삭제 부분만 업데이트할 수 있습니다.

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

현재, 우리가 실행할 때, 우리의 출력은 훨씬 작아 보인다!이러한 제거는 생산 구축을 실행할 때만 발생합니다. 이렇게 하면 컴퓨터가 개발 과정에서 save를 클릭할 때마다 시간을 초과하여 자산을 제거하지 않습니다.

폐막사

축하합니다. TailwindCSS를 실행하는 성능 최적화된 워드프레스 테마가 생겼습니다!이 과정을 간소화할 수 있는 주석이나 조언이 있거나, Tailwind와 WordPress가 만든 사이트를 공유하고 싶으면 연락하십시오.