programing

Wordpress 플러그인 개발에 부트스트랩을 포함하려면 어떻게 해야 합니까?

iphone6s 2023. 3. 18. 08:23
반응형

Wordpress 플러그인 개발에 부트스트랩을 포함하려면 어떻게 해야 합니까?

플러그인을 개발하고 있는데, 부트스트랩을 플러그인에 포함시키고 싶습니다.포함시키는 가장 좋은 방법은 무엇입니까?이것과 관련된 것을 찾을 수 없었습니다.지금까지 몇 개의 부트스트랩 플러그인을 찾았습니다.이 플러그인은 필요 없습니다.부트스트랩의 js와 css 요소를 플러그인에 포함해야 합니다.부트스트랩은 처음입니다.

또 WP테마에서와 같은 것을 시도했지만, 잘 되지 않습니다.

더 많은 정보가 필요하시면 저에게 물어보세요.

WP 테마와 비슷한 것을 메인 파일인 index.php에 포함시키려고 했습니다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>                 

를 사용해야 합니다.wp_register_script()그리고 나서.wp_enqueue_script()js의 경우.

를 사용해야 합니다.wp_register_style()그리고 나서.wp_enqueue_style()(CSS의 경우)

다음 js 예를 참조하십시오.

wp_register_script('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
wp_enqueue_script('prefix_bootstrap');

그리고 이제 css도 똑같이...

wp_register_style('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
wp_enqueue_style('prefix_bootstrap');

아약스를 사용할 경우 재사용 가능한 방법으로 보관하는 것이 좋습니다.이렇게 하면 Ajax 메서드 내의 모든 스크립트 또는 스타일시트를 다시 등록할 필요가 없습니다.

function prefix_enqueue() 
{       
    // JS
    wp_register_script('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
    wp_enqueue_script('prefix_bootstrap');

    // CSS
    wp_register_style('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
    wp_enqueue_style('prefix_bootstrap');
}

"prefix_"를 사용하면 충돌을 방지하고 장기적으로 문제를 줄일 수 있습니다.

'wp_head' 액션을 사용하여 페이지가 로드될 때마다 사이트 헤더에 코드를 추가할 수 있습니다.플러그인에 다음과 같은 것을 넣습니다.

    add_action('wp_head','head_code');

function head_code()
{

$output = '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>';    
$output .= '<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>'; 
$output .= '<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>';

echo $output;

}

플러그인의 메인 PHP 파일에 Bellow 코드를 사용합니다."wp_print_styles" 액션훅에는 CSS 스타일이 포함됩니다."wp_print_filength" 액션훅에는 자바 스크립트가 포함되어 있습니다.플러그인에 Bootstraps Javascript 및 Style 시트를 포함하려면 이 두 개의 후크를 사용합니다.

 add_action( 'wp_print_styles', 'add_my_plugin_stylesheet' );
 function add_my_plugin_stylesheet() {
wp_register_style('mypluginstylesheet', '/wp-content/plugins/postgrid/style.css');

wp_register_style('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
wp_enqueue_style('mypluginstylesheet');
wp_enqueue_style('prefix_bootstrap');

}

add_action('wp_print_scripts','add_my_plugin_js');
function add_my_plugin_js(){
wp_register_script('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
wp_enqueue_script('prefix_bootstrap');

}

언급URL : https://stackoverflow.com/questions/24016321/how-to-include-bootstrap-in-wordpress-plugin-development

반응형