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.
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 verschiedenen Elementen Ihrer Website Standard-CSS-Klassen hinzu. EIN Wordpress-Theme standardkompatibel muss Code enthalten, der von WordPress benötigt wird, um CSS-Klassen für Textkörper, Beiträge, 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.
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.
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
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.
Sonst noch zu entdecken Wie Sie Ihren Blog-Inhalte Schaber schützen
Entsprechend deinem Wordpress-Theme, finden Sie die Funktion post_class() in Ihrer single.php-Datei oder in den Template-Dateien. Normalerweise sieht der Code so 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.
Unsere Ideen für 10 Premium WordPress Plugins zum Verwalten Ihrer Kommentare
Zuerst müssen wir die Anzahl der Kommentare ermitteln und eine Klasse zuordnen.
Um die Anzahl der Kommentare zu ermitteln, müssen Sie den folgenden Code in Ihre Dateien einfügen Wordpress-Theme. 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 verwenden Wordpress-Plugins um ein modernes Erscheinungsbild zu geben 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 großartig WordPress Plugin Abonnementprämie und Inhaltsbeschränkung. Es ermöglicht die Verwaltung von Benutzern gemäß ihrem Paket (kostenlos oder kostenpflichtig), indem exklusive Zugriffsebenen erstellt werden.
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, Autorisieren.net, Stripe, 2CheckOut, Banküberweisung-, teilweiser Schutz des Inhalts, Und vieles mehr…
Herunterladen | Demo | Web-Hosting
2. Wie Slider für Facebook
Wie Slider für Facebook vorhandenen Wirkstoffe zu einem WordPress Plugin Premium, das Besuchern die Möglichkeit bietet, Kommentare auf Ihrer Website zu hinterlassen. Mit diesem modernen und nicht aufdringlichen Kommentarfeld ist dies WordPress Plugin bietet Like Box und Fan Page Wall-Funktion, die Ihre Website-Integration mit dem sozialen Netzwerk Facebook erweitert.
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.
Herunterladen | 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.
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.
Herunterladen | Demo | Web-Hosting
Empfohlene Ressourcen
Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.
- 9 WordPress-Plugins zur Verwaltung von PayPal-Zahlungen in seinem Blog
- 10 wichtige WordPress-Plugins zur Installation in Ihrem Blog
- 10 WordPress-Plugins zum Verwalten von Werbung
- 10 WordPress Plugins zum Erstellen von Attributen für Ihre variablen Produkte
Zusammenfassung
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.
...
