Wordpress Plugin - Part 2 - Eine Seite für Einstellungen

In diesem Part ist das Ziel, eine Seite mit Einstellungen hinzuzufügen. Wir wollen hier dem Anwender die Möglichkeit geben, einen Wert zu speichern. Die Einstellungen sollen einmal im Bereich Plugins sowie im Menü unter Einstellungen von WordPress sichtbar sein. Hierzu fügen wir unserer anzeigenchef.php eine Funktion hinzu

function anzeigenchef_add_settings_link( $links ) {
    $settings_link = '<a href="admin.php?page=anzeigenchef">' . __( 'Settings' ) . '</a>';
    array_push( $links, $settings_link );
  	return $links;
}

Zusätzlich fügen wir einen Filter hinzu, der auf unsere neue Funktion verweist

add_filter( 'plugin_action_links_'.plugin_basename(__FILE__), 'anzeigenchef_add_settings_link' );

WordPress versucht automatisch im Plugin eine Funktion zu finden, die sich sich plugin_action_links_PLUGINNAME nennt. Ist diese vorhanden, so wird als Parameter der Standardlink „Aktivieren / Deaktivieren“ übergeben und als Ergebnis eine Liste von Links erwartet, die zusätzlich angezeigt werden sollen. Hier geben wir also unseren „Einstellungen“ Link zurück. Es können auch weitere hinzugefügt werden.

Im nächsten Schritt benötigen wir einen Menüpunkt im Bereich „Einstellungen“ von WordPress. Hierzu legen wir die folgende Funktion an

function anzeigenchef_create_menu() 
{
    add_submenu_page('options-general.php', 'AnzeigenChef Einstellungen', 'AnzeigenChef', 'manage_options', 'anzeigenchef', 'anzeigenchef_settings_page', plugins_url("images/plugin_logo.png", __FILE__), 1001);
    add_action( 'admin_init', 'register_anzeigenchef_settings' );
}

add_action('admin_menu', 'anzeigenchef_create_menu');

Die neue Funktion „anzeigenchef_create_menu“ dient dazu, beim erzeugen aller Menüs seitens WordPress unsere Einstellungen ebenfalls zu laden.

Parameter für die Funktion add_submenu_page

  • 1 – options-general.php – Entscheidet, wo unsere Einstellung angezeigt werden soll. Hier sind die allgemeinen Einstellungen gemeint
  • 2 – Titel – ‚AnzeigenChef Einstellungen‘, dieser soll als Seitentitel im Browser erscheinen
  • 3 – Headline auf der Seite – ‚AnzeigenChef‘
  • 4 – manage_options – Teilt WordPress mit, dass diese Seite Einstellungen verwaltet
  • 5 – anzeigenchef – So heißt unser Plugin
  • 6 – anzeigenchef_settings_page – Zeigst WordPress, welche Funktion aufgerufen werden soll, um den Inhalt der Seite zu rendern
  • 7 – Icon für den Menüpunkt

Eine weitere wichtige Zeile ist „add_action( ‚admin_init‘, ‚register_anzeigenchef_settings‘ );„. Damit legen wir innerhalb einer Funktion fest, welche Optionen wir speichern möchten. Für unser Beispiel soll das ein Token sein, der später zur Kommunikation dient. Wir fügen folgende Funktion hinzu

function register_anzeigenchef_settings() {
  register_setting( 'anzeigenchef-settings', 'token' );
}

Unser Token wird in den WordPress Settings innerhalb der Gruppe „anzeigenchef-settings“ gespeichert. „token“ entspricht dem Feldnamen, den wir auf unserer Seite festlegen werden.

Die Funktion „anzeigenchef_settings_page“

Damit unsere Seite dargestellt wird, legen wir die Funktion anzeigenchef_settings_page an. Diese muss eine HTML Seite zurückgeben und zusätzlich zwei Schlüsselfunktionen enthalten, damit unsere Werte gespeichert werden. Hier nun erstmal die Funktion

function anzeigenchef_settings_page() {
?>
<div class="wrap">
<h1>AnzeigenChef</h1>
<p>Du kanns im AnzeigenChef unter Einstellungen, Optionen Deinen hier hinterlegten Token eintragen. Zus&auml;tzlich kopierst Du die unten angezeigte URL und f&uuml;gst sie ebenfalls in das daf&uuml;r vorgesehene Feld ein</p>

<form method="post" action="options.php">
    <?php settings_fields( 'anzeigenchef-settings' ); ?>
    <?php do_settings_sections( 'anzeigenchef-settings' ); ?>
    <table class="form-table">
        <tr valign="top">
        <th scope="row">Zufallsgenerator</th>
        <td><input type="button" name="tokengen" value="Token jetzt generieren" onclick="JavaScript:generateToken(32);"/></td>
        </tr>
        <tr valign="top">
        <th scope="row">Hinterlege hier Deinen Token</th>
        <td><input style="min-width: 320px" type="text" name="token" id="token" value="<?php echo esc_attr( get_option('token') ); ?>" /></td>
        </tr>
        <tr valign="top">
        <th scope="row">URL f&uuml;r den AnzeigenChef</th>
        <td><?php echo plugin_dir_url( __FILE__ ); ?>transfer.php</td>
        </tr>
    </table>
    
    <?php submit_button(); ?>

</form>
</div>
<script>
    function generateToken(n) {
        var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        var token = '';
        for(var i = 0; i < n; i++) {
            token += chars[Math.floor(Math.random() * chars.length)];
        }
        document.getElementById("token").value = token;
    }
</script>
<?php 
}

Nicht erschrecken, das sieht auf den ersten Blick wild aus, erklärt sich jedoch wie folgt:

Wir die Funktion aufgerufen, so wird der enthaltene HTML Code dargestellt. Der Bereich <form> … </form> beinhaltet unser Formular, indem der Nutzer Angaben machen kann. Die Zeilen <?php settings_fields( ‚anzeigenchef-settings‘ ); ?> sowie <?php do_settings_sections( ‚anzeigenchef-settings‘ ); ?> bringen WordPress dazu, versteckte Standardfelder zu erzeugen, die unter anderem den Referer sowie die Aktion „update“ automatisch hinzufügen.

Über die Funktion <?php echo esc_attr( get_option(‚token‘) ); ?> können wir den bereits gespeicherten Wert des Nutzers abrufen und darstellen.

Da ein Token möglichst einmalig sein sollte, fügen wir einen kleinen JavaScript Tokengenerator hinzu. Dieser generiert einen Zufallstoken aus Buchstaben und Zahlung und füllt das Feld automatisch.

Die Funktion <?php submit_button(); ?> erzeugt den Absendebutton womit unser Formular dann auch komplett wäre.

Hier noch mal das gesamte Werk

<?php
defined('ABSPATH') or die("Bye...");
/*
Plugin Name: AnzeigenChef
Plugin URI: https://anzeigenchef.roundcubes.de/wordpress-integration.html
Description: Erstellt in Kombination mit dem AnzeigenChef eine Galerie Deiner Kleinanzeigen
Version: 1.0
Author: RoundCubes GmbH
Author URI: https://anzeigenchef.roundcubes.de
Text Domain:  anzeigenchef
*/

function anzeigenchef_add_settings_link( $links ) {
    $settings_link = '<a href="admin.php?page=anzeigenchef">' . __( 'Settings' ) . '</a>';
    array_push( $links, $settings_link );
  	return $links;
}

add_filter( 'plugin_action_links_'.plugin_basename(__FILE__), 'anzeigenchef_add_settings_link' );

function anzeigenchef_create_menu() {
    add_submenu_page('options-general.php', 'AnzeigenChef Einstellungen', 'AnzeigenChef', 'manage_options', 'anzeigenchef', 'anzeigenchef_settings_page', plugins_url("images/px.png", __FILE__), 1001);
  
  add_action( 'admin_init', 'register_anzeigenchef_settings' );
}

add_action('admin_menu', 'anzeigenchef_create_menu');

function register_anzeigenchef_settings() {
  register_setting( 'anzeigenchef-settings', 'token' );
}

function anzeigenchef_settings_page() {
?>
<div class="wrap">
<h1>AnzeigenChef</h1>
<p>Du kanns im AnzeigenChef unter Einstellungen, Optionen Deinen hier hinterlegten Token eintragen. Zus&auml;tzlich kopierst Du die unten angezeigte URL und f&uuml;gst sie ebenfalls in das daf&uuml;r vorgesehene Feld ein</p>

<form method="post" action="options.php">
    <?php settings_fields( 'anzeigenchef-settings' ); ?>
    <?php do_settings_sections( 'anzeigenchef-settings' ); ?>
    <table class="form-table">
        <tr valign="top">
        <th scope="row">Zufallsgenerator</th>
        <td><input type="button" name="tokengen" value="Token jetzt generieren" onclick="JavaScript:generateToken(32);"/></td>
        </tr>
        <tr valign="top">
        <th scope="row">Hinterlege hier Deinen Token</th>
        <td><input style="min-width: 320px" type="text" name="token" id="token" value="<?php echo esc_attr( get_option('token') ); ?>" /></td>
        </tr>
        <tr valign="top">
        <th scope="row">URL f&uuml;r den AnzeigenChef</th>
        <td><?php echo plugin_dir_url( __FILE__ ); ?>transfer.php</td>
        </tr>
    </table>
    
    <?php submit_button(); ?>

</form>
</div>
<script>
    function generateToken(n) {
        var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        var token = '';
        for(var i = 0; i < n; i++) {
            token += chars[Math.floor(Math.random() * chars.length)];
        }
        document.getElementById("token").value = token;
    }
</script>
<?php 
} 
?>

Speichern, hochladen und die Seite Plugins / Installierte Plugins aufrufen. Aktiviert das AnzeigenChef Plugin und schaut euch die neuen Optionen an.

Versucht nun mal, den Wert zu generieren und zu speichern. Das sollte einwandfrei funktionieren.

Herzlichen Glückwunsch! Wir haben nun ein Plugin, ohne jegliche Funktion mit der Möglichkeit, Einstellungen zu hinterlegen. Ergänzt es, baut es um und schaut euch den nächsten Part an. Hier werden wir unsere eigene Tabelle erzeugen, um später unsere Kleinanzeigen über den AnzeigenChef hochzuladen.

<< Zurück zu Part 1 – Das Grundgerüst  ||  Weiter zu Part 3 – Erstellen einer Datenbanktabelle >>

Möchtest Du auf dem laufenden bleiben?

Dann abonniere diesen Blog, wir informieren Dich, sobald neue Beiträge hinzugefügt werden.

Mit Deinem Abonnement akzeptierst Du die Verarbeitung Deiner Daten gemäß unserer Datenschutzbestimmungen

Hinterlasse einen Kommentar

avatar
  Abonnieren  
Benachrichtige mich bei