জিমেইলে প্রিভিউ প্যান এক্টিভেশন

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

জিমেইলের জেনারেল ভিউ বা নরমাল ভিউ

স্প্লিট প্যান মোড বা প্রিভিউ প্যান যুক্ত করা:

জিমেইল ল্যাবস সেটিংস প্যানেল

সেটিংস মেনু থেকে সেটিংসে (Settings) ক্লিক করতে হবে। এরপর সেটিংস পেজ ওপেন হলে সেখান থেকে ল্যাবস (Labs) ট্যাবে ক্লিক করতে হবে। ল্যাবস পেজে বিভিন্ন এক্সপেরিমেন্টাল ফিচারের একটি লিস্ট পাওয়া যাবে। লিস্ট থেকে প্রিভিও প্যান (Preview Pan) ফিচারটি খুঁজে এনাবল (Enable) করে সেভ চেঞ্জেস (Save Changes) বাটনে ক্লিক করলেই প্রিভিও প্যান জিমেইলের ইমেইল উন্ডোতে যুক্ত হয়ে যাবে। প্রিভিও প্যান (Preview Pan) ফিচারটি যুক্ত হলে সেটিংস বাটনের পাশে নতুন আরেকটি বাটন দেখা যাবে যেখান থেকে আপনি চাইলে সহজেই ভিউ কন্ট্রোল করতে পারবেন।

স্প্লিট প্যান মোড বা প্রিভিউ প্যান:

প্রিভিউ প্যান ভার্টিক্যাল ভিউ
প্রিভিউ প্যান হরিজন্টাল ভিউ

 

— ধন্যবাদ 🙂

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

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

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

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

টাডা 😀