프론트 엔드의 플러그인에 WordPress Iris 선택기를 어떻게 구현합니까?

10

이 질문은 여기서 와 같은 질문을하고 있지만, 적절한 답변이나 선택된 정답이 없었기 때문에 좀 더 일관된 방식으로 질문하면 응답을 얻을 수 있기를 다시 기대하고 있습니다.

색상 선택을 위해 Wordpress Theme Customization API 창에 표시된 색상 선택기 휠을 구현하려고합니다. 후크 및 "admin_enqueue_scripts"를 사용할 때 스크립트 및 스타일을로드하면 제대로 작동하지만 후크를 사용하여 프런트 엔드에 이러한 스크립트를로드하려고하면 "wp_enqueue_scripts"가 작동하지 않습니다. 스타일은 대기열에 포함되지만 스크립트에는 포함되지 않습니다.

Wordpress에 이미 번들로 제공되는 것을 복제하여 파일을 플러그인으로 복사하지 않으려 고합니다. 내가 보지 못한 프런트 엔드에서 Iris 색상 피커를 작동시키는 방법이 있어야합니다.

왜 내가 이것을하고 싶어하는지 궁금해하는 사람들을 위해, 나는 화면의 측면에 플라이 아웃 패널을 추가하는 플러그인을 개발 중입니다. 패널.

— 드웨인 채 링턴
소스

16

이것은 잠시 동안 나를 화나게 만들었지 만 핸들을 참조하는 대신 관리자 스크립트 로더에서 사용되는 전체 인수로 추가하여 작동하도록했습니다. 나는 인쇄 할 때 $wp_scripts프런트 엔드에 세계를, iris그리고 wp-color-picker자신의 jQuery를 UI의 모든 작업 종속성 불구하고, 아무데도 찾을 수 없습니다. 어쨌든, 이것이 옳은지는 모르지만 작업이 완료됩니다.

function wpa82718_scripts() {
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script(
        'iris',
        admin_url( 'js/iris.min.js' ),
        array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ),
        false,
        1
    );
    wp_enqueue_script(
        'wp-color-picker',
        admin_url( 'js/color-picker.min.js' ),
        array( 'iris' ),
        false,
        1
    );
    $colorpicker_l10n = array(
        'clear' => __( 'Clear' ),
        'defaultString' => __( 'Default' ),
        'pick' => __( 'Select Color' ),
        'current' => __( 'Current Color' ),
    );
    wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n ); 

}
add_action( 'wp_enqueue_scripts', 'wpa82718_scripts', 100 );

— 마일로
소스

와, 완벽 해 admin_url 함수를 사용하고 스크립트를 등록 한 다음 대기열에 넣지 않고 스크립트를 대기열에 넣는 일이 결코 없었습니다. 아마도 핵심 Iris 색상 피커를 사용할 수있을 것입니다. 그리고 그것은 의존성입니다. 감사합니다.

— Dwayne Charrington

1

이것은 거의 나를 얻었지만 여전히 wpColorPickerL10n에 관한 오류가 있었으므로 함수 내에 조금 더 추가해야했습니다. 위의 답변을 wp_localize_script 요구 사항으로 업데이트했습니다.

— 산업 테마

3

functions.php 파일에 스크립트를 wp_enqueue_script하고 add_action을 사용하여 스타일을 wp_enqueue_style해야합니다. 이 스크립트로 jQuery 파일과 스타일 시트 파일 만 포함하십시오.

// Register Scripts &amp; Styles in Admin panel
function custom_color_picker_scripts() {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'iris', admin_url( 'js/iris.min.js' ), array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), false, 1 );
wp_enqueue_script( 'cp-active', plugins_url('/js/cp-active.js', __FILE__), array('jquery'), '', true );

}
add_action( 'wp_enqueue_scripts', custom_color_picker_scripts);

이제 cp-active.js와 같은 새 자바 스크립트 파일을 만들고 벨로우즈 코드를 사용하여 avobe에서 정의한“/js/cp-active.js”파일 경로를 유지하십시오.

jQuery('.color-picker').iris({
// or in the data-default-color attribute on the input
defaultColor: true,
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
palettes: true
});

입력 텍스트를 표시하려는 색상 선택기의 CSS 클래스를 사용하여 설정 페이지에 텍스트 상자를 추가하십시오. 입력 $ variable에“color_code”를 사용했습니다.

<input id="color_code" class="color-picker" name="color_code" type="text" value="" />

여기에서 자세한 정보를 얻으십시오

— 세서 십
소스