WordPress 플러그인에 CSS 및 jQuery를 포함하는 방법

WordPress 플러그인에 CSS 및 jQuery를 포함하는 방법

WordPress 플러그인에 CSS 및 jQuery를 포함하는 방법

스타일의 경우wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );

다음으로 다음을 사용합니다.wp_enqueue_style('namespace');CSS가 로딩되는 곳이면 어디든 상관없습니다.

스크립트는 위와 같으나 jquery를 로드하는 가장 빠른 방법은 jquery를 로드하는 페이지의 init에 로드된 enqueue를 사용하는 것입니다.wp_enqueue_script('jquery');

물론 jquery에 구글 저장소를 사용하고 싶지는 않습니다.

스크립트가 종속된 jquery 라이브러리를 조건부로 로드할 수도 있습니다.

wp_enqueue_script('namespaceformyscript', 'http://locationofscript.com/myscript.js', array('jquery'));

2017년 9월 갱신

아까 제가 쓴 답이에요.스크립트와 스타일을 큐잉하기 위한 최적의 장소는wp_enqueue_scripts예를 들어 다음과 같습니다.

add_action('wp_enqueue_scripts', 'callback_for_setting_up_scripts');
function callback_for_setting_up_scripts() {
    wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );
    wp_enqueue_style( 'namespace' );
    wp_enqueue_script( 'namespaceformyscript', 'http://locationofscript.com/myscript.js', array( 'jquery' ) );
}

그wp_enqueue_scripts액션은 '프런트 엔드'를 위한 설정을 합니다.를 사용할 수 있습니다.admin_enqueue_scripts백엔드용 액션(wp-admin 내의 임의의 장소) 및login_enqueue_scripts작업을 수행합니다.

에 넣습니다.init()기능을 합니다.

function your_namespace() {
    wp_register_style('your_namespace', plugins_url('style.css',__FILE__ ));
    wp_enqueue_style('your_namespace');
    wp_register_script( 'your_namespace', plugins_url('your_script.js',__FILE__ ));
    wp_enqueue_script('your_namespace');
}

add_action( 'admin_init','your_namespace');

내게 가장 좋은 해결책인 완벽한 임호를 찾는데도 시간이 좀 걸렸다.

건배.

CSS와 jQuery를 플러그인에 쉽게 포함하려면 다음 작업을 수행합니다.

// register jquery and style on initialization
add_action('init', 'register_script');
function register_script() {
    wp_register_script( 'custom_jquery', plugins_url('/js/custom-jquery.js', __FILE__), array('jquery'), '2.5.1' );

    wp_register_style( 'new_style', plugins_url('/css/new-style.css', __FILE__), false, '1.0.0', 'all');
}

// use the registered jquery and style above
add_action('wp_enqueue_scripts', 'enqueue_style');

function enqueue_style(){
   wp_enqueue_script('custom_jquery');

   wp_enqueue_style( 'new_style' );
}

WordPress에 jQuery와 CSS를 포함시키는 방법– WordPress Way에서 훌륭한 정보를 얻을 수 있었습니다.

도움이 됐으면 좋겠다.

승인된 답변이 불완전합니다.오른쪽 후크를 사용해야 합니다.wp_enqueue_scripts

예:

    function add_my_css_and_my_js_files(){
        wp_enqueue_script('your-script-name', $this->urlpath  . '/your-script-filename.js', array('jquery'), '1.2.3', true);
        wp_enqueue_style( 'your-stylesheet-name', plugins_url('/css/new-style.css', __FILE__), false, '1.0.0', 'all');
    }
    add_action('wp_enqueue_scripts', "add_my_css_and_my_js_files");

@pixeline의 답변에 덧붙이자면 (간단한 코멘트를 추가하려고 했지만 사이트에서는 50개의 평판이 필요하다고 했습니다.)

admin 섹션에 플러그인을 쓰는 경우 다음을 사용해야 합니다.

add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files");

admin_enqueueu_scripts는 admin 섹션의 올바른 후크입니다.프런트 엔드에 wp_enqueue_scripts를 사용합니다.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script 를 참조해 주세요.

예

<?php
function my_init_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
}    

add_action('init', 'my_init_method');
?> 

먼저 wp_register_script() 및 wp_register_style() 함수를 사용하여 스타일과 css를 등록해야 합니다.

 //registering javascript and css
 wp_register_script ( 'mysample', plugins_url ( 'js/myjs.js', __FILE__ ) );
 wp_register_style ( 'mysample', plugins_url ( 'css/mystyle.css', __FILE__ ) );

그 후 wp_enqueue_script() 및 wp_enqueue_style() 함수를 호출하여 필요한 페이지에서 js 및 css를 로드할 수 있습니다.

wp_enqueue_script('mysample');
wp_enqueue_style('mysample');

여기 http://wiki.workassis.com/wordpress-create-advanced-custom-plugin-using-oop/에서 좋은 예가 있습니다.

매우 심플:

프런트 엔드에 JS/CSS 추가:

function enqueue_related_pages_scripts_and_styles(){
        wp_enqueue_style('related-styles', plugins_url('/css/bootstrap.min.css', __FILE__));
        wp_enqueue_script('releated-script', plugins_url( '/js/custom.js' , __FILE__ ), array('jquery','jquery-ui-droppable','jquery-ui-draggable', 'jquery-ui-sortable'));
    }
add_action('wp_enqueue_scripts','enqueue_related_pages_scripts_and_styles');

WP 관리 영역에 JS/CSS 추가:

function enqueue_related_pages_scripts_and_styles(){
        wp_enqueue_style('related-pages-admin-styles',  get_stylesheet_directory_uri() . '/admin-related-pages-styles.css');
        wp_enqueue_script('releated-pages-admin-script', plugins_url( '/js/custom.js' , __FILE__ ), array('jquery','jquery-ui-droppable','jquery-ui-draggable', 'jquery-ui-sortable'));
    }
add_action('admin_enqueue_scripts','enqueue_related_pages_scripts_and_styles');

다음 함수를 사용하여 플러그인에서 스크립트 또는 스타일을 큐잉할 수 있습니다.

function my_enqueued_assets() {
    wp_enqueue_script('my-js-file', plugin_dir_url(__FILE__) . '/js/script.js', '', time());
    wp_enqueue_style('my-css-file', plugin_dir_url(__FILE__) . '/css/style.css', '', time());
}
add_action('wp_enqueue_scripts', 'my_enqueued_assets');

다음 코드를 사용하여 백엔드 및 프런트엔드에 스크립트와 css를 추가할 수 있습니다.이것은 단순한 클래스이며 함수는 객체 지향 방식으로 호출됩니다.

class AtiBlogTest {
function register(){
    //for backend
    add_action( 'admin_enqueue_scripts', array($this,'backendEnqueue'));
    //for frontend
    add_action( 'wp_enqueue_scripts', array($this,'frontendEnqueue'));
}
function backendEnqueue(){
    wp_enqueue_style( 'AtiBlogTestStyle', plugins_url( '/assets/css/admin_mystyle.css', __FILE__ ));
    wp_enqueue_script( 'AtiBlogTestScript', plugins_url( '/assets/js/admin_myscript.js', __FILE__ ));
}
function frontendEnqueue(){
    wp_enqueue_style( 'AtiBlogTestStyle', plugins_url( '/assets/css/front_mystyle.css', __FILE__ ));
    wp_enqueue_script( 'AtiBlogTestScript', plugins_url( '/assets/js/front_myscript.js', __FILE__ ));
}
}

if(class_exists('AtiBlogTest')){
$atiblogtest=new AtiBlogTest();
$atiblogtest->register();
}

css의 경우

wp_register_style('style-css',plugin_dir_url(__FILE__).'css/style.css');

js의 경우

 wp_register_script('script-js', plugin_dir_url(__FILE__).'js/script.js',array(), '1.0.0', true);

css는 다음과 같은 임의의 페이지에서 큐잉함으로써 사용할 수 있습니다.

wp_enqueue_style('style-css');

js는 다음과 같은 임의의 페이지에서 큐잉함으로써 사용할 수 있습니다.

wp_enqueue_script('script-js');

언급URL : https://stackoverflow.com/questions/3760222/how-to-include-css-and-jquery-in-my-wordpress-plugin