এলিমেন্টর উইজেট প্লাগিন

এলিমেন্টর উইজেট প্লাগিন তৈরি করে কাজ করার জন্য যে বিষয়টা প্রথমে খেয়াল রাখতে হবে সেটা হচ্ছে এলিমেন্টর মূল প্লাগিনটা থাকতে হবে, কারণ আমরা যে এলিমেন্টর প্লাগিনটা তৈরি করব এটা কাজ করবে এলিমেন্টর মূল প্লাগিন এর সাথে এবং এটা তৈরি করা হয় এলিমেন্ট এর সাথে যেন সহায়ক হিসেবে কাজ করে, যদি আমাদের আরও অতিরিক্ত কোন উইজেট প্রয়োজন হয় এবং এলিমেন্টর এর মধ্যে মাধ্যমে উইজেট এগুলো আমরা চাহিদা পূরণ করতে না পারে তখন আমাদের সুবিধার জন্য অতিরিক্ত কিছু তৈরি উইজেট করে এলিমেন্টর মূল প্লাগিন এর সাথে যোগ করে দেই আমাদের তৈরি করা এলিমেন্টর উইজেট প্লাগিন এর সাথে করে।

 

আমরা এলিমেন্টর ফ্রেন্ডলি থিম গুলো যেমন করে এডিট করার সময় এলিমেন্ট এর মাধ্যমে এডিট করতে পারি এবং এডিট করা অবস্থায় আমরা এলিমেন্ট এর মধ্যে যে উইজেট গুলো ব্যবহার করতে পারি ঠিক তেমনভাবেই আমাদের প্লাগিনটা মূল প্লাগিন এর সাথে যুক্ত হয় অতিরিক্ত উইজেট ব্যবহার করার একটা সুযোগ তৈরি করে দিবে এখানে শুধু এলিমেন্ট এর সাথে উইজেট যুক্ত হইতেছে।

 

আমাদের প্লাগিন এর মাধ্যমে কিছু অতিরিক্ত উইজেট পাওয়া যাবে যে গুলো ইউজার ফ্রেন্ডলি এবং ওয়েবসাইটকে সৌন্দর্য ও আকর্ষণীয় করে তোলে আমাদের প্লাগিনটা এলিমেন্টর ব্যবহারকারীদের জন্য খুবই উপকারী কেননা এলিমেন্টর ব্যবহারকারীদের জন্য আমরা কিছু অতিরিক্ত উইজেট যেগুলো ব্যবহার করে ওয়েবসাইটকে সুন্দর করা যায় | কিন্তু এলিমেন্টর এর মূল প্লাগিন ইন্সটল থাকা আবশ্যক।

এলিমেন্টর উইজেট প্লাগিন তৈরীর প্রক্রিয়া

প্রথমে ফাইল এবং ফোল্ডার তৈরির কাজ

এলিমেন্টর প্লাগইন তৈরি করার জন্য প্রথমে আমাদের প্লাগিন ফোল্ডার এর ভিতরে আমাদের প্লাগিনের এনাম হবে সেই নামে ফোল্ডার তৈরী করতে হবে, তারপর আমাদের প্লাগিন ফোল্ডার এর ভিতর প্লাগিনের মেইন ফাইল টা আমাদের প্লাগিন ফোল্ডারের নামে তৈরি করলে ভালো হয় অন্য নামে করা যাবে তবে ওই নামে করলেই ভালো হয়

ধরা যাক “myNewPlugin” এই নামে একটি প্লাগিন তৈরি করব

প্রথম  ধাপঃ

আমার প্লাগিন তৈরি করার জন্য “myNewPlugin” এই নামে একটি ফোল্ডার তৈরি করলাম,

ফোল্ডারের নাম অনুযায়ী প্লাগিনের মেইন ফাইল টা “myNewPlugin.php”  নাম দিয়ে আমি নামটা দিয়ে একটি ফাইল তৈরি করলাম।

দ্বিতীয়  ধাপঃ

প্লাগিন এর উইজেট গুলো লোড করার জন্য বা ফাইল রেফারেন্স ইত্যাদি লোড করার জন্য আমরা আরেকটি ফাইল তৈরি করলাম “widgets-loader.php” এই নামে।

তৃতীয় ধাপঃ

আমরা যতগুলো উইজেট তৈরি করব বিভিন্ন নামে উইজেট গুলোর ফাইল তৈরি করব যেমন স্লাইডার জন্য স্লাইডার উইজেট ফাইল ব্লকের জন্য ব্লক উইজেট ফাইল ইত্যাদি।

যেমন আমরা ( block_about ও block_team_images) দুটি উইজেট বানানোর জন্য 1)”block_about.php” / 2)”block_team_images.php” এই নামে দুইটি উইজেট ফাইল বানাইলাম।

চতুর্থ ধাপঃ ( যদি প্রয়োজন বোধ হয় )

প্লাগিনের বিভিন্ন ফাইল  যেমন জাভাস্ক্রিপ্ট ফাইল সিএসএস ফাইল ছবি আইকন ইত্যাদি কে একটি অরগানাইজ অনুযায়ী সংরক্ষণ করতে হয় বা করার প্রয়োজন বোধ হয় আমরা একটি আলাদা ফোল্ডার বানাতে পারি  যেন সবগুলোকে একটি ফোল্ডারে ভিতর রাখার যায়. যেন অন্য ফাইলগুলোর সঙ্গে একটি  আরেকটির সাথে হ-য-ব-র-ল অবস্থা তৈরি না হয়.

এমন অনেকেই ইমেজ জাভাস্ক্রিট সিএসএস ফাইল গুলোকে রাখার জন্য নিচের পদ্ধতি অবলম্বন করে।

assets /

  • css
  • img
  • js

আবার অতিরিক্ত অধিক সংখ্যক উইজেট বানানো হলে উইজেটের পরিমাণ অনেক বেশি হয়ে যাবে তাই সবগুলো উইজেট কে আলাদা একটি ফোল্ডারে রাখতে পারি আবার নাম রাখতে পারি এটা সম্পূর্ণ ব্যক্তিগত ব্যাপার ।

 

সবগুলো উইজেট কে রাখার জন্য নিচে একটি পদ্ধতি দেখানো হলো

widgets /

  • block_about.php
  • block_team_images.php
  • widget01.php
  • widget02.php

*****

অবশেষে আমাদের তৈরি করা এলিমেন্টর উইজেট প্লাগিন  “myNewPlugin” এর ফাইল ফোল্ডার তৈরি করা ও সাজানোর প্রক্রিয়া টা নিম্নে একটি চিত্র দেখানো হলো

wp-content/

    • plugins/
      • all other plugins will here
  • myNewPlugin
      • assets /
        • css
        • img
        • js
      • widgets /
        • block_about.php
        • block_team_images.php
      • myNewPlugin.php
      • widgets-loader.php
  • index.php
  • themes/

ফাইল ফোল্ডার তৈরির প্রক্রিয়া শেষে কোডিং এর কাজ ও প্রক্রিয়া

১) #

প্লাগিনের মেইন ফাইল এর কোডিং:

প্রথমে আমাদের ফোল্ডার যেটা সেটার ভিতরে আমাদের প্লাগিনের নামের সাথে মিল রেখে যে পিএইচপি  “myNewPlugin.php” ফাইল তৈরি করা হয়েছে সেটা খুলবো, কিংবা প্লাগিনের মূল ফাইল হিসাবে যেটাকে ধরা হয়েছে সেটা খুলবো, তারপর এর ভিতর প্লাগিনের নাম/প্লাগিনের ইউআরএল/প্লাগিনের অথর/প্লাগিন এর লাইসেন্স ইত্যাদি ডিটেইলস উল্লেখ করব।

Header Requirements এটা লিখে গুগলে সার্চ দিলে অনেক লিংক পাওয়া যাবে তবে নিচের লিংকটি হচ্ছে ওয়ার্ডপ্রেস এর নিজস্ব লিংক https://developer.wordpress.org/plugins/plugin-basics/header-requirements/

/**

* Plugin Name: YOUR PLUGIN NAME

* type information here …

* more……

*/

যেহেতু আমরা এলিমেন্টর জন্য বানাবো তালে এলিমেন্ট এর নিজস্ব স্ক্রিপ্ট আছে, নিচের লিঙ্কটিতে  গেলে দেখা যাবে

https://developers.elementor.com/getting-started/

<?php

if ( ! defined( ‘ABSPATH’ ) ) {

exit; // Exit if accessed directly.

}

/**

* Widgets Loader // widgets-loader.php conection

*/

require plugin_dir_path(__FILE__).’widgets-loader.php’;

————————————–

নিচে একটি  উদাহরণস্বরূপ দেখানো হলো, যা আমাদের  এই “myNewPlugin.php”  ফাইলটিতে লেখা হয়েছে

————————————–

<?php

/**

* Plugin Name:       my New Plugin

* Plugin URI:        https://skillice.com/

* Description:       my New Plugin is the Custom Elementor Extra Addons

* Version:           1.0.0

* Requires at least: 5.0

* Requires PHP:      7.0

* Author:            Kibria

* Author URI:        https://skillice.com/

* License:           GPL v2 or later

* License URI:       https://www.gnu.org/licenses/gpl-2.0.html

* Update URI:        https://skillice.com/

* Text Domain:       my-New-Plugin

* Domain Path:       /languages

*/

// Plugin er main file niche if condition ta add korte hobe

if ( ! defined( ‘ABSPATH’ ) ) {

exit; // Exit if accessed directly.

}

/**

* Widgets Loader

*/

require plugin_dir_path(__FILE__).’widgets-loader.php’;

#link>>  https://github.com/kibria-khandaker/myNewPlugin/blob/master/myNewPlugin.php

২) #

প্লাগিনের উইজেট  বা প্লাগিনের লোডার ফাইল এর কোডিং:

প্রথমে আমাদের ফোল্ডারের ভিতর থেকে “widgets-loader.php”  নামে যে পিএইচপি ফাইল ফাইল তৈরি করা হয়েছে সেটা খুলবো, তারপরের ভিতর আমরা প্রয়োজনীয় কোড গুলো লিখব  নিম্নে পর্যাক্রমে আলোচনা করা হলো ,

প্রথমদিকে প্লাগিন ডিটেইলস লিখতে হবে:

<?php

/**

* my New Plugin

*

* @package           myNewPlugin

* @author            Kibria

* @copyright         2021 Kibria or Skill-ice

* @license           GPL-2.0-or-later

*/

একটা ক্লাস নেইম লিখতে হবে, বিশেষ করে এই ক্লাস নামের পর থেকেই কারলি ব্র্যাকেট শুরু হবে, মাঝের সমস্ত কোড এর কাজ সবশেষে আবার কার্লি ব্র্যাকেট শেষ হবে এবং শেষে আবার ঐ ক্লাস নেইমন্টা ইনস্ট্যান্ট সহ শেষ হবে, ক্লাস নামটা আমরা নিজের মতো করে দিতে পারব যা ইচ্ছা তাই, যেটা আপাতত বেসিক পর্যায়ের জন্য আমরা এই পেজ এর মধ্যেই এই নামটা সীমাবদ্ধ রাখবো অন্য কোথাও ইউজ করার প্রয়োজন হবে না , যেমন

final class My_NewPlugin {

. . . . . .

. . . . .

}

My_NewPlugin::instance();

এই ক্লাস নামের ভিতর আমরা বিভিন্ন কোড করব  পর্যায়ক্রমে, যেমন প্রথমেই বলা যায় যে

আমাদের প্লাগিনটা যে ভার্সন থেকে শুরু করেছি শুরুর ভার্সনটা

#> const VERSION = ‘1.0.0’;

তারপর উল্লেখ করে দিতে হবে যে আমাদের এই প্লাগইনটি এলিমেন্টর একটা মিনিমাম ভার্শন যে এই ভার্সনের নিচে কাজ করবে না, যদি এর নিচে এলিমেন্ট ইন্সটল দেওয়া থাকে তাহলে প্লাগিন  আপডেট করে নিতে হবে,

#> const MINIMUM_ELEMENTOR_VERSION = ‘2.0.0’;

এরপর পিএইচপির একটা মিনিমাম ভার্শন যে এর উপরে কাজ করবে  কিন্তু এর নিচে কাজ করবেনা

#> const MINIMUM_PHP_VERSION = ‘7.0’;

এরপর এলিমেন্ট ইনস্ট্যান্ট ক্লাস কল করতে হবে

#> private static $_instance = null;

#> public static function instance() {

if ( is_null( self::$_instance ) ) {

self::$_instance = new self();

}

return self::$_instance;

}

এখন পরের গুলো একটু বিস্তারিত লিখতে হবে

#> public function __construct(){ …. } কনস্ট্রাক্ট ফাংশন: এলিমেন্টর এর কনস্ট্রাক্ট ফাংশনটা এর ভিতর আমরা এডাকশন তৈরি করব, তাহলে বলতে পারি যে এই এডাকশন টা কিসের ?

আমরা নিচে জাভাস্ক্রিপ্ট কিংবা সিএসএস ফাইল এড করার জন্য একটা পাবলিক ফাংশন তৈরি করব,যে এই পাবলিক ফাংশন এর মধ্যে সিএসএস জাভাস্ক্রিপ্ট ফাইলগুলোকে কল বা লিংক আপ করা হবে, ওই পাবলিক ফাংশন এর নামটা কে কনস্ট্রাক্ট ফাংশন এর ভিতর এনে রেজিস্ট্রেশন করাতে হবে,

তারপর #> function i18n() এটা প্লাগিনের টেক্সট ডোমেন লোড করে ও প্লাগিনের কিছু অন্যান্য ফাইল লোড করে .

#> public function i18n() {

load_plugin_textdomain( ‘my-elementor01’ );

}

এরপর হচ্ছে ওই জাভাস্ক্রিপ্ট সিএসএস-এর ফাইল কল করার জন্য যে ফাংশন তৈরি করা হয়েছিল এটা, এখানে এই ফাংশন টা তৈরি করতে হবে,এখানে খুব ভালো করে খেয়াল করে ফাইলগুলো লিঙ্ক করতে হবে, যদি ফোল্ডারে থাকে ফোল্ডার লোকেশন ঠিক করে লিখতে হবে, প্লাগিন ইউআরএল এর ভিতর এবং ফাইল উল্লেখ করতে হবে, এখানে হ্যান্ডেলার উল্লেখ করতে হবে , লিংক হলে wp&a নিউ স্টাইল বা wp&a স্ক্রিপ্ট লিখে হ্যান্ডেল লিখেই ডাইরেক্ট লিংক লিখতে হবে

#> public function widget_styles() { . . . .}

#> public function widget_scripts() { . . . .}

প্লাগিনের মেকলাগিন ও কিছু পারফরম্যান্স ও কিছু হোক লোডিং ও চেক করার জন্য ফাংশন কল করতে হবে,যেমন

#> public function on_plugins_loaded() {

if ( $this->is_compatible() ) {

add_action( ‘elementor/init’, [ $this, ‘init’ ] );

}

}

এখন #> is_compatible() ব্যবহার করা লাগবে এটা হচ্ছে সমস্ত অ্যাডমিন নোটিশের ফাংশনগুলো কে এখানে অ্যাকশন করার জন্য

প্লাগিনের এর ভিতর উইজেট ফাইল গুলোকে ইনক্লুড করার জন্য এবং রেজিস্ট্রেশন করার জন্য যে ফাংশনটা তৈরি করব এবং উইজেট এর জন্য নতুন ক্যাটাগরি তৈরি করার জন্য যে ফাংশন তৈরি করব ওই সব ফাংশন গুলোকে এখানে শেয়ার একশন করতে হবে

#> public function init() { … }

প্লাগিনের আমরা যে উইজেট তৈরি করব প্রতিটি ওই উইজেট ফাইল এর নাম এখানে কল করব এবং এই ফাইলগুলোর ভিতর একটা ক্লাস নাম নিব সেটাও রেজিস্ট্রেশন করব,  অর্থাৎ প্রতিটি ফাইল নেম ও ফাইলের ক্লাস নেম উল্লেখ করব এখানে এবং সবগুলোকে একথাটি ফাংশন এর মাধ্যমে উপরে ইনিটে এডাকশন করব

#> public function init_widgets()

এখন আমরা নিউ ক্যাটাগরি তৈরি করার ফাংশন টা লিখব এবং এটাকে নিয়ে উপরে ইনিটে এডাকশন করব

#> function add_elementor_widget_categories( $manager )

এখন আমরা একে একে করে নোটিশগুলো ফাংশন লিখব ও এর মাধ্যমে চেক করব আমাদের ইন্সটল করার পর  এলিমেন্টর ইনস্টল আছে কিনা পিএইচপির মিনিমাম ভাষণের শর্ত পূরণ  হল কিনা ইত্যাদি আর এইগুলো না হলে নোটিশটা দিবে ধাপে ধাপে

#> public function admin_notice_missing_main_plugin() {..}

#> public function admin_notice_minimum_elementor_version() {..}

#> public function admin_notice_minimum_php_version() {…}

সর্বশেষে  বলবো যে উপরে যত কথা বলা হয়েছে লোডার ফাইল এর জন্য সবগুলোকে একটি উদাহরণ স্বরূপ একটি ফাইলে কোড করে দেখানো হয়েছে আশাকরি ওইখানে দেখলে সব ভালো করে বুঝা যাবে

#link>> https://github.com/kibria-khandaker/myNewPlugin/blob/master/widgets-loader.php

৩) #

প্লাগিনের উইজেট  ফাইল এর কোডিং:

প্রথমে আমাদের widgets ফোল্ডারের ভিতর থেকে যে নামে উইজেট ফাইল তৈরী করেছি বা আমাদে উইজেটের “block_about.php”  নামে যে পিএইচপি ফাইল ফাইল তৈরি করা হয়েছে সেটা খুলবো, তারপরের ভিতর আমরা প্রয়োজনীয় কোড গুলো লিখব  নিম্নে পর্যাক্রমে আলোচনা করা হলো।

প্রথমদিকে প্লাগিন ডিটেইলস লিখতে হবে:

<?php

/**

* My New Plugin

*

* @package           myNewPlugin

* @author            Kibria

* @copyright         2021 Kibria or Skill-ice

* @license           GPL-2.0-or-later

*/

একটা ক্লাস নেইম লিখতে হবে, বিশেষ করে এই ক্লাস নামের পর থেকেই কারলি ব্র্যাকেট শুরু হবে, মাঝের সমস্ত কোড এর কাজ সবশেষে আবার কার্লি ব্র্যাকেট শেষ হবে এবং ক্লাস নামটা আমরা নিজের মতো করে দিতে পারব যা ইচ্ছা তাই।

class My_block_about extends \Elementor\Widget_Base {

. . . . . .

. . . . .

}

যেটা “My_block_about” আপাতত বেসিক পর্যায়ের জন্য আমরা widgets-loader.php এই পেজ এর মধ্যে init_widgets এই ইউজ করার প্রয়োজন হবে। আমাদের প্লাগিনের widgets-loader.php এর ১২৯ নাম্বার লাইনে দেখা যাক , যেমনঃ-

public function init_widgets() {

require_once( plugin_dir_path(__FILE__).’widgets/block_about.php’);

\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \My_block_about() );

}

এই ক্লাস নামের ভিতর আমরা বিভিন্ন কোড করব  পর্যায়ক্রমে, যেমন প্রথমেই বলা যায় যে

widget name

widget title

widget icon

widget categories

আরো জানার জন্যে https://developers.elementor.com/creating-a-new-widget/ এতে গিয়ে দেকাযেতে পারে।

এবং আমাদের চাহিদামতো কন্ট্রোল গুলো তৈরী করতে হবে এর জন্য আমাদের বিস্থারিতভাবে জানা দরকার, তাই https://developers.elementor.com/elementor-controls/

এতে গিয়ে দেকাযেতে পারে।

protected function _register_controls() {

. . . .

এখানে সব কন্ট্রোল উপরের লিংক এ গিয়ে দেখে দেখে এড করে নিতে হবে

. . . . .

}

আমাদের HTML গুলো এর ভিতরে লিখতে হবে

protected function render() {

. . . .

এখানে সব HTML এড করে নিতে হবে

. . . . .

}

বিদ্রঃ যদি কিছু বুজতে সমস্যা হয়, তাহলে এই লিংক এ গিয়ে আমাদের তৈরী এলিমেন্টর উইজেট প্লাগিন নামায়ে বা এর ফাইল গুলো নামায়ে দেখে বুঝে নিজে চর্চা করেনিলেই হবে ।

Back
Direct Call
Skype
Messenger
Email
WhatsApp