Archiv der Kategorie: plugins

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}

Plugin: SyntaxHighlighter evolved: Code darstellen – ist ganz einfach

Beim Dokumentieren von Code (CSS, HTML, Javascirpt, …) einfach den <code>-Tag benutzen, dann sieht es so aus:

.header { border: 0px; }

Geht das aber über mehrere Zeilen, ist es nicht mehr so schön. Als Inline-Element ist es auch nicht dafür gedacht.

oder vielleicht den <pre>-tag? dann kommt es so:

.header { border: 0px; }

Damit die Syntax schön dargestellt wird braucht es ein plugin; ich benütze das Plugin SyntaxHighlighter evolved.

Das Plugin erzeugt auch bei mehrzeiligem Code einen guten Output:

body .site {
  	/*color: #146666;*/
  	background-color: #f8f8f8;
}
.woodesign { 
  color: #1c9135;
  font-weight: bold;
}
img.header-image {
  border: none;
  box-shadow: none;
}

Plugin: Email Encoder – Protect Email Addresses

Seit Dezember 2022 stellt woodesign auf den Kundenseiten das eMail-Encoding um auf das Plugin Email Encoder – Protect Email Addresses von Ironikus.

Es hat gegenüber dem Plugin von Till Krüss den Vorteil, dass es die ganze Seite untersucht, nicht nur gewisse Bereiche. Es verwendet eine andere Technik, bei der die Mail per Script ausgelöst wird.

Details zum Plugin

Plugin-Konflikt bei cookies notice vs. popupmaker

Die folgenden zwei Plugins werden sehr oft auf Webseiten angewendet, und dies auch gleichzeitig.

Cookie Notice & Compliance for GDPR / CCPA
Popup Maker – Popup for opt-ins, lead gen, & more

Leider konkurrieren sich die zwei Plugins in gewissen Situationen; nämlich dann, wenn sie beide aufgrund ihrer Cookie-Situation gleichzeitig ausgeführt werden.

Was passiert?

Der Cookies-Balken um unteren Rand erscheint. Popup schafft es nicht, sich in den Vordergund zu stellen, aber setzt sein Cookie mit Ablaufdatum. Und bis zu diesem Ablaufdatum bekommen wir das Popup nie zu Gesicht.
Die ganze Geschichte ist etwas undurchsichtig. Es scheint, dass auf apple-Geräten (also Macs) und auf Safari der Konflikt weniger oft passiert, als auf Microsoft-Geräten (Edge, Firefox).

Lösung

Im Popup-Plugin so einstellen, dass das popup verzögert dargestellt wird, zb 5000ms (5 Sekunden).

und wie immer – ohne Gewähr

Schlecht sichtbare verschachtelte Blöcke im Gutenberg-Eidtor

Bei der Anwendung des Gutenberg-Editors seit WP 5 zeigt sich immer wieder, dass die Block-Struktur sehr schlecht sichtbar ist. Wo andere Blockeditoren (Divi, Elementor, etc.) farbige Rahmen um die Blöcke stellen, um die Verschachtelung sichtbar zu machen, tappt man  beim Gutenberg im Dunkeln. Beim Anklicken eines Blocks erscheint zwar ganz unten eine „Situations-Info“; oder man lässt sich die Struktur mittels der Schaltfläche Block-Navigation (oben links) einblenden.

Aber so ganz befriedigend ist das nicht.

Weiterlesen →

Plugin: Inhalte als/mit Tab / Register anzeigen

Für die Darstellung von Inhalten in verschiedenen Tabs gibt es diverse Plugins.
Mit dem Plugin „Tabby Responsive Tabs“ von cubcolour kann folgendes Resultat ganz einfach erzeugt werden.

Vorspeise

Tomaten-Mozzarella-Salat

Hauptspeise

Steinpilz-Risotto

Dessert

Tiramisu

Ein bisschen CSS-Anpassen für Farben ging auch recht einfach.

Natürlich gibt es noch viele andere Tab-Plugins.

Plugin: Enhanced Text Widget

Mit diesem Plugin wird ermöglicht, PHP-Code in ein widget einzufügen, zb:

<?php $id = 14; 
$p = get_page($id); 
echo apply_filters('the_content', $p->post_content); ?>

In diesem Fall wird der Inhalt der Seite „Veranstaltung“ (ID 14) im Widget angezeigt.

ABER ACHTUNG: Das Widget funktioniert seit Frühling 2020 nicht mehr!

ALTERNATIVE:
In functions.php folgenden Code einfügen:

add_filter('widget_text', 'gibmirphp', 99);
function gibmirphp($text) {
  if (strpos($text, '<' . '?') !== false) {
    ob_start();
     eval('?' . '>' . $text);
     $text = ob_get_contents();
    ob_end_clean();
  }
  return $text;
}

Danach kann PHP-Code auch in einem einem gewöhnlichen Text-Widget eingegeben werden.

Zu sehen auf ladante.ch

Plugins: Font Awesome (für Icons)

update 03/2020:

Das unten beschriebene Plugin generiert einen Link im header.php, welcher etwa so aussieht:

<link rel="stylesheet" id="font-awesome-css"
href="https://use.fontawesome.com/releases/v5.12.0/css/all.css?wpfas=true" 
type="text/css" media="all" />

das heisst, dass jeder Besucher der Webseite seinen Besuch auf der jeweiligen Website dem fontawesome-Server bekannt gibt. Dies sollte eigentlich vermieden werden (oder zumindest im Impressum/Datenschutzrichtlinien) bekannt gegeben werden.)

Umgehung (empfohlen!):

Fontawesome lokal laden und verwenden. Ein guter Artikel ist hier:
fastwp.de/magazin/font-awesome-lokal-einbinden/

(so gemacht z.B. in rost-artig.ch)

Auch das noch…:

Auch wenn die Fontawesome-Schrift lokal geladen wird, um das Fontawesome-Plugin zu umgehen, kann es sein, dass trotzdem eine externe Verlinkung zu einem Fontawesome-Server ersichtlich ist (im Quelltext). Dies passiert genau dann, wenn dies in einem auf der Webseite verwendeten Plugin (z.B. Scroll Back to Top) so vorgesehen ist. (Ich finde das nicht wirklich optimal… )

Wer das Plugin trotzdem verwenden möchte:

Mit diesem Plugin können kleine Icons, wie zum Beispiel ein Mail-Symbol oder Facebook einfach als Schrift eingeblendet werden und wie eine Schrift gestyled (Farbe, Grösse, …) werden.

Es gibt verschieden Plugins dazu. Eines das nun nicht mehr weiter entwickelt wird ist „Font Awesome“ von Font Awesome. Details zum ansehen.

Beispiel:

aus <i class="fa fa-envelope"></i> wird
oder: aus <i class="fab fa-facebook-square"></i> wird

Plugin: Meta Slider

Für automatisch ablaufende Dia-Shows benutze ich gerne das Plugin Meta Slider.

Details zum Plugin ansehen

zum Beispiel: „kunterbunte Top-10 aus Hofdere, der Schweiz und ein wenig Afrika“

 

ACHTUNG: Wenn auch Plugin easy fancy box im Einsatz ist, braucht es zudem noch das Plugin Meta Slider Lightbox