Code ist Poesie

Code kaputt: ein kurzer Werkstattbericht

Hier geht es um einige Nervensägen und Zeitfresser, die mir kürzlich beim Bau von WordPress-Websites untergekommen sind.

Ich möchte von einigen kleinen Schwierigkeiten beim Website-Bau berichten, die mich in der vergangenen Woche definitiv zu viel Zeit gekostet haben, deren Lösung aber letztendlich viel zu einfach war.

Webfonts: auf dem Desktop geladen, auf Mobile nicht

Eine seit 2015 bestehende Website sollte mithilfe von Fonts umgestaltet werden, die von Google Fonts kommen. Die neu gestaltete Website sah bei mir auf dem Desktop wunderbar aus, aber auf Mobile erschienen nur die Fallback-Schriftarten. Das Stylesheet von Google hatte ich über die functions.php an wp_print_styles drangehängt. Wie konnte das sein?

Ich probierte alle anderen Methoden aus: In der header.php zu verlinken. Sogar: per @import in mein Stylesheet zu importieren. Mit dem google-webfonts-helper herunterladen und lokal einbinden. Per Plugin lokal einzubinden. Nix. Bis ich dann endlich mal darauf kam, dass die Website bei mir auf dem Desktop nur deshalb richtig aussah, weil ich exakt diese Fonts in meinem Betriebssystem installiert hatte und der Browser sie einfach von dort aus lud. Schlau, schlau. Das war zwar die simple Erklärung für die Diskrepanz zwischen meinem Desktop und Mobile, aber nicht des Rätsels Lösung.

Deny from me

Im Dashboard der oben genannten Seite hatte ich noch ein merkwürdiges Phänomen: Manche Plugin-Icons wie etwa das von Duplicator wurde mir angezeigt, das WooCommerce-Icon jedoch nicht, sondern nur so ein lustiges kleines Kästchen mit einer Unicode-Hex-Nummer drin. 🤔

Ich kam jetzt mal auf die schlaue Idee, den Fehlercode zu googlen, den mir die Konsole ausspuckte:

downloadable font: download failed 
(font-family: "WooCommerce" style:normal weight:400 stretch:100 src index:1): 
status=2147746065 
source: https://meinedomain.de/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff

Und schon stieß ich im Forum des von mir ziemlich geschätzten GeneratePress-Themes auf die Lösung, denn ein gewisser Jakob Smith schien ähnliche Probleme zu haben. Seine simple Erkenntnis: „ The culprit was an .htaccess in wp-content, which only allowed certain filetypes to be downloaded.“

Moment, eine .htaccess im wp-content-Folder? Tatsache. Was stand drin?

Order deny,allow
 Deny from all
 <Files ~ ".(xml|css|jpe?g|png|pdf|gif|js)$">
 Allow from all
 </Files>

Okay, das erklärte dann wohl, warum die Google Fonts nicht lokal eingebunden werden konnten. Kaum hatte ich hier die entsprechenden Endungen ergänzt, war das Problem gelöst. Und warum wurde das Duplicator-Icon angezeigt, das WooCommerce-Icon nicht? Duplicator bringt sein Icon als Inline-SVG mit, WooCommerce lädt eine eigene Icon-Font.

Aber wer hatte diese .htaccess denn bloß da hingesetzt? Vielleicht derjenige, der die Website vor fünf Jahren aufgesetzt hatte? Genau, ich selbst nämlich. 😂

Die Tabelle überlistet

Zum Abschluss noch eine schöne Dreiecks-Liebesbeziehung. Die Liebhaber*innen: WooCommerce, die Ergänzung German Market und das Weta-Theme von Elmastudio. Schauplatz: der Warenkorb und folgende Seiten auf Mobile. Was war los? Der Abschnitt mit der Überschrift Warenkorb Summe wurde nicht komplett angezeigt, sondern wurde nach rechts aus dem Viewport rausgeschoben, ohne jedoch einen Vertical Scroll zu produzieren. Das Inspect-Tool zeigte mir, dass WooCommerce hier ein paar hübsche Tabellen zum Einsatz kommen lässt (geht das heutzutage nicht anders?) und German Market sich dann unter der Zwischensumme einklinkt, um die Versandkosten korrekt anzuzeigen.

Aber ich hätte mal gleich etwas genauer hinschauen sollen, denn zunächst habe ich hier munter versucht, den Content irgendwie kleinzukriegen und in die Zellen zu quetschen: Schriftgrößen überall runter, Silbentrennung rein, überall das Padding reduziert. Es hat ewig gebraucht, dann hat es halbwegs gepasst.

Viel zu spät bin ich allerdings drauf gekommen, dass WooCommerce die Versandmethoden hier als ungeordnete Liste mit der CSS-Klasse woocommerce-shipping-methods aufführt. Und was bringt das Weta-Theme „hinterhältigerweise“ mit? Die folgende ul-Definition:

ul {
	margin: 0 0 30px 0;
	padding-left: 40px;
	list-style-position: inside;
}

Und genau dieses üppige Padding war es, was mir da die ganze Zeit das Layout so verzog. Die simple Lösung:

ul.woocommerce-shipping-methods {
    padding-left: 0;
}

Shruggie-Schluss

Für viele wären die oben beschriebenen Hürden vermutlich Pipifax und innerhalb von drei Minuten geklärt gewesen – mich haben sie ein paar Stündchen gekostet. Was solls, ich nehme es als Teil des Lernprozesses. 🤷

Was hat euch in letzter Zeit unnötigerweise aufgehalten? Was war euer letzter Aha–Moment, ob peinlich berührt oder nicht? Teilt es in den Kommentaren!


Die Illustration oben stammt von Ouch.pics / Icons8.com.

2 Kommentare zu “Code kaputt: ein kurzer Werkstattbericht

  1. Ich vergesse jedes (wirklich jedes) mal bei do_shortcode() das echo davor. Es klingt ja auch so, als ob da etwas „getan“ wird von der Funktion. Und dann wundere ich mich, warum nichts passiert. Bis ich realisiere, dass da noch ein „echo“ davor gehört, damit auch was passieren kann. m(

    • Die Gefahr laufe ich nicht, da ich mir so etwas dann eher aus Snippets, Tutorials und der Dokumentation zusammenkopiere. Aber mein Problem ist dann, dass ich dann manchmal die Fehler anderer übernehme und sie dann erst recht nicht identifizieren kann 🤓

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert