Wie man ein besseres WordPress-Optionsfeld erstellen kann

() translation by (you can also view the original English article)

Heute werden wir den gesamten Prozess der Erstellung eines Admin-Optionsfelds für ein WordPress-Theme am Beispiel des hervorragenden WooFrameworks durchlaufen. Dann gehen wir noch einen Schritt weiter und implementieren jQuery, um einige Funktionen zu verbessern.

Tutorial Details

Programm: WordPress
Version: 2.7, 2.8, 2.9 ab
Schwierigkeit: Mittelstufe
Geschätzte Fertigstellungszeit: 1,5 Stunden

WordPress ist eines der beliebtesten CMS-Systeme (Content Management Software). Ob für ein Kundenprojekt oder für den Verkauf von Themen auf ThemeForest - WordPress entwickelt sich für viele Webentwickler schnell zu einem CMS der Wahl. Es ist relativ einfach zu bedienen, kann aber noch einfacher gestaltet werden, wenn Sie ein Administrationsfenster für Benutzer hinzufügen. Anstatt die PHP-Vorlagendateien öffnen und mit dem Code herumspielen zu müssen, können Benutzer das Optionsfeld direkt verwenden, um mit Ihrem WordPress-Thema zu interagieren.

Beispiel: Wenn Ihr Thema rote, blaue und grüne Farbschemata hat und jedes eine entsprechende CSS-Datei hat, ist es für einen Benutzer viel einfacher, seine bevorzugte Farbe aus einer Dropdown-Liste auszuwählen. Lassen Sie sich heute durch den gesamten Prozess der Erstellung und Verbesserung einer von Woo inspirierten WordPress-Admin-Panel-Seite führen.

Schritt 1

Bevor wir mit der Erstellung des Admin-Panels beginnen, müssen wir ein Thema haben, oder? Laden Sie also die im Tutorial enthaltenen Quelldateien herunter. Ich habe das klassische WordPress-Theme leicht modifiziert. Platzieren Sie den Ordner "nettuts" (ich habe das Thema "Nettuts" genannt) in Ihrem Ordner "wp-content/theme". Sie sollten die folgenden Dateien sehen:

functions.php (leer)
index.php
comments.php
footer.php
header.php
rtl.php
sidebar.php
style.css
screenshot.png
Ein Bilderordner mit zwei Dateien

Der größte Teil unserer Arbeit wird in der Datei functions.php erledigt.

Ein Thema kann optional eine Funktionsdatei verwenden, die sich im Unterverzeichnis des Themas befindet und den Namen functions.php trägt. Diese Datei verhält sich im Grunde genommen wie ein Plugin. Wenn sie in dem von Ihnen verwendeten Thema vorhanden ist, wird sie während der WordPress-Initialisierung automatisch geladen (sowohl für Administrationsseiten als auch für externe Seiten).

Vorgeschlagene Verwendung für diese Datei:

Definieren Sie Funktionen, die in mehreren Vorlagendateien Ihres Themas verwendet werden
Richten Sie einen Administrationsbildschirm ein, auf dem Benutzer Optionen für Farben, Stile und andere Aspekte Ihres Themas finden

(Aus dem WP Codex)

Schritt 2

Nachdem wir unser WordPress-Theme eingerichtet haben, gehen Sie zu Aussehen > Themes und aktivieren Sie das Nettuts-Theme.

Hat aktiviert? Ok, großartig. Jetzt müssen wir uns ein Layout für unsere Admin-Panel-Seite überlegen. Hier ist die Struktur, für die ich mich entschieden habe:


<div class="wrap rm_wrap">
	<div class="rm_opts">
		<form method="post">
			<div class="rm_section">
				<div class="rm_title> 
					<h3>Title</h3>
					<submit button>
				</div>
				<div class="rm_input rm_<select/textarea/text etc>">
					<input area>
					<description>
				</div>
			</div>
			
			/*Repeat the inputs for as many options as required. */
			/* use <div class="rm_section"> for each new section of inputs eg General, Home Page etc */
		</form>
	</div>			
</div>

Lassen Sie mich Ihnen das alles erklären. Der Optionssatz wird in ein Div mit dem Namen "rm_wrap" und dann "rm_opts" für die Optionen eingeschlossen. Dann starten wir ein Formular mit allen darin enthaltenen Eingaben. Jeder Abschnitt mit Optionen (allgemeine Einstellungen, Homepage-Einstellungen, Blog-Einstellungen usw.) verfügt über ein separates Div mit der Klasse "rm_section". Dieses Div enthält einen Titel (für den Namen) sowie mehrere Eingabedivs. Durch die Verwendung von Klassen wie <div class="rm_input rm_select"> können Dropdown-Listen, Texteingaben und Textbereiche unterschiedlich gestaltet werden.

Das Wichtigste ist nun, dass die Codierung nicht manuell erfolgen sollte - wir sollten die Flexibilität von PHP so weit wie möglich nutzen. Das bedeutet Effizienz: Codieren Sie nicht manuell, wenn Sie Schleifen für Sie haben!

Schritt 3

Öffnen Sie zuerst functions.php in Ihrem bevorzugten Code-Editor (ich verwende Notepad++). Geben Sie den folgenden Code ein:


<?php

$themename = "Nettuts";
$shortname = "nt";

Die beiden PHP-Variablen enthalten den Namen Ihres Themas (in unserem Fall Nettuts) und einen von Ihnen definierten Kurznamen (in unserem Fall nt). Der Kurzname wird verwendet, um allen Namen unserer Themenoptionen ein Präfix voranzustellen, und ist normalerweise für ein bestimmtes Thema eindeutig. Im weiteren Verlauf schreiben wir Code, um automatisch eine Liste der WordPress-Kategorien zu erstellen, anstatt dass Benutzer ID-Nummern eingeben. Geben Sie den folgenden Code unter dem bereits eingegebenen Code ein:


$categories = get_categories('hide_empty=0&orderby=name');
$wp_cats = array();
foreach ($categories as $category_list ) {
       $wp_cats[$category_list->cat_ID] = $category_list->cat_name;
}
array_unshift($wp_cats, "Choose a category");

Dieses Snippet verwendet die in WordPress integrierte Funktion get_categories, um alle Kategorien abzurufen, und verwendet dann eine foreach-Schleife, um sie in der Variablen $wp_cats zu speichern. Die Optionen "Kategorie auswählen" werden dann oben im Array hinzugefügt

Schritt 4

Jetzt geben wir eine Liste mit Optionen für das Thema ein. Siehe unten und fügen Sie es in Ihre Datei functions.php ein:



$options = array (
 
array( "name" => $themename." Options",
	"type" => "title"),
 

array( "name" => "General",
	"type" => "section"),
array( "type" => "open"),
 
array( "name" => "Colour Scheme",
	"desc" => "Select the colour scheme for the theme",
	"id" => $shortname."_color_scheme",
	"type" => "select",
	"options" => array("blue", "red", "green"),
	"std" => "blue"),
	
array( "name" => "Logo URL",
	"desc" => "Enter the link to your logo image",
	"id" => $shortname."_logo",
	"type" => "text",
	"std" => ""),
	
	
array( "name" => "Custom CSS",
	"desc" => "Want to add any custom CSS code? Put in here, and the rest is taken care of. This overrides any other stylesheets. eg: a.button{color:green}",
	"id" => $shortname."_custom_css",
	"type" => "textarea",
	"std" => ""),		
	
array( "type" => "close"),
array( "name" => "Homepage",
	"type" => "section"),
array( "type" => "open"),

array( "name" => "Homepage header image",
	"desc" => "Enter the link to an image used for the homepage header.",
	"id" => $shortname."_header_img",
	"type" => "text",
	"std" => ""),
	
array( "name" => "Homepage featured category",
	"desc" => "Choose a category from which featured posts are drawn",
	"id" => $shortname."_feat_cat",
	"type" => "select",
	"options" => $wp_cats,
	"std" => "Choose a category"),
	

array( "type" => "close"),
array( "name" => "Footer",
	"type" => "section"),
array( "type" => "open"),
	
array( "name" => "Footer copyright text",
	"desc" => "Enter text used in the right side of the footer. It can be HTML",
	"id" => $shortname."_footer_text",
	"type" => "text",
	"std" => ""),
	
array( "name" => "Google Analytics Code",
	"desc" => "You can paste your Google Analytics or other tracking code in this box. This will be automatically added to the footer.",
	"id" => $shortname."_ga_code",
	"type" => "textarea",
	"std" => ""),	
	
array( "name" => "Custom Favicon",
	"desc" => "A favicon is a 16x16 pixel icon that represents your site; paste the URL to a .ico image that you want to use as the image",
	"id" => $shortname."_favicon",
	"type" => "text",
	"std" => get_bloginfo('url') ."/favicon.ico"),	
	
array( "name" => "Feedburner URL",
	"desc" => "Feedburner is a Google service that takes care of your RSS feed. Paste your Feedburner URL here to let readers see it in your website",
	"id" => $shortname."_feedburner",
	"type" => "text",
	"std" => get_bloginfo('rss2_url')),

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

Das war ein großer Teil des Codes, der sicherlich eine Erklärung verdient. Auf geht's:

Die PHP-Variable $options speichert die gesamte Liste der Optionen für das Thema.
Es besteht aus einer Reihe von Arrays, die jeweils mit einem "Typ"-Schlüssel versehen sind, um anzugeben, wie es angezeigt wird und was es tut.
Wir beginnen mit einem "type" => "title"-Array - dieses wird verwendet, um den Themennamen und einen Titel oben auf der Seite anzuzeigen
Jeder Abschnitt (Allgemein, Homepage und Fußzeile) verfügt über eine separate Liste von Optionen.
We start a new section by closing any previous sections, declaring a new section using array( "name" => "Footer "type" => "section") und öffne einen neuen Abschnitt.
Für jede Option können die folgenden Optionen angegeben werden:
name: Der Name des Eingabefeldes.
desc: Eine kurze Beschreibung, die dem Benutzer erklärt, was es ist.
id: Die ID des Feldes, dem der Kurzname vorangestellt ist. Es wird verwendet, um die Optionen zu speichern und darauf zuzugreifen.
type: Der Eingabetyp - Auswahl, Text oder Textbereich
options: Wird verwendet, um ein Array von Optionen für eine Eingabe vom Typ Select zu deklarieren.
std: Der Standardeingabewert, der verwendet wird, wenn keine andere Eingabe erfolgt.

Schritt 5

Versuchen Sie, zu WordPress zu navigieren. Sie werden sehen, dass es nirgendwo eine Option gibt, um die Admin-Panel-Seite tatsächlich anzuzeigen. Wie können wir es sehen? Fügen Sie der Datei functions.php die folgenden Codeteile hinzu:


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() {

}

Diese Funktion dient zum Aktualisieren von Optionen sowie zum Hinzufügen einer Menüseite. Wenn die Optionen gespeichert werden (angezeigt durch das Speichern einer versteckten Variablen), werden alle Optionen mit ihren neuen Werten aktualisiert. Wenn die Optionen zurückgesetzt werden (angezeigt durch eine andere versteckte Variable mit einem Wert-Reset), werden alle Optionen gelöscht. In der letzten Zeile wird eine Menüseite hinzugefügt. Die Parameter sind Name und Titel, die zum Anzeigen der Seite erforderliche Benutzerberechtigungsstufe, die Speicherseite und die zum Anzeigen/Speichern verwendete Funktion (in unserem Fall mytheme_admin genannt). Sehen Sie die mytheme_add_init, eine blanbk-Funktion? Lassen Sie das sein, wir werden später darauf zurückkommen.

Schritt 6

Immer noch keine Seite mit Themenoptionen, oder? Erinnern Sie sich an die Funktion mytheme_admim, über die wir vor einigen Zeilen gesprochen hatten? Wir haben diese Funktion noch nicht geschrieben. Verwenden Sie also den Code aus den Schritten 6, 7 und 8, um diese Funktion zu schreiben. Start:


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; ?> Settings</h2>
 
<div class="rm_opts">
<form method="post">

Ziemlich einfach, oder? Wenn die Optionen gespeichert wurden, schreiben Sie eine entsprechende Nachricht. Ebenso für Resets. Sie werden eine class="updated fade" bemerken - WordPress wird dies in einigen Abschnitten automatisch ausblenden. Schlau, richtig? Weiter geht es mit dem Div "rm_wrap".

Schritt 7

Von oben fortfahren, folgenden Code einfügen:


<?php foreach ($options as $value) {
switch ( $value['type'] ) {
 
case "open":
?>
 
<?php break;
 
case "close":
?>
 
</div>
</div>
<br />

 
<?php break;
 
case "title":
?>
<p>To easily use the <?php echo $themename;?> theme, you can use the menu below.</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_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $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_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $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_settings( $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;

Das ist ein großer Code! Erläuterung - Unter Verwendung einer PHP-Foreach-Schleife wird jeder Optionstyp von Fall zu Fall bewertet. Wir verwenden hierfür eine Switch-Case-Technik. Die Schaltvariable sind die Optionen - die Fälle werden abgeglichen und ausgewertet. Beachten Sie die 'break'-Anweisung nach jedem Fall? Dies soll verhindern, dass etwas als "Fall-Through" -Eigenschaft bekannt ist. Wenn ein Fall abgeglichen wird, werden auch alle aufeinander folgenden Fälle ausgeführt. Dies bedeutet, dass, wenn wir mit Fall 3 übereinstimmen, auch Fälle 4,5 usw. ausgeführt werden. Das wollen wir doch nicht, oder? Verwenden Sie also eine Pause, um das Schaltgehäuse anzuhalten.

Wenn es eine Option vom Typ "offen" gibt, wird nichts unternommen. Wenn es Optionen vom Typ "Schließen" gibt, werden zwei Divs geschlossen. Die Option "Titel" wird nur einmal verwendet - es handelt sich um eine Einführung in die Themenoptionen. Für jeden der Typen "text" (input type="text"), "select" (dropdowns), "checkbox" und "textarea" (es ist offensichtlich, was diese bedeuten) wird die entsprechende Eingabe angezeigt. Beachten Sie das <div class="clearfix"> - es wird zum Löschen von Floats verwendet, was wir später tun werden.

Schritt 8

Wir kommen zum Ende dieser ziemlich massiven Funktion. Fügen Sie den folgenden Code ein:



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;">Icons: <a href="http://www.woothemes.com/2009/09/woofunction/">WooFunction</a></div>
 </div> 
 

<?php
}

?>

Für eine Option vom Typ "Abschnitt" habe ich eine Zählervariable $i verwendet. Dadurch wird die Abschnittsnummer verfolgt und mit dem Namen der Senden-Schaltfläche verknüpft, um eindeutige Senden-Schaltflächen zu erhalten. Am Ende befindet sich auch ein letztes Formular zum Zurücksetzen aller Optionen. Das verwendete Bild wird ein transparentes Bild sein, das in unserer jQuery-Fication verwendet wird. Verwenden Sie diesen allerletzten Code, um unsere Funktionen ins Spiel zu bringen:


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

Das weist WordPress an, das Admin-Menü hinzuzufügen.

Schritt 9

Und voila! Wir haben unsere eigene fantastische Admin-Panel-Seite mit einer separaten Menüposition für sich. Probieren wir es aus - klicken Sie auf den Link. Und igitt. Das muss die hässlichste Admin-Panel-Seite aller Zeiten sein. Rufen wir also unseren guten Freund CSS an! Erstellen Sie einen neuen Ordner im Verzeichnis nettuts/und nennen Sie ihn "functions". Erstellen Sie dort eine neue CSS-Datei - functions.css. Fügen Sie den folgenden Code ein:


.rm_wrap{
	width:740px;
}
.rm_section{
	border:1px solid #ddd;
	border-bottom:0;
	background:#f9f9f9;
}
.rm_opts label{
	font-size:12px;
	font-weight:700;
	width:200px;
	display:block;
	float:left;	
}
.rm_input {
	padding:30px 10px;
	border-bottom:1px solid #ddd;
	border-top:1px solid #fff;
}
.rm_opts small{
	display:block;
	float:right;
	width:200px;
	color:#999;
}
.rm_opts input[type="text"], .rm_opts select{
	width:280px;
	font-size:12px;
	padding:4px;
	color:#333;
	line-height:1em;
	background:#f3f3f3;
}
.rm_input input:focus, .rm_input textarea:focus{
		background:#fff;
}
.rm_input textarea{
	width:280px;
	height:175px;
	font-size:12px;
	padding:4px;
	color:#333;
	line-height:1.5em;
	background:#f3f3f3;
}
.rm_title h3 {
	cursor:pointer;
	font-size:1em;
	text-transform: uppercase;
	margin:0;
	font-weight:bold;
	color:#232323;
	float:left;
	width:80%;
	padding:14px 4px;
}
.rm_title{
	cursor:pointer;
	border-bottom:1px solid #ddd;
	background:#eee;
	padding:0;
}
.rm_title h3 img.inactive{
	margin:-8px 10px 0 2px;
	width:32px;
	height:32px;	
	background:url('images/pointer.png') no-repeat 0 0;
	float:left;
	-moz-border-radius:6px;
	border:1px solid #ccc;
}
.rm_title h3 img.active{
	margin:-8px 10px 0 2px;
	width:32px;
	height:32px;	
	background:url('images/pointer.png') no-repeat  0 -32px;
	float:left;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border:1px solid #ccc;
}		
.rm_title h3:hover img{
	border:1px solid #999;
}
.rm_title span.submit{
	display:block;
	float:right;
	margin:0;
	padding:0;
	width:15%;
	padding:14px 0;
}
.clearfix{
	clear:both;
}
.rm_table th, .rm_table td{
	border:1px solid #bbb;
	padding:10px;
	text-align:center;
}
.rm_table th, .rm_table td.feature{
	border-color:#888;
	}

Ich werde hier nichts erklären; Es ist ziemlich klar, was jede CSS-Deklaration bewirkt, und Sie können das Layout an Ihr eigenes Thema anpassen.

Schritt 10

Jetzt haben wir also eine schöne CSS-Datei. Aber wie fügen wir es der Seite hinzu? Schließlich haben wir keinen direkten Zugriff auf den <head> des Dokuments. Erinnern Sie sich an die leere Funktion mytheme_add_init(), die wir in Schritt 4 geschrieben haben? Das wird nützlich sein. Ändern Sie es in dieses:


function mytheme_add_init() {
$file_dir=get_bloginfo('template_directory');
wp_enqueue_style("functions", $file_dir."/functions/functions.css", false, "1.0", "all");
}

Dadurch wird die Datei functions.css zum Kopf hinzugefügt. Der Speicherort der Datei wird durch das Vorlagenverzeichnis bestimmt.

Schritt 11

Schauen Sie sich jetzt die Seite an. Ziemlich gut aussehend, nicht wahr? Aber dann, fragen Sie, wofür ist das '+' Symbol? Hier kommt jQuery ins Spiel!. Erstellen Sie eine neue Datei rm_script.js im Ordner nettuts/functions/. Fügen Sie den folgenden Code ein:


jQuery(document).ready(function(){
		jQuery('.rm_options').slideUp();
		
		jQuery('.rm_section h3').click(function(){		
			if(jQuery(this).parent().next('.rm_options').css('display')==='none')
				{	jQuery(this).removeClass('inactive').addClass('active').children('img').removeClass('inactive').addClass('active');
					
				}
			else
				{	jQuery(this).removeClass('active').addClass('inactive').children('img').removeClass('active').addClass('inactive');
				}
				
			jQuery(this).parent().next('.rm_options').slideToggle('slow');	
		});
});

Dies bedeutet: Sobald das DOM geladen ist, werden alle rm_options nach oben verschoben. Wenn Sie auf das Symbol '+' klicken, wird die inaktive Klasse aus dem Bild entfernt und die aktive Klasse hinzugefügt, wodurch sie zu einem '-' Symbol wird. Der umgekehrte Vorgang erfolgt, wenn auf das Symbol '-' geklickt wird. Die rm_options werden dann mithilfe der Funktion slideToggle nach oben oder unten verschoben (bestimmt durch den aktuellen CSS-Status) - ziemlich einfach. Um dieses Skript hinzuzufügen, wird dieselbe Funktion mytheme_add_init() verwendet. Ändern Sie es in:


function mytheme_add_init() {
$file_dir=get_bloginfo('template_directory');
wp_enqueue_style("functions", $file_dir."/functions/functions.css", false, "1.0", "all");
wp_enqueue_script("rm_script", $file_dir."/functions/rm_script.js", false, "1.0");
}

Das jQuery-Skript ist jetzt aktiv. Gp check es aus. Persönlich finde ich es schön!

Schritt 12

Nachdem wir unsere Seite mit den Themenoptionen eingerichtet hatten, arbeitete ich Sie nur mit den Optionen durch. Der Code zur Verwendung der Optionen ist so:

1
2	$var = get_option('nt_colur_scheme');

Dadurch werden die Optionen nt_color_scheme abgerufen. Siehe die folgenden Beispiele:


/* To change the CSS stylesheet depending on the chosen color */
<link rel="stylesheet" type="text/css"  href="<?php bloginfo('template_directory'); ?>/<?php echo get_option('nt_color_scheme'); ?>.css" /> 

/*To echo some footer copyright text, with HTML */
<p><?php echo stripslashes(get_option('bl_footer_text')); ?></p>

Die Verwendungsvielfalt ist nur durch Ihre Vorstellungskraft begrenzt.

Abschluss

Ich hoffe, Sie haben in diesem Tutorial etwas gelernt. Dies ist nicht Ihr Standard-Optionsfeld. Dieser verwendet keine Tabellen, ist jQuery-erweitert, verwendet fantastisches CSS und ist extrem einfach zu bedienen. In diesem Lernprogramm geht es darum zu lernen, dass Sie zusammenklappbare Bedienfelder jederzeit durch Registerkarten oder sogar etwas Fortgeschritteneres ersetzen können. Nutzen Sie Ihre Kreativität! Fühlen Sie sich frei, in den Kommentaren zu diskutieren oder Fragen zu stellen!

WooThemes hat seitdem Version zwei seines Frameworks veröffentlicht. Sie können die Details hier überprüfen.

Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts+ RSS-Feed, um die besten Webentwicklungs-Tutorials im Web zu erhalten.