So fügen Sie mit cPanel eine CSS-Datei ordnungsgemäß zu einem WordPress-Theme hinzu

Für einen WordPress-Theme-Entwickler besteht das erste, was er tun muss, darin, seine Struktur zu verstehen. Anschließend geht es darum, das Hinzufügen von Skripten und Stylesheets zu erlernen.

Die meisten Webdesigner machen den Fehler, ein WordPress-Theme wie eine einfache HTML-Vorlage zu erstellen.

Sie sollten verstehen, dass WordPress eine auf PHP basierende Plattform ist und ihre Themen dynamisch sind. Das Hinzufügen einer CSS-Datei erfolgt nicht wie beim Erstellen einer statischen Website.

WordPress hat seinen Codierungsstandard, dem Sie folgen müssen. Das ordnungsgemäße Einreihen einer CSS-Datei in die Warteschlange kann für viele Webentwickler/-designer etwas schwierig sein.

In diesem Tutorial werde ich Sie Schritt für Schritt durch den Prozess führen, der den WordPress-Codex zum Hinzufügen einer CSS-Datei zu einem WordPress-Theme erklärt.

Vorausgesetzt, Sie haben ein gutes WordPress-Hosting  mit eingerichtetem WordPress, können wir loslegen!

Verstehen Sie die Funktion wp_enqueue_style()

Beim Entwickeln einer statischen HTML-Website können Sie die CSS-Datei mit dem Head verknüpfen, bei einem WordPress-Theme ist dies jedoch nicht der Fall.

Mit einem klaren Verständnis von PHP und WordPress Codex sollten Sie lernen, Theme-Funktionen zu verwenden.

Beginnen wir mit der Funktion wp_enqueue_style()  , die zum Verknüpfen einer CSS-Datei mit Ihrem WordPress-Theme verwendet wird. Die Standardparameter sind wie folgt.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
wp_enqueue_style ( $handle, $src, $deps, $ver, $media ) ;
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Lassen Sie mich alle diese Parameter erklären.

  • $handle: –  Es handelt sich um ein Pflichtfeld, das den Namen des Stylesheets enthält
  • $src: –  Es muss ebenfalls ausgefüllt werden. Dabei handelt es sich um den Pfad des Stylesheets relativ zum Stammverzeichnis
  • $deps: –  Es ist optional, ein Array zur Steuerung des Stylesheets zu erstellen
  • $ver:-  Wenn Sie die Version des Stylesheets steuern möchten, können Sie dies tun.
  • $media:-  Wenn Sie das Stylesheet für einen beliebigen Medientyp verwenden möchten, können Sie dies tun. Ansonsten keine Notwendigkeit.

Vielleicht haben Sie jetzt eine Idee bekommen. Es müssen nur die ersten beiden Optionen ausgefüllt werden, den Rest können Sie leer lassen, um die Standardwerte zu übernehmen.

Hinweis: Wenn der Name des Stylesheets nun  „style“ lautet  und es sich im Hauptordner für den Theme-Namen befindet, sieht der Code wie folgt aus.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
wp_enqueue_style ( ‘style’ , get_stylesheet_uri () ) ;
wp_enqueue_style( ‘style’, get_stylesheet_uri() );
wp_enqueue_style( 'style', get_stylesheet_uri() );

Aber wie Sie sehen, schaffen Sie es; Sie müssen eine WordPress-Funktion erstellen, die die Datei ordnungsgemäß mit dem Kopf verknüpfen kann.

Lassen Sie mich Ihnen den Code zeigen.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
functionnew_theme_css_file {
wp_enqueue_style ( ‘style’ , get_stylesheet_uri () ) ;
}
add_action ( ‘wp_enqueue_scripts’ , ‘new_theme_css_file’ ) ;
functionnew_theme_css_file{
wp_enqueue_style( ‘style’, get_stylesheet_uri() );
}
add_action(‘wp_enqueue_scripts’, ‘new_theme_css_file’ );
functionnew_theme_css_file{
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action('wp_enqueue_scripts', 'new_theme_css_file' );

Sie fragen sich vielleicht, wo Sie die Funktion am besten hinzufügen können. Wenn Sie sich ein wenig mit der Entwicklung von WordPress-Themes auskennen, wissen Sie vielleicht, dass die Datei „functions.php“  alle Funktionen steuert.

Sie müssen also die Datei öffnen und diese Funktion hinzufügen.

Wenn Sie es bemerkt haben, gibt es einen Hook „add_action“ mit einem Parameter „wp_enqueue_scripts“, der zum Einreihen von Stilen und Skripten verwendet wird.

Alles, was Sie verstehen müssen, ist die Hauptfunktion wp_enqueue_style()  .

Für unerfahrene WordPress-Entwickler kann es schwierig sein, sich solche technischen Dinge anzueignen, aber wenn sie erst einmal den WordPress-Codex gelernt haben, läuft alles reibungslos.

Ich hoffe, es ist nicht so schwierig, eine CSS-Datei zu einem WordPress-Theme hinzuzufügen

Ich erinnere mich, dass es eine Katastrophe war, als ich vor ein paar Jahren mit der Entwicklung von WordPress-Themes begann. Wenn Sie ständig statische Websites üben und plötzlich die dynamische Natur von Web 2.0 kennenlernen, werden Sie möglicherweise etwas verunsichert.

Sobald Sie sich mit WordPress-Codes beschäftigen, werden Sie diese möglicherweise interessant finden. Das Hinzufügen einer CSS-Datei ist eine der Grundlagen für die Neuentwicklung eines WordPress-Themes.

Abschluss

Webentwicklung kann schwierig sein und neue WordPress-Benutzer abschrecken. Der Leitfaden richtet sich an Personen, die mit der Entwicklung ihres benutzerdefinierten WordPress-Themes beginnen möchten.

Vielen Dank, dass Sie diesem Tutorial gefolgt sind.

Schauen Sie sich diese Top 3 WordPress-Hosting-Dienste an:

A2-Hosting
4.7

1.886 Nutzerbewertungen

2,99 $ /Monat
Startpreis

Besuchen Sie A2 Hosting

Bewertung basierend auf Expertenbewertung
  • Benutzerfreundlich
    4.5
  • Unterstützung
    4,0
  • Merkmale
    4.5
  • Zuverlässigkeit
    4.8
  • Preisgestaltung
    4,0
Hostinger
4.6

2.435 Nutzerbewertungen

2,99 $ /Monat
Startpreis

Besuchen Sie Hostinger

Bewertung basierend auf Expertenbewertung
  • Benutzerfreundlich
    4.7
  • Unterstützung
    4.7
  • Merkmale
    4.8
  • Zuverlässigkeit
    4.8
  • Preisgestaltung
    4.7
HostArmada
5,0

716 Benutzerbewertungen

2,49 $ /Monat
Startpreis

Besuchen Sie HostArmada

Bewertung basierend auf Expertenbewertung
  • Benutzerfreundlich
    4.5
  • Unterstützung
    4.5
  • Merkmale
    4.5
  • Zuverlässigkeit
    4.5
  • Preisgestaltung
    4,0
  • Klicken Sie hier, um das beste WordPress-Hosting speziell für WordPress zu erhalten.