Unterstreichen-Button in WordPress hinzufügen

6 days ago, WordPress Plugin, Views
Unterstreichen-Button in WordPress hinzufügen

Einführung: Die Herausforderung der fehlenden Unterstreichung

In der modernen Welt des Webdesigns wird die Unterstreichung oft als stilistisches Element vermieden, da sie historisch mit Hyperlinks assoziiert wurde. Dies führte dazu, dass WordPress, das beliebteste Content-Management-System (CMS) der Welt, den Unterstreichen-Button standardmäßig aus dem visuellen Editor entfernt hat. Für viele Nutzer in Deutschland, insbesondere solche, die traditionelle Textformatierungen gewohnt sind oder spezifische Anforderungen an die Barrierefreiheit erfüllen müssen, stellt dies jedoch eine Herausforderung dar. Dieser Artikel erklärt, wie man den Unterstreichen-Button in WordPress wieder hinzufügt, verschiedene Methoden vorstellt und die Vor- und Nachteile jeder Option beleuchtet.

Warum die Unterstreichung in WordPress entfernt wurde

Die Entscheidung von WordPress, den Unterstreichen-Button zu entfernen, basierte primär auf der Unterscheidung zwischen formattiertem Text und Hyperlinks. Im Web werden Unterstreichungen traditionell verwendet, um Links hervorzuheben. Die Verwendung der Unterstreichung für andere Zwecke, wie zum Beispiel die Betonung von Text, kann zu Verwirrung bei den Besuchern führen und die Benutzererfahrung beeinträchtigen. Die Entwickler argumentierten, dass kursive Schrift oder Fettdruck geeignetere Alternativen zur Hervorhebung von Text seien, da diese Stile die Bedeutung nicht mit der Funktionalität von Links vermischen.

Darüber hinaus wurde argumentiert, dass eine übermäßige Verwendung von Unterstreichungen das Design einer Website überladen und unübersichtlich wirken lassen kann. Ein minimalistischer Ansatz in der Textformatierung wird im Allgemeinen als ästhetisch ansprechender und professioneller angesehen.

Methoden zum Hinzufügen des Unterstreichen-Buttons

Es gibt verschiedene Methoden, um den Unterstreichen-Button in WordPress wieder zu aktivieren. Jede Methode hat ihre eigenen Vor- und Nachteile, und die beste Wahl hängt von Ihren technischen Fähigkeiten und Ihren spezifischen Anforderungen ab. Die folgenden Optionen werden im Detail beschrieben:

  • Verwendung eines Plugins
  • Bearbeitung der functions.php-Datei des Themes
  • Verwendung eines benutzerdefinierten CSS-Codes

Methode 1: Verwendung eines Plugins

Die einfachste und unkomplizierteste Methode, um den Unterstreichen-Button wiederherzustellen, ist die Verwendung eines WordPress-Plugins. Es gibt mehrere kostenlose und kostenpflichtige Plugins, die diese Funktionalität bieten. Einige der beliebtesten Optionen sind:

  • TinyMCE Advanced: Dieses Plugin bietet eine umfassende Anpassung des TinyMCE-Editors (dem Standard-Editor in WordPress) und ermöglicht es Ihnen, eine Vielzahl von Formatierungsoptionen hinzuzufügen, einschließlich der Unterstreichung.
  • Re-add text underline button: Dieses Plugin tut genau das, was der Name verspricht: Es fügt den Unterstreichen-Button wieder in den visuellen Editor ein. Es ist leichtgewichtig und einfach zu bedienen.
  • Advanced Editor Tools (ehemals TinyMCE Advanced): Dieses Plugin ist eine Weiterentwicklung des beliebten TinyMCE Advanced und bietet noch mehr Anpassungsmöglichkeiten.

Vorteile der Verwendung eines Plugins:

  • Einfache Installation und Aktivierung
  • Keine Programmierkenntnisse erforderlich
  • Benutzerfreundliche Oberfläche
  • Oft zusätzliche Funktionen und Anpassungsmöglichkeiten

Nachteile der Verwendung eines Plugins:

  • Zusätzliche Belastung für die Website (jedes Plugin verbraucht Ressourcen)
  • Mögliche Inkompatibilitäten mit anderen Plugins oder Themes
  • Sicherheitsrisiken (schlecht programmierte Plugins können Sicherheitslücken aufweisen)

Anleitung zur Verwendung eines Plugins (Beispiel: TinyMCE Advanced):

  1. Gehen Sie im WordPress-Dashboard zu “Plugins” > “Installieren”.
  2. Suchen Sie nach “TinyMCE Advanced” und klicken Sie auf “Installieren”.
  3. Klicken Sie nach der Installation auf “Aktivieren”.
  4. Gehen Sie zu “Einstellungen” > “TinyMCE Advanced”.
  5. Ziehen Sie den Unterstreichen-Button (normalerweise als “Underline” gekennzeichnet) vom verfügbaren Bereich in die Toolbar des Editors.
  6. Speichern Sie die Änderungen.

Methode 2: Bearbeitung der functions.php-Datei des Themes

Eine fortgeschrittene Methode, um den Unterstreichen-Button hinzuzufügen, ist die Bearbeitung der functions.php-Datei Ihres WordPress-Themes. Diese Datei enthält Funktionen, die das Verhalten Ihres Themes steuern. Achtung: Die Bearbeitung dieser Datei erfordert grundlegende Programmierkenntnisse und birgt das Risiko, Ihre Website zu beschädigen, wenn Fehler gemacht werden. Es wird dringend empfohlen, vor der Bearbeitung ein Backup Ihrer Website zu erstellen.

Der Code, der benötigt wird, um den Unterstreichen-Button hinzuzufügen, ist relativ einfach. Sie müssen eine Funktion erstellen, die den Unterstreichen-Button zu den vorhandenen Editor-Buttons hinzufügt, und diese Funktion dann in WordPress einbinden.

Beispielcode für die functions.php-Datei:


function add_underline_button( $buttons ) {
    array_push( $buttons, 'underline' );
    return $buttons;
}
add_filter( 'mce_buttons_2', 'add_underline_button' );

function underline_tinymce_plugin( $plugin_array ) {
    $plugin_array['underline'] = get_template_directory_uri() . '/js/underline.js'; // Erstellen Sie diese Datei
    return $plugin_array;
}

add_filter( 'mce_external_plugins', 'underline_tinymce_plugin' );


function underline_register_buttons( $buttons ) {
  array_push( $buttons, 'underline' );
  return $buttons;
}
add_filter( 'mce_buttons', 'underline_register_buttons' );

Zusätzlich muss eine Javascript-Datei erstellt werden, die die Funktion zum Unterstreichen implementiert. Diese Datei muss im Theme-Verzeichnis unter /js/underline.js gespeichert werden. Der Inhalt der Javascript-Datei könnte wie folgt aussehen:


(function() {
    tinymce.create('tinymce.plugins.underline', {
        init : function(ed, url) {
            ed.addButton('underline', {
                title : 'Underline',
                cmd : 'Underline',
                image : url + '/img/underline.png'  // Optional: Fügen Sie ein eigenes Unterstreichen-Symbol hinzu
            });

            ed.addCommand('Underline', function() {
                ed.execCommand('mceToggleFormat', false, 'underline');
            });
        },
        createControl : function(n, cm) {
            return null;
        },
        getInfo : function() {
            return {
                longname : 'Underline Plugin',
                author : 'Your Name',
                authorurl : 'http://yourwebsite.com',
                infourl : 'http://yourwebsite.com',
                version : "1.0"
            };
        }
    });
    tinymce.PluginManager.add('underline', tinymce.plugins.underline);
})();

Ersetzen Sie Your Name und http://yourwebsite.com durch Ihre eigenen Informationen. Wenn Sie kein eigenes Unterstreichen-Symbol erstellen möchten, können Sie die Zeile image : url + '/img/underline.png' entfernen.

Vorteile der Bearbeitung der functions.php-Datei:

  • Keine zusätzlichen Plugins erforderlich (reduziert die Belastung der Website)
  • Direkte Kontrolle über die Funktionalität

Nachteile der Bearbeitung der functions.php-Datei:

  • Erfordert Programmierkenntnisse
  • Risiko, die Website zu beschädigen, wenn Fehler gemacht werden
  • Änderungen können bei Theme-Updates verloren gehen (Verwendung eines Child-Themes empfohlen)

Methode 3: Verwendung eines benutzerdefinierten CSS-Codes

Diese Methode fügt den Unterstreichen-Button nicht direkt zum visuellen Editor hinzu, sondern ermöglicht es Ihnen, Text im Editor auszuwählen und mit einem benutzerdefinierten CSS-Code zu unterstreichen. Dies ist eine weniger intuitive Methode, erfordert aber keine Plugins oder die Bearbeitung der functions.php-Datei.

Zuerst müssen Sie einen benutzerdefinierten CSS-Code erstellen, der die Unterstreichung auf den ausgewählten Text anwendet. Diesen Code können Sie dann entweder in den Customizer Ihres Themes (unter “Design” > “Customizer” > “Zusätzliches CSS”) oder in der style.css-Datei Ihres Themes (oder Child-Themes) einfügen. Es wird empfohlen, ein Child-Theme zu verwenden, um zu verhindern, dass Ihre Änderungen bei Theme-Updates überschrieben werden.

Beispiel CSS-Code:


.underline {
  text-decoration: underline;
}

Nachdem Sie den CSS-Code hinzugefügt haben, müssen Sie im visuellen Editor einen Text auswählen und ihm die CSS-Klasse “underline” zuweisen. Dies kann über den HTML-Editor geschehen. Wechseln Sie zum HTML-Editor und umgeben Sie den Text, den Sie unterstreichen möchten, mit einem span-Tag mit der Klasse “underline”:


<span class="underline">Dieser Text wird unterstrichen.</span>

Vorteile der Verwendung von benutzerdefiniertem CSS:

  • Keine Plugins erforderlich
  • Keine Bearbeitung der functions.php-Datei erforderlich
  • Flexibilität bei der Anpassung des Unterstreichungsstils

Nachteile der Verwendung von benutzerdefiniertem CSS:

  • Weniger intuitiv als die Verwendung eines Buttons im visuellen Editor
  • Erfordert Kenntnisse in HTML und CSS
  • Möglicherweise umständlich für Benutzer, die nicht mit HTML-Code vertraut sind

Best Practices für die Verwendung der Unterstreichung

Auch wenn Sie den Unterstreichen-Button wieder hinzugefügt haben, ist es wichtig, die Unterstreichung bewusst und sparsam einzusetzen. Hier sind einige Best Practices, die Sie beachten sollten:

  • Verwenden Sie die Unterstreichung hauptsächlich für Hyperlinks: Um Verwirrung zu vermeiden, sollten Sie die Unterstreichung in erster Linie verwenden, um Links hervorzuheben.
  • Vermeiden Sie die übermäßige Verwendung von Unterstreichungen: Zu viele Unterstreichungen können das Design Ihrer Website überladen und unübersichtlich wirken lassen.
  • Verwenden Sie alternative Formatierungsoptionen: Erwägen Sie die Verwendung von Fettdruck, Kursivschrift oder anderen Stilen, um Text hervorzuheben, ohne die Benutzer mit Links zu verwechseln.
  • Achten Sie auf die Barrierefreiheit: Stellen Sie sicher, dass unterstrichene Links deutlich von normalem Text unterschieden werden können, auch für Benutzer mit Sehbehinderungen. Dies kann durch die Verwendung einer kontrastreichen Farbe oder anderer visueller Hinweise erreicht werden.

Fazit: Die richtige Methode für Ihre Bedürfnisse

Die Entscheidung, welche Methode zum Hinzufügen des Unterstreichen-Buttons in WordPress die beste ist, hängt von Ihren individuellen Bedürfnissen und technischen Fähigkeiten ab. Wenn Sie eine einfache und unkomplizierte Lösung suchen, ist die Verwendung eines Plugins die beste Wahl. Wenn Sie über Programmierkenntnisse verfügen und die Belastung Ihrer Website reduzieren möchten, können Sie die functions.php-Datei bearbeiten. Wenn Sie Flexibilität bei der Anpassung des Unterstreichungsstils wünschen und bereit sind, etwas HTML-Code zu verwenden, ist die Methode mit benutzerdefiniertem CSS eine gute Option.

Unabhängig davon, für welche Methode Sie sich entscheiden, ist es wichtig, die Unterstreichung bewusst und sparsam einzusetzen, um eine optimale Benutzererfahrung zu gewährleisten und die Barrierefreiheit Ihrer Website zu gewährleisten. In Deutschland, wo traditionelle Textformatierungen möglicherweise stärker verbreitet sind, kann die Wiederherstellung des Unterstreichen-Buttons eine sinnvolle Ergänzung sein, solange sie mit Bedacht eingesetzt wird.

, , , ,

..