Hinzufügen anderer CSS-Dateien zu wp_head

Question

Ich bearbeite das Standardthema twentythirteen, das mit dem neuesten Wordpress kommt.

Ich muss ein paar meiner eigenen .css-Dateien in die wp_head hinzufügen, aber ich bin mir nicht sicher, wie das geht. Ich rufe meine Dateien gerade außerhalb von wp_head auf, aber das ist chaotisch und würde es gerne richtig machen.

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

Wo wird definiert, was in wp_head abläuft und wie füge ich mein eigenes hinzu?

Answer 1

Um eigene CSS im wp_head() hinzufügen, müssen Sie eine Sammlung von Wordpress-Funktionen nutzen:

Zuerst werden Sie dies in die Funktion functions.php Ihres Themas einfügen:

add_action('wp_enqueue_scripts', 'your_function_name');

(. Er nutzt die add action Haken, Einhaken in die wp_enqueue_scripts Aktion)

Dann müssen Sie die Funktion, um Ihre functions.php-Datei hinzufügen, die die Wordpress-Funktion nutzen, wird wp_enqueue_style:

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

Beachten Sie die Verwendung von get_stylesheet_directory_uri() - dies ruft das richtige Stylesheet-Verzeichnis für Ihr Thema ab.

Dies ist auch die richtige Methode zum Einreihen von Skripten in Ihre Kopfzeile. Beispiel:

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

, die die Wordpress wp_enqueue_script Funktion verwendet.

Schließlich ist es erwähnenswert, dass die Änderung der dreiundzwanzig (oder jedes andere Kernthema) Thema direkt wird normalerweise abgeraten. Die Empfehlung ist, ein Kind-Thema zu erstellen (Overkill meiner Meinung nach, aber erwähnenswert).

Answer 2

Verwendung wp_enqueue_style für Stylesheets und wp_enqueue_scripts für Javascript

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

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

Answer 3

Hmm ja auf die oben, aber es ist auch möglich, Ihre Blätter zu verbinden, nachdem wp_head genannt wird so

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

Dies ist in der Regel, was ich tun, wie es klarer zu lesen.

Darüber hinaus hat ich auch so etwas wie http://html5blank.com für ein schönes, sauberes leer wp Thema mit würde empfehlen, anstatt zu versuchen, die Standard-Theme (also kein Kind Thema nur ein anderes Thema insgesamt)

Answer 4

Sheets fast geladen werden kann, verändern überall, , aber die Standard-Wordpress-Installation verwendet die wp_head() Hook, um das Haupt-Stylesheet (style.css) auszugeben;

Zum Beispiel: In Twentyfourteen ist es bei Zeile 232 der Funktionen geladen.php

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

Einer der Gründe, warum es bevorzugt ist diesen Haken zu verwenden, ist, dass, wenn Sie zwei Plug-in, die die gleichen Sheet und beide mit dem gleichen wp_enqueue_style Griff verwenden, dann wird Wordpress nur das Stylesheet auf der einmal Seite hinzufügen, ein weiterer Grund ist, dass dieser Griff einen Abhängigkeitsparameter hat, aber das ist eine andere Geschichte ...

Answer 5

@cale_b Meine Plugins basieren auf jQuery-Bibliothek und den Aufruf der jQuery aus der wp_head (Funktion) war auf diese Weise nicht erfolgreich

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

der richtige Weg, dies den header.php vor allem ist das Hinzufügen ...

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

Es ist sehr wichtig, dass Sie anrufen (jquery zuerst vor dem wp_head); hook der anderen Importe ... Das WordPress kommt mit der jQuery-Bibliothek, weil er es für die wp-admin-Seiten und einige andere $ post- und $ get-Anfragen auf der Seite verwendet ... Die Verwendung ihres Skripts ist viel sicherer und einfacher So fügen Sie Ihre eigene jquery.min.js-Datei in das Themes-Verzeichnis ein ...

wp_head(); Funktion ist nur der beste Weg, die Stylesheets aufzurufen, aber wenn es zu den Javascripts und Javascript Bibliotheken kommt, kann es fehlerhaft werden.

Beachten Sie auch, dass WordPress manchmal Ihre '$' nicht als jQuery-Variable rendert und Sie Fehler für TypeError bekommen, was natürlich korrekt ist. In diesem Fall sollten Sie alle die ‚$‘ mit ‚jQuery‘ ändern, die auch eine definierte Variable in der Wordpress-jQuery-Bibliothek ist ...

Beachten Sie auch, dass Sie manchmal ein Inline-Javascript erforderlich, etc

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

Alle diese Inline-Skripte sollten nicht in Ihrer index.php noch Ihre header.php noch footer.php sein ... Sie können sie alle in einer anderen your-inline-scripts.js auflisten und sie einfach so nennen Sie sollten vorher wie folgt aufgelistet worden sein:

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

oder

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

ich diese zweite Option vorziehen ...