Laden von CSS in WordPress the Right Way

German (Deutsch) translation by Max Benjamin (you can also view the original English article)

Ohne CSS, Sie haben sehr begrenzte Möglichkeiten, um Stil Ihre web-Seiten. Und ohne die richtige CSS-Einbindung in WordPress, können Sie machen es sehr schwer für theme-Nutzer das Design anpassen-styling.

In diesem tutorial werden wir einen Blick auf den rechten Weg zu enqueue-CSS in WordPress.

WordPress ist derzeit das beliebteste content-management-system in der Welt, und es hat zig Millionen von Nutzern. Das ist, warum, um zu einem erfolgreichen Thema, wir müssen darüber nachdenken, wie jeder einzelne WordPress-Nutzer und versuchen Sie, gehen durch das Buch und laden unser CSS-Dateien in unsere Themen richtig.

Der Falsche Weg, um das Laden von CSS in WordPress

Im Laufe der Jahre, WordPress gewachsen ist, Ihren code, um zu machen es mehr und mehr flexible, und enqueueing CSS und JavaScript wurde eine Bewegung auf, die Richtung. Unsere schlechten Gewohnheiten blieb für eine Weile, aber. Mit dem wissen, dass WordPress eingeführt, CSS-und JavaScript-enqueueing, wir weiterhin fügen Sie diesen code in unser header.php Dateien:

1	<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
2

...oder wir Hinzugefügt, den folgenden code in unsere functions.php Dateien, denken, es wurde besser:

<?php

function add_stylesheet_to_head() {
  echo "<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>";
}

add_action( 'wp_head', 'add_stylesheet_to_head' );

?>

In den oben stehenden Fällen, WordPress kann nicht feststellen, ob die CSS-Dateien geladen werden, in der Seite oder nicht. Das könnte ein furchtbarer Fehler!

Wenn ein anderes plugin verwendet die gleiche CSS-Datei, es wäre nicht in der Lage zu überprüfen, ob die CSS-Datei wurde bereits in die Seite eingeschlossen. Dann das plugin lädt die gleiche Datei ein zweites mal, was zu doppelten code.

Zum Glück, WordPress hat eine ziemlich einfache Lösung, um Probleme wie diese: Registrierung und enqueueing stylesheets.

Der Richtige Weg zum Laden von CSS in WordPress

Wie wir bereits gesagt, WordPress hat sich eine Menge im Laufe der Jahre, und wir haben zu denken, über jede einzelne WordPress-Benutzer in der Welt.

Zusätzlich zu Ihnen, wir müssen auch Tausende von WordPress-plugins berücksichtigt. Aber lassen Sie sich nicht diese großen zahlen erschrecken: WordPress hat ziemlich nützliche Funktionen für uns, richtig zu laden, CSS-styles in WordPress.

Lassen Sie uns einen Blick.

Die Registrierung der CSS-Dateien

Wenn du gehst zum laden von CSS-stylesheets, sollten Sie sich diese zunächst mit der wp_register_style () - Funktion:

1	<?php
2	wp_register_style( $handle, $src, $deps, $ver, $media );
3	?>

$handle (string, notwendig) eindeutiger name für Ihre stylesheet. Andere Funktionen wird mit diesem "Griff" zu enqueue und drucken Sie Ihre stylesheet.
$src (string, required) bezieht sich auf die URL des Stylesheets. Sie können Funktionen verwenden, wie get_template_directory_uri() auf, um die style-Dateien in Ihrem theme-Verzeichnis. Nicht immer denken, über hard-coding!
$deps (array, optional) Griffe Namen für abhängige Stile. Wenn Ihr stylesheet nicht funktionieren, wenn einige andere style-Datei fehlt, verwenden Sie diesen parameter, um die "Abhängigkeiten".
$ver (string-oder boolean, optional) ist die Versionsnummer. Sie können Ihr Thema ist die Versionsnummer oder make-up, wenn Sie wollen. Wenn Sie nicht möchten, verwenden Sie die Versionsnummer, setzen Sie es auf null. Es wird standardmäßig auf false, was macht WordPress eine eigene Versionsnummer.
$media (string, optional) ist die CSS-media-Typen wie z.B. "screen" oder "handheld" oder "print". Wenn Sie nicht sicher, Sie brauchen, um es zu verwenden, verwenden Sie es nicht. Es wird standardmäßig auf "alle".

Hier ist ein Beispiel, um die wp_register_style () - Funktion:

<?php

// wp_register_style() example
wp_register_style(
	'my-bootstrap-extension', // handle name
	get_template_directory_uri() . '/css/my-bootstrap-extension.css', // the URL of the stylesheet
	array( 'bootstrap-main' ), // an array of dependent styles
	'1.2', // version number
	'screen', // CSS media type
);

?>

Registrieren Stile ist eine Art von "optional" in WordPress. Wenn Sie nicht denken, Ihr Stil wird von jedem plugin-oder sind Sie nicht zu verwenden, beliebigen code zu laden es wieder, du bist frei, enqueue-Stil ohne Registrierung. Sie sehen, wie es unten getan.

Enqueueing der CSS-Dateien

Nach der Registrierung in unserem style-file, müssen wir auf "enqueue", um es bereit zum laden in unser Thema, die im - Abschnitt.

Wir tun dies mit der wp_enqueue_style () - Funktion:

1	<?php
2	wp_enqueue_style( $handle, $src, $deps, $ver, $media );
3	?>

Die Parameter werden genau das gleiche mit den wp_register_style () - Funktion, so dass keine Notwendigkeit für Sie zu wiederholen.

Aber wie gesagt die wp_register_style () - Funktion ist nicht verpflichtend, sollte ich Ihnen sagen, dass Sie verwenden können wp_enqueue_style() in zwei verschiedenen Arten:

<?php

// if we registered the style before:
wp_enqueue_style( 'my-bootstrap-extension' );

// if we didn't register it, we HAVE to set the $src parameter!
wp_enqueue_style(
	'my-bootstrap-extension',
	get_template_directory_uri() . '/css/my-bootstrap-extension.css',
	array( 'bootstrap-main' ),
	null, // example of no version number...
	// ...and no CSS media type
);

?>

Beachten Sie, dass wenn ein plugin brauchen, um Ihre stylesheet oder Sie beabsichtigen, es zu laden, die in verschiedenen teilen in Ihrem Thema sind, sollten Sie auf jeden Fall registrieren.

Laden Sie die Stile In Unsere Website

Wir können nicht einfach den wp_enqueue_style () - Funktion überall in unser Thema – wir müssen Sie nutzen "Aktionen". Es gibt drei Aktionen, die wir verwenden können für verschiedene Zwecke:

wp_enqueue_scripts zum laden der Skripte und Stile in der front-end unserer website,
admin_enqueue_scripts für das laden von scripts und styles, die auf den Seiten unserer administration-panel,
login_enqueue_scripts für das laden von scripts und styles der WordPress-login-Seite.

Hier sind die Beispiele für diese drei Aktionen:

<?php

// load css into the website's front-end
function mytheme_enqueue_style() {
	wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); 
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );

// load css into the admin pages
function mytheme_enqueue_options_style() {
	wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' ); 
}
add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' );

// load css into the login page
function mytheme_enqueue_login_style() {
	wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' ); 
}
add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );

?>

Es gibt eine wichtige Ankündigung Machen WordPress: "wp_enqueue_scripts(), nicht wp_print_styles()!". Es sagt Ihnen, über eine mögliche Inkompatibilität Fehler mit WordPress v3.3.

Einige Extra-Funktionen

Es gibt einige sehr nützliche Funktionen, die über CSS in WordPress: Sie erlauben uns, zu drucken, inline-styles, überprüfen Sie die enqueue-Zustand unserer style-Dateien, fügen Sie meta-Daten für unsere style-Dateien, an-und Abmelden Stile.

Lassen Sie uns einen Blick.

Hinzufügen von Dynamischen Inline-Styles: wp_add_inline_style()

Wenn Ihr Thema hat Optionen passen Sie das Design des Themas, können Sie die inline-styling drucken Sie mit der wp_add_inline_style () - Funktion:

<?php

function mytheme_custom_styles() {
	wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );
	$bold_headlines = get_theme_mod( 'headline-font-weight' ); // let's say its value is "bold"
	$custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';
	wp_add_inline_style( 'custom-style', $custom_inline_style );
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );

?>

Schnell und einfach. Denken Sie jedoch daran: Sie verwenden die gleichen hadle Namen mit dem stylesheet, das Sie hinzufügen möchten inline-styling nach.

Die überprüfung der Enqueue-Zustand des Stylesheet: wp_style_is()

In einigen Fällen, möglicherweise müssen wir die Informationen auf der Stil-Zustand: Wird es angemeldet, wird er in die Warteschlange eingereiht, wird es gedruckt werden oder darauf warten, gedruckt werden? Sie können ihn ermitteln, mit der wp_style_is () - Funktion:

<?php

/*
 * wp_style_is( $handle, $state );
 * $handle - name of the stylesheet
 * $state - state of the stylesheet: 'registered', 'enqueued', 'done' or 'to_do'. default: 'enqueued'
 */

// wp_style_is() example
function bootstrap_styles() {

	if( wp_style_is( 'bootstrap-main' ) {
    
		// enqueue the bootstrap theme if bootstrap is already enqueued
		wp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' );
        
	}
    
}
add_action( 'wp_enqueue_scripts', 'bootstrap_styles' );

?>

Hinzufügen von Meta-Daten, um das Stylesheet: wp_style_add_data()

Hier ist eine tolle Funktion, die aufgerufen wird wp_style_add_data() ermöglicht das hinzufügen von meta-Daten zu Ihrem Stil, einschließlich conditional comments, RTL-Unterstützung und vieles mehr!

Check it out:

<?php

/*
 * wp_style_add_data( $handle, $key, $value );
 * Possible values for $key and $value:
 * 'conditional' string      Comments for IE 6, lte IE 7 etc.
 * 'rtl'         bool|string To declare an RTL stylesheet.
 * 'suffix'      string      Optional suffix, used in combination with RTL.
 * 'alt'         bool        For rel="alternate stylesheet".
 * 'title'       string      For preferred/alternate stylesheets.
 */

// wp_style_add_data() example
function mytheme_extra_styles() {
	wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' );
	wp_style_add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );
	/*
	 * alternate usage:
	 * $GLOBALS['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );
	 * wp_style_add_data() is cleaner, though.
	 */
}

add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );

?>

Fantastisch, nicht wahr?

[Wenn ich mich nicht Irre, dies ist das erste tutorial, das jemals geschrieben über dieses kleine—aber sinnvolle—Funktion.

Abmelden Style-Dateien mit wp_deregister_style()

Wenn Sie jemals brauchen, um "Abmelden" ein stylesheet (um re-registrieren Sie es mit einer modifizierten version, zum Beispiel), können Sie es mit wp_deregister_style().

Mal sehen, ein Beispiel:

<?php

function mytheme_load_modified_bootstrap() {
	// if bootstrap is registered before...
	if( wp_script_is( 'bootstrap-main', 'registered' ) ) {
		// ...deregister it first...
		wp_deregister_style( 'bootstrap-main' );
		// ...and re-register it with our own, modified bootstrap-main.css...
		wp_register_style( 'bootstrap-main', get_template_directory_uri() . '/css/bootstrap-main-modified.css' );
		// ...and enqueue it!
		wp_enqueue_style( 'bootstrap-main' );
	}
}

add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' );

?>

Obwohl es nicht erforderlich ist, sollten Sie immer neu registrieren, einen anderen Stil, wenn Sie sich Abmelden – Sie könnten etwas kaputt, wenn Sie nicht.

[Es gibt auch eine ähnliche Funktion, die aufgerufen wird wp_dequeue_style(), die entfernt die in die Warteschlange eingereiht stylesheets wie der name schon sagt.

Verpackung Alles

Herzlichen Glückwunsch, jetzt wissen Sie alles über CSS in WordPress richtig! Hoffe Euch hat das tutorial.

Haben Sie irgendwelche Tipps oder Erfahrungen, die Sie teilen möchten? Kommentar unten und teilen Sie Ihr wissen mit uns! Und wenn Ihnen dieser Artikel gefallen, vergessen Sie nicht, es mit Ihren Freunden teilen!