<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:media="http://search.yahoo.com/mrss/" >

<channel>
	<title>Philip Hetjens &#187; Tutorial</title>
	<atom:link href="http://www.hetjens.com/tag/tutorial/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.hetjens.com</link>
	<description>Webworker. Blogwerker. Wahlzürcher.</description>
	<lastBuildDate>Mon, 14 May 2012 17:35:32 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Settings API: WordPress Standardoptionsseiten erweitern</title>
		<link>http://www.hetjens.com/2009/08/05/settings-api-wordpress-standardoptionsseiten-erweitern/</link>
		<comments>http://www.hetjens.com/2009/08/05/settings-api-wordpress-standardoptionsseiten-erweitern/#comments</comments>
		<pubDate>Wed, 05 Aug 2009 10:46:41 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Technologie]]></category>
		<category><![CDATA[API]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[Settings API]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://hetjens.com/?p=42</guid>
		<description><![CDATA[Mit der Settings-API von Wordpress ist es einfach die Optionen des eigenen Plugins in die Wordpress-Optionen einzubinden. <a href="http://www.hetjens.com/2009/08/05/settings-api-wordpress-standardoptionsseiten-erweitern/">Weiterlesen</a>]]></description>
			<content:encoded><![CDATA[<p>Die Settings-API ist ein einfacher Weg die Optionen eines Plugins in die Standardoptionsseiten von WordPress zu integrieren. Für Plugins mit vielen Optionen eignet sich die API nicht, da dann die Seiten überladen wären, aber für kleine Plugins mit wenigen Optionen ist sie ideal. <a href="http://codex.wordpress.org/Settings_API">Der Codex erklärt die Settings-API</a> schon ganz gut, aber ich hatte trotzdem ein paar Probleme und darum hier dieses Tutorial. <span id="more-45"></span></p>
<p>Alle Aufrufe der Settings-API sollten im Hook &#8216;admin_init&#8217; gemacht werden. Die zwei wichtigsten Aufrufe der API sind die beiden Funktionen <span style="font-family: courier new, courier">add_settings_field</span> zum Anzeigen einer Option und <span style="font-family: courier new, courier">register_setting</span> zum Speichern. Hier zunächst ein Beispiel. Hier wird ein Textfeld auf der &#8220;Schreiben&#8221;-Optionsseite hinzugefügt:</p>
<pre class="brush: php; title: ; notranslate">
add_action('admin_init', 'test_admin_init');
function test_admin_init() {
  add_settings_field(
    'test_option',
    '&lt;label for=&quot;test_option&quot;&gt;Test&lt;/label&gt;',
    'test_option',
    'writing',
    'default',
    array()
  );
  register_setting('writing','test_option');
}

function test_option() {
  $value = get_option('test_option');
  echo '&lt;input type=&quot;text&quot; class=&quot;regular-text&quot;
    id=&quot;test_option&quot; name=&quot;test_option&quot; value=&quot;'.$value.'&quot; /&gt;';
}
</pre>
<p>Fangen wir mit der einfachen Funktion an: <span style="font-family: courier new, courier">register_setting</span></p>
<p><span style="font-family: courier new, courier">register_setting</span> sorgt dafür, dass eine Option gespeichert wird sobald auf der entsprechenden Seite der Speichern-Button gedrückt wurde. Sie hat zwei Parameter. Der erste Parameter gibt an auf welcher Seite die Option hinzugefügt wurde und beim Speichern mitgespeichert werden soll. Der zweite Parameter ist der Name der Option. Genau unter diesem Namen wird die Option auch in der Datenbank abgelegt. In dem Fall oben ist es die Option <span style="font-family: courier new, courier">test_option</span> auf der Seite <span style="font-family: courier new, courier">writing</span>. Optionen können auf allen acht Standardoptionsseiten von WordPress hinzugefügt werden:</p>
<ul>
<li>general</li>
<li>writing</li>
<li>reading</li>
<li>discussion</li>
<li>media</li>
<li>privacy</li>
<li>permalink</li>
<li>misc</li>
</ul>
<p>Die andere Funktion <span style="font-family: courier new, courier">add_settings_field</span> hat einige Parameter mehr.</p>
<pre class="brush: php; title: ; notranslate">
add_settings_field(
  $option_name,
  '&lt;label for=&quot;'.$option_name.'&quot;&gt;'.
    $option_description.
  '&lt;/label&gt;',
  $callback_function_name,
  $page,
  'default',
  array()
);
</pre>
<p>Ich denke die meisten Parameter sind so bereits klar. Hier einige Anmerkungen:<br />
Der zweite Parameter gibt den Text vor dem Optionsfeld aus. Bei WordPress ist es üblich, dass dieser Text ein Label ist (also den Fokus an das Input-Element weitergibt). Das geschieht aber nicht automatisch und muss extra angegeben werden. Mit diesem Funktionsaufruf wird noch nicht das Eingabefeld angezeigt. Darum kümmert sich die Callback-Funktion. Hier das passende Beispiel:</p>
<pre class="brush: php; title: ; notranslate">
function test_option() {
  $value = get_option('test_option');
  echo '&lt;input type=&quot;text&quot; class=&quot;regular-text&quot;
    id=&quot;test_option&quot; name=&quot;test_option&quot; value=&quot;'.$value.'&quot; /&gt;';
}
</pre>
<p>Die Funktion muss den aktuellen Wert selbst laden und anschließend das komplette Input-Element ausgeben. Der Name des Input-Elements muss der Name der Option sein (s. <span style="font-family: courier new, courier">register_setting</span>). Bitte nicht die ID vergessen, sonst funktioniert das label nicht.</p>
<h2>Gruppieren</h2>
<p>Wenn das Plugin mehr als eine Option hat, ist es sinnvoll die Optionen zu gruppieren. Dafür muss zuerst eine Gruppe anlegt werden und anschließend können die Optionen dieser Gruppe zuordnen werden. Gruppe anlegen:</p>
<pre class="brush: php; title: ; notranslate">
add_action('admin_init', 'test_admin_init');
function test_admin_init() {
  add_settings_section(
    'test_section',
    'Test Titel',
    'test_section_description',
    'writing'
  );
  ...
}

function test_section_description() {
  echo '&lt;p&gt;info&lt;/p&gt;';
}
</pre>
<p>Die Callback-Funktion gibt die Beschreibung zu der Gruppe aus und wird vor den Optionsfeldern angezeigt. Damit sie richtig formatiert wird, sollte in der Callback-Funktion auch ein Absatz ausgegeben werden. Um ein Optionsfeld dieser Gruppe zuzuordnen, muss nur der vorletzte Parameter in der <span style="font-family: courier new, courier">add_settings_field</span> von &#8216;default&#8217; auf den Sectionname (im Beispiel &#8216;test_section&#8217;) geändert werden. Beispiel:</p>
<pre class="brush: php; title: ; notranslate">
add_settings_field(
  'test_option',
  '&lt;label for=&quot;test_option&quot;&gt;Test&lt;/label&gt;',
  'test_option',
  'writing',
  'test_section',
  array()
);
</pre>
<h2>Best Practise</h2>
<p>Ich habe jetzt schon einige male die Settings-API benutzt. Dabei wurde mir eins klar. Es ist wichtig die Bezeichner überall gleich zu wählen, sonst kommt man durcheinander. Was meine ich damit: Im Falle der test_option habe ich an allen Stelle test_option verwendet:</p>
<ul>
<li>Optionsname</li>
<li>Name der Callback-Funktion (ggf. mit einheitlichem Prefix versehen)</li>
<li>Name und ID des Input-Elements</li>
</ul>
<p>Das Gleiche gilt natürlich auch für die Section und deren Callback-Funktion. Wenn möglich sollte auch eine Vereinheitlichung über Plugingrenzen angestrebt werden.</p>
<p>Die Settings-API unterstützt auch die objekt-orientierte Programmierung. Alle Callback-Funktionen können auch als <span style="font-family: courier new, courier">array</span> mit Verweis auf <span style="font-family: courier new, courier">&#038;$this</span> angegeben werden.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.hetjens.com/2009/08/05/settings-api-wordpress-standardoptionsseiten-erweitern/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

