মডিউল এপিআই ব্যবহার করে একটি ডিভি ৫ মডিউল তৈরি করুন

আপনি যদি কখনও একটি শর্টকোড নিয়ে ৩০ মিনিট ধরে ঘাঁটাঘাঁটি করার পর বুঝতে পারেন যে ভিজ্যুয়াল বিল্ডারে সেটিকে সঠিকভাবে স্টাইল করা অসম্ভব, তাহলে আপনি ইতিমধ্যেই একটি সত্যিকারের ডিভি ৫ মডিউলের প্রয়োজনীয়তা অনুভব করেছেন।

সমস্যাটি / প্রয়োজন

ব্লগার এবং সম্পাদকীয় দলগুলোর একটি সাধারণ প্রয়োজন হলো: সহজ কিছু বিকল্প (শিরোনাম, লেখা, আইকন, রঙ, লিঙ্ক) সহ একটি পুনঃব্যবহারযোগ্য বক্স (যেমন, “লেখকের নোট”, “দাবিত্যাগ”, “চেকলিস্ট”, “নিউজলেটার কল টু অ্যাকশন”) প্রদর্শন করা, এবং একই সাথে নিম্নলিখিত বিষয়গুলো বজায় রাখা:

• Divi 5-এ একটি ভিজ্যুয়াল এডিট (কোনো অস্বচ্ছ “শর্টকোড” ফিল্ড নয়),
• আপনার ডিজাইন সিস্টেমের সাথে সামঞ্জস্যপূর্ণ শৈলী,
• দক্ষ রেন্ডারিং (কোন অপ্রয়োজনীয় JS নেই),
• রক্ষণাবেক্ষণযোগ্য কোড (কোনো বিক্ষিপ্ত কোডখণ্ড নয়)।

অবশেষে, আপনি জানতে পারবেন কীভাবে একটি প্লাগইন তৈরি করতে হয়। ওয়ার্ডপ্রেস এই প্রোগ্রামটি মডিউল এপিআই (Module API) ব্যবহার করে একটি কাস্টম ডিভি ৫ (Divi 5) মডিউল রেজিস্টার করে, ফিল্ড যোগ করে, সার্ভার-সাইড এইচটিএমএল (পিএইচপি) তৈরি করে এবং ক্লিন সিএসএস লোড করে। এছাড়াও আপনি একটি টেস্টিং পদ্ধতি এবং একটি বাস্তবসম্মত ট্রাবলশুটিং চেকলিস্ট পাবেন।

দ্রুত সারসংক্ষেপ

• আমরা UI সাইডে একটি 'সাইলেন্ট' প্লাগইন তৈরি করি। ওয়ার্ডপ্রেস, যা শুধুমাত্র একটি ডিভি ৫ মডিউল রেকর্ড করে।
• আমরা মডিউলের ফিল্ডগুলো (টাইটেল, কন্টেন্ট, স্টাইল, লিঙ্ক) এবং তাদের ডিফল্ট মানগুলো নির্ধারণ করি।
• আমরা যথাযথ এস্কেপিং ও স্যানিটাইজেশন সহ মডিউলটি পিএইচপি-তে উপলব্ধ করি (ওয়ার্ডপ্রেস ৬.৯.৪ + পিএইচপি ৮.১+)।
• আমরা এর মাধ্যমে একটি ন্যূনতম CSS লোড করি wp_enqueue_scripts (এবং আমরা অপ্রয়োজনীয় গ্লোবাল কোয়েরি পরিহার করি)।
• আমরা কিছু সুরক্ষামূলক ব্যবস্থা অন্তর্ভুক্ত করার পরিকল্পনা করছি: ডিভি ৫ সক্রিয় আছে কিনা তার যাচাইকরণ, ক্যাশে সামঞ্জস্যতা এবং ঘন ঘন ত্রুটি।

কখন এই সমাধানটি ব্যবহার করবেন

• আপনার একটি সাইট আছে যা ডিভি ৫ ব্যবহার করে তৈরি এবং আপনি শর্টকোডের পরিবর্তে একটি ‘পরিচ্ছন্ন’ ও পুনঃব্যবহারযোগ্য কম্পোনেন্ট (মডিউল) চান।
• আপনাকে অবশ্যই একটি দলকে লেআউট নষ্ট না করে সম্পাদনার বিকল্প (রঙ, প্রকারভেদ, লিঙ্ক) দিতে হবে।
• আপনার একাধিক Divi সাইট আছে এবং আপনি একটি মডিউলকে ভার্সনযুক্ত (Git) ও পুনঃব্যবহারযোগ্য প্লাগইন হিসেবে প্যাকেজ করতে চান।
• আপনি ফ্রন্ট এন্ডে (পিএইচপি) একটি স্থিতিশীল রেন্ডারিং চান, শর্টকোড, উইজেট এবং ইনলাইন সিএসএস-এর মধ্যে খণ্ডিত লজিক নয়।

কখন এই সমাধানটি ব্যবহার করা উচিত নয়

• আপনি যদি Divi 5 ব্যবহার না করেন (অথবা এখনও Divi 4 থেকে মাইগ্রেট করছেন), তাহলে বিল্ডারটিকে স্থিতিশীল করার মাধ্যমে শুরু করুন। একটি Divi 5 মডিউল এমন কোনো সাইটকে সাহায্য করবে না যা এখনও একটি হাইব্রিড স্ট্যাকে রয়েছে।
• আপনার প্রয়োজন একটি সাধারণ স্থির কন্টেন্টের ব্লক: একটি দিভি লাইব্রেরি (সংরক্ষিত লেআউট) প্রায়শই যথেষ্ট।
• আপনার একটি সার্বজনীন কম্পোনেন্ট (গুটেনবার্গ, এলিমেন্টর, আভাডা, ডিভি) প্রয়োজন: একটি গুটেনবার্গ ব্লক ও স্টাইলকে অগ্রাধিকার দিন, তারপর প্রয়োজন হলে নির্দিষ্ট ইন্টিগ্রেশন যোগ করুন।
• আপনাকে অত্যন্ত পরিবর্তনশীল ডেটা (এক্সটার্নাল এপিআই, সার্চ, ফিল্টার) প্রদর্শন করতে হবে: এক্ষেত্রে একটি মডিউল উপযুক্ত হতে পারে, কিন্তু আপনাকে ক্যাশিং, টাইমআউট এবং সম্ভবত একটি REST এন্ডপয়েন্টের কথা ভাবতে হবে। আপনার মূল সমস্যা যদি ডেটা হয়, তবে মডিউল দিয়ে শুরু করবেন না।

শুরু করার আগে পূর্বশর্তসমূহ /

লক্ষ্য প্রেক্ষাপট: ওয়ার্ডপ্রেস ৬.৯.৪ (এপ্রিল ২০২৬) এবং পিএইচপি ৮.১+। পিএইচপি ৭.x-এ এটি পরীক্ষা করবেন না: সিনট্যাক্স ত্রুটি এবং নির্ভরতার কারণে আপনার সময় নষ্ট হবে।

• একটি পরিবেশ স্থানীয় উন্নয়ন WP-CLI + একটি টেস্ট সাইট (LocalWP, DDEV, Docker… আপনার পছন্দ অনুযায়ী)।
• Divi 5 ইনস্টল এবং সক্রিয় আছে (সর্বশেষ স্থিতিশীল সংস্করণ)।
• প্লাগইন আপলোড করার জন্য FTP/SSH অ্যাক্সেস অথবা একটি ফাইল ম্যানেজার।
• একটি ব্যাকআপ (ন্যূনতম ফাইল + ভিত্তিযদি আপনি কোনো বিদ্যমান সাইট পরিবর্তন করেন।

দরকারী সরঞ্জাম:

• প্লাগইনটি চালু/বন্ধ করতে এবং ক্যাশ পরিষ্কার করতে WP-CLI ব্যবহার করুন।WP-CLI কমান্ড).
• ওয়ার্ডপ্রেস ডিবাগ মোড (স্টেজিং এনভায়রনমেন্টে): ওয়ার্ডপ্রেসে ডিবাগিং.
• নিষ্কাশন ব্যবস্থার জন্য একটি মজবুত ভিত্তি: ডেটা যাচাইকরণ / এস্কেপিং.

নিরাপত্তা: একটি ডিভি মডিউল রিচ কন্টেন্ট প্রদর্শন করতে পারে। অডিটের সময় আমি যে প্রধান ঝুঁকিটি দেখি তা হলো, একটি দুর্বলভাবে পরিচালিত 'টেক্সট' ফিল্ডের মাধ্যমে অপরিশোধিত এইচটিএমএল (XSS) প্রবেশ করানো। তাই, আপনি কী অনুমোদন করবেন (সাধারণ টেক্সট বনাম এইচটিএমএল) তা আপনাকে স্পষ্টভাবে বেছে নিতে হবে।

সরল পন্থা (এবং কেন তা পরিহার করা উচিত)

ডিভি সাইটগুলিতে আমি প্রায়শই যা দেখি: একটি শর্টকোড functions.phpতারপর একটি Divi “Code” মডিউল যা শর্টকোড পেস্ট করে, এবং সবশেষে “Theme Options > Custom CSS”-এ কিছু CSS। এটা কাজ করছিল… সেই দিনটি আসার আগ পর্যন্ত, যেদিন:

• থিমটি আপডেট করা হলে কোডটি অদৃশ্য হয়ে যায় (যদি কোনো চাইল্ড থিম না থাকে)।
• একজন এডিটর শর্টকোডটি ভেঙে দেয় (উদ্ধৃতি চিহ্ন, অ্যাট্রিবিউট),
• CSS নিয়ন্ত্রণ করা কঠিন হয়ে পড়ে (নির্দিষ্টতা, সংঘর্ষ),
• একটি আন-এসকেপড অ্যাট্রিবিউটের মাধ্যমে আমাদের একটি XSS দুর্বলতা রয়েছে।

সরল উদাহরণ (পুনরাবৃত্তি করবেন না):

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

সমস্যাটির মূল কারণ দুটি: এস্কেপিং/স্যানিটাইজেশনের অভাব এবং বিল্ডারের সাথে নেটিভ ইন্টিগ্রেশনের অভাব (কোনো UI নেই, কোনো ক্লিন প্রিভিউ নেই, কোনো ভার্সনযুক্ত স্টাইল নেই)।

সঠিক পদ্ধতি — ধাপে ধাপে নির্দেশিকা

উদ্দেশ্য: ডিভি ৫-এ ব্যবহারযোগ্য একটি “সম্পাদকীয় সংযোজন” মডিউল (শিরোনাম + লেখা + বিকল্প + লিঙ্ক), যা পিএইচপি-তে সার্ভার-সাইডে রেন্ডার করা হবে এবং এতে যথাযথভাবে সিএসএস লোড করা থাকবে।

ধাপ ১ — একটি ডেডিকেটেড প্লাগইন তৈরি করুন (functions.php-তে নয়)

একটি ফোল্ডার তৈরি করুন:

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

তারপর একটি মূল ফাইল:

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

তারপর অ্যাডমিন প্যানেলে এটি সক্রিয় করুন। একটি পেশাদার ওয়েবসাইটে, এই ধরনের কার্যকারিতার জন্য আমি চাইল্ড থিমের চেয়ে প্লাগইন বেশি পছন্দ করি: এটি স্থানান্তরযোগ্য এবং এর বিভিন্ন সংস্করণ তৈরি করা যায়।

ধাপ ২ — একটি “Divi 5 active” ডিটেকশন যোগ করুন

Divi শুধুমাত্র নির্দিষ্ট পরিস্থিতিতেই এর ক্লাস এবং মডিউল এপিআই লোড করে। আপনি যদি আপনার মডিউলটি খুব তাড়াতাড়ি রেজিস্টার করেন, তাহলে "ক্লাস পাওয়া যায়নি" (class not found) এরর পাবেন। মূল উদ্দেশ্য হলো, শুধুমাত্র Divi উপস্থিত থাকলেই মডিউলটি রেজিস্টার করা এবং Divi নিষ্ক্রিয় থাকলে ফ্রন্ট-এন্ডের কার্যকারিতা যাতে ব্যাহত না হয়, তা নিশ্চিত করা।

আমি এমন ভান করব না যে কোনো সার্বজনীন "is_divi_5()" ফাংশন আছে: কারণ ভার্সন ভেদে এন্ট্রি পয়েন্টগুলো পরিবর্তিত হয়। আমি যে সবচেয়ে নির্ভরযোগ্য পদ্ধতিটি ব্যবহার করি তা হলো, সঠিক সময়ে ডিভি ক্লাস/ফাংশনগুলোর অস্তিত্ব পরীক্ষা করা এবং যদি না থাকে, তবে কিছুই না করা (এটি একটি নিরাপদ ব্যবস্থা)।

ধাপ ৩ — Divi 5 মডিউল API ব্যবহার করে মডিউলটি ঘোষণা করুন

Divi 5 একটি আরও আধুনিক মডিউল API চালু করেছে (যা একটি 'কম্পোনেন্ট' রেজিস্ট্রেশন সিস্টেমের কাছাকাছি)। বিল্ডের উপর নির্ভর করে, রেজিস্ট্রেশন একটি PHP ক্লাস অথবা একটি ম্যানিফেস্ট + JS এর ​​মাধ্যমে করা যেতে পারে। এখানে, আমাদের লক্ষ্য একটি সহজ এবং নির্ভরযোগ্য মডিউল: PHP রেন্ডারিং, মৌলিক ফিল্ড।

বাস্তবে, Elegant Themes ক্রমাগত তার API উন্নত করছে। আমার পরামর্শ: তাদের অফিসিয়াল 'মডিউল এপিআই' কাঠামো দিয়ে শুরু করুন এবং সেটিকে নিজের মতো করে মানিয়ে নিন। পরিবর্তনগুলো গ্রহণ করার জন্য আপনার কোডকে এনক্যাপসুলেটেড (নেমস্পেস, ক্লাস) রাখুন।

ধাপ ৪ — সঠিক এস্কেপিং সহ সার্ভার-সাইড (পিএইচপি) এইচটিএমএল রেন্ডারিং

সম্পাদকীয় সংযোজনের জন্য:

• শিরোনাম: সাধারণ পাঠ্য (sanitize_text_field).
• বিষয়বস্তু: হয় সাধারণ টেক্সট অথবা ফিল্টার করা এইচটিএমএল (wp_kses_postবিল্ডারে ব্যবহারকারীরা প্রায়শই একটি ন্যূনতম স্তরের ফরম্যাটিং আশা করেন, তাই wp_kses_post এটি একটি ভালো আপোস।
• লিঙ্কটি: esc_url + বৈধতা যাচাই।
• CSS ক্লাস: হোয়াইটলিস্ট (অযথা সংযোজন নিষিদ্ধ)।

ধাপ ৫ — সব পেজের গতি না কমিয়ে CSS লোড করুন

আদর্শগতভাবে, মডিউলটি উপস্থিত থাকলেই কেবল CSS লোড করা উচিত। Divi-র নিজস্ব শর্তসাপেক্ষ অ্যাসেট প্রক্রিয়া রয়েছে, তবে সেগুলো ভিন্ন ভিন্ন হয়ে থাকে। এখানে একটি "শক্তিশালী" সংস্করণ দেওয়া হলো: একটি হালকা CSS কোড বিশ্বব্যাপী (কয়েক লাইনের) এনকিউ করুন, অথবা Divi-র দিকে যদি আপনার কোনো নির্ভরযোগ্য হুক থাকে তবে শর্তসাপেক্ষে এটি ব্যবহার করুন।

যেসব সাইটে শক্তিশালী ক্যাশিং ব্যবস্থা (যেমন LiteSpeed, WP Rocket) আছে, সেখানে আমি প্রায়ই দেখেছি যে কিছু স্টাইল দেখা যায় না, কারণ অ্যাসেটটি খুব দেরিতে এনকিউ করা হয় অথবা বিল্ডার প্রিভিউয়ের কনটেক্সট ভিন্ন থাকে। তাই আমরা বিষয়টিকে সহজ এবং স্থিতিশীল রাখব।

সম্পূর্ণ কোড

নিচের কোডটি একটি সম্পূর্ণ প্লাগইন। আপনি এটি সরাসরি কপি ও পেস্ট করতে পারেন। এটি ওয়ার্ডপ্রেস ৬.৯.৪ এবং পিএইচপি ৮.১+ এর জন্য লেখা হয়েছে।

ফাইল : 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();

ফাইল : 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;
	}
}

ফাইল : 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; }

কোডের ব্যাখ্যা

প্লাগইন কেন, স্নিপেট নয় কেন?

Divi 5 তার রানটাইম বিল্ডারের কিছু অংশ শর্তসাপেক্ষে লোড করে। "কোড স্নিপেটস" প্লাগইনে পেস্ট করা একটি কোড স্নিপেট কখনও কখনও কাজ করে... কিন্তু কোনো আপডেটের পর বা ভিজ্যুয়াল বিল্ডারে তা ভেঙে যায়, কারণ লোডিং অর্ডার পরিবর্তিত হয়। একটি ডেডিকেটেড প্লাগইন এই সুবিধা প্রদান করে:

• একটি স্পষ্ট প্রবেশ পথ (plugins_loaded),
• পৃথক ফাইল (মডিউল, অ্যাসেট),
• একটি সাধারণ সংস্করণ
• একটি সুষ্ঠু নিষ্ক্রিয়করণ।

ডিভি এপিআই সনাক্তকরণ

পদ্ধতি is_divi_module_api_available() ডিভি অনুমান করে না; এটি সিম্বলের অস্তিত্ব পরীক্ষা করে। এই পদ্ধতিটি ইচ্ছাকৃতভাবে রক্ষণশীল। আমার অভিজ্ঞতায়, নিম্নলিখিত ক্ষেত্রে এটিই মারাত্মক ত্রুটি প্রতিরোধ করে:

• ডিভি নিষ্ক্রিয় করা হয়েছে।
• একটি স্টেজিং এনভায়রনমেন্টে একই সংস্করণ নেই,
• একটি ক্যাশিং/মিনিফিকেশন প্লাগইন বিল্ডারের লোডকে পরিবর্তন করে।

মডিউল ক্ষেত্র

get_fields() সাধারণ Divi ফিল্ড ঘোষণা করে:

• পাঠ সাধারণ মানগুলির জন্য (শিরোনাম, বিবরণ),
• tiny_mce সমৃদ্ধ কন্টেন্টের জন্য (পরবর্তী ফিল্টারিং সহ),
• নির্বাচন করা একটি ভ্যারিয়েন্টের জন্য (এবং সেই কারণে একটি হোয়াইটলিস্টের জন্য)।

মূল বিষয়: হোয়াইটলিস্টে variantএটি ছাড়া, এর ফলে এমন সব ইনজেক্টেড সিএসএস ক্লাস এবং বাগ তৈরি হয়, যেগুলো পুনরায় ঘটানো "অসম্ভব"।

পরিচ্ছন্নতা ও পলায়ন (ওয়ার্ডপ্রেস ৬.৯.৪)

সহজ নিয়ম: আমরা জীবাণুমুক্ত করুন লজিক ইনপুট (মান) এবং আমরা অব্যাহতি আউটপুটে (HTML)।

• sanitize_text_field() শিরোনাম/লেবেলের জন্য (সাধারণ লেখা)।
• wp_kses_post() সমৃদ্ধ টেক্সট কন্টেন্টের জন্য (ট্যাগের একটি উপসেট অনুমোদিত)।
• esc_url_raw() একটি URL যাচাই/সংরক্ষণ করতে, তারপর esc_url() মুদ্রণের সময়।
• esc_attr() ক্লাস/অ্যাট্রিবিউটের জন্য।

সরকারি নথি: ডেটা স্যানিটাইজ করা et পলায়নরত ডেটা.

CSS লোড হচ্ছে

আমরা ব্যবহার করি wp_enqueue_style ক্যাশে বাতিলকরণ সহজ করার জন্য একটি প্লাগইন সংস্করণ সহ। সূত্র: wp_enqueue_style().

হ্যাঁ, এই CSS সব পেজেই লোড হয়। বাস্তব ব্যবহারে, ফাইলের সাইজ ১-২ KB হলে এটি প্রায়শই গ্রহণযোগ্য। যদি আপনি শর্তসাপেক্ষে এটি মডিউলে প্রয়োগ করতে চান (যা আরও জটিল), তবে আমি নিচে এর একটি বিকল্প সমাধান দেব।

বিভিন্ন রূপ এবং ব্যবহারের ক্ষেত্র

সংস্করণ ১ — শুধুমাত্র মডিউলটি উপস্থিত থাকলে শর্তসাপেক্ষ CSS

আপনি যদি পারফরম্যান্স নিয়ে (এবং সঙ্গত কারণেই) অতিরিক্ত সচেতন হন, তাহলে মডিউলটি রেন্ডার করার সময়ই কেবল CSS লোড করতে পারেন। এর ধরণটি হলো: চলার পথেই এনকিউ করা। render()এটি কাজ করে, কিন্তু ক্যাশে এবং নির্দিষ্ট বিল্ডার কনটেক্সটের ক্ষেত্রে সতর্ক থাকুন।

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

আমি এটি মূলত তখনই ব্যবহার করি যখন CSS কোড ভারী হয়। একটি "insert" মডিউলের জন্য, আমি গ্লোবাল এনকিউ (global enqueue) রাখি, যা আরও নির্ভরযোগ্য।

বিকল্প ২ — নিরাপদ থাকার পাশাপাশি একটি “আইকন” (SVG) বিকল্প যোগ করুন

আইকনের জন্য 'ফ্রি এইচটিএমএল' ফিল্ড খালি রাখবেন না। এর পরিবর্তে, আইকনের একটি তালিকা (স্লাগ) ব্যবহার করুন এবং সেগুলোকে একটি পরিচিত SVG-এর সাথে ম্যাপ করুন।

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

বিকল্প ৩ — “লেখকের নোট” অংশে লেখক ও তারিখ স্বয়ংক্রিয়ভাবে সংগ্রহ করুন

ব্লগগুলিতে একটি প্রচলিত রীতি হলো: প্রবন্ধের ওপর নির্ভর করে প্রাসঙ্গিক সংযোজন প্রদর্শন করা।

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

কর্মক্ষমতা : get_post_field et get_the_author_meta এগুলো হালকা, কিন্তু যদি আপনার প্রতি পৃষ্ঠায় ১০টি মডিউল থাকে, তবে বারবার হওয়া কলগুলোর ওপর নজর রাখুন (অবজেক্ট ক্যাশে, স্ট্যাটিক ভেরিয়েবল)।

Divi 5 / Elementor / Avada-এর সাথে সামঞ্জস্যপূর্ণ

এই মডিউলটি ডিভি ৫-এর নিজস্ব। যদি আপনার সাইটে একাধিক বিল্ডার ব্যবহার করা হয় (যা সাইট নতুন করে ডিজাইন করার সময় হয়ে থাকে), তবে আপনার জন্য তিনটি কৌশল রয়েছে।

দিভি ৫

• ঠিক আছে: মডিউলটি মডিউলের তালিকায় দেখা যাচ্ছে এবং এর ফিল্ডগুলোর মাধ্যমে কনফিগার করা হচ্ছে।
• আপনি যদি ডিভি থিম বিল্ডার ব্যবহার করেন, তাহলে মডিউলটি টেমপ্লেটগুলিতে ব্যবহারযোগ্য থাকে।
• যদি ভিজ্যুয়াল বিল্ডার `CSS: test without cache/minification` না দেখায়, তাহলে জোরপূর্বক ইনভ্যালিডেশন করুন (সমস্যা সমাধান বিভাগটি দেখুন)।

Elementor

এলিমেন্টর একটি ডিভি মডিউল "পড়তে" পারে না। এলিমেন্টরের দিক থেকে এর পরিচ্ছন্ন বিকল্প হলো একটি কাস্টম উইজেট (পিএইচপি + জেএস) অথবা, আরও সহজভাবে, একটি স্থিতিশীল শর্টকোড ও একটি "শর্টকোড" উইজেট। আপনি যদি একটি ন্যূনতম সংযোগ চান, তবে এমন একটি শর্টকোড প্রকাশ করুন যা একই রেন্ডারারকে পুনঃব্যবহার করে।

উদাহরণ: একটি শর্টকোড যোগ করা যা একটি সাধারণ ফাংশনকে কল করে (একই HTML, একই ক্লাস):

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

সতর্কীকরণ: আপনি যদি এটি করেন, তবে HTML তৈরির জন্য শুধুমাত্র একটি স্থান রাখুন (অন্যথায় ভিন্নতা অনিবার্য)।

আভাদা (ফিউশন বিল্ডার)

এলিমেন্টরের ক্ষেত্রে যে যুক্তি প্রযোজ্য, এখানেও একই যুক্তি খাটে: আভাডা ডিভি মডিউল ব্যবহার করে না। আপনি যা করতে পারেন:

• একটি সাধারণ শর্টকোড ব্যবহার করুন,
• অথবা একটি ফিউশন বিল্ডার এলিমেন্ট তৈরি করুন (যা রক্ষণাবেক্ষণে বেশি সময় লাগে)।

আপনার লক্ষ্য যদি একাধিক বিল্ডারে ব্যবহারের সুবিধা হয়, তবে আমি প্রায়শই সুপারিশ করি: গুটেনবার্গ ব্লক + স্টাইল + প্যাটার্ন, এবং তারপর “ঐচ্ছিক” বিল্ডার ইন্টিগ্রেশন।

ইনস্টলেশন-পরবর্তী পরীক্ষা

1. প্লাগইনটি সক্রিয় করুন।
2. Divi 5 Builder দিয়ে একটি পেজ খুলুন।
3. “সম্পাদকীয় সংযোজন (BPCAB)” মডিউলটি যোগ করুন।
4. যাচাই করুন:
   • শিরোনামটি প্রদর্শিত হচ্ছে,
   • TinyMCE-এর কন্টেন্ট দেখতে ভালো লাগছে (লিঙ্ক, বোল্ড, তালিকা)।
   • এই সংস্করণটি সীমানা পরিবর্তন করে।
   • বাটনটি শুধুমাত্র একটি URL প্রদান করা হলেই প্রদর্শিত হয়।
5. ফ্রন্ট এন্ডে পরীক্ষা করুন (শুধু বিল্ডারে নয়)।

এছাড়াও একটি প্রযুক্তিগত যাচাই যোগ করুন:

• HTML-এ: উপস্থিতি class="bpcab-editorial-box bpcab-editorial-box--info",
• নেটওয়ার্ক ট্যাবে: CSS editorial-box.css লোড হচ্ছে (HTTP 200, 404 নয়)।

যদি সেটা কাজ না করে

যখন কোনো মডিউল প্রদর্শিত হয় না বা কিছুই রেন্ডার করে না, তখন আমি এই পদ্ধতিটি প্রয়োগ করি।

১) ফাইলের অবস্থান যাচাই করুন

• প্লাগইনটি অবশ্যই থাকতে হবে wp-content/plugins/bpcab-divi5-module/.
• ক্লাস ফাইলটি অবশ্যই থাকতে হবে includes/class-editorial-box-module.php.
• CSS assets/editorial-box.css.

একটি সাধারণ কারণ: আনজিপ করা ফাইলটি স্টাইলের একটি নকল ফোল্ডার তৈরি করে। bpcab-divi5-module/bpcab-divi5-module/....

২) স্টেজিং-এ WP_DEBUG সক্রিয় করুন

নির্দেশাবলী অনুসরণ করুন: ওয়ার্ডপ্রেসে ডিবাগিংদেখুন:

• wp-content/debug.log
• মারাত্মক ত্রুটি, যেমন “ক্লাস ET_Builder_Module খুঁজে পাওয়া যায়নি” (Divi লোড হয়নি বা খুব তাড়াতাড়ি হুক করা হয়েছে)

৫) পিএইচপি সংস্করণ যাচাই করুন

আপনি যদি পিএইচপি ৮.০ বা তার পূর্ববর্তী সংস্করণ ব্যবহার করেন, তাহলে আপনি নিম্নলিখিত সম্পর্কিত ত্রুটির সম্মুখীন হতে পারেন: declare(strict_types=1) অথবা টাইপিংয়ের জন্য। সূত্র: পিএইচপি সমর্থিত সংস্করণ.

৪) ক্যাশিং / মিনিফিকেশন

যেসব সাইটে অতিরিক্ত CSS/JS মিনিফিকেশন করা হয়, সেখানে আমি প্রায়শই এই সমস্যার সম্মুখীন হয়েছি:

• প্লাগইন ক্যাশে পরিষ্কার করুন।
• সার্ভার/সিডিএন ক্যাশে পরিষ্কার করুন।
• আপনার ব্রাউজারটি হার্ড রিফ্রেশ করুন।

৫) স্থায়ী লিঙ্ক

মাইগ্রেশনের পরে যদি কোনো অস্বাভাবিক আচরণ লক্ষ্য করেন, তাহলে পারমালিঙ্কগুলি (কোনো পরিবর্তন না করে) পুনরায় তৈরি করুন: “সেটিংস > পারমালিঙ্ক > সংরক্ষণ করুন”।

ডায়াগনস্টিক চার্ট

লক্ষণ	সম্ভাব্য কারণ	প্রতিপাদন	সমাধান
মডিউলটি ডিভি বিল্ডারে দেখা যাচ্ছে না।	Divi 5 সক্রিয় নয়, অথবা হুক খুব তাড়াতাড়ি রেকর্ড করা হচ্ছে।	লগ: ক্লাস ET_Builder_Module পাওয়া যায় না	Divi সক্রিয় আছে কিনা তা পরীক্ষা করুন, রেকর্ডটি রাখুন et_builder_ready যদি উপলব্ধ থাকে, অন্যথায় init দেরিতে
মডিউলটি দেখা গেলেও ফ্রন্ট এন্ডে কিছুই প্রদর্শিত হয় না।	নীরব পিএইচপি ত্রুটি বা ফিল্টার করা বিষয়বস্তু	সক্ষম করা WP_DEBUG_LOGএইচটিএমএল পরিদর্শন করুন	সঠিক ভুলচেক wp_kses_post এবং খালি মাঠ
CSS প্রযোজ্য নয়	CSS লোড হয়নি (404) অথবা ক্যাশে	নেটওয়ার্ক ট্যাব, CSS ফাইলের অবস্থা	পরীক্ষার জন্য পাথটি যাচাই করুন, ক্যাশ পরিষ্কার করুন এবং মিনিফিকেশন নিষ্ক্রিয় করুন।
“আরও জানুন” বোতামটি কখনও প্রদর্শিত হয় না।	URL বাতিল করা হয়েছে esc_url_raw	https:// দিয়ে একটি সম্পূর্ণ URL পরীক্ষা করুন	URL সংশোধন করুন, স্পেস পরিহার করুন, Divi ফিল্ডটি পরীক্ষা করুন।
কপি-পেস্ট করার পর "পার্স ত্রুটি"	সেমিকোলন/বন্ধনী অনুপস্থিত	ত্রুটিটি একটি নির্দিষ্ট লাইন নির্দেশ করে।	ফাইলটি আবার কপি করুন, তুলনা করুন এবং পিএইচপি লিন্টযুক্ত একটি এডিটর ব্যবহার করুন।

সাধারণ ফাঁদ এবং ভুলগুলি

এরর	কারণ	সমাধান
কোডটি পেস্ট করা হয়েছে functions.php মূল থিমের	থিম আপডেট = কোড হারিয়ে যাওয়া	একটি প্লাগইন (যেমন এখানে) বা একটি চাইল্ড থিম ব্যবহার করুন, তবে মডিউলের জন্য প্লাগইন ব্যবহার করাই শ্রেয়।
Fatal error: Class "ET_Builder_Module" not found	ডিভি সক্রিয় নয় অথবা মডিউলটি খুব তাড়াতাড়ি নিবন্ধন করা হয়েছে	Divi লোড করার পর সেভ করুন (যদি থাকে তবে “ready” হুকটি ব্যবহার করে), এবং একটি class_exists কোনো সম্প্রসারণের আগে
মডিউলটি শুধুমাত্র ভিজ্যুয়াল বিল্ডারেই ভেঙে যায়।	ভিন্ন লোডিং কনটেক্সট + ক্যাশে/মিনিফিকেশন	সাময়িকভাবে অপটিমাইজেশন নিষ্ক্রিয় করুন, প্রাইভেট ব্রাউজিং মোডে পরীক্ষা করুন, তারপর ধীরে ধীরে এটি পুনরায় সক্রিয় করুন।
CSS/JS লোড হচ্ছে না	খারাপ plugin_dir_url ফাইলের পথ, অথবা ফাইলটি অনুপস্থিত	নেটওয়ার্ক ট্যাবে URL-টি যাচাই করুন, ডিরেক্টরি কাঠামোটি পরীক্ষা করুন।
বিষয়বস্তু “খাওয়া হয়েছে” (ট্যাগগুলি সরানো হয়েছে)	wp_kses_post নির্দিষ্ট ট্যাগ/অ্যাট্রিবিউট ফিল্টার করে	সীমাবদ্ধতা (নিরাপত্তা) গ্রহণ করুন অথবা এর মাধ্যমে হোয়াইটলিস্টটি প্রসারিত করুন wp_kses_allowed_html (সতর্কতার সাথে)
একজন সম্পাদক একটি ফিল্ডের মাধ্যমে বিপজ্জনক HTML প্রবেশ করান।	ত্রুটিপূর্ণভাবে ফিল্টার করা ফিল্ড / এস্কেপ না করা আউটপুট	পাঠ্য : sanitize_text_fieldএইচটিএমএল: wp_kses_postবৈশিষ্ট্যসমূহ: esc_attrইউআরএল: esc_url
Divi আপডেট করার পর মডিউলটি অদৃশ্য হয়ে যায়।	এপিআই মডিউল পরিবর্তিত হয়েছে (এটি আসছে)	আপনার কোডকে এনক্যাপসুলেট করুন, হ্যাক পরিহার করুন, ডিভি ৫-এর অফিশিয়াল ডকুমেন্টেশন অনুসরণ করুন এবং আপনার হুক/এন্ট্রি পয়েন্টগুলো প্রয়োজন অনুযায়ী পরিবর্তন করুন।
সরাসরি উৎপাদনে পরীক্ষিত	মারাত্মক ত্রুটির ক্ষেত্রে পৃষ্ঠাটি খালি আসার ঝুঁকি	স্টেজিং ফার্স্ট, ব্যাকআপ, এবং ভার্সনড ডেপ্লয়মেন্ট

নিরাপত্তা, কর্মক্ষমতা এবং রক্ষণাবেক্ষণের পরামর্শ

নিরাপত্তা

• যদি সম্ভব হয়, কোনো “ফ্রি এইচটিএমএল” ফিল্ড ব্যবহার করা থেকে বিরত থাকুন, সেগুলোকে অপশন (যেমন সিলেক্ট, টগল ইত্যাদি) দিয়ে প্রতিস্থাপন করুন।
• যদি আপনাকে HTML গ্রহণ করতে হয়, wp_kses_post একটি ভালো মানদণ্ড। সূত্র: wp_kses_post().
• URL কখনই প্রিন্ট করবেন না esc_urlতথ্যসূত্র : esc_url().

সম্পাদন

• আপনার CSS কোড ছোট রাখুন। যদি আপনার মডিউলটি একটি 'মিনি ফ্রেমওয়ার্ক'-এ পরিণত হয়, তবে এর খেসারত আপনাকে প্রতিটি পেজেই দিতে হবে।
• অতিরিক্ত অনুরোধ এড়িয়ে চলুন render()মেটাডেটা লোড করার প্রয়োজন হলে, প্রয়োজন অনুসারে ক্যাশে (ট্রানজিয়েন্ট/অবজেক্ট ক্যাশে) ব্যবহার করুন। সূত্র: এপিআই ট্রানজিয়েন্টস.
• ক্যাশে সক্রিয় রেখে পরীক্ষা করুন: কিছু সমস্যা শুধু concat/minify-এর ক্ষেত্রেই দেখা যায়।

রক্ষণাবেক্ষণ

• প্লাগইনটির ভার্সন (Git) তৈরি করুন এবং আপনার রিলিজগুলোতে ট্যাগ যুক্ত করুন।
• সাইটটি বহুভাষিক হলে একটি টেক্সট ডোমেইন যোগ করুন এবং আন্তর্জাতিকীকরণের জন্য প্রস্তুতি নিন।
• Divi 5-এর পরিবর্তনগুলি পর্যবেক্ষণ করুন: মডিউল API বিকশিত হতে পারে। আপনার কোডকে বিচ্ছিন্ন রাখুন includes/ এবং অব্যক্ত নির্ভরতা পরিহার করুন।

সম্পদ

• ওয়ার্ডপ্রেস ডেভেলপার রেফারেন্স — wp_enqueue_style()
• ওয়ার্ডপ্রেস — ডেটা পরিমার্জন
• ওয়ার্ডপ্রেস — ডেটা থেকে মুক্তি
• ওয়ার্ডপ্রেস — ওয়ার্ডপ্রেসে ডিবাগিং
• ওয়ার্ডপ্রেস — ট্রান্সিয়েন্টস এপিআই
• গিটহাব — ওয়ার্ডপ্রেস কোর (মিরর)
• ওয়ার্ডপ্রেস কোর ট্র্যাক
• পিএইচপি ম্যানুয়াল

FAQ

এই প্লাগইনটি কি ওয়ার্ডপ্রেস ৬.৯.৪ এর সাথে কাজ করে?

হ্যাঁ। কোডটিতে ওয়ার্ডপ্রেস ৬.৯.৪ এবং পিএইচপি ৮.১+ এর সাথে সামঞ্জস্যপূর্ণ স্থিতিশীল এপিআই (হুকস, এনকিউ, স্যানিটেশন/এসকেপিং) ব্যবহার করা হয়েছে।

আমার মডিউলটি ডিভি ৫-এ দেখা যাচ্ছে না কেন?

৮০% ক্ষেত্রে: এনভায়রনমেন্টে Divi সক্রিয় থাকে না, অথবা মডিউলটি সেভ করার সময় মডিউল API লোড হয় না। লগগুলো পরীক্ষা করুন এবং নিশ্চিত করুন যে... ET_Builder_Module ক্লাসটি এক্সটেন্ড করার আগে বিদ্যমান থাকে।

আপনি একটিমাত্র 'অফিসিয়াল' ডিভি হুক ব্যবহার করেন না কেন?

যেহেতু Divi 5 দ্রুত বিকশিত হয়েছে, এবং বিল্ডের উপর নির্ভর করে, নির্দিষ্ট হুকটি পরিবর্তিত হতে পারে। কোডটি ইচ্ছাকৃতভাবে সতর্কতামূলক: যদি একটি 'রেডি' হুক বিদ্যমান থাকে, তবে এটি সেটিই চেষ্টা করে; অন্যথায়, এটি পরে এর মাধ্যমে রেজিস্টার করে। init.

আমি কি ডিভি-র “ডিজাইন” অপশনগুলো (রঙ, টাইপোগ্রাফি) যোগ করতে পারি?

হ্যাঁ, তবে এটি আপনার সংস্করণে উপলব্ধ Divi 5 API-এর উপর নির্ভর করে। আমার পরামর্শ: একটি স্থিতিশীল “content/settings” মডিউল দিয়ে শুরু করুন, তারপর ফ্রন্ট-এন্ড রেন্ডারিং এবং বিল্ডার সামঞ্জস্যতা যাচাই করে নেওয়ার পর ডিজাইন কন্ট্রোলগুলো যোগ করুন।

মডিউলের মানগুলো কি ডাটাবেসে সংরক্ষণ করা যায়?

ডিভি পেজের কন্টেন্টের (স্ট্রাকচার বিল্ডার) মধ্যেই কনফিগারেশন সংরক্ষণ করে। এর জন্য আপনার কোনো কাস্টম টেবিল পরিচালনা করার প্রয়োজন নেই।

সব জায়গায় CSS লোড হওয়া কীভাবে এড়ানো যায়?

আপনি লাইনে দাঁড়াতে পারেন। render() (উপরের ভ্যারিয়েন্টটি দেখুন)। তারপর ক্যাশিং/মিনিফিকেশন দিয়ে পরীক্ষা করুন, কারণ কিছু টুল ফ্রন্ট এন্ড এবং বিল্ডারের মধ্যে অ্যাসেটগুলোকে ভিন্নভাবে একত্রিত করে।

আমি কি এলিমেন্টর এবং আভাডাতে একই কম্পোনেন্ট পুনরায় ব্যবহার করতে পারি?

সরাসরি নয়। একটি ডিভি মডিউল কোনো এলিমেন্টর উইজেট নয়। সবচেয়ে সহজ সংযোগ হলো একটি সাধারণ রেন্ডারার ও একটি শর্টকোড, এবং এরপর প্রতিটি বিল্ডার সেই শর্টকোডটি যুক্ত করে (এর ফলে ইউজার এক্সপেরিয়েন্সের ক্ষেত্রে কিছু সীমাবদ্ধতা তৈরি হয়)।

কেন কন্টেন্ট ফিল্টার করবেন wp_kses_post ?

কারণ এটি সাধারণ সম্পাদকীয় HTML ব্যবহারের সুযোগ রেখেও XSS-এর ঝুঁকি উল্লেখযোগ্যভাবে কমিয়ে দেয়। আপনি যদি এর চেয়ে বেশি কিছু (যেমন SVG, স্ক্রিপ্ট) ব্যবহারের অনুমতি দেন, তাহলে আক্রমণের ক্ষেত্র বেড়ে যায়।

আমি 404 দেখতে পাচ্ছি editorial-box.css

ভুল পাথ অথবা ফাইলটি অনুপস্থিত। ডিরেক্টরি কাঠামো পরীক্ষা করুন এবং নিশ্চিত করুন যে ফাইলটি সঠিক স্থানে আছে। assets/আনজিপ করার পর ডুপ্লিকেট ফোল্ডার আছে কিনা তাও পরীক্ষা করুন।

মডিউলটি ফ্রন্ট এন্ডে কাজ করে কিন্তু ভিজ্যুয়াল বিল্ডারে কাজ করে না।

সাময়িকভাবে মিনিফিকেশন/অপ্টিমাইজেশন নিষ্ক্রিয় করুন, ক্যাশে পরিষ্কার করুন এবং একটি ন্যূনতম থিম দিয়ে পরীক্ষা করুন। যদি এটি কাজ করে, তবে আপনার অপ্টিমাইজেশনগুলি এক এক করে পুনরায় সক্রিয় করুন। অতিরিক্ত অপ্টিমাইজেশনযুক্ত স্ট্যাকগুলিতে এটি একটি খুব সাধারণ সমস্যা।

আমি কি এই কোডটি একটি স্নিপেটস প্লাগইনে রাখতে পারি?

প্রযুক্তিগতভাবে হ্যাঁ, কিন্তু আমি এটা এড়িয়ে চলি। যখন ডিভি লোডিং অর্ডার পরিবর্তন করে, তখন স্নিপেটগুলো শনাক্ত করা কঠিন হয়ে পড়ে। একটি ডেডিকেটেড প্লাগইন বেশি স্থিতিশীল এবং স্থাপন করাও সহজ।