[JQUERY] WordPress 플러그인에 CSS와 jQuery를 포함하는 방법은 무엇입니까?

WordPress 플러그인에 CSS와 jQuery를 포함하는 방법은 무엇입니까?

해결법

1. ---

   1.스타일 WP_REGISTER_STYLE ( '네임 스페이스', 'http://locationofcs.com/mycss.css');

   스타일 WP_REGISTER_STYLE ( '네임 스페이스', 'http://locationofcs.com/mycss.css');

   그런 다음 : wp_enqueue_style ( '네임 스페이스'); CSS를로드 할 때마다.

   스크립트는 위와 같지만 jQuery로드를위한 더 빠른 방법은 WP_ENQUEUE_SCRIPT ( 'jquery')를로드 할 페이지의 init에로드 된 entQueue를 사용하는 것입니다.

   물론 Google 저장소를 jQuery에 사용하려고하지 않는 한.

   또한 스크립트가 종속되는 jQuery 라이브러리를 조건부로드 할 수도 있습니다.

   wp_enqueue_script ( 'namespaceformascript', 'http://locationofscript.com/myscript.js', 배열 ( '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 조치는 "프론트 엔드"에 대해 일을 설정합니다. 백엔드 (wp-admin 내의 아무도 어디에서나) 및 로그인 페이지의 login_enqueue_scripts 조치에 대한 admin_enqueue_scripts 작업을 사용할 수 있습니다.

2. ---

   2.플러그인의 init () 함수에 넣으십시오.

   플러그인의 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');
   

   그것은 나를 찾았습니다 (나를 위해) 가장 좋은 솔루션을 찾았습니다.

   건배

3. ---

   3.플러그인에 CSS와 jQuery를 포함 시키려면 쉽습니다.

   플러그인에 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' );
   }
   

   나는이 사이트에서 jQuery와 CSS를 포함하는 방법을 포함하는 방법이 사이트에서 jquery와 css를 포함하는 방법을 발견했습니다 - WordPress 방식

   희망이 도움이됩니다.

4. ---

   4.허용되는 답변이 불완전합니다. 오른쪽 후크를 사용해야합니다 : WP_ENQUEUE_SCRIPTS.

   허용되는 답변이 불완전합니다. 오른쪽 후크를 사용해야합니다 : 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");
   

5. ---

   5.http://codex.wordpress.org/function_reference/wp_enqueue_script를 참조하십시오

   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');
   ?> 
   

6. ---

   6.@ pixeline의 답변을 추가하는 것만으로 (간단한 의견을 추가하려고했지만 사이트는 50 명의 명성이 필요하다고 말했습니다).

   @ pixeline의 답변을 추가하는 것만으로 (간단한 의견을 추가하려고했지만 사이트는 50 명의 명성이 필요하다고 말했습니다).

   관리자 섹션에 대한 플러그인을 작성하는 경우 다음을 사용해야합니다.

   add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files");
   

   admin_enqueue_scripts는 관리자 섹션의 올바른 훅이며 프런트 엔드에 WP_ENQUEUE_SCRIPT를 사용합니다.

7. ---

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

   먼저 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__ ) );
   

   이 후에는 필요한 페이지에서 JS 및 CSS를로드하기위한 WP_ENQUEUE_SCRIPT () 및 WP_ENQUEUE_STYLE () 함수를 호출 할 수 있습니다.

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

   나는 여기에 좋은 예를 보여줍니다 http://wiki.workassis.com/wordprese-create-advanced-custom-plugin-using-oop/

8. ---

   8.매우 간단합니다 :

   매우 간단합니다 :

   프런트 엔드에 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');
   

9. ---

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

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

   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');
   

10. ---

    10.다음 코드로 이후 끝 부분과 프런트 엔드에 스크립트와 CSS를 추가 할 수 있습니다. 이것은 간단한 클래스이며 함수는 객체 지향 방식으로 호출됩니다.

    다음 코드로 이후 끝 부분과 프런트 엔드에 스크립트와 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();
    }
    

from https://stackoverflow.com/questions/3760222/how-to-include-css-and-jquery-in-my-wordpress-plugin by cc-by-sa and MIT license