약 15 년 만에 WordPress 웹 사이트를 만들기 시작한 이래로, 내가 얼마나 생산적이었고, 프론트 엔드 개발에서 얼마나 즐거웠는지에 더 큰 영향을 미치지 않았습니다.
Tailwind를 사용하기 시작했을 때 Github에는 WordPress에서 Tailwind를 사용하는 방법을 설명하는 최신 퍼스트 파티 저장소가있었습니다. 이 저장소는 2019 년 이후 업데이트되지 않았습니다. 그러나 업데이트 부족은 WordPress 개발자를위한 Tailwind의 실용성을 설명하지 않습니다. Tailwind가 최고로 작동하는 반면 여전히 WordPress는 두 플랫폼의 가장 중요한 부분이며 최신 웹 사이트를 더 적은 시간 안에 구축합니다.
이 기사의 최소 설정 예제는 원래 설정 저장소를 업데이트하도록 설계되었으며 최신 버전의 Tailwind 및 WordPress와 호환되도록 수정되었습니다. 이 접근법은 파생 된 기본 테마에서 완전히 사용자 정의 테마에 이르기까지 다양한 WordPress 테마로 확장 될 수 있습니다.
설정에 대해 논의하기 전에 Tailwind의 작동 방식과 WordPress 환경에서 의미하는 바를 검토 할 가치가 있습니다.
Tailwind를 사용하면 기존 유틸리티 클래스를 사용하여 HTML 요소를 스타일링 할 수 있으므로 웹 사이트의 대부분 또는 모든 CSS를 직접 작성할 필요가 없습니다. ( hidden for display: hidden 또는 uppercase for text-transform: uppercase 와 같은 클래스에 대해 생각하십시오.) 과거에 Bootstrap 및 Foundation과 같은 프레임 워크를 사용한 경우 Tailwind CSS에서 찾을 수있는 가장 큰 차이점은 CSS의 빈 슬레이트 디자인 방법과 CSS의 가벼운 기능 만 포함합니다. 이러한 속성은 개발자를 프레임 워크 자체의 미적 내장으로 향하게하지 않고도 최적화 된 웹 사이트를 허용합니다.
또한 다른 많은 CSS 프레임 워크와 달리 기존 CDN에서 테일 윈드 CSS를로드하기위한 "표준"빌드를 수행 할 수 없습니다. 생성 된 CSS 파일은 포함 된 모든 유틸리티 클래스로 인해 너무 커집니다. Tailwind는 "Play CDN"을 제공하지만 Tailwind의 성능 장점을 크게 줄이기 때문에 생산 환경에서는 사용되지 않습니다. (그러나 빠른 프로토 타이핑을 수행하거나 실제로 설치하거나 빌드 프로세스를 설정하지 않고 Tailwind를 실험하고 싶다면 정말 편리합니다.)
이를 위해서는 Tailwind의 빌드 프로세스를 사용하여 프로젝트와 관련된 프레임 워크 유틸리티 클래스의 서브 세트를 만들어야하므로 Tailwind가 어떤 유틸리티 클래스가 포함되어 있는지,이 프로세스가 WordPress 편집기에서 유틸리티 클래스 사용에 어떤 영향을 미치는지 결정하는 것이 매우 중요합니다.
마지막으로, Tailwind의 공격적인 프리 플라이트 (CSS 재설정 버전)는 WordPress의 일부 부분이 기본 설정과 프레임 워크에 정확히 맞지 않음을 의미합니다.
먼저 WordPress에서 Tailwind의 측면이 잘 작동하는지 살펴 보겠습니다.
많은 사용자 정의없이 Tailwind가 잘 실행되기 위해서는 주어진 페이지의 주요 CS로 작동해야합니다.
예를 들어, WordPress 플러그인을 구축하고 프론트 엔드 CSS를 포함 해야하는 경우 Tailwind의 Preflight는 활성 테마와 직접 충돌합니다. 마찬가지로 WordPress Admin 영역 (편집기 외부)을 스타일링 해야하는 경우 관리 영역의 스타일을 덮어 쓸 수 있습니다.
이 두 가지 문제를 해결하는 몇 가지 방법이 있습니다. 프리 플라이트 및 모든 유틸리티 클래스를 비활성화하거나 PostCS를 사용하여 모든 선택기에 네임 스페이스를 추가 할 수 있습니다. 어느 쪽이든, 구성과 워크 플로가 더욱 복잡해집니다.
그러나 테마를 구축하는 경우 Tailwind를 직접 사용할 수 있습니다. 나는 클래식 편집기와 블록 편집기를 사용하여 사용자 정의 테마를 성공적으로 만들었으며, 사이트 전체 편집이 성숙함에 따라 Tailwind와 함께 잘 작동하는 많은 사이트 전체 편집 기능이있을 것이라고 생각합니다.
Tammie Lister는 그녀의 블로그 게시물 인“Gutenberg 사이트 전체 편집자가 완성 될 필요가 없습니다. 사이트 전체 편집을위한 글로벌 스타일 기능은 Tailwind와 함께 작동하지는 않지만 다른 많은 기능이있을 수 있습니다.
그래서 : 테마를 구축하고 Tailwind가 설치되고 구성되며 미소로 유틸리티 클래스를 추가하고 있습니다. 그러나이 유틸리티 클래스는 WordPress 편집자에서 작동합니까?
계획을 통해 당신은 할 수 있습니다! 유틸리티 클래스는 어떤 유틸리티 클래스를 사용할 수 있는지 미리 결정하는 한 편집자에서 사용할 수 있습니다. 편집자를 열고 모든 테일 윈드 유틸리티 클래스를 사용할 수는 없습니다. Tailwind의 성능 강조에는 주제 만 사용하는 유틸리티 클래스에 제한이 내장되어 있으므로 코드의 다른 곳에 존재하지 않더라도 편집자에 어떤 유틸리티 클래스가 필요한지 미리 알려야합니다.
이 작업을 수행하는 방법은 여러 가지가 있습니다. Tailwind 구성 파일에 안전한 목록을 작성할 수 있습니다. 블록 편집기와 함께 스타일을 지정하려는 커스텀 블록 옆에 클래스 목록을 포함 할 수 있습니다.
편집자 수업은 미리 결정하는 것이 나에게 일하는 데 장애가 된 적이 없지만, 이것은 여전히 Tailwind와 WordPress의 관계에 대해 가장 많이 묻는 것입니다.
가능한 기본 WordPress 테마부터 시작하겠습니다. 필수 파일은 두 개뿐입니다.
우리는 Tailwind를 사용하여 Style.css를 생성합니다. index.php의 경우 간단한 것으로 시작하겠습니다.
php
/**
* 기본 템플릿 파일.
*
* 이것은 WordPress 테마에서 가장 일반적인 템플릿 파일입니다.
* 테마에 필요한 두 파일 중 하나 (다른 하나는 Style.css).
* 더 구체적인 쿼리와 일치 할 때 페이지를 표시하는 데 사용됩니다.
* 예 : Home.php 파일이 없으면 홈페이지를 구성합니다.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @Package WordPress
* @subpackage twenty_twenty_one
* @Since 스물 스물 1.0
*/
get_header ();
?>
<main id="site-content" role="main">
php
if (way_posts ()) {
while (hade_posts ()) {
the_post ();
get_template_part ( 'Template-Parts/Content', get_post_type ());
}
} 또 다른 {
get_template_part ( 'Template-Parts/Content', 'none');
}
?>
</main>
php get_footer ();WordPress 테마가해야 할 일이 많이 있으며, 위의 코드는 Pagination, Post Thumbnails, Stylesheets 큐를 큐에 대신하여 링크 요소를 사용하는 것과 같은 것이 아닙니다. 그러나 게시물을 표시하고 Tailwind가 예상대로 작동하는지 테스트하기에 충분합니다.
Tailwind와 관련하여 세 가지 파일이 필요합니다.
진행하기 전에 NPM이 필요합니다. 당신이 그것을 사용하는 데 익숙하지 않은 경우, 우리는 NPM을 시작하기위한 가이드가 있습니다. 이것은 시작하기에 좋은 곳입니다!
아직 package.json 파일이 없으므로 터미널에서 다음 명령을 실행하여 index.php와 동일한 폴더에 빈 JSON 파일을 만듭니다.
echo {}> ./package.json이 파일을 사용하면 Tailwind를 설치할 수 있습니다.
NPM Tailwindcss-Save-Dev 설치
테일 윈드 구성 파일을 생성합니다.
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 파일을 생성하도록 지시합니다. -워치 플래그는 프로젝트 저장소의 모든 PHP 파일에서 유틸리티 클래스를 추가하거나 제거 할 때 Style.css 파일을 지속적으로 재 구축합니다.
테일 윈드 구동 WordPress 테마만큼 간단하지만 프로덕션 환경에 배치하고 싶은 것이 아닐 것입니다. 프로덕션 준비 주제에 대한 몇 가지 경로에 대해 논의 해 봅시다.
이미 자체 CSS가있는 기존 테마에 Tailwind CSS를 추가하려는 두 가지 이유가 있습니다.
우리는 Tailwind를 21 개 11 개 (WordPress의 기본 테마)로 설치하여 이것을 시연 할 것입니다. (22 개의 22 개가 아닌 이유는 무엇입니까? 최신 WordPress 기본 테마는 풀 사이트 편집을 표시하도록 설계되었으며 Tailwind 통합에 적합하지 않습니다.)
먼저, 개발 환경에 테마가 설치되지 않은 경우 다운로드하여 설치해야합니다. 그런 다음 다음 단계 만 따라야합니다.
NPM Tailwindcss-Save-Dev 설치
NPX Tailwindcss init
이제 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
이제 PHP 파일을 변경할 때마다 새로운 Style.css 파일이 생성되었으므로 수정 된 테마와 원래 테마 간의 미묘한 렌더링 차이를 확인해야합니다. 이들은 Tailwind의 CSS 재설정으로 인해 발생하며 일부 테마가 기대하는 것보다 조금 더 철저합니다. 21 명의 21 세의 경우, 내가 만든 유일한 수정은 텍스트 결정 라인을 추가하는 것입니다.
렌더링 문제를 해결 한 후 Tailwind UI (Tailwind의 First-Party 구성 요소 라이브러리)에서 헤더 배너 구성 요소를 추가하겠습니다. Tailwind UI 웹 사이트에서 코드를 복사하여 Header.php의 "Content to Content"링크 후에 붙여 넣습니다.
매우 좋은! 이제 유틸리티 클래스를 사용하여 주제에 내장 된 기존의 더 높은 특이성 클래스를 덮어 쓰기 때문에 Tailwind.config.js 파일에 줄을 추가합니다.
module.exports = {
중요 : 사실,
내용 : [ "./**/* .php"],
주제: {
연장하다: {},
},
플러그인 : [],
}이것은 모든 Tailwind CSS 유틸리티를 중요한 것으로 표시하여 기존 클래스를 더 높은 특이성으로 무시할 수 있도록 중요합니다. (저는 제작 환경에서 True에 중요하지 않지만 웹 사이트를 기본 CSS에서 Tailwind로 변환하는 경우 거의 확실합니다.)
더 많은 링크 학습에 빠른 비 underline 클래스를 추가하고 BG Transparent 및 Border-0을 닫기 버튼에 추가함으로써 다음과 같습니다.
Tailwind UI의 구성 요소가 WordPress 기본 테마로 병합되는 것을 보는 것은 약간 가혹한 것처럼 보이지만 이것은 Tailwind 구성 요소와 고유 한 휴대 성을 잘 보여줍니다.
Tailwind를 사용하여 새로운 주제를 만들면 프로세스가 위의 최소 예와 매우 유사합니다. Tailwind CLI를 명령 줄에서 직접 실행하는 대신 개발 및 생산 빌드 및 모니터 변경을위한 별도의 NPM 스크립트를 만들 수 있습니다. WordPress 편집기를위한 별도의 빌드를 만들 수 있습니다.
위의 가장 작은 예를 넘어서 시작점을 찾고 있다면 그 자체가 자립적인 스타일을 넘어서는 것이 아니라면 정식 WordPress 런칭 테마라는 밑줄 (_S)에서 영감을 얻은 꼬리 바람 최적화 된 WordPress 테마 생성기를 만들었습니다. _tw라는 이름의 이것은 WordPress와 함께 Tailwind를 처음 사용했을 때 가질 수있는 빠른 시작입니다. 그것은 여전히 모든 고객 프로젝트의 첫 번째 단계입니다.
일반적인 WordPress 테마의 구조에서 더 벗어나 툴킷에 Laravel 블레이드 템플릿을 추가하려는 경우 Sage는 훌륭한 옵션이며 Tailwind가 시작하는 데 도움이되는 설정 가이드가 있습니다.
시작 방법에 관계없이 Tailwind CSS에 적응하고 유틸리티 클래스를 사용하여 HTML 문서를 스타일링하기 위해 시간이 걸리는 것이 좋습니다. 처음에는 비정상적으로 느껴질 수 있지만, 당신은 당신이 사용했던 것보다 더 빨리 웹 사이트를 구축하기 때문에 더 많은 고객의 작업을 취할 것입니다.
위 내용은 새롭고 기존 WordPress 테마에 Tailwind CSS 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
