Meine 5 bevorzugten WordPress CSS Tricks

1. em strong

Wahrscheinlich mehr als ich sollte, benutze ich den eigentlichen Editor direkt in WordPress, um Beiträge zu schreiben. Ich habe den visuellen Editor deaktiviert, einfach weil ich gerne die Tags von dem sehe, was ich tue. Außerdem hasse ich wirklich dieses Popup-Fenster für Links, das erscheint, wenn man den visuellen Editor benutzt. Ich vermute, dass ziemlich viele Leute dasselbe empfinden wie ich.

Am auffälligsten fehlt jede Art von Überschriften-Tag. Wenn Sie lange, untergliederte Beiträge schreiben, wie ich es manchmal tue, ist es ideal, Abschnitte mit Überschriften zu gliedern. Es ist keine große Sache, sie von Hand einzugeben, aber mit ein wenig CSS-Trickery können Sie die Werkzeuge, die Sie bereits haben, nutzen, um Überschriften zu erstellen. Fügen Sie einfach etwas wie das hier zu Ihrer Stylesheet hinzu.

em strong {
   font-size: 2.0em;
   font-weight: bold;
   margin-bottom: 0.3em;
}

Jetzt können Sie einen Textteil auswählen und auf die Schaltfläche [b] klicken, um die <strong>-Tags hinzuzufügen, dann wählen Sie alles davon aus und drücken Sie die Schaltfläche [i], um ihm die <em>-Tags zu geben, und Sie haben einen provisorischen Überschriftenstil.

2. Entfernen Sie überflüssige Kalenderstile

WordPress selbst sagt, dass beim Entwerfen eines Themes für die öffentliche Veröffentlichung Sie mit dem Standard- oder Klassik-Theme beginnen und es modifizieren sollten. Ich halte das für guten Rat, aber als Ergebnis gibt es eine Menge Themes mit viel ungenutztem, unnötigem CSS. Nämlich Kalenderstile. Gelegentlich sehen Sie einen Blog, der einen Kalender gut nutzt, aber das sind wenige. Doch die meisten Blog-Stylesheets enthalten einen guten Teil ungenutzten Codes, der Kalendern gewidmet ist. Wenn Sie ihn nicht verwenden, werfen Sie ihn weg.

3. Bringen Sie Ihre Header-Hierarchie in Ordnung

Auf jeder Seite eines Blogs gibt es viele Elemente, die Überschriften sein sollten: Titel des Blogs, Beschreibung des Blogs, Titel der Beiträge, Untertitel der Beiträge, Überschriften der Seitenleiste usw. Diese Dinge in eine semantisch richtige Hierarchie zu bringen, sollte Priorität haben. Hier ist ein Vorschlag, wie Sie vorgehen könnten, und die WordPress PHP-Snippets, die Sie einfügen müssen.

Blog-Titel

<h1><a href="/"><?php bloginfo('name'); ?></a></h1>

Blog-Beschreibung

<h2><?php bloginfo('description'); ?></h2>

Beitragstitel

<h3><a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>

Beitrags-Untertitel

<h4>Holding in a fart only makes things worse later.</h4>

Seitenleisten-Abschnitte

<h5>Blogroll</h5>

4. Geben Sie Absätzen einen großzügigen unteren Rand

Ein kleines WordPress-"Feature" ist, dass es keinen einfachen Weg gibt, Abstände zwischen Textblöcken in Ihrem Beitrag über den Editor hinzuzufügen.

Selbst das manuelle Hinzufügen von <br />-Tags funktioniert nicht, WordPress entfernt sie. Was soll ein armer Blogger also tun? Überlassen Sie die Abstände Ihrer CSS. Sie sollten sowieso keine unnötigen Zeilenumbrüche einfügen, das ist schlechte Semantik.

Was WordPress tun wird, ist, beide Textblöcke automatisch in ihre eigenen <p>-Tags zu setzen. Alles, was Sie tun müssen, um gesunde Abstände zwischen Ihren Textblöcken zu erhalten, ist, dem Selektor einen gesunden `margin-bottom` zu geben.

p {
     margin-bottom: 1.4em;
}

Ihre Kommentatoren werden es auch zu schätzen wissen. WordPress behandelt Kommentare ähnlich wie Beiträge, indem es keine zusätzlichen Abstände zulässt. Mit diesem unteren Rand für Absatzelemente, wenn Ihre Kommentatoren hart zurückkehren und einen neuen Absatz in ihrem Kommentar beginnen, wird der Rand angewendet und alles sieht richtig aus.

5. Vermeiden Sie Schusterjungen mit &nbsp;

Das ist mehr eine Markup-Angelegenheit als eine CSS-Sache, aber es ist ein guter Trick, deshalb erwähne ich ihn. Viele Blogs verwenden große Schriftarten für ihre Beitragstitel. Schusterjungen sehen besonders lächerlich aus bei kurzen Textzeilen mit großen Schriftarten. Um diese einzelnen Wörter zu vermeiden, die gerne ganz allein auf einer Zeile stehen, fügen Sie einen nicht umbrechenden Leerschritt zwischen die letzten beiden Wörter (oder die letzten paar Wörter) von Beitragstiteln ein. z.B. "Wie man einem Kunden sagt, er soll sich zum Teufel scheren und damit davonkommt&nbsp;und&nbsp;damit" (Hinweis: dies ist eine grobe Übersetzung des Beispiels, die eigentliche Formulierung wäre "get bent and get away&nbsp;with&nbsp;it").