Springe zum Hauptinhalt

Wie einen einzigartigen Stil zu jedem Element auf Wordpress geben

Divi: das am einfachsten zu verwendende WordPress-Theme

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Sind Sie jemals auf eine Website gestoßen, die ihre Artikel im Blog anders veröffentlicht?

Einige Websites enthalten Artikel, die mit einem benutzerdefinierten Hintergrund hervorgehoben sind, während andere möglicherweise einen Beitrag in jeder Kategorie mit einem einzigartigen Erscheinungsbild versehen. Wenn Sie schon immer lernen wollten, wie Sie jeden WordPress-Beitrag anpassen, sind Sie hier genau richtig.Wie man jedem Artikel in WordPress einen einzigartigen Stil verleiht

In diesem Tutorial zeigen wir Ihnen, wie Sie jeden WordPress-Artikel anders gestalten.

Falls Sie WordPress noch nie installiert haben, entdecken Sie es Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

Remarque: Für dieses Tutorial müssen Sie benutzerdefiniertes CSS in WordPress hinzufügen. Sie müssen auch das Inspect-Tool verwenden. Einige CSS- und HTML-Kenntnisse sind erforderlich.

Geben individuellen Stil auf Wordpress Artikel

WordPress fügt Standardelemente für CSS zu verschiedenen Elementen Ihrer Website hinzu. Ein standardkompatibles WordPress-Design muss den von WordPress benötigten Code enthalten, um CSS-Klassen für den Textkörper, Artikel, Seiten, Widgets, Menüs und mehr hinzuzufügen.

Entdecken Sie auch unseren Guide auf Permalinks: Wie Sie Ihren Blog Links anpassen

Eine Hauptfunktion von WordPress namens " post_class () Wird von Themen verwendet, um WordPress mitzuteilen, wo diese Standard-CSS-Klassen zu Artikeln hinzugefügt werden sollen.

Wenn Sie Ihre Website besuchen und das Inspect-Tool in Ihrem Browser verwenden, werden diese Klassen für jeden Beitrag hinzugefügt.

Klassen CSS WordPress Dashboard

Hier sind CSS-Klassen aufgeführt, die standardmäßig basierend auf der von einem Benutzer angezeigten Seite hinzugefügt werden.

  • .post-id
  • .poster
  • .attachement
  • .gluant
  • .hentry
  • .category ID
  • .category-name
  • .tag-name
  • .format- {size-name}
  • {.type- post-type-name}
  • .has Post-Thumbnail
  • .post-Passwort-required
  • .protected-by-a-Passwort

Ein Beispiel für die Anzeige würde folgendermaßen aussehen:

Sie können jede WordPress-Publikation anders anpassen, indem Sie die entsprechenden CSS-Klassen verwenden.

Lesen Sie auch: Wie Sie Ihre Wordpress-Blog an diesem Wochenende verbessern

Wenn Sie beispielsweise eine einzelne Publikation bearbeiten möchten, können Sie die Post-ID-Klasse in Ihrem benutzerdefinierten CSS verwenden.

.post-412 {background-color: #FF0303; color: #FFFFFF; }

Denken Sie daran, die Post-ID an Ihre Post-ID anzupassen.

Passen Sie das Erscheinungsbild eines Artikels in WordPress an

Schauen wir uns ein anderes Beispiel an.

Dieses Mal werden wir alle Artikel behandeln, die in einer bestimmten Kategorie namens "Nachrichten" veröffentlicht wurden.

Entdecken Sie unseren Guide auf So fügen Sie Ihrem WordPress-Blog benutzerdefiniertes CSS hinzu

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Wir können dies tun, indem wir das folgende benutzerdefinierte CSS zu unserem Thema hinzufügen.

.category-news {font-size: 18px; font-style: italic; }

Dieses CSS betrifft alle Artikel in der Kategorie " Aktualität ".

Die post_class Funktion ()

Theme-Entwickler nutzen die Funktion post_class () um WordPress mitzuteilen, wo die Postklassen hinzugefügt werden sollen. Normalerweise befindet es sich im "Artikel" -Tag.

die Funktion post_class () Lädt nicht nur standardmäßig von WordPress generierte CSS-Klassen, sondern ermöglicht Ihnen auch das Hinzufügen eigener Klassen.

Entdecken Wie Sie Ihren Blog-Inhalte Schaber schützen

Abhängig von Ihrem WordPress-Theme finden Sie die Funktion post_class () in Ihrer single.php-Datei oder in den Vorlagendateien. Normalerweise sieht der Code folgendermaßen aus:

" >

Sie können Ihre eigene benutzerdefinierte CSS-Klasse mit einem Attribut wie dem folgenden hinzufügen:

" >

Die post_class-Klasse druckt die jeweiligen Standard-CSS-Klassen mit Ihrer benutzerdefinierten CSS-Klasse.

Wenn Sie mehrere CSS-Klassen hinzufügen möchten, können Sie diese als Array definieren und in der Funktion post-class () verwenden.

" >

Zeigen Sie Artikel mit einem anderen Stil nach den Autoren

Von der Funktion posts_class generierte Standard-CSS-Klassen enthalten den Namen des Autors nicht als CSS-Klasse.

Wenn Sie den Stil jedes Beitrags basierend auf dem Autor anpassen möchten, müssen Sie zuerst den Namen des Autors als CSS-Klasse hinzufügen.

Lesen Sie auch: Wie man CSS-Animationen Wordpress hinzufügen

Sie können dies mit dem folgenden Snippet tun:

" >

Dieser Code fügt den Benutzernamen als CSS-Klasse hinzu. Benutzername ist ein Name, der mit der von WordPress verwendeten URL kompatibel ist. Es hat keine Leerzeichen und alle Zeichen sind Kleinbuchstaben, was es perfekt für die Verwendung als CSS-Klasse macht.

Siehe auch unseren Leitfaden auf So fügen Sie Ihrem WordPress-Blog benutzerdefiniertes CSS hinzu

Der obige Code wird wahrscheinlich folgendermaßen angezeigt:

Jetzt können Sie ".peter" in Ihrem benutzerdefinierten CSS verwenden, um alle Beiträge dieses bestimmten Autors so zu ändern, dass sie unterschiedlich angezeigt werden.

.Peter {background-color: #EEE Rand: solid 1px #ccc; }

Passen Sie das Posten von Artikeln basierend auf Kommentaren an

Möglicherweise haben Sie Websites mit Widgets mit beliebten Artikeln gesehen, die manchmal anhand von Kommentaren bewertet werden. In diesem Beispiel zeigen wir Ihnen, wie Sie anhand der Anzahl der Kommentare einen anderen Stil erstellen.

Entdecken Sie unsere 10 Premium WordPress Plugins zum Verwalten Ihrer Kommentare

Zuerst müssen wir die Anzahl der Kommentare ermitteln und eine Klasse zuordnen.

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 701.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Um die Anzahl der Kommentare zu erhalten, müssen Sie den folgenden Code in Ihre WordPress-Themendateien einfügen. Dieser Code geht in die WordPress-Schleife, Sie können ihn direkt vor dem Tag hinzufügen .

genehmigt; if ($ my_comment_count <10) {$ my_comment_count = 'new'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'beliebt'; }?>

Dieser Code überprüft die Anzahl der Kommentare für die veröffentlichte Publikation und weist ihnen einen Wert zu, der auf dem Konto basiert. Beispielsweise erhalten Nachrichten mit weniger als 10-Kommentaren eine Klasse mit dem Namen " neu Es werden weniger als 20 aufgerufen aufstrebenden "Und alles, was mehr als 20-Kommentare betrifft, ist" beliebt ".

Dann müssen Sie die CSS-Klasse zur Funktion post_class hinzufügen.

" >

Dadurch werden die neuen, aufkommenden und beliebten CSS-Klassen zu allen Artikeln hinzugefügt, basierend auf der Anzahl der Kommentare in jedem Beitrag.

Wir laden Sie auch ein, unseren Artikel über zu lesen 6 WordPress Plugins zum Signieren von Dokumenten online

Sie können Stilpublikationen auch benutzerdefiniertes CSS hinzufügen, basierend auf der Beliebtheit:

.new {border: solid 1px #FFFF00;} .emerging {border: gestrichelte 1px #FF9933;} .Popular {border: gestrichelte 1px #CC0000;}

Wir fügen nur Rahmen hinzu, aber Sie können beliebige CSS-Regeln hinzufügen.

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erzielen und die Verbindung zu Ihrem Blog oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. Ultimate Mitgliedschaft Pro

Ultimate Membership Pro ist ein ausgezeichnetes Premium-Plugin für WordPress-Abonnements und Inhaltsbeschränkungen. Benutzer können gemäß ihrem Plan (kostenlos oder kostenpflichtig) verwaltet werden, indem exklusive Zugriffsebenen erstellt werden.

Ultimative Mitgliedschaft pro WordPress-Mitgliedschaft WordPress-Plugin

Es wird daher möglich sein, Schützen Sie den gesamten Inhalt Ihrer Websiteoder nur ein Teil davon. Es wird zum Beispiel ein Kurs, eine Lektion, eine Seite, ein Produkt, eine Kategorie, ein Bild usw. sein.

Lesen Sie auch unseren Artikel über 4 Premium WordPress Plugins zum Erstellen von Miniaturansichten

Die Hauptfunktionen sind unter anderem: Inhaltsschutz, mehrere Zugriffsebenen, Unterstützung für mehrere Zahlungsgateways - PayPal, Authorize.net, Stripe, 2CheckOut, Banküberweisung-, teilweiser Schutz des Inhalts, Und vieles mehr…

Download | Demo | Web-Hosting 

2. Wie Slider für Facebook

Wie Slider für Facebook ist ein Premium-WordPress-Plugin, das Besuchern die Möglichkeit bietet, Kommentare auf Ihrer Website zu hinterlassen. Mit diesem modernen und nicht aufdringlichen Kommentarfeld bietet dieses WordPress-Plugin Funktionen wie "Gefällt mir" und "Fanpage", die die Integration Ihrer Website in das soziale Netzwerk von Facebook erweitern.Wie Schieberegler für Facebook WordPress Social Plugin WordPress

Das Plugin bietet auch verschiedene Funktionen, um die Kapazitäten Ihrer Website zu erweitern: Es hat zum Beispiel ein Like-Abschnitt ("Like Box") oder eine Seite für Fans ("Fan Page Wall").

entdecken Sie auch So laden Sie nach und nach Facebook- und Disqus-Kommentare

Sie müssen die Schaltflächen "Gefällt mir" und "Teilen" nicht in Beiträge oder Seiten einbetten, da sie auf dem Facebook-Kommentar-Schieberegler bereits vorhanden sind und auf jedem Beitrag oder jeder Seite angezeigt werden können. Besucher finden den "Gefällt mir" -Button, die "Share" Schaltfläche und das Kommentarfeld für den Facebook-Schieberegler. Sie werden offensichtlich ihre Facebook-Konten verwenden.

Außerdem können Sie die Zeit des Shake-Effekts ein- und ausschalten und einstellen.

Download | Demo | Web-Hosting

3. Login Ninja

Mit diesem Premium-WordPress-Plugin können Sie Ihre Anmeldeseite anpassen. Es ist mehr als nur das Anpassen Ihr Anmeldeformular. Sie können die gesamte Seite anpassen, indem Sie die Farbe der Seite ändern, ein Hintergrundbild hinzufügen, ein Logo hinzufügen und vieles mehr.Ninja Login WordPress Plugin

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Seine anderen Eigenschaften sind: Schutz der Anmelde- und Registrierungsformulare mit captcha, automatisches und manuelles Verbot von IPs, die Sie mit brutaler Gewalt angreifen, ein detailliertes Protokoll aller verbindungsbezogenen Aktivitäten, Benutzerumleitung basierend auf Rollen und Benutzernamen, E-Mail-Benachrichtigungen erhalten Für alle Verbindungsereignisse eine benutzerfreundliche grafische Oberfläche, eine detaillierte Dokumentation und vieles mehr.

Download | Demo | Web-Hosting

Empfohlene Ressourcen

Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.

Fazit

Hier ist ! Das ist alles für dieses Tutorial. Ich hoffe, Sie können damit die Anzeige von Artikeln in Ihrem WordPress-Blog anpassen. Wenn Sie in diesem Bereich Bedenken oder Vorschläge haben, wenden Sie sich an uns den zu diskutierenden Kommentarbereich.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

... 

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

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

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie
tweet1
Registrieren1