Es kommt häufig vor, dass man verschiedene Informationen hat, die mehrfach auf einer Website auftauchen. Das sind oft Kontaktinformationen wie die Adresse, die E-Mail-Adresse oder die Telefonnummer eines Unternehmens. Wenn sich diese Informationen ändern, kann es dann schwierig werden, alle Teile der Website zu aktualisieren.

Genau für dieses Problem gibt es eine einfache Lösung: Eine “Options”-Page, in der diese Daten verwaltet werden können. In diesem Artikel erfährst du, wie du ganz einfach selbst eine Options-Page in deine WordPress Seite einbaust.

Das Endergebnis sieht ungefähr so aus:

---

1. Welche Daten brauchst du?

Mach dir zu Beginn eine kurze Liste der Informationen, die du in deiner Options-Page verwalten willst. Normalerweise sind das Daten wie E-Mail-Adresse, Telefonnummer oder Adresse. Diese Liste ist wichtig, damit du später keine Daten vergisst.

---

2. Öffne die functions.php Datei oder erstelle eine Plugin

Tipp: Wenn du Probleme bei der Bearbeitung der functions.php Datei hast, schau dir doch mal meinen Blog-Artikel zu dieser wichtigen Datei an! Bearbeite die passende functions.php Datei - Du findest Informationen zur angebrachten Datei in dem erwähnten Blogartikel, aber hier nochmal die Infos:

• Wenn du das Theme, das du verwendest, selbst entwickelt hast, kannst du einfach direkt die functions.php dieses Themes bearbeiten
• Wenn du ein Child-Theme verwendest, kannst du die functions.php diesen Themes verwenden.
• Wenn du möchtest, das die Options Page unabhängig von deinem Theme ist, implementiere den Code am besten in einem Plugin.
• Du kannst auch ein Plugin verwenden, um den Code einzusetzen, ohne die Themes zu bearbeiten oder ein eigenes Plugin einzurichten

---

3. Implementiere den Code

Jetzt geht es an den Code, der die Options Page möglich macht.

Zuerst musst du die Optionen in der Datenbank registrieren:

function register_gcf_settings() {
	register_setting( 'gcf-group', 'gcf_telefon' );
	register_setting( 'gcf-group', 'gcf_firmenname' );
	register_setting( 'gcf-group', 'gcf_adresse' );
	register_setting( 'gcf-group', 'gcf_email' );
	register_setting( 'gcf-group', 'gcf_fax' );
}

Jetzt musst du Wordpress noch mitteilen, dass dieser Code ausgeführt werden soll:

add_action("admin_init", "register_gcf_settings");

Jetzt kannst du das Frontend der Seite umsetzen:

function global_custom_fields_settings_page() {
	?>
		<div class="wrap">
			<h1>Firmendaten</h1>
			<form method="post" action="options.php">
				<?php settings_fields( 'gcf-group' );?>
				<?php do_settings_sections( 'gcf-group' );?>
				<table class="form-table">
					<tr valign="top">
						<th scope="row">Firmenname</th>
						<td><input type="text" name="gcf_firmenname" value="<?php echo esc_attr( get_option('gcf_firmenname') ); ?>" /></td>
					</tr>
					<tr valign="top">
						<th scope="row">Adresse</th>
						<td><input type="text" name="gcf_adresse" value="<?php echo esc_attr( get_option('gcf_adresse') ); ?>" /></td>
					</tr>
					<tr valign="top">
						<th scope="row">Telefonnummer</th>
						<td><input type="text" name="gcf_telefon" value="<?php echo esc_attr( get_option('gcf_telefon') ); ?>" /></td>
					</tr>
					<tr valign="top">
						<th scope="row">E-Mail-Adresse</th>
						<td><input type="text" name="gcf_email" value="<?php echo esc_attr( get_option('gcf_email') ); ?>" /></td>
					</tr>
					<tr valign="top">
						<th scope="row">Fax</th>
						<td><input type="text" name="gcf_fax" value="<?php echo esc_attr( get_option('gcf_fax') ); ?>" /></td>
					</tr>
				</table>
				<?php submit_button(); ?>
				</form>
		</div>

	<?php
}

Experimentiere einfach etwas herum, wenn du diese Seite ändern willst. Ich bin davon überzeugt, dass du schnell lernst, wie du welche Dinge ändern kannst! Außerdem findest du sehr hilfreiche Artikel auf der offiziellen WordPress Seite. Wenn du irgendwelche Probleme hast oder nicht weiterkommst, melde dich gern bei mir.

Zu guter letzt musst du die Seite noch als Menüpunkt im WordPress-Admin-Bereich hinterlegen:

function setup_theme_admin_menus() {
	add_menu_page( 'Firmendaten', 'Firmendaten', 'manage_options', 'gcf-		firmendaten', 'global_custom_fields_settings_page', 'dashicons-building');
}

add_action("admin_menu", "setup_theme_admin_menus");

Hier nochmal der ganze Code:

function register_gcf_settings() {
	register_setting( 'gcf-group', 'gcf_telefon' );
	register_setting( 'gcf-group', 'gcf_firmenname' );
	register_setting( 'gcf-group', 'gcf_adresse' );
	register_setting( 'gcf-group', 'gcf_email' );
	register_setting( 'gcf-group', 'gcf_fax' );
}

function global_custom_fields_settings_page() {
	?>
		<div class="wrap">
			<h1>Firmendaten</h1>
			<form method="post" action="options.php">
				<?php settings_fields( 'gcf-group' );?>
				<?php do_settings_sections( 'gcf-group' );?>
				<table class="form-table">
					<tr valign="top">
						<th scope="row">Firmenname</th>
						<td><input type="text" name="gcf_firmenname" value="<?php echo esc_attr( get_option('gcf_firmenname') ); ?>" /></td>
					</tr>
					<tr valign="top">
						<th scope="row">Adresse</th>
						<td><input type="text" name="gcf_adresse" value="<?php echo esc_attr( get_option('gcf_adresse') ); ?>" /></td>
					</tr>
					<tr valign="top">
						<th scope="row">Telefonnummer</th>
						<td><input type="text" name="gcf_telefon" value="<?php echo esc_attr( get_option('gcf_telefon') ); ?>" /></td>
					</tr>
					<tr valign="top">
						<th scope="row">E-Mail-Adresse</th>
						<td><input type="text" name="gcf_email" value="<?php echo esc_attr( get_option('gcf_email') ); ?>" /></td>
					</tr>
					<tr valign="top">
						<th scope="row">Fax</th>
						<td><input type="text" name="gcf_fax" value="<?php echo esc_attr( get_option('gcf_fax') ); ?>" /></td>
					</tr>
				</table>
				<?php submit_button(); ?>
				</form>
		</div>

	<?php
}

function setup_theme_admin_menus() {
	add_menu_page( 'Firmendaten', 'Firmendaten', 'manage_options', 'gcf-		firmendaten', 'global_custom_fields_settings_page', 'dashicons-building');
}


add_action("admin_init", "register_gcf_settings");
add_action("admin_menu", "setup_theme_admin_menus");

Wenn du diesen Code an der richtigen Stelle eingebaut hast, hast du eine funktionierende Options-Page! Herzlichen Glückwunsch!

via GIPHY

---

Shortcode zum lesen der Daten

Du weißt jetzt, wie du ganz einfach eine eigene Options-Page bauen kannst - aber wie kannst du die Daten jetzt auf deiner Website verwenden? Das machst du am besten über einen Shortcode!

Du musst nur einen kurzen Code-Schnipsel hinzufügen:

function get_option_shortcode($atts) {
    $atts = shortcode_atts(array(
        'name' => '',
    ), $atts);

    if (empty($atts['name'])) {
        return 'Please provide the name of the option.';
    }

    $option_value = get_option($atts['name']);

    return $option_value;
}
add_shortcode('get_option_value', 'get_option_shortcode');

Jetzt kannst du überall auf deiner Website die ausgefüllten Daten verwenden. Um beispielsweise die Telefonnummer anzeigen, benutzt den Shortcode folgendermaßen:

[get_option_value name="gcf_telefon”]

Du gibst also immer den “Namen” des Feldes ein. Viel Spaß damit!

---

Fazit

Vielen Dank, dass du diesen Artikel gelesen hast! Lass mich bitte wissen, wenn du noch irgendwelche Fragen haben solltest. Ich freue mich auch über Feedback! Viel Spaß mit deiner neuen WordPress Options-Page.