So erstellen Sie ein benutzerdefiniertes WordPress-Plugin

Veröffentlicht: 2022-02-24

Suchen Sie nach Möglichkeiten, ein benutzerdefiniertes WordPress-Plugin zu erstellen? In diesem Tutorial zeigen wir Ihnen, wie Sie ein WP-Plugin von Grund auf neu erstellen, mit dem Sie einige Elemente von den WooCommerce-Produktseiten entfernen können.

Bevor wir den Prozess durchgehen, schauen wir uns an, warum Sie möglicherweise zuerst ein benutzerdefiniertes WordPress-Plugin erstellen müssen.

Warum ein benutzerdefiniertes Plugin in WordPress erstellen?

Wir alle wissen, dass es in WordPress eine große Anzahl kostenloser und kostenpflichtiger Plugins gibt. Alle von ihnen wurden mit verschiedenen Funktionen entwickelt, um die Funktionalität Ihrer Website zu erhöhen. Einige der Funktionen des Plugins sind jedoch möglicherweise für Ihre Website unnötig und können als zusätzliches Gewicht für Ihr Framework wirken.

Manchmal brauchen Sie nur ein Tool mit einer ganz bestimmten Funktion. Einige Plugins sind jedoch mit zusätzlichen Funktionen so überladen, dass Sie ihr volles Potenzial nicht ausschöpfen können. In diesen Fällen können Sie einfach ein eigenes benutzerdefiniertes WordPress-Plugin erstellen.

Angenommen, Sie möchten Elemente auf Ihrer Produktseite oder anderen WooCommerce-Seiten mithilfe eines speziellen Plugins entfernen. Die meisten Plugins bieten Ihnen neben dem Entfernen der Elemente einige weitere zusätzliche Funktionen. Dies erhöht die Plugin-Größe sowie den Website-Speicher, was auch die Leistung Ihrer Website beeinträchtigen kann.

Natürlich können Sie auch CSS-Skripte oder WooCommerce-Hooks verwenden, um die Elemente zu entfernen. Sie können jedoch einige Probleme auf Ihre Website bringen, wenn Sie Ihr WordPress-Theme ohne ordnungsgemäße Ausführung aktualisieren. Wenn Sie jedoch ein benutzerdefiniertes Plugin erstellen, ist es weniger wahrscheinlich, dass die Änderungen Ihre Website unter keinen Umständen behindern.

Wie erstelle ich ein benutzerdefiniertes WordPress-Plugin?

Der gesamte Prozess zum Erstellen eines benutzerdefinierten WordPress-Plugins ist viel einfacher als Sie denken. Beginnen wir jedoch mit ein paar Dingen, die wir beachten sollten, bevor wir ein benutzerdefiniertes Plugin erstellen.

1. Bereiten Sie sich auf den Start vor

Es gibt eine Reihe von Anforderungen, die von Ihnen erfüllt werden sollten, um ein benutzerdefiniertes WordPress-Plugin zu erstellen. Sie sind:

  • WordPress-Installation auf einem localhost-Server

Während Sie ein Plugin auf einem Live-Server entwickeln können, ist es eine sehr schlechte Praxis, dies zu tun, während die Website online ist. Wenn Sie unnötige Änderungen an der Website vornehmen, kann es zu schwerwiegenden Problemen kommen. Um sie zu verhindern, müssen Sie also eine localhost-Testumgebung einrichten, um ein benutzerdefiniertes WordPress-Plugin zu erstellen, falls Sie noch keines haben.

  • Verwenden Sie einen Code-Editor

WordPress wird mit einem integrierten Plugin-Editor geliefert, um Codes für Ihre Plugins hinzuzufügen und zu ändern. Sie können damit auch ein benutzerdefiniertes WordPress erstellen. Wir empfehlen jedoch die Verwendung eines Code-Editors (IDE) wie Sublime Text, Visual Studio Code oder ähnlicher Editoren.

Sie verfügen über mehrere Tools und Funktionen, die zum Erstellen eines benutzerdefinierten Plugins erforderlich sind. Daher ist es viel bequemer, mit einer IDE zu arbeiten, da sie viel besser ist als die Verwendung des WP-Code-Editors.

  • Einige grundlegende WP-Entwicklungskenntnisse.

Um ein benutzerdefiniertes WordPress-Plugin zu erstellen, verwenden wir WP-Hooks und PHP-Funktionen und definieren unsere eigenen Funktionen. Wir empfehlen Ihnen daher, mit diesem Tutorial nur fortzufahren, wenn Sie über Grundkenntnisse in der WordPress-Entwicklung verfügen. Andernfalls könnte es für Sie sehr schwierig sein, ein benutzerdefiniertes Plugin selbst zu entwickeln.

Dies sind einige der grundlegenden Anforderungen und Ressourcen, die Sie zum Erstellen eines benutzerdefinierten Plugins benötigen. Stellen Sie sicher, dass alle diese Anforderungen erfüllt sind, bevor wir mit dem Tutorial fortfahren.

2. Erstellen Sie die Hauptdatei für das benutzerdefinierte WordPress-Plugin

Der erste Schritt zum Erstellen eines benutzerdefinierten WordPress-Plugins besteht darin, eine Hauptdatei des Plugins zu erstellen. Tatsächlich ist nur eine einzige Hauptdatei erforderlich, um ein Plugin zu erstellen. Es muss einen kommentierten Block mit dem Plugin-Namen haben.

Dies ist der einzige Wert, den WP benötigt, damit es erkennen kann, dass es sich um ein Plugin handelt. Um jedoch bewährte Verfahren zu befolgen und Probleme zu vermeiden, müssen wir hier einige andere Informationen eingeben.

Hauptdatei Erstellen Sie ein benutzerdefiniertes WordPress-Plugin

Beginnen wir also mit der Arbeit daran und erstellen diese Datei.

Öffnen Sie Ihren öffentlichen Ordner localhost und gehen Sie zu der WP-Installation, an der Sie arbeiten werden. Navigieren Sie dann zum Ordner „ wp-content/plugins “ und Sie sehen dort alle installierten Plugins

Wir werden hier einfach unsere neue benutzerdefinierte Plugin-Datei hinzufügen.

Erstellen Sie einen neuen Ordner unter dem Ordner wp-content/plugins Ihrer WP-Installation. Zum leichteren Verständnis haben wir das Plugin in diesem Tutorial QuadLayers_custom_products genannt.

Plugin-Name

In diesem Ordner befinden sich alle Ihre Plugin-Dateien. Erstellen wir also unsere Hauptdatei direkt in dem Ordner, den wir gerade erstellt haben. Es sollte im Dateiformat .php vorliegen

Hauptdatei

Diese Hauptdatei, die wir QuadLayers_cp.php genannt haben, wo alles beginnt. Es ist der Eingang des Plugins. Sie können den Code-Editor verwenden, um die Datei zu erstellen, aber stellen Sie sicher, dass sie die PHP-Erweiterung hat und dass sie richtig als PHP-Datei formatiert ist.

Kopieren Sie diesen Code und fügen Sie ihn in die Datei ein:

 <?php

/**
 * @link https://quadlayers.com/
 * @seit 0.0.1
 * @package QuadLayers Kundenspezifische Produkte
 * Plugin-Name: QuadLayers Custom Products  
 * Plugin-URI: https://quadlayers.com/
 * Beschreibung: Passen Sie die Produkteinzelseite an, indem Sie Elemente entfernen
 * Version: 0.0.1
 * Autor: QuadLayers
 * Textdomäne: qlcp
 */
 
if(!defined('ABSPATH')){sterben('-1');}

Funktion start(){ 		
        if(is_admin()==true){
        benötigt plugin_dir_path( __FILE__ ).'includes/Backend/QuadLayers-backend-init.php';
        }
        benötigt plugin_dir_path( __FILE__ ).'includes/Frontend/QuadLayers-frontend-init.php';
 }  
Funktion runit(){
    add_action('init','start');
}
starte es();

Wie Sie sehen können, rufen wir von hier aus einfach zwei weitere Dateien auf: QuadLayers-frontend-init.php und QuadLayers-backend-init.php . Offensichtlich wird einer am Frontend und der andere am Backend arbeiten. Sie können es eindeutig an ihren Dateinamen ableiten.

Von ihnen können wir sicherstellen, dass die Backend-Datei nur auf dem Backend funktioniert, da wir eine Bedingung mit der Funktion is_admin() verwenden. Dies bedeutet, dass es nur ausgelöst wird, wenn sich der Administrator im WP-Admin-Dashboard befindet.

Im Moment werden Sie einige Fehler auf Ihrer Website haben, da sowohl Frontend- als auch Backend-Dateien noch nicht vorhanden sind. Also lass uns weitermachen und sie erstellen.

Erstellen Sie im Plugin-Verzeichnis einen neuen Ordner mit dem Namen includes . Fügen Sie dann zwei weitere Ordner darin hinzu: backend und frontend .

Erstellen Sie zwei leere Dateien, um Fehler durch falsche Pfade zu beseitigen, jeweils eine in jedem dieser Ordner: QuadLayers-backend-init.php im Backend-Ordner und QuadLayers-frontend-init.php im Frontend-Ordner.

Das wäre also unsere endgültige Plugin-Dateistruktur:

 QuadLayers_custom_products
    __QuadLayers_cp.php
    __beinhaltet
       __Backend
          __QuadLayers-backend-init.php
       __Vorderseite
          __QuadLayers-frontend-init.php

3. Backend-Optionen

Nachdem Sie die Hauptdatei hinzugefügt haben, können wir damit beginnen, die Backend-Optionen des Plugins hinzuzufügen. Hier werden wir eine Plugin-Menü-Registerkarte im WP-Admin-Dashboard erstellen. Dadurch können die Benutzer einige Optionen zum Ausblenden oder Anzeigen der Elemente im Frontend auswählen.

Für diese Demonstration verwenden wir die von WP bereitgestellte Einstellungs-API. Machen Sie sich keine Sorgen, wenn Sie das noch nicht verstehen, denn es ist nicht so schwer zu lernen und es gibt jede Menge Dokumentation darüber.

Wenn Sie mehr darüber erfahren möchten, finden Sie hier eine vollständige Anleitung zur WP-Einstellungs-API

Kopieren Sie zunächst einfach den folgenden Code und fügen Sie ihn in die Datei QuadLayers-backend-init.php

 <?php 
add_action('admin_init', 'QuadLayers_display_options'); 
add_action('admin_menu', 'QuadLAyers_cp_AdminMenu'); 
Funktion QuadLAyers_cp_AdminMenu(){ 
    add_menu_page( __('QuadLayers Custom Products', 'qlcp'), __('QuadLayers Custom Products', 'qlcp'), 'manage_options', 'qlcp', 'QuadLayersOptionsPage' ); 
} 
Funktion QuadLayersOptionsPage() { 
    ?> <form action="options.php" method="post"> <?php 
    settings_fields('plugin_QL_Page'); 
    do_settings_sections('plugin_QL_Page'); 
    Submit_button(); 
    </form><?php
}

Funktion QuadLayers_display_options(){
        
    register_setting('plugin_QL_Page', 'qlcp_options', 'callbackValidation');

    add_settings_section(
        'QuadLayers_pluginPage_section',
        __('QuadLayers-Backend-Optionen', 'qlcp'),
        'QuadLayersSettingsSectionCallback',
        'plugin_QL_Page'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_1',
        esc_attr__('Titel', 'qlcp'),
       'QuadLayersCheckboxRender_1',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_2',
        esc_attr__('Menge', 'qlcp'),
       'QuadLayersCheckboxRender_2',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_3',
        esc_attr__('SKU', 'qlcp'),
       'QuadLayersCheckboxRender_3',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_4',
        esc_attr__('Meta', 'qlcp'),
       'QuadLayersCheckboxRender_4',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_5',
        esc_attr__('Beschreibungsregisterkarte', 'qlcp'),
       'QuadLayersCheckboxRender_5',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_6',
        esc_attr__('Preis', 'qlcp'),
       'QuadLayersCheckboxRender_6',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
}

Funktion QuadLayersSettingsSectionCallback(){
    echo wp_kses_post('Eine Einstellungsseite für das benutzerdefinierte QuadLAyers-Plugin');
}

Funktion QuadLayersCheckboxRender_1(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_1]" type="checkbox" /> 
    geprüft <?php } ?>value = "1">    
}

Funktion QuadLayersCheckboxRender_2(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_2]" type="checkbox" /> 
    geprüft <?php } ?>value = "1">    
}

Funktion QuadLayersCheckboxRender_3(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_3]" type="checkbox" /> 
    geprüft <?php } ?>value = "1">    
}

Funktion QuadLayersCheckboxRender_4(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_4]" type="checkbox" /> 
    geprüft <?php } ?>value = "1">    
}

Funktion QuadLayersCheckboxRender_5(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_5]" type="checkbox" /> 
    geprüft <?php } ?>value = "1">    
}

Funktion QuadLayersCheckboxRender_6(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_6]" type="checkbox" /> 
    geprüft <?php } ?>value = "1">    
}

Laden Sie jetzt den Backend-Bildschirm neu oder aktivieren Sie Ihr Plugin und Sie sehen eine neue Registerkarte in der Seitenleiste des Dashboard-Menüs.

Erstellen Sie ein benutzerdefiniertes WordPress-Plugin-Admin-Backend

Die WP-Einstellungs-API speichert ein Array mit all diesen Optionen in der Datenbanktabelle wp_options . Sie können es überprüfen, indem Sie PHPMyAdmin auf Ihrem lokalen Host öffnen und es in der Tabelle suchen.

Da es sich um neu erstellte Daten handelt, sollten sie am Ende der Tabelle zu finden sein

qlcp-Optionsdatenbank

Natürlich ist das qlcp_options Array in der Datenbank im obigen Screenshot leer. Dies liegt daran, dass in diesem Moment alle Kontrollkästchen deaktiviert sind. Sie können versuchen, einige davon zu überprüfen und zu PHPMyAdmin zurückzukehren, um zu sehen, wie die WP-Einstellungs-API die Daten speichert.

qlcp-Optionen testen
Jetzt, da wir das Options-Array in der Datenbank speichern können, müssen wir diese Optionen abrufen und im Frontend verwenden. Diese Optionen ermöglichen es den Benutzern, verschiedene Elemente Ihrer Website auszublenden oder anzuzeigen.

4. Frontend-Optionen

Um die Frontend-Optionen hinzuzufügen, kopieren Sie einfach den folgenden Code und fügen Sie ihn in die Datei QuadLayers-frontend-init.php .

Dadurch werden die Daten aus der Datenbank geholt, die von der Backend-Datei dort in einem Array gespeichert wurden.

Danach werden die spezifischen Elemente der Produktseite ausgeblendet, basierend darauf, welche Optionen im Optionsarray wahr sind.

 <?php

$options = get_option('qlcp_options');

if(!is_string($options)):
    // Titel
    if(isset($options['QuadLayers_checkbox_field_1'])){       
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
    }

    // Menge
    if(isset($options['QuadLayers_checkbox_field_2'])){        
        add_filter( 'woocommerce_is_sold_individually',
            Funktion ( $Rückgabe, $Produkt ) {
                gib true zurück;
            }, 10, 2 
        );
    }

    // Artikelnummer
    if(isset($options['QuadLayers_checkbox_field_3'])){        
        add_filter( 'wc_product_sku_enabled', 
            Funktion ( $aktiviert ) {          
                return $enabled;
            } 
    );
    }
    
    //Meta
    if(isset($options['QuadLayers_checkbox_field_4'])){
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
    }
    
    // Beschreibung Tab
    if(isset($options['QuadLayers_checkbox_field_5'])){
        add_filter( 'woocommerce_product_tabs', 
        Funktion ( $tabs ) {
            unset( $tabs['description'] );
            gib $tabs zurück;
            }, 11 
        );         
    }

    // Preis
    if(isset($options['QuadLayers_checkbox_field_6'])){
        add_filter( 'woocommerce_get_price_html', 
        Funktion ($Preis){         
            Rückkehr ;
            }
        );        
    }
endif;

Wir schließen den gesamten Code in eine if(is_string($options)) Bedingung ein. Daher können wir überprüfen, ob keine aktivierten Kontrollkästchen vorhanden sind. In diesem Fall ist der Datenbankwert eine Zeichenfolge. Dann müssen wir diesen Code überhaupt nicht ausführen.

Beachten Sie auch, dass wir anonyme Funktionen verwenden. Es funktioniert genauso wie mit benannten Funktionen. Aber wir haben gerade einen kürzeren Code für diesen anfängerfreundlichen Leitfaden erstellt.

Wenn also einige Werte in der Datenbank gespeichert sind, entfernt jede der Funktionen dieses Codes ein bestimmtes Element, abhängig vom spezifischen Index des vorhandenen Datenbankarrays.

Für Sie als Anfänger ist es wichtig zu verstehen, wie wir mit der Datenbank interagiert haben. Unsere beiden Dateien interagieren damit, aber diese Dateien sind in keiner Weise miteinander verbunden. Sie können sogar eine Datei entfernen und die andere funktioniert weiterhin, da die Datenbank immer noch die erforderlichen Werte enthält.

Und das ist alles. An diesem Punkt sollten Sie in der Lage sein, ein benutzerdefiniertes WordPress-Plugin zu erstellen, um auszuwählen, welche Elemente auf der Produktseite ausgeblendet oder angezeigt werden sollen.

Backend

benutzerdefiniertes Backend-WordPress-Plugin

Vorderes Ende

benutzerdefiniertes Frontend-WordPress-Plugin

Fazit

Dies ist unsere Anleitung zum Erstellen eines benutzerdefinierten WordPress-Plugins. Die benutzerdefinierten Plugins sind sehr hilfreich, wenn Sie sehr spezifische Funktionen für Ihre Website haben möchten und Ihre Website nicht mit überwältigenden Funktionen dedizierter WP-Plugins überladen möchten.

Zusammenfassend sind dies die wichtigsten Schritte zum Erstellen eines benutzerdefinierten Plugins:

  1. Erstellen Sie die Haupt-Plugin-Datei
  2. Backend-Optionen hinzufügen
  3. Frontend-Optionen hinzufügen

Die Haupt-Plugin-Datei selbst sollte die Backend- und Frontend-Dateien für das benutzerdefinierte Plugin enthalten. Dann können Sie die Backend-Optionen des Plugins gefolgt von seinen Frontend-Optionen hinzufügen. Wir haben ein benutzerdefiniertes Plugin erstellt, um Elemente der Produktseite auszublenden. Sie können diese Dateien jedoch weiter modifizieren, um das Plugin mit den speziellen Funktionen zu erstellen, die Sie benötigen.

Wenn Sie dennoch ein dediziertes Plugin verwenden möchten, können Sie dies auch tun. Aber im Falle eines kostenpflichtigen Plugins müssen Sie das Plugin manuell installieren. Sie können sogar Plugins wie WooCommerce Direct Checkout und WooCommerce Checkout Manager verwenden, um Elemente auf anderen Seiten wie der Checkout-Seite auszublenden.

In der Zwischenzeit sind hier einige weitere unserer Beiträge, die Sie interessieren könnten:

  • Die besten WooCommerce-Checkout-Plugins
  • So erstellen Sie einen WooCommerce Direct Checkout-Link
  • Beste Plugins zum automatischen Vervollständigen von WooCommerce-Bestellungen

Wir hoffen, dass Sie jetzt ohne Probleme ein benutzerdefiniertes Plugin in WooCommerce entwickeln können. Bitte teilen Sie uns Ihre Erfahrungen in den Kommentaren mit.