1. Plugin erstellen

Um ein benutzerdefiniertes Modul zu erstellen, müsst du zuerst ein einfaches Plugin erstellen. Dadurch wird verhindert, dass das Modul überschrieben wird, wenn Beaver Builder aktualisiert wird. Um das Plugin zu erstellen, öffne das Verzeichnis Plugins in wp-content/plugins und dort erstelle einen neuen Ordner. Dieser Ordner muss eindeutig mit Kleinbuchstaben und Bindestrichen benannt werden. z. B. bb-halunken-plugin. Der nächste Schritt wäre, eine Struktur wie das Beispielbild unten in Ihrem Verzeichnis bb-halunken-plugin zu erstellen.

Kopiere als Nächstes den unteren Code und fügst du ihn in die index.php ein und bearbeitest du die Informationen wie Plugin-Name, Autor. Du solltest auch die Konstanten IH_PLUGIN_DIR und IH_PLUGIN_URL umbenennen, damit sie mit dem Namespace deines Plugins übereinstimmen, und die Suffixe _DIR, _URL, _MODULES_DIR und _MODULES_URL beibehalten. Darunter auch müsstest du das internethalunken.php Datei hinzufügen.

/**
 * Plugin Name: Internet-Halunken Plugin
 * Plugin URI: https://blog.mediafavoriten.de/
 * Description: Internet-Halunken Custom Module fürs BeaverBuilder.
 * Version: 1.0
 * Author: Internet-Halunken
 */

define("IH_PLUGIN_DIR", plugin_dir_path(__FILE__));
define("IH_PLUGIN_URL", plugin_dir_url(__FILE__));
define("IH_PLUGIN_MODULES_DIR", IH_PLUGIN_DIR . "modules/");
define("IH_PLUGIN_MODULES_URL", IH_PLUGIN_URL . "modules/");

require_once "classes/internethalunken.php";

Öffne dann den classes Ordner, kopiere die Klasse darunter und füge sie in internethalunken.php PHP-Datei ein.

<?php

final class InternetHalunken {

    public static function init() {
        add_action("plugins_loaded", __CLASS__ . "::setup_hooks");
    }

    public static function setup_hooks() {
        if(!class_exists("FLBuilder")) return;

        // Module laden
        add_action("init", __CLASS__ . "::load_modules");

        add_filter("fl_builder_enabled_modules", __CLASS__ . "::enabled_modules", 10, 1);
        add_filter("fl_builder_column_group_attributes", __CLASS__ . "::column_group_attributes", 10, 2);
    }

    public static function column_group_attributes($attrs, $group) {
        $cols = FLBuilderModel::get_nodes("column", $group);
        $attrs["class"][] = "fl-col-group-cols-" . count($cols);

        return $attrs;
    }

    public static function load_modules() {
        // Dein benutzerdefinierten Module hier einfügen
        // require_once SK_PLUGIN_MODULES_DIR . "bb-modul/bb-modul.php";
    }
    
    // Modul aktivieren und ausspielen lassen
    public static function enabled_modules($setting) {
        foreach ($setting as $k => $v) {
            switch ($v) {
    // Dein benutzerdefinierten Module hier einfügen
    // z. B. case "bb-modul":
                default:
            }
        }
  // Dein benutzerdefinierten Module hier einfügen
        // z. B. $setting[] = "bb-modul";
        return $setting;
    }
}

InternetHalunken::init();

Nachdem du den Plugin erstellt hast und oberen Schritten verfolgt hast, kannst du es im WordPress-Adminbereich (Dashboard > Plugins > Internet-Halunken Plugin) aktivieren und mit dem nächsten Schritt fortfahren. ✔

2. Füge ein Modul dem Plugin hinzu

Um dein erstes Modul hinzuzufügen, erstellst du einen Ordner in der modules Ordner (schau dir das oben hinzugefügten Ordnerstrukturbild nochmal, wenn unklar) und gibst du ihm einen eindeutigen Namen mit Kleinbuchstaben und Bindestrichen. Es ist dabei sehr wichtig, Modulordner und Dateinamen mit einem Präfix benannt werden, um Konflikte mit Kernmodulen zu vermeiden. Wie z. B. ih-headline. Wenn zwei Module denselben Ordnernamen oder Slug haben, treten Konflikte auf, selbst wenn sie sich in verschiedenen Plugins befinden ❗ Erstellst du als Nächstes eine PHP-Datei in Ihrem Modulordner (ih-headline) und gebe ihr denselben Namen wie das Modulordner, z. B. ih-headline.php. Schließlich müsstest du die Klasse deines Moduls (ih-headline) konfigurieren, somit wird es dein Modul bei Beaver Builder registriert. Kopiere dazu den folgenden Code und fügst du ihn in die PHP-Datei Ihres Moduls ein (ih-headline.php).

// Der Klasse muss mit einem Prefix + Name des Modul genannt werden (optional)
// aber hauptsache ist, dass man nicht bereits existierten Namen verwendet
class IH_Headline extends FLBuilderModule {
    public function __construct() {
        parent::__construct([
            'name'            => __( 'InternetHalunken Übeschrift', 'fl-builder' ), // Name dein Modul
            'description'     => __( 'Das ist eine Erweitertes Headline-Modul', 'fl-builder' ), // Kurze Beschreibung
            'group'           => __( 'Mein Gruppe', 'fl-builder' ), // Gruppe dein Modul
            'category'        => __( 'Mein Kategorie', 'fl-builder' ), // Kategorie für dein Modul
            'dir'             => IH_PLUGIN_MODULES_DIR . 'ih-headline/',
            'url'             => IH_PLUGIN_MODULES_URL . 'ih-headline/',
            'icon'            => 'icon.svg', // Icon, die dein Modul representiert + die SVG muss in Modulordner gelagert sein
            'editor_export'   => true, 
            'enabled'         => true,
            'partial_refresh' => false,
        ]);
    }
}

Nachdem du deine Modulklasse konfiguriert hast, müsstest du sie in deine Plugin einbinden. Öffne dazu einfach das interhalunken.php und bindest du sie in die load_modules und enabled_modules Funktion ein, wie im folgenden Beispiel gezeigt:

public static function load_modules() {
  require_once IH_PLUGIN_MODULES_DIR . "ih-headline/ih-headline.php";
}
  
  
public static function enabled_modules($setting) {
  foreach ($setting as $k => $v) {
    switch ($v) {
      case "ih-headline":
      default:
    }
  }
  $setting[] = "ih-headline";
  return $setting;
}

Prima!! Da du dein Plugin ein Modul hinzugefügt hast, ist es Zeit, mit dem nächsten Schritt fortzufahren, um es bei Beaver Builder zu registrieren und das Einstellungsformular zu erstellen.

3. Moduleinstellungen definieren

Die Registrierung deines Moduls erfolgt über den Methodenaufruf FLBuilder::register_module. Diese Methode akzeptiert zwei Parameter: den Namen deiner Modulklasse und ein assoziatives Array von Informationen zum Erstellen deines Einstellungsformulars. Dann haben wir die settings array. Das ist ein verschachtelter Satz von Informationen, mit denen man tabs, sections innerhalb der tabs und fields innerhalb der sections definieren kann. Kopiere dazu den folgenden Code und fügst du ihn in die PHP-Datei Ihres Moduls (ih-headline.php) ein.

FLBuilder::register_module( 'IH_Headline', array(
  'general-tab-1'      => array(
    'title'         => __( 'Überschrift Tab', 'fl-builder' ),
    'sections'      => array(
      'general-section-1'  => array(
        'title'         => __( 'Überschrift Section', 'fl-builder' ),
        'fields'        => array(
          'ih_keyword'     => array(
            'type'          => 'text',
            'label'         => __( 'Keyword', 'fl-builder' ),
          ),
          'ih_title'     => array(
            'type'          => 'text',
            'label'         => __( 'Überschrift', 'fl-builder' ),
          )
        )
      )
    )
  )
));

Jetzt sollte dein Modul in der BeaverBuilder Bearbeitungsmodu so ähnlich wie das Bild unten aussehen:

Es gibt mehrere Feldtypen, die BeaverBuilder bereits anbietet. Einen detaillierten Einblick in alle Feldtypen sowie zusätzliche Konfigurationseigenschaften findest du auf die BeaverBuilder Documentation Webseite. Achte immer darauf, dass der Slug für tabs, sections und fields eindeutig sein sollte, da du sonst auf Konflikte stößt. Du wirst beispielsweise auf Probleme stoßen, wenn du zwei tabs hast, die den Slug general-tab-1 verwenden.

4. Daten aus der Formular ausspielen lassen

Ein Modul benötigt nur die Hauptmoduldatei und die Frontend-Datei, um zu funktionieren. Diese Datei ist erforderlich und sollte sich unter bb-halunken-plugin/modules/ih-headline/includes/frontend.php befinden. Es wird verwendet, um den HTML-Code für jede einzelne Instanz Ihres Moduls zu rendern und bietet zusätzlich zu den folgenden Variablen Zugriff auf die vollständige WordPress-Umgebung. Dann haben wir das $settings Es ist ein Objekt, das die Moduleinstellungen enthält, die du bei der Registrierung Ihres Moduls definiert hast. Du verwendest diese, um Inhalte auszugeben oder vorher auf bestimmte Bedingungen zu prüfen. Kopiere dazu den folgenden Code und fügst du ihn in die frontend.php PHP-Datei.

<div class="ih-headline-container">
  <span><?php echo $settings->ih_keyword; ?></span>
  <h1><?php echo $settings->ih_title; ?></h1>
</div>

Und anbei das Endergebnis 😎

Da hast es es also, ich habe einfach gezeigt, wie man ein einfaches Beaver Builder-Modul erstellen kann. Der Rest liegt an dich zu entscheiden, wie fortgeschritten du es entwickeln möchtest und ob du ein komplizierteres Modul mit vielen zusätzlichen Funktionen und Einstellungen entwerfen möchtest. Es ist auch erwähnenswert, dass du jederzeit auf die offizielle BeaverBuilder-Dokumentationsseite gehen könntest, um mehr über das Erstellen von benutzerdefinierten Modulen, aber BeaverBuilder im Allgemeinen zu erfahren 😉