Archiv der Kategorie: wordpress

beschreibung……

Eigene Farbpalette für die Webseite

Im Normalfall sind die Farben einer Webseite auf das CD einer Unternehmung abgestimmt. Es ist wünschenswert, dass die Redaktoren einer Seite auch auf der Webseite diese Farben verwenden und nicht einfach wildwuchsmässig Farben nach Wunsch verwenden.

Deshalb macht es Sinn, eine eigene Farbpalette zu definieren.

Dies geschieht in der functions.php:

function mycolors() {
add_theme_support( 'editor-color-palette', array( 
array( 
'name' => __( 'hellblau', 'mycolors' ), 
'slug' => 'hellblau', 
'color' => '#77a5e8', 
),
array( 
'name' => __( 'bghellblau', 'mycolors' ), 
'slug' => 'bghellblau', 
'color' => '#e8f2ff', 
),	
array(
'name' => __( 'gruen', 'mycolors' ), 
'slug' => 'gruen', 
'color' => '#828207', 
), 
array( 
'name' => __( 'orange', 'mycolors' ), 
'slug' => 'orange', 
'color' => '#ff9933', 
), 
array( 
'name' => __( 'Text-Farbe', 'mycolors' ), 
'slug' => 'textcolor', 
'color' => '#555555', 
), 
array( 
'name' => __( 'weiss', 'v' ),
'slug' => 'weiss',
'color' => '#ffffff',
),
array(
'name' => __( 'schwarz', 'mycolors' ),
'slug' => 'schwarz',
'color' => '#000000',
),
) );
}
add_action( 'after_setup_theme', 'mycolors', 20 );

…und führt zum Ergebnis im Block-Editor (Backend):

Meow Gallery mit Lightbox (easy FancyBox)

Ich verwende gerne das Plugin Meow Gallery. Es kann ein bisschen mehr als die Standard-Galerie von WordPress.

Hier ein Beispiele mit der „tile“-Darstellung

Als Lightbox-Plugin verwende ich schon lange das easy FancyBox-Plugin. Das passt.

Leider passt es seit der Version 5.x von Meow Gallery nicht mehr. Die Lightbox wird nicht mehr angezeigt. Meow und FancyBox wollen nicht mehr funktionieren zusammen

Lösung-1:
Verwenden des Meow-Lightbox-Plugins. Für mich nicht die Lösung, da das Erscheinungsbild sehr abweichend ist von demjenigen des Easy FancyBox Plugins.

Lösung-2:
Verwenden des Simple Lightbox Plugins. Mit nur wenig CSS kann das Aussehen sehr ähnlich gemacht werden , wie es beim Vorgänger-Plugin Easy FancyBox war.

Um das Aussehen der Simple Lightbox zu style kann folgendes CSS verwendet (und falls gewünscht angepasst) werden:

.slb_container 	{
	padding: 8px !important;
	border-radius: 0px !important; }
.slb_data_content {
	display: none}
#slb_viewer_wrap .slb_theme_slb_default .slb_content .slb_prev .slb_template_tag, 
#slb_viewer_wrap .slb_theme_slb_default .slb_content .slb_next .slb_template_tag {
	opacity: 1 !important}

#slb_viewer_wrap .slb_theme_slb_default .slb_controls .slb_slideshow .slb_template_tag {
	display: none !important}

WordPress Tabellen – TAB-Key nicht möglich

Manchmal kommt man um auch in WordPress nicht um Tabellen rum.

Wer sich in Word gewohnt ist mit TAB zur nächsten Tabellenzelle zu hüpfen wird in WordPress enttäuscht sein. Das funktioniert hier leider nicht.

Die Lösung ist aber einfach: Pfeil-Tasten (rechts, links, oben, unten) benutzen.

Gutenberg Block-Editor – bessere Sichtbarkeit der Blöcke

Der Gutenberg Block-Editor ist eine feine Sache und hat sich inzwischen fein etabliert in WordPress.

Für Gelegenheitsbenutzer (ich meine die Benützung im Backend) ist die Anwendung aber oftmals ein wenig schwierig, da die Blöcke oftmals schwierig zu erkennen sind. Selbst ein Klicken auf eine Stelle der Seite gibt oft nicht klar Auskunft über die Begrenzung des Blockes.

Ja – ESC-Taste – , aber der Gelegenheitsbenutzer findet das nicht so toll!

Um die Sichtbarkeit der Blöcke zu verbessern braucht es nur wenig. Mit unterstehenden Anweisung kann ziemlich einfach erreicht werden, dass

  • der Block bei Hover durch einen feinen Hintergrund sichtbar wird
  • dass der aktive (also angeklickte) Block einen blauen Rahmen erhält.

Das sieht dann beim Hovern z.B. so aus:

hover über einen Absatz

Folgendes ist vorzukehren (ich gehe davon aus, dass mit Child-Theme gearbeitet wird) – wie immer ohne Gewähr:

In functions.php:

/* backend-editor-Styling -> damit es im Backend ein wenig ähnlich aussieht, wie im Forntend */
add_editor_style( '../publication_child/editor-styles.css' );

function legit_block_editor_styles() {
    wp_enqueue_style('legit-editor-styles', get_theme_file_uri( '/editor-styles.css' ), false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'legit_block_editor_styles' );

Die Datei editor-styles.css (darf auch anders heissen, muss dann aber in der functions.php angepasst werden) enthält das Styling, das natürlich auch anpassbar ist:

/* editor-styles.css */

/* Blöcke bei hover dezent anzeigen, bei focus kräftiger */

.editor-styles-wrapper .wp-block-table td, 
.editor-styles-wrapper .wp-block-table th {border: 1px solid #d3d3d3}

.editor-styles-wrapper .wp-block       {border: 1px solid white}
.editor-styles-wrapper .wp-block:hover {border: 1px solid #d3d3d3; background-color: rgba(240, 240, 240, 0.31)}
.editor-styles-wrapper .wp-block:focus {border: 1px solid #0073aa; background-color: white}

Und das ist schon alles. Schon einigen Kunden hat das das Leben sehr vereinfacht.

php-Schnipsel (shortcodes)

Es gibt manchmal Anforderungen, die nur via php-Schnipsel erreicht werden können. Diese sind in functions.php (in Child-Theme!) einzufügen und manchmal braucht es auch noch ein paar css-Anweisungen.

Hier ein paar Beispiele im Bereich der Shortcodes: 

In der Fusszeile wird oft ein Copyright-Hinweis angezeigt mit einer Jahrzahl, also so:

©2024 woodesign

Das wird so erreicht:

Weiterlesen →

WordPress-Galerie-Block: ein paar Tücken und Tricks

Der Block „Galerie“ von WordPress bietet eine einfache Möglichkeit eine Fotogalerie zu erstellen.

Zuschneiden

Zum Beispiel Galerie-1:

Wir sehen hier 4 Bilder in der gleichen Grösse und vor allem in gleichem Seitenverhältnis, obwohl sie es überhaupt nicht sind? Dem kann Abhilfe geholfen werden, in dem beim Galerie-Block „zuschneiden“ deaktiviert wird.

Dann sieht es so aus.

Galerie-2:

nicht grad ansprechend, oder? Dann doch lieber zugeschnitten. Aber WordPress schneidet grad mal so zu, wie es das selber will. Ich stelle fest, dass es immer auf das Hochformat im „Beispiel“Galerie-1“ zuschneidet. Das macht aber nicht immer Sinn.

Ich möchte das gerne „quadratisch“ haben, aber WordPress stellt mir dazu keine MIttel zur Verfügung. Also: Selbst ist der Woodesigner:

  1. Der Galerie eine erweiterte Klasse zuweisen, zb. „q-galerie„
  2. Custom-CSS:
    .is-cropped.q-galerie .wp-block-image img {aspect-ratio: 1 / 1}
    (es sind natürlich andere Seitenverhältnisse möglich)
  3. Zuschneiden muss für die Galerie eingeschaltet sein

Galerie-3:

Leider sieht man des Ergebnis im Backend noch nicht, aber im Frontend kommt’s dann richtig.

Obiges Beispiel mach vor allem dann Sinn, wenn es sich um anklickbare Bilder (mit Link zur Mediendatei) handelt, welche dann in voller Grösse gezeigt werden. Also so:

Galerie-4:

Letzte Reihe nicht voll

Eine leidige Geschichte. Eine 3-Spaltige Galerie mit 4 oder 5 Bildern… Sieht so aus:

Galerie-5:

Ich möchte aber nicht, dass in der letzten Reihe die vorhandenen Bilder einfach gestreckt werden, wenn die Reihe nicht voll ist. Aber wie krieg ich das hin?

so:
Dem Galerie-Block die erweiterte CSS-Klasse „q-galerie-ungerade“ geben und:
Custom-CSS: 

.wp-block-gallery.has-nested-images.q-galerie-ungerade  figure.wp-block-image {
  flex-grow: 0; /* width fix */ 
}

Soll auf allen auf der Webseite verwendeten WordPress Galerien (also nicht von Plugins) dieses System wirken:

.wp-block-gallery.has-nested-images figure.wp-block-image img {
  aspect-ratio: 1; /* squared size thumbnails */ 
}
.wp-block-gallery.has-nested-images figure.wp-block-image {
  flex-grow: 0; /* width fix */ 
}

Abenteuer bei PHP upgrade 7 -> 8

Der Live-Cycle von PHP 7, dem WordPress-Motor, geht zu Ende. Der Support wird eingestellt. Es ist also Zeit die Webseite(n) auf Vordermann zu bringen, das heisst auf der Plattform des Providers die bereits als „veraltet“ gekennzeichnete PHP-Version anzuheben. Zum Beispiel von 7.3.44 nach 8.1.

Gerade bei älteren Seiten kann dies aber zu Überraschungen führen. Denn da schlummert in manchen php-Dateien alter Code, welcher bis PHP 7 vielleicht erkannt, aber ignoriert wurde, aber ab PHP 8 zu Warnungen oder Fatal Errors führen kann.

Im schlimmsten Fall kann es sein, dass nicht mal mehr die Login-Seite erreichbar ist.

Typische Probleme bei der Updaterei, die mit begegnet sind:


wp-config:

Doppelte Einträge (woher zum Teufel kamen die?) -> z.B.: Warning: Constant ABSPATH already defined in….. Da gilt es rauszufinden, welches der Duplicate zu eliminieren ist. Dieser Fehler kann zu vielen Folgefehlern führen.
(vor der Manipulation in wp-config.php via FTP und Text-Editor unbedingt dies Datei lokal sicherstellen.)

WordPress-Pfad:
define( ‚ABSPATH‘, DIR . ‚/‘ );
bessser:
/** Absolute path to the WordPress directory. */
if ( ! defined( ‚ABSPATH‘ ) ) {
define( ‚ABSPATH‘, DIR . ‚/‘ );
}

Anführungszeichen:
besser ’so‘ als „so“.

Plugin-Fehler / Theme-Fehler:

Vielleicht sind noch ältere Plugins oder Themes im Einsatz, welche Code drin haben, der von PHP 7 noch toleriert wurde, aber jetzt unter PHP 8 zu Fehlern führen.
(Auch in Übersetzungs-Dateien kann es Störenfriede haben)

Gut möglich, dass man sich von alten Plugins verabschieden muss und für diese einen Ersatz finden muss.

Caching-Probleme:

Es kann sein, dass eigentlich alles gut wäre…. Aber wegen Caching hat es noch alte Elemente im Cache, die stören.

Für die Anhebung der PHP-Version kann folgendes Vorgehen sinnvoll sein:

  1. Backup – ist ja klar
  2. Updates aller Komponenten in WordPress (wordpress selber, Themes, Plugins, Übersetzungen.) Evt. kann es hilfreich sein, von jeder Komponente die Version „vorher“ und „nachher“ sich zu notieren.
    Keinen PHP-Update durchführen, wenn irgend eine Komponente nicht auf aktuellem Stande ist.
  3. Backup
  4. Falls vorhanden: Caching-Plugins deaktivieren
  5. Anheben der PHP-Version auf der Plattform des Providers.
  6. wenn alles gut ist- Frontend und Backend funktionieren, ohne Fehlermeldungen – Cache-Plugin aktivieren, falls eines deaktiviert wurde.
  7. Bei Problemen – diese lösen…. Vielleicht hilft einer der obigen Punkte dabei. Auch die Support-Foren von betroffenen Komponenten (zb Plugin), sofern identifizierbar, helfen manchmal weiter.

Wie immer gilt: OHNE GEWÄHR!

Time-Line selber manuell erstellen

Oft sehen wir auf WordPress-Webseiten Darstellungen von Events in Form von „Time-Lines“. Die Erstellung solcher geschieht meist mit Plugins, von denen es ganz einfache kostenfreie gibt, aber auch mit ausgeklügelten Tools, welche keine Wünsche offen lassen, aber auch ein wenig ins Geld gehen können.

Warum nicht eine „Time-Line“ selber erstellen – mit den Hausmitteln von WordPress?

Weiterlesen →

WP: Child-Theme erstellen

(Der Beitrag wurde ursprünglich im 09/2017 erstellt. Hier kommt eine überarbeitete Fassung:)

Um ein WP-Theme nach eigenen Bedürfnissen anzupassen, müssen oft einige .php-Dateien verändert werden. Das hat einen grossen Nachteil: Beim Einspielen einer neuen Version des Themes gehen diese Änderungen verloren.

Deshalb muss unbedingt ein Child-Theme des verwendeten Themes erstellt werden. Weiterlesen →

WP: https – oder unsichere Webseite?

Seit einiger Zeit – und nun vermehrt – wird das Thema «sichere Verbindung von/zu Webseite» auf den Tisch gebracht. Browser melden inzwischen – die einen offensiver, die andern defensiver – wenn sie eine Verbindung zu einer Seite als nicht sicher betrachten. Das ist vor allem dann kritisch, wenn auf einer Webseite via Formulare Daten übermittelt werden. Dann sollten diese Daten unbedingt verschlüsselt übermittelt werden. Weiterlesen →

WP: Tabellen in WordPress…

update 2020/03
Mit WordPress 5.x (Gutenberg-Editor) ist das Thema „Tabellen“ nochmals entschärft worden. Jedoch ist es immer noch nicht super-bequem mit Tabellen zu hantieren

Lange Zeit war „Tabellen in WordPress“ ein übles Thema. Deshalb haben auch findige Köpfe Lösungen gesucht. Eine davon war das Plugin TablePress, welches 1000fach eingesetzt wird und sich sehr bewährt hat.

Weiterlesen →