Ihr bewährter Begleiter.
(Bilder von pixelcreatures)
Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.
Mehr Funktionen, mehr Möglichkeiten.
= Ihr Erfolgsrezept
Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.
Der Classic-Editor für alle.
Erleben Sie es.
Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.
Der Advanced Editor für kreative Köpfe.
Advanced Editor Tools
Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.
Das Plug-in Ditty bedarf keiner weiteren Beschreibung. An dieser Stelle möchte ich lediglich meine Sammlung von Notizen und Anmerkungen ergänzen.
Inhaltsverzeichnis
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!
Ditty News Ticker (Free)
– mit Add-ons zum Pro.
Es ist ein Plug-in, das sich nicht von selbst erklärt
– dafür die Features keine Wünsche offen lässt.
Ditty – Unbegrenzte Möglichkeiten und Freiheit
beim Arrangieren mit umfangreichen Features!
Ein großes Dankeschön dem Autor des beherzten Plug-in!
Es ist klasse, sehr performant und gut gewartet.
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.
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.
Fazit
Zusammenfassend lässt sich sagen, dass die Performance der neuesten Version des "Ditty" trotz des Größenunterschieds im Verzeichnis genauso gut oder sogar besser ist.
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 - */
Danke an ChatGPT
Der Beitrag wurde mit fachlicher Unterstützung erstellt.
Aktualisiert im Jahr 2024 August
