wp_head에 다른 css 파일 추가

wp_head에 다른 css 파일 추가

최신 워드프레스와 함께 제공되는 표준 20대 테마를 편집하고 있습니다.

wp_head에 자신의 .css 파일을 추가해야 하는데 어떻게 해야 할지 모르겠어요.현재 wp_head 이외에서 제 파일을 호출하고 있습니다만, 이것은 지저분하기 때문에 제대로 하고 싶습니다.

<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo("template_url"); ?>/bootstrap.css" />
<script type="text/javascript"   src="<?php bloginfo("template_url"); ?>/js/bootstrap.min.js"></script>

<?php wp_head(); ?>

wp_head에 들어가는 것은 어디에서 정의되고 있으며, 어떻게 자신의 것을 wp_head에 추가할 수 있습니까?

wp_head()에 자신의 css를 추가하려면 WordPress 함수 집합을 사용해야 합니다.

우선, 이것을 테마의 기능에 넣습니다.php 파일:

add_action('wp_enqueue_scripts', 'your_function_name');

(이것은 add 액션훅을 사용하여 wp_enqueue_scripts 액션에 후크합니다).

그런 다음 기능에 기능을 추가해야 합니다.php 파일은 WordPress 함수 wp_enqueue_style을 사용합니다.

function your_function_name() {
    wp_enqueue_style('my-script-slug',  get_stylesheet_directory_uri() . '/your_style.css');
}

get_stylesheet_directory_uri()를 사용하면 테마에 적합한 스타일시트 디렉토리를 얻을 수 있습니다.

이는 스크립트를 헤더에 큐잉하는 적절한 방법이기도 합니다.예:

function your_function_name() {
    // Enqueue the style
    wp_enqueue_style('my-script-slug',  get_stylesheet_directory_uri() . '/your_style.css');
    // Enqueue the script
    wp_enqueue_script('my-script-slug',  get_stylesheet_directory_uri() . '/your_script.js');
}

WordPress wp_enqueue_script 함수를 사용합니다.

마지막으로, 213(또는 다른 핵심 주제) 주제를 직접 변경하는 것은 보통 권장되지 않습니다.권장사항은 아이테마를 만드는 것입니다(제 생각에는 과잉이지만 언급할 가치가 있습니다).

스타일시트에 wp_enqueue_style을 사용하고 javascript에 wp_enqueue_model을 사용합니다.

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

@cale_b 플러그인은 jQuery 라이브러리를 기반으로 합니다.wp_head() 함수의 jQuery 호출은 이 방법으로 성공하지 못했습니다.

wp_enqueue_script_jquery', 'get_stylesheet_uri(); . 'twp/jquery.min.jquery' ;

적절한 방법은 헤더에 이것을 추가하는 것입니다.php는 무엇보다도...

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

wp_head()보다 먼저 jquery를 호출하는 것이 중요합니다.다른 Import의 훅은...WordPress에는 jQuery 라이브러리가 부속되어 있습니다.wp-admin 페이지 및 페이지에 있는 다른 $post 및 $get 요청에 사용하고 있기 때문입니다.스크립트를 사용하는 것이 테마 디렉토리에 자신의 jquery.min.js 파일을 추가하는 것보다 훨씬 안전하고 쉬운 방법입니다.

wp_head(); 함수는 스타일시트를 호출하는 가장 좋은 방법이지만 Javascripts와 Javascript 라이브러리를 호출하면 버그가 발생할 수 있습니다.

또한 WordPress가 $를 jQuery 변수로 렌더링하지 않을 수 있으며 TypeError에 대한 오류가 발생할 수 있습니다.이것은 물론 올바른 것입니다.이 경우 모든 $를 WordPress jQuery 라이브러리 내에서 정의된 변수인 jQuery로 변경해야 합니다.

또한 인라인 Javascript 등이 필요할 수 있습니다.

<script>
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
</script>

이러한 인라인 스크립트는 모두 index.php 또는 헤더 내부에 있을 수 없습니다.php nor footer.footer...다른 your-inline-scripts.js에 모든 것을 나열하고 이전에 나열했어야 할 위치에 대해 다음과 같이 호출할 수 있습니다.

    <script type="text/javascript"  
src="<?php bloginfo("template_url"); ?>/js/your-inline-scripts.js"></script>

또는

<script type="text/javascript"
   src="<?php echo get_stylesheet_directory_uri(); ?>/js/yourScript.js"></script>

난 이 두 번째 옵션이 더 좋아

스타일시트는 거의 모든 장소에서 로드할 수 있지만 기본 워드프레스 설치에서는 wp_head() 후크를 사용하여 메인 스타일시트(style.css)를 출력합니다.

예:Twenteen에서는 232행의 함수에 로딩됩니다.php

    // Load our main stylesheet.
    wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri(), array( 'genericons' ) );

이 후크를 사용하는 것이 바람직한 이유 중 하나는 동일한 스타일시트를 사용하는 두 개의 플러그인이 있고 둘 다 동일한 wp_enqueue_style 핸들을 사용하는 경우 WordPress는 페이지에 스타일시트를 한 번만 추가할 수 있기 때문입니다.또 다른 이유는 이 핸들에 종속성 파라미터가 있기 때문입니다만, 그것은 다른 이야기입니다.

음, 위와 같으나 wp_head가 호출된 후 시트에 링크할 수도 있습니다.

<?php wp_head(); ?>
<link href="/wp-content/themes/YourTheme/cssFolder/YourOtherStyleSheet.css">

읽기 쉬우니까 보통 이렇게 해요.

또, 디폴트 테마를 변경하는 대신에, 깔끔한 공백의 wp 테마에 http://html5blank.com등의 것을 사용하는 것을 추천합니다(따라서, 자녀 테마는 전혀 다른 테마를 사용하지 말아 주세요).

언급URL : https://stackoverflow.com/questions/18519573/adding-other-css-files-to-wp-head