Divi 5 modul létrehozása a Module API használatával

by | WordPress

Ha valaha is eltöltöttél már 30 percet egy rövidkód "batchingjával", hogy aztán rájöjj, hogy lehetetlen megfelelően formázni a Visual Builderben, akkor máris érezted, hogy szükséged van egy igazi Divi 5 modulra.

A probléma / A szükséglet

Bloggerek és szerkesztői csapatok körében gyakori igény: egy újrafelhasználható mező (pl. „Szerzői megjegyzés”, „Jogi nyilatkozat”, „Ellenőrzőlista”, „Hírlevélre való cselekvésre ösztönzés”) megjelenítése egyszerű opciókkal (cím, szöveg, ikon, szín, link), miközben a következőket is megtartják:

  • vizuális szerkesztés a Divi 5-ben (nem egy átlátszatlan „rövidkód” mező),
  • a tervezési rendszereddel összhangban lévő stílusok,
  • hatékony renderelés (nincs felesleges JS),
  • karbantartható kód (nincsenek szétszórt kódrészletek).

Végül megtudod, hogyan kell plugint létrehozni. WordPress Ez a program regisztrál egy egyéni Divi 5 modult a Module API-n keresztül, hozzáad mezőket, létrehozza a szerveroldali HTML-t (PHP) és betölti a tiszta CSS-t. Emellett egy tesztelési módszert és egy reális hibaelhárítási ellenőrzőlistát is kapsz.

Gyors összefoglaló

  • Létrehozunk egy "csendes" bővítményt a felhasználói felület oldalán. WordPress, amely csak egy Divi 5 modult rögzít.
  • Definiáljuk a modul mezőit (cím, tartalom, stílus, link) és azok alapértelmezett értékeit.
  • A modult megfelelő escape/fertőtlenítéssel PHP-ben (WordPress 6.9.4 + PHP 8.1+) tesszük elérhetővé.
  • Minimális CSS-t töltünk be a következőn keresztül: wp_enqueue_scripts (és kerüljük a felesleges globális lekérdezéseket).
  • Biztonsági intézkedéseket tervezünk beépíteni: a Divi 5 aktív állapotának ellenőrzése, gyorsítótár-kompatibilitás, gyakori hibák.

Mikor kell használni ezt a megoldást

  • Van egy Divi 5-öt használó weboldalad, és egy „tiszta”, újrafelhasználható komponenst (modult) szeretnél rövidkód helyett.
  • Szerkesztési lehetőségeket (színek, változatok, link) kell adnod a csapatnak anélkül, hogy hagynád, hogy tönkretegyék az elrendezést.
  • Több Divi webhelyed van, és egy modult egy verziózott (Git), újrafelhasználható bővítménybe szeretnél csomagolni.
  • Stabil megjelenítést szeretnél a front-enden (PHP), nem pedig egy töredezett logikát a rövidkódok, widgetek és beágyazott CSS között.

Mikor NEM szabad ezt a megoldást használni

  • Ha nem használsz Divi 5-öt (vagy még mindig Divi 4-ről migrálsz): kezdd a builder stabilizálásával. A Divi 5 modul nem segít egy olyan webhelyen, amely még hibrid stacken fut.
  • Az Ön igényei egy egyszerű statikus tartalomblokkot tartalmaznak: egy Divi Könyvtár (mentett elrendezés) gyakran elegendő.
  • Szükséged van egy univerzális komponensre (Gutenberg, Elementor, Avada, Divi): priorizálj egy Gutenberg blokkot + stílusokat, majd adj hozzá specifikus integrációkat, ha szükséges.
  • Nagyon dinamikus adatokat kell megjelenítened (külső API, keresés, szűrők): egy modul megfelelő lehet, de figyelembe kell venned a gyorsítótárazást, az időtúllépéseket és esetleg egy REST végpontot. Ne kezdj modullal, ha a fő problémád az adatok.

Előfeltételek / kezdés előtt

Célkontextus: WordPress 6.9.4 (2026. április) és PHP 8.1+. Ne teszteld PHP 7.x-en: időt pazarolsz a szintaktikai hibákra és a függőségekre.

  • Egy környezet helyi fejlesztés WP-CLI + egy tesztoldal (LocalWP, DDEV, Docker… ahogy neked tetszik).
  • Divi 5 telepítve és aktív (legújabb stabil verzió).
  • FTP/SSH hozzáférés vagy fájlkezelő egy bővítmény feltöltéséhez.
  • Biztonsági mentés (legalább fájlok + bázis) ha egy meglévő webhelyet módosít.

Hasznos eszközök:

Biztonság: A Divi modul képes gazdag tartalmat megjeleníteni. Az auditok során a fő kockázatot a szűretlen HTML (XSS) bevezetése jelenti egy rosszul kezelt „szöveg” mezőn keresztül. Ezért explicit módon kell kiválasztani, hogy mit engedélyez (sima szöveg vs. HTML).

A naiv megközelítés (és miért kerülendő)

Amit gyakran látok a Divi oldalakon: egy rövidkód a functions.phpAztán egy Divi „Kód” modul, ami beilleszti a rövidkódot, és végül némi CSS-t a „Témabeállítások > Egyéni CSS” menüpontban. Működik… egészen addig a napig, amíg:

  • A téma frissül, és a kód eltűnik (ha nincs gyermektéma).
  • Egy szerkesztő felbontja a rövidkódot (idézőjelek, attribútumok),
  • A CSS kezelhetetlenné válik (specifikusság, ütközések),
  • Egy nem escaped attribútum miatt XSS sebezhetőséget találtunk.

Naiv példa (ne reprodukálja):

<?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>';
});

A probléma két dologból fakad: az escape/fertőtlenítés hiányából, valamint a builderbe való natív integráció hiányából (nincs felhasználói felület, nincs tiszta előnézet, nincsenek verziózott stílusok).

A helyes megközelítés – lépésről lépésre bemutató

Cél: egy Divi 5-ben használható „Szerkesztői beillesztés” modul (cím + szöveg + változat + link), szerveroldali megjelenítés PHP-ben, megfelelően betöltött CSS-sel.

1. lépés – Hozz létre egy dedikált bővítményt (ne a functions.php fájlban)

Hozz létre egy mappát:

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

Aztán egy fő fájl:

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

Ezután aktiváld az admin felületen. Egy professzionális weboldalon jobban szeretem a bővítményeket, mint a gyermek témákat az ilyen típusú funkciókhoz: hordozható és verziózható.

2. lépés – „Divi 5 aktív” észlelés hozzáadása

A Divi csak bizonyos kontextusokban tölti be az osztályait és a modul API-ját. Ha túl korán regisztrálod a modult, „osztály nem található” hibákat kapsz. Az ötlet az, hogy csak akkor regisztráld a modult, ha a Divi jelen van, és elkerüld a kezelőfelület összeomlását, ha a Divi le van tiltva.

Nem fogom azt állítani, hogy létezik univerzális "is_divi_5()" függvény: a verziótól függően a belépési pontok változnak. A legrobusztusabb megközelítés, amit használok, az, hogy a megfelelő időpontban tesztelem a Divi osztályok/függvények létezését, és ha nem, akkor nem teszek semmit (hibabiztos).

3. lépés – A modul deklarálása a Divi 5 modul API-ján keresztül

A Divi 5 egy modernebb modul API-t vezet be (közelebb egy „komponens” regisztrációs rendszerhez). A buildtől függően a regisztráció PHP osztályon vagy manifest + JS-en keresztül történhet. Itt egy egyszerű és megbízható modulra törekszünk: PHP renderelés, alapvető mezők.

A gyakorlatban az Elegant Themes folyamatosan fejleszti az API-ját. Azt tanácsolom: kezdd a hivatalos "Modul API" struktúrájukkal, és igazítsd azt. A kódot tartsd csomagolt formában (névtér, osztályok), hogy magába szívja a változásokat.

4. lépés – Szerveroldali (PHP) HTML-megjelenítés helyes escape-jellel

Szerkesztőségi beküldéshez:

  • A cím: egyszerű szöveg (sanitize_text_field).
  • A tartalom: vagy sima szöveg, vagy szűrt HTML (wp_kses_postEgy szerkesztőben a felhasználók gyakran elvárnak egy minimális formázási szintet, így wp_kses_post jó kompromisszumnak számít.
  • A link: esc_url + validáció.
  • CSS osztályok: whitelist (nincs wild összefűzés).

5. lépés – CSS betöltése anélkül, hogy az összes oldal lelassulna

Ideális esetben csak akkor kell betölteni a CSS-t, ha a modul jelen van. A Divi-nek megvannak a saját feltételes eszközmechanizmusai, de ezek eltérőek. Íme egy „robusztus” verzió: helyezz sorba egy könnyű CSS-t globálisan (néhány sorral), vagy feltételesen, ha van egy megbízható hook a Divi oldalán.

Agresszív gyorsítótárazást alkalmazó oldalakon (LiteSpeed, WP Rocket) gyakran láttam olyan stílusokat, amelyek „nem jelennek meg”, mert az elem túl későn kerül sorba, vagy mert a készítő előnézetének más a kontextusa. Ezért egyszerűen és stabilan fogjuk kezelni.

Teljes kód

Az alábbi kód egy komplett bővítmény. Kimásolhatod és beillesztheted így, ahogy van. WordPress 6.9.4 és PHP 8.1+ verziókhoz íródott.

Fájl: 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();

Fájl: 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;
	}
}

Fájl: 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; }

Kód magyarázata

Miért egy bővítmény, és nem egy kódrészlet?

A Divi 5 a futásidejű builderének egy részét feltételesen tölti be. Egy „Kódrészletek” bővítménybe beillesztett kódrészlet néha működik... majd egy frissítés után vagy a Visual Builderben elromlik, mert a betöltési sorrend megváltozik. Egy dedikált bővítmény a következőket biztosítja:

  • egyértelmű belépési pont (plugins_loaded),
  • különálló fájlok (modul, eszközök),
  • egy egyszerű verziókezelés
  • tiszta deaktiválás.

Divi API észlelés

az eljárás is_divi_module_api_available() A Divi nem „találgat”, hanem szimbólumok létezését vizsgálja. Ez szándékosan konzervatív. Tapasztalataim szerint ez akadályozza meg a végzetes hibákat, amikor:

  • Divi le van tiltva.
  • Egy átmeneti környezet nem rendelkezik ugyanazzal a verzióval,
  • Egy gyorsítótárazó/minimifikáló bővítmény módosítja a builder betöltését.

Modulmezők

get_fields() tipikus Divi mezőket deklarál:

  • szöveg egyszerű értékek esetén (cím, leírás),
  • apró_mce gazdag tartalom esetén (későbbi szűréssel),
  • válasszuk egy változathoz (és így egy fehérlistához).

A lényeg: a fehérlista variantEnélkül befecskendezett CSS osztályokkal és olyan hibákkal találod szembe magad, amelyeket "lehetetlen" reprodukálni.

Szaniterárium és menekülés (WordPress 6.9.4)

Egyszerű szabály: mi fertőtlenít a logikai bemenetre (értékekre) és mi menekülés a kimeneten (HTML).

  • sanitize_text_field() címhez/címkéhez (egyszerű szöveg).
  • wp_kses_post() gazdag szöveges tartalomhoz (címkék egy részhalmazát engedélyezi).
  • esc_url_raw() egy URL érvényesítéséhez/tárolásához, majd esc_url() a nyomtatás idején.
  • esc_attr() osztályokhoz/attribútumokhoz.

Hivatalos dokumentum: Adattisztítás et Adatok menekülése.

CSS betöltése

Használjuk wp_enqueue_style egy bővítmény verzióval a gyorsítótár érvénytelenítésének megkönnyítésére. Referencia: wp_enqueue_style().

Igen, ez a CSS minden oldalon betöltődik. A valós használatban ez gyakran elfogadható, ha a fájl mérete 1–2 KB. Ha feltételesen szeretnéd alkalmazni a modulra (ami összetettebb), akkor alább bemutatok egy variációt.

Változatok és használati esetek

1. változat — Feltételes CSS csak akkor, ha a modul jelen van

Ha (jogosan) a teljesítmény megszállottja vagy, akkor a CSS-t csak akkor töltheted be, ha a modul renderelve van. A minta: menet közben sorba állítás render()Működik, de légy óvatos a gyorsítótárakkal és bizonyos építői kontextusokkal.

<?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
	);
}

Főleg akkor használom, ha a CSS nehéz. Egy "insert" modulhoz megtartom a globális sorba állítást, ami megbízhatóbb.

2. változat – „Ikon” (SVG) opció hozzáadása a biztonság megőrzése mellett

Ne hagyj „ingyenes HTML” mezőt egy ikonnak. Ehelyett használj ikonok listáját (slug), és rendeld őket egy ismert SVG-hez.

<?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];

3. lehetőség – A szerző és a dátum automatikus lekérése (a „Szerzői megjegyzés” részben)

Blogokon bevett gyakorlat: a cikktől függően kontextualizált betétlap megjelenítése.

<?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.

Teljesítmény: get_post_field et get_the_author_meta Könnyűek, de ha oldalanként 10 modulod van, figyeld az ismétlődő hívásokat (objektum-gyorsítótár, statikus változók).

Divi 5 / Elementor / Avada kompatibilitás

Ez a modul a Divi 5 natív része. Ha az oldalad több buildert is használ (ez az újratervezés során történik), három stratégiád van.

Divi 5

  • OK: a modul megjelenik a modulok listájában, és a mezőin keresztül konfigurálva van.
  • Ha a Divi sablonkészítőt használod, a modul továbbra is használható marad a sablonokban.
  • Ha a Visual Builder nem jeleníti meg a CSS:tesztet gyorsítótár/minifikáció nélkül, akkor kényszerítsd az érvénytelenítést (lásd a hibaelhárítási részt).

Elementor

Az Elementor nem tud "olvasni" egy Divi modult. Az Elementor oldalán ennek tiszta megfelelője egy egyéni widget (PHP + JS), vagy egyszerűbben egy stabil rövidkód + egy "Rövidkód" widget. Ha minimális hidat szeretnél, akkor tegyél közzé egy olyan rövidkódot, amely ugyanazt a renderelőt használja újra.

Példa: egy rövid kód hozzáadása, amely egy közös függvényt hív meg (ugyanaz a HTML, ugyanazok az osztályok):

<?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>';
});

Figyelem: ha ezt teszed, csak egy helyet hagyj meg, ahol a HTML épül fel (különben az eltérés elkerülhetetlen).

Avada (fúziós építő)

Ugyanaz a logika érvényesül, mint az Elementornál: az Avada nem használ Divi modulokat. A következőket teheti:

  • használjon egy gyakori rövidkódot,
  • vagy hozz létre egy Fusion Builder elemet (aminek a karbantartása tovább tart).

Ha a célod a több builderrel való hordozhatóság, gyakran ajánlom a Gutenberg blokkot + stílusokat + mintákat, majd az „opcionális” builder integrációkat.

Telepítés utáni ellenőrzések

  1. Aktiválja a bővítményt.
  2. Nyisson meg egy oldalt a Divi 5 Builderrel.
  3. Adja hozzá a „Szerkesztői beillesztés (BPCAB)” modult.
  4. Ellenőrzés:
    • Megjelenik a cím,
    • A TinyMCE tartalom jól néz ki (linkek, félkövér betűtípus, listák).
    • A változat megváltoztatja a határt.
    • A gomb csak akkor jelenik meg, ha meg van adva egy URL.
  5. Tesztelés a front-enden (nem csak a builderben).

Ezenkívül adjon hozzá egy műszaki ellenőrzést is:

  • HTML-ben: a jelenléte class="bpcab-editorial-box bpcab-editorial-box--info",
  • a Hálózat lapon: a CSS editorial-box.css be van töltve (HTTP 200, nem 404).

Ha ez nem működik

Az általam alkalmazott eljárás akkor van, ha egy modul nem jelenik meg, vagy nem jelenít meg semmit.

1) Ellenőrizze a fájl helyét

  • A bővítménynek benne kell lennie wp-content/plugins/bpcab-divi5-module/.
  • Az osztályfájlnak a következő helyen kell lennie: includes/class-editorial-box-module.php.
  • CSS-ben assets/editorial-box.css.

Gyakori ok: a kicsomagolt fájl a stílus egy duplikált mappáját hozza létre. bpcab-divi5-module/bpcab-divi5-module/....

2) Engedélyezze a WP_DEBUG-ot a tesztelés során

Kövesd az utasításokat: Hibakeresés a WordPress szolgáltatásbanNézze:

  • wp-content/debug.log
  • Végzetes hibák, például „Az ET_Builder_Module osztály nem található” (a Divi nincs betöltve, vagy túl korán aktiválódik)

3) Ellenőrizd a PHP verzióját

Ha PHP 8.0-s vagy korábbi verziót használ, hibákba ütközhet a következők miatt: declare(strict_types=1) vagy gépelésekre. Hivatkozás: PHP támogatott verziók.

4) Gyorsítótárazás / Minimizálás

Gyakran találkoztam ezzel a problémával az agresszív CSS/JS tömörítést alkalmazó oldalakon:

  • töröld a bővítmény gyorsítótárát.
  • törölje a szerver/CDN gyorsítótárát.
  • Hajtson végre egy kemény böngészőfrissítést.

5) Állandó linkek

Ha a migráció után furcsa viselkedést tapasztal, generálja újra a permalinkeket (módosítás nélkül): „Beállítások > Permalinkek > Mentés”.

Diagnosztikai táblázat

tünet Valószínű ok igazolás Megoldás
A modul nem jelenik meg a Divi Builderben A Divi 5 nem aktív, vagy a felvételi horog túl korán kezdődik Naplók: osztály ET_Builder_Module nem talált Ellenőrizd, hogy a Divi aktív-e, és tartsd nyilván a bejegyzést. et_builder_ready ha elérhető, egyébként init késő
A modul megjelenik, de a kezelőfelületen nem jelenít meg semmit. Csendes PHP hiba vagy szűrt tartalom engedélyezése WP_DEBUG_LOGellenőrizze a HTML-t Helyes a hiba, jelölje be wp_kses_post és üres mezők
A CSS nem alkalmazható A CSS nincs betöltve (404) vagy gyorsítótárban van Hálózat fül, CSS fájl állapota Ellenőrizd az elérési utat, ürítsd ki a gyorsítótárat, és tiltsd le a tömörítést tesztelés céljából.
A „További információ” gomb soha nem jelenik meg URL érvénytelenítve a következő által: esc_url_raw Teljes URL tesztelése https:// használatával Javítsa ki az URL-t, kerülje a szóközöket, és ellenőrizze a Divi mezőt
„Elemzési hiba” másolás-beillesztés után Hiányzó pontosvessző/zárójel A hiba egy adott sort jelez Másold le újra a fájlt, hasonlítsd össze, és használj egy szerkesztőt PHP lint-tel.

Gyakori buktatók és hibák

Hiba Okoz Megoldás
A kód be van illesztve a functions.php a szülőtéma Témafrissítés = kódvesztés Használj bővítményt (mint itt) vagy gyermektémát, de inkább egy modulhoz való bővítményt válassz.
Fatal error: Class "ET_Builder_Module" not found A Divi nem aktív, vagy a modul túl korán regisztrálva van. A Divi betöltése után mentsd el (ha van, húzd be a „kész” jelölést), és tarts meg egyet class_exists bármilyen hosszabbítás előtt
A modul csak a Visual Builderben hibásodik meg. Eltérő betöltési környezet + gyorsítótár/minimifikáció Ideiglenesen tiltsd le az optimalizálást, teszteld privát böngészési módban, majd fokozatosan engedélyezd újra.
A CSS/JS nem töltődik be rossz plugin_dir_url / fájl elérési út, vagy hiányzik a fájl Ellenőrizd az URL-t a Hálózat lapon, ellenőrizd a könyvtárstruktúrát
„Megette” a tartalmat (címkék eltávolítva) wp_kses_post szűr bizonyos címkéket/attribútumokat Fogadja el a korlátozást (biztonság) vagy bővítse ki az engedélyezőlistát a következővel: wp_kses_allowed_html (óvatosan)
Egy szerkesztő veszélyes HTML-t juttat be egy mezőbe Rosszul szűrt mező / nem escaped kimenet Szöveg: sanitize_text_fieldHTML: wp_kses_postTulajdonságok: esc_attrURL-cím: esc_url
A modul eltűnik egy Divi frissítés után API modul módosítva (hamarosan) Kapszulázd be a kódodat, kerüld a hackeléseket, kövesd a hivatalos Divi 5 dokumentációt, és igazítsd a hookokat/belépési pontokat.
Közvetlenül a gyártás során tesztelve Üres oldal kockázata végzetes hiba esetén Első lépésben történő telepítés, biztonsági mentés és verziózott telepítés

Biztonsági, teljesítménybeli és karbantartási tippek

Biztonság

  • Kerüld az „ingyenes HTML” mezőket, ha helyettesítheted őket opciókkal (kijelölés, váltás stb.).
  • Ha HTML-t kell elfogadnia, wp_kses_post egy jó szabvány. Hivatkozás: wp_kses_post().
  • Soha ne nyomtasson ki URL-t anélkül, hogy esc_urlHivatkozás: esc_url().

Teljesítmény

  • Tartsd a CSS-t kicsiben. Ha a modulod egy "mini keretrendszerré" válik, minden oldalon fizetni fogsz érte.
  • Kerülje a további kéréseket render()Ha metaadatokat kell betöltenie, használjon gyorsítótárakat (tranziensek/objektum-gyorsítótár), amikor ez lehetséges. Referencia: API tranziensek.
  • Tesztelés engedélyezett gyorsítótárral: néhány probléma csak a concat/minify paranccsal jelentkezik.

Karbantartás

  • Verziózd a bővítményt (Git) és címkézd meg a kiadásaidat.
  • Adjon hozzá egy szöveges domaint, és készüljön fel a nemzetköziesítésre, ha az oldal többnyelvű.
  • Figyelje a Divi 5 változásait: a Module API fejlődhet. Tartsa a kódját elkülönítve includes/ és kerüljük az implicit függőségeket.

erőforrás

FAQ

Ez a bővítmény működik a WordPress 6.9.4-es verziójával?

Igen. A kód stabil API-kat (hookok, sorba állítás, megtisztítás/escape) használ, amelyek kompatibilisek a WordPress 6.9.4 és a PHP 8.1+ verziókkal.

Miért nem jelenik meg a modulom a Divi 5-ben?

Az esetek 80%-ában: A Divi nem aktív a környezetben, vagy a modul API-ja nincs betöltve a modul mentésekor. Ellenőrizze a naplókat, és győződjön meg arról, hogy ET_Builder_Module létezik az osztály kiterjesztése előtt.

Miért nem használsz egyetlen "hivatalos" Divi hookot?

Mivel a Divi 5 gyorsan fejlődött, és a buildtől függően a pontos hook változhat, a kód szándékosan védekező jellegű: ha létezik egy „kész” hook, akkor megpróbálkozik egy ilyennel; ellenkező esetben később regisztrálódik a következőn keresztül: init.

Hozzáadhatok Divi „Design” opciókat (színek, tipográfia)?

Igen, de ez a verziódban elérhető Divi 5 API-tól függ. A tanácsom: kezdj egy stabil „content/settings” modullal, majd add hozzá a tervezési vezérlőket, miután validáltad a front-end renderelési és builder kompatibilitását.

Tárolhatók a modul értékei az adatbázisban?

A Divi a konfigurációt az oldal tartalmán belül tárolja (struktúraépítő). Ehhez nem kell egyéni táblázatot kezelni.

Hogyan lehet elkerülni a CSS mindenhol való betöltését?

Be lehet állni a sorba render() (fenti változat). Ezután teszteld a gyorsítótárazást/minifikációt, mivel egyes eszközök eltérően összesítik az elemeket a front-end és a builder között.

Felhasználhatom ugyanazt a komponenst az Elementorban és az Avadában?

Nem közvetlenül. Egy Divi modul nem egy Elementor widget. A legegyszerűbb híd egy közös renderelő + egy rövid kód, majd minden builder beilleszti a rövid kódot (azokkal a korlátozásokkal, amelyeket ez a felhasználói élmény szempontjából jelent).

Miért szűri a tartalmat a következővel? wp_kses_post ?

Mert jelentősen csökkenti az XSS kockázatát, miközben továbbra is lehetővé teszi a szabványos szerkesztői HTML-t. Ha többet engedélyezel (SVG, szkriptek), növeled a támadási felületet.

404-eseket látok a editorial-box.css

Hibás elérési út vagy hiányzó fájl. Ellenőrizze a könyvtárszerkezetet, és győződjön meg arról, hogy a fájl a megfelelő helyen van. assets/A kicsomagolás után ellenőrizd a duplikált mappákat is.

A modul a front-enden működik, de a Visual Builderben nem.

Ideiglenesen tiltsd le a minimalizálást/optimalizálást, ürítsd ki a gyorsítótárat, és teszteld egy minimális témával. Ha működik, engedélyezd újra az optimalizálásokat egyenként. Ez egy nagyon gyakori minta az agresszív optimalizálást alkalmazó stackeken.

Beilleszthetem ezt a kódot egy snippets pluginba?

Technikailag igen, de én kerülöm. Amikor a Divi megváltoztatja a betöltési sorrendet, a kódrészletek nehezen diagnosztizálhatók. Egy dedikált bővítmény stabilabb és könnyebben telepíthető.

Kapcsolódó cikkek

Hozzászólás beküldése

E-mail címed nem kerül nyilvánosságra. Kötelező kitölteni *

Ez az oldal Akismet-et használ a levélszemét csökkentése érdekében. Ismerje meg, hogyan dolgozzák fel megjegyzései adatait.