So erstellen Sie ein WordPress TinyMCE Plugin: Schritt für Schritt Anleitung

WordPress / von / Februar 7, 2026
So erstellen Sie ein WordPress TinyMCE Plugin: Schritt für Schritt Anleitung

Wordpress TinyMCE Plugin ist der standardmäßige visuelle Editor, der die Textkomponenten des Blockeditors steuert. Das Erstellen eines benutzerdefinierten TinyMCE Plugins ermöglicht es Ihnen, seine Funktionalität zu erweitern – wie das Hinzufügen einer Schaltfläche, um Style-Links, Shortcodes oder benutzerdefinierte Elemente einzufügen – ohne Kerndateien zu ändern. Dies ist ideal für Entwickler, die Workflows optimieren oder einzigartige Features hinzufügen möchten. Im Jahr 2026, mit dem Blockeditor (Gutenberg) dominieren, bleiben TinyMCE-Plugins für klassische Bearbeitung oder Hybrid-Setups relevant. Bei Cope Business, bauen wir benutzerdefinierte Plugins wie diese für Kunden während unserer technische SEO Audits die erstellung von inhalten zu verbessern und die website-performance zu optimieren.

Dieses Tutorial führt Sie durch das Erstellen eines einfachen TinyMCE-Plugins, das eine benutzerdefinierte Schaltfläche fügt, um einen Link mit einer bestimmten CSS-Klasse (z.B. für Tasten) einfügen. Es richtet sich an Benutzer mit grundlegendem PHP- und JavaScript-Wissen – immer auf einer Staging-Site testen.

Anforderungen vor dem Start

  • Eine lokale oder staging WordPress-Website (Vermeiden Sie Live-Seiten ohne Backups).
  • Grundlegende Programmierkenntnisse (PHP, JavaScript).
  • Ein Code-Editor wie VS Code.
  • Optional: Kenntnisse des klassischen Editors (TinyMCE wird immer noch in Blöcken verwendet).

Wenn Sie ein Anfänger sind, betrachten Sie die Verwendung bestehender Plugins wie TinyMCE Advanced für ähnliche Funktionen ohne Codierung.

Schritt für Schritt: Erstellen Sie Ihr TinyMCE Plugin

Wir erstellen ein Plugin, das eine „Insert Button Link“ Symbolleiste hinzufügt. Wenn Sie geklickt haben, fordert es eine URL an und wickelt ausgewählten Text in einem Tag mit class=“button“.

Schritt 1: Erstellen Sie den Plugin Folder und die Hauptdatei

  1. Gehen Sie in Ihrem WordPress-Verzeichnis zu /wp-content/plugins/.
  2. Erstellen Sie einen neuen Ordner: tinymce-custom-link-class.
  3. Innen, erstellen winzige-custom-link-class.php.

Schritt 2: Fügen Sie das Plugin Header

Öffnen Sie winzigmce-custom-link-class.php und fügen Sie hinzu:

PHP

/**
 * Plugin Name: TinyMCE Custom Link Class
 * Plugin URI: https://www.copebusiness.com
 * Version: 1.0
 * Author: Cope Business
 * Author URI: https://www.copebusiness.com
 * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor
 * License: GPL2
 */

Schritt 3: Stellen Sie die Plugin-Klasse ein

Fügen Sie diesen Code hinzu:

PHP

class TinyMCE_Custom_Link_Class {
    
    function __construct() {
        
    }
}

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

Schritt 4: Blick in die Init-Aktion (nur hinzufügen)

Im Inneren construct():

PHP

if ( is_admin() ) {
    add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );
}

Schritt 5: Definieren Sie die setup tinymce plugin Funktion

Diese prüft Berechtigungen und registriert Filter:

PHP

function setup_tinymce_plugin() {
    if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
        return;
    }
    if ( get_user_option( 'rich_editing' ) !== 'true' ) {
        return;
    }
    add_filter( 'mce_external_plugins', array( $this, 'add_tinymce_plugin' ) );
    add_filter( 'mce_buttons', array( $this, 'add_tinymce_toolbar_button' ) );
}

Schritt 6: Registrieren Sie die JavaScript Plugin Datei

PHP

function add_tinymce_plugin( $plugin_array ) {
    $plugin_array['custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js';
    return $plugin_array;
}

Schritt 7: Fügen Sie den Button zur Toolbar

PHP

function add_tinymce_toolbar_button( $buttons ) {
    array_push( $buttons, '|', 'custom_link_class' );
    return $buttons;
}

Schritt 8: Erstellen Sie die JavaScript Datei

Erstellen Sie im Plugin-Ordner winzigmce-custom-link-class.js:

JavaScript

(function() {
    tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
        editor.addButton('custom_link_class', {
            title: 'Insert Button Link',
            cmd: 'custom_link_class',
            image: url + '/icon.png' // Add an icon.png file to the folder
        });
        editor.addCommand('custom_link_class', function() {
            var text = editor.selection.getContent({ 'format': 'html' });
            if ( text.length === 0 ) {
                alert( 'Please select some text to link.' );
                return;
            }
            var result = prompt('Enter the link');
            if ( !result || result.length === 0 ) {
                return;
            }
            editor.execCommand('mceReplaceContent', false, '<a class="button" href="' + result + '">' + text + '</a>');
        });
    });
})();

Schritt 9: Fügen Sie einen Knopf Icon

Erstellen oder laden Sie ein kleines icon.png (16x16px) und legen Sie es in den Plugin-Ordner. Verwenden Sie ein einfaches Link-Symbol.

Schritt 10: Aktivieren & Testen Sie das Plugin

  1. Aktiviere das Plugin in Plugins.
  2. Bearbeiten Sie eine Post/Seite im visuellen Editor.
  3. Wählen Sie Text, klicken Sie auf die neue Schaltfläche in der Symbolleiste, geben Sie URL ein – es fügt einen gestylten Link ein.

Best Practices für benutzerdefinierte TinyMCE Plugins

  • Test gründlich — Überprüfen Sie auf mehreren Browsern und Geräten.
  • Sicherheit — Verweigern Sie Benutzereingänge in JS/PHP, um XSS zu verhindern.
  • Leistung — Halten Sie JS leicht; bei Bedarf minifizieren.
  • Aktualisierung — Monitor für WordPress-Kernänderungen, die TinyMCE beeinflussen.
  • Alternative — Für Nicht-Codeer verwenden Sie TinyMCE Fortgeschritten, ohne benutzerdefinierte Plugins zu erweitern.

Benutzerdefinierte Plugins wie diese geben Ihnen volle Kontrolle über den Editor — ideal für branded Workflows.

Letzte Gedanken

Erstellen eines WordPress TinyMCE Plugins ist eine lohnende Möglichkeit, den Editor und die Erstellung von Inhalten zu optimieren. Folgen Sie diesen Schritten für einen einfachen Knopf oder erweitern Sie auf komplexere Features.

Dies erhöht die Produktivität und Benutzererfahrung.

Brauchen Sie Hilfe bei der Erstellung von benutzerdefinierten Plugins, der Optimierung Ihres Editors oder der Verbesserung der gesamten Website-Performance? Kontakt Cope Business für eine kostenlose technische SEO Beratung – wir bauen maßgeschneiderte Lösungen, um Ihre WordPress-Website zu erhöhen.

War dieser Artikel hilfreich?
JaNein

In den Warenkorb