So stylen Sie Bilder auf Ihrer WordPress-Website mit CSS

Ich bin sicher, Sie haben bereits eine Vorstellung davon, wie wichtig Bilder für den Erfolg Ihrer Website sind.

Aber wenn es darum geht, das Engagement (und letztendlich Ihr Endergebnis) zu steigern, geht es nicht nur darum, Bilder auf Ihrer Website einzufügen, sondern auch darum, welche Bilder Sie einbinden und wie Sie sie präsentieren.

In diesem Beitrag möchte ich ein wichtiges Teil dieses Puzzles angehen: die Präsentation.

WordPress ist mit einfachen Mitteln zum Gestalten von Bildern mit CSS vorinstalliert. Sie haben die Möglichkeit, verschiedene Effekte für die verschiedenen CSS-Klassen zu erstellen, die WordPress Bildern auf Ihrer Website automatisch zuweist. (Wenn es so aussieht, als hätte ich angefangen, in einer Fremdsprache zu sprechen, keine Sorge, ich werde später in diesem Artikel alles im Detail erklären.)

Ich werde zunächst auf die Gründe eingehen, warum Bilder für Ihre Website so wichtig sind, dann die Standard-CSS-Klassen behandeln, die WordPress auf Bilder anwendet, und schließlich zeigen, wie Sie CSS verwenden können, um benutzerdefinierte Stile auf Ihre Bilder anzuwenden .

• Warum Bilder für Websites so wichtig sind
• Ein WordPress-CSS-Crashkurs
• So fügen Sie benutzerdefiniertes CSS zu WordPress hinzu
• Die WordPress-Standard-CSS-Bildklassen
• Einfaches Bildstyling mit WordPress
• Weitere Beispiele dafür, was Sie mit Bild-CSS in WordPress machen können
• Was ist mit bestehenden Stilen?
• Der Himmel ist das Limit

Warum Bilder für Websites so wichtig sind

Wie könnte man besser erklären, wie nützlich Bilder für Blogs sind, als es mit einem Bild zu beweisen?

Die Dinge werden noch interessanter, wenn Sie sich mit der Biologie befassen, wie wir Informationen verarbeiten. Bedenken Sie zum Beispiel, dass 90 Prozent der an das Gehirn übermittelten Informationen visuell sind und 40 % der Menschen besser auf visuelle Informationen reagieren als auf reinen Text (Quelle: Zabisco).

Aber seien wir ehrlich: Ich muss Sie nicht mit Statistiken bewerfen, um meinen Standpunkt zu verdeutlichen. Sie wissen von Ihren eigenen Gewohnheiten, dass optisch ansprechende Websites und Blogs viel eher Ihre Aufmerksamkeit erregen als eine Menge Text. Bilder fügen Farbe, Attraktivität und Faszination hinzu. Sie lösen eine Reihe von Reaktionen in unserem Gehirn aus, bevor wir überhaupt die Gelegenheit hatten, mit dem Lesen zu beginnen.

Einfach gesagt, wenn Sie keine überzeugenden, relevanten Bilder in Ihre Blog-Posts einfügen, sind Sie noch lange nicht in der Nähe davon, das Beste aus Ihren Inhalten herauszuholen. Die Extrameile zu gehen, wenn es darum geht, Bilder in Ihre Blog-Posts aufzunehmen und sie gut zu präsentieren, kann den entscheidenden Unterschied für Engagement, Traffic und Verkäufe ausmachen.

Ein WordPress-CSS-Crashkurs

Die WordPress-Core-Entwickler sind sich der Bedeutung von Bildern für Websites nur allzu bewusst, weshalb sie Theme-Entwicklern (und Theme-Tweakern) viel Macht und Flexibilität bei der Bestimmung der Darstellung von Bildern einräumen.

Diese Leistung und Flexibilität wird in Form einer Reihe von CSS-Klassen angeboten. Aber bevor wir weitermachen, nehmen wir uns einen Moment Zeit, um Ihnen zu erklären, was CSS ist und wie Sie es verwenden können.

CSS steht für Cascading Style Sheets: eine Auszeichnungssprache, mit der bestimmt wird, wie Webseiten aussehen. CSS wird mit HTML (Hyper Text Markup Language) kombiniert, der Auszeichnungssprache, mit der die semantische Struktur einer Website definiert wird. Wenn Ihnen das nicht viel Sinn macht, machen Sie sich keine Sorgen – es sind mehr ergänzende Informationen als nötig.

CSS ist eine einfache Sprache, sobald Sie sich damit vertraut gemacht haben. In Bezug auf die Möglichkeit, das Erscheinungsbild und die Platzierung von Bildern zu ändern, können Sie den Code, den ich in diesen Artikel einfüge, relativ einfach aufnehmen und damit arbeiten.

Hier ist ein Beispiel für ein CSS-Code-Snippet, das sich auf das Erscheinungsbild eines bestimmten Bildtyps in WordPress bezieht:

 .rechts ausrichten {
	Rand: 1 Pixel solide #c5c5c5;
	schweben rechts;
	Rand: 0 0 10px 10px;
	Polsterung: 3px;
}

Der .alignright Text ist eine CSS -Klasse (erkennbar als Klasse an dem Punkt, der ihrem Namen vorangestellt ist). In diesem Fall ist .alignright eine Klasse, die WordPress jedem Bild zuweist, das innerhalb des WordPress-Backends ausgewählt wird, um rechts vom Inhalt ausgerichtet zu werden:

Auf eine CSS-Klasse können verschiedene Deklarationen (z. B. border und padding ) angewendet werden, die letztendlich auf jedes HTML-Element angewendet werden, dem die betreffende Klasse zugewiesen wurde.

Im obigen Beispiel wird jedem Bild in WordPress, das rechts ausgerichtet wurde (über den Texteditor), die Klasse .alignright zugewiesen, und erbt somit das auf diese Klasse angewendete Styling. Das Bild 'schwebt' nach rechts, hat einen kleinen Rand, um zu verhindern, dass Text hineinläuft, einen grauen Rahmen darum und eine kleine Polsterung, um den Rand vom Bildrand zu trennen.

Das macht alles viel mehr Sinn mit einer visuellen Darstellung:

Es gibt viele weitere Deklarationen, die einer CSS-Klasse hinzugefügt werden können; wir werden in Kürze etwas Spaß mit ihnen haben.

So fügen Sie benutzerdefiniertes CSS zu WordPress hinzu

WordPress-Designs verfügen über ihre eigenen CSS-'Stylesheets', bei denen es sich um Dateien handelt, die wie im obigen Beispiel mit CSS-Markup gefüllt sind. Während es viele Möglichkeiten gibt, Ihrer Website Ihr eigenes benutzerdefiniertes CSS hinzuzufügen, ist das Bearbeiten des CSS-Stylesheets eines vorhandenen Designs nicht der richtige Weg. Ihre harte Arbeit könnte bei der nächsten Aktualisierung des Designs überschrieben werden.

Die sauberste und zukunftssicherste Methode besteht darin, ein eigenes einfaches WordPress-„Child-Theme“ mit einem eigenen CSS-Stylesheet zu erstellen. Das CSS-Stylesheet im Verzeichnis Ihres untergeordneten Designs überschreibt alle übereinstimmenden Stile im Stylesheet des „übergeordneten“ Designs.

Das Erstellen eines untergeordneten Designs mag nach einer etwas entmutigenden Übung klingen, ist aber einfach genug, wenn Sie mit FTP vertraut sind. Wenn Sie diesen Weg gehen möchten, sehen Sie sich das Tutorial im WordPress Codex an.

Wenn Sie nach etwas Einfacherem suchen, habe ich zwei Plugin-Vorschläge:

1. Das benutzerdefinierte CSS-Modul in Jetpack: Ideal, wenn Sie Jetpack bereits auf Ihrer Website verwenden.
2. Einfaches benutzerdefiniertes CSS: Wenn Sie Jetpack noch nicht verwenden (und die vielfältigen Funktionen nicht benötigen), ist dies eine leichtere Option.

Welche Option Sie auch wählen, das Hinzufügen von benutzerdefiniertem CSS zu WordPress ist so einfach wie das Bearbeiten der benutzerdefinierten CSS-Datei, die (von Ihnen oder einem der Plugins) generiert wurde.

Die WordPress-Standard-CSS-Bildklassen

Nachdem all dies aus dem Weg geräumt wurde, kommen wir zu den saftigen Sachen: den Standard-Bild-CSS-Klassen von WordPress.

Es gibt vier Standardklassen, mit denen Sie das Erscheinungsbild von Bildern in WordPress ändern können:

• .aligncenter
• .alignleft
• .alignright
• .alignnone

Ich bin sicher, Sie können herausfinden, welchen Arten von Bildern diese Klassen zugeordnet sind.

Jedem einzelnen Bild, das Sie über den TinyMCE-Texteditor auf den Post-/Seitenbildschirmen zu Ihrer Website hinzufügen, wird eine dieser Klassen zugewiesen, was bedeutet, dass Sie alle diese Bilder nach Belieben gestalten können.

Um einen bestimmten Bildtyp zu stylen, müssen Sie lediglich dem Format folgen, das Sie bereits im obigen Beispiel gesehen haben:

 .Klassenname {
	Eigentumswert;
	Eigentumswert;
	Eigentumswert;
}

Wichtig: Wenn ein Bild eine Bildunterschrift hat, weist WordPress eine der oben genannten Klassen einem div zu, das das Bild umgibt, und nicht das Bild selbst. Die Behandlung dieses speziellen Problems würde den Rahmen dieses Beitrags sprengen, sollte aber beim Experimentieren im Hinterkopf behalten werden. Ich empfehle Ihnen, die ausgewählten Effekte mit beschrifteten Bildern zu testen, um zu sehen, wie die Dinge aussehen.

Kommen wir nun zum spaßigen Teil: Gestalten Sie Ihre Bilder!

Einfaches Bildstyling mit WordPress

Wenn es darum geht, Ihren Bildern in WordPress einfache stilistische Effekte hinzuzufügen, gibt es fünf gemeinsame CSS-Eigenschaften:

1. background
2. border
3. float
4. margin
5. padding

Um ein vollständiges Verständnis dafür zu erlangen, wie diese Eigenschaften das Erscheinungsbild eines Bildes beeinflussen (oder genauer gesagt das Erscheinungsbild des „Rahmens“, in dem das Bild platziert ist), müssen wir das CSS-„Box-Modell“ betrachten:

Wenn es um das Styling von Bildern geht, ist das Bild selbst der „Inhalt“. Dieses Bild wird dann von Polsterung, Rändern und Rändern umgeben; alles, was Sie definieren können. Bilder können auch "schwebend" sein, was für die Zwecke dieses Tutorials einfach ausgerichtet bedeutet. Ihre Float-Optionen sind left, right und none. (Das Zentrieren eines Bildes ist etwas komplizierter; dazu kommen wir gleich.)

Betrachten wir ein einfaches Beispiel, um zu demonstrieren, wie diese Eigenschaften verwendet werden können. Hier ist zunächst ein Bild, dem die Klasse .alignright ohne CSS-Markup zugewiesen ist:

Lassen Sie uns nun ein einfaches CSS-Markup hinzufügen:

 .rechts ausrichten {
	Hintergrund: grau;
	Rand: 3px durchgehend schwarz;
	schweben rechts;
	Rand: 10px;
	Polsterung: 3px;
}

Hier ist der Endeffekt:

Sie können wahrscheinlich entziffern, was wir hier getan haben. Das Bild wurde nun nach rechts „schweben“ (dh ausgerichtet), sodass der Text es umfließt. Wir haben ein wenig Polsterung hinzugefügt, die einen grauen Hintergrund erhalten hat. Wir haben einen dicken schwarzen Rand angebracht, der um die Polsterung herum erscheint. Schließlich schafft ein 10-Pixel-Rand etwas Platz zwischen Bild und Text.

Allein mit den fünf oben genannten Selektoren können Sie eine Menge tun. Wenn Sie sie weiter erforschen möchten, finden Sie hier eine umfassende Ressource für jeden:

• background
• border
• float
• margin
• padding

Ich habe auch eine Lösung zum Zentrieren von Bildern versprochen. Aus Gründen, die den Rahmen dieses Tutorials sprengen würden, erlaubt CSS nicht einfach die Verwendung von float: center; (dh der Wert existiert nicht). Stattdessen müssen Sie das Bild als Blockelement definieren, apply margin: 0 auto; und definieren Sie eine Breite für das Bild. Hier kannst du mehr über diese Technik lesen. (Ich werde auch ein Beispiel für das Markup geben, das zum Erstellen eines zentrierten Bildes unten verwendet wird.)

Weitere Beispiele dafür, was Sie mit Bild-CSS in WordPress machen können

Jetzt haben Sie ein besseres Verständnis für die gebräuchlichsten CSS-Eigenschaften, die Sie verwenden können. Hier sind einige Beispiele, um Sie zu inspirieren.

Beginnen wir mit etwas Polsterung und einem grauen Hintergrund, um unseren Bildern einen Rahmen zu geben:

 .linksbündig {
	Hintergrund: #dbdbdb;
	Schwimmer: links;
	Rand: 0 10px 5px 0;
	Polsterung: 5px;
}

Dieses Markup führt zu folgendem:

Lassen Sie uns untersuchen, was hier passiert ist:

• Ich habe eine HTML-Hex-Farbe für den Hintergrund verwendet. Diese Farbcodes geben Ihnen praktisch unbegrenzte Flexibilität bei der Farbauswahl für Ihre Website.
• Da das von mir verwendete Bild ein transparentes PNG ist, hat die background den gesamten verfügbaren Platz ausgefüllt, der nicht in der Bilddatei verwendet wird.
• Ich habe vier Werte innerhalb der Eigenschaft margin verwendet, um unterschiedliche Ränder für jede Seite des Bildes festzulegen.

Versuchen wir etwas anderes. Anstatt unseren Bildern eine Hintergrundfarbe zu geben, setzen wir sie in einen einfachen Rand, um sie vom Inhalt abzugrenzen. Hier ist das Markup:

 .rechts ausrichten {
	Rand: 1px solide #000099;
	schweben rechts;
	Rand: 0 0 10px 10px;
	Polsterung: 3px;
}

Wie Sie sehen können, haben wir mit den Eigenschaftswerten für den margin herumgespielt, um die Bildausrichtung zu berücksichtigen, die Polsterung reduziert und einen durchgehenden Rand von 1 Pixel hinzugefügt. Hier ist das Endergebnis:

Schließlich erstellen wir ein zentriertes Bild und geben ihm einen dicken grauen Rand. Hier ist das Markup:

 .im Zentrum anordnen {
	Rand: 5px solide #dbdbdb;
	Bildschirmsperre;
	Rand: 0 automatisch;
	Breite: 300px;
}

Und das Endergebnis:

Wie Sie sehen können, ist es möglich, die Platzierung und das Erscheinungsbild eines Bildes in WordPress allein mit CSS vollständig zu ändern.

In Wirklichkeit haben wir hier nur an der Oberfläche gekratzt; Es gibt noch viel mehr, was Sie tun können. (Wenn Sie daran interessiert sind, mehr zu erfahren, habe ich unten einige nützliche Ressourcen zum weiteren Lernen bereitgestellt.)

Was ist mit bestehenden Stilen?

Wenn Sie ein WordPress-Theme von wirklicher Qualität verwenden, hat der Entwickler bereits Stile zu jeder der Standard-WordPress-Bildklassen hinzugefügt. Zumindest wird sie jede Bildklasse entsprechend ausgerichtet haben.

Darüber hinaus waren ihre Entscheidungen völlig subjektiv, und Sie haben jetzt die Möglichkeit, ihre Styling-Effekte zu überschreiben. Jedes CSS-Markup, das Sie eingeben – entweder im Stylesheet Ihres untergeordneten Designs oder über ein Plugin – hat Vorrang vor dem Standard-CSS des Designs. Du hast die Kontrolle.

Der Himmel ist das Limit

Beim Lesen dieses Artikels hoffe ich auch, dass Sie dazu inspiriert werden, mit Ihren eigenen benutzerdefinierten CSS-Stilen zu experimentieren. Ich wollte in diesem Tutorial nicht zu tief in fortgeschrittenere Selektoren eintauchen, aber Sie können mit CSS noch viel mehr tun, als ich hier behandelt habe.

Wenn Sie fortgeschrittenere Effekte (wie Schatten, Rundung und Drehung) ausprobieren möchten, gibt es eine große Anzahl kostenloser Online-Ressourcen, die Ihnen mehr über CSS beibringen können. Meine persönlichen Empfehlungen sind:

• Mozilla Developer Network: In der Webentwickler-Community beliebt.
• W3 Schools: Von vielen „ernsthaften“ Webentwicklern gehasst, aber die Tiefe und Breite der Informationen lässt sich nicht leugnen. Denken Sie nur daran, dass sie möglicherweise nicht immer zu 100 % korrekt und/oder aktuell sind.
• WordPress Codex: Erfahren Sie mehr darüber, wie WordPress und CSS zusammenkommen.

Wenn Sie Fragen haben, zögern Sie bitte nicht, im Kommentarbereich unten loszufeuern!

Bildnachweis: Simon Pow, PicJumbo.

• CSS
• Bilder