Dynamische Templates in WordPress erzeugen & einbinden

Das “HNP Dyn Template” Plugin ermöglicht es Benutzern, zwischen verschiedenen Vorlagen für eine bestimmte Seite oder einen Beitrag zu wählen. Durch Hinzufügen von Shortcodes können Benutzer auf einfache Weise zwischen verschiedenen Templates hin- und herwechseln, ohne den Code manuell bearbeiten zu müssen.

Code-Beschreibung:

Shortcodes: Das Plugin fügt zwei Shortcodes hinzu: hnp_template_switcher und hnp_template_switcher_buttons.

hnp_template_switcher: Dieser Shortcode rendert den Bereich, in dem das ausgewählte Template dynamisch geladen wird. Es verwendet eine PHP-Include-Anweisung, um die entsprechende Template-Datei zu laden.

hnp_template_switcher_buttons: Dieser Shortcode rendert die Schaltflächen, mit denen Benutzer zwischen den verschiedenen Templates wählen können. Es gibt zwei Schaltflächen, um Template 1 und Template 2 zu laden.

JavaScript: Das Plugin verwendet JavaScript, um auf Benutzerinteraktionen zu reagieren und die Templates dynamisch zu laden. Es bindet Klickereignisse an die Schaltflächen, um die entsprechenden Templates zu laden. Dazu wird eine XMLHttpRequest verwendet, um die Template-Dateien abzurufen und sie dann in den Container zu rendern.

Vorteile und Nutzen:

Benutzerfreundlichkeit: Das Plugin macht es einfach, zwischen verschiedenen Vorlagen zu wechseln, ohne dass Benutzer den Code bearbeiten müssen. Durch die Verwendung von Shortcodes können Benutzer die Schaltflächen und den Template-Bereich einfach in ihre Seiten und Beiträge einfügen.

Flexibilität: Benutzer können verschiedene Templates erstellen und sie je nach Bedarf anpassen. Dies ermöglicht es, verschiedene Layouts und Designs für verschiedene Zwecke zu verwenden.

Zeitersparnis: Durch die Verwendung des Plugins können Benutzer Zeit sparen, da sie nicht jedes Mal den Code ändern müssen, wenn sie ein anderes Template verwenden möchten. Stattdessen können sie einfach die entsprechende Schaltfläche anklicken.

Umfang:

Das Plugin umfasst zwei Hauptkomponenten: die Shortcodes für den Template-Switcher und die zugehörige JavaScript-Funktionalität. Die Shortcodes sind einfach zu verwenden und erfordern nur minimale Konfiguration, während das JavaScript für die dynamische Laden der Templates sorgt.

Lizenz:

Das “HNP Dyn Template” Plugin wird unter der GNU General Public License (GPLv3) vertrieben, was bedeutet, dass es frei verwendet, modifiziert und weitergegeben werden kann, solange die Lizenzbedingungen eingehalten werden.

Download:
WordPress Plugin mit Ajax:

WordPress Plugin ohne Ajax:

WordPress Plugin Code ohne Ajax (schnellere Ladezeiten):

<?php
/*
* Plugin Name: HNP Dyn Template
* Plugin URI: https://homepage-nach-preis.de/
* Description: Erstellt 2 Button welche bei Betätigung die Template-Datei auswechseln. Shortcodes: hnp_template_switcher_buttons und hnp_template_switcher
* Version: 1.1
* Author: HNP
* Author URI: https://homepage-nach-preis.de/
* License: GPLv3
*/

// Shortcode für den Template-Switcher hinzufügen
add_shortcode('hnp_template_switcher', 'hnp_custom_template_switcher_shortcode');

// Funktion zum Rendern des Shortcodes
function hnp_custom_template_switcher_shortcode() {
    ob_start();
    ?>
    <div id="hnp-template-container">
        <!-- Hier wird das Template dynamisch geladen -->
        <?php include_once(plugin_dir_path(__FILE__) . '/templates/hnp_template_1.php'); ?>
    </div>
    <?php
    return ob_get_clean();
}

// Shortcode für die Schaltflächen zum Wechseln der Templates hinzufügen
add_shortcode('hnp_template_switcher_buttons', 'hnp_custom_template_switcher_buttons_shortcode');

// Funktion zum Rendern des Shortcodes für die Schaltflächen
function hnp_custom_template_switcher_buttons_shortcode() {
    ob_start();
    ?>
    <button id="hnp-template1-btn">Template 1 laden</button>
    <button id="hnp-template2-btn">Template 2 laden</button>
    <?php
    return ob_get_clean();
}

// JavaScript zum Schalten der Templates hinzufügen
add_action('wp_footer', 'hnp_custom_template_switcher_js');

function hnp_custom_template_switcher_js() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('hnp-template1-btn').addEventListener('click', function() {
            loadTemplate('hnp_template_1.php');
        });
        document.getElementById('hnp-template2-btn').addEventListener('click', function() {
            loadTemplate('hnp_template_2.php');
        });
    });

	function loadTemplate(templateUrl) {
		var xhr = new XMLHttpRequest();
		xhr.open('GET', '<?php echo plugins_url("templates/", __FILE__); ?>' + templateUrl, true);
		xhr.onreadystatechange = function() {
			if (xhr.readyState === 4 && xhr.status === 200) {
				document.getElementById('hnp-template-container').innerHTML = xhr.responseText;
			}
		};
		xhr.send();
	}

    </script>
    <?php
}

Template 1 Datei:

<?php
/*
Template Name: Template 1
*/
?>

<div class="hnp-template-content">
    <h2>Template 1</h2>
    <p>Dies ist der Inhalt von Template 1.</p>
</div>

Template 2 Datei:

<?php
/*
Template Name: Template 2
*/
?>

<div class="hnp-template-content">
    <h2>Template 2</h2>
    <p>Dies ist der Inhalt von Template 2.</p>
</div>

WordPress Plugin Code mit Ajax:

<?php
/*
* Plugin Name: HNP Dyn Template
* Plugin URI: https://homepage-nach-preis.de/
* Description: Erstellt 2 Button welche bei Betätigung die Template-Datei auswechseln. Shortcodes: hnp_template_switcher_buttons und hnp_template_switcher
* Version: 1.1
* Author: HNP
* Author URI: https://homepage-nach-preis.de/
* License: HNP-Dyn-Template
*/

// Shortcode für den Template-Switcher hinzufügen
add_shortcode('hnp_template_switcher', 'hnp_custom_template_switcher_shortcode');

// Funktion zum Rendern des Shortcodes
function hnp_custom_template_switcher_shortcode() {
    ob_start();
    ?>
    <div id="hnp-template-container">
        <!-- Hier wird das Template dynamisch geladen -->
        <?php include_once(plugin_dir_path(__FILE__) . '/templates/hnp_template_1.php'); ?>
    </div>
    <?php
    return ob_get_clean();
}

// Shortcode für die Schaltflächen zum Wechseln der Templates hinzufügen
add_shortcode('hnp_template_switcher_buttons', 'hnp_custom_template_switcher_buttons_shortcode');

// Funktion zum Rendern des Shortcodes für die Schaltflächen
function hnp_custom_template_switcher_buttons_shortcode() {
    ob_start();
    ?>
    <button id="hnp-template1-btn">Template 1 laden</button>
    <button id="hnp-template2-btn">Template 2 laden</button>
    <?php
    return ob_get_clean();
}

// JavaScript zum Schalten der Templates hinzufügen
add_action('wp_footer', 'hnp_custom_template_switcher_js');

function hnp_custom_template_switcher_js() {
    wp_enqueue_script('hnp-custom-template-switcher', plugin_dir_url(__FILE__) . 'hnp_dyn_template.js', array('jquery'), null, true);

    wp_localize_script('hnp-custom-template-switcher', 'hnpTemplateSwitcher', array(
        'ajaxurl' => admin_url('admin-ajax.php')
    ));
}

// Ajax
add_action('wp_ajax_load_template', 'hnp_load_template_ajax');
add_action('wp_ajax_nopriv_load_template', 'hnp_load_template_ajax');

function hnp_load_template_ajax() {
    $template = isset($_GET['template']) ? $_GET['template'] : '';

    if ($template) {
        // Hier können Sie die Template-Datei laden und den Inhalt zurückgeben
        include(plugin_dir_path(__FILE__) . '/templates/' . $template);
    }

    wp_die();
}

Javascript:

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('hnp-template1-btn').addEventListener('click', function() {
        loadTemplate('hnp_template_1.php');
    });
    document.getElementById('hnp-template2-btn').addEventListener('click', function() {
        loadTemplate('hnp_template_2.php');
    });
});

function loadTemplate(templateUrl) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', hnpTemplateSwitcher.ajaxurl + '?action=load_template&template=' + templateUrl, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById('hnp-template-container').innerHTML = xhr.responseText;
        }
    };
    xhr.send();
}

Template Dateien hierbei identisch.