WP_Dependencies클래스 내에 라는 메소드가 add_data있습니다. 이 기능은 워드 프레스로드 중에 대기열에 있던 스크립트 / 스타일에 데이터를 추가합니다. 이 기능에 대해 일반적으로 인용되는 용도는 다른 버전의 IE를 대상으로하는 스타일 시트를 추가 할 때 조건부를 추가하는 것입니다. 예를 들어 IE8 이하를 타겟팅하려면 다음을 수행하십시오.
function test_wp_print_styles() {
global $wp_styles;
wp_enqueue_style( 'test-style', get_template_directory_uri() . '/css/test.css', array(), 1, 'all' );
$wp_styles->add_data( 'test-style', 'conditional', 'lte ie8' );
}
add_action( 'wp_print_styles', 'test_wp_print_styles' );이것은 다음과 같이 렌더링됩니다 :
<!--[if lte ie8]>
<link rel='stylesheet' id='test-style-css' href='http://trunkosaurus.dev/wp-content/themes/twentyeleven/css/test.css?ver=1' type='text/css' media='all' />
<![endif]--> Core를 살펴보면이 방법이 사용되는 소수의 장소가 있습니다.
WP_Styles->add_inline_style(): 참조 된 스타일 시트 뒤에 인라인 스타일을 추가합니다 (를 통해 수행WP_Styles->print_inline_style()).WP_Scripts->localize(): json으로 인코딩 된 객체를 추가합니다 ( "공개"wp_localize_script()함수로 래핑 됨 )wp_plupload_default_settings(): 'wp-plupload'스크립트에 json으로 인코딩 된 객체 (다차원 배열에서 생성)를 추가합니다 (3.4에서 제공됨).스크립트 및 스타일을 등록 / 큐에 넣을 때 기본 스크립트에 대한 데이터 추가 (
wp-includes/script-loader.php)
분석법의 사용을 통해 읽었을 때 특정 사용 사례가없는 것으로 보입니다. 에서 wp_plupload_default_settings임의의 데이터 주입이 가능한 것 같습니다. 에서 wp_register_script헤더와 바닥 글 스크립트를 구분하는 데 사용되는 것 같습니다. 에서 add_inline_style, 지정된 스타일 시트가 큐에 후에 추가되어야 인라인 스타일을 표시하는 데 사용됩니다.
이 함수를 잘 사용하려면 다음 코드와 같이 외부 스크립트를 대기열에 넣었지만 일부 구성 변수를 보내야합니다. 일부 구성 변수는 DB에서 제공됩니다.
function zdt_enqueue_add_this() {
global $wp_scripts;
wp_enqueue_script( 'zdt-add-this', 'http://s7.addthis.com/js/250/addthis_widget.js#pubid=myidhere' );
// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();
$js = "var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "' } };\n";
$js .= 'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };';
$wp_scripts->add_data( 'zdt-add-this', 'data', $js );
}
add_action( 'wp_enqueue_scripts', 'zdt_enqueue_add_this' );결과는 다음과 같습니다.
<script type='text/javascript'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @tollmanz' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
/* ]]> */
</script>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere'></script>객체가 속성 내에 속성을 가지고 wp_localize_script있기 때문에이 작업을 수행 할 수 없다는 점에 유의하십시오 addthis_share( 이 전에는 다소 해킹적인 방법으로 작성했습니다 ).
편집 : 나는 이것을 진술하는 데 잘못되었습니다. wp_localize_script다차원 배열을 잘 처리합니다.
이 방법은 다음과 같은 이유로 실제로 잘 작동하는 것 같습니다.
- 데이터를 스크립트 핸들에 첨부 할 수 있으므로 항상 스크립트에 올바르게 대기열에 포함됩니다. 또한 스크립트 대기열 해제, 스크립트 순서 및 스크립트 배치에 대해 지능적입니다.
- PHP를 사용하여 var를 JS에 보낼 수 있습니다.
wp_print_styles대기열에 넣은 스크립트가 나중에 수행하는 임의의 스크립트를 인쇄하는 데 사용 하는 것보다 더 체계적으로 보입니다 .
이 방법에 대해 걱정하는 예상대로 작동하지 않는 것이 있습니다. 이러한 문제 중 하나 wp_localize_script는와 함께 사용 $wp_scripts->add_data하면 예기치 않은 결과를 얻을 수 있다는 것입니다. 예를 들어 :
// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();
$js = "var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "' } };\n";
$js .= 'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };';
$wp_scripts->add_data( 'zdt-add-this', 'data', $js );
wp_localize_script( 'zdt-add-this', 'addthis_share', array( 'var' => 'val' ) );생산 :
<script type='text/javascript'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @tollmanz' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
var addthis_share = {"var":"val"};
/* ]]> */
</script>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere'></script>이 스크립트는 다음과 같습니다.
// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();
$js = "var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "' } };\n";
$js .= 'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };';
wp_localize_script( 'zdt-add-this', 'addthis_share', array( 'var' => 'val' ) );
$wp_scripts->add_data( 'zdt-add-this', 'data', $js );생산 :
<script type='text/javascript'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @tollmanz' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
/* ]]> */
</script>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere'></script>data가 설정 키 wp_localize_script궁극적으로 호출에 의해 덮어 쓰기를합니다 $wp_scripts->add_data, 당신이 호출하면 반면 wp_localize_script같은 스크립트를 두 번, 문자열이 제대로 연결된 것입니다.
이 모든 것이 대기열에 넣은 스크립트와 함께 사용할 임의의 스크립트를 인쇄하는 편리한 방법이지만 충돌 가능성으로 인해 널리 사용해서는 안된다고 생각합니다. 커뮤니티 플러그인 / 테마에서 코드가 사용되지 않는 개인 프로젝트에서 이것을 사용하는 것에 대한 논쟁을 확실히 볼 수 있습니다.
또한 기능의 목적에 대한 단서가 있는지 Core Trac을 살펴 보았습니다. 임의의 JS를 추가하는 다른 방법을 모색 한 티켓 (http://core.trac.wordpress.org/ticket/11520) (서사시 하나)을 발견했습니다. 따라서 임의의 JS를 추가하는 더 좋은 방법을 만드는 데 관심이있는 것 같지만 add_data프로세스의 일부 여야 하는지 확실하지 않습니다 .
내 주요 질문은 : 개발자 가이 기능을 사용해야합니까? 경우에 따라 (예 wp_register_script:) 제 3자가 사용해서는 안되는 "개인"기능처럼 보입니다. 그러나 다른 경우 (예 wp_plupload_default_settings:)에는 대기열에 포함 된 스크립트 전에 임의의 JS를 주입하는 것이 가장 합리적인 방법 인 것 같습니다.
나는 이것에 대한 "올바른"대답이 없다고 생각하지만 다른 개발자들이 생각하는 것을 듣고 싶습니다. 또한이 퍼즐에는 내가 완전히 무시한 부분이 있으며 다른 사람들이 그것에 대해 말하는 것을 듣고 싶어한다고 생각합니다.