উকমার্স প্রোডাক্ট মেটাবক্স এবং মেটাডাটা

ওয়ার্ডপ্রেসে মেটাবক্স এ্যাড করা, মেটাডাটা সেভ করা, ডিলিট করা এসবের সাথে কমবেশি আমরা সবাই পরিচিত। প্রাচীনকালে আমরা add_meta_box দিয়ে কাস্টম মেটাবক্স এ্যাড করতাম। কিন্তু মহান সব ডেভেলপারদের কল্যানে আমাদের আর কষ্ট করে মেটাবক্স বানানো আর মেটাডাটা সেভ করার মত লো লেভেলের কাজ গুলি করতে হয়না। মেটাবক্স বানানোর চমৎকার সব ফ্রেমওয়ার্ক ব্যবহার করে আমরা সহজেই প্রয়োজনীয় কাজ সেরে ফেলতে পারি।

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

ট্যাব আকারে সাজানো উকমার্স মেটাবক্স

Awesome Tab এ্যাড করা:

ট্যাব এ্যাড করার জন্য woocommerce_product_data_tabs ফিল্টার হুকে নতুন ট্যাবের কনফিগারেশন এ্যারে বর্তমান ট্যাবগুলির কনফিগারেশনের সাথে মার্জ করে পাঠাতে হয়। ফিল্টার হুকটি শুধুমাত্র একটি আর্গুমেন্ট $tabs একসেপ্ট করে, যা হল বর্তমান ট্যাবগুলির কনফিগারেশন এ্যারে। ট্যাবের কনফিগারেশন হিসেবে নিচের ডাটাগুলি পাস করতে হয়ঃ

  • label – ট্যাবের লেবেল, আমাদের ট্যাবের ক্ষেত্রে যা Awesome Tab
  • target – ট্যাবের টার্গেট হিসেবে ট্যাব প্যানেলের আইডি পাস করতে হয়। আমাদের Awesome Tab এর ক্ষেত্রে যা awesome-tab
  • class – ট্যাবের জন্য এডিশনাল কোন ক্লাস দিতে চাইলে এ্যারে ইলিমেন্ট হিসেব দিতে হয়।
  • priority – প্রায়োরিটির উপর নির্ভর করবে ট্যাবের প্লেসমেন্ট বা ট্যাবটি কোথায় দেখাবে। বেশি হলে নিচের দিকে আর কম হলে উপরের দিকে দেখাবে।

functions.php তে কোড গুলি এ্যাড করার পর এ্যাড কিংবা এডিট প্রোডাক্ট পেজে গেলে আমরা নিচের মত Awesome Tab নামে নতুন একটি ফিল্ড ছাড়া ট্যাব দেখতে পাবো।

Awesome Tab এ ফিল্ড এ্যাড করা:

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

functions.php তে কোড গুলি এ্যাড করার পর এ্যাড কিংবা এডিট প্রোডাক্ট পেজে গেলে Awesome Tab দুটি টেক্সট ফিল্ড দেখতে পাবো।

Awesome Tab এর ডাটা সেভ করা:

ট্যাবের ডাটা সেভ করার করা জন্য woocommerce_admin_process_product_object এ্যাকশন হুকে ডাটা সেভ করার ফাংশনালিটি লিখতে হবে। এই হুকটি Product Object $product আর্গুমেন্ট হিসেবে একসেপ্ট করে। নিচের কোডে সেভ করার ফাংশনালিটি লেখা আছে।

সবগুলি কোড একসাথে পেতে চাইলে ক্লিক করুন

— ধন্যবাদ 🙂

ফাঁকিবাজি উইথ ওয়ার্ডপ্রেস থিম আপডেট নোটিফিকেশন

এটি একটি এক্সট্রিম লেভেলের সমাধান তাই এড়িয়ে চলুন। সহজ সমাধান হিসেবে থিমের ডিরেক্টরি/ফোল্ডারের নাম পরিবর্তন করে দিতে পারেন। যেমন – আপনার থিমের ডিরেক্টরির নাম যদি হয় awesome-theme আপনি পরিবর্তন করে super-awesome-theme দিয়ে দিতে পারেন।

কিছুদিন আগে একটা থিম ডেভেলপমেন্টের কাজ করছিলাম কিন্তু অানফরচুনেটলি ওয়ার্ডপ্রেস থিম ডিরেক্টরির একটি থিমের সাথে নাম হুবহু মিলে যায়। আর এতেই ঘটে বিপত্তি! থিম ডিরেক্টরির থিমটির ভার্সন ছিল ১.৪ আর আমি যেটি ডেভেলপ করছিলাম সেটার ভার্সন ছিল ১.০, আর একারণেই সবসময় আপডেট নোটিফিকেশন পাচ্ছিলাম। থিম ডেভেলপমেন্টের কাজ যে পরিমাণ হয়েছিল তাতে থিমের নাম পরিবর্তন করার চাইতে ওয়ার্ডপ্রেসের থিম আপডেট নোটিফিকেশন সিস্টেমকে ফাঁকি দেয়াটাই সহজ মনে হয়েছে। আর ক্লায়েন্টেরও ফাঁকি দেয়ার বিষয়ে কোন আপত্তি ছিল না। আমায় আর রুখবে কে! 😀

থিম আপডেট সিস্টেমকে ফাঁকি দেয়াটা কঠিন কোন কাজ ছিলনা। শুধু মাত্র wp_prepare_themes_for_js ফিল্টার হুকে সঠিক থিমটা সিলেক্ট করে FALSE পাঠিয়ে দিয়েছি ঠিক নিচের কোডের মত করে, ব্যাস এতেই কাজ হয়ে গেছে।

— ধন্যবাদ 🙂

উকমার্সে প্রোডাক্ট টাইপ অপশনস ডিফল্ট সেট করা

বর্তমানে একটি ইকমার্স সাইটের কাজ করছি, যেখানে ক্লায়েন্ট তার ডিজিটাল প্রোডাক্ট সেল করবে। ক্লায়েন্ট EDD ব্যবহারে ইচ্ছুক নয় কারণ EDD -র বেশির ভাগ এ্যাডঅন (Addon) প্রিমিয়াম। এজন্য ক্লায়েন্টের একমাত্র পছন্দ হল উকমার্স (WooCommerce)।

যেহেতু ক্লায়েন্টের সব প্রোডাক্টই হল ডিজিটাল তাই উকমার্সের সেটিংস অনুযায়ী সব প্রোডাক্ট হবে ভার্চুয়াল (Virtual) এবং ডাউনলোডেবল (Downloadable)। এবং ক্লায়েন্ট শুধুমাত্র Simple টাইপের প্রোডাক্ট এন্ট্রি দিবে। এখন সমস্যা হল প্রতিবার নতুন প্রোডাক্ট এন্ট্রি দেবার সময় ভার্চুয়াল এবং ডাউনলোডেবল চেকবক্স মার্ক (Checked) করে দিতে হবে। এর সমাধান চিন্তা করতে গিয়ে মনে হল নিশ্চয়ই এর জন্য কোন না কোন ফিল্টার হুক আছে। উকমার্সের কোর ফাইলে সার্চ করেই পেয়ে গেলাম কাংখিত সেই ফিল্টার হুকটি। নিচে কোড স্যাম্পলঃ

— ধন্যবাদ 🙂

ওয়ার্ডপ্রেস কমেন্ট ফর্ম কাস্টমাইজেশন

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

obiPlabon WordPress Comment Form Default View
ইমেজ-১ঃ ওয়ার্ডপ্রেস কমেন্ট ফর্ম ডিফল্ট ভিউ

ফিল্ড কাস্টমাইজেশন (Field Customization)

আমরা ইনপুট ফিল্ডগুলির ডিফল্ট পজিশন পরিবর্তন করে ইমেজ-২ এর মত করে সাজাবো। যেখানে কমেন্টের ইনপুট ফিল্ডটি সবার নিচে থাকবে। ওয়ার্ডপ্রেস ভার্সন ৪.৪ এ comment_form_fields নামে একটি ফিল্টার হুক যুক্ত করেছে, যার মাধ্যমে খুব সহজেই ফর্ম ফিল্ডগুলির পজিশন পরিবর্তন করা যায়। ফিল্টার হুকটি একটি মাত্র আর্গুমেন্ট (এসোসিয়টিভ এ্যারে) পাস করে। যেখানে ফিল্ডের নাম থাকে কী-তে এবং ফিল্ডের HTML থাকে ভ্যালুতে।

obiPlabon WordPress Comment Form Custom View
ইমেজ-২ঃ ওয়ার্ডপ্রেস কমেন্ট ফর্ম কাস্টম ভিউ

উল্লেখিত হুকের মাধ্যমে আমরা সহজেই নিচের কোড ব্যবহার করে কমেন্ট ইনপুট ফিল্ডেকে নীচের দিকে নিয়ে আসতে পারি।

— ধন্যবাদ 🙂

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

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

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

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

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

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

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

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” নামে মেনু এ্যাড হয়েছে!
  • মজা ২ঃ ড্যাসবোর্ড থেকে সব হেল্পট্যাব উধাও হয়ে গেছে!
  • মজা ৩ঃ পোস্ট স্ক্রিন থেকে ২টি হেল্পট্যাব খোয়া গেছে এবং নতুন একটির আগমন হয়েছে!
  • মজা ৪ঃ আমরা সাফল্যের সাথে হেল্পট্যাব এ্যাড করা, রিমুভ করা এবং হেল্পট্যাবে সাইডবার এ্যাড করা শিখে গেছি 😎

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

টাডা 😀