ওয়ার্ডপ্রেস এডমিন স্ক্রিনে হেল্পট্যাব যুক্ত করা

মানুষ মানুষের জন্য, জীবন জীবনের জন্য
একটু সহানুভূতি কি মানুষ পেতে পারেনা, ও বন্ধু?

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

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

হেল্পট্যাব এবং স্ক্রিন অবজেক্টঃ

ওয়ার্ডপ্রেস হেল্পট্যাব
(১) হেল্পট্যাব লিস্ট এবং কনটেন্ট। (২) হেল্পট্যাব সাইডবার

হেল্পট্যাব যুক্ত করার জন্য ওয়ার্ডপ্রেসের এপিআই ফাংশন এবং অবজেক্ট আছে। কোমর বেঁধে কোডিং করার পূর্বে চলুন সেসব নিয়ে একটু লেখাপড়া করে নেই-

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

add_help_tab($args): এটি স্ক্রিন অবজেক্টের একটি মেথড, যা আমাদের মূল কাজটি করে দিবে। আর কাজ করিয়ে নেয়ার জন্য একে বেশি কিছু নয় মাত্র একটি এ্যাসোসিয়েটিভ এ্যারে দিতে হবে। $args নামক জিনিসটাই হবে সেই এ্যারে। এ্যারেতে title থাকবে, id থাকবে (আইডি কিন্তু ইউনিক হতে হবে এবং কোন স্পেস থাকা চলবে না এবং এইচটিএমএল সেফ হতে হবে), হেল্পট্যাবের content থাকবে, callback ফাংশন থাকবে এবং হেল্পট্যাবের priority থাকবে। সবকিছু মিলিয়ে দেখতে হবে নিচের মতঃ

$args = [ 
    'id' => 'i-am-unique-id',
    'title' => esc_html__( 'I Am The Title', 'text-domain' ),
    'content' => esc_html__( 'Hi, I am help content. Make me concise.', 'text-domain' ),
    'callback' => 'i am callback function and i am optional'
];

remove_help_tab($id): এটিও একটি মেথড এবং এর কাজ হল একটি নির্দিষ্ট ট্যাব রিমুভ করে দেয়া। যে ট্যাবটি রিমুভ করতে চাই শুধু সেটার id দিলেই হবে। কেন রিমুভ করব সেটা এখনো জানা নেই, সময় হলেই জেনে যাব আশা করি।

remove_help_tabs(): এই মেথডের কাজ হল স্ক্রিন থেকে সব হেল্পট্যাব রিমুভ করে দেয়া। যদিও আমরা কখনোই সব রিমুভ করব না, কিন্তু শিখে রাখলাম আরকি!

হেল্পট্যাব প্লাগিনঃ

হেল্পট্যাব এ্যাড করা, রিমুভ করা এবং হেল্পট্যাবে সাইডবার এ্যাড করার জন্য আমরা একটি উলে উলে গুল্টুস সাইজের প্লাগিন বানাবো ???? । আচ্ছা আমাদের প্লাগিনের নাম “উলে উলে গুল্টুস” হলে কেমন হয়? আমার মনে হয় জোস হবে। চলুন তাহলে বানিয়ে ফেলি-

class Ule_Ule_Gultus {

    public function __construct() {
        add_action( 'admin_menu', [$this, 'add_uug_page'] );
        
        add_action( 'load-post.php', [$this, 'add_post_screen_help_tab'] );
        add_action( 'load-post-new.php', [$this, 'add_post_screen_help_tab'] );

        add_action( 'in_admin_header', [$this, 'run_remove_tab'] );
    }

    /**
     * Adding a custom page
     */
    public function add_uug_page() {
        $uug_page_id = add_menu_page(
            esc_html__( 'Ule Ule Gultus', 'ule-ule-gultus' ), //page title
            esc_html__( 'UUG', 'ule-ule-gultus' ), //menu title
            'manage_options', //capability
            'ule-ule-gultus', //slugs
            [$this, 'render_uug_page'], //callback function
            'dashicons-universal-access', //icon
            80 //position
            );

        add_action( "load-{$uug_page_id}", [$this, 'add_help_tab'] );
    }

    public function render_uug_page() {
        echo '<h1>Ule Ule Gultus Page</h1>'
            . '<p>Ule Ule Gultus page content</p>';
    }

    /**
     * Adding help tab and sidebar on Ule Ule Gultus page
     */
    public function add_help_tab() {
        $screen = get_current_screen();

        $tabs = [
            [ 
                'id' => 'uug-tab-1',
                'title' => esc_html__( 'UUG Help Tab 1', 'ule-ule-gultus' ),
                'content' => sprintf('<p>%1$s</p>', esc_html__( 'Tab 1: Hi, I am help content. Make me concise.', 'ule-ule-gultus' ) ),
            ],
            [ 
                'id' => 'uug-tab-2',
                'title' => esc_html__( 'UUG Help Tab 2', 'ule-ule-gultus' ),
                'content' => sprintf('<p>%1$s</p>', esc_html__( 'Tab 2: Hi, I am help content. Make me concise.', 'ule-ule-gultus' ) ),
            ],
            [ 
                'id' => 'uug-tab-3',
                'title' => esc_html__( 'UUG Help Tab 3', 'ule-ule-gultus' ),
                'content' => sprintf('<p>%1$s</p>', esc_html__( 'Tab 3: Hi, I am help content. Make me concise.', 'ule-ule-gultus' ) ),
            ]
        ];

        foreach ( $tabs as $tab ) {
            $screen->add_help_tab($tab);
        }

        $screen->set_help_sidebar(
            esc_html__( 'Sidebar content', 'ule-ule-gultus' )
            );
    }

    public function add_post_screen_help_tab() {
        get_current_screen()->add_help_tab([
            'id' => 'uug-post-tab-1',
            'title' => esc_html__( 'UUG Post Tab 1', 'ulu-ule-gultus' ),
            'content' => sprintf('<p>%1$s</p>', esc_html__( 'Tab 1: Hi, I am help content. Make me concise.', 'ule-ule-gultus' ) ),
            ]);
    }

    public function run_remove_tab() {
        global $pagenow;

        if ( 'post.php' === $pagenow || 'post-new.php' === $pagenow ) {
            //TADA, we're about to remove customize display
            //and title post editor help tab from post screen 
            $this->remove_help_tab();
        }

        if ( 'index.php' === $pagenow ) {
            // We are about to remove all tabs form dashboard
            $this->remove_help_tabs();
        }
    }

    protected function remove_help_tab() {
        $screen = get_current_screen();
        $screen->remove_help_tab( 'customize-display' );
        $screen->remove_help_tab( 'title-post-editor' );
    }

    protected function remove_help_tabs() {
        $screen = get_current_screen();
        $screen->remove_help_tabs();
    }

}

new Ule_Ule_Gultus();

ইয়াহু, আমরা বানিয়ে ফেলেছি! ফুলপ্যাক “উলে উলে গুল্টুস” কে গিটহাব থেকে ডাউনলোড করে নিন। ইন্সটল করুন, আর মজা দেখুন 😀

  • মজা ১ঃ সেটিং মেনুর নিচে “UUG” নামে মেনু এ্যাড হয়েছে!
  • মজা ২ঃ ড্যাসবোর্ড থেকে সব হেল্পট্যাব উধাও হয়ে গেছে!
  • মজা ৩ঃ পোস্ট স্ক্রিন থেকে ২টি হেল্পট্যাব খোয়া গেছে এবং নতুন একটির আগমন হয়েছে!
  • মজা ৪ঃ আমরা সাফল্যের সাথে হেল্পট্যাব এ্যাড করা, রিমুভ করা এবং হেল্পট্যাবে সাইডবার এ্যাড করা শিখে গেছি 😎

আজকে আর পড়তে হবে না, আজকে আমরা অনেক কিছু শিখেছি। সো, আবার দেখা হবে। হ্যাপি লার্নিং।

টাডা 😀

পিএইচপি কলব্যাক ফাংশন পরিচিতি

“সে” কলব্যাক না করলে আপনি হয়ত “অ” হয়ে যান! মানে বলতে চাচ্ছিলাম যে অভিমানী নয়তো অস্থির হয়ে যান 😉 । আর যদি আপনার লাইফে “সে”  না থাকে তবে তো কথাই নেই। আমার মত বিন্দাস 😀 । যাইহোক, আপনি “অ” হোন আর নাই হোন, “সে” কলব্যাক করুক আর নাই করুক আজকে আমরা কলব্যাক নিয়েই আলোচনা করব। চলুন তাহলে শুরু থেকেই শুরু করি…

কলব্যাক ফাংশন হচ্ছে যে ফাংশনকে অন্য ফাংশনের প্যারামিটার হিসেবে নিয়ে সেই অন্য ফাংশনের ভিতর কল বা এক্সিকিউট করা যায়। কলব্যাক ফাংশনের আরেকটি নাম হল Higher Order Function। বাংলায় এটাকে ঊচ্চমার্গীয় ফাংশন হিসেবে ভেবে নিতে পারেন। ঊচ্চমার্গীয় কথাবার্তা মাথার উপর দিয়ে গেলেও ঊচ্চমার্গীয় ফাংশন মাথার নীচ দিয়েই যাবে, নিশ্চিত থাকুন 🙂

পিএইচপির বিল্টইন বহু ফাংশন কলব্যাক ফাংশন আর্গুমেন্ট হিসেবে একসেপ্ট করে। এ্যারের ফাংশন সেটে এরকম বেশকিছু ফাংশন আছে। যেমনঃ array_map(), array_filter(), array_walk(), array_reduce()। চলুন, এ্যারের কিছু ফাংশনের মাধ্যমে কলব্যাকের ব্যবহার এবং বিস্তারিত জেনে নেই।

$nums = [1,2,3,4,5,6,7];
$output = array_reduce($nums, function($carry, $item) {
    return $carry += $item;
});
var_dump($output); // int(28)

উপরের উদাহরণে আমরা কলব্যাক হিসেবে এ্যাননিমাস বা নামহীন ফাংশন ব্যবহার করেছি। এ্যাননিমাস ফাংশন ছাড়াও আমরা অবজেক্টের মেথড,  ক্লাসের স্ট্যাটিক মেথড, ইউজার ডিফাইন্ড ফাংশন অথবা বিল্টইন ফাংশনও ব্যবহার করতে পারি। শুধু মাত্র ল্যাঙ্গুয়েজ কন্সট্রাক্ট ছাড়া, যেমনঃ array(), echo, empty(), eval(), exit(), isset(), list(), print অথবা unset()

ইউজার ডিফাইন্ড ফাংশনঃ

$nums = [1,2,3,4,5,6];
function sum($carry, $item)
{
    return $carry += $item;
}
$result = array_reduce($nums, 'sum');
var_dump($result); // int(21)

বিল্টইন ফাংশনঃ

$fruits = ['apple', 'banana', 'mango', 'jackfruit', 'pineapple'];
$fruitsLen = array_map('strlen', $fruits);
var_dump($fruitsLen);
// array(5) {
//   [0]=>
//   int(5)
//   [1]=>
//   int(6)
//   [2]=>
//   int(5)
//   [3]=>
//   int(9)
//   [4]=>
//   int(9)
// }

অবজেক্ট মেথড ও ক্লাসের স্ট্যাটিক মেথডঃ

class Calculator
{
    public function sum($carry, $item)
    {
        return $carry += $item;
    }
    public static function staticSum($carry, $item)
    {
        return $carry += $item;
    }
}
$calc = new Calculator;
$nums = [1,2,3,4,5];

// Object method call
$result = array_reduce($nums, [$calc, 'sum']);
var_dump($result); // int(15)

// Static method call
$result = array_reduce($nums, ['Calculator', 'staticSum']);
var_dump($result); // int(15)

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

কাস্টম এ্যারে ম্যাপিং ফাংশনঃ

এবার দেখে নেয়া যাক আমরা কিভাবে আমাদের বানানো ফাংশনে প্যারামিটার হিসেবে কলব্যাক ব্যবহার করতে পারি। আমরা একটি এ্যারে ম্যাপিং ফাংশন বানাবো। পিএইচপির বিল্টইন এ্যারে ম্যাপিং ফাংশন একাধিক এ্যারে নিয়ে কাজ করে। কিন্তু আমরা একটি এ্যারে নিয়েই কাজ করব। “সে” নেই তাই সব সিঙ্গেল সিঙ্গেল হবে 😉

function array_map_single(array $array, callable $callback)
{
    $result = [];
    foreach($array as $key => $val)
    {
        /**
         * There are two ways to execute $callback
         * using call_user_func* or simply $callback()
         * I am not sure which one is best practice,
         * So I'd love to know if you are aware 🙂
         */
        array_push($result, $callback($val, $key));
        // array_push($result, call_user_func($callback, $val, $key));
    }
    return $result;
}

$result = array_map_single(range(1, 5), function($val) {
    return $val += 2;
});
var_dump($result);
// array(5) {
//   [0]=>
//   int(3)
//   [1]=>
//   int(4)
//   [2]=>
//   int(5)
//   [3]=>
//   int(6)
//   [4]=>
//   int(7)
// }

ওয়ার্ডপ্রেসে কলব্যাকঃ

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

function op_register_menu_meta_box() {
    add_meta_box(
        'op-menu-meta-box-id',
        esc_html__( 'Op Menu MetaBox Title', 'text-domain' ),
        'op_render_menu_meta_box',
        'nav-menus',
        'side',
        'core'
        );
}
add_action( 'load-nav-menus.php', 'op_register_menu_meta_box' );

function op_render_menu_meta_box() {
    echo 'metabox output';
}

উদাহরণে op_render_menu_meta_box এবং op_register_menu_meta_box দুটোই কলব্যাক ফাংশন।

৫০০+ ওয়ার্ড পড়ার পর নিশ্চয়ই ঊচ্চমার্গীয় ফাংশনকে আর ঊচ্চমার্গীয় মনে হচ্ছে না, তাই না? বলেই ছিলাম শুরুতে মাথার নীচ দিয়েই যাবে 😀 যদি এরপরও মাথার উপর দিয়ে যায় তাহলে কমেন্ট বক্সে কমেন্ট করে উড়াই দিবেন, আমি ধরে নিবো 🙂

ধন্যবাদ

Hello World!

This is my first post on my fresh blog 😀

Hope me and my blog will be a great team together.

Lets see how far we can make …