WordPress

WordPress und Gutenberg

dkracht

Gehört zu: WordPress

Der neue WordPress Editor names Gutenberg

Im März 2020 beim Upgrade meines WordPress auf Version 5.3.2 wurde ohne mich zu fragen der alte, vertraute klassische WordPress-Editor auf “Gutenberg” umgestellt.
Na schön sagte ich mir, Gutenberg ist jetzt schon ein ganzes Jahr da, also werden die Kinderkrankheiten wohl überstanden sein und schön ist der Gutenberg ja auch…

Nach ein paar Tagen bekam ich beim Update eines Artikels die Fehlermeldung:

“Update failed: Error Message: The response is not a valid JSON response”

Gutenberg hat mir meine wertvollen neuen Texte zerstört. Gutenbergs Kinderkrankheiten sind wohl doch nicht auskuriert. Mit meinen Blog-Texten möchte ich kein Risiko eingehen.

Nach kurzen Recherchen bei Tante Google bin ich dann schnell wieder zurück zum guten alten ausgereiften WordPress-Editor gegangen. Das ging ganz einfach mit dem WordPress-Plugin “Classic Editor”.

Seitdem trat der Fehler nicht wieder auf.

Bottom Line

Gutenberg ist fehlerhaft

Gutenberg ist Mist

Computer: WordPress: OSM Open Street Map Plugin

dkracht

Gehört zu: WordPress
Benutzt: GPS-Tracks von GitHub

Open Street Map Plugin für WordPress mit GPS-Tracks

Dieses Plugin

  • OSM Plugin Version 5.3.2 | By MiKa | zur Darstellung von GPS Tracks

ermöglicht es, eine OSM-Karte (=Map) zusammen mit einem GPS-Track in einen WordPress-Artikel einzubetten.

Installation des OSM Plugins

Zunächst läd man sich das OSM Plugin in sein WordPress.

Dann muss das OSM-Plugin aktiviert werden.

Benutzung des OSM Plugins: Die Landkarte

Um eine Landkarte (“Map”) in einem WordPress-Artikel anzuzeigen muss ein sog. OSM-Tag in dem WordPress-Artikel mit folgendem Aufbau stehen:
<eckige klammer auf>osm_map_v3 ... <eckige klammer zu>

Beispiel einer kleinen Landkarte von Dar Es Salam:

Abbildung 1: OSM-Landkarte ohne GPS-Track

Wobei “map_center” die geografische Länge und Breite des Kartenmittelpunkts sein soll und mit “zoom” die gewünschte Vergrößerungsstufe eingestellt werden kann.
Schließlich geben “width” und “height” die gewünschte Größe der Landkarte innerhalb des WordPress-Artikels an.

Achtung: Man muss mit diesen Angaben schon ein bisschen herum zirkeln, bis alles so schön aussieht, wie man es haben möchte.

Achtung: Die Angabe “height=…” muss absolut in Anzahl Pixel erfolgen, wenn man hier eine Prozentzahl angibt, erscheint eine Landkarte mit der Höhe Null, also ein Strich.

So wird ersteinmal nur die Landkarte (ohne GPS Track) angezeigt. Die Anzeige erfolgt nicht im WordPress-Edit-Mode, sondern nur im WordPress-View-Mode.

Benutzung des OSM Plugins: Der GPS-Track

Den GPS-Track muss man unabhängig zuvor mit einem geeigneten GPS-Logger aufgenommen haben und dann auf den Server hochladen wo das WordPress gehostet wird.

Soll auf der Landkarte dieser GPS-Track angezeigt werden, muss man in dem OSM-Tag zusätzlich den Parameter “file_list=…” angeben:

Abbildung 2: OSM-Landkarte mit einem GPS-Track (GitHUb: GPS_20091012_0726 Daressalam Walking Tour.gpx)

 

Computer: Webauthoring mit WordPress und Plugins

dkracht

Gehört zu: WordPress
Siehe auch: Google Maps, OSM Open Street Maps, Table of Contents, WordPress Graphics

Webauthoring mit WordPress

Das  Webauthoring für fast alle meine Websites habe ich nach und nach auf WordPress umgestellt.

Dazu habe ich dokumentiert, wie man mit WordPress folgendes hinbekommt:

WordPress Plugins

Besonders hilfreich finde ich die Möglichkeit in WordPress sog. Plugins zu verwenden. In regelmäßigem Einsatz habe ich folgende Plugins:

  • Last Modified Timestamp: Damit man seine Artikel auch nach dem Änderungsdatum sortieren kann
  • Meta Slider: Um eine kleine Diashow zu machen
  • Page Meta: Damit kann man unterhalb des Blog-Textes gleich Title, Despription und Keywords eingeben
  • Table of Contents Plus: Um Inhaltsverzeichnisse aus den Headings zu erzeugen
  • Updraft Plus:  zur Datensicherung
  • Latex: MathJax-LaTeX
  • WordPress Flickr Embed Plus: Um Bilder von Flickr in einen WordPress-Artikel einzubinden  (mittlerweile habe ich meine Fotos von Flickr nach Google Fotos migriert und wieder zurück nach Flickr)
  • OSM Plugin Version 5.3.2 | By MiKa | zur Darstellung von GPS Tracks
  • SVG Support Version 2.3.17 | By Benbodhi
  • Google Drive Embedder  Version 5.2.1 | By Lever Technology LLC

Verwendung der Plugins

  • Das Meta-Slider-Plugin wird verwendet auf: Nicht mehr verwendet
  • Das Latex-Plugin wird verwendet auf:  Kosmologie,…
  • Das OSM-Plugin verwende ich auf:  Afrika 2009 Tag 1, Afrika 2009 Tag 2,…
  • Das Plugin “Google Drive Embedder” verwende ich, um Dokumente, die in der Google Cloud (Google Drive) gespeichert sind, ein zu binden. Beispielsweise: Teilchenphysik

RSS Feeds

Interessanter Weise kann man die mit WordPress geschriebenen Artikel auch als RSS-Feed ansprechen:

Beispiele:

Computer: WordPress: Welche Datenbank Version von MySQL oder MariaDB

dkracht

Gehört zu: WordPress
Siehe auch: MySQL, ProviderStrato, Datensicherung, Meine Websites mit WordPress

Stand: 04.03.2023

Strato fordert Upgrade von PHP7.4 auf PHP8

Mein Web-Provider Strato wechselt von PHP7.4 auf PHP8 und will für einen Verbleib bei PHP7 extra Geld (Euro 7,81 jeden Monat ab 7.2.2023) für einen sog. “extended Support” haben. Wenn ich aber dem folge und also auf PHP8 wechsele, läuft mein WordPress-Blog  http://blog.kr8.de  nicht mehr…

Was tun?

Als ersten Schritt versuche ich, mein WordPress-Blog, was ich bei Strato hoste, nun zuhause auf meinem Laptop nachzustellen. Dazu richte ich auf dem heimischen Laptop ersteinmal die mit Strato identische Systemumgebung ein. Also:

  • Apache 2.4
  • PHP 7.4
  • MySQL 8  (bei Strato war es 5.7.38)
  • WordPress 6.1.1

Beim WordPress auf dem heimischen Laptop muss ich dann die gleichen Einstellungen wie bei Strato vornehmen; also:

  • Identische Plugins
  • Identisches Theme
  • Identische Permalinks

Dann hole ich mir die WordPress-Inhalte von Strato auf meinen heimischen Laptop. Das mache ich mit dem WordPress-Plugin Updraft Plus.

Wenn jetzt das WordPress-Blog von Strato auf meinem lokalen Laptop genauso funktioniert wie bei Strato, kommt die Nagelprobe: Wechsel von PHP7.4 auf PHP8 auf meinem lokalen Laptop…

xyz

WordPress bei Strato funktioniert nicht mehr

Anfang Januar 2017 funktionierte mein WordPress-Blog http://blog.kr8.de  bei meinem Web-Hoster Strato nicht mehr richtig.
Die Ursache des Problems bei Strato ist ungeklärt.
Bei Strato sichere ich mein WordPress mit dem Plugin UpdraftPlus auf meine Dropbox – und das hat noch funktioniert.

Die Ursache: utf8mb4

Um weiter arbeitsfähig zu bleiben, wollte ich die Updraft-Sicherung von Strato in mein lokales WordPress einspielen was aber zu einer Fehlermeldung führte, die sagte, dass meine MySQL-Version zu alt dafür sei. Weitere Recherchen ergaben, dass es an der MySQL collation “utf8mb4_unicode_ci” liegt, die das WordPress bei Strato verwendet aber von meinen lokalen MySQL 5.0 nicht unterstützt wird.

Meine lokalen WordPress-Installationen verwendeten als Datenbank MySQL in der Version 5.0.41 und diese unterstützten utf8 aber nicht  utf8mb4.  Letzteres bildet ein utf-Zeichen auf 4 statt drei Bytes ab. Contine reading →

Computer: WordPress: Nice Permalinks with Apache mod_rewrite and AllowOverride FileInfo

dkracht

Gehört zu: WordPress
Siehe auch: Apache

Stand: 07.03.2023

WordPress: Nice Permalinks with Apache mod_rewrite and AllowOverride FileInfo

My WordPress installation has configured the permalinks as “post name”.

In order to make this really happen, I had to activate within Apache the “rewrite-module mod_rewrite.so” and allow something for the “.htaccess”.

Allowing for .htaccess means changing my Apache configuration file (httpd.conf) as follows:

  • FollowSymlinks
  • AllowOverride FileInfo

Computer: WordPress: Graphics SVG, PPT, ODG, VSD, SWF

dkracht

Gehört zu: WordPress
Siehe auch: WordPress Plugins, SVG Grafiken, InkScape, Google Drive, GitHub

Grafiken in WordPress: SVG, PPT, ODG, VSD, SWF

Auch in WordPress-Artikeln und -Seiten möchte man ja ab und zu auch schöne Vektorgrafiken einbauen – nicht nur Pixel-Bilder.

Dabei ergeben sich mindestens zwei Fragen:

  • Grafik-Formate: Wie erstelle ich eine Grafik? Kann WordPress die Grafik darstellen?
  • Grafik-Speicherung: Wo werden die Dateien gespeichert?   (WordPress-Host, Flickr, Google, OneDrive,…?)

Für Grafiken, auch Diagramme oder Zeichnungen genannt, gibt es verschiedene Formate:

  • SVG Scalable Vector Grafics
  • PPT Microsoft PowerPoint
  • ODG Grafikformat aus LibreOffice Draw
  • VSD Microsoft Visio – konvertiert zu SVG
  • SWF Adobe Flash – veraltet
  • FLA Freehand

Bei der Speicherung der Grafiken sind je nach Format (SVG, SWF, ODG, VSD, PPT,…) unterschiedliche Lösungen möglich, wo bei schon das Upload solcher Grafiken ein Problemchen sein kann.

Graphics Format SVG

Ich kann ganz einfach SVG-Dateien erstellen, die in WordPress-Artikel eingebunden werden können.

SVG Graphics erstellen

Zum Erstellen und Bearbeiten von SVG-Grafiken benutze ich die Software:

  • InkScape
  • LibreOffice Draw

Einzelheiten dazu unter: InkScape und …

Sonderzeiche z.B. griechische Buchstaben können in Textfeldern als Unicode eingegeben werden. Dazu nimmt man die Tasten: Strg+U -> 4-stelliger Unicode -> Enter. Beispielsweise: delta = 03B4, phi = 03C6,…

SVG Graphics einbinden in WordPress per PlugIn

Eine SVG-Grafik kann einfach über im IMG-Tag in HTML eingebunden werden. In WordPress wird das wie folgt unterstützt.

Das Plugin “SVG Support” ermöglicht es, SVG-Dateien in die WordPress Media Library hochzuladen…

Wenn die SVG-Dateien dann in der Media Library stehen, kann man die “normal” d.h. wie andere Bilder auch, in WordPress-Artikel einbinden.

Die Speicherung der SVG-Dateien erfolgt in diesem Falle also innerhalb von WordPress in der WordPress Media Library d.h. beim Web-Hoster.

Abbildung 1: Beispiel einer SVG-Grafik (WordPress Media Library: Agility.svg)

SVG Upload

Source: https://wordpress.org/support/topic/svg-upload-not-allowed

SVG upload not allowed?? (9 posts)

  1. I’m trying to put an SVG image into a post, but I can’t upload it.

    “Harajuku map.svgz” has failed to upload due to an error
Sorry, this file type is not permitted for security reasons.

    What gives?! It’s just an image!

  2. You can overcome the security warning by adding this to your current themes functions.php file.

    add_filter('upload_mimes', 'custom_upload_mimes');

function custom_upload_mimes ( $existing_mimes=array() ) {

	// add the file extension to the array

	$existing_mimes['svg'] = 'mime/type';

        // call the modified list of extensions

	return $existing_mimes;

}

    Then you should be able to upload files with an .svg extension

     

SVG Graphics in Google Drive speichern

Man kann SVG-Grafiken aber auch woanders als beim WordPress-Hoster in der dortigen WordPress-Media-Library speichen, z.B. auf Google Drive.

Dateien von Google Drive kann man mit dem WordPress-Plugin “Google Drive Embedder” dann wiederum in WordPress-Posts einbinden.

SVG Graphics in GitHub speichern

Man kann SVG-Grafiken aber auch auf GitHub speichern.

Solche SVG-Dateien von GitHub kann man dann einfach in WordPress-Posts einbinden über “Add Media” und “URL”.

Graphics Format PPT

xyz

Graphics Format ODG

xyz

Graphics Format VSD

VSD-Grafiken stammen aus Microsoft Visio. Ich konnte viele Grafiken aus PPTs leicht als VSD-Grafiken kopieren und abspeichern (dank an Microsoft).

Heute konnte ich feststellen, dass LibreOffice Draw solche VSD-Dateien direkt öffnen kann. Wir können sie aus LibreOffice Draw dann Exportieren als SVG bzw. abspeichern als ODG.

Alle VSD-Dateien wurden so konvertiert. Stand 13.2.2020.

Graphics Format SWF

Dieses Format ist veraltet und wird auf meinem WordPress durch SVG ersetzt.

Plugin Method

Source: http://www.wpbeginner.com/wp-tutorials/how-to-embed-swf-in-wordpress-posts/

First, you need to download and install Easy Flash Embed Plugin for WordPress. This plugin is so simple that no settings are even added to your admin menu. All you have to do is used a shortcode when you are creating your posts like this:

1 [swf src="http://www.example.com/my-flash-file.swf" width=300 height=100]

Simply replace the src attribute with a link to your flash file and adjust height and width accordingly.

Download Easy Flash Embed plugin.

[swf src=”/wp-content/uploads/2016/08/Agility.swf” width=300 height=300]

Agility

Code Method

For those of you who would like more control over your code we are now going to show you how to embed flash files directly into your WordPress posts, pages, or even themes. Although people have come up with numerous methods for doing this over the years the easiest and most standards compliant way is to use the <object> element.

The final code looks like this:

01 <object id="flashcontent"
02         classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
03         width="550px"
04         height="400px">
05   <param name="movie" value="mymovie.swf" />
06  
07   <!--[if !IE]>-->
08   <object type="application/x-shockwave-flash"
09           data="mymovie.swf"
10           width="550px"
11           height="400px">
12   <!--<![endif]-->
13  
14     <p>
15       Fallback or 'alternate' content goes here.
16       This content will only be visible if the SWF fails to load.
17     </p>
18  
19   <!--[if !IE]>-->
20   </object>
21   <!--<![endif]-->
22  
23 </object>

Note that you are using 2 <object> elements. The outer element is targeting Internet Explorer while the inner element is for all the other browsers. You can change your fallback text if necessary. You can also add extra <param> options like wmode or allowScriptAccess.

P.S. you should always use wmode=transparent, so your embed doesn’t override existing content such as a floating bar. Check out our article on how to prevent Youtube oEmbed from overriding content.

Computer: Evolution from B2/Cafelog to WordPress 1.0

dkracht
Gehört zu: WordPress

Evolution of WordPress: B2/Cafelog to WordPress 1.0

by Keith Dsouza on July 14th, 2008 in WordPress

A few days ago we had told you what you should know about WordPress 2.6. The post described new features that will be introduced shortly in WordPress 2.6. Though there are several new features that you may like in this new version, there might be many that have gone unnoticed that were introduced in the earlier versions of WordPress. To quell the anticipation that users might have for the latest version, we wanted to write a series of posts that will cover WordPress from its infancy to WordPress 2.5 (the latest major version) that many of you use.

The WordPress team has been naming their major releases after popular Jazz legends and we will take a look at code names for the past releases. Contine reading →

Computer: WordPress Menüs – Navigation

dkracht

WordPress Menüs – Navigation

Gehört zu: WordPress
Siehe auch: Google Fotos
Benutzt: Fotos von Google Drive

Stand: 23.09.2021

Menüs zur Navigation zu WordPress-Seiten, kann man ja sehr intuitiv im WordPress-Backend unter dem Punkt “Design > Menüs” einrichten.

Zuvor muss jedes Menü aber “angemeldet” werden. Diese Anmeldung geschieht bei WordPress-Thems in der PHP-Datei “functions.php”.
Nachdem ein Menü in “functions.php” angemeldet wurde und im WordPress-Backend von seiner Struktur her definiert wurde, muss man als dritten Schritt noch für die Ausgabe des Menüs sorgen.

WordPress-Menü anmelden in “functions.php”

 
Die Anmeldung der Menüs erfolgt mit der PHP-Funktion “register_nav_menues()” und kann etwa wie folgt aussehen:
 
register_nav_menus( array(
             ‘primary‘ =>  ‘Erstes Menu‘ ,
             ‘secondary‘ => ‘Zweites Menu‘,
             ‘tertiary‘ => ‘Drittes Menu‘,
      ) ) ;
 
Man spricht von “slugs”  ( primary, secondary, tertiary) und “descriptions”  (Erstes Menu, Zweites Menu, Drittes Menu).
Die Bezeichnungen ‘Erstes Menu’, ‘Zweites Menu’ und ‘Drittes Menu’  erscheinen dann im WordPress-Backend unten unter Menü-Einstellungen – Position im Theme.

Menü-Strukturen definieren im WordPress-Backend unter Design > Menüs

 Im WordPress-Backend werden nun Menü-Strukturen (Hierarchie von Seiten) definiert.  Die Seiten müssen zu diesem Zeitpunkt schon mal vorhanden sein – ggf. nur als Dummies mit leerem Inhalt o.ä.

Im WordPress-Backend  bekommt jede hier angelegte Menü-Struktur einen weiteren sprechenden Namen, der ausschließlich hier im WordPress-Backend zur Benennung und Auswahl (“Wähle ein Menü zum Bearbeiten:…” – richtiger Weise “Wähle eine Menü-Struktur….”) benutzt wird. Ich kann hier beliebig viele Menü-Strukturen definieren. Muss dann aber letztlich jedem angemeldeten Menü (s.o.) eine Menü-Struktur zuordnen. Dazu wird bei einer Menü-Struktur unten im WordPress-Backend unter Menü-Einstellungen – Position im Theme eine “Description” ( ‘Erstes Menu’, ‘Zweites Menu’ und ‘Drittes Menu’ ) angehakt.

Abbildung 1: WordPress Backend Menues (Google Drive: WordPress-Backend-Menuestruktur.jpg)

WordPress backend Menue-Struktur

WordPress-Menü Ausgeben auf die Web-Seite

 Für die Ausgabe eines Menüs ist die Position (Ort)  auf der Web-Seite und die Gestaltung des Menüs (Farben, Schrift, Kästchengröße, Verhalten bei Klick, Hover etc.) anzugeben.
Typischweise ist der Ort eines Menüs im Header-Bereich – kann aber auch an anderen Stellen plaziert werden.
Die Ausgebe-Befehle (z.B. in der PHP-Datei “header.php”) erfolgt mit der PHP-Funktion “wp_nav_menu()” und kann etwa wie folgt aussehen:
   <?php
                      wp_nav_menu( array(
                          ‘theme_location‘     => ‘primary‘,
                          ‘depth‘              => 2,
                          ‘container‘          => ‘ div‘,
                          ‘container_class‘    => ‘collapse navbar-collapse navbar-ex1-collapse‘,
                          ‘menu_class‘         => ‘ nav navbar-nav‘,
                          ‘fallback_cb‘        => ‘wp_bootstrap_navwalker::fallback‘,
                          ‘walker‘             => new wp_bootstrap_navwalker())
                      ) ;
        ?>
Man sieht, dass hier die Menüs mit ihrem “slug” (also ‘ primary’, ‘ secondary’ etc.),  so wie bei der Anmeldung vergeben, identifiziert werden.
Die Gestaltung (Aussehen) des Menüs erfolgt dann durch die diversen CSS-Klassen ( z.B. “nav”, navbar-nav”) und das  “Walker-Objekt”…..

Computer: WordPress: Google Maps Plugin

dkracht

Gehört zu: WordPress
Siehe auch: Google Maps, WordPress Plugins, Autobahn-Parkplätze
Benutzt: WordPress-Plugin  “WP Go Maps”

Stand: 18.06.2023

WordPress Plugin für Google Maps

Das Einbetten von kleinen Landkarten aus Google Maps in eine WordPress-Seite bzw. einen WordPress-Betrag sollte mit einem “schönen” Plugin möglich sein.

Allerdings sind dabei folgende “Kleinigkeiten” erforderlich:

  • Installation des WP-Plugins
  • Ein Google Maps API-Key
  • Dazu muss man eine Keditkarte eingeben – es gibt einen kostenlosen Test
  • Anlegen von IDs je Google-Maps-Karte

Die Google-Maps-Karten werden nicht im WordPress-Editor angezeigt, sondern nur im “View Post”.

Beispiel: Hahnenkoppel