CSS와 JS를 병합하는 WordPress 플러그인 공유

藏色散人
풀어 주다: 2021-04-25 17:42:35
앞으로
2208명이 탐색했습니다.

다음 WordPress 튜토리얼 칼럼에서는 CSS와 JS를 결합한 WordPress 플러그인을 소개하겠습니다. 필요한 친구들에게 도움이 되길 바랍니다!

우리는 일반적으로 여러 CSS 또는 JS를 하나의 파일로 병합하여 출력하는 것을 고려합니다. 이 문제를 해결하기 위해 WordPress에서 이 목적을 달성하기 위해 이 WordPress 플러그인을 작성했습니다.

구현 원리

저의 이전 "PHP 결합 압축 CSS 출력 모듈식 CSS 작성"을 읽으셨다면 먼저 캐시 파일을 처리하는 방법 중 일부와 파일 병합 및 코드 압축에 대한 몇 가지 아이디어를 이해하실 수 있습니다. 이 플러그인의 구현 원리는 기본적으로 위 기사에서 소개한 것과 동일합니다.

설치

먼저 이 플러그인을 다운로드하세요. 제 GitHub에서 호스팅하고 있으니 이 페이지에서 다운로드하실 수 있습니다. 다운로드 후 압축을 푼 후 압축이 풀린 폴더 전체를 WordPress 웹사이트 플러그인 디렉터리에 직접 업로드하세요. 그런 다음 배경으로 이동하여 활성화합니다.

를 사용하여 배경으로 들어갑니다. "설정" 메뉴에 "축소"라는 하위 메뉴가 있으며, 다양한 옵션을 설정할 수 있으며 설명이 있으므로 기능을 이해할 수 있습니다.

wp-minify를 사용하려면 CSS와 js를 출력하는 방식이 다르기 때문에 테마를 수정해야 합니다. 테마에서 원본 CSS 및 JS 출력을 삭제하고 다음 방법을 사용하여 JS를 출력합니다.

<?php wp_minfiy_js([&#39;/wp-content/themes/yourtheme/js/base.js&#39;,&#39;/wp-content/themes/yourtheme/js/module.js&#39;,&#39;/wp-content/themes/yourtheme/js/others.js&#39;]); ?>
로그인 후 복사

Css를 출력하는 방법은 동일하지만 wp_minify_css() 다른 함수를 사용합니다. 함수의 매개변수는 배열이고, 배열 내부의 요소는 스크립트 파일의 경로입니다. 워드프레스 설치 디렉터리를 루트 디렉터리로 하여 전체 상대 경로를 작성합니다.

워드프레스의 루트 디렉터리를 기준으로 스크립트를 작성해야 하는 이유는 무엇인가요? 현재 테마 디렉토리와 관련이 없습니까? 사실 그 이유는 매우 간단합니다. 참조하는 CSS나 js가 반드시 테마 디렉터리에 있을 필요는 없기 때문입니다. 때로는 다른 디렉터리의 스타일이나 스크립트를 참조하기도 합니다. 물론 이는 상대 경로입니다. "/../test.js"와 같이 WordPress의 상위 디렉터리에 있는 스크립트를 참조할 수도 있지만, 스크립트의 시작 부분은 /로 시작해야 합니다. 상대 경로 오류가 발생할 수 있습니다.

물론, 구체적인 사용 방법은 원리를 이해한 후에 쉽게 수정하거나 사용할 수 있습니다. 자세한 내용은 내 블로그를 읽어주세요: http://www.tangshuang.net/2432.html

위 내용은 CSS와 JS를 병합하는 WordPress 플러그인 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿