CSS와 JS를 결합하는 WordPress 플러그인

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

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

구현 원리

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

설치

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

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

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의 상위 디렉터리에 있는 스크립트를 참조할 수도 있지만, 스크립트 시작 부분은 /로 시작해야 합니다. 상대 경로 오류가 발생할 수 있습니다.

물론, 구체적인 사용 방법은 원리를 이해한 후에 쉽게 수정하거나 사용할 수 있습니다.

더 많은 WordPress 기술 기사를 보려면 WordPress 웹사이트 구축 튜토리얼 칼럼을 방문하세요!

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