WordPress-Theme in Abhängigkeit des Titel

Individuelle Styles für jede Seite sind aktuell ein Trend. WordPress bietet verschiedene Ansätze dafür, eine Möglichkeit will ich aufzeigen.

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.

Mit Hilfe des Titel

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.

Plugin-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: https://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&uuml;ltge
 * Version: 0.1
 * Author URI: https://bueltge.de/
 * Donate URI: https://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)

Comments are closed.