Vytvorte modul Divi 5 pomocou rozhrania Module API

by | WordPress

Ak ste niekedy strávili 30 minút „hraním sa“ so shortcode, len aby ste si uvedomili, že je nemožné ho správne nastaviť vo Visual Builderi, už ste pocítili potrebu skutočného Divi 5 modulu.

Problém / Potreba

Bežná potreba blogerov a redakčných tímov: zobraziť opakovane použiteľné pole (napr. „Poznámka autora“, „Vyhlásenie o odmietnutí zodpovednosti“, „Kontrolný zoznam“, „Výzva na akciu v newsletteri“) s jednoduchými možnosťami (názov, text, ikona, farba, odkaz) a zároveň zachovať:

  • vizuálna úprava v Divi 5 (nie nepriehľadné pole „shortcode“)
  • štýly zodpovedajúce vášmu dizajnovému systému,
  • efektívne vykresľovanie (žiadny zbytočný JS),
  • udržiavateľný kód (žiadne roztrúsené úryvky).

Nakoniec budete vedieť, ako vytvoriť plugin WordPress Tento program zaregistruje vlastný modul Divi 5 prostredníctvom rozhrania Module API, pridá polia, generuje HTML kód (PHP) na strane servera a načíta čistý CSS kód. Získate tiež metódu testovania a realistický kontrolný zoznam na riešenie problémov.

Rýchle zhrnutie

  • Na strane používateľského rozhrania vytvoríme „tichý“ plugin WordPress, ktorý zaznamenáva iba modul Divi 5.
  • Definujeme polia modulu (title, content, style, link) a ich predvolené hodnoty.
  • Modul sprístupňujeme v PHP s príslušným escapingom/sanitizáciou (WordPress 6.9.4 + PHP 8.1+).
  • Načítame minimálny CSS kód cez wp_enqueue_scripts (a vyhýbame sa zbytočným globálnym dotazom).
  • Plánujeme zahrnúť bezpečnostné opatrenia: overenie, či je Divi 5 aktívny, kompatibilita vyrovnávacej pamäte, časté chyby.

Kedy použiť toto riešenie

  • Máte stránku používajúcu Divi 5 a chcete „čistý“ opakovane použiteľný komponent (modul) namiesto shortcode.
  • Tímu musíte poskytnúť možnosti úprav (farby, varianty, odkaz) bez toho, aby ste im dovolili narušiť rozloženie.
  • Máte viacero stránok Divi a chcete zabaliť modul do verziovaného (Git) opakovane použiteľného pluginu.
  • Chcete stabilné vykresľovanie na front-ende (PHP) a nie fragmentovanú logiku medzi shortcodes, widgetmi a inline CSS.

Kedy toto riešenie NEPOUŽÍVAŤ

  • Ak nepoužívate Divi 5 (alebo stále migrujete z Divi 4): začnite stabilizáciou nástroja na tvorbu frameworkov. Modul Divi 5 nepomôže stránke, ktorá je stále na hybridnom balíku.
  • Potrebujete jednoduchý blok statického obsahu: a Diviho knižnica (uložené rozloženie) je často postačujúce.
  • Potrebujete univerzálny komponent (Gutenberg, Elementor, Avada, Divi): uprednostnite blok Gutenberg + štýly a potom v prípade potreby pridajte špecifické integrácie.
  • Potrebujete zobraziť vysoko dynamické dáta (externé API, vyhľadávanie, filtre): modul by mohol byť vhodný, ale budete musieť zvážiť ukladanie do vyrovnávacej pamäte, časové limity a prípadne aj koncový bod REST. Nezačínajte s modulom, ak sú vaším hlavným problémom dáta.

Predpoklady / pred začatím

Cieľový kontext: WordPress 6.9.4 (apríl 2026) a PHP 8.1+. Netestujte to na PHP 7.x: stratíte čas syntaktickými chybami a závislosťami.

  • Prostredie miestny rozvoj WP-CLI + testovacia stránka (LocalWP, DDEV, Docker… ako chcete).
  • Divi 5 nainštalovaný a aktívny (najnovšia stabilná verzia).
  • Prístup cez FTP/SSH alebo správca súborov na nahranie pluginu.
  • Záloha (minimálne súbory + základňa) ak upravujete existujúcu stránku.

Užitočné nástroje:

Bezpečnosť: Modul Divi dokáže zobraziť bohatý obsah. Hlavným rizikom, ktoré vidím počas auditov, je zavedenie nefiltrovaného HTML (XSS) prostredníctvom zle spravovaného textového poľa. Preto si explicitne vyberiete, čo povolíte (obyčajný text vs. HTML).

Naivný prístup (a prečo sa mu vyhnúť)

Čo často vidím na stránkach Divi: krátky kód v functions.phpPotom modul Divi „Kód“, ktorý vloží shortcode, a nakoniec nejaký CSS v „Možnosti témy > Vlastné CSS“. Funguje to… až do dňa, keď:

  • Téma sa aktualizuje a kód zmizne (ak neexistuje podradená téma).
  • Editor poruší shortcode (úvodzovky, atribúty),
  • CSS sa stáva nezvládnuteľným (špecifickosť, kolízie),
  • Máme zraniteľnosť XSS prostredníctvom neuniknutého atribútu.

Naivný príklad (nekopírovať):

<?php
// MAUVAIS EXEMPLE : shortcode + HTML non échappé + insertion dans un module Code.
add_shortcode('author_note', function($atts, $content = '') {
    $atts = shortcode_atts([
        'title' => 'Note',
        'color' => '#ffcc00',
    ], $atts);

    // Problème : $atts['title'] et $content sortent tels quels => XSS possible.
    return '<div class="author-note" style="border-color:' . $atts['color'] . '">
        <h4>' . $atts['title'] . '</h4>
        <div>' . $content . '</div>
    </div>';
});

Problém pramení z dvoch vecí: chýbajúcej escaping/sanitization a chýbajúcej natívnej integrácie do buildera (žiadne UI, žiadny čistý náhľad, žiadne verzované štýly).

Správny prístup – podrobný návod

Cieľ: modul „Editorial insert“ (titulok + text + variant + odkaz) použiteľný v Divi 5, vykreslený na strane servera v PHP so správne nahraným CSS.

Krok 1 – Vytvorte špecializovaný plugin (nie vo functions.php)

Vytvorte priečinok:

wp-content/plugins/bpcab-divi5-module/

Potom hlavný súbor:

wp-content/plugins/bpcab-divi5-module/bpcab-divi5-module.php

Potom ho aktivujte v administrátorskom paneli. Na profesionálnej webovej stránke uprednostňujem plugin pred podradenou témou pre tento typ funkcionality: je prenosný a verzovateľný.

Krok 2 – Pridajte detekciu „Divi 5 aktívny“

Divi načítava svoje triedy a API modulov iba v určitých kontextoch. Ak zaregistrujete modul príliš skoro, zobrazí sa chyba „trieda sa nenašla“. Cieľom je zaregistrovať modul iba vtedy, ak je Divi prítomný, a vyhnúť sa poškodeniu front-endu, ak je Divi vypnutý.

Nebudem predstierať, že existuje univerzálna funkcia „is_divi_5()“: vstupné body sa menia v závislosti od verzie. Najrobustnejší prístup, ktorý používam, je otestovať existenciu tried/funkcií Divi v príslušnom čase a ak nie, neurobiť nič (bezpečné pre prípad zlyhania).

Krok 3 – Deklarujte modul prostredníctvom rozhrania Divi 5 Module API

Divi 5 predstavuje modernejšie API modulov (bližšie k systému registrácie „komponentov“). V závislosti od zostavenia je možné registráciu vykonať prostredníctvom triedy PHP alebo prostredníctvom manifestu + JS. V tomto prípade sa zameriavame na jednoduchý a spoľahlivý modul: vykresľovanie v PHP, základné polia.

V praxi Elegant Themes neustále vyvíja svoje API. Moja rada: začnite s ich oficiálnou štruktúrou „Module API“ a prispôsobte ju. Udržujte svoj kód zapuzdrený (menný priestor, triedy), aby absorboval zmeny.

Krok 4 – Vykresľovanie HTML na strane servera (PHP) so správnym escapovaním

Pre redakčnú prílohu:

  • Názov: jednoduchý text (sanitize_text_field).
  • Obsah: buď obyčajný text, alebo filtrovaný HTML (wp_kses_postV nástroji na tvorbu textu používatelia často očakávajú minimálnu úroveň formátovania, takže wp_kses_post je dobrý kompromis.
  • Odkaz: esc_url + validácia.
  • CSS triedy: whitelist (bez divokého zreťazenia).

Krok 5 – Načítajte CSS bez spomalenia všetkých stránok

V ideálnom prípade by ste mali načítať CSS iba vtedy, ak je modul prítomný. Divi má vlastné mechanizmy podmieneného spracovania prvkov, ale líšia sa. Tu je „robustná“ verzia: zaraďte ľahký CSS do frontu globálne (niekoľko riadkov) alebo podmienečne, ak máte spoľahlivý hook na strane Divi.

Na stránkach s agresívnym ukladaním do vyrovnávacej pamäte (LiteSpeed, WP Rocket) som často videl štýly, ktoré sa „nezobrazujú“, pretože materiál je zaradený do frontu príliš neskoro alebo preto, že náhľad nástroja na tvorbu má iný kontext. Preto to udržíme jednoduché a stabilné.

Úplný kód

Nižšie uvedený kód je kompletný plugin. Môžete ho skopírovať a vložiť tak, ako je. Je napísaný pre WordPress 6.9.4 a PHP 8.1+.

Súbor: wp-content/plugins/bpcab-divi5-module/bpcab-divi5-module.php

<?php
/**
 * Plugin Name: BPCAB - Module Divi 5 (Encart éditorial)
 * Description: Ajoute un module custom Divi 5 "Encart éditorial" (titre, contenu, variante, lien) avec rendu PHP.
 * Version: 1.0.0
 * Author: BPCAB
 * Requires at least: 6.9
 * Requires PHP: 8.1
 */

declare(strict_types=1);

namespace BPCABDivi5Module;

if (!defined('ABSPATH')) {
	exit;
}

final class Plugin {
	public const VERSION = '1.0.0';
	public const SLUG    = 'bpcab-divi5-module';

	public static function init(): void {
		add_action('plugins_loaded', [__CLASS__, 'bootstrap'], 20);
		add_action('wp_enqueue_scripts', [__CLASS__, 'enqueue_assets'], 20);
	}

	/**
	 * Bootstrap : enregistre le module uniquement si Divi 5 (ou l'API module attendue) est disponible.
	 */
	public static function bootstrap(): void {
		// Garde-fou : si Divi n'est pas actif, on ne casse rien.
		if (!self::is_divi_module_api_available()) {
			return;
		}

		/**
		 * NOTE:
		 * Divi 5 a fait évoluer ses hooks et points d'entrée pendant la période alpha/beta.
		 * L'approche la plus sûre est d'accrocher l'enregistrement au hook recommandé par Divi
		 * si disponible. À défaut, on tente une initialisation tardive.
		 */
		if (has_action('et_builder_ready')) {
			// Divi expose souvent un hook "ready" (selon versions).
			add_action('et_builder_ready', [__CLASS__, 'register_module']);
		} else {
			// Fallback : on enregistre tard, après init.
			add_action('init', [__CLASS__, 'register_module'], 99);
		}
	}

	/**
	 * Détecte la disponibilité de l'API module Divi.
	 * On évite d'inventer un "helper" : on teste des symboles réellement chargés.
	 */
	private static function is_divi_module_api_available(): bool {
		// Selon les versions, Divi peut exposer des classes côté Builder.
		// Ajustez ces tests si Elegant Themes renomme les namespaces.
		if (class_exists('\ET_Builder_Element')) {
			return true;
		}

		// Dans certains builds, l'API est exposée autrement (fonction/loader).
		if (function_exists('et_builder_init_global_settings')) {
			return true;
		}

		return false;
	}

	/**
	 * Enregistre le module.
	 * IMPORTANT : ce code est conçu pour rester "fail safe" : si une classe Divi manque, on n'explose pas.
	 */
	public static function register_module(): void {
		// Si la classe de base Divi n'existe pas, on stoppe.
		if (!class_exists('\ET_Builder_Module')) {
			return;
		}

		// Déclaration de la classe du module dans le bon scope.
		if (!class_exists(__NAMESPACE__ . '\EditorialBoxModule')) {
			require_once __DIR__ . '/includes/class-editorial-box-module.php';
		}

		// Enregistrement Divi (Divi 4 utilisait et_builder_module_register, Divi 5 peut varier).
		// On tente l'approche la plus compatible : instanciation.
		if (class_exists(__NAMESPACE__ . '\EditorialBoxModule')) {
			new EditorialBoxModule();
		}
	}

	/**
	 * CSS léger pour le rendu front.
	 * Conseil : gardez ce fichier petit. Le gros du styling doit rester dans Divi (Design tab) ou un CSS global.
	 */
	public static function enqueue_assets(): void {
		$css_file = __DIR__ . '/assets/editorial-box.css';
		$css_url  = plugin_dir_url(__FILE__) . 'assets/editorial-box.css';

		if (file_exists($css_file)) {
			wp_enqueue_style(
				self::SLUG,
				$css_url,
				[],
				self::VERSION
			);
		}
	}
}

Plugin::init();

Súbor: wp-content/plugins/bpcab-divi5-module/includes/class-editorial-box-module.php

<?php
declare(strict_types=1);

namespace BPCABDivi5Module;

if (!defined('ABSPATH')) {
	exit;
}

/**
 * Module Divi "Encart éditorial".
 *
 * Ce module est volontairement simple :
 * - champs : titre, contenu, variante, lien
 * - rendu PHP (shortcode_callback) pour un output stable et facilement testable
 */
final class EditorialBoxModule extends ET_Builder_Module {

	public $slug       = 'bpcab_editorial_box';
	public $vb_support = 'on';

	protected $module_credits = [
		'module_uri' => '',
		'author'     => 'BPCAB',
		'author_uri' => '',
	];

	public function init(): void {
		$this->name = esc_html__('Encart éditorial (BPCAB)', 'bpcab-divi5-module');
		$this->icon_path = ''; // Optionnel : icône SVG.
	}

	/**
	 * Définition des champs affichés dans Divi Builder.
	 */
	public function get_fields(): array {
		return [
			'title' => [
				'label'           => esc_html__('Titre', 'bpcab-divi5-module'),
				'type'            => 'text',
				'option_category' => 'basic_option',
				'toggle_slug'     => 'main_content',
				'default'         => esc_html__('À retenir', 'bpcab-divi5-module'),
				'description'     => esc_html__('Titre affiché en haut de l’encart.', 'bpcab-divi5-module'),
			],
			'content' => [
				'label'           => esc_html__('Contenu', 'bpcab-divi5-module'),
				'type'            => 'tiny_mce',
				'option_category' => 'basic_option',
				'toggle_slug'     => 'main_content',
				'default'         => esc_html__('Votre texte ici…', 'bpcab-divi5-module'),
				'description'     => esc_html__('Texte de l’encart (HTML basique autorisé).', 'bpcab-divi5-module'),
			],
			'variant' => [
				'label'           => esc_html__('Variante', 'bpcab-divi5-module'),
				'type'            => 'select',
				'option_category' => 'configuration',
				'toggle_slug'     => 'settings',
				'default'         => 'info',
				'options'         => [
					'info'    => esc_html__('Info', 'bpcab-divi5-module'),
					'warning' => esc_html__('Avertissement', 'bpcab-divi5-module'),
					'tip'     => esc_html__('Astuce', 'bpcab-divi5-module'),
				],
				'description'     => esc_html__('Change la classe CSS pour adapter le style.', 'bpcab-divi5-module'),
			],
			'link_url' => [
				'label'           => esc_html__('Lien (URL)', 'bpcab-divi5-module'),
				'type'            => 'text',
				'option_category' => 'basic_option',
				'toggle_slug'     => 'link',
				'default'         => '',
				'description'     => esc_html__('Optionnel. Ajoute un bouton “En savoir plus”.', 'bpcab-divi5-module'),
			],
			'link_label' => [
				'label'           => esc_html__('Texte du lien', 'bpcab-divi5-module'),
				'type'            => 'text',
				'option_category' => 'basic_option',
				'toggle_slug'     => 'link',
				'default'         => esc_html__('En savoir plus', 'bpcab-divi5-module'),
				'description'     => esc_html__('Libellé du bouton.', 'bpcab-divi5-module'),
			],
		];
	}

	/**
	 * Rendu HTML du module.
	 * Divi appelle cette méthode pour produire le front.
	 */
	public function render($attrs, $content = null, $render_slug = ''): string {
		// Récupération des champs.
		$title      = (string) ($this->props['title'] ?? '');
		$body_html  = (string) ($this->props['content'] ?? '');
		$variant    = (string) ($this->props['variant'] ?? 'info');
		$link_url   = (string) ($this->props['link_url'] ?? '');
		$link_label = (string) ($this->props['link_label'] ?? '');

		// Sanitation.
		$title = sanitize_text_field($title);

		// Divi peut injecter des balises et des shortcodes via tinyMCE.
		// On autorise un HTML "post" standard.
		$body_html = wp_kses_post($body_html);

		// Whitelist stricte sur la variante (évite injection de classes).
		$allowed_variants = ['info', 'warning', 'tip'];
		if (!in_array($variant, $allowed_variants, true)) {
			$variant = 'info';
		}

		$link_url = trim($link_url);
		if ($link_url !== '') {
			$link_url = esc_url_raw($link_url);
			// Si esc_url_raw retourne vide, l'URL est invalide.
			if ($link_url === '') {
				$link_url = '';
			}
		}

		$link_label = sanitize_text_field($link_label);
		if ($link_label === '') {
			$link_label = esc_html__('En savoir plus', 'bpcab-divi5-module');
		}

		// Construction du HTML.
		$classes = [
			'bpcab-editorial-box',
			'bpcab-editorial-box--' . $variant,
		];

		$button_html = '';
		if ($link_url !== '') {
			$button_html = sprintf(
				'<p class="bpcab-editorial-box__cta"><a class="bpcab-editorial-box__button" href="%s">%s</a></p>',
				esc_url($link_url),
				esc_html($link_label)
			);
		}

		// Note : on échappe les attributs et on laisse le body filtré par wp_kses_post.
		$output  = '<div class="' . esc_attr(implode(' ', $classes)) . '">';
		$output .= '<div class="bpcab-editorial-box__inner">';
		if ($title !== '') {
			$output .= '<h3 class="bpcab-editorial-box__title">' . esc_html($title) . '</h3>';
		}
		if ($body_html !== '') {
			$output .= '<div class="bpcab-editorial-box__content">' . $body_html . '</div>';
		}
		$output .= $button_html;
		$output .= '</div></div>';

		return $output;
	}
}

Súbor: wp-content/plugins/bpcab-divi5-module/assets/editorial-box.css

/* CSS minimal : gardez-le léger, le reste peut être géré par Divi (Design tab) */
.bpcab-editorial-box {
  border: 1px solid rgba(0,0,0,.12);
  border-left-width: 6px;
  padding: 16px;
  border-radius: 10px;
  background: #fff;
}

.bpcab-editorial-box__title {
  margin: 0 0 10px 0;
}

.bpcab-editorial-box__content > :first-child {
  margin-top: 0;
}

.bpcab-editorial-box__cta {
  margin-top: 12px;
}

.bpcab-editorial-box__button {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.12);
}

/* Variantes */
.bpcab-editorial-box--info { border-left-color: #2b6cb0; }
.bpcab-editorial-box--warning { border-left-color: #b7791f; }
.bpcab-editorial-box--tip { border-left-color: #2f855a; }

Vysvetlenie kódu

Prečo plugin a nie úryvok?

Divi 5 načítava časť svojho runtime builderu podmienečne. Úryvok kódu vložený do pluginu „Úryvky kódu“ niekedy funguje... potom po aktualizácii alebo vo Visual Builderi prestane fungovať, pretože sa zmení poradie načítavania. Vyhradený plugin poskytuje:

  • jasný vstupný bod (plugins_loaded),
  • samostatné súbory (modul, assety),
  • jednoduché verzovanie
  • čistá deaktivácia.

Detekcia rozhrania Divi API

metóda is_divi_module_api_available() Divi „neháda“, testuje existenciu symbolov. Toto je zámerne konzervatívne. Podľa mojej skúsenosti práve toto zabraňuje závažným chybám, keď:

  • Divi je vypnutý.
  • Pripravovacie prostredie nemá rovnakú verziu,
  • Plugin pre ukladanie do vyrovnávacej pamäte/minifikaciu upravuje zaťaženie nástroja na tvorbu.

Polia modulov

get_fields() deklaruje typické polia Divi:

  • text pre jednoduché hodnoty (názov, popis),
  • tiny_mce pre bohatý obsah (s následným filtrovaním),
  • vybrať pre variant (a teda bielu listinu).

Kľúčový bod: biela listina variantBez neho skončíte s vloženými CSS triedami a chybami, ktoré je „nemožné“ reprodukovať.

Sanitácia a únik (WordPress 6.9.4)

Jednoduché pravidlo: my dezinfikovať na logický vstup (hodnoty) a my uniknúť na výstupe (HTML).

  • sanitize_text_field() pre názov/označenie (jednoduchý text).
  • wp_kses_post() pre obsah vo formáte RTF (umožňuje podmnožinu značiek).
  • esc_url_raw() overiť/uložiť URL adresu, potom esc_url() v čase tlače.
  • esc_attr() pre triedy/atribúty.

Oficiálny dokument: Sanitizácia údajov et Únik údajov.

Načítava sa CSS

Používame wp_enqueue_style s verziou pluginu na uľahčenie zneplatnenia vyrovnávacej pamäte. Referencia: wp_enqueue_style().

Áno, tento CSS kód sa načítava na všetkých stránkach. V reálnom svete je to často prijateľné, ak má súbor veľkosť 1 – 2 KB. Ak ho chcete podmienečne použiť na modul (čo je zložitejšie), nižšie uvediem variáciu.

Varianty a prípady použitia

Variant 1 – Podmienené CSS iba v prípade, že je modul prítomný

Ak ste (právom) posadnutí výkonom, môžete načítať CSS iba vtedy, keď je modul vykreslený. Vzor: zaradenie do frontu za behu render()Funguje to, ale buďte opatrní s vyrovnávacími pamäťami a určitými kontextami builderov.

<?php
// À placer dans render(), avant de retourner $output.
if (!wp_style_is(Plugin::SLUG, 'enqueued')) {
	wp_enqueue_style(
		Plugin::SLUG,
		plugin_dir_url(dirname(__FILE__, 2) . '/bpcab-divi5-module.php') . 'assets/editorial-box.css',
		[],
		Plugin::VERSION
	);
}

Používam ho hlavne vtedy, keď je CSS náročný. Pre modul „insert“ si ponechávam globálne zaradenie do frontu, čo je spoľahlivejšie.

Variant 2 – Pridajte možnosť „ikony“ (SVG) a zároveň zachovajte bezpečnosť

Nenechávajte pre ikonu pole „voľný HTML“. Namiesto toho použite zoznam ikon (slug) a namapujte ich na známy SVG súbor.

<?php
// Exemple de whitelist d'icônes.
$allowed_icons = [
	'info' => '<svg aria-hidden="true" viewBox="0 0 24 24"><path d="..." /></svg>',
	'tip'  => '<svg aria-hidden="true" viewBox="0 0 24 24"><path d="..." /></svg>',
];

$icon_slug = (string) ($this->props['icon'] ?? 'info');
if (!isset($allowed_icons[$icon_slug])) {
	$icon_slug = 'info';
}

// IMPORTANT : SVG inline = surface XSS si non maîtrisé.
// Ici, on n'accepte que des SVG codés en dur côté dev.
$icon_html = $allowed_icons[$icon_slug];

Možnosť 3 – Automaticky načítať autora a dátum (v sekcii „Poznámka autora“)

Bežná prax na blogoch: zobrazovanie kontextualizovanej prílohy v závislosti od článku.

<?php
$post_id = get_the_ID();
$author_id = (int) get_post_field('post_author', $post_id);
$author_name = $author_id ? get_the_author_meta('display_name', $author_id) : '';

$meta_html = '';
if ($author_name !== '') {
	$meta_html = '<p class="bpcab-editorial-box__meta">'
		. esc_html(sprintf(__('Par %s', 'bpcab-divi5-module'), $author_name))
		. '</p>';
}

// Puis injectez $meta_html dans $output, à l’endroit voulu.

Výkon: get_post_field et get_the_author_meta Sú nenáročné, ale ak máte 10 modulov na stránku, monitorujte opakované volania (vyrovnávacia pamäť objektov, statické premenné).

Kompatibilita s Divi 5 / Elementor / Avada

Tento modul je natívny pre Divi 5. Ak vaša stránka používa rôzne tvorcov (toto sa stáva počas redizajnu), máte tri stratégie.

Divi 5

  • OK: modul sa zobrazí v zozname modulov a je konfigurovaný prostredníctvom svojich polí.
  • Ak používate nástroj na tvorbu tém Divi, modul zostáva použiteľný v šablónach.
  • Ak Visual Builder nezobrazuje CSS: test bez vyrovnávacej pamäte/minifíkácie, vynúťte zneplatnenie (pozri časť o riešení problémov).

Elementor

Elementor nedokáže „čítať“ modul Divi. Čistým ekvivalentom na strane Elementoru je vlastný widget (PHP + JS) alebo jednoduchšie povedané, stabilný shortcode + widget „Shortcode“. Ak chcete minimálny most, sprístupnite shortcode, ktorý opakovane používa ten istý renderer.

Príklad: pridanie krátkeho kódu, ktorý volá bežnú funkciu (rovnaký HTML kód, rovnaké triedy):

<?php
// Dans votre plugin, ajoutez un renderer commun et exposez-le en shortcode pour Elementor/Avada.
add_shortcode('bpcab_editorial_box', function($atts, $content = '') {
	$atts = shortcode_atts([
		'title' => 'À retenir',
		'variant' => 'info',
		'link_url' => '',
		'link_label' => 'En savoir plus',
	], $atts);

	// Sanitation/escaping identiques à ceux du module.
	// Retournez le même HTML que render().
	return '<div class="bpcab-editorial-box bpcab-editorial-box--info">...</div>';
});

Upozornenie: ak to urobíte, ponechajte iba jedno miesto, kde sa vytvára HTML kód (inak je divergencia nevyhnutná).

Avada (výrobca fúzií)

Platí rovnaká logika ako pri Elementore: Avada nepoužíva moduly Divi. Môžete:

  • použite bežný skrátený kód,
  • alebo vytvorte prvok Fusion Builder (ktorého údržba trvá dlhšie).

Ak je vaším cieľom prenositeľnosť medzi viacerými buildermi, často odporúčam: blok Gutenberg + štýly + vzory a potom „voliteľné“ integrácie builderov.

Kontroly po inštalácii

  1. Aktivujte doplnok.
  2. Otvorte stránku pomocou Divi 5 Builderu.
  3. Pridajte modul „Editorická vložka (BPCAB)“.
  4. Skontrolujte:
    • Zobrazí sa názov,
    • Obsah TinyMCE vyzerá dobre (odkazy, tučné písmo, zoznamy).
    • Variant mení okraj.
    • Tlačidlo sa zobrazí iba v prípade, že je zadaná URL adresa.
  5. Otestujte na front-ende (nielen v builderi).

Pridajte aj technickú kontrolu:

  • v HTML: prítomnosť class="bpcab-editorial-box bpcab-editorial-box--info",
  • na karte Sieť: CSS editorial-box.css je načítaný (HTTP 200, nie 404).

Ak to nefunguje

Postup, ktorý používam, keď sa modul nezobrazí alebo nič nevykreslí.

1) Skontrolujte umiestnenie súboru

  • Plugin musí byť v wp-content/plugins/bpcab-divi5-module/.
  • Súbor triedy musí byť v includes/class-editorial-box-module.php.
  • CSS v assets/editorial-box.css.

Bežná príčina: rozbalený súbor vytvorí duplicitný priečinok so štýlom bpcab-divi5-module/bpcab-divi5-module/....

2) Povoľte WP_DEBUG pri staging

Postupujte podľa pokynov: Ladenie vo WordPressPozrite sa:

  • wp-content/debug.log
  • Závažné chyby, ako napríklad „Trieda ET_Builder_Module nebola nájdená“ (Divi sa nenačítalo alebo sa pripojilo príliš skoro)

3) Skontrolujte verziu PHP

Ak používate PHP 8.0 alebo staršiu verziu, môžete naraziť na chyby súvisiace s declare(strict_types=1) alebo na prepísanie. Odkaz: Podporované verzie PHP.

4) Ukladanie do vyrovnávacej pamäte / Minifikácia

S týmto problémom som sa často stretol na stránkach s agresívnou minifikáciou CSS/JS:

  • vymažte vyrovnávaciu pamäť pluginu.
  • vymazať vyrovnávaciu pamäť servera/CDN.
  • Vykonajte tvrdú obnovu prehliadača.

5) Trvalé odkazy

Ak po migrácii zaznamenáte nezvyčajné správanie, regenerujte trvalé odkazy (bez ich zmeny): „Nastavenia > Trvalé odkazy > Uložiť“.

Diagnostický graf

symptóm Príčina pravdepodobná overenie Riešenie
Modul sa nezobrazuje v Divi Builderi Divi 5 nie je aktívny alebo nahrávanie prebieha príliš skoro Záznamy: trieda ET_Builder_Module nenájdená Skontrolujte, či je Divi aktívny, ponechajte záznam zapnutý et_builder_ready ak je k dispozícii, inak init neskoro
Modul sa zobrazí, ale na front-ende nič nezobrazuje. Tichá chyba PHP alebo filtrovaný obsah umožniť WP_DEBUG_LOGskontrolovať HTML kód Správne chybaskontrolovať wp_kses_post a prázdne polia
CSS sa neuplatňuje CSS nie je načítaný (404) alebo je uložený v vyrovnávacej pamäti Karta Sieť, stav súboru CSS Skontrolujte cestu, vymažte vyrovnávaciu pamäť a vypnite minifikáciu kvôli testovaniu.
Tlačidlo „Zistiť viac“ sa nikdy nezobrazí URL zneplatnená používateľom esc_url_raw Otestujte celú URL adresu s https:// Opravte URL adresu, vyhnite sa medzerám, skontrolujte pole Divi
„Chyba pri analýze“ po kopírovaní a vložení Chýbajúca bodkočiarka/zátvorka Chyba označuje konkrétny riadok Znova skopírujte súbor, porovnajte ho a použite editor s PHP lint.

Časté úskalia a chyby

Chyba Spôsobiť Riešenie
Kód sa vloží do functions.php nadradenej témy Aktualizácia témy = strata kódu Použite plugin (ako tu) alebo podradenú tému, ale uprednostnite plugin pre modul.
Fatal error: Class "ET_Builder_Module" not found Divi nie je aktívny alebo modul bol zaregistrovaný príliš skoro Po načítaní Divi uložte (ak je k dispozícii hook „ready“) a ponechajte class_exists pred akýmkoľvek predĺžením
Modul sa preruší iba vo Visual Builderi. Rôzny kontext načítavania + vyrovnávacia pamäť/minifikacia Dočasne vypnite optimalizáciu, otestujte ju v režime súkromného prehliadania a potom ju postupne znova zapnite.
CSS/JS sa nenačítava zlý plugin_dir_url / cesta k súboru alebo súbor chýba Skontrolujte URL adresu na karte Sieť a skontrolujte štruktúru adresárov
Obsah „zjedený“ (odstránené značky) wp_kses_post filtruje určité značky/atribúty Prijmite obmedzenie (zabezpečenie) alebo rozšírte bielu listinu prostredníctvom wp_kses_allowed_html (s opatrnosťou)
Editor vkladá nebezpečný HTML kód cez pole Zle filtrované pole / neescapovaný výstup Text: sanitize_text_fieldHTML: wp_kses_postAtribúty: esc_attrURL: esc_url
Modul zmizne po aktualizácii Divi Upravený API modul (už čoskoro) Zapuzdrte svoj kód, vyhnite sa hackerským útokom, postupujte podľa oficiálnej dokumentácie Divi 5 a prispôsobte si hooky/vstupné body.
Testované priamo vo výrobe Riziko prázdnej stránky v prípade závažnej chyby Príprava na prvé nasadenie, zálohovanie a nasadenie s verziami

Tipy na bezpečnosť, výkon a údržbu

Zabezpečenie

  • Vyhnite sa akýmkoľvek poliam „voľného HTML“, ak ich môžete nahradiť možnosťami (výber, prepínače atď.).
  • Ak potrebujete akceptovať HTML, wp_kses_post je dobrý štandard. Referencia: wp_kses_post().
  • Nikdy netlačte URL bez esc_urlReferencia: esc_url().

výkon

  • Udržujte svoj CSS malý. Ak sa váš modul stane „mini frameworkom“, budete za to platiť na každej stránke.
  • Vyhnite sa dodatočným požiadavkám v render()Ak potrebujete načítať metadáta, v prípade potreby použite vyrovnávacie pamäte (vyrovnávaciu pamäť prechodných javov/vyrovnávaciu pamäť objektov). Referencia: Prechodné javy API.
  • Test s povolenou vyrovnávacou pamäťou: niektoré problémy sa vyskytujú iba s concat/minify.

údržba

  • Verziu pluginu (Git) a označte svoje vydania.
  • Pridajte textovú doménu a pripravte sa na internacionalizáciu, ak je stránka viacjazyčná.
  • Sledujte zmeny v Divi 5: rozhranie Module API sa môže vyvíjať. Udržujte svoj kód izolovaný v includes/ a vyhnúť sa implicitným závislostiam.

zdroje

Často kladené otázky

Funguje tento plugin s WordPressom 6.9.4?

Áno. Kód používa stabilné API (hooky, enqueue, sanitácia/escaping) kompatibilné s WordPressom 6.9.4 a PHP 8.1+.

Prečo sa môj modul nezobrazuje v Divi 5?

V 80 % prípadov: Divi nie je v prostredí aktívny alebo sa pri ukladaní modulu nenačíta API modulu. Skontrolujte protokoly a uistite sa, že ET_Builder_Module existuje pred rozšírením triedy.

Prečo nepoužívaš jeden „oficiálny“ Divi hook?

Pretože sa Divi 5 rýchlo vyvíjal a v závislosti od zostavenia sa presný hook môže meniť. Kód je zámerne defenzívny: pokúša sa o hook „ready“, ak nejaký existuje; inak sa zaregistruje neskôr prostredníctvom init.

Môžem pridať možnosti „Dizajnu“ Divi (farby, typografia)?

Áno, ale záleží to od rozhrania Divi 5 API dostupného vo vašej verzii. Moja rada: začnite so stabilným modulom „obsah/nastavenia“ a potom pridajte ovládacie prvky dizajnu, keď overíte kompatibilitu vykresľovania v front-ende a nástroja na tvorbu.

Môžu byť hodnoty modulov uložené v databáze?

Divi ukladá konfiguráciu v obsahu stránky (nástroj na tvorbu štruktúr). Na to nepotrebujete spravovať vlastnú tabuľku.

Ako sa vyhnúť načítaniu CSS všade?

Môžete sa zaradiť do radu render() (variant vyššie). Potom otestujte s ukladaním do vyrovnávacej pamäte/minifikáciou, pretože niektoré nástroje agregujú dáta odlišne medzi front-endom a builderom.

Môžem znova použiť ten istý komponent v Elementore a Avade?

Nie priamo. Modul Divi nie je widget Elementoru. Najjednoduchší most je bežný renderer + shortcode, potom každý builder vloží shortcode (s obmedzeniami, ktoré to znamená z hľadiska UX).

Prečo filtrovať obsah pomocou wp_kses_post ?

Pretože to výrazne znižuje riziko XSS a zároveň umožňuje štandardný redakčný HTML. Ak povolíte viac (SVG, skripty), zväčšíte plochu pre útok.

Vidím 404 na editorial-box.css

Nesprávna cesta alebo chýbajúci súbor. Skontrolujte štruktúru adresárov a uistite sa, že súbor je na správnom mieste. assets/Po rozbalení tiež skontrolujte duplicitné priečinky.

Modul funguje na front-ende, ale nie vo Visual Builderi.

Dočasne vypnite minifikáciu/optimalizáciu, vymažte vyrovnávaciu pamäť a otestujte s minimalistickou témou. Ak to funguje, znova postupne povoľte optimalizácie. Toto je veľmi bežný vzorec na zásobníkoch s agresívnou optimalizáciou.

Môžem tento kód vložiť do pluginu pre úryvky?

Technicky áno, ale vyhýbam sa tomu. Keď Divi zmení poradie načítavania, úryvky sa ťažko diagnostikujú. Špecializovaný plugin je stabilnejší a ľahšie sa nasadzuje.

Súvisiace položky

Vložte komentár

Vaša e-mailová adresa nebude zverejnená. Povinné položky sú označené *

Táto stránka používa Akismet na zníženie spamu. Zistite, ako sa spracúvajú údaje o vašich komentároch.