Methoden zum Überschreiben von Styles in WordPress

Nehmen wir an, Sie verwalten eine WordPress-Website. Sie wählen, kaufen und installieren ein vorgefertigtes Theme. Sagen wir, Sie haben ein paar Elemente aus dem WordPress Plugin-Verzeichnis hinzugefügt, um der Website einige erweiterte Funktionen zu geben. Das ist die Genialität des WordPress-Ökosystems. Es ist relativ einfach für jeden mit grundlegenden technischen Fähigkeiten, eine Website zu starten und etwas Leistungsfähiges zusammenzustellen, ohne alles von Grund auf neu aufbauen zu müssen. Es funktioniert einfach großartig und Ihre Website sieht wunderbar aus.

Bis es das nicht mehr tut.

Ich arbeite ein wenig für ein WordPress-Plugin. Die häufigste Meldung an das Support-Team sind zweifellos Situationen, in denen das Plugin mit dem installierten Theme oder einem anderen installierten Plugin in Konflikt gerät. Die Person, die das Problem meldet, hat das Plugin installiert, aber was es tut, sieht überhaupt nicht wie die beworbenen Screenshots des Plugins aus.

Das kann für die Person, die die Website verwaltet, äußerst ärgerlich sein. Wenn dieses Plugin aus dem WordPress-Verzeichnis heruntergeladen wurde, sollte es sofort funktionieren, oder?

Man könnte argumentieren, dass dies eine unrealistische Erwartung ist, wenn man bedenkt, dass die meisten Themes und Plugins von verschiedenen Personen entwickelt werden. Es ist verständlich, dass das Zusammenführen von Code von mehreren Autoren auf derselben Website gelegentlich zu Konflikten führt, trotz der besten Absichten aller, gute Arbeit zu leisten.

Dieser Beitrag wird sich mit dem spezifischen Bereich von Style-Konflikten und Möglichkeiten zu deren Überwindung befassen.

Ich beginne damit, dass es eine schwierige Position ist, ein WordPress Theme- oder Plugin-Entwickler zu sein. Einerseits müssen alle Stylesheets, die ein Plugin einschließt, meinungsstark genug sein, damit sie das tun, was sie tun müssen, und gut aussehen. Andererseits müssen sie die Arbeit des aktiven Themes und anderer Plugin-Entwickler respektieren, damit die Styles gut zusammenarbeiten. Das ist eine Balance, die selbst ein trainierter Seiltänzer zu schätzen weiß.

Wir werden nicht über die verschiedenen Methoden sprechen, die WordPress Plugin-Entwickler haben, um Theme- und Plugin-Styles kompatibler oder themenabhängiger zu machen. Stattdessen werden wir uns die verschiedenen Möglichkeiten ansehen, wie wir widersprüchliche CSS-Codes in WordPress überschreiben können, die es Ihnen ermöglichen, die Gestaltung jeder Komponente einer WordPress-Website zu kontrollieren, unabhängig davon, ob sie vom Theme oder einem Plugin stammt.

Styles im aktiven Theme überschreiben

Alle WordPress-Websites verwenden ein Theme. CSS-Tricks läuft auf WordPress und hat sein eigenes benutzerdefiniertes Theme, das alle Vorlagen- und Stil-Dateien enthält, die benötigt werden, um diesen Beitrag zu generieren. Nun, vorausgesetzt, Sie lesen dies auf der Website und nicht aus einem syndizierten Feed.

Der Punkt ist, dass alle Themes mindestens zwei Dateien benötigen, von denen eine die magische style.css ist. Diese Datei ist erforderlich, da sie Informationen über das Theme enthält, ohne die WordPress das Theme nicht erkennen könnte.

Diejenigen unter Ihnen, die sich ein wenig mit WordPress auskennen, möchten mich vielleicht hier unterbrechen, denn style.css muss keine CSS-Codes enthalten, und Sie hätten Recht. Das muss es nicht und wir könnten einfach unser eigenes Stylesheet in den Header des Themes einfügen und style.css als Hülle für die Erkennung des Themes verwenden. Das ist legitim. Die Datei war jedoch tatsächlich dazu gedacht, der primäre Speicherort für die Dateien eines Themes zu sein, unabhängig davon, wie wir unsere Websites entwickeln.

Wenn Ihr Theme die Datei zur Speicherung der Theme-Styles verwendet, können Sie sie direkt ändern, um beliebige Style-Eigenschaften Ihrer Website zu ändern. Sie kann auch verwendet werden, um Styles hinzuzufügen und zu überschreiben, die möglicherweise in Plugins oder anderen Drittanbieterquellen enthalten sind.

Styles in einem Child-Theme überschreiben

Die Methode des aktiven Themes ist nur gut, wenn Sie der Entwickler des Themes sind. Viele Leute verwenden jedoch Themes, die von anderen Entwicklern erstellt wurden. Ich bin sicher, Sie haben die vielen Theme-Marktplätze gesehen, auf denen Premium-WordPress-Themes verkauft werden, die Sie kaufen, herunterladen und in WordPress installieren. Davon sprechen wir.

Wenn Sie eines dieser Themes verwenden, ist es am besten, Ihre Anpassungen in einem Child-Theme zu verwalten. Dies ist wirklich eine ausgefallene Art, den Prozess der Erstellung eines neuen Ordners in Ihrem WordPress wp-content/themes-Verzeichnis zu beschreiben, der denselben Namen wie Ihr übergeordnetes Theme hat, nur mit -child angehängt.

Wenn zum Beispiel unser übergeordnetes Theme-Verzeichnis css-tricks heißt, dann würde unser Child-Theme-Verzeichnis css-tricks-child heißen. Dieses Verzeichnis benötigt wie das übergeordnete Verzeichnis style.css, und es wird nach der style.css-Datei des übergeordneten Themes auf der Website geladen, sodass alle in der Child-Theme-Version enthaltenen Styles die des übergeordneten Themes überschreiben.

Wünschten Sie nicht, Ihre Teenagerjahre wären so verlaufen?

Jetzt können Sie so viele Änderungen vornehmen, wie Sie benötigen, und Sie werden diese Änderungen nicht verlieren, wenn Sie zukünftige Updates des Theme-Entwicklers installieren.

Eigenes Stylesheet registrieren und einbinden

Dies ist eine meiner Lieblingsmethoden, um Styles in WordPress zu überschreiben. Die Idee ist, dass Sie Ihr eigenes Stylesheet erstellen und es nach allen anderen Stylesheets in das Theme der Website laden, damit Ihres die anderen überschreibt.

Es gibt zwei gut dokumentierte WordPress-Funktionen, eine namens wp_register_style() und die andere wp_enqueue_style(), die uns dies ermöglichen, und sie können entweder in die functions.php-Datei des Haupt- oder des Child-Themes aufgenommen werden, um WordPress anzuweisen, danach zu suchen und sie im Website-Header zu laden.

Dies ist ein einfaches Beispiel dafür, wie die Funktion verwendet werden kann, um ein Stylesheet anhand des Dateinamens (auch Handle genannt) und des Dateipfads aufzurufen.

function my-custom-styles() {
  // Register my custom stylesheet
  wp_register_style('custom-styles', get_template_directory_uri().'/lib/styles/custom-styles.css');
  // Load my custom stylesheet
  wp_enqueue_style('custom-styles');
}
add_action('wp_enqueue_scripts', 'my_custom_styles');

Wir könnten es etwas schicker machen, indem wir WordPress anweisen, es nur auf einer bestimmten Seite zu laden.

// Load my custom stylesheet
function my_custom_styles() {
  // Register my custom stylesheet
  wp_register_style( 'custom-styles', get_template_directory_uri().'/lib/styles/custom-styles.css' ) );
  // Check that the current page is the homepage
  if ( is_home() ) {
    // Then grab the custom stylesheet
    wp_enqueue_style( 'custom-styles' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );

Beachten Sie, dass das Hinzufügen einer zusätzlichen Anfrage zu allen Seiten eine Überlegung zur Leistung darstellt, aber Sie können sicherlich die Kontrolle darüber erlangen.

Art Direction

Art Direction schien um 2009 herum sehr beliebt zu sein, obwohl aktuelle Daten einen leichten Aufschwung zeigen. Die Idee ist, dass das Hinzufügen von Styles zum Head auf einmaliger Basis es Ihnen ermöglichen würde, überzeugende Layouts für jeden Beitrag zu erstellen. Styles, die in einen

<style>-Block im Head injiziert werden, solange sie *nach* den regulären Stylesheets der Website kommen, die wahrscheinlich <link>-Elemente sind, haben die Möglichkeit, bestehende Styles gut zu überschreiben.

Art Direction kann auch als effektives Mittel zum Überschreiben von widersprüchlichen Styles verwendet werden und ist besonders effektiv, wenn diese Konflikte nur an sehr spezifischen Stellen auftreten, ohne dass ein vollständiges Stylesheet erstellt und geladen werden muss, um die Dinge zu bereinigen.

Es gibt zahlreiche WordPress-Plugins, die Art Direction ermöglichen. Es ist tatsächlich nicht allzu schwierig, dies selbst zu bauen.

Ein Plugin verwenden

Wenn ein Plugin Sie in dieses Durcheinander widersprüchlicher Styles gebracht hat, dann gibt es vielleicht auch eines, das Sie da wieder herausbringt, oder? Natürlich gibt es das.

Ich bin sicher, es gibt andere da draußen, aber das, mit dem ich am vertrautesten bin, ist Simple Custom CSS. Die Idee ist ziemlich einfach: Ein neuer Bildschirm wird hinzugefügt, der es Ihnen ermöglicht, CSS zu schreiben. Das eingegebene und gespeicherte CSS wird dem Dokument-Head hinzugefügt, was, wie bei der Art Direction-Methode, die wir besprochen haben, Ihnen die Möglichkeit gibt, andere Styles auf dieser spezifischen Seite zu überschreiben.

WordPress Customizer

WordPress 4.7 führte eine neue Funktion im WordPress Customizer ein, die einen CSS-Editor hinzufügt.

Dies ist im Wesentlichen die native Unterstützung von WordPress für das zuvor erwähnte Simple Custom CSS-Plugin. Mit anderen Worten, Styles werden nach dem Speichern in den Head eingefügt.

WordPress Editor

Oh ja, erinnern Sie sich daran? Sie können die style.css-Datei einer Website tatsächlich direkt in WordPress bearbeiten, indem Sie zu dem versteckten Ort unter Design > Editor navigieren.

Ich sage gleich vorweg, dass ich diesen Ort beängstigend finde. Er gibt Ihnen Zugriff auf den Code jeder Theme-Datei, einschließlich PHP-Vorlagen. Die Änderungen werden nicht versionskontrolliert, daher ist es schwierig zu wissen, was sich geändert hat, falls Sie etwas verbocken, und wenn Ihr Versionskontrollsystem für die Bereitstellung zuständig ist, können Änderungen dort Änderungen überschreiben, die hier vorgenommen wurden.

Dennoch ist es möglich, Styles hier zu überschreiben, und das, ohne einen Texteditor öffnen, Ihre Änderungen speichern und sie dann auf einen Server hochladen zu müssen (über was auch immer Sie für die Bereitstellung verwenden).

Zusammenfassend

Schauen Sie mal: Sieben Methoden zum Überschreiben von Styles in WordPress. Wenn Sie das nächste Mal auf eine Situation stoßen, in der nach der Installation eines Themes oder Plugins auf Ihrer WordPress-Installation etwas nicht richtig aussieht, haben Sie jetzt die Macht, die Kontrolle über das Chaos zu übernehmen und die Dinge wie ein Boss in Ordnung zu bringen.