Web-Applikation für WordPress erstellen – Teil 1

In diesem Teil 1 beginne ich mit den grundlegen ersten Schritten, wie eine komplette Web-Anwendung komplett in WordPress integriert und erstellt werden kann. Dieser Teil 1 enthält die Vorbereitung und die Erstellung des Plugins sowie der Umsetzung der Seitennavigation.

Wordpress verwende ich schon sehr lange, habe auch schon Plugins und Themes entwickelt, doch jetzt stellte sich mir die Aufgabe eine komplett neu zu erstellende Web-Applikation „Rechentrainer“ in WordPress zu integrieren.Es geht dabei um die Implementierung einer Anwendung, die die mobile Rechentrainer-App unterstützen und einen intensiven Datenaustausch ermöglichen soll. Die benötigten Features sind:

  • Verknüpfen der App-Installation mit einem Nutzerprofil in WordPress
  • Eingabe von Daten in die Webseite, speichern in der WordPress-Datenbank
  • Synchronisieren der Daten mit der App – in beide Richtungen

Zunächst stellt sich die Frage, wie die Anwendung in WordPress integriert wird. Da die Integration möglichst updatekompatibel sein soll, möchte ich möglichst WordPress standardkonform nutzen und keine Besonderheiten „drumherum“ bauen.

Hier bietet sich eine eigenes Page-Templates an, welches sich hervorragend in WordPress integriert und dabei gleichzeitig volle Kontrolle über die Inhalte ermöglicht. Durch das Verwenden einer Seite kann der Link dazu auch perfekt in ein WordPress Menü eingefügt und nach Belieben auf der Seite eingebaut werden.

Dazu wird eine neue Datei im aktuellen Theme erstellt:

wp-content/themes/kifuga/page-rechentrainer.php

<!DOCTYPE html>
<html>
<?php
/*
Template Name: Rechentrainer
*/
get_header(); ?>
<body <?php body_class(); ?>>
<?php get_template_part("template-parts/kifuga", "header"); ?>

<div id="primary" class="container content-area">
    <main id="main" class="site-main" role="main">
        <div class="row">
            <div class="col-xs-12">
                <?php rt_init(); ?>
            </div>
        </div>
    </main><!-- .site-main -->
</div><!-- .content-area -->

<?php get_footer(); ?>

Wichtig ist der PHP Kommentar oben, dadurch erkennt WordPress dies als Page Template und bietet es bei der Erstellung einer neuen Seite an.

Die hier aufgerufene Funktion „rt_init“ existiert noch nicht („rt“ ist der Prefix für „Rechentrainer“). Diese wird in einem gleichnamigen Plugin definiert, welches die gesamte Logik der Applikation aufnehmen wird:

wp-content/plugins/rechentrainer/functions.php:

<?php
/**
 * @package Rechentrainer
 */
/*
Plugin Name: Rechentrainer
Plugin URI: http://www.kifuga.de
Description: not yet
Version: 0.1
Author: Stefan Gaffga
Author URI: http://www.gaffga.de
License: Proprietary
Text Domain: rechentrainer
*/

function rt_init() {
    // Get the current page, find the template to use for it and include it
    $page = get_query_var("rtpage", "index");
    $tpl_name = RT_PAGE_TO_TEMPLATE[$page];
    if(isset($tpl_name) && $tpl_name!=="") {
        get_template_part("template-parts/rechentrainer", $tpl_name);
    } else {
        // No template found - always use the index template then
        get_template_part("template-parts/rechentrainer", "index");
    }
}

So existiert nun ein neues Plugin. Die Funktion „rt_init“ ermittelt die aktuelle Seite der Anwendung und führt ein Mapping zu Template-Namen durch. Diese werden dann via „get_template_part“ ausgegeben.

Da die gesamte Anwendung aus WordPress-Sicht auf derselben Seite stattfindet, muss zur Unterscheidung welche Seite der Anwendung gerade sichtbar ist, ein zusätzlicher GET Parameter hinzugefügt werden:

wp-content/plugins/rechentrainer/functions.php:

function rt_query_vars( $qvars ) {
    $qvars[] = "rtpage";
    return $qvars;
}

add_filter('query_vars', 'rt_query_vars' , 10, 1 );

Dies registriert einen neuen GET Parameter, so dass mit „get_query_var“ die Anwendung dann dessen Inhalt auslesen kann. Dieser Parameter legt nun fest, welche Seite der Anwendung gerade aktiv ist. Anhand dieser Angabe kann nun sehr einfach eine Navigation innerhalb der Anwendung realisiert werden.

Die einzelnen Seiten der Anwendung liegen alle unter wp-content/themes/kifuga/template-parts/ und sind so über die WordPress-Funktion „get_template_part“ gut zugänglich.

Die Links zu den Seiten der Anwendung können so erzeugt werden:

// Link zu wp-content/themes/kifuga/template-parts/rechentrainer-index.php
$url = add_query_arg("rtpage", "index");

Der Ablauf im Hintergrund bei Aufruf dieser URL ist folgender:

  1. WordPress ruft die Anwendungs-Seite auf, gibt dabei auch den „rtpage“ GET Parameter mit
  2. Das eigene Template wird aufgerufen und extrahiert den „rtpage“ Parameter
  3. Die Seite „index“ wird über ein Mapping zum Template-Namen „index“ aufgelöst (in diesem Fall identisch, könnte aber auch anderslautend sein)
  4. Die Funktion „rt_init“ ruft dann per „get_template_part(‚template-parts/rechentrainer‘, ‚index‘)“ die Seite der Anwendung auf

Soweit zu den ersten Schritten der Anwendung. Im 2. Teil werde ich auf die Erweiterung der WordPress-Datenbank eingehen.