전달해야하는 매개 변수의 종류에 따라 하나의 추가 옵션이 있습니다 (2a). 또한 동적으로 생성 text/css되거나 text/javascript보다 출력되는 PHP 스크립트를 생성 text/html하고 WordPress를로드하는 대신 GET 매개 변수를 사용하여 필요한 데이터를 제공 할 수 있습니다. 물론 이것은 상대적으로 적은 수의 비교적 작은 매개 변수를 전달해야하는 경우에만 작동합니다. 예를 들어 게시물의 URL이나 파일의 디렉토리 또는 이와 유사한 디렉토리 만 전달해야한다고 가정하면 다음과 같이 할 수 있습니다.
header.php에서 :
<script type="text/javascript" src="<?php print get_stylesheet_directory_uri();
?>/fancy-js.php?foo=bar&url=<?php print urlencode(get_permalink($post->ID)); ?>"></script>
fancy-js.php에서 :
<?php
header("Content-type: text/javascript");
?>
foo = <?php print json_encode($_GET['foo']); ?>;
url = <?php print json_encode($_GET['url']); ?>;
기타
그러나 이는 GET 매개 변수에 직접 전달 된 데이터에만 액세스 할 수있게합니다. 전달해야 할 것들의 수가 상대적으로 적고 그러한 것들의 표현이 상대적으로 작은 경우에만 작동합니다. (기본적으로 소수의 문자열 또는 숫자 값 (사용자 이름, 말 또는 디렉토리). 사용자의 모든 최근 게시물 목록 등이 아님)
이러한 옵션 중 어느 것이 가장 좋은지에 대해서는 잘 모르겠습니다. 사용 사례에 따라 다릅니다. 옵션 (1)은 단순하다는 장점이 있으며, WordPress를 두 번로드하는 성능 저하없이 필요한 워드 프레스 데이터에 명확하게 액세스 할 수 있습니다. 하지 말아야 할 강한 이유가 없다면 (예 : 스타일 시트 나 스크립트의 크기 때문에)해야 할 일이 거의 확실합니다.
한 페이지의 무게와 관련하여 문제를 일으킬 정도로 크기가 커지면 (2) 또는 (2a)를 시도해보십시오.
또는 그렇지 않으면-아마도 더 좋은 아이디어 일 것입니다-실제로 동적 데이터를 사용하는 스크립트 부분이나 스타일 시트를 정적으로 지정할 수있는 부분과 분리하려고 시도 할 수 있습니다. # my-fancy 요소의 배경 매개 변수를 설정하기 위해 WordPress에서 디렉토리를 전달해야하는 스타일 시트가 있습니다. 이 모든 것을 head 요소에 넣을 수 있습니다.
<style type="text/css">
#my-fancy-element {
background-image: url(<?php print get_stylesheet_directory_uri(); ?>images/fancy.png);
padding: 20px;
margin: 20px;
font-weight: bold;
text-transform: uppercase;
font-size: 12pt;
/* ... KB and KB of additional styles ... */
}
#another-fancy-element {
/* ... KB and KB of additional styles ... */
}
/* ... KB and KB of additional styles ... */
</style>
그러나 왜 그렇게해야합니까? 여기에는 WordPress의 데이터에 의존하는 한 줄만 있습니다. WordPress에 의존하는 행만 분리하는 것이 좋습니다.
<style type="text/css">
#my-fancy-element {
background-image: url(<?php print get_stylesheet_directory_uri(); ?>images/fancy.png);
}
</style>
표준 링크 요소 (style.css 등)로로드하는 정적 스타일 시트에 다른 모든 것을 넣습니다.
#my-fancy-element {
/* background-image provided dynamically */
padding: 20px;
margin: 20px;
font-weight: bold;
text-transform: uppercase;
font-size: 12pt;
/* ... KB and KB of additional styles ... */
}
#another-fancy-element {
/* ... KB and KB of additional styles ... */
}
/* ... KB and KB of additional styles ... */
그리고 계단식으로 작업을 수행하십시오.
자바 스크립트도 마찬가지입니다.
<script type="text/javascript">
// Here comes a huge function that uses WordPress data:
function my_huge_function () {
// Do a million things ...
jQuery('#my-fancy').append('<a href="'+<?php json_encode(get_permalink($GLOBALS['post']->ID)); ?>+'">foo</a>);
// Do a million more things ...
my_other_function(<?php print json_encode(get_userdata($GLOBALS['post']->post_author); ?>);
}
function my_other_function (user) {
// Do a million things ...
}
</script>
대신 head 요소에 다음과 같은 것을 넣으십시오.
<script type="text/javascript">
var WordPressPostData = {
url: <?php print json_encode(get_permalink($GLOBALS['post']->ID)); ?>,
author: <?php print json_encode(get_userdata($GLOBALS['post']->post_author)); ?>
}
</script>
그런 다음 나머지는 정적 JavaScript 파일에 놓고 my_huge_function () 및 my_other_function ()을 다시 작성하여 전역 WordPressPostData.url 및 WordPressPostData.author를 사용하십시오.
CSS의 40K 또는 JS의 40K는 거의 항상 동적 데이터에 의존하는 <1K로 분할 될 수 있으며, 나머지는 정적 외부 파일에 지정되어 캐스케이드 (CSS의 경우) 또는 전역 액세스 가능한 파일을 사용하여 다시 결합 될 수 있습니다. 변수 (전역, DOM 요소 또는 JS의 다른 큐비 홀).