স্মার্ট ওয়ার্ডপ্রেস ডেভেলপারের টুলবক্সঃ Kirki

"স্মার্ট ওয়ার্ডপ্রেস ডেভেলপারের টুলবক্স" সিরিজের দ্বিতীয় পর্বে স্বাগতম ! এই পর্বে আমরা আলোচনা করব ওয়ার্ডপ্রেস থিম ডেভেলপারদের জন্য খুব ভালো একটা কাস্টমাইজার টুলকিট নিয়ে। যার নাম হল Kirki।

চলুন শুরু করা যাক !

কাস্টমাইজার নিয়ে একটি কথা

ওয়ার্ডপ্রেস ৩.৪ ভারশনে একটা নতুন এপিআই যুক্ত করা হয় যার নাম Theme Customization API এবং "Theme Customizer" নামক স্ক্রিনটাও যুক্ত করা হয়। ( "Theme" শব্দটি বাদ দেওয়া হয় ৪.১ ভারশনে যেহেতু এটা শুধুমাত্র "theme customizer" নয় বা শুধু থিমের সাথে এককভাবে সংযুক্ত নয় ) এটা আমদেরকে থিম কাস্টমাইজ করার অপশন প্রদান করে যা এই Appearance > Customize মেনুতে পাওয়া যায়। এর সাহায্যে একই সাথে ওয়েবসাইটে পরিবর্তন দেখা ও থিমের বিভিন্ন সেটিং পরিবর্তন করা যায়।

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

কাস্টমাইজার যে ওয়ার্ডপ্রেসের খুব মুল্যবান একটা এপিআই সেটা বললে বেশি অতিরঞ্জন হবে না। কারণ ইউজারদের এক্সপিরিএন্স সম্পূর্ণভাবে পরিবর্তন করার ক্ষমতা এর আছে।

আপনি যদি এই বিষয়ে আরো বেশি জানতে চান তাহলে Lee Pham এর লেখা কাস্টমাইজারের উপর সিরিজগুলো পড়তে পারেন।

এখন চলুন Kirki তে যাইঃ কাস্টমাইজার স্ক্রিনের জন্য সহজ ডেভেলপমেন্ট

থিমের ব্যবহারকারিদের অভিজ্ঞতাকে উন্নত করার জন্য একটা খুব ভালো টুল হল Kirki । এটার মুল কাজই হল থিম কাস্টমাইজারকে নিয়ে এবং ডিফল্ট কাস্টমাইজারের কন্ট্রোলকে এক্সটেন্ড বাঁ বর্ধিত করে toggles, range, ইনপুটস, রেডিও বাটন হিসাবে ব্যবহৃত ছবি দ্বারা।

একটা থিমের কাস্টমাইজেন স্ক্রিন তৈরি করা সব থেকে সহজ মনে হবে যখন আপনি একবার জানবেন এটা কিভবে কাজ করে।

একটি আবেদন:  Kirki অনুবাদ করার জন্য প্রস্তুত এবং এই মুক্তসোর্স প্রজেক্টাকে বিভিন্ন ভাষাতে অনুবাদ করতে আপনার সাহায্য প্রয়োজন। তুর্কি ভাষাতে অনুবাদ করার দায়িত্ব আমি নিলাম, কিন্তু আপনি যদি Kirki কে আপনার ভাষাতে অনুবাদ করেন তাহলে অনেক বেশি ভালো হবে। আপনি যদি কাজ করে অবদান রাখতে চান তাহলে বিস্তারিত জানার জন্য Kirki এর জনক Aristeides Stathopoulos এর সাথে যোগাযোগ করতে পারেন।

আপনার থিমে Kirki কে যুক্ত করা এবং এটাকে কনফিগার করা

আসলেই, Kirki দিয়ে আপনার থিম তৈরি করা খুবই সহজ। আপনাকে শুধু গিটহাব থেকে লেটেস্ট ভারশনটা ডাউনলোড করতে হবে, তারপর আপনার থিমে একটা ফোল্ডারের ভিতর এক্সট্রাক্ট করতে হবে এবং তারপর প্লাগিন ফাইলকে ইনক্লোড বা সংযুক্ত করতে হবে আপনার থিমের functions.php তে ( include_once() ব্যবহার করে ) ।

এখানে একটা উদাহরণ দেওয়া হলঃ 

1

<?php

2

3

include_once( dirname( __FILE__ ) . '/path/to/kirki/kirki.php' );

4

5

?>

একেবারে পানির মত সহজ, তাই না? তাছাড়া আপনি একটা কনফিগারেশন তৈরি করতে পারেন যাতে অন্য থিম বা প্লাগিন যারা Kirki ব্যবহার করেছে তাদের সাথে কনফ্লিক্ট বা জামেলা না করে ।

1

<?php

2

3

Kirki::add_config( 'my_theme', array(

4

    'capability'    => 'edit_theme_options',

5

    'option_type'   => 'option',

6

    'option_name'   => 'my_theme',

7

) );

8

9

?>

কাজ হয়ে গেছে !

আপনার থিমে Kirki এর ব্যবহার

এখন যেহেতু আমরা দেখেছি কিভাবে Kirki কে থিমে সংযুক্ত করতে হয় এবং কনফিগার করতে হয়, তাই এখন কিছু উদাহরণ দেখব কি করে থিমের কাস্টমাইজেন পেজ তৈরি করতে হয়।

চলুন মৌলিক বিষয় দিয়ে শুরু করি। এখানে কোন কন্ট্রোল ফিল্ড ছাড়া কিছু প্যানেল ও সেকশন এর ইন্সটলেশন এর মৌলিক কোড দেওয়া হলঃ

1

<?php

2

3

/**

4

 * Add panels

5

 */

6

Kirki::add_panel( 'panel_id', array(

7

    'priority'    => 10,

8

    'title'       => __( 'My Title', 'textdomain' ),

9

    'description' => __( 'My Description', 'textdomain' ),

10

) );

11

12

/**

13

 * Add sections

14

 */

15

Kirki::add_section( 'custom_css', array(

16

    'title'          => __( 'Custom CSS' ),

17

    'description'    => __( 'Add custom CSS here' ),

18

    'panel'          => '', // Not typically needed.

19

    'priority'       => 160,

20

    'capability'     => 'edit_theme_options',

21

    'theme_supports' => '', // Rarely needed.

22

) );

23

24

?>

এখন, চলুন কন্ট্রোল ফিল্ড সম্পর্কে একটু দেখি যা Kirki প্রদান করে।

Kirki এর কন্ট্রোল ফিল্ডের টাইপগুলো

আপনার প্যানেল ও সেকশন তৈরি করার পর আপনি সেকশনগুলো "control fields" দিয়ে পরিপূর্ণ করতে পারেন। একটা সেকশনের ভিতরে একটা ফিল্ড যুক্ত করার কোড এখানে দেওয়া হল।

1

<?php

2

3

Kirki::add_field( 'my_theme', array(

4

    'type'        => 'text',

5

    'setting'     => 'text_demo',

6

    'label'       => __( 'This is the label', 'kirki' ),

7

    'description' => __( 'This is the control description', 'kirki' ),

8

    'help'        => __( 'This is some extra help text.', 'kirki' ),

9

    'section'     => 'my_section',

10

    'default'     => __( 'This is some default text', 'kirki' ),

11

    'priority'    => 10,

12

) );

13

14

?>

আমি যেভাবে আগেই বলেছিলাম, Kirki নতুন কন্ট্রোল দ্বারা ডিফল্ট কন্ট্রোলকে এক্সটেন্ড বা বর্ধিত করে। আধিক "পরিপূর্ণ" টিউটোরিয়াল লেখার উদ্দেশ্যে, Kirki এর অতিরিক্ত কন্ট্রোল ফিল্ডগুলোর সাথে আমি কোর কন্ট্রোল ফিল্ডগুলোও যুক্ত করব।

1. সাধারণ লেখা ইনপুট করার সুবিধা দেয় text ।
2. টেক্সটএরিয়া যুক্ত করতে সুবিধা দেয় textarea । 
3. WYSIWYG এডিটর যুক্ত করতে সাহায্য করে editor ।
4. রেডিও বাটন যুক্ত করতে সাহায্য করে radio ।
5. চেকবক্স যুক্ত করতে সাহায্য করে checkbox ।
6. একটা সুন্দর কালার পিকারের মাধ্যমে কালার পছন্দ করতে সাহায্য করে color এবং color-alpha (এটা ট্রান্সপারেঞ্চি বা স্বছতা সাপোর্ট করে)
7. সম্পূর্ণ সিএসএস ব্যাকগ্রাউন্ড কাস্টমাইজার যুক্ত করতে সাহায্য করে background ।
8. কালার পেলেট যুক্ত করতে সাহায্য করে palette ।
9. একটা ড্রপডাউন মেনু যুক্ত করতে সাহায্য করে select ।
10. HTML এর ডিফল্ট <option> এলিমেন্ট থেক ভিন্ন, আরো ভালো সিলেক্ট মেনু তৈরি করতে সাহায্য করে select2 ।
11. একাধিক চয়েজ যুক্ত সিলেক্ট মেনু যুক্ত করতে সাহায্য করে select2-multiple । ( আমি এমনিতেই একটা ধারনা করছিঃ এটা হয়তো select2 এর সাথে একত্রে মিশে যাবে ভবিষ্যতে।) 
12. ডাটাবেজের মধ্যে থাকা পেজগুলোকে নিয়ে একটা ড্রপডাউন নেভিগেশন তৈরি করতে সাহায্য করে dropdown-pages ।
13. একটা স্বাভাবিক আপলোডার যুক্ত করতে সাহায্য করে upload ।
14. একটা স্বাভাবিক ছবি সিলেক্টর/আপলোডার যুক্ত করতে সাহায্য করে image । 
15. ছবিকে রেডিও বাটনের হিসাবে ব্যবহার করতে সাহায্য করে radio-image ।
16. একসেট বাটন কে রেডিও বাটন হিসাবে কাজ করানোর অপশন যুক্ত করতে সাহায্য করে radio-buttonset ।
17. HTML5 এর সংখা ইনপুট করতে সাহায্য করে number ।
18. HTML5 এর একটি রেঞ্জ স্লাইডার যুক্ত করতে সাহায্য করে slider ।
19. একাধিক চেকবক্স যুক্ত ইনপুটের একটা লিস্ট যুক্ত করতে সাহায্য করে multicheck ।
20. চেকবক্সের (কিন্তু তার থেকে দেখতে সুন্দর) মত কাজ করে এমন একটি "switch(সুইচ)" বাটন যুক্ত করতে সাহায্য করে switch ।
21. চেকবক্সের মত কাজ করে এরকরম একটা "toggle" বাটন যুক্ত করতে সাহায্য করে toggle ।
22. সাজানোযায় এমন একটি চেকবক্সের লিস্ট যুক্ত করতে সাহায্য করে sortable ।
23. একটা কাস্টম কন্ট্রোল ফিল্ড যুক্ত করতে সাহায্য করে custom । যা আসলে যেকোন নির্ভুল HTML এর কোডের অংশ।

Kirki কে স্টাইল করা বা সাজানো।

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

• logo_image: লোগোর ছবির ইউআরএল নির্ধারণ করে।
• description: লোগোতে ক্লিক করলে দেখা যাবে এমন ডেসক্রিপশন নির্ধারণ করে দেয়।
• color_active:   এটা মেনু আইটেম গুলো, হেল্প বাটন গুলো এবং এরকম আর অনেক কিছুর "active বা সক্রিয়" অবস্থার রঙ নির্ধারণ করে দেয়। 
• color_light: এটা ডিজেবল্ড ও নিষ্ক্রিয় কন্ট্রোলগুলোর জন্য "secondary বা মাধ্যমিক" কালার সেট করতে সাহায্য করে।
• color_select: এটা সিলেক্টেড জিনিসের জন্য "সিলেক্টেড" কালার সেট করতে সাহায্য করে। 
• color_accent : এটা স্লাইডার কন্ট্রোল ও ছবি সিলেক্টে ব্যবহৃত "accent/আকসেন্ট"এর কালার সেট করতে সাহায্য করে।
• color_back: এটা কাস্টমাইজারের ব্যাকগ্রাউন্ড কালার সেট করতে সাহায্য করে।
• url_path: এটা Kirki এর URL path নির্ধারণ করে দেয় যা ব্যবহার করে Kirki এর /assets/ ফোল্ডারে থাকা CSS ফাইলে লোড করা হয়।
• stylesheet_id: এটা CSS এঙ্কিউইং প্রসেসের হ্যান্ডল হিসাবে স্টাইলশিট আইডি সেট করতে সাহায্য করে।

এই স্টাইলের অপশনগুলো ব্যবহার করতে হলে আপনাকে kirki/config ফিল্টার ব্যবহার করতে হবে। এখনে কিভাবে Kirki কনফিগার করতে হয় তার একটা উদাহরণ দেওয়া হল 

1

<?php

2

3

/**

4

 * Styling configuration for the Kirki Customizer

5

 */

6

function kirki_demo_configuration_sample_styling( $config ) {

7

8

    $config['logo_image']   = 'http://kirki.org/img/kirki-new-logo-white.png';

9

    $config['description']  = __( 'The theme description.', 'kirki' );

10

    $config['color_accent'] = '#00bcd4';

11

    $config['color_back']   = '#455a64';

12

    $config['width']        = '20%';

13

14

    return $config;

15

16

}

17

add_filter( 'kirki/config', 'kirki_demo_configuration_sample_styling' );

18

19

?>

ভ্যালুগুলো পাওয়া

Kirki যে ভ্যালুগুলো জমা করে সেগুলো আপনি আপনার থিমে ব্যবহার করতে চান, তাই না? এইযে এইভাবেই ব্যবহার করতে হয়ঃ 

1

<?php

2

3

$value = Kirki::get_option( $config_id, $option_id );

4

5

?>

ঠিক এরকমই এত সহজ। আপনি অবশ্য এখনও কোর get_option() ও get_theme_mod() ফাংশনগুলো ব্যবহার করতে পারেন।

আজকের জন্য সমাপ্ত করছি।

আপনি কি মনে করেন না, এই রকম টুলগুলো ওয়ার্ডপ্রেসকে আরো বেশি ইউজার-ফ্রেন্ডলি করে ও আরো বেশি সহজে ডেভেলপ করার উপযোগী করে? আমি যেভাবে এই সিরিজের শুরুতেই বলেছিলাম যে ওয়ার্ডপ্রেসের সব ক্ষমতা আসে এর কমিউনিটি থেকে, আর এই রকম টুলগুলো হল কমিউনিটি বৃদ্ধির চাবিকাঠি। আমি এই টিউটোরিয়ালে যা লিখলাম তার থেকে অনেক বেশি সুবিধা Kirki প্রদান করে, আর Ari (Kirki এর জনক) প্রতিজ্ঞা করে তাঁর নিজের ভাষায় বলেছেন যে তিনি Kirki কে ডেভেলপ করে যাবেন যত সময় লাগে তত সময় লাগিয়ে। 

আপনি এখন Kirki সম্পর্কে কি চিন্তা করছেন?  নিচে মন্তব্যের যায়গায় আপনার চিন্তা বা মতমত জানান। আর আপনার যদি এই লেখাটি ভালো লেগে থাকে, তাহলে অবশ্যই আপনার বন্ধুদের সাথে লেখাটি শেয়ার করতে ভুলবেন না !

আগামী পর্বে আবার আপনাদের সাথে দেখা হবে যেখানে আমরা GenerateWP ওয়েবসাইট নিয়ে আলোচনা করব।