it-swarm.com.de

Hinzufügen weiterer CSS-Dateien zu wp_head

Ich bearbeite das Standardthema 23, das in der neuesten Version von WordPress enthalten ist.

Ich muss ein paar meiner eigenen .css-Dateien in den WP-Kopf einfügen, aber ich bin nicht sicher, wie ich das machen soll. Ich rufe meine Dateien derzeit außerhalb von wp_head an, aber dies ist unordentlich 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 geht und wie füge ich mein eigenes hinzu?

24
probablybest

Um Ihr eigenes CSS in die wp_head () einzufügen, müssen Sie eine Sammlung von WordPress Funktionen verwenden:

Zuerst fügen Sie dies in die Datei functions.php Ihres Themas ein:

add_action('wp_enqueue_scripts', 'your_function_name');

(Dies verwendet den Hook add action , der sich in die Action wp_enqueue_scripts einhakt.)

Dann müssen Sie die Funktion zu Ihrer Datei functions.php hinzufügen, die die Funktion WordPress wp_enqueue_style verwendet:

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 der richtige Weg, um Skripte in Ihren Header einzureihen. 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');
}

Wofür wird die Funktion WordPress wp_enqueue_script verwendet?.

Schließlich sollte erwähnt werden, dass das direkte Ändern des Themas 23 (oder eines anderen Kernthemas) normalerweise nicht empfohlen wird. Die Empfehlung ist, ein Kinderthema zu erstellen (Overkill meiner Meinung nach, aber erwähnenswert).

40
cale_b

verwenden Sie 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

1
Tom

@cale_b Meine Plugins basieren auf der jQuery-Bibliothek, und der Aufruf der jQuery über die Funktion wp_head () war auf diesem Weg nicht erfolgreich 

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

der richtige Weg ist das Hinzufügen der Header.php vor allem ...

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

Es ist sehr wichtig, dass Sie jquery zuerst vor dem wp_head () aufrufen. Hook der anderen Importe ... The WordPress wird mit der jQuery-Bibliothek geliefert, da er sie für die wp-admin-Seiten und einige andere $ post- und $ get-Anforderungen auf der Seite verwendet ... Die Verwendung ihres Skripts ist viel sicherer und einfacher Dann fügen Sie Ihre eigene jquery.min.js-Datei im Themes-Verzeichnis hinzu ...

wp_head (); Die Funktion ist nur der beste Weg, um die Stylesheets aufzurufen, aber wenn sie zu den Javascripts- und Javascript-Bibliotheken kommt, kann dies fehlerhaft sein.

Beachten Sie auch, dass WordPress manchmal Ihre '$' nicht als jQuery-Variable darstellt und Sie werden Fehler für TypeError erhalten, was natürlich korrekt ist. In diesem Fall sollten Sie alle '$' mit 'jQuery' ändern, die ebenfalls eine definierte Variable innerhalb der jQuery-Bibliothek von WordPress ist ...

Beachten Sie auch, dass Sie manchmal ein Inline-Javascript usw. Benötigen 

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

Alle diese Inline-Skripte sollten sich weder in Ihrer index.php noch in Ihrer header.php noch in der footer.php befinden. Sie können alle in einer anderen Datei in-your-inline-scripts.js auflisten und so nennen, wo sie es haben sollten zuvor schon so aufgeführt:

    <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 bevorzuge diese zweite Option ...

1
The Bumpaster

Stylesheets können fast überall geladen werden Die standardmäßige Wordpress-Installation verwendet jedoch den wp_head () hook, um das Haupt-Stylesheet (style.css) auszugeben.

Zum Beispiel: In Twentyfourteen wird es in Zeile 232 von functions.php geladen

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

Die Verwendung dieses Hooks wird unter anderem deshalb bevorzugt, wenn zwei Plugins verwendet werden, die dasselbe Stylesheet verwenden und beide dasselbe wp_enqueue_style-Handle verwenden. WordPress fügt das Stylesheet nur einmal auf der Seite hinzu. Ein weiterer Grund ist, dass Handle hat einen Abhängigkeitsparameter, aber das ist eine andere Geschichte ... 

0
maioman