Ein WordPress-TinyMCE-Plugin erstellen: Eine detaillierte Anleitung

Einleitung

TinyMCE ist ein weit verbreiteter WYSIWYG-Editor, der in WordPress integriert ist. Er ermöglicht es Benutzern, Inhalte einfach zu erstellen und zu formatieren, ohne HTML-Kenntnisse zu benötigen. Die Erweiterbarkeit von TinyMCE macht es möglich, eigene Funktionalitäten in WordPress zu implementieren. In diesem Artikel zeigen wir Ihnen, wie Sie ein eigenes WordPress-Plugin erstellen, das eine benutzerdefinierte Funktionalität zu TinyMCE hinzufügt, speziell auf die Bedürfnisse des deutschen Marktes zugeschnitten.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie die folgenden Voraussetzungen erfüllen:

Eine lokale WordPress-Entwicklungsumgebung (z.B. XAMPP, MAMP oder Docker).
Grundlegende Kenntnisse in PHP, HTML, CSS und JavaScript.
Vertrautheit mit der WordPress-Plugin-Entwicklung.

Plugin-Grundstruktur erstellen

Der erste Schritt besteht darin, die grundlegende Struktur für Ihr WordPress-Plugin zu erstellen. Erstellen Sie einen neuen Ordner im Verzeichnis wp-content/plugins. Nennen Sie den Ordner beispielsweise mein-tinymce-plugin.

In diesem Ordner erstellen Sie eine PHP-Datei mit demselben Namen, z.B. mein-tinymce-plugin.php. Diese Datei enthält die Plugin-Metadaten und den Code, der das Plugin aktiviert.

Fügen Sie den folgenden Code in die mein-tinymce-plugin.php-Datei ein:


  <?php
  /**
   * Plugin Name: Mein TinyMCE Plugin
   * Plugin URI: https://www.example.com/mein-tinymce-plugin
   * Description: Fügt eine benutzerdefinierte Funktionalität zu TinyMCE hinzu.
   * Version: 1.0.0
   * Author: Ihr Name
   * Author URI: https://www.example.com
   * License: GPLv2 or later
   */

  // Verhindert direkten Zugriff auf die Datei
  if ( ! defined( 'ABSPATH' ) ) {
      exit;
  }

  // Hier kommt der restliche Code des Plugins

TinyMCE-Plugin registrieren

Um unser TinyMCE-Plugin zu integrieren, müssen wir WordPress mitteilen, dass es existiert. Wir tun dies, indem wir einen Hook verwenden, der bei der Initialisierung des TinyMCE-Editors ausgelöst wird. Speziell wollen wir unseren Plugin-Pfad zu der TinyMCE-Plugin-Liste hinzufügen.

Fügen Sie den folgenden Code in Ihre mein-tinymce-plugin.php-Datei ein:


  <?php
  /**
   * Plugin Name: Mein TinyMCE Plugin
   * Plugin URI: https://www.example.com/mein-tinymce-plugin
   * Description: Fügt eine benutzerdefinierte Funktionalität zu TinyMCE hinzu.
   * Version: 1.0.0
   * Author: Ihr Name
   * Author URI: https://www.example.com
   * License: GPLv2 or later
   */

  // Verhindert direkten Zugriff auf die Datei
  if ( ! defined( 'ABSPATH' ) ) {
      exit;
  }

  /**
   * Fügt das TinyMCE-Plugin hinzu.
   */
  function mein_tinymce_plugin_hinzufuegen( $plugin_array ) {
      $plugin_array['mein_plugin'] = plugin_dir_url( __FILE__ ) . 'js/mein-plugin.js';
      return $plugin_array;
  }
  add_filter( 'mce_external_plugins', 'mein_tinymce_plugin_hinzufuegen' );

  /**
   * Fügt den Button zur TinyMCE-Toolbar hinzu.
   */
  function mein_tinymce_button_registrieren( $buttons ) {
      array_push( $buttons, 'mein_button' );
      return $buttons;
  }
  add_filter( 'mce_buttons', 'mein_tinymce_button_registrieren' );

Dieser Code tut Folgendes:

Die Funktion mein_tinymce_plugin_hinzufuegen fügt unser JavaScript-Plugin zu der Liste der externen TinyMCE-Plugins hinzu. Beachten Sie, dass plugin_dir_url( __FILE__ ) den Pfad zum Plugin-Verzeichnis liefert und wir ein JavaScript-Datei js/mein-plugin.js annehmen.
Die Funktion mein_tinymce_button_registrieren fügt einen Button mit dem Namen ‘mein_button’ zur TinyMCE-Toolbar hinzu.
Die Funktionen werden mit den Filtern mce_external_plugins und mce_buttons verknüpft, die von WordPress bereitgestellt werden.

JavaScript-Datei erstellen

Erstellen Sie einen Ordner namens js in Ihrem Plugin-Verzeichnis. Erstellen Sie dann eine JavaScript-Datei namens mein-plugin.js in diesem Ordner.

Fügen Sie den folgenden Code in die mein-plugin.js-Datei ein:


  (function() {
      tinymce.PluginManager.add('mein_plugin', function(editor, url) {
          // Fügt einen Button zur TinyMCE-Toolbar hinzu.
          editor.addButton('mein_button', {
              text: 'Mein Button',
              icon: false,
              onclick: function() {
                  // Aktion, die ausgeführt wird, wenn der Button geklickt wird.
                  editor.insertContent('<p>Hallo Welt!</p>');
              }
          });
      });
  })();

Dieser Code tut Folgendes:

Registriert ein neues TinyMCE-Plugin mit dem Namen ‘mein_plugin’.
Fügt einen Button mit dem Text ‘Mein Button’ zur TinyMCE-Toolbar hinzu.
Wenn der Button geklickt wird, fügt er den Text ‘<p>Hallo Welt!</p>’ in den Editor ein.

Plugin aktivieren

Aktivieren Sie das Plugin im WordPress-Dashboard unter “Plugins”.

Sobald das Plugin aktiviert ist, sollte der Button “Mein Button” in der TinyMCE-Toolbar erscheinen. Wenn Sie auf den Button klicken, wird der Text “<p>Hallo Welt!</p>” in den Editor eingefügt.

Anpassung für den deutschen Markt

Um das Plugin für den deutschen Markt anzupassen, können Sie verschiedene Aspekte berücksichtigen:

Sprachunterstützung: Stellen Sie sicher, dass alle Texte und Beschriftungen im Plugin auf Deutsch sind. Verwenden Sie die WordPress-Lokalisierungsfunktionen (__(), _e()) für die Internationalisierung (i18n) und Lokalisierung (l10n).
Inhaltsanpassung: Passen Sie den Inhalt an die Bedürfnisse des deutschen Marktes an. Beispielsweise könnten Sie häufig verwendete deutsche Redewendungen oder Formatvorlagen hinzufügen.
Datenschutz: Achten Sie auf die Einhaltung der DSGVO. Wenn Ihr Plugin Daten verarbeitet, stellen Sie sicher, dass Sie die entsprechenden Datenschutzrichtlinien einhalten.

Beispiel für Sprachunterstützung

Ändern Sie den Code in der mein-plugin.js-Datei wie folgt:


  (function() {
      tinymce.PluginManager.add('mein_plugin', function(editor, url) {
          editor.addButton('mein_button', {
              text: 'Mein Button',
              icon: false,
              onclick: function() {
                  editor.insertContent('<p>Hallo Welt!</p>');
              }
          });
      });
  })();

Zu:


    (function() {
        tinymce.PluginManager.add('mein_plugin', function(editor, url) {
            editor.addButton('mein_button', {
                text: '',
                icon: false,
                onclick: function() {
                    editor.insertContent('<p></p>');
                }
            });
        });
    })();

Und fügen Sie in Ihre mein-tinymce-plugin.php Datei folgenden Code hinzu um die Sprache zu laden:


  /**
   * Lädt die Textdomain für die Übersetzung.
   */
  function mein_tinymce_plugin_sprachen_laden() {
      load_plugin_textdomain( 'mein-tinymce-plugin', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
  }
  add_action( 'plugins_loaded', 'mein_tinymce_plugin_sprachen_laden' );

Erstellen Sie dann ein Verzeichnis languages im Plugin-Verzeichnis und eine .mo und .po Datei für die deutsche Sprache (z.B. de_DE.po und de_DE.mo). Sie können Programme wie Poedit verwenden, um diese Dateien zu erstellen und zu bearbeiten. Hier ist ein Beispiel für den Inhalt der de_DE.po-Datei:


  msgid "Mein Button"
  msgstr "Mein Knopf"

  msgid "Hallo Welt!"
  msgstr "Hallo Welt!"

Erweiterte Funktionalitäten

Sie können Ihr TinyMCE-Plugin um weitere Funktionen erweitern:

Dialogfenster: Erstellen Sie ein Dialogfenster, um Benutzereingaben zu erfassen und den Inhalt entsprechend anzupassen.
Shortcodes: Fügen Sie Shortcodes ein, um dynamische Inhalte zu generieren.
Integration mit anderen Plugins: Integrieren Sie Ihr Plugin mit anderen WordPress-Plugins, um zusätzliche Funktionalitäten bereitzustellen.

Fazit

In diesem Artikel haben wir Ihnen gezeigt, wie Sie ein einfaches WordPress-TinyMCE-Plugin erstellen und für den deutschen Markt anpassen können. Mit diesem Wissen können Sie Ihre eigenen Plugins entwickeln, um die Funktionalität von TinyMCE zu erweitern und an Ihre spezifischen Bedürfnisse anzupassen. Denken Sie daran, die Sprachunterstützung und die Einhaltung der DSGVO bei der Entwicklung Ihres Plugins zu berücksichtigen.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa

Ein WordPress-TinyMCE-Plugin erstellen