워드프레스 플러그인: javascrtipt 태그에서 속성으로 사용할 매개 변수를 어떻게 전달합니까?

워드프레스 플러그인: javascrtipt 태그에서 속성으로 사용할 매개 변수를 어떻게 전달합니까?

워드프레스에서 자바스크립트 태그를 생성하여 페이지 하단에 드롭하는 위젯 플러그인을 작성하려고 합니다.wp_enqueue_script를 사용하여 이것을 만들 수 있다는 것을 알고 있습니다. 문제 없습니다.하지만 위젯 설정의 파라미터를 이 스크립트 태그에 전달해야 합니다.

예:

wp_enqueue_script( 'script-name', '/js/example.js' );

는 다음과 같은 모양의 태그를 렌더링합니다.

<script type='text/javascript' src='/js/example.js'></script>

제가 원하는 것은 다음과 같은 모양의 태그를 만드는 것입니다.

<script type='text/javascript' data-id='12345' src='/js/example.js'></script>

여기서 12345는 위젯 설정에서 전달됩니다.

이거 어떻게 해요?

나는 이것이 오래된 게시물이라는 것을 알고 있지만, 솔직히 다음이 플러그인에서 자바스크립트로 매개 변수를 전달하는 허용 가능한 방법인지는 모르겠지만, 나는 같은 문제가 있었고 적어도 하나의 접근 방식을 공유하고 싶었습니다! 피드백을 주셔서 감사합니다!

어떤 이유에서든, 저는 플러그인 PHP 코드에서 JS 코드로 파라미터를 전달하는 두 가지 다른 방법을 사용하게 되었습니다.

첫 번째는 wp_localize_script 옵션을 사용하여 상당히 간단했습니다.

플러그인 PHP 스니펫은 다음과 같습니다.

wp_enqueue_script(
    'dynamic-rss-scripts', /* Handle/Name */
    plugin_dir_url( __FILE__ ) . 'assets/js/dynamic-rss.js', /* Path to the plugin/assets folder */
    //array('jquery', 'xml2json', 'json2xml'), /* Script Dependencies */
    array('jquery'), /* Script Dependencies */
    null, /* null is any version, but could be the specific version of jquery if required */
    false /* if true=add to footer, false=add to header */
);


/*
    Pass any server-side vars down to JS.  These will be exposed as
    php_vars.variablename for example
*/
$jsarray = array(
    'exampleparam'               => 'Example Param Value'
);
wp_localize_script( 'dynamic-rss-scripts', 'php_vars', $jsarray ); 

저 같은 경우에는 보통 몇 개의 파라미터를 통과해야 하기 때문에 어레이를 사용하고 있습니다.

위의 토막글에서, 자바스크립트에서 사용하기 쉬운 실제 파라미터 값.위 PHP의 wp_localize_script 라인에 있는 php_vars 참조를 참고하세요.

따라서 자바스크립트에서는 다음과 같은 방법으로 해당 매개변수를 참조하기가 매우 쉽습니다.

console.log('Hello to PHP variables', php_vars);

... 그리고 위의 PHP 스니펫에 대한 저의 경우, 저는 물론 이제 다음을 통해 저의 예제 param 파라미터를 참조할 수 있습니다.

console.log('Here is my specific param called exampleparam', php_vars.exampleparam);

제가 사용한 두 번째 접근 방식은 단순히 DOM 요소에 데이터 속성을 구성하는 것입니다(제 경우에는 컨테이너 DIV였습니다).

플러그인 PHP에서 플러그인/숏코드 파라미터를 추출합니다.

extract(( shortcode_atts(array))

'url' => '',
'feed-type' => 'list', // This could be for Wordpress or Calendar etc.
'rows' => '5',
'cols' => '1',
'include-image' => 'false',
'image-align' => 'left',
'image-size' => '100',
'include-date' => 'true',
'date-format' => 'dd/mm/yyyy'

), $attrs ) ).

저는 약간의 검증 등을 수행하지만 궁극적으로는 다음과 같은 HTML 데이터 속성을 생성하게 됩니다.

$content = "<div id='dynamic-rss' class='dynamic-rss-container' ";
    $content .= "data-url='" . $attrs['url'] . "' ";
    $content .= "data-feedtype='" . $attrs['feed-type'] . "' ";
    $content .= "data-rows='" . $attrs['rows'] . "' ";
    $content .= "data-cols='" . $attrs['cols'] . "' ";
    $content .= "data-includeimage='" . $attrs['include-image'] . "' ";
    $content .= "data-imagealign='" . $attrs['image-align'] . "' ";
    $content .= "data-imagesize='" . $attrs['image-size'] . "' ";
    $content .= "data-includedate='" . $attrs['include-date'] . "' ";
    $content .= "data-dateformat='" . $attrs['date-format'] . "'";
$content .= "></div>";

그런 다음 해당 컨테이너 DIV를 데이터 속성과 함께 렌더링하는 $content를 PHP로 반환합니다.

자바스크립트/jQuery에서 마지막 단계(여기서 jQuery를 사용했지만 곧은 JS일 수 있음)는 자바스크립트 코드에서 필요한 곳에 사용할 수 있는 데이터 속성을 검색하는 것입니다.

const feedUrl = $('#dynamic-rss').data('url');
const feedType = $('#dynamic-rss').data('feedtype');
const rows = returnInt($('#dynamic-rss').data('rows')) != NaN ? returnInt($('#dynamic-rss').data('rows')) : 10;
const cols = returnInt($('#dynamic-rss').data('cols')) != NaN ? returnInt($('#dynamic-rss').data('cols')) : 1;
const includeImage = $('#dynamic-rss').data('includeimage');
const imageAlign = $('#dynamic-rss').data('imagealign');
const imageSize = $('#dynamic-rss').data('imagesize');
const includeDate = $('#dynamic-rss').data('includedate');
const dateFormat = $('#dynamic-rss').data('dateformat');

이것이 어쨌든 도움이 되기를 바랍니다. 다른 사람이 이것에 발을 들여놓는다면요!

제가 알아낸 것은 이렇습니다.전면 디스플레이 조각을 만드는 위젯 코드에서 다음을 사용합니다.

add_action('wp_footer',create_function( '', 'echo(\'<script type="text/javascript" data-id="' . $instance['widgetparamname'] . '" src="//someurl.com/some.js"></script>\');' ),1,0);

$instance은 이미 전달되었으며, 위젯의 관리자 인터페이스에서 가져온 값을 포함합니다.따라서 위젯에 어떤 값을 넣든지 해당 배열에 표시됩니다.그런 다음 배열의 올바른 요소를 참조하기만 하면 됩니다.

이 코드가 수행하는 작업은 다른 함수를 필요로 하지 않고 wp_footer hook에 작업을 추가하는 것입니다(어떤 값도 전달할 수 없음). 따라서 여기에 입력하는 모든 작업이 사이트의 바닥글 영역에 기록됩니다.

create_function의 첫 번째 매개 변수가 비어 있어야 합니다. 그렇지 않으면 워드 프레스에서 오류가 발생합니다.

언급URL : https://stackoverflow.com/questions/34825075/wordpress-plugin-how-do-you-pass-parameters-to-be-used-as-attributes-in-a-javas