Manchmal ist es von Nöten, dass man dem User Optionen für das eigene Theme anbietet. Dies kann aus Design-Gründen, zum Beispiel für verschiedene Backgrounds oder auch eine Kategorieauswahl, zur Darstellung der Artikel in einer im Design integrierten Box.
In diesem Post möchte ich euch einen guten Weg aufzeigen, eure eigene Options-Seite für euer Theme zu bauen. Diese Seite wird ein Text-Feld beinhalten sowie eine Auswahl an verschiedenen Kategorien für eine Auflistung in einer Box. Der Clou an der Sache ist, dass wir alle Daten dieser Options-Page in einem einzigen Datenbank-Eintrag speichern.

Als allererstes erstellen wir eine Funktion, in welcher WordPress gesagt wird, dass wir nun eine neue Options-Page erstellen. Dadurch müssen wir uns nicht groß um die Speicherung der Daten kümmern.

//functions.php

//die funktion
function ctheme_options_init(){
  //Registrieren der Options "ctheme_theme", die Speichervariable in der Tabelle "ctheme_theme_options" und eine Validierungs-Funktion ("ctheme_options_validate", dazu später mehr)
  register_setting('ctheme_theme', 'ctheme_theme_options', 'ctheme_options_validate');
}

add_action('admin_init', 'ctheme_options_init');

Damit auch etwas dargestellt werden kann, benötigen wir eine do_page-Funktion. In dieser könnt ihr eine externe Datei inkludieren, um eine bessere Übersicht zu behalten. Ich schreibe es für dieses Tutorial direkt mit hinein.

<?php function ctheme_options_do_page(){
?>
<div class="wrap">
  <h2>cTheme Theme Optionen</h2>

  <form action="options.php" method="post">
    <?php //Schreibt verschiedene hidden Inputs
    settings_fields('ctheme_theme'); ?>
    <?php //Hier werden die gespeicherten Optionen abgefragt. Wir erinnern uns, dass wir alles in einem Eintrag speichern!
    $options = get_option('ctheme_theme_options'); ?>

    <table class="form-table">
      <tbody>
        <tr valign="top">
          <th scope="row">Titel der Box</th>
          <td><input type="text" value="" name="" id="" /></td>
        </tr>
        <tr>
          <th scope="row">Kategorie für die Auflistung in der Box</th>
          <td>Hier stehen dann die Kategorien..</td>
        </tr>
      </tbody>
    </table>

    <p class="submit"><input class="button-primary" type="submit" value="<?php _e('Save Changes') ?>" /></p>

    </form>
  </div>
<?php } ?>

Da wir alle Daten nur in einem Datenbankeintrag speichern, müssen wir die vom User eingegeben Daten selbst validieren.

function ctheme_options_validate($input){
	$input['boxtitle'] = ( $input['boxtitle'] == '' ) ? 'Standard-Box' : $input['boxtitle'];
	$input['categorylist'] = ( is_array( $input['categorylist'] ) ) ? $input['categorylist'] : array();
	return $input;
}

Nun müssen wir die Werte noch änderbar machen. Fangen wir mit der Input-Box an:

<tr valign="top">
  <th scope="row">Titel der Box</th>
  <td><input type="text" value="<?php echo $options['boxtitle']; ?>" name="ctheme_theme_options[boxtitle]" id="ctheme_theme_options_boxtitle" /></td>
</tr>

Wie Ihr seht, verwenden wir hier als name-Attribute den $options-Name als Array. (Hm, ist der Satz denn jetzt verständlich?)

Machen wir uns nun an die Auswahl der Kategorien. Dazu brauchen wir zwei Funktionen: Die eine listet alle Kategorien rekursive auf. Dafür ist es notwendig zu prüfen, ob die aktuelle Kategorie in der Schleife eine Unter-Kategorie hat, die zweite Funktion.

/***************
* list subcategories
* @categories wp-get_categories-Array
* @categoryId choosen category
* @label label to save in options
* @options the options
*******************/
function ctheme_options_listcategory( $categories, $categoryId, $label, &$options ) {
        //alle kategorien durchgehen, um die gewünschten Kategorien zu erhalten...
        // 0 gibt z.B. alle Top-Kategorien aus, 8 z.B. nur die, welcher eine Sub-Kategorie der Top-Kategorie 8 ist
	foreach( $categories as $category ):
                //Hat diese Kategorie die gewünschte ID?
		if( $category->category_parent == $categoryId ):
		?>
			<li>
				<input name="ctheme_theme_options[<?php echo $label; ?>][]" type="checkbox" value="<?php echo $category->term_id; ?>" <?php if(@in_array($category->term_id, $options[$label])) { echo 'checked="checked"'; } ?> /> <?php echo $category->name; ?>
				<?php
                                //Ruft nun die 2. Funktion auf, um zu prüfen, ob diese Kategorie weitere Kategorien enthält
                                if($subcats = ctheme_options_hassubcategory($categories, $category->term_id)): ?>
					<ul style="padding-left:20px; margin-bottom:14px;">
						<?php
                                                //Sollte dies der Fall sein, rufe ctheme_options_listcategory erneut auf
                                                ctheme_options_listcategory( $categories, $category->term_id, $label, $options ); ?>
					</ul>
				<?php endif; ?>
			</li>
	<?php endif;
	endforeach;
}

/* check, if the given categoryid is in the category-array */
function ctheme_options_hassubcategory( $categories, $categoryId ){
	$hasSubcategory = false;

	foreach( $categories as $category ) {
		if( $category->category_parent == $categoryId) {
			$hasSubcategory = true;
			break;
		}
	}

	return $hasSubcategory;
}

In unserer do_page-Funktion können wir die Kategorie-Funktion nun einfach mit dem Label, welchen wir in der Validierungs-Funktion angegeben haben, aufrufen.

<tr>
  <th scope="row">Kategorie für die Auflistung in der Box</th>
  <td>
    <?php
        //Alle Kategorien von WordPress mit hide_empty=0 abfragen... Wir benötigen alle Kategorien für die Optionen
        $allCategories = get_categories('hide_empty=0');

        ctheme_options_listcategory( $allCategories, 0, categorylist, $options );
    ?>
  </td>
</tr>

Als letztes müsst ihr die Options-Seite noch an die Theme-Navigation im Admin-Bereich hängen:

//register options page
add_action('admin_menu', 'ctheme_menu');

function ctheme_menu(){
	add_theme_page('cTheme Optionen', 'Optionen', 'edit_theme_options', 'ctheme-options', 'ctheme_options_do_page');
}

Ein Layout mit DIVs anstatt Tabellen und iFrames?
Kein Problem! Mit diesem Tutorial und einer passenden Vorlage lernt ihr ganz schnell wie das geht.

Du möchtest also ein DIV Layout erstellen? Also gut, ich werde dir zeigen wie man eines Macht.
Zu nächsteinmal werde ich dir erklären was ein DIV ist und welche Vorteile ein DIV-Layout gegenüber ein Table-Layout’s hat.
Ich werde dann Schritt für Schritt erklären wie ich genau diese Webseite hier erstellt habe (übrigens, ich habe hierfür nur 20 Minuten gebraucht!)

Achtung!
Dieses Tutorial bezieht sich auf folgende Vorlage:
http://takeyo.de/div.html

Wieso DIVs?

Diese Frage musste ich mir am Anfang auch stellen, da ich dachte, dass man mit Tabellen viel besser Layouts aufbauen kann. Tatsächlich denken viele Leute so, doch Tabellen sind nicht für Layoutstrukturierungen gedacht. DIVs sind viel flexibler und man kann leicht ihre Größe ändern oder sie mit Javascript hin und herschieben.
Es wird am Anfang bestimmt schwer von Tabellen und iFrames loszulassen, aber mit DIVs bist du echt im Trend

Das DIV Objekt

Ein Div ist eine Art Box. Quadratisch, praktisch, gut! Ein Div wird in HTML so geschrieben:

<div>Inhalt</div>

Zunächst geben wir dem DIV eine ID oder eine Klasse.
ID: Eine ID ist ein einmaliges Objekt im Dokument. Man kann nicht mehrere Objekte mit der gleichen ID besetzen.
Klasse: Eine Klasse (Class) kann für unendlich viele Objekte im Dokument benutzt werden. Es gibt kein Limit.

Wir besetzen unser DIV also mit der ID “box”:

// Beispiel für eine ID
<div id="box"></div>
 
// Beispiel für eine Klasse
<div class="box"></div>

Bis jetzt hat sich aber noch nichts getan.
Nun müssen wir die ID in dem Stylesheet Bereich mit Eigenschaften belegen. Der Stylesheet Bereich kommt in den Head Bereich des Dokuments. Das ganze sollte dann so aussehen:

<head>
<style type="text/css">
 
// Beispiel für eine ID
#box { width: 50px; height: 50px; background-color: red; }
 
// Beispiel für eine Klasse
.box { width: 50px; height: 50px; background-color: red; }
 
</style>
</head>

Unser DIV sollte nun als roter quadratischer Kasten angezeigt werden.

Jeder mit Mensch mit Englischkenntnissen versteht was hier passiert ist.
Ich habe dem DIV folgende Eigenschaften Zugeteilt:

• width: 50px; ← bedeutet, dass das DIV 50px breit ist.
• height: 50px; ← bedeutet, dass das DIV 50px hoch ist.
• background-color: red; ← bedeutet, dass das DIV eine rote Hintergrundfarbe hat.

Man kann ein DIV natürlich noch mit vielen weiteren Eigenschaften bearbeiten.
Nun, du solltest nun wissen was ein DIV ist und wie man es mit Eigenschaften sichtbar macht.

Ein Layout erstellen – Schritt 1

So, nun da du ungefähr weißt was DIVs sind können wir Anfang diese Webseite hier nachzubauen.
Dieses Layout besitzt einen Header, eine Navigation und einen Content.
Wir müssen nun diese 3 Bereiche als DIVs scheiben:

<divid="header">Meine Homepage</div>
<divid="navi">Inhalt</div>
<divid="content">Inhalt</div>

Unglaublich aber war, mehr brauch man nicht für ein DIV Layout.
Nun müssen wir aber diese 3 DIVs natürlich noch in unserem Stylesheet Bereich bearbeiten. Doch bevor das passiert müssen wir erst etwas anderes bearbeiten. Und zwar den Body Tag. Der Body Tag schließt alles sichtbare auf der Webseite ein. Ich habe unsere Seite mal mit folgenden Eigenschaften belegt:

body {
width: 800px;/* Breite des Layouts */
margin-left: auto;/* Der Wert "auto" platzieren das Layout mittig. Vorraussetzung: width. */
margin-right: auto;
background-color: #5d5d5d;/* Hintergrundfarbe */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;/* Schriftart */
font-size: 12px;/* Schriftgröße */
}

Ich habe die einzelnen Eigenschaften mit Kommentaren versehen um ihre Auswirkungen zu beschreiben.
Nun kommt der Header:

#header {
height: 80px;/* Höhe des Headers */
max-width: 800px;/* Max. Breite, damit der Header das Layout nicht sprengt. */
background-color: #fff;/* Hintergrundfarbe */
text-align: center;/* Text wird mittig ("center") platziert. */
padding-top: 50px;/* 20px innerer Abstand vom Rand zum Text */
font-size: 24px;/* Schriftgröße soll 24px betragen. */
font-weight: bold;/* Schrift soll FETT erscheinen */
}

Nun sollte die Seite aus einem grauen Hintergrund und unserem Header bestehen.
Machen wir also weiter mit den anderen DIVs um das Layout zu vervollständigen. Hier kommt die Navigation:

#navi {
float: left;/* Div wird nach links ("left") ausgerichtet. */
width: 120px;/* Breite der Navigation */
background-color: #fff;/* Hintergrundfarbe */
padding: 3px;/* 3px innerer Abstand vom Rand zum Text */
}

Hier kommt jetzt die Eigenschaft “float” ins Spiel, welche sehr wichtig ist. Denn DIV’s haben die Angewohnheit sich untereinander zu Positionieren. Doch wenn wir alle DIVs untereinander machen würden, hätten wir keine Seitennavigation mehr. Also, “float” setzt das DIV in die angegebene Position, sodass das folgende DIV anstatt darunter, daneben gesetzt wird. Allerdings muss dieses nachfolgende DIV die gleiche Eigenschaft besitzen, so wie ich es hier beim Content gemacht habe:

#content {
float: left;/* Div wird nach links ("left") ausgerichtet. */
width: 668px;/* Breite des Contents */
background-color: #fff;/* Hintergrundfarbe */
padding: 3px;/* 3px innerer Abstand vom Rand zum Text */
}

So, nun solltest du schon eine Ähnlichkeit zu diesem Layout hier und dem, welches du gemacht hast erkennen.
Allerdings fehlt jetzt noch der Inhalt des Contents und der Navigation, also auf zu Schritt 2!

Ein Layout erstellen – Schritt 2

So, das Grundgerüst steht. Nun kümmern wir uns um den Inhalt. Angefangen im Content. Wir machen nun eine Überschrift, ebenfalls als DIV.
Wir schreiben also nun in das Content DIV folgendes:

<div class="titel">Titel</div>

Dieses DIV unterscheidet sich ein wenig von den anderen. Es hat anstatt einer ID eine Klasse. Wieso? Weil wir davon ausgehen, dass diese Titel mehrmals in einem Dokument vorkommen werden. Nun müssen wir es auch dementsprechend in dem Stylesheet Bereich bearbeiten:

</span>
.titel {
width:100%;<em>/* Breite des DIVs ("100%" = automatische max. Breite) */</em>
height: 17px;<em>/* Höhe des DIVs */</em>
background-color: #069;<em>/* Hintergrundfarbe */</em>
color: #fff;<em>/* Schriftfarbe */</em>
text-align: center;<em>/* Textausrichtung ("center" = mittig)*/</em>
padding-top: 3px;<em>/* 3px innerer Abstand zum Rand */</em>
margin-bottom: 10px;<em>/* 10px äußerer Abstand zum Rand */</em>
}

Diesen DIV kannst du immer dann einsetzen, wenn du einen neuen Titel brauchst.
Nun kommen wir zu der Navigation, hier kommen etwas mehr Eigenschaften auf uns zu.
Als erstes füllen wir unsere Navigation mit einem Titel und ein paar Links. Das kann dann so aussehen:

<div id="navi">
<div class="titel">Navigation</div>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>

So und nun kommen wir zu dem Stylesheet Bereich. Die Links in dem Navi DIV werden so angesprochen:

#navi a {
color: black;/* Schriftfarbe */
text-decoration: none;/* Link wird nicht unterstrichen */
display: block;/* Setzt alle Links untereinander */
background-color: #DDD;/* Hintergrundfarbe */
max-width: 116px;/* Breite des Links */
margin-bottom: 3px;/* 3px äußerer Abstand zum Rand */
padding: 3px;/* 3px innerer Abstand zum Rand */
}

Nun sollten die Links in der Navigation aussehen wie in diesem Layout hier.
Doch wir müssen noch zwei kleine extras zu den Links einbauen.
Extra nr.1 ist ein “Hover”-Effekt, der erscheint, wenn man mit der Maus über einen Link fährt.
Und das machen wir so im Stylesheet Bereich:

#navi a:hover {
background-color: #CCC;/* Hintergrundfarbe */
color: #fff;/* Schriftfarbe */
}

So und jetzt noch als letztes eine Einstellung, die bereits besuchte Links nicht Lila verfärbt:

#navi a:visited {
color: black;/* Schriftfarbe */
}

So, nun ist alles Fertig!!

Du hast nun ein komplettes Layout aus DIVs erstellt und kannst es jetzt noch weiter bearbeiten.
Wenn du sehen willst, wie ich die DIVs mit dem HTML Code gemacht habe oder den Footer am unteren Rand, schau einfach im Quelltext.

Du kannst dieses Layout weiterhin verwenden wenn du magst.

Liebe Grüße Take!