কিভাবে ইলেমেন্টর কাস্টম উইজেড ডেভেলপ করতে হয়?
Hi there, I am rakibul islam you can call me rakib, i have completed my graduation from chongqing university of technology,chongqing china department of cse & i really love to write blog & share
আজকে থেকে আমরা এলেমেন্টর এর widget development নিয়ে শিখব কিভাবে এটা register করতে হয় । এর বিভিন্ন Settings এবং এটা আমরা কখন কিভাবে ব্যাবহার করব সে বিষয় নিয়ে বিস্তারিত শেখা এবং জানার চেষ্টা করব।
এর জন্য প্রথমেই আমাদের যেটার প্রয়োজন হবে সেটা হলো প্রথমেই আপনার ইলেমেন্টর plugins টা আপনার wordpress plugins folder এর মধ্যে install করা থাকতে হবে।
এরপর প্রথম কাজ plugin folder এর মধ্যেই আরেকটা ফোল্ডার তৈরি করবেন যার নাম দিবেন elementor-addon এরপর এর মধ্যে একটা ফাইল তৈরি করবেন যেখানে আপনার addon টা register করবেন। ফাইল টার নাম দিবেন elementor-addon.php
এবার আপনার ফাইলের মধ্যে আপনার যে কয়টা widgets লাগবে সে গুলো register করতে পারেন তবে এখানে প্রথমেই আপনাকে আরেকটা প্লাগিনের structure follow করতে হবে। মানে একটা প্লাগিন বানিয়ে সেটা কে active করতে হবে।
তারমানে widget development করতে হলে আপনাকে wordpress theme development ,plugin development সম্পর্কে ভাল ধারনা থাকতে হবে। তো একটা প্লগিন বা থিম এর header লিখে ফেলি।
<?php
/**
* Plugin Name: Elementor Addon
* Description: Simple my custom widgets for Elementor.
* Version: 1.0.0
* Author: Rakibul Islam
* Author URI: http://rakibulislam33.github.io/
* Text Domain: elementor-addon
*/
এবার আপনার কাজ হলো আপনার custom widgets কে এখানে register করা ।
function register_my_custom_widget( $widgets_manager ) {
require_once( __DIR__ . '/widgets/my-custom-widget-1.php' );//আপনার উইজেড এর ফাইল এখানে দেখিয়ে দিতে হবে ।
$widgets_manager->register( new \Elementor_My_Custom_Widget_1() ); //যে নামে এখানে আপনার উইজেড এখানে রেজিস্টার করা হলো সেটাই আপনার উইজেড ফাইলের ক্লাস নাম হবে ।
}
add_action( 'elementor/widgets/register', register_my_custom_widget);
এবার আমার আপনার পরিচিত সেই action হুক এর মাধ্যমে সেটাকে add করে দিব।
এবার আপনার উইজেড ফাইলের মধ্যে এবার আপনার প্রয়োজনীয় কোড গুলো লিখবেন এবং এর জন্য প্রথমেই যেটা প্রয়োজন হবে সেটা হলো একটা php block নিয়ে এর মধ্যে একটা ক্লাস নাম দিতে হবে কারন হলো যেহেতু আপনি elementor এর ই একটা functionality extend করছেন এবং elementor এর সব কিছুই object oriented follow করে তাই elementor এর কাস্টম ক্লাস কে extend করে নতুন functionality add করতে হয় । তবে ক্লাস নাম দেওয়ার সময় অবশ্যয় একটা জিনিষ মনে রাখবেন সেটা হলো ক্যামেল ক্যাস ফলো করে লিখবেন।
চলুন নিচে তার উদাহরন দেখে নেই।
<?php
class Elementor_My_Custom_Widget_1 extends \Elementor\Widget_Base {
}
আমাদের একটা ক্লাসের নাম লিখে elementor এর ক্লাস কে extends করেছি এবার আমাদের প্রয়োজনীয় function গুলো লিখতে হবে এক্ষেত্রে elementor এর default একটা structure আছে আমাদের সেই অনুযায়ী কোড গুলো লিখতে হবে যেমন কোন abstract use করেছে কি না , কি কি মেথড ব্যাবহার করেছে সব গুলো আমাদের সেই structure follow করে আগাতে হবে।
তো এর পরেই আমাদের একটা নাম দিতে হবে।
public function get_name() {
return 'My_Custom_widget_1';
}
এরপরে আমাদের উইজেড এর টাইটেল টা লিখব। এবং সেটা translate করে দিব text-domain এর মাধ্যমে।
public function get_title() {
return esc_html__( 'Hello World 1', 'elementor-addon' );
}
এর পরে আমাদের প্রয়োজন হবে আমাদের উইজেড এর আইকনের ।
public function get_icon() {
return 'eicon-code';
}
এর পরে আমাদের প্রয়োজন হবে আমাদের উইজেড টা কোথায় কিসের মধ্যে থাকবে সেটা ডিফাইন করা যেমনঃ- basic,pro,etc
public function get_categories() {
return [ 'basic' ];
}
এরপর আমাদের প্রয়োজন হবে আমাদের উইজেড টা সহজেই খুজে পাওয়ার জন্য আমরা search করব। এবং এর জন্য প্রয়োজন হবে keywords তাই আমরা keywords গুলো দিব।
public function get_keywords() {
return [ 'hello', 'world' ];
}
এবং finally আমরা আমাদের ডিফল্ট text যেটা আমাদের উইজেড drag করে আনার সময় থাকবে সেটা দিয়ে দিব।
protected function render() {
?>
<p> this is my custom title </p>
<?php
}
ব্যাস আমাদের প্রাথমিক উইজেড বানানো complete আমরা যদি এখন elementor এ গিয়ে search করি তাহলে আমরা আমাদের উইজেড কে দেখতে পাব।
নিচে উইজেড এর পুরো কোড টা দেওয়া হলোঃ-
<?php
class Elementor_My_Custom_Widget_1 extends \Elementor\Widget_Base {
public function get_name() {
return 'My_Custom_widget_1';
}
public function get_title() {
return esc_html__( 'Hello World 1', 'elementor-addon' );
}
public function get_icon() {
return 'eicon-code';
}
public function get_categories() {
return [ 'basic' ];
}
public function get_keywords() {
return [ 'hello', 'world' ];
}
protected function render() {
?>
<p> this is my custom title </p>
<?php
}
}
Follow me on Facebook: https://www.facebook.com/rakibuli33 Follow me on Linkedin:https://www.linkedin.com/in/rakibuli33/ Facebook Group:https://www.facebook.com/groups/35255...
