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.

---

Das Plug-in Ditty erfordert keine ausführliche Beschreibung. Es bietet eine unkomplizierte Lösung für Ticker mit vielfältigem Inhalt, von einfachen Laufschriften über sanfte Übergänge bis hin zu verschiedenen Anzeige-Modi und präzisen Positionierung. Diese Notiz ergänzt die Sammlung um Hinweise zu Ditty und beleuchtet zudem kurz alternative Animationsmethoden mit CSS und weiteren Optionen.

Ditty – Responsive News Tickers, Sliders, and Lists

Ditty / vormals Ditty News Ticker

Es ist gewisse Zeit zum Einarbeiten erforderlich – sozusagen "zum Arrangement ist da und dort zu arrangieren". Damit komme ich schon zum Ende der Durchsage!

Kleines Beispiel wie das CSS hier so ist für den Lesemodus:

.readermode #mtphr-dnt-123 .mtphr-dnt-tick-container .mtphr-dnt-tick-contents,
.readermode #mtphr-dnt-456 .mtphr-dnt-tick-container .mtphr-dnt-tick-contents,
.readermode #mtphr-dnt-789 .mtphr-dnt-tick-container .mtphr-dnt-tick-contents,
.readermode #mtphr-dnt-987 .mtphr-dnt-tick-container .mtphr-dnt-tick-contents,
.readermode #mtphr-dnt-654 .mtphr-dnt-tick-container .mtphr-dnt-tick-contents {
    margin: 0 auto;
    overflow: hidden;
}

#mtphr-dnt-123,
#mtphr-dnt-456,
#mtphr-dnt-789,
#mtphr-dnt-987 {
    max-width: 503px;
    margin: 0 auto;
    overflow: hidden;
}

Updates Ditty News Ticker 3.0.

Das Plug-in hat eine Größe von <1 MB in der Version 2.3.14 und 4 MB in der aktualisierten Version 3.0. Mit diesem Update geht eine Modernisierung einher, die sich positiv auf die Benutzerfreundlichkeit auswirkt und das Arbeiten mit dem Plug-in noch einfacher machen sollte. Ansichtssache, aber mit dem neuen Namen "Ditty" gibt es auch das Vermächtnis namens "Ditty Legacy-Version: Einfach. Leicht. Effektiv".

Legacy-Version: Einfach. Leicht. Effektiv

Es gibt eine gute Möglichkeit, über die Einstellungen → Ditty Settings › Advanced das Enable Ditty News Ticker (Legacy Code) zu aktivieren.

Dadurch kann man auf das altbewährte Ditty News Ticker zugreifen, die nun sogenannte Ditty Legacy-Version 😉 So können bestehende Ticks bearbeitet und neue erstellt werden.

Dort ist auch das Deaktivieren der mit Ditty mitgelieferten Font Awesome Icons möglich.

Rollback im Test

• Plug-in WP Rollback

Beim Test mit Version 3.0.10 und dem Versuch, auf Version 3.0.9 zurückzusetzen, wurde ein Fehler festgestellt. Das Rollback war nicht möglich und beim erneuten Update wurde angezeigt, dass das Plug-in nicht existiert. Daher musste der Plug-in-Ordner gelöscht und das Plug-in erneut installiert werden.

Beim Test mit Ditty wurde das Rollback zur Version 3.0 erfolgreich durchgeführt (Größe: 4 MB). Allerdings trat bei dem Versuch, von Version 3.0 auf Version 2.3.14 (<1 MB) zurückzusetzen, derselbe Fehler auf wie oben. Wieder musste der Plug-in-Ordner gelöscht und das Plug-in erneut installiert werden.

Dies könnte man anhand des folgenden Titels besser nachvollziehen.

Version in WordPress-Plug-ins: Die semantische Versionierung

Die semantische Versionierung bietet eine klare Struktur, um Änderungen in Softwareprojekten nachvollziehbar zu machen. Durch die Aufteilung in MAJOR, MINOR und PATCH können Entwickler sicherstellen, ... weiterlesen

WP Wegerl.atLink copie

Rollback neuesten Version zur Version 2.3.14

Der neuesten Version 3.0.10 (4 MB) und Rollback zur Version 2.3.14 (<1 MB) funktioniert. – ein Liedchen.

In puncto Sicherheit ist dabei zu beachten, dass ältere Versionen möglicherweise bekannte Sicherheitslücken enthalten, die in neueren Versionen bereits behoben sind. Die Nutzung der veralteten Version sollte daher gut abgewogen werden.

Fazit

Zusammenfassend lässt sich sagen, dass die Performance der neuesten Version von „Ditty“ trotz des Größenunterschieds im Verzeichnis ebenso gut ist. Der Größenunterschied dürfte darauf zurückzuführen sein, dass die Pro-Version stärker forciert wird.

Ditty und die Tastaturnavigation

Es kann von Vorteil sein, Ticker von der Tastaturnavigation auszuschließen. Bei Tickern, die Bilder enthalten, ist es beispielsweise vorgekommen, dass diese bei Fokussierung plötzlich verschwinden oder das Navigieren allgemein beeinträchtigt wird. Um solche Probleme zu vermeiden, haben wir mit folgendem JavaScript-Code die Ticker vom tabindex ausgeschlossen. Dadurch werden sie bei der Navigation mit der Tabulatortaste übersprungen.

Dieses Script stellt sicher, dass alle relevanten Ticker-Elemente und deren Inhalte für Benutzer, die eine Tastaturnavigation nutzen, nicht fokussierbar sind. Dadurch bleibt die Navigation flüssig und ohne unerwünschte Unterbrechungen.

• Das Script steht im Zusammenhang Tastaturnavigation: Fokussierung und Interaktion mit JavaScript

/* --- Ditty vom Tabindex ausschließen --- */

document.addEventListener('DOMContentLoaded', function() {
    function excludeTickersFromFocus() {
        // Selektiere alle relevanten Ticker-Elemente
        const tickerElements = document.querySelectorAll('.mtphr-dnt-tick, .mtphr-dnt-control');

        tickerElements.forEach(function(tickerElement) {
            // Setze tabindex auf -1 für alle Ticker und fokussierbaren Elemente darin
            tickerElement.setAttribute('tabindex', '-1');

            // Entferne die Fokussierbarkeit von <a> und anderen fokussierbaren Elementen
            const focusableElements = tickerElement.querySelectorAll('a, button, input, [tabindex]');
            focusableElements.forEach(function(el) {
                el.setAttribute('tabindex', '-1');
                el.setAttribute('aria-hidden', 'true');
                el.style.pointerEvents = 'none';
            });
        });
    }

    // Erste Anwendung beim Laden der Seite
    excludeTickersFromFocus();

    // Überwache Änderungen im DOM, um sicherzustellen, dass neue Ticker-Elemente ebenfalls behandelt werden
    const observer = new MutationObserver(excludeTickersFromFocus);
    observer.observe(document.body, { childList: true, subtree: true });
});

/* -Ende Ditty vom Tabindex ausschließen - */

Laufschriften und Animationen

Eine Laufschrift direkt im Browser zu erstellen, wie z. B. mit dem <marquee>-Tag (<marquee>Text Text Text</marquee>), ist nicht mehr zeitgemäß und wird von WordPress beim Umschalten auf den visuellen Editor automatisch entfernt. Diese Korrektur wird in den Einstellungen unter Einstellungen > Schreiben gesteuert (Häkchen bei „WordPress soll falsch verschachteltes XHTML automatisch korrigieren“).

• Das Plug-in Ditty bietet hingegen eine einfache Möglichkeit zur Erstellung durchgehender Laufschriften. Die Funktionalität ist standardmäßig integriert und ermöglicht anspruchsvollere Effekte. – Anmerkung: Eine durchgehende Laufschrift, die ohne Unterbrechung und ohne den Neustart eines Textblocks in einer Endlosschleife läuft, lässt sich nicht einfach nachbilden – auch unsere ambitionierten Versuche mit ChatGPT waren erfolglos.

Alternativ können Animationen mit CSS erstellt werden, indem bestimmte Eigenschaften von Elementen wie Bildern, Boxen oder Text dynamisch verändert werden. Die Umsetzung einer durchgehenden Laufschrift allein mit CSS-Animation ist jedoch komplizierter und weniger komfortabel als die vorgefertigte Lösung in Ditty.

• CSS/Tutorials/Animation/Animation

Somit sind wir am Ende des Beitrags

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 August