Fügen Sie mit Just CSS Mauerwerks- und Rasterlayouts zu Ihrer WordPress-Site hinzu
Veröffentlicht: 2014-07-09Wollten Sie schon immer aufpeppen, wie Ihre Beiträge auf Ihrer WordPress-Startseite und in den Archiven angezeigt werden?
Was wäre, wenn Sie Ihre Posts mit dem Mauerwerk (Pinterest)-Ansatz oder vielleicht mit einem Rasterlayout anzeigen könnten, alles nur durch Hinzufügen eines CSS-Snippets?
Keine Plugins, Shortcodes, Template-Änderungen, Seiten als Startseite zuweisen. Nur reines CSS.
Lesen Sie weiter oder springen Sie mit diesen Links weiter:
- Vorbereitungen für das Hinzufügen von Mauerwerk und Rasterlayouts zu Ihrer Site
- Geben Sie Ihren Posts den Pinterest-Maurer-Look
- Pfosten in einem Raster auslegen
- Hinzufügen des benutzerdefinierten CSS zu Ihrer Website
Vorbereitungen zum Hinzufügen von Mauerwerks- und Rasterlayouts zu Ihrer WordPress-Site
Diese Lösungen basieren ausschließlich auf CSS und verlassen sich daher, nicht überraschend, stark auf das HTML-Markup auf Ihrer Website, um ohne Änderungen zu funktionieren.
Das verwendete CSS wurde mit den Standarddesigns entworfen (und getestet). Das bedeutet, dass das CSS einige Erwartungen hat:
- Auf dem body-Element existieren Klassen, die den Seitentyp beschreiben (z. B. Startseite, Blog, Archiv, Suche)
- Beitragslisten sind Sammlungen von Artikelelementen, komplett mit Header, die in ein div mit der ID des Inhalts eingeschlossen sind
Wenn Sie ein Standarddesign verwenden, können Sie das CSS ohne Änderungen verwenden. Selbst wenn Sie dies nicht tun, stellen Sie möglicherweise fest, dass Ihr Design ähnlich genug Markup verwendet, sodass Sie das CSS weiterhin unverändert verwenden können. Beispielsweise verwendet das Eighties-Theme praktisch das gleiche Markup wie die Standarddesigns.
Wenn Ihr Design nicht dasselbe Markup verwendet – der einfachste Weg, dies festzustellen, besteht darin, die Seitenquelle auf die Klassen und IDs zu überprüfen, auf die im CSS verwiesen wird –, können Sie das CSS immer noch verwenden, Sie müssen nur die Klassen und ändern die IDs, die mit Ihrem Markup übereinstimmen.
Auswählen, wo das Styling angewendet werden soll
Sie können entscheiden, dass Sie das gewählte Design nur auf bestimmte Seiten anwenden möchten.
WordPress macht dies wirklich einfach, da es seitenspezifische Klassen auf das Body-Element wie Blog, Startseite, Archiv und Suche anwendet, sodass Sie einfach Ihr CSS für jede der relevanten Klassen codieren müssen.
Wenn Sie das Styling beispielsweise nur auf die Homepage anwenden möchten, sieht Ihr CSS in etwa so aus:
body.blog article { styles go here... }
So wenden Sie das Styling auf die Startseite und die Archivseiten (Kategorien) an:
body.blog article, body.archive article { styles go here... }
So wenden Sie das Styling nur auf die Suchergebnisse an:
body.blog search { styles go here... }
Auch hier hängt dies von Ihrem Thema ab, das den Themenempfehlungen von WordPress folgt.
Browser-Kompatibilität
Da es sich um CSS3 handelt, funktionieren diese Techniken nicht auf allen Plattformen und Browsern.
Ich habe getestet und bestätige, dass sie auf den neuesten Versionen von Chrome und Safari (beide auf OS X) und auf iOS (5+) funktionieren. Auch die diversen CSS-Webseiten deuten darauf hin, dass der IE10 ebenfalls keine Probleme haben wird.
Außerhalb dieser Browser (einschließlich IE9) wird Ihre Laufleistung variieren, aber denken Sie daran, dass das Fallback Ihr aktuelles Design ist, sodass Besucher, die ältere Browser verwenden, einfach keinen Unterschied bemerken werden.
Wenn Sie feststellen, dass die Stile auf einer nicht erwähnten Plattform (insbesondere Windows) erfolgreich funktionieren, teilen Sie uns dies in den Kommentaren mit.
Genug der Haftungsausschlüsse, schauen wir uns also an, wie Sie Ihre Post-Listings aufpeppen können.
Geben Sie Ihren Posts den Pinterest-Maurer-Look
Es gibt viele WordPress-Themes und eine Handvoll Plugins, die Beiträge in einem Mauerwerksformat im Pinterest-Stil anzeigen. Aber mit CSS3 können Sie Ihrer WordPress-Site einfach einige zusätzliche Stile hinzufügen und den gleichen Effekt erzielen.
Diese Lösung, die von Rahul Aroras Post auf W3Bits inspiriert wurde, basiert auf der CSS3-Unterstützung für die Spalteneigenschaft . Diese Eigenschaft teilt den Inhalt über die definierte Anzahl von Spalten auf, und während ihre Erstellung wahrscheinlich eher von der Idee inspiriert wurde, Text im Zeitungsstil über Spalten zu fließen, ist sie für ein Mauerwerk-Layout genauso nützlich.
/* Masonry Custom CSS */
/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
/* Masonry bricks or child elements */
body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}
body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}
In den Standardlayouts werden Beiträge als Artikelelemente ausgegeben, die in ein div mit einer Inhalts-ID eingeschlossen sind.
Das CSS:
1. Legt die Anzahl der Spalten im #content-Wrapper mithilfe der Eigenschaft column-count fest – in diesem Fall 4. Es legt auch den Spaltenabstand fest . Sie werden die Verwendung von -moz- und -webkit- für Firefox und Safari bemerken.
2. Wandelt die Artikelelemente in Bausteine um, indem Inline-Block verwendet und eine Breite auf 100 % gesetzt wird.
3. Stellt sicher, dass der Seitenkopf und die Navigation in einer eigenen „Zeile“ sitzen, indem Sie angeben, dass diese Elemente alle Spalten umfassen
Nur um Ordnung zu halten, können Sie auch Folgendes hinzufügen:
/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}
h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}
Dies fügt nur einen Rand um den Inhalt ein und stellt sicher, dass lange Wörter in Titeln die Formatierung nicht über den Haufen werfen (nützlich für jedes Thema, nicht nur hier).
Responsiv machen
Ein Nachteil bei einem Säulenansatz besteht darin, dass er sich schnell verschlechtert, wenn die Bildschirmgröße kleiner wird.
Was wir tun möchten, ist, die Anzahl der Spalten so zu manipulieren, dass die Artikelelemente eine vernünftige Menge an Bildschirmfläche erhalten, um die Integrität und den visuellen Reiz der Bausteine zu erhalten. Fügen wir also einige Medienabfragen hinzu, um die Anzahl der Spalten basierend auf der Bildschirmgröße zu ändern:
@media only screen and (max-width : 1024px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 768px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 480px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
Wie Sie sehen können, müssen wir nur die Eigenschaft column-count (und ihre Ableitungen) für jede Abfrage ändern.
Diese 4 Haltepunkte, von denen 3 auf allen Plattformen funktionieren (ändern Sie einfach die Größe Ihres Browserfensters, um zu sehen, wie sie wirksam werden) und 1, der speziell für ein Tablet im Hochformat ist.
Hier ist das Mauerwerk-Styling auf einem iPad und iPhone:
Sie können (und sollten) natürlich noch weiter gehen und den Steinen mehr Stil verleihen, um die visuelle Attraktivität zu verbessern, aber nur 3 CSS-Anweisungen, um Ihre Post-Listings in eine Mauer zu verwandeln, sind ziemlich beeindruckend!
Pfosten in einem Raster auslegen
Wenn Sie mehr Einheitlichkeit und Ordnung mögen, als Mauerwerk bietet, dann könnten Sie daran interessiert sein, Ihre Pfosten in einem Raster anzulegen.
Gitter sind sehr, sehr einfach zu implementieren, funktionieren aber definitiv am besten, wenn die vorgestellten Bilder alle die gleiche Größe haben, da Sie sonst mit viel Leerraum enden können, der die kürzeren „Zellen“ ausfüllt.
Dieses Mal ist das CSS sogar noch kürzer und verlässt sich einfach auf die Gestaltung der Artikelelemente :
/* Grid Layout Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}
Das ist alles, was absolut notwendig ist. Auch hier verwenden wir den Inline-Block und stellen sicher, dass der Artikelinhalt (Titel, Beitragsbild, Auszug) vertikal ausgerichtet ist.
Die wichtige Eigenschaft ist die Breite , da diese die Anzahl der „Spalten“ bestimmt. Ich habe 32,5 % als Anfangswert verwendet (die Verwendung von 33 % kann zu vorzeitigem Umbrechen führen), was 3 Spalten ergibt. Wenn Sie 4 Spalten wollten, würden Sie natürlich 24,5 % verwenden, 5 Spalten 19,5 % usw.
Reaktionsfähigkeit hinzufügen
Genau wie unser Mauerwerksstil müssen Gitter reaktionsfähig sein, wenn sie ihre Wirksamkeit bewahren sollen.
Da die Breiteneigenschaft die Anzahl der Spalten bestimmt, wird diese Eigenschaft in den verschiedenen Medienabfragen geändert.
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog article, body.archive article {
width: 49%;
}
}
@media only screen and (max-width : 768px) {
body.blog article, body.archive article {
width: 49%;
}
}
@media only screen and (max-width : 480px) {
body.blog article, body.archive article {
width: 100%;
}
}
Diesmal nur 3 Abfragen, da ich nur mit 3 Spalten begonnen habe. Wenn Sie sich entscheiden, mit mehr Spalten zu beginnen, möchten Sie möglicherweise einen Haltepunkt von max-width hinzufügen: 1024px, um die Breite auf 32,5 % (3 Spalten) festzulegen.
Dies führt zu:
- 2 Spalten auf einem Tablet im Hochformat
- 2 Spalten, wenn die Bildschirmgröße eine maximale Breite von 768 Pixel hat
- 1 Spalte, wenn die Bildschirmgröße eine maximale Breite von 480 Pixel hat
Diese Haltepunkte decken sowohl Tablets als auch Smartphones und die Größenänderung des Browserfensters ab.
Hier ist das Rasterlayout auf einem iPad und iPhone:
Gitter, ein bisschen ordentlicher als Mauerwerk, erfordern aber wirklich Konsistenz und Strenge, wenn es um die angezeigte Bildgröße geht, um am effektivsten zu sein.
Hinzufügen des benutzerdefinierten CSS zu Ihrer Website
Es gibt eine Reihe von Optionen, wenn es darum geht, das von Ihnen gewählte benutzerdefinierte CSS in Ihre WordPress-Site einzufügen. Wenn Ihr Design nicht die Möglichkeit bietet, benutzerdefiniertes CSS hinzuzufügen, haben Sie folgende Möglichkeiten:
- Child Theme – erstelle ein Child Theme und füge das CSS dem Stylesheet hinzu
- Plugin – füge dein gewähltes Styling zu einer neuen CSS-Datei hinzu und erstelle ein Plugin, das die wp-enqueue-style-Funktion verwendet, möglicherweise abhängig von der generierten Seite, um die neue Datei in die Warteschlange einzureihen
- Bearbeiten Sie das Stylesheet des aktuellen Themas – wirklich nicht, einfach nicht
- Verwenden Sie ein benutzerdefiniertes CSS-Plugin – es gibt eine Reihe von Plugins, mit denen Sie über die WordPress-Admin-Oberfläche benutzerdefiniertes CSS zu Ihrer Website hinzufügen können (das treffend benannte Simple Custom CSS-Plugin ist ein solches Plugin).
Ich verwende gerne das benutzerdefinierte CSS-Plugin. Es ist schnell und einfach einzurichten, macht das Testen zum Kinderspiel und ebenso schnell und einfach lässt sich das CSS von deiner WordPress-Seite entfernen (Lösche den Editor oder deinstalliere das Plugin).
CSS, der Weg zum WordPress-Zen
Das wunderbare CSS Zen Garden beweist seit vielen Jahren, dass das Erscheinungsbild einer Website ohne eine einzige Änderung am Markup, sondern durch eine Änderung des CSS erheblich verändert werden kann.
Obwohl sie nicht annähernd auf dem gleichen Niveau sind, beweisen diese beiden Techniken, dass das Ändern des Aussehens und Verhaltens Ihrer WordPress-Site auch völlig möglich ist, ohne dass Vorlagen geändert, Shortcodes verwendet oder untergeordnete Themen entwickelt werden müssen.
Nur ein bisschen CSS.
Anmerkung des Herausgebers: Dieser Beitrag wurde aus Gründen der Genauigkeit und Relevanz aktualisiert. [Ursprünglich veröffentlicht: Juli 2014 / Überarbeitet: Februar 2022]
Stichworte: