Schlagwort-Archive: Tabs

WordPress: Theme Darstellung zerstört nach PlugIn installation | Problem – wp_head()

Das momentane Theme funktioniert nicht mehr richtig, nachdem ein neues PlugIn installiert wurde?

Was kann die Ursache sein?

Die meisten PlugIns bringen Code mit, der Javascript beinhaltet. Das ist soweit nicht verkehrt nur muss man sich im Klaren sein, WANN diese aufgerufen werden.

Um einen optimalen Aufruf einer Internetseite zu gewährleisten, sollte man unter anderem darauf achten, dass die Reihenfolgen von .css und .js Dateien in Headerbereich eingehalten wird.

Grundsätzlich gilt:

CSS Dateien vor Javascript Dateien.

Im Header werden alle notwendigen .css Dateien aufgerufen, die die Darstellung der Internetseite steuern. Danach werden alle .js Dateien aufgerufen. In den seltensten Fällen kann es vorkommen, dass bestimmte .css Dateien nach Aufruf von Javascript (.js) Dateien die Ausgabe verfälschen oder sogar unterbinden.

Geschehen so bei mir in einem unserer Blogs. Wir benutzen in diesem Blog das Theme "Branfordmagazine". Nachdem ich das Wibiya PlugIn installiert hatte, funktionierte das Anzeigen der Tabs auf der Startseite nicht mehr.

Über den "Code Inspector" von Chrome (rechte Maustaste auf die Internetseite und ganz unten auf: "Inspect element"), bin ich darauf gekommen. Hier kann man sich über die Registerkarte "Audits" die Performance und den Aufbau "auswerten" lassen. Unter dem Punkt   "Remove unused CSS rules" und "Optimize the order of styles and scripts". Hier wurde mir dann mitgeteilt, dass hier .css Dateien nach .js geladen wurden und manche .css gar nicht.

Wie ist die Steuerung im Headerbereich bezüglich dieser beiden Dateiarten möglich? Wann und wo werden und sollten .css Dateien und wann und wo sollten .js Dateien stehen?

Schauen wir kurz in einen Ausschnitt des Headerbereichs des Theme "Branfordmagazine":

Headerbereich des Theme "Branfordmagazine"

 Hier kann man den Aufbau erkennen

  1. meta Daten
  2. .css Dateien
  3. .js Dateien

Was ist also falsch? Es gibt dort noch einen Eintrag, nämlich wp_head(). Mit dieser Funktion können PlugIn Schreiber Code in den Headerbereich schreiben. Auch das Wibiya PlugIn nutzt diese Technik und führt noch vor den .css Dateien, .js Dateien aus.

Nachdem ich die wp_head() Funktion unter die .css Dateien einfügte funktionierte das Theme "Branfordmagazine" auch wieder.

Anmerkung: Nicht den Eintrag wp_head() löschen. Er muss zwischen den Tags <head> und </head> stehen bleiben. Man kann selber nur steuern wo er dort stehen soll.

Bin auf Eure Reaktionen über die Kommentarfunktion gespannt..