Jetzt wollen wir uns dies zunutze machen, und unsere Wordpress-Seite mit eigenen PHP-Codes um ein paar Funktionalitäten ergänzen.

Transkript

1 PHP in Wordpress Einführung Sie haben ja bereits einige Einblicke in PHP sowie Wordpress erhalten. Kurz zusammengefasst könnte man sagen, dass jede Wordpress-Einzelseite durch PHP-Code aus vordefinierten Stücken sowie Datenbankeinträgen (z.b. Posts) zusammengesetzt wird. Jetzt wollen wir uns dies zunutze machen, und unsere Wordpress-Seite mit eigenen PHP-Codes um ein paar Funktionalitäten ergänzen. Wo aber finden wir den PHP-Code? Genau dort, wo wie auch die CSS-Dateien verändern können, können wir die PHP-Dateien finden und ändern. Wir wählen also Dashboard Themes Editor. Ganz rechts können wir nun die zu verändernde PHP-Datei auswählen. Wichtiger Hinweis: Bevor Sie etwas ändern, sollten Sie den Quelltext der PHP-Datei immer von Hand aus dem Editor rauskopieren und sichern! Zweiter Hinweis: Die Erklärungen beziehen sich auf das Twenty Fourteen -Template, es kann sein, dass Ihre PHP-Datei leicht (oder sogar stark) anders aussieht. Fragen Sie im Zweifelsfall bei uns nach! Vorbereitung Dashboard Einstellungen Permalinks Eine der gebräuchlichen Einstellungen verwenden aber nicht Standard! Auf Änderungen übernehmen klicken. Falls eine Fehlermeldung erscheint liegt keine beschreibbare.htaccess-datei auf dem Server, melden Sie dies bei einem Lehrer.

2 Unser Spiel in der 404-Seite Sie haben in der letzten Übung des Kapitels Funktionen Teil I von codecademy ein kleines Spiel programmiert. Dies wollen wir nun auf der 404-Seite unseres Wordpress haben. Die 404-Seite ist jene Seite die angezeigt wird, falls der Browser eine nicht existierende Seite aufrufen möchte. 01. Öffnen Sie ihre Wordpress-Seite. Rufen Sie nun eine nicht existierende Unterseite auf (z.b. Diese Seite wollen wir anpassen. 02. Öffnen Sie (in einem anderen Tab/Fenster) im Editor das 404-Template. 03. Kopieren Sie den Quelltext in ein neues txt-dokument und speichern Sie dieses auf dem Stick ab (z.b. unter 404_original.txt), so dass Sie ihn allenfalls wieder herstellen könnten. 04. Ersetzen Sie die Zeile <h1 class="page-title"><?php _e( 'Not Found', 'twentyfourteen' ); </h1> durch <h1 class="page-title">404</h1> 05. Speichen Sie den Code ( Update File ) und aktualisieren Sie die Ansicht der BlaBla - Seite. Sehen Sie was sich geändert hat? 06. Nun bauen wir das in codecademy programmierte Spiel in diese Seite ein. Ersetzen Sie dazu den Code <?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentyfourteen' ); durch den Code Ihres Spiels. Beachten Sie dabei, dass der Code innerhalb des p-elements mit <?php beginnt und mit endet. Den Code <?php get_search_form(); können Sie ersatzlos löschen. Speichern Sie den Code ab. 07. Aktualisieren Sie mehrmals hintereinander die Ansicht der BlaBla -Seite. (Das Spiel wird dabei jedesmal neu gestartet.) 08. Nun ist es natürlich nicht so wahnsinnig sinnvoll hier ein Spiel zu haben. Ersetzen Sie daher die Namen der Spieler durch Text in verschiedenen Sprachen (z.b. also Sorry, page not found! oder Cette page n est malheureusement pas disponible. ). 09. Erweiterungen: a. Ersetzen Sie auch den Text 404 durch zufällig gewählte Texte. b. Wählen Sie Schrift-Familie, -Farbe, etc. zufällig und fügen Sie diese als Inline- Argumente ein. c. Fügen Sie zudem ein zufällig gewähltes Bild ein. (Bilder hochladen, URLs notieren, ) d.

3 Zeitdauer bis zur Abschlussfeier berechnen und in Header ausgeben Um diese zu berechnen, müssen wir zunächst das aktuelle Datum (resp. einen Datumswert) ermitteln können. Benötigte Funktionen: time() liefert die Anzahl Sekunden, die seit Beginn des Jahres 1970 bis zum Moment des Funktionsaufrufs vergingen (also seit 1970/01/01 00:00:00 GMT). mktime(stunde, Minute, Sekunde, Monat, Tag, Jahr) liefert die Anzahl Sekunden, die zwischen Beginn des Jahres 1970 bis zum als Argument- Liste übergebenen Datum. Damit stets die richtige Anzahl Tage ermittelt wird, verwenden wir bei uns das Datum nach (!) der Abschlussfeier. Achtung: Die Reihenfolge der letzten drei Argumente lautet Monat-Tag-Jahr! floor(zahl) liefert die übergebene Zahl ohne Nachkommastellen zurück. 01. Öffnen Sie im Editor die PHP-Datei header.php. 02. Erstellen Sie in einem Textdokument eine Sicherungskopie davon. 03. Suchen Sie das End-Tag (</h1>) der Überschrift <h1 class="site-title"> 04. Fügen Sie danach folgenden Code ein: <div style="position:absolute; width:100%; top:10px; color:red; textalign:center;"> <?php $zeitinsekunden=mktime(0,0,0,6,26,2015)-time(); $zeitintagen=floor($zeitinsekunden/86400); echo "Noch ". $zeitintagen. " Tage bis zur Abschlussfeier!"; </div> 05. Erweiterungen: a. Verwenden Sie if oder switch, um bei den Werten 0 und 1 andere, angepasste Texte auszugeben. (Testen Sie, indem Sie der mktime-funktion anstelle des Datums der Abschlussfeier, z.b. dasjenige von morgen übergeben.) b. Verwenden Sie eine Verzweigung, um am letzten Tag noch einen Countdown (in Stunden) anzugeben. Dabei geben Sie das echte Datum ein und als erstes Argument die Stunde (18). c. Die Style-Angaben sind hier in der Inline-Version übergeben worden. Übertragen Sie diese ins style.css, wo sie dafür eine neue Klasse erstellen und dann im DIV auf diese Klasse verweisen. d. Geben Sie z.b. einen Text wie folgt aus: Noch 120 Tage bis zur Uselüti, noch 154 Tage bis zur Abschlussfeier. (Nach der Uselüti soll diese nicht mehr erwähnt, und nach der Abschlussfeier gar nichts mehr ausgegeben werden.)

4 Alter des Beitrags berechnen und im Beitragsheader ausgeben Für diese Aufgabe verändern wir die Datei content.php. Auch dieses Mal gilt: Zuerst das Original sichern! Benötigte Funktionen: get_the_date(x) Liefert einen Teil des Erstell-Datums des Blogeintrags. Z.B. liefert get_the_date("y") das Jahr in dem der Beitrag erstellt wurde. Statt "y" geht z.b. auch: "m" für Monatszahl, "d" für Tageszahl. date(x) Dasselbe wie get_the_date(x) aber fürs aktuelle Datum. 01. Öffnen Sie im Editor die PHP-Datei content.php. 02. Suchen Sie folgenden Code: <?php endif; edit_post_link( ( 'Edit', 'twentyfourteen' ), '<span class="editlink">', '</span>' ); 03. Fügen Sie gleich danach folgenden Code ein: <?php if ( (date("m")==get_the_date("m")) && (date("y")==get_the_date("y")) ) { // Jahres- und Monatszahlen stimmen überein (Beitrag von diesem Monat) $alterinsekunden=time()- mktime(0,0,0,get_the_date("m"),get_the_date("d"),get_the_date("y")); // Ev. auch Erstell-Uhrzeit mit einbeziehen // Hier z.b. das Alter in Tagen berechnen // und mit einem switch davon abhängige Ausgaben generieren. else { // Jahres- und Monatszahlen stimmen nicht überein echo "<br />(Dieser Beitrag stammt nicht von diesem Monat.)"; 04. Speichern Sie, betrachten Sie den Blog. 05. Fügen Sie weitere Kommentarausgaben ein z.b. für Beiträge des gleichen Tages, Beiträge die von gestern sind, oder für alle Beiträge dieses Monats (z.b. Dieser Beitrag ist 4 Tage alt ), oder

5 Ein Symbol-Bild in jedem Beitragstitel einfügen Für diese Aufgabe verändern wir die Dateien content.php und header.php. Auch dieses Mal gilt: Zuerst das Original sichern! 01. Zunächst laden Sie ein geeignetes Bild hoch. Sie werden es im Verzeichnis mit dem relativen Pfad wp-content/uploads/ wiederfinden. Nehmen wir an es handle sich um das Bild stift-block.png. 02. Öffnen Sie im Editor die Datei content.php. Sichern Sie das Original, bevor Sie weiterarbeiten. 03. Suchen Sie nach den Codestücken the_title( '<h1 class="entry-title">', '</h1>' ); und the_title( '<h1 class="entry-title"><a href="'. esc_url( get_permalink() ). '" rel="bookmark">', '</a></h1>' ); Diese Funktion holt aus der Datenbank den Beitragstitel und fügt ihn zwischen die beiden Attribute in den HTML-Code ein. Damit das Bild in der Überschrift erscheint, lassen wir daher das img-element ebenfalls dort ausgeben. 04. Fügen Sie also bei BEIDEN the_title-aufrufen gleich nach dem ersten > und vor dem nachfolgenden Hochkomma diesen Code ein: <img src=" width="40"/> (Die Breitenangabe können Sie natürlich Ihren Wünschen entsprechend anpassen.) 05. Speichern Sie den Code und laden Sie die Ansicht ihres Blogs neu.

6 Jedem Beitrag ein eigenes Symbol-Bild zuweisen Zugegeben: Den Effekt der vorhergehenden Übung hätten wir auch mit CSS recht einfach erzielen können. Nun soll aber jeder Beitrag ein eigenes, zufällig zugewiesenes Bild erhalten, wobei sich kein Bild wiederholen darf. Idee: Wir legen einen Array mit Bildern an; per Zufallszahl wählen wir dann jeweils eines davon. 01. Laden Sie zunächst genügend Bilder hoch. (Mindestens so viele Bilder wie Beiträge!) 02. Ganz am Schluss der Datei header.php fügen wir den Code für den Array ein, wobei Sie die Bilder-Dateinamen selber einfüllen / anpassen müssen: <?php // Bilder für Beitragstitel function bildauslisteeinfuegen() { global $bilder; if (!isset($bilder)) { $bilder=array("blume_01.jpg", "blume_02.jpg",...); if (count($bilder)>0) { $nummer=rand(0,count($bilder)-1); $quelltext = "<img src=' uploads/". $bilder[$nummer]. "' height='45' />"; unset($bilder[$nummer]); $bilder=array_values($bilder); return $quelltext; 03. In der content.php lassen wir vor dem Titeltext das Bild einfügen: if ( is_single() ) : the_title( '<h1 class="entry-title">'. bildauslisteeinfuegen(), '</h1>' ); else : the_title( '<h1 class="entry-title">'. bildauslisteeinfuegen(). '<a href="'. esc_url( get_permalink() ). '" rel="bookmark">', '</a></h1>' ); endif; 04. Erweiterungen / Übertragungen auf andere Orte : a. Fügen Sie in jedem Beitragsheader eine verlinkte Werbung für eine(n) jeweils zufällig gewählte(n) Kollegen/in (z.b. Besuchen Sie auch den Blog von Hans. ). b. Im Siteheader (in 50% der Fälle): Anstelle der Zeitangabe bis zur Abschlussfeier Werbung für einen anderen Blog. c. Aus mehreren Sets von Bildern eines zufällig wählen und verwenden. Hinweise: global $bilder; sagt der Funktion, dass Sie eine allfällig existierende Variable $bilder wie eine eigene Variable verwenden soll. if (!isset($bilder)) {... lässt den Codeblock nur dann ausführen, falls die Variable $bilder noch nicht existiert. (Ansonsten würde sie ja immer wieder neu gesetzt, was wir nicht wollen). $bilder=array_values($bilder); erstellt aus den Arrayeinträgen einen neuen Array. Das ist notwendig, damit im Array nach dem Löschen eines Eintrages keine Lücken verbleiben.