Abonniere die neusten Artikel via RSS-Feed oder Atom und verfolge die Kommentare ebenso via RSS-Feed oder Atom-Feed
Anzeige
Das Blog hat ein Theme und bekommt für jede Seite ein extra Stylesheet. Dieser aktuelle Trend der Individualität für jeden Inhalt wird auf diversen Sites diskutiert. Auch mit WordPress kann man dies tun; verschiedene Möglichkeiten gibt es. Eine Möglichkeit ist es auf Basis des Titels ein individuelles Stylesheet zu erstellen.
Im Standard gibt die Klassenvergabe der Funktion body_class() schon eine Menge an Möglichkeiten. Noch mehr Individualität kann man über den Titel oder die ID erreichen.
Lohnt sicher nicht im klassischen Blogumfeld aber für eine Seite mit überschaubaren Content und dem wunschgemäßen Unterschied funktioniert meine Idee recht gut. Wie habe ich es in dem Fall umgesetzt?
Wenn eine Seite geladen wird, dann kann man ja den Title übergeben. Wenn man diesen in den Body-Tag als ID oder class übernimmt, und dann jeweils für die ID oder class eine Style erstellt, wird das passende Design geladen.
Alternativ kann man mit der ID der Seite oder des Beitrags arbeiten, Funktion the_ID() übergibt diese. Aufpassen, IDs und Klassen dürfen nicht mit einem Zahlenweert beginnen und daher muss ein String ergänzt werden, beispielsweise
<div id="page-<?php the_ID(); ?>">
Als letzte Alternative möchte ich erwähnen, dass man die Funktion body_class() via Hook mit eigenen Klassen erweitern kann. So kann man auch den Titel einer Seite/Beitrags via Hook in diese Funktion bringen und ausgeben lassen.
function fb_title_body_class($classes) {
global $post;
$classes[] = sanitize_title_with_dashes( get_the_title( $post->ID ) );
return $classes;
}
add_filter( 'body_class', 'fb_title_body_class' );
Im folgenden der einfachste Fall via Titel, so dass man lediglich diese Klasse ausgibt und body_class() wird nicht genutzt.
in den header des Themes kommt das Stylesheet:
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/custom.css" type="text/css" media="screen" />
Alternativ wird dieses via Hook wp_head eingebunden, wenn die entsprechende Seite geladen wird, so lädt man das explizite Stylesheet nur, wenn es benötigt wird und der header ist lesbar. Alles spielt sich in der functions.php des Themes ab.
in den body-Tag der page.php kommt der Titel der Seite:
<body class="<?php echo sanitize_title_with_dashes( get_the_title() ); ?>">Damit hat die Seite "My Home" den body-Tag:
<body class="my-home">
und so weiter...
in der custom.css definierst du nun alle Styles für class home: bsp.
.my-home a { color: #090; text-decoration: none; }
.my-home a:visited { color: #999; text-decoration: none; }
.my-home a:hover { color: #f60; text-decoration: none; }
in dem original-Theme sieht das so aus:
a { color: #009; text-decoration: underline; }
a:visited { color: #999; text-decoration: underline; }
a:hover { color: #c00; text-decoration: underline; }
Wie ich finde, ein Ansatz mit viel Potential und dies überlasse ich gern eurer Kreativität. Wer also mit WordPress für jede Seite ein anders Stylesheet laden möchte, hat so einen Ansatz für eine Lösung.
Auf Wunsch einiger Leser habe ich ein kleines Plugin erstellt, welches den Titel des Beitrags in die Funktion body_class() schreibt. Man muss also lediglich das Plugin aktivieren und die WordPress Standard-Funktion body_class() im body-Tag verwenden - wenn sie nicht schon im Theme integriert ist. In der Regel findet das im Template header.php statt.
<body <?php body_class(); ?>>
Die Version 0.1 sieht wie folgt aus:
<?php
/**
* Plugin Name: Title 2 body_class
* Plugin URI: http://bueltge.de/wordpress-theme-in-abhaengigkeit-des-titel/397/
* Text Domain: title2bodyclass
* Domain Path: /languages
* Description: Add the title of the post to the boy_class-function
* Author: Frank Bültge
* Version: 0.1
* Author URI: http://bueltge.de/
* Donate URI: http://bueltge.de/wunschliste/
* License: GPL
* Last change: 26.07.2010 10:37:23
*/
/**
License:
==============================================================================
Copyright 2010 Frank Bueltge (email : frank@bueltge.de)
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
Requirements:
==============================================================================
This plugin requires WordPress >= 2.8 and tested with PHP Interpreter >= 5.2.9
*/
if ( !class_exists('title2body_class') ) {
global $wp_version;
if ( !function_exists ('add_action') || version_compare($wp_version, "2.8alpha", "<") ) {
if (function_exists ('add_action'))
$exit_msg = 'The plugin requires WordPress 2.8 or newer. <a href="http://codex.wordpress.org/Upgrading_WordPress">Please update WordPress</a> or delete the plugin.';
else
$exit_msg = '';
header('Status: 403 Forbidden');
header('HTTP/1.1 403 Forbidden');
exit($exit_msg);
}
class title2body_class{
function __construct() {
add_action( 'body_class', array( &$this, 'title_body_class' ) );
}
function title_body_class($classes) {
global $post;
$classes[] = sanitize_title_with_dashes( get_the_title( $post->ID ) );
return $classes;
}
}
function title2body_class_start(){
new title2body_class();
}
add_action('plugins_loaded', 'title2body_class_start');
}
?>
Download des Plugins Title 2 body_class: title2body-class.zip (1 kByte)
Kommentarregeln: Bleib cool, kritisch ist in Ordnung, aber wenn du unhöflich bist, dann lösche ich deinen Kommentar. Bitte benutze deinen persönlichen Namen oder Initialen und nicht den Namen eines Unternehmens, dies würde als Spam gewertet und wird gelöscht. Der Zusammenhang zwischen Namen und URL sollte nicht offensichtlich auf Spam hindeuten! ♥ Ansonsten, vielen Dank für den Kommentar und viel Spaß mit meinem Blog.
händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.
Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.
xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>
Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als < und > als > einfügt.
E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.
Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.
Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.
Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.
bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.
Das Weblog wird angetrieben von WordPress und aktuell gibt es 892 Beiträge, 16496 Kommentare in 14 Kategorien und 450 Tags.
Das Blog wird liebevoll mit xHTML & CSS in Handarbeit gestaltet.
Design und Code ist unter Copyright
© 2001 - 2010 bueltge.de [by:ltge.de]
16. Juli 2010 um 09:13
Hättest du daraus jetzt noch ein Plugin gestrickt wäre es der Hammer. Sone Veränderungen direkt am Code zu machen ist ja immer ein wenig gefährlich.
16. Juli 2010 um 11:21
@Florian: ich kann gern ein Plugin bauen, welches den Titel des Posts an die function
body_class()übergibt, die dann in den Body gehört?16. Juli 2010 um 11:27
Hallo Frank, ja mach bitte ein Plugin, die Idee ist gut, aber traue mich so, wie Florian schon sagt auch nicht ran.
Und gebe bitte kurz bescheid.
16. Juli 2010 um 12:06
Abhängigkeiten zu veränderlichen Dingen halte ich für nicht so geeignet. Die Abhängigkeit zur ID des Beitrages oder der Seite, wie ebenfalls beschrieben, halte ich da für wesentlich sinnvoller – ganz unabhängig davon, ob man es nun sinnvoll finden will, oder nicht, wenn jede Seite eines Internetauftritts anders aussieht …
16. Juli 2010 um 12:59
Wie du schon geschrieben hast, für Seiten mit überschaubaren Content und nur geringen Änderungen am Stylesheet ist es ein gangbarer Weg. Sind jedoch relativ viele Seiten betroffen und/oder die Änderungen am Stylesheet sind doch etwas umfangreicher, dann wäre es ggf. besser für jede Seite ein eigenes Stylesheet anzulegen und dieses direkt einzubinden.
Bsp.:
<?php
if(is_page()){ // wenn es eine seite ist...
$fb_stylesheet = bloginfo( 'template_url' ).'/'.sanitize_title_with_dashes( get_the_title() ).'.css';
} else {
$fb_stylesheet = 'style.css';
}
?>
<link rel="stylesheet" href="<?php echo $fb_stylesheet; ?>" type="text/css" media="screen" />
Vorteil: Man spart einiges an Traffic und gewinnt etwas Pertformance durch die schlankeren Stylesheets. Zudem wäre es doch etwas übersichtlicher für jede Seite ein eigenes Stylesheet zu hinterlegen anstatt alle Änderungen in einem zusammen zu fassen.
Nachteil: Man muss natürlich alle Fälle abfangen für die kein extra Stylesheet hinterlegt ist (z.B. Startseite, Einzelansicht, usw)
-----
Die Abfrage der ID zur Auswahl eines Stylesheet lässt sich hervorragend für ein Plugin nutzen. Im Backend registriert man die ID jede Seite für die man ein anderes Stylesheet verwenden möchte in einem Array. Für die registrierten Seiten kann dann das entsprechende Stylesheet hochgeladen werden. Beim Hochladen kann man mit
sanitize_title_with_dashes( get_the_title( $id ) )die Stylesheets direkt umbenennen und dann nach den von dir beschriebenen Weg verwenden.Bsp.:
<?php
$fb_pages_with_xtra_stylesheets = get_option('fb_xtra_stylesheets');
// die IDs der Seiten die geändert werden sollen sind als Array in der Option-Table hinterlegt
if( in_array( the_ID(), $fb_pages_with_xtra_stylesheets ) ) {
$fb_stylesheet = bloginfo( 'template_url' ).'/'.sanitize_title_with_dashes( get_the_title( the_ID() ) ).'.css';
} else {
$fb_stylesheet = 'style.css';
}
?>
<link rel="stylesheet" href="<?php echo $fb_stylesheet; ?>" type="text/css" media="screen" />
So hat man mit relativ wenig Aufwand eine eigene Stylesheet-Verwaltung realisiert. Einzelnen Seiten kann quasi per Mausklick ein eigenes Stylesheet bzw. wieder das Standard-Stylesheet zugewiesen werden. Als Plugin-Lösung wäre der obige Code natürlich eine Funktion und im Theme wäre nur noch der Funktionsaufruf.
Von der Performance wäre es eine gute Lösung da nur das CSS ausgeliefert wird, welches benötigt wird. Und auch Änderungen an den einzelnen Stylesheets wären einfacher da man nicht ein riesiges Stylesheet durchforsten muss, sondern gezielt in bestimmten Dateien suchen kann.
18. Juli 2010 um 12:53
Hallo Frank,
es reicht doch vollkommen aus wenn der Theme die "body_class" Funktion nutz und ggf. jeder Artikel Container durch die Artikel ID bestimmt wird. Alleine mit den dadurch Inviduell ergebenen Classen und ID's für CSS kann man doch inviduelle Page/Archiv/Kategorie/ Styles bauen oder nicht?
Warum dann also durch ein zusätzlichen Code-Schnipsel in der functions.php oder gar durch ein Plugin einbringen?
So ganz den Sinn seh ich da nicht wirklich hinter.
20. Juli 2010 um 11:43
@Fabian: body_class gibt aber kein Ident für eine Seite mit, daher braucht man die Id, den Titel oder was anderes. Ich erweitere die body_class Funktion in dem Fall und kille alle anderen Klassen, damit der Code schlank bleibt. In meinem Fall war der Kunde ein Designer und wollte zu jedem Produkt ein anderes Design und dies haben wir so gelöst.
20. Juli 2010 um 13:15
Gut zu wissen. Ich dacht es gäbe keine so elegante Lösung für diesen Umstand.
21. Juli 2010 um 20:28
Okay Frank das ist ein Leuchtend, body_class() mag ich eh nicht wirklich.
Aber body_class gibt doch von Haus aus eine Identifikation per ID aus oder nicht?
So wie "page-id-252"... ich mein okay, es steht vieles weitere unnütze zeug drin (Daher mag ich den template tag net)... aber wäre das nicht die einfachste möglichkeit die Seiten Inviduell zu gestallten ohne das man zusätzlichen Code einbinden muss oder irgendwass manipuliert?
22. Juli 2010 um 10:04
@Fabian: ja, post und page-id wird mitgegeben - aber eben noch vieles anderes und ich will den Code eher schlank haben, unnütze Strings sind überflüssig und daher filtere ich die Funktion und gebe zurück, was ich brauche. In dem Beispiel ist so schlanker Code entstanden und trotzdem eine Möglichkeit der Individualität. Vorteil des Titels als Klasse war ebenso, dass man sehr gut via Klasse das Stylesheet zum Post identifizieren konnte. Klar geht das über die ID, die aber den meisten Anwendern wenig sagt und so war eine direkte Zuordnung möglich.
22. Juli 2010 um 10:51
Frank ok, leuchtet ein.
Wie gesagt, ich halte von den Template Tag "body_class" eh wenig, gerade weil er soviele verschiedene Klassen einfügt die man wahrscheinlich zu 99% nicht nötig hat.
Ich hinterlege meistens in der "functions.php" eine kleine Funktion mit Conditional Abfrage, wenn ich einzelne Artikel/Seiten/Kategorien etc. extra abheben will, weil mir eine Klasse im body völlig ausreicht.
Hier meint es WordPress jedenfalls defenitiv viel zu gut.
24. Juli 2010 um 22:46
Hallo Frank
Das ist zwar jetzt total am Thema vorbei, aber ich hoffe ich bekomme trotzdem eine Antwort.
Welches Plugin verwendest Du für die Live Kommentar Vorschau?
Gruß Rainer
25. Juli 2010 um 20:51
Ein Plugin wäre echt wünschenswert. Auch ich bin eher ein "User" der wiederum sich lieber in der WordPressoberfläche wohl fühlt als irgendwo im Code was zu verändern. Sofern hier was kommen sollte, würde ich mich darüber freuen
26. Juli 2010 um 10:40
Das Plugin steht nun zum Download bereit, kann gern erweitert und angepasst werden - viel Freude damit.
26. Juli 2010 um 10:50
@RainerM: diese ist mit jQuery realiert, kein Plugin.
31. Juli 2010 um 00:28
Flo, bedanke Dich mal beim Frank
31. Juli 2010 um 22:15
Wenn nach einem Plugin gerufen wird, dann sollte es auch genutzt werden. Und bei der Benutzung hätte auffallen müssen, das dass Plugin einen kleinen Fehler enthält. Nach 'return $classes' ist eine geschweifte Klammer zu viel.
Und was auch nicht geht, Konstanten in Klassen definieren. Wusste ich bisher aber auch noch nicht.
Die beiden Zeilen mit "define" kann man bedenkenlos löschen, beide Konstanten werden nicht benötigt.
Wenn jemand also nach einem Plugin schreit und jemand anderes sich die Mühe macht es zu schreiben, dann sollte derjenige der geschrien hat sich wenigstens die 5 Minuten Zeit nehmen und das Plugin testen. Ansonsten wird es in Zukunft deutlich weniger Plugins auf dieser Welt geben. Zumindest fehlerfrei funktionierende.
1. August 2010 um 20:37
@Ralf: danke dir vielmals, habe es korrigiert - hatte das Plugin an die Schreihälse per Mail versandt und um ein Feedback gebeten