Custom Inline Embeds – ideale Lösung für interne Inhalte.

Illustration geralt

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

Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)

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

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

Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept

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

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

Classic Editor & Advanced Editor Tools
Erleben Sie es.

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

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

Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools

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

Die Tastaturnavigation spielt eine große Rolle für die Nutzererfahrung von Webseiten. Wir haben die 'Custom Inline Embeds' entwickelt, da wir bei der Optimierung der Navigation auf mehrere Herausforderungen stießen, insbesondere bei der Fokussierbarkeit von WP-Embeds (iframe-Elementen) und der Interaktion in Browser Safari.

Beitrag Eins

Tastaturnavigation: Fokussierung und Interaktion mit JavaScript

In diesem Beitrag erläutern wir, wie die Tastaturnavigation oder Keyboard Navigation (englisch, in technischen Kontexten oft direkt übernommen) auf einer Webseite durch JavaScript-Lösungen optimiert werden ... weiterlesen

WP Wegerl.at Link copie

Beitrag Drei

SafariEmbedToBlockquote; Tastatur mit Hervorhebung von Enter-Taste

SafariEmbed-ToBlockquote: WP-Embeds und Safari – Eine Lösung für Tastaturnavigation

Die Lösung 'SafariEmbedToBlockquote' wurde speziell für WP-Embeds in Safari entwickelt. Sie adressiert die besonderen Herausforderungen der Fokussierbarkeit, die in Safari bei der Darstellung von WP-Embeds ... weiterlesen

WP Wegerl.at Link copie

Das Folgende ist besonders dann interessant, wenn du spezifische Anpassungen oder eine benutzerfreundlichere Navigation bieten möchtest, etwa für Safari-Nutzer, bei denen WP-Embeds möglicherweise nicht optimal funktionieren.

<iframe>: Das Inline-Frame-Element: Das HTML-Element stellt einen verschachtelten Browserkontext dar, der eine andere HTML-Seite in die aktuelle einbettet.<iframe>.

Inhaltsverzeichnis

Warum Custom Inline Embeds?

Ein häufiges Problem, das wir festgestellt haben, betrifft die Fokussierbarkeit von WP Embeds. Technische Versuche, das Fokussieren durch JS, führten entweder zu keinem Ergebnis oder wurden von browserseitigen Sicherheitsmechanismen blockiert.

Jeder Browser hat seine eigene Herangehensweise an die Fokussierung und Interaktion mit Elementen. Während die meisten Browser die Tastaturnavigation unterstützen, gibt es immer wieder kleine Eigenheiten, die die Benutzererfahrung beeinflussen können. Daher ist es wichtig, beim Entwickeln von Web-Inhalten alle gängigen Browser zu berücksichtigen und zu testen, um sicherzustellen, dass die Navigation sowohl intuitiv als auch barrierefrei bleibt. Schließlich ist es nicht nur Safari, der seine Eigenheiten hat – wir alle wissen, dass jeder Browser seine eigene "Persönlichkeit" hat!

Technische Versuche, das Fokussieren durch JS, führten entweder zu keinem Ergebnis oder wurden von browserseitigen Sicherheitsmechanismen blockiert.

WP-Embeds (iframes) in Safari

Safari

Ein häufiges Problem, das wir festgestellt haben, betrifft die Fokussierbarkeit von WP Embeds (iframes) in Safari.

Bei der Verwendung der Tab-Taste bleibt der Fokus am Anfang hängen, anstatt in das Embed zu navigieren und anschließend zu den Links oder anderen interaktiven Elementen im Inhalt zu wechseln. Dies beeinträchtigt die Benutzererfahrung, da die Navigation nicht wie gewünscht funktioniert.

Beispiel WP Embed (iframes): Wenn das Element im Viewport sichtbar ist, kann es mit der Enter-Taste fokussiert werden. Das Embed wird dabei vollständig aktiviert, und durch weiteres Betätigen der TAB-Taste kann man innerhalb des Embeds navigieren.

WP-Embed:

Custom Inline Embeds – ideale Lösung für interne Inhalte

Das folgende Beispiel zeigt, wie ein Pseudo-WP-Embed oder besser gesagt Custom-Inline-Embeds funktioniert. Es ist einem WP-Embed (iframes) nachempfunden und dient als interner Hinweis.

Da es kein typisches 'iframe' ist, lässt sich das Element in Safari problemlos fokussieren. Eine ausführlichere Beschreibung zur 'Tastaturnavigation' folgt in diesem Beitrag:

"Custom Inline Embed":

Tastaturnavigation: Fokussierung und Interaktion mit JavaScript

WP Wegerl.at Link copie

Neben dem Problem der WP Embeds ist auch die Zusätzliche Logik, um den Fokus in Safari zu korrigieren zu beachten.

Hingegen können externe Embeds natürlich nicht der Form dargestellt werden und es ist für Safari eine andere Vorgehensweise implementierbar, Beitrag 3: SafariEmbed-ToBlockquote: WP-Embeds und Safari – Eine Lösung für Tastaturnavigation.

"Custom Inline Embeds" im WP-Embed-Stil

Die "Custom Inline Embeds" wurden ausschließlich für den internen Gebrauch auf der eigenen Website entwickelt. Sie ermöglichen es, eigene Embeds auch in Safari anklickbar darzustellen. Diese Lösung ersetzt nicht das reguläre WP-Embed, sondern dient als maßgeschneiderte Methode, um gezielt interne Hinweise zu erstellen, ohne auf das klassische WordPress-Embed-System zurückzugreifen.

Diese Embeds funktionieren nur innerhalb des eigenen Webauftritts und sind nicht dafür gedacht, Inhalte von externen Quellen einzubetten. Ihr Hauptzweck ist es, eine einfache und barrierefreie Darstellung interner Verweise zu ermöglichen, die sich in die spezifischen Anforderungen der Tastaturnavigation und Browserkompatibilität einfügen.

Wenn du dann eigene interne Embeds entwickelst, die leichter fokussiert und gesteuert werden können, hast du definitiv mehr Kontrolle über die Performance und Funktionalität, gerade im Vergleich zu den standardmäßigen WP-Embeds. Das ist besonders dann interessant, wenn du spezifische Anpassungen oder eine benutzerfreundlichere Navigation möchtest, etwa für Safari-Nutzer, bei denen WP-Embeds möglicherweise nicht optimal funktionieren.

/* --- Custom Inline Embeds --- */

function custom_interne_link($post_id) {
    $post = get_post($post_id); // Beitrag oder Seite abrufen

    if (!$post) {
        return ''; // Rückgabe, wenn der Beitrag nicht gefunden wird
    }

    $thumbnail = get_the_post_thumbnail($post_id, 'thumbnail'); // Titelbild abrufen
    $excerpt = wp_trim_words($post->post_excerpt ? $post->post_excerpt : $post->post_content, 25, ' ...'); // Textauszug abrufen
    $site_icon = get_site_icon_url(); // Site-Icon abrufen
    $site_title = get_bloginfo('name'); // Website-Titel abrufen

    // HTML-Ausgabe erstellen
    $output = '<div class="custom-interne-link">';

    // Bild ohne Link
    if ($thumbnail) {
        $output .= '<span class="custom-link thumbnail-link">';
        $output .= '<div class="thumbnail">' . $thumbnail . '</div>'; // Titelbild hinzufügen
        $output .= '</span>';
    }

    // Überschrift mit Link
    $output .= '<div class="content">';
    $output .= '<a href="' . get_permalink($post_id) . '" class="custom-link">';
    $output .= '<span class="custom-title">' . apply_filters('the_title', $post->post_title) . '</span>';
    $output .= '</a>';

    // Textauszug
    $output .= '<p class="custom-excerpt">' . esc_html($excerpt) . ' <a class="read-more-link custom-link" href="' . get_permalink($post_id) . '">weiterlesen</a></p>';
    $output .= '</div>'; // Content-Container schließen

    // Site-Icon und Titel zusammenfassen in einem Link
    if ($site_icon || $site_title) {
        $output .= '<a href="https://wegerl.at/" class="custom-link site-info-link">';
        if ($site_icon) {
            $output .= '<img src="' . esc_url($site_icon) . '" alt="Site Icon" class="custom-site-icon">';
        }
        if ($site_title) {
            $output .= '<span class="custom-site-title">' . esc_html($site_title) . '</span>';
        }
        $output .= '</a>';
    }

    // Link-Button mit Genericon
    $output .= '<a href="#" class="custom-link copy-link" data-link="' . get_permalink($post_id) . '">';
    $output .= '<span class="genericon genericon-link"></span>Link kopieren';
    $output .= '</a>';

    $output .= '</div>'; // Container für das gesamte Element schließen

    return $output; // Rückgabe der HTML-Ausgabe
}

// Shortcode erstellen, Beispiel Shortcode [ interne_link id="123" ]
function custom_interne_link_shortcode($atts) {
    $atts = shortcode_atts(array(
        'id' => '', // ID des Beitrags
    ), $atts);

    return custom_interne_link($atts['id']);
}
add_shortcode('interne_link', 'custom_interne_link_shortcode');

/* - Ende Custom Inline Embeds - */

Um den internen Link in einem Beitrag oder einer Seite darzustellen, füge einfach den Shortcode wie folgt ein:

[interne_link id="123"]

Ersetze 123 durch die ID des Beitrags, den du verlinken möchtest.

Weiter ist ein kleines Script zu implementieren, um den "Link kopieren" Button funktionell zu machen:

/* --- Inline Embed Link kopieren --- */

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.copy-link').forEach(function(button) {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const link = this.getAttribute('data-link');
            navigator.clipboard.writeText(link).then(function() {
                alert('Link wurde kopiert!');
            }, function(err) {
                console.error('Fehler beim Kopieren des Links: ', err);
            });
        });
    });
});

/* - Ende Inline Embed Link kopieren - */

Folgend unser vollständiger CSS-Vorschlag, um das Layout entsprechend zu gestalten. Der CSS-Code gewährleistet, dass das Bild oben angezeigt wird, gefolgt von der Überschrift, dem Textauszug mit dem "… weiterlesen"-Link, dem Website-Icon links unten und schließlich den Kopie-Link:

/* --- Custom inline Embeds --- */

.custom-interne-link {
    margin: 25px 0;
    transition: box-shadow 0.3s;
    padding: 25px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    overflow: auto;
    max-width: 100%;
}

@media all and (min-width: 1100px) {
    .custom-interne-link {
        max-width: 400px;
        width: 100%;
        margin-left: 5.4%;
        position: relative;
    }
}

@media all and (min-width: 700px) {
    .readermode .custom-interne-link {
        max-width: 400px;
        width: 100%;
        margin-left: 16.4%;
        position: relative;
    }
}

.thumbnail:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    outline: 2px solid #b6b6ba;
    border-radius: 0.5px;
}

.custom-thumbnail-link:focus-within .thumbnail {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    outline: 2px solid #b6b6ba;
    border-radius: 0.5px;
}

/*.custom-interne-link:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}*/

.custom-interne-link .thumbnail {
    margin-bottom: 25px;
}

.custom-interne-link .thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.custom-title {
    margin: 0 0 15px;
    font-weight: 600;
    font-size: 22px;
    color: #2b3035;
    line-height: 1.3;
}

.custom-title:hover {
    text-decoration: underline;
    color: #2b3035;
}

.custom-excerpt {
    font-size: 14px;
    font-weight: 400 !important;
    margin: 15px 0 30px;
    color: #74777b !important;
    line-height: 1.6;
}

.read-more-link {
    color: #cd5606 !important;
}

.read-more-link:hover {
    color: #1656b0 !important;
    text-decoration: underline !important;
}

.custom-site-icon {
    width: 25px;
    height: 25px;
    margin-right: 12px;
}

.custom-site-title {
    font-weight: 600;
    color: #8c8f94;
    font-size: 14px;
    margin-bottom: 50px;
}

.custom-site-title:hover {
    color: #8c8f94 !important;
    text-decoration: underline;
}

.custom-link:focus {
    outline: 2px solid #b6b6ba !important;
    padding: 0px !important;
    border-radius: 0.5px;
}

.site-info-link:focus {
    padding: 5px 0 !important;
    outline: 2px solid #b6b6ba;
}

.copy-link {
    float: right;
    font-weight: 500 !important;
    color: #8c8f94;
    font-size: 14px;
    margin: 3px 0 0 0;
}

.copy-link .genericon {
    margin: 3px 0;
}

.copy-link:hover {
    text-decoration: underline !important;
    color: #cd5606 !important;
}

/* - Ende Custom inline Embeds - */

Infolge hast du die Flexibilität, den Fokussierungsprozess so zu gestalten, dass er für alle Browser – insbesondere Safari, das ja oft eigene Herausforderungen mit sich bringt – gut funktioniert. Das klingt nicht nur performanter, sondern auch robuster, da du die volle Kontrolle hast.

Der Fokus ist heilig (https://www.barrierefreies-webdesign.de/)

Fazit

Wenn du das nächste Mal durch die Tastaturnavigation hüpfst und dabei auf eine kleine Stolperfalle in Safari stößt, denk daran: Es gibt immer eine kreative Lösung – in diesem Fall unsere speziellen Embeds! Ob du nun interne Hinweise versteckst oder einfach nur versuchst, deine Benutzererfahrung zu verbessern, diese kleinen Helferlein stehen dir zur Seite.

Also, schnapp dir deinen Code, experimentiere ein wenig und lass uns gemeinsam die digitale Welt ein Stückchen barrierefreier machen! Und wenn du beim nächsten Mal beim Tabben das Gefühl hast, du bist auf einer wilden Safari, dann weißt du, dass wir da etwas dagegen haben. Happy Embedding!