Archiv für den Monat: Januar 2024

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.