Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

Ein Related Posts Plug-in ist sehr gut, um dem Besucher so Beiträge, die sich ähnlich sind, zu unterbreiten. Nun, nach Vergleichen mit anderen Plug-ins der Kategorie ist hier das Plug-in 'Contextual Related Posts', das mal nur 740 KB (hatte). Das Plug-in hat gute Bewertungen und ist schlicht gehalten. – aber "oho" im Frontend.

Contextual Related Posts

Einstellung Contextual Related Posts

Die Einstellungen sind zwar oho und das sei jedem das Seine. Also biss Zeit ist da schon, sich zu widmen.

Folgendes ist so Beispiel von Tab Thumbnail und Tab Stiles so wie hier der Website ist.

Tab Thumbnail

Tab Stiles

• Related Posts style: Masonry
• Custom CSS:

  /* Related Posts Überschrift Abstand */ .crp_related h3 {padding-bottom: 10px;}

Masonry Stil und Safari

Der Masonry-Stil weist in Safari Probleme auf, da die beiden oberen rechten Elemente beim Hover blinken oder die transform-Eigenschaft beim Mouseover kurz zurückspringt. Der Fehler betrifft das folgende CSS:

.crp_related.crp-masonry ul li:hover {
	box-shadow: 0px 5px 20px 3px rgba(0, 0, 0, 0.1) !important;
	transition: all .2s;
	transform: scale(1.03);
}

Infolge durch die Verwendung von Grid Layout wurde das Problem gelöst, da dieses Layout-Format weniger anfällig für Rendering-Probleme ist. Das entsprechende CSS kann direkt in den Contextual Related Posts-Einstellungen (unter dem Reiter "Styles") gespeichert werden:

/* Grid Layout für Masonry-Stil */
.crp_related.crp-masonry ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Masonry ähnliches Layout */
    gap: 13px !important; /* Abstand zwischen den Grid-Elementen */
    list-style-type: none;
}

/* Für das innere Margin der einzelnen LI-Elemente */
.crp_related.crp-masonry ul li {
    background: #fff;
    padding: 3px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18);
    border-radius: 3px;
    border: 1px solid #efefef;
}

• Relevant ist das "Grid Layout für Masonry-Stil", der zweite CSS-Block ist zusätzlich für eventuelle Anpassungen.
•  Statt grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); könnte als alternativer Ansatz eine vereinfachte Grid-Struktur verwendet werden:
  • grid-template-columns: 1fr 1fr 1fr;.

Vorteile des grid-Layouts:

1. Bessere Kontrolle über das Layout: Mit grid kann das Layout viel genauer gesteuert werden, indem Spalten und Zeilen angeben sind.
2. Bessere Browser-Unterstützung: Moderne Browser, einschließlich Safari, haben eine gute Unterstützung für display: grid;.
3. Responsive Design: Mit Grid lässt sich das Layout leicht an verschiedene Bildschirmgrößen anpassen.
4. Stabilität: Im Vergleich zu Masonry bietet Grid eine robustere und stabilere Lösung für die Anzeige von Elementen in einem rasterartigen Layout.

Durch die Umstellung auf display: grid; wird auch das Problem mit dem Hover-Verhalten in Safari obsolet.

Der Eingabe in den Contextual Related Posts-Einstellungen (unter dem Reiter "Styles") könnte folgendes angezeigt werden:

Manchmal können CSS-Editoren in Plug-ins oder Themes Schwierigkeiten haben, moderne CSS-Syntax zu erkennen oder zu verarbeiten. Dies liegt häufig daran, dass diese Parser nicht auf dem neuesten Stand sind und bestimmte neuere Funktionen nicht unterstützen. Beispiele für solche Funktionen sind repeat() und minmax() innerhalb von Grid-Layouts.

Wenn das inakzeptabel erscheint, kann der CSS-Code direkt in die style.css-Datei des Child-Themes eingefügt werden.

Vorhergehende Versuche, bedingt funktionell

1. Das entsprechende CSS am Ende der Datei contextual-related-posts/css/masonry.min.css muss auskommentiert werden:

2. Das angepasste CSS wird nach dem Beitrag zu Browser-spezifischen Styles erstellt und direkt in den Contextual Related Posts-Einstellungen (unter dem Reiter "Styles") gespeichert.

.supported-browser .crp_related.crp-masonry ul li:hover {
	box-shadow: 0px 5px 20px 3px rgba(0, 0, 0, 0.1);
	transition: all .2s;
	transform: scale(1.03);
}

.safari-browser .crp_related.crp-masonry a:hover {
    transform: scale(1.03);
}

• Das CSS funktioniert nur im Kontext Browser-spezifischen Styles.

Der Hover-Effekt auf Listenelementen (li) führte in Safari zu Störungen und wurde daher ausgeschlossen. Stattdessen wird der Übergangseffekt nun auf Links (a) angewendet, jedoch in Safari in reduzierter Form. Obwohl dieser Effekt dort kaum merklich Probleme verursachen kann, wäre eine vollständig problemlose Lösung nur möglich, wenn man den transform-Effekt für Safari komplett ausschließt.

Browser-specific Styles dynamisch durch JavaScript

In diesem Beitrag wird gezeigt, wie browser-spezifische Stile mit JavaScript effektiv angewendet werden können. Das ist besonders nützlich, wenn sich Browser nicht allein über CSS ... weiterlesen

WP Wegerl.atLink copie

Eine mögliche Lösung könnte auch rein über JavaScript erfolgen, jedoch würde dies das Problem nicht vollständig beheben:

/* --- Safari: Contexual Related Post (Stil Masonry) richtigstellen --- */

document.addEventListener("DOMContentLoaded", function() {
    // Überprüfen, ob der Browser Safari ist
    if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
        const relatedPosts = document.querySelectorAll('.crp_related.crp-masonry ul li');
        
        relatedPosts.forEach((item) => {
            // Hover-Effekte für Safari direkt entfernen
            item.style.boxShadow = 'none';
            item.style.transition = 'none';
            
            // Optional: Ein Event Listener hinzufügen, um die Box-Schatten bei Hover zu verhindern
            item.addEventListener('mouseenter', () => {
                item.style.boxShadow = 'none';
            });
        });
    }
});

/* - Safari: Contexual Related Post (Stil Masonry) richtigstellen - */

Plug-in Update

Das Plug-in wurde durch das Update (Jahr 2024) der Version: 3.4.2 von 740 KB zur Version 3.5.0 auf 3,7 MB aktualisiert. – soweit ist kein Unterschied und das Update wird sich auf die Kommerzialisierung des Plug-ins beziehen.

Nachlese:

8 Related Posts Plugins für WordPress (webtimiser.de)

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 Oktober