Wiki Artikel von der Wikimedia Syntax in ein WordPress-Format bringen

Die Wikipedia ist für Recherchezwecke, für Informationssuche und als Nachschlagwerk… unschlagbar.

Die Software hinter Wikipedia heißt Mediawiki, ist open source, gratis und kann von  jedem installiert werden.

Der große Nachteil von Mediawiki ist die Bedienung, das Medienhandling, Verlinkungen, Tagging/Kategorien usw.

All das kann WordPress viel viel viiiiiiiel besser.

Wir selbst haben in der Firma den Fehler gemacht, viel zu lange auf Mediawiki zu setzen.

Aber was mach ich nun, wenn ich meine ganze Dokumentation in einem eigenen Wiki hab, und das nach WordPress exportieren möchte?

Es gibt dafür nicht wirklich eine fixfertige Software, keine Plugins o.ä.

Mögliche Lösungsansätze dazu wären:

Pandoc

Vorgehensweise mit Pandoc

Mediawiki hat eine eigene Syntax, die Markdown ähnelt.

Hier ein Beispiel für Mediawiki Syntax:

Mediawiki Syntax in Action

Daraus wird:

So schaut die Mediawiki-Syntax schlussendlich formatiert im Frontend aus!

Konvertierung mit Pandoc

Pandoc ist eine Kommandozeilen Bibliothek, mit der man Texte und Dateien aus verschiedene Formate in verschiedene Formate exportieren kann.

Habe ich zb die Datei reisen.wiki, die in der Mediawikisyntax geschrieben ist, hilft mir folgender Befehl, wenn ich die Seite nach HTML umwandeln will.

pandoc -f mediawiki -t html5 -s reisen.wiki -o reisen.html

Mit -f mediawiki gebe ich das Eingabeformat an.

Mit -t html5 gebe ich das Ausgabeformat an.

Die Ausgangsdatei gebe ich durch reisen.wiki an.

Das Schreiben in eine HTML-Datei erreiche ich durch die Angabe von -o reisen.html

Will ich Wikimedia-Syntax nach Markdown bringen, dann wär dieser Befehl der passende:

pandoc -f mediawiki -t gfm -s reisen.wiki -o reisen.md

Der Parameter gfm gibt die auszugebende Syntax an. In dem Fall ist das GitHub-Flavored Markdown.

Ergebnis der Umwandlung mit Pandoc

Markdown ist es nun schlussendlich geworden!

Wir haben daher die Seiten von der Wikimedia-Syntax in das Markdown Format überführt.

Warum? Weil man damit keinen unnötigen Code hat und es für WordPress super Markdown-Plugins gibt.

Ursprünglich war die Idee, die Wikieinträge nicht zb nach Markdown umzuwandeln, sondern gleich in ein sauberes (saubereres) HTML. Das Ergebnis schaut dann aus wie in den folgenden Screenshots wobei zu beachten ist, dass das oben gezeigte Bild (rosarotes Österreich) nicht verlinkt ist, weil aus der Mediawiki-Syntax nur der Bildname im SRC des Image-Tags übrig bleibt.

 

Problem der Umwanldung nach HTML

Hat man in einem Wiki-Artikel zb Codeteile drin, die mit Codehighlighting sichtbar gemacht werden, wirds umständlich:

 

Umständlich, weil Pandoc freundlicherweise Css-Regeln einfügt.

Was grundsätzlich eh super ist, weil ich dann das Code-Highlighting im Export/in der umgewandelten HTML-Datei habe:

Das ist für die Weiterverwendung in WordPress aber suboptimal.

Weil ich dann im Beitragsinhalt/im Content CSS-Regeln habe, und die dort nicht hin gehören.

Alternativen

Man könnte den XML-Export vom Mediawiki verwenden. Dann braucht man auf WordPress-Seite einen Importer. Die XML-Exportdatei gefällt mir nicht so gut. Mit der Umwandlung in ein aufgeräumtes HTML von Pandoc kann ich die Inhalte gleich in den WordPress-Editor reinkopieren.

 

Markdown in WordPress

Mit diesem Markdown-Plugin https://wordpress.org/plugins/wp-githuber-md/ wird der Inhaltseditor angepasst und schaut dann so aus:

 

Auf der linken Seite hab ich den markdown formatierten Text, rechts das Ergebnis, das auch im Frontend angezeigt wird:

 

 

Links

Beitragsbild / Post Thumbnail mit der JSON API / WP API / REST API holen

Die Dokumentation der WP JSON API ist nach wie vor recht spärlich. Die JSON-API fühlt sich immer noch ein bisserl wie ein Stiefkind an, aus WordPress Entwickler Sicht.

Was ich nicht ganz verstehen kann, denn Gutenberg setzt verstärkt darauf.
Gutenberg ist der WordPress-Core eigene Pagebuilder, der stark auf JavaScript (React) setzt, und daher von einer JSON-API profitiert.

Das als kleiner Exkurs 🙂

Wir beschäftigen uns gerne mit der WP API, zb hier und hier.

Worum geht es in dem Artikel? Einfach! Post Thumbnails

Beitragsbild mit JSON API holen

Will ich ein Post Thumbnail mit einem JSON Call holen, hilft mir die WordPress Dokumentation wenig.

Mit ein wenig Recherche bei Github/im Codeverwaltungssystem wird man aber fündig:

Der Parameter

?_embed

rettet uns!

Hänge ich den Parameter an den JSON-Call, so bekomme ich weitere Daten, siehe:

https://wpaustria.at/wp-json/wp/v2/mein_post_type?_embed

 

Ich bekomme durch den angehängten Parameter umfangreiche Infos zum Beitragsbild zb auch die diversen URLS der verschiedenen Bildergrößen, dich ich für responsive Images brauche:

 

Alternativen

Es gibt ein paar Hooks, mit denen ich den JSON-Response ändern kann. Nur: Warum sollte ich mir die Arbeit machen, das per HOOK und PHP zu lösen? Es gibt sicher Anwendungsfälle, aber für eine schnelle Lösung ist das nix.

Es gäbe auch ein Plugin, wer PHP nicht angreifen kann:

Better REST API Featured Images

Links

 

Aus einem hell-braunen Platzhalter wird ein Bild

WordPress beschleunigen und optimieren – Ein Blick auf srcset/sizes und lazy-loading

Damit die eigenen Artikel oder Produkte heutzutage aus der Masse heraus stechen, sollte man tief in die Trickkiste greifen.

Dieser Artikel soll aber nicht an dieser Trickkiste rütteln, sondern zwei Techniken näher beleuchten, die einem dabei helfen können. Es geht dabei um die HTML5 Attribute „srcset“ und „sizes“ und um die Technik des „lazy-loadings“.

Das Grundproblem

Wenn ich heute als Autor im Internet ein Bild hochlade, dann ist mir meist egal, welche Größe das Bild hat. Immerhin lebe ich Österreich oder Deutschland  in einem Land, das mir schnelles, unlimitiertes Internet für wenig Geld anbietet. (Gut – für Deutschland gilt das unter Vorbehalt :p )

Doch bereits in Deutschland gibt es Orte, an denen das bereits Luxus ist. Um allen Nutzern der Website das best mögliche Erlebnis zu bieten, sollte ich die Bilder also besser aufbereiten, damit niemand mehrere Sekunden warten muss oder mehrere MB herunterladen muss, um die Seite komplett sehen zu können.

Die Techniken

srcset- & sizes-Attribut

Der erste Bereich sollte heutzutage wirklich kein Thema mehr sein.

Wer selbst an einem Theme schreibt, der wird höchstwahrscheinlich die WordPress Funktionen „get_the_post_thumbnail()“ oder „the_post_thumbnail()“ verwenden.

Diese Funktionen geben mir bereits alles was ich brauche. Sie liefern gleich das ganze HTML mit dem srcset- und dem sizes-Attribut aus. Für Bilder, die nicht als featured-image eingebunden wurden, gibt es noch die Funktion „wp_get_attachment_image( $attachment_id )“, der wir als ersten Parameter die „$attachment_id“ des Bildes übergeben.

Auch hier erhalten wir wieder ein voll funktionsfähiges HTML mit srcset- und sizes-Attribut. Praktisch, dass WordPress im Hintergrund ohnehin für jedes hochgeladene Bild mehrere Versionen für die verschiedenen Größen anfertigt und auf der Festplatte des Servers abspeichert.

img-Element mit srcset- und sizes-Attribut
img-Element mit srcset- und sizes-Attribut

Aber da wir immer wieder auf Themes stoßen, die die beiden Attribute noch nicht verwenden, möchte ich hier auf ein praktisches Plugin verweisen, das Bilder aus dem Contentbereich nachträglich das srcset-Attribut verpasst.

responsify-wp

Es handelt sich um „responsify-wp“ von Stefan Ledin. Für das Plugin sei allerdings angemerkt, dass seine Möglichkeiten begrenzt sind und z.B. keine Bilder außerhalb des eigentlichen Contents mit den mächtigen HTML5-Attributen versehen kann.

Die wichtigsten Einstellungen zu responsify-wp
Die wichtigsten Einstellungen zu responsify-wp

Sollte ein Theme sehr viele verschiedene Bildgrößen definieren, kann man in den Einstellungen praktischerweise steuern, welche Bildgrößen für die beiden Attribute verwendet werden sollen. Das verhindert das unnötige aufblähen des img-Elements.

responsify-wp. Steuerung, welche Bildgrößen verwendet werden sollen.
responsify-wp. Steuerung, welche Bildgrößen verwendet werden sollen.

Warum sind diese Attribute so mächtig?

Nun durch diese Attribute kann sich der Browser selbst aussuchen, in welcher Größe das Bild geladen und angezeigt wird. Auf Smartphones, deren Bildschirm sehr viel kleiner ist als ein 24‘‘ Bildschirm, brauche ich kein Bild laden, das die 9 fache Größe hat, oder? Das wäre in mehrfacher Hinsicht unnötig.

lazy-loading

Beim lazy-loading geht es nicht mehr darum, wie groß das Bild an sich ist, sondern darum, ob das Bild überhaupt geladen/angezeigt werden soll.

Bilder, die auf dem aktuellen Bildschirmausschnitt nicht zu sehen sind, müssen nicht unbedingt vom Server heruntergeladen werden.

Wer kann schon wissen, ob der Nutzer überhaupt weitere Bereiche der Seite ansieht oder nicht vielleicht schon auf einer anderen Seite ist?

Daher haben wir in weiterer Folge ein paar Tipps für Plugins, die einem das ermöglichen.
Anders als das srcset-Attribut, das in seiner Handhabung nun wirklich keine Hexerei ist, ist es doch mit erheblichem Mehraufwand verknüpft, diese Funktionalität selbst zu programmieren. Deshalb besprechen wir ein paar Plugins.

Dominant colors lazy loading

Zu Beginn hätten wir mit „Dominant colors lazy loading“ einen besonders interessanten Vertreter, der diese Funktion auch gleich mit einem weiteren grafischen Schmankerl versehen hat.

Zu Beginn wird die Mediathek vom Plugin nach Bildern durchsucht um eine dominante Farbe aus jedem einzelnen Bild zu identifizieren.

Einstellungen des Plugins 'dominant colors lazy loading'
Einstellungen des Plugins ‚dominant colors lazy loading‘

So lange das Bild nicht geladen wird, wird der Bereich des Bildes stattdessen in der zuvor errechneten dominanten Farbe angezeigt.

Das löst auch gleich ein anderes Problem, das auftreten kann, wenn Bilder sehr viel später auf der Seite angezeigt werden, als reiner Text. Wenn statt dem Bild einfach nichts gezeigt werden würde, müsste sich das Bild erst einen Platz verschaffen um angezeigt zu werden. Dadurch kann es zu unschönen Sprüngen im Contentbereich kommen.

Aus einem hell-braunen Platzhalter wird ein Bild
‚dominant colors lazy loading‘ bei der Arbeit: Aus einem hell-braunen Platzhalter wird ein Bild

Bei diesem Plugin ist zu beachten, dass es die WordPress-typische CSS Klasse (z.B. wp-image-5) für Bilder benötigt, um seiner Arbeit nachgehen zu können.
Sollte ein Theme diese nicht hinterlegt haben, wird dieses Plugin leider nicht funktionieren.

Andere lazy loading Plugins

Daneben sind noch „rocket lazy load“ und vor allem „crazy-lazy“ zu erwähnen, die in den meisten Fällen ohne Probleme funktionieren sollten. Ein etwas älterer Vertreter ist „lazy-load“, das allerdings seit über 2 Jahren kein Update mehr erhalten hat.

Google investiert in WordPress – Entsteht hier ein Gegengewicht zu Automattic?

Google macht ja schon länger in WordPress. Angefangen von Webinaren, Videoanleitungen und Tutorials über AMP und bezahlte Entwickler, die WordPress-Code beitragen.

Google hat also sowieso im WordPress-Universum einen Fuß in der Tür.

Jetzt geht man anscheinend einen Schritt weiter, was für die Zukunft einige Umbrüche bringen könnte.

Google sucht WordPress-Entwickler

Alberto Medinas Blogpost mit dem Aufruf an WP-Entwickler

 

Google sucht also nach WordPress-Entwicklern, die sich an folgende Themen ranmachen sollen:

  • Projekt Gutenberg vorantreiben, damit die Usability besser wird (Dringend notwendig)
  • Themes erstellen, die moderne Webtechnologien verwenden
  • Mitarbeit am AMP-Plugin (ich persönliche halte wenig von AMP!)
  • Mitarbeit am TIDE-Plugin (Plugin zur Bewertung der Codequalität von Plugins uvm)
  • Google Sitekit Plugin um  AdSense-, Analytics-,  PageSpeed- und Suchkonsolen-Daten gebündelt im WordPress Dashboard anzeigen zu können.

 

Diesem Aufruf sind schon mehrere bekannte Namen aus dem WordPress-Universum gefolgt, der bekannteste dürfte derzeit Weston Ruter sein, der in seinem Blogpost seine Beweggründe erklärt:

 

Gerücht am Rande: Laut Informierten, bezahlt Google in der Schweiz ein Einstiegsgehalt von 170.000 Franken – gerüchteweise ohne Garantie auf Richtigkeit.

Hintergründe: Mitbestimmung beim wichtigsten CMS?

Google meint es also ernst.

Warum überhaupt?

WordPress ist die Unterlage von ca 30% der Webseiten überhaupt. Es wäre von Google fahrlässig, hier irgendwelchen Playern das Feld allein zu überlassen ohne ein Mitspracherecht zu haben.

Die Strategie erinnert ein wenig an Microsoft – und das erste Bild in diesem Blogpost hat eine umwerfende Ähnlichkeit zu diesem Sujet:

Microsoft liebt Linux? Und Google jetzt WordPress? Zufall?

Microsoft weiß um die Dominanz von Linux in der Serverumgebung.

Google weiß um die Dominanz von WordPress im CMS-Umfeld.

Beide wissen, dass sie sich aktiv an der Entwicklung dieser Open Source Projekte kümmern müssen, um mitbestimmen zu können.

Das Problem bei Open-Source-Projekten aus der Sicht von Unternehmen ist halt, dass da meist Individualisten, Querköpfe und Spinner am Werk sind. Programmierer eben.

Und Programmierer sind meist schlechte Führungspersönlichkeiten.

Daher sind Ziele oft verwässert oder Entwicklungen gehen in falsche Richtungen oder Zersplittern sich uvm.

WordPress ist da ein bissl anders gelagert:

Besondere Situation von Automattic in der open source Welt

WordPress ist zwar open source, also kann von jedem verwendet und verändert werden.

Aber hinter WordPress steht eine erfolgreiche Firma, die eigentlich über alle Aspekte von WordPress bestimmen kann.

Angefangen vom Namen und Logo. Beides gehören Automattic bzw einer Stiftung rund um den Gründer von Automattic, Matt Mullenweg.

Matt gibt auch die Schlagrichtung vor. Also wohin sich WordPress als Projekt bewegen soll. Welche Ziele in den nächsten Releases, also den nächsten Versionen, verfolgt werden sollen.

Das hat alles sein Gutes. Automattic bezahlt eine Menge an Entwicklern, die am WP-Sourcecode weiterschreiben. Den Core also weiterentwickeln, verbessern und aktuell halten.

Gemäßigter Diktator als Warnsignal für Google?

Das ist ein großer Vorteil gegenüber anderen Open Source Projekten, die keinen potenten Geldgeber im Hintergrund haben.

Ohne Matt und Automattic gäbe es WordPress in der Form nicht. Da steckt sehr viel „privates“ Geld in einem quelloffenen CMS.  Das eigentlich von Nerds und Spinnern programmiert wird. Gerade open source Communitys haben selten eine Führungsperson.

Bei WordPress ist das anders, da gibt halt ein „gemäßigter Diktator“ den Ton an.

Liste bekannter gemäßigter Diktatoren (BDFL) auf Wikipedia

Und Diktatoren sind halt das, was sie sind: Machtmenschen, die oft irgendwann den Bezug zur Realität verlieren.

Wäre ich Entscheider bei Google, würde mich sowas hellhörig machen.

 

Realitätsverlust? Gutenberg-Drama? Betriebsblindheit? Wird Matt wunderlich?

 

WordPress ist gerade im Umschwung.

Mit Gutenberg kommt ein neuer Editor, der von der Idee her wirklich Gutes bringen wird.

Derzeit ist Gutenberg aber für Ottonormalverbraucher quasi unbenutzbar.

Die einfachsten Dinge sind nicht offensichtlich zu lösen.

Zb das Einfügen von Bildern in einen Text ist eine grenzwertige Erfahrung. Das hab ich von Anfang an kritisiert und auch den Core-Entwicklern mitgeteilt. Geändert hat man seitdem nix.

Zudem funktionieren responsive Images mit scrset noch nicht so, wie man das vom alten Editor gewöhnt ist. Problem? JA! Das kann sich schlecht auf das Google Ranking und die Benutzererfahrung auswirken. Warum? Weil Bilder nicht optimal sondern in zu großer Auflösung geladen werden.. Siehe: https://github.com/WordPress/gutenberg/issues/6177

Das Bilder-Einfügen ist also seit Anbeginn ein ungelöstes Problem und wird auch nicht Behoben, da von den Entwicklern und von Matt als „kein Problem“ angesehen werden.

Und da beginnen die Probleme. Die Offenheit der Core-Entwickler, die ja zu einem guten Teil Automattic-Mitarbeiter sind, ist nicht gegeben.
Im Gegenteil: Man fühlt sich sogar angegriffen, wenn man konstruktive Vorschläge und Kritik vorbringt.

 

Rund um das Thema hat sich eine Posse entwickelt, die derzeitig problematische Situation und das Spannungsfeld Automattic <-> Matt <-> WP-Entwickler verdeutlicht:

Link zum Tweet von John Blackbourn https://mobile.twitter.com/johnbillion/status/1058536248950833153

John Blackbourn ist ein wohlverdienter WordPress-Core-Entwickler und schmeißt jetzt das Handtuch, weil er merkt, was alle im Moment merken:

Wer konstruktive Kritik übt wird als Gegner von Gutenberg diffamiert..

Dazu kommt, dass Matt dem User die Schuld an der teilweisen Unbedienbarkeit von Gutenberg gibt:

Schuld ist immer der USER! Oh boy… Tweet von Matt: https://mobile.twitter.com/photomatt/status/1058497572111675393

Terminänderungen

Gutenberg und die Version 5.0 von WordPress hätten am 19. November veröffentlicht werden sollen.

Da war Gutenberg nicht fertig – daher gab es sehr viele Stimmen dagegen.

Und Moment. 19. November? Da war doch was! Ach ja, Thanksgiving-, Cybermonday- und BlackFriday-Woche. Die umsatzstärkste Woche im amerikanischen E-Commerce.

Was war das doch für ein grandioser Terminvorschlag….

Neuer Veröffentlichungstermin?

26. November.

Dieser Termin wird auch nicht halten.

Daher wird Dezember vorgeschlagen. Was natürlich keine gute Idee ist, kurz vor der Weihnachtszeit.

Also wird’s 2019 werden.

Das hört sich nicht nach stringentem Projektmanagement an…

Zudem fragen sich viele (Core-) Entwickler, wer denn das nun alles beschlossen hat.

WordPress wird von einer Open Source Community entwickelt. Diese ganzen Änderungen kommen aber nicht von der Community. Wer hat da also wohl das sagen und warum?

Ablenkungsmanöver

Im Moment dürfte Matt unter Stress stehen. Manche seiner Antworten sind daher ein bisserl wunderlich.

So gibt es Stimmen, dass es zu viele offene Issues für den Release Candidate von WordPress gibt. Wie antworten trotzige Kinder? Genau:

Aber xyz hat doch das Selbe gemacht, ällabätsch!

 

So könnte man diese Antwort auffassen:

Matt Mullenweg im WordPress-Core-Blog: https://make.wordpress.org/core/2018/11/19/5-0-gutenberg-status-update-nov-19/#comment-34455

Viele haben Angst vor einer Veröffentlichung einer neuen Major-Version im Dezember. Eh schon wissen: Weihnachten und Weihnachtszeit bei uns und noch mehr in den Staaten. Die obligatorische Matt-Antwort im Core-Slack-Channel:

Slack Nachricht von Matt: https://wordpress.slack.com/archives/C02RQBWTW/p1542837346944900

 

Und dann gäbe es noch diesen unrühmlichen Tweet, den ich hier mehr oder weniger unkommentiert stehen lassen möchte:

Stay classy, Matt! https://mobile.twitter.com/photomatt/status/1062475366462308355

Weitere Meinungen zu Matt, Gutenberg und Leadership

Der Kollege wirft ein paar interessante Fragen rund um die Rolle von Matt und den Release von Gutenberg auf. Er spricht darauf an, dass WordPress eigentlich kein Automattic-Produkt sondern ein Community-Produkt ist.

https://de.wikipedia.org/wiki/Benevolent_Dictator_for_Life

 

Conclusio

Im Moment ist viel los im WordPress-Universum.

Es stehen gravierende Änderungen an, die zukünftige User verstören oder verzücken könnten.

Dennoch herrscht ein bissl Chaos.

Durch die aktuellen Schritte, die Google im WordPress-Universum unternimmt, kommt es mir so vor, als wollte Google einen stabilisierenden Faktor reinbringen. Natürlich geht es da aber auch um Mitbestimmung.

Derweilen nur schleichend und nicht offensichtlich.

Ich bin gespannt, ob ich mit dieser Theorie auch nur annähernd richtig liege.

Aus betriebswirtschaftlicher Sicht wäre es nur logisch.

Links

Speichere post meta/custom field Daten mit der WP API (JSON API) und AJAX – register_meta() heißt das Zauberwort!

Die JSON-API von WordPress bringt immense Vorteile und wird auch schon stark benutzt. Wir haben schon sehr früh über die Entwicklung der JSON-API geschrieben und befassen uns daher schon lange mit der ganzen Thematik.

json photo
Photo by xmodulo

Leider gibt es bei der WP-API einige Baustellen. Angefangen von der überaus schlechten Dokumentation bis zu den gravierenden Änderungen bei Versionssprüngen.

Ein großes Problemfeld ist das Auslesen und Speichern von custom fields / post meta per JSON-API.

Daher: Die Geschichte der Custom Fields in WordPress ist eine Geschichte voller Missverständnisse!

In den ersten Versionen der JSON-API war es recht einfach möglich, Custom Fields zu befüllen. Aber mit den späteren Versionen wurde die einfache Speichermöglichkeit entfernt und nun sind gewisse Vorbereitungen notwendig.

Ein kleines Beispiel soll zeigen, wie man nun per AJAX ein Postmeta mittels JSON speichert. Wir gehen von einem Formular mit Eingabemöglichkeit für Titel und Content aus.

Schritt 1: Postmeta für WP-API vorbereiten mit register_meta()

 

Wichtig ist, „show_in_rest“ auf true zu stellen!

// add_action( 'init', register_meta_for_json' ); //BSP-Hook
 public static function register_meta_for_json() {
 $vorbereitetes_meta_args = array(
 'type' => 'string',
 'description' => 'Testmeta fuer JSON',
 'single' => true,
 'show_in_rest' => true,
 );

$Stars_args = array(
 'type' => 'number',
 'description' => 'Feld für Star-Rating',
 'single' => true,
 'show_in_rest' => true,
 );

register_meta( 'post', 'vorbereitetes_meta', $vorbereitetes_meta_args );
 register_meta( 'post', 'Stars', $Stars_args );
 }

 

 

 

Schritt 2: JavaScript-Datei einbinden und eigene Parameter anfügen

add_action( 'wp_enqueue_scripts', 'json_script');
 function json_script() {

wp_enqueue_script( 'wpent-json', plugins_url( 'wpent_json.js', __FILE__ ), array( 'jquery' ) );

$localize_script_args = array(
 'nonce' => wp_create_nonce( 'wp_rest' ), //extra wichtig - muss wp_rest sein!
 'jsonroot' => esc_url_raw( get_rest_url() ),
 'userID' => get_current_user_id(),
 );

wp_localize_script( 'wpent-json', 'WPENT_JSON_DATA', $localize_script_args );
 }

Schritt 3: Daten vorbereiten und per AJAX den JSON-Call machen

 

jQuery( document ).ready( function ( $ ) {
 $( '#eingabeformular' ).on( 'submit', function(e) {
 e.preventDefault();
 var title = $( '#eingabefeld_titel' ).val();
 var content = $( '#eingabefeld_content' ).val();
 var postmeta = { 'vorbereitetes_meta':"Metainhalt", 'Stars':"11"};

var data = {
 'title' : title,
 'content' : content,
 'status' : 'publish',
 'tags' : [2, 3],
 'categories' : [1, 4],
 'meta' : postmeta
 };

$.ajax({
 method: "POST", // oder type: 'POST',
 url: WPENT_JSON_DATA.jsonroot + 'wp/v2/posts', // url: 'meinedomain.at/wp-json/wp/v2/posts',
 dataType : 'json',
 contentType: 'application/json',
 data: data,
 beforeSend: function ( xhr ) {
 xhr.setRequestHeader( 'X-WP-Nonce', WPENT_JSON_DATA.nonce );
 },
 success : function( response ) {
 console.warn( response );
 },
 fail : function( response ) {
 console.warn( response );
 }
 });

});

} );

 

Andere Möglichkeiten

Andere Seiten haben auch schöne…Möglichkeiten für diesen Zweck. Hier der Überblick:

Wichtigen Code in functions.php speichern? Eigenes Plugin dafür erstellen? Nein! Wichtiger Code kommt in den Ordner mu-plugins!

Oft wird man gefragt:

Wohin mit Anpassungen am Theme? Wohin mit Code-Snippets von StackExchange? Wohin mit kleinen, eigenen Funktionalitäten?

Dafür ist eigentlich die Datei functions.php im Theme zuständig.

Problem Problem Problem: Wenn das nicht das eigene Theme ist, sind die Änderungen beim nächsten Theme-Update weg!

Was war daher die Lösung? Genau!

Child-Themes!

Dadurch bleiben Änderungen bei jedem Update erhalten.

Ist das die beste Lösung für eigenen Code?

Meistens nicht!

Ein Plugin ist für eigene Funktionalitäten meist die beste Lösung.

Blöd nur, dass man das deaktivieren kann. Oder, dass es viel zu spät in Abläufe eingreift.

Doch halt, dafür gibt es eine Lösung!

Eine, die noch viel einfacher ist, als eigene Plugins erstellen, irgendwelche functions.php Dateien anzugreifen o.ä.

Must Use Plugins ist die Lösung

Must Use oder mu-plugins sind eigentlich keine Plugins. Es sind PHP-Dateien, die von WordPress automatisch geladen werden, wenn Sie im Verzeichnis wp-content/mu-plugins abgelegt werden.

https://codex.wordpress.org/Must_Use_Plugins

Der WordPress-Codex sagt über mu-plugins:

Must-use plugins (a.k.a. mu-plugins) are plugins installed in a special directory inside the content folder and which are automatically enabled on all sites in the installation.

Also:

mu-plugins sind Plugins, die in einem speziellen Verzeichnis im content Verzeichnis installiert werden. Diese Plugins werden automatisch auf allen Seiten einer Installation aktiviert. (Anmerkung: Mit Seiten sind Multisite-Blogs gemeint)

Die Vorteile sind also:

  • Kein formales Plugin notwendig, nur eine PHP-Datei mit Code. Daher weniger Arbeitsaufwand und Code Overhead
  • Dieser Code wird immer aktiviert. Es muss kein Plugin aktiviert werden.
  • Dieses „Plugin“ kann nicht deaktiviert werden, es scheint auch nicht in der Pluginübersicht auf
  • Code wird vor dem laden anderer Plugins geladen.
  • Code/Plugin  wird auf allen Blogs einer Multisite aktiviert.

 

Diese Funktionalität von WordPress ist verdammt praktisch.

Ich brauch für kleinere Funktionen nicht gleich ein eigenes Plugin erstellen. Man kann Funktionalitäten einbauen, ohne dass diese deaktiviert werden oder bei Updates verschwinden.

Eine kleine, saubere und einfache Lösung, um WordPress in der Funktionalität zu erweitern. Super!

 

Problem beim Post erstellen bei >300.000 Posteinträgen – Eltern-Dropdown (Page Parent) entfernen

WordPress und hohe Postanzahl

WordPress kommt gut mit Instanzen zurecht, die mehr als 300.000 Beiträge, Seiten oder andere Custom Post Type Einträge aufweisen.

Obwohl sich in der Datenbank aufgrund von Autosaves und Revisionen ein Vielfaches von 300.000 Einträgen befindet, sind Seiten im Front- und Backend noch geschmeidig bedienbar.

Das trifft auch auf Sharedhosting wie Uberspace zu, was viele im Vorhinein nicht vermuten würden.

Problemzone Elternseiten-Dropdown

So ganz uneingeschränkt stimmt das nicht.
Ein riesiges Problem ist das Elterndropdown im Backend:

Eltern- oder Pageparent Dropdown
Eltern- oder Pageparent Dropdown

In diesem Dropdown werden alle Seiten aufgelistet, die es so gibt.
Das heißt, dass ALLE Seiten/CPT aus der Datenbank geholt werden. Das ist schon mal ein Performanceproblem, da das eine ressourcenfressende Abfrage ist.

Das nächste Problem besteht darin, alle Seiten dann in HTML umzusetzen. Es kommt also für jeden Eintrag ein weiteres Objekt in dem Dropdown hinzu.

Bei zb vier Einträgen wie hier ist das kein Problem:

Dropdown-Einträge im HTML-Quelltext
Dropdown-Einträge im HTML-Quelltext

Müssen aber zb 300.000 Einträge erstellt werden, wird das schnell zum Flaschenhals am Webserver.

Also:

Der Webserver wird dadurch extremst ausgelastet und es kann zu einem Ausreizen des Arbeitsspeichers oder der Exec-Time kommen.

Was dann passiert, sollte klar sein, oder?

Wir bekommen eine (meist) weiße Seite mit einem Server-Error.

Das liegt sicher nicht in unserem Interesse.

Lösung: Dropdown beseitigen, zb

Einerseits könnte man aus dem Dropdown ein Autovervollständigenfeld machen, wie das zb bei der Tag-Auswahl bekannt ist.

Wenn man aber die Auswahl der Elternseite sowieso nicht braucht, kann man diesen Bereich gleich ganz entfernen.

Bei selbst erstellen Post Types reicht es, wenn ‚page-attributes‘ bei ’supports‘ weggelassen wird:

Register Post Type Beispiel
Register Post Type Beispiel

Dadurch erhält der Post-Type im Backend auf der Bearbeitenseite gar kein Dropdown, um ein Elternelement auszuwählen.

Wenn ich einem bestehenden Post-Type, wie zb „page“, das Dropdown wegnehmen möchte, brauche ich die Funktion remove_post_type_support():

Das war’s auch schon!

Links

https://codex.wordpress.org/Function_Reference/remove_post_type_support

https://codex.wordpress.org/Function_Reference/register_post_type

Nonces in WordPress

Im WP-Kontext sind Nonces eine zufällige Aneinanderreihung von Zahlen und Buchstaben, die zwar mehrmals verwendet werden (im Gegensatz zur üblichen Implementierung von Nonces – Number used once), aber ein klar definiertes Ablaufdatum haben.

Wie bereits im Artikel WordPress Sicherheit bei Formulareingaben und AJAX Aufrufen – verwendet Nonces! beschrieben wurde, sollen Nonces dabei helfen, URLs und Formulare auf Websites vor missbräuchlicher Benutzung und anderem Unfug zu schützen.

Erstellung

URLs

werden mit wp_nonce_url( $actionurl, $action, $name ); aufgerufen.

  • $actionurl ist die URL, die wir mit der Nonce „absichern“ wollen.
    • required; Default: None
  • $action ist der Name der action, die wir frei wählen können.
    • optional; Default: -1
  • $name ist der Name der so generierten Nonce.
    • optional; Default: _wpnonce

Als Rückgabewert erhalten wir eine bereinigte URL mit zusätzlicher Nonce. Diese sieht in etwa so „http://example.com/wp-admin/post.php?post=123&action=trash&_wpnonce=b192fc4204“ aus.

Forms

werden mit wp_nonce_field( $action, $name, $referer, $echo ); aufgerufen. Diese Funktion generiert uns bis zu zwei hidden input Elemente.

  • $action definiert den Namen der action.
    • optional, aber empfohlen; Default: -1
  • $name ist der Name der so generierten Nonce.
    • optional. Default: _wpnonce
  • $referer gibt an, ob ein zusätzliches hidden input Element erstellt werden soll, das den Output der Funktion wp_referer_field beinhaltet.
    • optional; Default: true
  • $echo gibt an, ob die so erstellten inputs im HTML ausgegeben werden.
    • optional; Default: true

Als Rückgabewert erhalten wir ein oder zwei hidden input Elemente, wenn $referer true ist.

Beispiel für wp_nonce_field in Formularen.

Validierung

Allgemein

check_admin_referer( $action, $name ); überprüft sowohl die Nonce als auch den $referer.

  • $action ist der Name der action, die wir frei wählen können.
    • optional; Default: -1
  • $name ist der Name der so generierten Nonce.
    • optional; Default: _wpnonce
AJAX

check_ajax_referer( $action, $query_arg, $die ); überprüft nur die Nonce im Zuge eines AJAX-Requests.

  • $action ist der Name der action, die wir frei wählen können.
    • optional; Default: -1
  • $query_arg ist der Name der so generierten Nonce
    • optional; Default: false
  • $die gibt an, ob das script angehalten werden soll, wenn die Überprüfung fehlschlägt
    • optional; Default: true
Basic

wp_verify_nonce( $nonce, $action ); überprüft nur die Nonce.

  • $nonce ist der Name der Nonce, die überprüft werden soll.
    • required; Default: None
  • $action ist der Name der action.
    • optional; Default: -1

Eine einfache Überprüfung könnte z.B. so aussehen:

Validierung der wp-nonce mit wp_verify_nonce.

Weiterführende Informationen:

Update vom 10. Juli. 2018:
In der Wikipedia gibt es jetzt eine Erklärung zum Begriff „Nonce“:
https://de.wikipedia.org/wiki/Nonce