Dodawanie innych plików css do wp_head

Question

Edytuję standardowy motyw twentythirteen, który jest dostarczany z najnowszym wordpress.

Potrzebuję dodać kilka moich plików .css do wp_head, ale nie jestem pewien jak to zrobić. Obecnie dzwonię do moich plików poza wp_head, ale jest to niechlujne i chciałbym zrobić to poprawnie.

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

Gdzie definiuje się, co się dzieje z wp_head i jak mogę do niego dodać?

Answer 1

Aby dodać własny css w wp_head(), trzeba użyć zbiór funkcji WordPress:

Najpierw umieść to w pliku functions.php kompozycji:

add_action('wp_enqueue_scripts', 'your_function_name');

(. Wykorzystuje hak add action, podpinania do działania wp_enqueue_scripts)

Następnie trzeba dodać funkcję do pliku functions.php, które wykorzystują funkcję WordPress wp_enqueue_style:

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

Uwaga na użycie get_stylesheet_directory_uri() - spowoduje to pobranie odpowiedniego katalogu stylów dla kompozycji.

Jest to również właściwy sposób na umieszczenie skryptów w nagłówku. Przykład:

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

Który korzysta z funkcji WordPress wp_enqueue_script.

Na koniec warto wspomnieć, że zazwyczaj zniechęca się do zmiany motywu dwudziestu trzynastu (lub innego motywu przewodniego). Rekomendacją jest stworzenie motywu dziecięcego (przesada moim zdaniem, ale warto wspomnieć).

Answer 2

użycie wp_enqueue_style dla stylów i wp_enqueue_scripts dla javascript

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

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

Answer 3

Hmm tak aby wyżej ale możliwe jest również link do swoich arkuszy po wp_head nazywa się tak

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

Zazwyczaj jest to, co mam zrobić, jak to jaśniej czytać.

Ponadto chciałbym również polecić za pomocą czegoś podobnego http://html5blank.com za miły czystej pustej WP Theme zamiast próbować zmienić domyślny motyw (SO Brak motywu dziecko po prostu zupełnie inny temat)

Answer 4

Arkusze stylów można załadować prawie gdziekolwiek, ale domyślna instalacja wordpress używa haka wp_head() do wyprowadzania głównego arkusza stylów (style.css);

Na przykład: W systemie Twentyfourteen jest on ładowany do linii 232 funkcji.php

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

Jednym z powodów jest to wolał używać tego haka jest to, że jeśli masz dwie wtyczki, które korzystają z tego samego arkusza stylów i zarówno przy użyciu tego samego wp_enqueue_style obsłużyć następnie WordPress doda stylów tylko na stronie raz, kolejnym powodem jest to, że uchwyt ma parametr o zależnościach, ale to już inna historia ...

Answer 5

@cale_b Moi wtyczki są oparte na bibliotece jQuery i jQuery z wywołaniem funkcji wp_head() nie powiodło się na tej drodze

wp_enqueue_script ('jquery', 'get_stylesheet_uri(); . "js/jquery.min.js");

właściwym sposobem jest dodanie tego do header.php zanim wszystko ...

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

To bardzo ważne, aby zadzwonić jquery pierwszy przed wp_head(); hak innych importów ... WordPress jest dostarczany z biblioteką jQuery, ponieważ używa go do stron wp-admin oraz innych żądań $ post i $ get na stronie ... Korzystanie ze skryptu jest o wiele bezpieczniejsze i łatwiejsze sposób następnie dodając własny plik jquery.min.js do katalogu tematów ...

wp_head(); Funkcja jest po prostu najlepszym sposobem wywoływania arkuszy stylów, ale gdy dojdzie do bibliotek Javascript i JavaScript, może się to okazać błędne.

Należy również pamiętać, że czasami WordPress nie będzie renderował Twojego '$' jako zmiennej jQuery, a otrzymasz błędy dla TypeError, co oczywiście jest poprawne. W takim przypadku należy zmienić cały „$” z „” jQuery który jest również zdefiniowana zmienna wewnątrz WordPress jQuery biblioteki ...

Należy również pamiętać, że czasami trzeba będzie inline JavaScript, etc

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

Wszystkie te wbudowane skrypty nie powinny znajdować się w pliku index.php ani w pliku header.php ani footer.php ... Można je wszystkie umieścić w innym in-your-inline-scripts.js i wywoływać je w ten sposób w miejscu powinny być wymienione wcześniej:

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

lub

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

wolę tę drugą opcję ...