WordPress: CSS-Klasse zu einem Link hinzufügen

Das Hinzufügen eines Links über den Editor von WordPress ist schnell gemacht. Wenn man diesen Link stylen will, weil es z.B. ein Button sein soll, der am Ende eines Artikels auf eine andere Seite verweisen soll, dann wird es schon etwas schwieriger. Für dieses Problem gibt es mehrere Lösungen. In diesem Artikel zeige ich meine bevorzugte Variante.

Der Editor von WordPress (TinyMCE) wird dazu erweitert. Der Link wird ganz normal hinzugefügt und über einen zusätzlichen Schritt die Klasse hinzugefügt.

Der folgende Code wird entweder in die functions.php des (Child-) Themes hinzugefügt, wenn die Funktion an das Theme gebunden sein soll. Oder in ein eigenständiges Plugin, wenn es unabhängig vom aktuellen Theme sein soll.

// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );


// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {
    // Define the style_formats array
    $style_formats = [
      [
        'title' => 'Button',
        'selector' => 'a',
        'classes' => 'button'
      ]
    ];
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );

    return $init_array;

}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

Der erste Teil des Codes aktiviert das Styleselect-Menü, das in der zweiten Ebene des Editors angezeigt wird. Dies lässt sich mit dem Button Werkzeugleiste umschalten aktivieren.

Im nächsten Schritt fügst du den neuen Style für den Link hinzu. Der relevante Teil befindet sich in der Variable $style_formats. Der Titel gibt den Namen an, der im Menü angezeigt wird. Der Selector beschränkt den Style auf Links. Und die Classes definiert die Klasse, die dem Link hinzugefügt werden soll.

Nun kannst du mit wenigen Klicks eine Klasse einem Link hinzufügen, um diesen einen anderen Style zu geben.

Für die Klassen müssen dann noch Styles hinzugefügt werden. Entweder bringt das Theme schon eine passende Klasse mit oder man erstellt den Style im (Child-) Theme selber.

Möchte man eine Vorschau im Editor, muss der Style für den Button im Backend von WordPress eingebunden werden.