Tobias Scheible
Web-Entwickler, Ingenieur & Dozent
einzelne Seiten hervorheben

Datum: Sonntag, 30. Juni 2013

Autor: Tobias Scheible

Kommentar(e): 3 Kommentare

Kategorie: Aktuelles

Tags: Design, Gestaltung, PHP, Wordpress, CSS, Individualisierung

Individuelle Seiten in WordPress

Manchmal kommt es vor, dass man einen speziellen Blog-Eintrag in Wordpress besonders hervorheben möchte oder dass der Eintrag einfach etwas anders gestaltet sein soll. Der einfachste Weg ist eine individuelle Klasse oder ID zu vergeben. Wordpress bietet dafür schon von Haus aus die passenden Funktionen an.

BODY-Element

Zum einen kann man direkt dem BODY-Element eine entsprechende Klasse zuweisen. WordPress stellt dazu die PHP-Funktion body_class () bereit. Sie liefert mehrere Klassen-Namen zurück. Zum Beispiel, zu welchem Typ die Seite gehört und auch die Klasse postid-*, die mit der entsprechenden ID versehen wird. Damit kann zum Beispiel der komplette Hintergrund einer Seite bzw. eines Eintrags geändert werde.

Im WordPress-Template fügt man dazu den folgenden Code hinzu:

<body <?php body_class(); ?>

Und so sieht dann das Ergebnis aus:

<body class="single postid-1">

DIV-Element

Soll nicht die komplette Seite abgeändert werden, sondern nur der eigentliche Beitrag, kann auch ein umschließendes HTML-Element die Artikel-ID bekommen. Ein einzelner Blog-Eintrag kann so über die ID individuell angepasst werden.

Im Template wird der folgende Code hinzugefügt:

<div id="post-<?php the_ID(); ?>">

Und so sieht dann das Ergebnis aus:

<div class="post" id="post-1">
  • Artikel teilen:

Über Tobias Scheible

Tobias Scheible

Tobias Scheible arbeitet als wissenschaftlicher Mitarbeiter an der Hochschule Albstadt-Sigmaringen. Dort ist er als Autor und e-Tutor im Masterstudiengang Digitale Forensik tätig und leite im Bachelorstudiengang IT Security Praktika rund um das Thema Informationssicherheit. Darüber hinaus ist er Mitinitiator des Kompetenzzentrums Cyber Security Lab, welches Forschungsprojekte auf dem Gebiet der IT-Sicherheit koordiniert. Zusätzlich hält er Vorträge und Workshops zu aktuellen Themen der IT-Sicherheit.

Alle Blog-Artikel Website Facebook Twitter Xing

Kommentare

Firmennest Webdesign

Wir sind zwar nicht auf WordPress spezialisiert, aber diese Funktion hört sich gut an 🙂

Das WordPress wird auch immer umfänglicher und attraktiver, ebenfalls für komplizierte Webseiten/Projekte.

LG

Hans's Lederschuhe

War gerade auf der suche nach der Möglichkeit einige meiner Seiten zu individualisieren und bin hier auf den Blog gestoßen. Danke für die Lösung, hat mir reichlich Programmieraufwand gespart!

christian schmidt

Guten Tag,

wo wäre der „Body…Code“ ein zu tragen ???
Über einen klenen Wink wäre ich sehr glücklich. Denn ich möchte verschiedenen Beitragskategorien unterschiedliche CSS Eigenschaften zuweisen.

Vielen Dank für Ihre Hilfe !!!

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

nach oben