Admin-Panel für das LB-Projects Theme

1

In den früheren Versionen des LB-Projects Themes mussten viele Daten per Hand im Quellcode eingetragen werden, wie zum Beispiel die Links in der Seitennavigation, der Inhalt der Slideshow auf der Startseite, aber auch der Text auf der 404-Fehlerseite, usw.
Seit Version 1.3 ist dies nun nicht mehr nötig, da ich ein so genanntes “Theme Options Panel” erstellt habe. Mithilfe dieses Panels können im WordPress-Backend alle Einstellungen vorgenommen werden, die das Theme betreffen.

Aufgeteilt ist das Panel in sechs Kategorien, wie auf dem ersten Bild zu erkennen. Mithilfe eines Javascript Scripts werden die Blöcke beim Klicken auf das “+” ausgeklappt und geben die Optionen innerhalb dieser Kategorie frei. Im Quellcode sind die Optionen in einem großen Array gespeichert. Dieses enthält weitere Arrays, die die Parameter name, desc, id und type enthalten. Sie definieren die Optionen, die auf der Seite angezeigt werden.
Beispiel:

    array( "name" => "Logo",  
        "desc" => "Das Haupt-Logo der Seite. Damit eine optimale Darstellung erzielt wird, sollte es 80 Pixel breit sein.",  
        "id" => $shortname."_logo", 
        "type" => "text"), 

Das Array dient für die Anzeige der “Logo”-Option (s. Bild 2). Es trägt festgelegt durch das Attribut name den Namen “Logo” und ist ein Text-Eingabefeld. Die Beschreibung wird durch die Eigenschaft desc festgelegt, während id für die Bezeichnung der Funktion verantwortlich ist, die durch das Eingabefeld aufgerufen wird, in diesem Fall lb_logo. Das Präfix lb wurde ganz am Anfang des Quellcodes durch die Variable $shortname angegeben.
Der in das Textfeld eingegebene Text kann nun irgendwo innerhalb des Themes verwendet werden. Beim Logo zum Beispiel wird die in das Textfeld eingegebene URL in einen img-Tag in der header.php ausgegeben, sodass das vom Benutzer ausgewählte Bild angezeigt wird. Praktisch sieht die Ausgabe des Textes folgendermaßen aus:

<img id="logo" src="<?php echo stripslashes(get_option('lb_logo')); ?>" />

Eine genauere Erklärung der einzelnen Code-Abschnitte erhalten Sie in diesem Tutorial, nach dessen Anleitung ich auch die LB-Projects Optionen-Seite erstellt habe.

Übersicht über das gesamte Backend mit geöffnetem Theme-Panel

Optionen in der Kategorie Allgemein

Kategorie "Startseite" mit Inhalten für die LB-Projects Startseite

Für das Option-Panel wurde die Datei functions.php des Themes durch unten stehenden Code erweitert.

$themename = "LB-Projects";
$shortname = "lb"; 

//Anzeige der Optionen im Admin-Panel
$options = array (
      
    array( "name" => $themename." Options",  
        "type" => "title"),

//Allgemein

    array( "name" => "Allgemein",
        "type" => "section"), 
    array( "type" => "open"),

    array( "name" => "Logo",  
        "desc" => "Das Haupt-Logo der Seite. Damit eine optimale Darstellung erzielt wird, sollte es 80 Pixel breit sein.",  
        "id" => $shortname."_logo", 
        "type" => "text"),   
      
    array( "name" => "Eigenes Favicon",  
        "desc" => "Ein Favicon ist ein 16x16 Pixel gro&szlig;es Bild im .ico-Format, das in der Adressleiste des Browsers angezeigt wird. Geben Sie hier die gesamte URL zum Bild ein.",  
        "id" => $shortname."_favicon",  
        "type" => "text"),

    array( "name" => "Google Analytics Code",  
        "desc" => "Geben Sie hier Ihren Google Analytics Tracking-Code ein. Er wird automatisch im Header hinzugef&uuml;gt.",  
        "id" => $shortname."_ga_code",
        "type" => "textarea"),

    array( "name" => "Eigenes CSS",  
    	"desc" => "Hier k&ouml;nnen Sie Ihre eigenen CSS Regeln erg&auml;nzen, z.B.: .button{color:green}",  
    	"id" => $shortname."_custom_css",  
    	"type" => "textarea"),  

//Social Buttons

    array( "type" => "close"),
    array( "name" => "Social Buttons",
        "type" => "section"), 
    array( "type" => "open"),

    array( "name" => "RSS Button anzeigen",  
        "desc" => "Soll ein Button f&uuml;r den Newsfeed im Footer angezeigt werden?",
        "id" => $shortname."_rss_button",  
        "type" => "checkbox"),

    array( "name" => "Social Buttons anzeigen",  
        "desc" => "Sollen die Social Buttons im Footer angezeigt werden?",
        "id" => $shortname."_social_buttons",  
        "type" => "checkbox"),

    array( "name" => "YouTube",  
        "desc" => "Geben Sie Ihren YouTube Benutzernamen an.",
        "id" => $shortname."_button_youtube",  
        "type" => "text"),

    array( "name" => "Facebook",  
        "desc" => "Geben Sie die gesamte URL zu Ihrem Facebook-Profil an.",
        "id" => $shortname."_button_facebook",  
        "type" => "text"),

    array( "name" => "Twitter",  
        "desc" => "Geben Sie die gesamte URL zu Ihrem Twitter-Profil an.",
        "id" => $shortname."_button_twitter",  
        "type" => "text"),

    array( "name" => "Google Plus",  
        "desc" => "Geben Sie die gesamte URL zu Ihrem Google Plus-Profil an.",
        "id" => $shortname."_button_googleplus",  
        "type" => "text"),

    array( "name" => "LinkedIn",  
        "desc" => "Geben Sie die gesamte URL zu Ihrem LinkedIn-Profil an.",
        "id" => $shortname."_button_linkedin",  
        "type" => "text"),

//Startseite

    array( "type" => "close"),
    array( "name" => "Startseite",
        "type" => "section"), 
    array( "type" => "open"),

    array( "name" => "Artikel anzeigen", 
        "desc" => "Soll auf der Starseite ein Artikel angezeigt werden?",
        "id" => $shortname."_show_hp_article",  
        "type" => "checkbox"),

    array( "name" => "Titel",
        "desc" => "Geben Sie einen Titel f&uuml;r den Artikel auf der Starseite an.",
        "id" => $shortname."_hp_title",  
        "type" => "text"),

    array( "name" => "Inhalt",
        "desc" => "Geben Sie den Inhalt f&uuml;r den Startseiten-Artikel an.",
        "id" => $shortname."_hp_text",  
        "type" => "textarea"),

//Slideshow

    array( "type" => "close"),
    array( "name" => "Slideshow",
        "type" => "section"), 
    array( "type" => "open"),

    array( "name" => "Slideshow anzeigen", 
        "desc" => "Soll die Javascript-Slideshow auf der Startseite angezeigt werden?",
        "id" => $shortname."_show_slideshow",  
        "type" => "checkbox"),

    array( "name" => "Bild #1",
        "desc" => "Geben Sie die URL zum ersten Bild der Slideshow an.",
        "id" => $shortname."_slideshow_img1",  
        "type" => "text"),
    array( "name" => "Titel #1",
        "desc" => "Geben Sie einen Titel f&uuml;r das erste Bild der Slideshow an.",
        "id" => $shortname."_slideshow_title1",  
        "type" => "text"),
    array( "name" => "Link #1",
        "desc" => "Geben Sie einen Link f&uuml;r das Slideshow-Bild an.",
        "id" => $shortname."_slideshow_link1",  
        "type" => "text"),
    array( "name" => "Text #1",
        "desc" => "Geben Sie einen Beschreibungstext f&uuml;r das erste Bild der Slideshow an.",
        "id" => $shortname."_slideshow_text1",  
        "type" => "textarea"),

    array( "name" => "Bild #2",
        "desc" => "Geben Sie die URL zum zweiten Bild der Slideshow an.",
        "id" => $shortname."_slideshow_img2",  
        "type" => "text"),
    array( "name" => "Titel #2",
        "desc" => "Geben Sie einen Titel f&uuml;r das zweite Bild der Slideshow an.",
        "id" => $shortname."_slideshow_title2",  
        "type" => "text"),
    array( "name" => "Link #2",
        "desc" => "Geben Sie einen Link f&uuml;r das Slideshow-Bild an.",
        "id" => $shortname."_slideshow_link2",  
        "type" => "text"),
    array( "name" => "Text #2",
        "desc" => "Geben Sie einen Beschreibungstext f&uuml;r das zweite Bild der Slideshow an.",
        "id" => $shortname."_slideshow_text2",  
        "type" => "textarea"),

    array( "name" => "Bild #3",
        "desc" => "Geben Sie die URL zum dritten Bild der Slideshow an.",
        "id" => $shortname."_slideshow_img3",  
        "type" => "text"),
    array( "name" => "Titel #3",
        "desc" => "Geben Sie einen Titel f&uuml;r das dritte Bild der Slideshow an.",
        "id" => $shortname."_slideshow_title3",  
        "type" => "text"),
    array( "name" => "Link #3",
        "desc" => "Geben Sie einen Link f&uuml;r das Slideshow-Bild an.",
        "id" => $shortname."_slideshow_link3",  
        "type" => "text"),
    array( "name" => "Text #3",
        "desc" => "Geben Sie einen Beschreibungstext f&uuml;r das dritte Bild der Slideshow an.",
        "id" => $shortname."_slideshow_text3",  
        "type" => "textarea"),

    array( "name" => "Bild #4",
        "desc" => "Geben Sie die URL zum vierten Bild der Slideshow an.",
        "id" => $shortname."_slideshow_img4",  
        "type" => "text"),
    array( "name" => "Titel #4",
        "desc" => "Geben Sie einen Titel f&uuml;r das vierte Bild der Slideshow an.",
        "id" => $shortname."_slideshow_title4",  
        "type" => "text"),
    array( "name" => "Link #4",
        "desc" => "Geben Sie einen Link f&uuml;r das Slideshow-Bild an.",
        "id" => $shortname."_slideshow_link4",  
        "type" => "text"),
    array( "name" => "Text #4",
        "desc" => "Geben Sie einen Beschreibungstext f&uuml;r das vierte Bild der Slideshow an.",
        "id" => $shortname."_slideshow_text4",  
        "type" => "textarea"),

    array( "name" => "Bild #5",
        "desc" => "Geben Sie die URL zum f&uuml;nften Bild der Slideshow an.",
        "id" => $shortname."_slideshow_img5",  
        "type" => "text"),
    array( "name" => "Titel #5",
        "desc" => "Geben Sie einen Titel f&uuml;r das f&uuml;nfte Bild der Slideshow an.",
        "id" => $shortname."_slideshow_title5",  
        "type" => "text"),
    array( "name" => "Link #5",
        "desc" => "Geben Sie einen Link f&uuml;r das Slideshow-Bild an.",
        "id" => $shortname."_slideshow_link5",  
        "type" => "text"),
    array( "name" => "Text #5",
        "desc" => "Geben Sie einen Beschreibungstext f&uuml;r das f&uuml;nfte Bild der Slideshow an.",
        "id" => $shortname."_slideshow_text5",  
        "type" => "textarea"),

    array( "name" => "Bild #6",
        "desc" => "Geben Sie die URL zum sechsten Bild der Slideshow an.",
        "id" => $shortname."_slideshow_img6",  
        "type" => "text"),
    array( "name" => "Titel #6",
        "desc" => "Geben Sie einen Titel f&uuml;r das sechste Bild der Slideshow an.",
        "id" => $shortname."_slideshow_title6",  
        "type" => "text"),
    array( "name" => "Link #6",
        "desc" => "Geben Sie einen Link f&uuml;r das Slideshow-Bild an.",
        "id" => $shortname."_slideshow_link6",  
        "type" => "text"),
    array( "name" => "Text #6",
        "desc" => "Geben Sie einen Beschreibungstext f&uuml;r das sechtse Bild der Slideshow an.",
        "id" => $shortname."_slideshow_text6",  
        "type" => "textarea"),

    array( "name" => "Bild #7",
        "desc" => "Geben Sie die URL zum siebten Bild der Slideshow an.",
        "id" => $shortname."_slideshow_img7",  
        "type" => "text"),
    array( "name" => "Titel #7",
        "desc" => "Geben Sie einen Titel f&uuml;r das siebte Bild der Slideshow an.",
        "id" => $shortname."_slideshow_title7",  
        "type" => "text"),
    array( "name" => "Link #7",
        "desc" => "Geben Sie einen Link f&uuml;r das Slideshow-Bild an.",
        "id" => $shortname."_slideshow_link7",  
        "type" => "text"),
    array( "name" => "Text #7",
        "desc" => "Geben Sie einen Beschreibungstext f&uuml;r das siebte Bild der Slideshow an.",
        "id" => $shortname."_slideshow_text7",  
        "type" => "textarea"),

    array( "name" => "Bild #8",
        "desc" => "Geben Sie die URL zum achten Bild der Slideshow an.",
        "id" => $shortname."_slideshow_img8",  
        "type" => "text"),
    array( "name" => "Titel #8",
        "desc" => "Geben Sie einen Titel f&uuml;r das achte Bild der Slideshow an.",
        "id" => $shortname."_slideshow_title8",  
        "type" => "text"),
    array( "name" => "Link #8",
        "desc" => "Geben Sie einen Link f&uuml;r das Slideshow-Bild an.",
        "id" => $shortname."_slideshow_link8",  
        "type" => "text"),
    array( "name" => "Text #8",
        "desc" => "Geben Sie einen Beschreibungstext f&uuml;r das achte Bild der Slideshow an.",
        "id" => $shortname."_slideshow_text8",  
        "type" => "textarea"),

    array( "name" => "Bild #9",
        "desc" => "Geben Sie die URL zum neunten Bild der Slideshow an.",
        "id" => $shortname."_slideshow_img9",  
        "type" => "text"),
    array( "name" => "Titel #9",
        "desc" => "Geben Sie einen Titel f&uuml;r das neunte Bild der Slideshow an.",
        "id" => $shortname."_slideshow_title9",  
        "type" => "text"),
    array( "name" => "Link #9",
        "desc" => "Geben Sie einen Link f&uuml;r das Slideshow-Bild an.",
        "id" => $shortname."_slideshow_link9",  
        "type" => "text"),
    array( "name" => "Text #9",
        "desc" => "Geben Sie einen Beschreibungstext f&uuml;r das neunte Bild der Slideshow an.",
        "id" => $shortname."_slideshow_text9",  
        "type" => "textarea"),

    array( "name" => "Bild #10",
        "desc" => "Geben Sie die URL zum zehnten Bild der Slideshow an.",
        "id" => $shortname."_slideshow_img10",  
        "type" => "text"),
    array( "name" => "Titel #10",
        "desc" => "Geben Sie einen Titel f&uuml;r das zehnte Bild der Slideshow an.",
        "id" => $shortname."_slideshow_title10",  
        "type" => "text"),
    array( "name" => "Link #10",
        "desc" => "Geben Sie einen Link f&uuml;r das Slideshow-Bild an.",
        "id" => $shortname."_slideshow_link10",  
        "type" => "text"),
    array( "name" => "Text #10",
        "desc" => "Geben Sie einen Beschreibungstext f&uuml;r das zehnte Bild der Slideshow an.",
        "id" => $shortname."_slideshow_text10",  
        "type" => "textarea"),

//Widgets

    array( "type" => "close"),
    array( "name" => "Widgets",
        "type" => "section"), 
    array( "type" => "open"),

    array( "name" => "Ank&uuml;ndigungen",  
        "desc" => "Der hier eingegebene Text wird auf jeder Seite gelb hinterlegt angezeigt. Hier sollten wichtige Informationen und Ank&uuml;ndigungen eingetragen werden.",  
        "id" => $shortname."_announcements",
        "type" => "textarea"),

    array( "name" => "Footer Copyright Text",  
        "desc" => "Geben Sie hier einen benutzerdefinierten Footer-Text ein.",
        "id" => $shortname."_footer_text",  
        "type" => "text"),

    array( "name" => "Schlagwortwolke",
	"desc" => "Wo soll die Schlagwortwolke standardm&auml;&szlig;ig angezeigt werden?",
        "id" => $shortname."_tagcloud",
	"type" => "select",
	"options" => array("Sidebar", "Footer", "gar nicht"),
	"std" => "Sidebar"),

    array( "name" => "Statistiken", 
        "desc" => "Zum Anzeigen der Statistiken wird das WordPress Plugin 'Count Per Day' ben&ouml;tigt.",
        "id" => $shortname."_show_statistics",  
        "type" => "checkbox"),

    array( "name" => "Neue Artikel", 
        "desc" => "Sollen die neuesten Artikel in der Sidebar angezeigt werden?",
        "id" => $shortname."_show_recentposts",  
        "type" => "checkbox"),

//404 Fehlerseite

    array( "type" => "close"),
    array( "name" => "404 Fehlerseite",
        "type" => "section"), 
    array( "type" => "open"),

    array( "name" => "Eigener 404 Text",  
        "desc" => "Die 404-Fehlerseite wird aufgerufen, wenn ein Dokument auf der Seite nicht gefunden werden kann. Geben Sie hier einen benutzerdefinierten Text f&uuml;r diese Seite an.",  
        "id" => $shortname."_404_text",
        "type" => "textarea"),

    array( "name" => "Eigenes 404 Bild",  
        "desc" => "Geben Sie die URL zu einer Bilddatei f&uuml;r die Fehlerseite ein. Die Maximalbreite betr&auml;gt 650 Pixel.",
        "id" => $shortname."_404_image", 
        "type" => "text"),

    array( "type" => "close")
      
);  

function mytheme_add_admin() { 
      
global $themename, $shortname, $options;  
      
if ( $_GET['page'] == basename(__FILE__) ) {  
      
	if ( 'save' == $_REQUEST['action'] ) {  
      
		foreach ($options as $value) {  
		update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }  
      
		foreach ($options as $value) {  
        	if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }  
      
			header("Location: admin.php?page=functions.php&saved=true");  
			die;  
      
		}  
    		else if( 'reset' == $_REQUEST['action'] ) {  
      
       		foreach ($options as $value) {  
            	delete_option( $value['id'] ); }  
      
       		header("Location: admin.php?page=functions.php&reset=true");  
    		die;  
      
    		}  
    	}  
      
	add_menu_page($themename, $themename, 'administrator', basename(__FILE__), 'mytheme_admin');  
	}  
      
	function mytheme_add_init() {  
		$file_dir=get_bloginfo('template_directory');  
		wp_enqueue_style("functions", $file_dir."/admin/admin.css", false, "1.0", "all");  
		wp_enqueue_script("rm_script", $file_dir."/admin/js/rm_script.js", false, "1.0");  
	}  

	function mytheme_admin() {  
      
	global $themename, $shortname, $options;  
	$i=0;  
      
	if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved.</strong></p></div>';  
	if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>';  
      
	?>  
	<div class="wrap rm_wrap">  
	<h2><?php echo $themename; ?> Optionen</h2>  
      
	<div class="rm_opts">  
	<form method="post"> 

	<?php foreach ($options as $value) {  
	switch ( $value['type'] ) {  
      
	case "open":  
	?>      
	<?php break;  
      
	case "close":  
	?>  
      
	</div>  
	</div>  
	<br />  
      
	<?php break;  
      
	case "title":  
	?>  
	<p>F&uuml;r eine einfache Konfiguration des <?php echo $themename;?> Themes, k&ouml;nnen unten stehende Optionen verwendet werden.</p>  
      
	<?php break;
      
	case 'text':  
	?>  
      
	<div class="rm_input rm_text">  
		<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>  
        	<input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_option( $value['id'] ) != "") { echo stripslashes(get_option( $value['id'])  ); } else { echo $value['std']; } ?>" />  
	<small><?php echo $value['desc']; ?></small><div class="clearfix"></div>  
      
	</div>  
	<?php  
	break;   
      
	case 'textarea':  
	?>  
      
	<div class="rm_input rm_textarea">  
        	<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>  
        	<textarea name="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_option( $value['id'] ) != "") { echo stripslashes(get_option( $value['id']) ); } else { echo $value['std']; } ?></textarea>  
     		<small><?php echo $value['desc']; ?></small><div class="clearfix"></div>  
        </div>  
      
	<?php  
	break;  
      
	case 'select':  
	?>  
      
	<div class="rm_input rm_select">  
        	<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>  
      
	<select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>">  
	<?php foreach ($value['options'] as $option) { ?>  
            	<option <?php if (get_option( $value['id'] ) == $option) { echo 'selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?>  
	</select>  
      
	<small><?php echo $value['desc']; ?></small><div class="clearfix"></div>  
	</div>  
	<?php  
	break;  
      
	case "checkbox":  
	?>  
      
	<div class="rm_input rm_checkbox">  
        	<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>  
      
	<?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>  
	<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />  
      
	<small><?php echo $value['desc']; ?></small><div class="clearfix"></div>  
	</div>  
	<?php break;  


	case "section":  
      
	$i++;  
      
	?>  
      
	<div class="rm_section">
	<div class="rm_title"><h3><img src="<?php bloginfo('template_directory')?>/functions/images/trans.gif" class="inactive" alt="""><?php echo $value['name']; ?></h3><span class="submit"><input name="save<?php echo $i; ?>" type="submit" value="Save changes" />  
	</span><div class="clearfix"></div></div>  
	<div class="rm_options">  
      
	<?php break;  
      
    	}
}  
?> 
 
<input type="hidden" name="action" value="save" />  
</form>  
<form method="post">  
	<p class="submit">  
		<input name="reset" type="submit" value="Reset" />  
		<input type="hidden" name="action" value="reset" />  
	</p>  
</form>  
<div style="font-size:9px; margin-bottom:10px;">Copyright &copy; Lukas Bommes</div>  
</div>   
      
<?php  
}    

 
add_action('admin_init', 'mytheme_add_init');  
add_action('admin_menu', 'mytheme_add_admin');  
?>

Hier kann die neueste Version des LB-Projects Themes heruntergeladen werden.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Kommentare umschalten

1 Kommentar zu "Admin-Panel für das LB-Projects Theme"

  • [...] einiger Zeit habe ich einen Artikel über das neue Admin-Panel des LB-Projects Theme geschrieben. Die Bedienung war jedoch teilweise [...]