জ্ঞানস্তর: মাধ্যমিক

কোনো একটা লম্বা নামকে সংক্ষিপ্ত করে লেখার দরকার হলো, এজন্য প্রত্যেকটা শব্দের প্রথম অক্ষরগুলো, মানে আদ্যক্ষর নিয়ে, আপনি সেই নামটা তৈরি করলেন, ইংরেজিতে যাকে বলে acronym। যেমন: Bangladesh Agricultural and Rural Development-কে সংক্ষেপে ডাকা হয় BARD বলে; এখানে BARD হলো পুরো নামটার সংক্ষিপ্ত রূপ। ধরা যাক, একটা লেখা লিখছেন, যেখানে বারবার আপনি BARD-ই বলে যাচ্ছেন। কিন্তু একজন পাঠক BARD-এর মানে তো নাও জানতে পারেন। তাই এসব ক্ষেত্রে HTML-এর সহজ একটা কৌশল কাজে লাগানো হয়: <abbr> ট্যাগটি। এর আগে ব্যবহার করা হতো <acronym> ট্যাগটি, যা এখন deprecated বা বাতিল করা হয়েছে।

এই কোডটা ব্যবহার করলে যখনই আপনি GDP কিংবা BARD লেখাটার উপরে মাউস আনবেন, একটু অপেক্ষা করলেই সেখানে একটা বাক্সে দেখাবে BARD-এর মানে, যা আপনি <abbr>-এর title-এ দিয়েছেন। কিন্তু পূর্বনির্ধারিত এই স্টাইলটি অনেকের পছন্দ নাও হতে পারে। সেজন্য নিচের এই CSSটুকু বসিয়ে নিয়ে আপনি আরো দৃষ্টিনন্দন করে নিতে পারেন HTML-এর নিজস্ব টুলটিপকেই। টুলটিপের জন্য অন্য কিছু আবিষ্কার না করে <abbr> ট্যাগ ব্যবহার করাটা Web Accessibility-ও নিশ্চিত করে।

কেমন লাগলো, আর কাজে লাগলো কিনা অবশ্যই জানাতে ভুলবেন না। আর, আরো আরো সিএসএস প্রোপার্টি যোগ করে নতুন নতুন কিছু পরীক্ষা-নিরীক্ষা চালান, একটু opacity প্রয়োগ করে দেখুন… নতুন কিছু বের করতে পারলেও আমাদের সাথে শেয়ার করুন।

– মঈনুল ইসলাম
mayeenulislam.github.io

মূলসূত্র: পোস্টটা লিখতে এর মূল তথ্য গ্রহণ করা হয়েছে একটি তৃতীয় পক্ষীয় টিউটোরিয়াল থেকে, যে লিংকটি বর্তমানে লভ্য নয়। তবে সেখানকার কোডগুলো ঝামেলা করে বলে তা সংশোধন ও পরিমার্জন করতে সহায়তা নেয়া হয়েছে সফ্‌টওয়্যার ইঞ্জিনিয়ার অমিত চৌধুরীর। কৃতজ্ঞতা তাই এঁদের প্রতি। মূল লেখাটি অনেক বছর আগে লেখা ছিলো, সেখানকার deprecated কোড সরিয়ে সাম্প্রতিক কোড যোগ করা হয়েছে।

The post HTML abbr ট্যাগ, CSS দিয়ে করুন দৃষ্টিনন্দন appeared first on Tuts by Mayeenul Islam.

ওয়ার্ডপ্রেসে আমরা সচরাচর একক সাইট পরিচালনা করি, অর্থাৎ সেখানে একটা ইন্সটলেশনে একটাই সাইট চলে। কিন্তু ওয়ার্ডপ্রেস তার একটা ইন্সটলেশনে একাধিক সাইট চালানোরও একটা সুযোগ দিয়ে রেখেছে, আর তা হলো ওয়ার্ডপ্রেস মাল্টিসাইট। প্রথমদিকে ওয়ার্ডপ্রেস মাল্টিসাইট WordPress MU নামে কাজ শুরু করলেও তা পরবর্তিতে ওয়ার্ডপ্রেস কোর-এ অন্তর্ভুক্ত করা হয়। এবং বলা যায়, সবচেয়ে বড় ওয়ার্ডপ্রেস মাল্টিসাইট ইন্সটলেশন হচ্ছে WordPress.com, যেখানে আপনি চাইলেই বিনামূল্যে একটা ব্লগ খুলে ফেলতে পারেন।

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

যাহোক, এবারে মূল কথায় আসা যাক-

মাল্টিসাইটের রেজিস্ট্রেশন পাতা

কিন্তু ওয়ার্ডপ্রেসে মাল্টিসাইট ইন্সটল করা হলে খুব বিরক্তি উদ্রেক করে যে ব্যাপারটা, তা হলো এর ব্যবহারকারী রেজিস্ট্রেশন পাতাটা। সাধারণত ওয়ার্ডপ্রেস সিঙ্গেল সাইটের রেজিস্ট্রেশন পাতাটা পাওয়া যায় এই ঠিকানায়:

https://example.com/wp-login.php?action=register

আপনি যদি একটা ওয়ার্ডপ্রেস ইন্সটলেশন ফোল্ডার খুলে দেখেন, তাহলে রুট ফোল্ডারেই (অর্থাৎ যেখানে সাধারণত wp-config.php ফাইলটা থাকে) wp-login.php নামে একটা ফাইল দেখবেন, এটাই সেটা।

কিন্তু ওয়ার্ডপ্রেস মাল্টিসাইট এই পাতা থেকে রেজিস্ট্রেশন করে না। মাল্টিসাইট ইন্সটল করা হলে তখন রেজিস্ট্রেশন পাতা হয় এই ঠিকানায়:

https://example.com/wp-signup.php

যেখানে এইমাত্র wp-login.php ফাইলটা দেখেছেন, সেখানেই আপনি wp-signup.php ফাইলটাও পাবেন। যখনই আপনি “নিবন্ধন” (Register/ Sign up) লেখা কোনো লিংকে ক্লিক করবেন, ওয়ার্ডপ্রেস মাল্টিসাইট আপনাকে এই সাদামাটা পাতাটায় নিয়ে আসবে, যা অনেকেই পছন্দ করেন না।

এই পাতাটা অপছন্দ করার কারণগুলোর মধ্যে অন্যতম হলো এর মধ্যে কোনো স্টাইল করা থাকে না। আর দ্বিতীয়ত হলো, এই পাতায় যা যা ত্রুটি কিংবা সফলতার বার্তা দেখায়, সেগুলোকে ফিল্টার করে বদলে নেয়া যায় না। এজন্যই বিকল্প খোঁজা…

আজকে আমরা এই পাতাটিকে পাল্টে ফেলে নিজস্ব একটি সাইনআপ পাতা এর জায়গায় বসিয়ে দিতে হয় কিভাবে, তা-ই দেখবো। মনে রাখতে হবে, এজন্য আমরা যে কাজগুলো করছি না:

• আমরা .htaccess ফাইলে কোনো হাত দিচ্ছি না,
• আমরা আলাদা কোনো প্লাগইন ব্যবহার করছি না, এবং
• অতি অবশ্যই আমরা ওয়ার্ডপ্রেসের কোনো কোর ফাইলে হাত দিচ্ছি না

নিজস্ব সাইনআপ পাতা

এই জ্ঞানার্জনে প্রাথমিকভাবে সহায়তা নিয়েছিলাম নিচের দুটি পাতার:

1. Using a Custom wp-signup Page With WordPress MU^ – Chris Wiegman
2. individual MU Registration Page possible?^ – David Sader

কিন্তু এই দুটো রিসোর্স সম্পূর্ণ ছিল না, এবং কোনো কোনো ক্ষেত্রে তাতে ত্রুটি (bug) ছিল। তাই এসময় আমাকে আন্তরিকতার সাথে সহায়তা করেছেন কিংবা সত্যি বলতে কি পথ দেখিয়েছেন জার্মানির @thefuxia (Thomas Scholz) এবং অচেনা majick।

এই আলোচনার আগে ধরে নিচ্ছি আপনাদের ওয়ার্ডপ্রেস ইন্সটলেশনে:

• মাল্টিসাইট ইন্সটল করা রয়েছে,
• সার্ভারে mod_rewrite মড্যুল সক্রিয় আছে, এবং
• আপনার ওয়ার্ডপ্রেসের পার্মালিংক ডিফল্ট বা পূর্বনির্ধারিত পার্মালিক নয়

ধাপ ১: নিজস্ব সাইনআপ পাতাটা তৈরি

চাকা একবার আবিষ্কার হয়ে গেছে, কেন আবার আবিষ্কার করবো? তাই আমরা ওয়ার্ডপ্রেস কোর থেকে wp-signup.php পাতাটা কপি করে আমাদের থিমের (কিংবা চাইল্ড থিমের) ভিতরে রাখি। এটার নামটা পাল্টে ফেলি যাতে স্বকীয়তা প্রকাশ পায়, ধরা যাক দিলাম: signup.php।

এবারে ফাইলটা কোনো টেক্সট এডিটরে খুলি: এই ফাইলে উপরের দিকে দুটো ফাইল লোড করা আছে, লাইন দুটো হলো:

require( dirname(__FILE__) . '/wp-load.php' );

এবং

require( dirname( __FILE__ ) . '/wp-blog-header.php' );

এই লাইন দুটো বন্ধ করে দেয়া যাক, মানে কমেন্ট আউট করে দেই। ফলে লাইন দুটো হয়ে গেল:

// require( dirname(__FILE__) . '/wp-load.php' );

এবং

// require( dirname( __FILE__ ) . '/wp-blog-header.php' );

কেন বন্ধ করলাম? …কারণ হলো, এতক্ষণ wp-signup.php ফাইলটা রুট থেকে লোড হচ্ছিল (থিম লোড হবারও আগে), তখনও ওয়ার্ডপ্রেসের কোনো ফাংশন লোড হয়নি। আর এখন এটাকে থিমের ভিতরে নিয়ে আসার মানে হচ্ছে, থিম যখন লোড হবে তখন এটার অস্তিত্ব প্রকাশ পাবে, এর আগে না। আর থিম যখন লোড হবে তখন ওয়ার্ডপ্রেসের wp-load.php আর wp-blog-header.php দুটো ফাইলই লোড হয়ে যাবে। সুতরাং আবারও ফাইল দুটো লোড করা মানেই পুণর্বার কাজ করা (repeat), এবং কখনও Repeat করা যাবে না (DRY – Don’t Repeat Yourself)।

এই ফাইলের আরো দুটো লাইন আছে:

get_header( 'wp-signup' );

এবং, একেবারে নিচে:

get_footer( 'wp-signup' );

এই লাইন দুটোকে বদলে আমাদের থিমের হেডার কিংবা নিজস্ব কোনো ব্যতিক্রম হেডার কল করে দেয়া যেতে পারে। আমি আমার থিমে, সাইনআপ পাতার জন্য আলাদা একটি হেডার বানিয়েছি (header-null.php), তাই আমি সেটা যোগ করেছি এপর্যায়ে। তাই, আমার ক্ষেত্রে ব্যাপারটা ছিল:

get_header( 'null' ); //instead of get_header( 'wp-signup' );

এবং

get_footer( 'null' ); //instead of get_footer( 'wp-signup' );

ব্যস, আমাদের নিজস্ব সাইনআপ পাতা কিন্তু প্রস্তুত। এবারে এই ফাইলটাকে জায়গামতো কল করিয়ে দিলেই কেল্লা ফতে।

ধাপ ২: এমইউ প্লাগইন তৈরি

MU Plugin, এতক্ষণে বুঝে গেছি নিশ্চয়ই, এটা মাল্টিসাইটের সাথে সম্পর্কিত। আসলে এটা মাল্টিসাইটের সাথে সম্পর্কিত ছিল। পরবর্তিতে এর প্রয়োজন এখন আর তেমন একটা হয় না বললেই চলে। আর এখানে MU মানে Multisite না, বরং Must Use, অর্থাৎ মাল্টিসাইটের সকল সাইটে আবশ্যকীয়ভাবে এই কোডগুলো লোড করার জন্যই MU Plugin ব্যবহার করা হতো। …সুতরাং, এখানে আমরা যে কোডগুলো ব্যবহার করবো, সেগুলো নিজস্ব কোনো সাধারণ প্লাগইনে বসিয়ে নিলেও কাজ করবে।

আমরা আমাদের মাল্টিসাইট ইন্সটলেশনের wp-content/ ডিরেক্টরির (ফোল্ডার) ভিতরে একটা ডিরেক্টরি তৈরি করি, নাম হবে ‘mu-plugins‘ (যদি আমরা মাস্ট ইউয প্লাগইনের পাথ বদলে না থাকি)। এবারে এই ডিরেক্টরির ভিতরে একটা ফাইল তৈরি করি, যেকোনো নাম দিয়ে, ধরা যাক দিলাম, mu-signup.php। এবারে এই ফাইলটার মধ্যে লিখি:

কোডগুলো বুঝে নেয়া যাক, প্রথম ফাংশনটা wp_signup_location ফিল্টার হুকে হুক করে আসলে যা করছে, তা হলো, ওয়ার্ডপ্রেসের নিজস্ব সাইনআপের যে ইউআরএল প্রথমে আমরা বলেছিলাম, সেটাকে বদলে, আমাদের নিজস্ব যে পাথে আমরা আমাদের সাইনআপ পাতা তৈরি করতে যাচ্ছি, সেখানে ঘুরিয়ে দিবো। যেমন: লগইন পাতার নিচে যে Register লিংকটা আছে, সেখানে ক্লিক করলে যেন সে আমাদের নিজস্ব সাইনআপ পাতায় নিয়ে আসে, সেটা তাকে বলে দিলাম। এটা আমরা লিখেছি 12 নম্বর লাইনে যে, ওয়ার্ডপ্রেস নেটওয়ার্ক সাইটের ইউআরএল-এর পরেই signup বসালে ইউআরএল যা হবে, সেটাকেই আমাদের মাল্টিসাইটের সাইনআপ ইউআরএল হিসেবে বুঝে নিবে:

https://example.com/signup

আর দ্বিতীয় ফাংশনটা হচ্ছে একটা wp_redirect()। কেউ যদি মাল্টিসাইটের নিজস্ব সাইনআপ ইউআরএল পাতার লিংক (/wp-signup.php) টাইপ করে, তাকেও যেন ঐ পাতা থেকে সরিয়ে আমাদের নিজস্ব সাইনআপ পাতায় (/signup) নিয়ে আসে। অনেকেই এই কাজটুকু .htaccess ফাইল এডিট করে, করে থাকেন (যেমন ক্রিস-এর প্রথম লিংকটাতে দেখতে পাবেন)। কিন্তু আমরা এই কাজটার জন্য .htaccess এডিট করার ঝামেলায় যাইনি।

অর্থাৎ, এপর্যন্ত করা হয়ে গেলে, লোকজন, ওয়ার্ডপ্রেসের পূর্বনির্ধারিত সাইনআপ পাতা না দেখে, আমাদের নিজস্ব ইউআরএল-এ চলে আসবে – এতটুকু আমরা করে ফেলেছি। ( হাততালি)

বাকিটুকু আমরা দুভাবে করতে পারি:

1. সহজ পদ্ধতি: পেজ টেমপ্লেট তৈরি করে
2. ঘাঁটাঘাঁটি পদ্ধতি: রিরাইট এন্ডপয়েন্ট তৈরি করে

পছন্দটা আপনার, আপনি কিভাবে করতে চান… তবে দুটোই করা যাবে না। যেকোনো একটা।

ধাপ ৩: সহজ পদ্ধতি: পেজ টেমপ্লেট তৈরি:

আমরা থিমের ভিতরে যে signup.php ফাইলটা [ওয়ার্ডপ্রেস কোর থেকে কপি করে] বানিয়েছিলাম, সেটা টেক্সট এডিটরে খুলে এক্কেবারে উপরে আমরা কিছু কথা লিখি, যাতে এটা একটা পেজ টেমপ্লেট^ হয়ে যায়:

<?php
/**
* Template name: tuts nano signup
*/

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

এবারে, ওয়ার্ডপ্রেসের অ্যাডমিন প্যানেলে একটা পাতা তৈরি করি, যার নাম দিই Signup এবং slug হিসেবে দিই signup। এবারে পেজ টেমপ্লেট হিসেবে মাত্র তৈরি করা tuts nano signup [কিংবা আপনাদের দেয়া নামের] টেমপ্লেটটা বাছাই করে দিন। পাতাটা সংরক্ষণ করুন।

কাজ শেষ। 🙂

ধাপ ৩: ঘাঁটাঘাঁটি পদ্ধতি: রিরাইট এন্ডপয়েন্ট তৈরি:

বলেছি যেকোনো একটা পদ্ধতি করতে। যদি ‘সহজ পদ্ধতি’ করে ফেলেন, তাহলে আগের অবস্থায় ফেরত যান, যা করেছেন মুছে ফেলুন, এবারে এই পদ্ধতিতে করে দেখা যাক:

একাজে আমাদেরকে সহায়তা করতে পারবে এই ডিবাগিং প্লাগইনটি:

• Rewrite Rules Inspector^ – WordPress.org Plugins, Daniel Bachhuber and his team

ইন্সটল করে সক্রিয় করে নেয়া যেতে পারে। না করলেও ক্ষতি নেই। কিন্তু কী ঘটছে, কিভাবে ঘটছে, দেখলেই না শেখা হয়…। এবারে আমাদের থিমের functions.php-তে এই কোডগুলো বসিয়ে নেয়া যাক:

প্রথম ফাংশনটা দিয়ে আমরা একটা এন্ডপয়েন্ট যোগ করছি, মানে ইউআরএল-এর শেষে একটা লেজ যোগ করছি। এই লেজটাতো হাতে লিখেই যোগ করা যায়, যেমন: example.com/kauwa; হ্যা, ঠিক, কিন্তু আসলে এই লেজ, সেই লেজ না। এই লেজটা ডায়নামিকভাবে প্রোগ্রামের মাধ্যমে কাজ করবে – ওয়ার্ডপ্রেসের কাছে এর একটা অর্থ থাকবে। আমরা যে লেজটা যোগ করেছি, তা হলো: signup। অর্থাৎ, আমাদের ডোমেইন নামের শেষে লেজটা যোগ হয়ে ডায়নামিক ইউআরএলটা হবে:

https://example.com/signup

যেহেতু রিরাইট র‍্যুল ফ্লাশ না করলে নতুন মান নিবে না, তাই হাসিন হায়দার ভাইয়ের অনুকরণে, আমরা একবার, হ্যা, একবার রিরাইট র‍্যুলটা ফ্লাশ করেছি। এটা ম্যানুয়ালিও করা যায়, সেটা পরে বলছি।

এবারে দ্বিতীয় ফাংশনটা দিয়ে আমরা বলে দিচ্ছি যে, যখন তোমার ইউআরএল থেকে query_variable হিসেবে ‘signup’ পাবে, তখন যে টেমপ্লেট তুমি দেখাবে বলে ঠিক করেছিলে, সেটার বদলে তুমি আমাদের বলে দেয়া টেমপ্লেটটা দেখাবে। এবং আমরা, ঐ যে, প্রথমে কোর থেকে কপি করে ফাইলটা তৈরি করেছিলাম, সেই ফাইলটার পাথ, ফাংশনটার ভিতরে দেখিয়ে দিয়েছি।

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

https://example.com/signup

দুঃখিত! কাজ করছে না। হয় 404 টেমপ্লেট দেখাচ্ছে, নয়তো প্রথম পাতায় নিয়ে গেছে। কেন হচ্ছে এমন? সব তো ঠিকই আছে। আপনি ঠিকই /signup লেজও যোগ করেছেন।

রিরাইট র‍্যুল্‌স ফ্ল্যাশ করা: এই অবস্থায় দেখা না যাওয়ার একটা কারণ হতে পারে আপনার রিরাইট র‍্যুল্‌স ফ্লাশ করা হয়নি। এজন্য যেটা করতে হবে, যে প্লাগইনটা ইন্সটল করতে বলেছিলাম, সেটাতে গেলেই উপরে ডানে Flush Rules বোতাম চেপে কাজটা করা যায়। আর যদি প্লাগইনটা ইন্সটল না করে থাকেন, সেক্ষেত্রে Settings » Permalinks-এ গিয়ে কোনো পরিবর্তন না করে একবার সংরক্ষণ বোতাম চাপুন।

তবু দেখা যাচ্ছে না, তাই না? লেজের পরে আরেকটা লেজ লাগালে কী হয়, দেখি তো? লিখলাম: example.com/signup/asd, এবং নিমিষেই আমাদের কাঙ্ক্ষিত টেমপ্লেটটা লোড হয়ে গেল।

সমস্যাটা আসলে অন্য জায়গায়, এবং একটা সমস্যা ঠিকই আছে।

ঐচ্ছিক: পরীক্ষা করার জন্য, দ্বিতীয় ফাংশনটার ভিতরে if(!is_admin()) { লেখাটার ঠিক আগে লিখুন: echo get_query_var('signup'); এবং ফাইলটা সংরক্ষণ করে এসে রিফ্রেশ করে দেখুন তো কিছু দেখা যায় কিনা ব্রাউযারে। টেমপ্লেটটার উপরে asd লেখাটা দেখাচ্ছে। এর মানে, ?signup=asd ভ্যালুটা দেখাচ্ছে। যদি আমরা asd মুছে ফেলি, তাহলে আবারও 404 কিংবা প্রথম পাতা দেখাচ্ছে এবং কোনো লেখা ইকো হচ্ছে না। অর্থাৎ query_variable-টা কোনো মান পাচ্ছে না। echo … লেখাটুকু মুছে ফেলি, আমাদের পরীক্ষা শেষ।

কারণটা হলো:

যেহেতু add_rewrite_endpoint() তার প্যারামিটারের মান প্রত্যাশা করছে, অথচ আমরা কোনো মান দিচ্ছি না, সে আসলে null মানকে false হিসেবে ধরে নিচ্ছে। অবস্থাটা দাঁড়াচ্ছে: example.com?signup=false। এমতাবস্থায় কোনো টেমপ্লেট লোড করার প্রশ্নই উঠে না। এই সমস্যাটার সমাধান করতে আমাদেরকে request-এ হুক করে ওর জন্য একটা মান সেট করে দিয়ে আসতে হবে। (ব্যাখ্যার উৎস^)

Thomas Scholz বলছেন, এটা ওয়ার্ডপ্রেসের রিরাইট এপিআই-এর একটা ত্রুটি (bug)।

যাহোক, এর সমাধানও আছে। সমাধান, যেমনটা ক্রিস্টোফার ড্যাভিস বলেছেন, এর সমাধান করতে নিচের কোডটুকু functions.php-তে যোগ করে নিতে হবে, এতে মানটা আর false আসবে না, বরং true আসবে:

…এবং আমাদের কাঙ্ক্ষিত টেমপ্লেটও লোড হবে।

ধাপ ৪: বার্তাগুলো দেখানোর ব্যবস্থা

সব সুন্দর মতো হয়ে গেলেও আরো একটা ছোট্ট কাজ বাকি আছে। আপনি যখন এই সাইনআপ ফর্মে কোনো কিছু না লিখে পরবর্তি (next) বোতামে ক্লিক করবেন, তখন কিন্তু সাইনআপও হবে না আবার কোনো ত্রুটি বার্তাও দেখাবে না। এর কারণ, ফর্মটা সাবমিট হচ্ছে wp-signup.php পাতায়, আর সেখানেই ত্রুটি বার্তা দেখাচ্ছে, আর আমরা সেখান থেকে wp_redirect() চালিয়ে ব্যবহারকারীকে আমাদের পাতায় ঘুরিয়ে আনছি, ফলে ত্রুটি বার্তাগুলো হারিয়ে যাচ্ছে।

খুব ছোট্ট একটা ফিক্স দরকার। আমরা যে signup.php ফাইলটা বানিয়েছিলাম নিজের মতো করে, সেই ফাইলটাতে থাকা তিনটা <form> ট্যাগের সাবমিশন অ্যাকশন অংশটা বদলে দিতে হবে। ফাইলের মধ্যে অনুসন্ধান করতে পারেন: action="wp-signup.php" লিখে। তাহলে ফর্ম ট্যাগগুলোর action="wp-signup.php"-এর জায়গায় লিখা যাক:

action=""

অথবা লেখা যাক:

action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>"

ব্যস। কাজ শেষ। এতে আমাদের ফর্মটা এই পাতায়ই সাবমিট হবে এবং ত্রুটি কিংবা সফলতার বার্তাও সে অনুযায়ী দেখাবে। আমাদের কাজ শেষ এবং আমরা সফল।

স্ক্রিপ্ট যোগ করা

ওয়ার্ডপ্রেসের পূর্বনির্ধারিত সাইন-আপ পাতা বদলানোর মূল কারণই হলো এর চেহারা। তাই এই নতুন তৈরি পাতায় কিছু স্টাইলিং দেয়া লাগতেই পারে কিংবা কোনো জাভাস্ক্রিপ্ট ভ্যালিডেশন দেয়া লাগতে পারে। সেজন্য ওয়ার্ডপ্রেসের ফ্রন্ট এন্ডে যেভাবে স্টাইলশিট কিংবা স্ক্রিপ্ট যোগ করি আমরা, সেভাবেই স্টাইল করা যেতে পারে। কিংবা সরাসরি ফ্রন্টএন্ডের স্টাইলশিটেও (style.css) স্টাইল করা যেতে পারে। খুবই সহজ:

এবারে আপনার স্টাইলশীটে (nanotuts-signup-styles.css) নিজের মতো করে স্টাইল করুন। আপনি বুঝবেন, তবু বলে রাখছি: কন্টেইনারের ক্লাস .mu_register  আর ফর্মের আইডি হচ্ছে #setupform। এছাড়া আমাদের তৈরিকৃত signup.php পাতায় wpmu_signup_stylesheet() ফাংশনে দেখবেন কিছু ইন্টার্নাল সিএসএস করা। সেগুলো, প্রয়োজনমতো কাটছাঁট করতেই পারেন এখন।

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

প্লাগইন না থিম

আমরা পুরো ব্যাপারটা প্লাগইন আর থিমের একটা ভজকট করেছি। আপনি চাইলে পুরো ব্যাপারটা একটা নিজস্ব প্লাগইনে করে ফেলতে পারেন। কিংবা এমনও হতে পারে, এই জ্ঞানটুকু কাজে লাগিয়ে, বুদ্ধি করে একটা পূর্ণাঙ্গ ডায়নামিক প্লাগইনই বানিয়ে ফেললেন, আর ক’দিন বাদে আমরা আর এতো বড় নিবন্ধ না দেখিয়ে মানুষকে বলবো, অমুক ভাই/বোন-এর তমুক প্লাগইনটা ইনস্টল করে নেন, সাফা খিরখিরা! 

কৃতজ্ঞতা

আবারও বলছি, এইটুকুতে পথনির্দেশ করার জন্য Thomas Scholz, majick, Chris Wiegman, David Sader, Chris Davis, হাসিন হায়দার ভাই-সহ অন্যান্য সকলের আকুন্ঠ কৃতজ্ঞতা স্মরণ করছি।

এই লেখাটির সংক্ষিপ্ত সংস্করণ ইংরেজিতে পাওয়া যাবে WordPress Development StackExchange ওয়েবসাইটের এই থ্রেডে^।

The post ওয়ার্ডপ্রেস মাল্টিসাইটে নিজস্ব সাইনআপ পাতা তৈরির কৌশল appeared first on Tuts by Mayeenul Islam.

• গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান : পর্ব ১, এবং
• গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান : পর্ব ২

এবারে আমরা জানি গিট কাকে বলে, কত প্রকার, কী কী 🙂 । তাই আজকে আমরা আলোচনা করছি গিট ব্রাঞ্চিং নিয়ে।

অন্যান্য ভার্ষন নিয়ন্ত্রণ সফ্‌টওয়্যারের সাথে গিট-এর পার্থক্য করতে গেলে অনেককেই বলতে শুনি যে, গিটে ব্রাঞ্চিং যথেষ্ট cheap। এই cheap কথাটার মানে যেমন স্বল্প খরচসাপেক্ষ, তেমনি এর দ্বারা বোঝায় এটা যথেষ্ট সহজ, দ্রুত এবং ঝামেলাহীনও। স্বস্তা, কারণ খুব অল্প রিসোর্স ব্যবহার করেই গিট ব্রাঞ্চিং করা যায় অগণিত।

কী এই গিট ব্রাঞ্চিং? ব্রাঞ্চ শব্দটা শুনলেই ব্যাংকের ব্রাঞ্চের কথা মনে হয় না? ঠিকই আছে। ব্রাঞ্চিং সেরকমইতো। এবারে একটা ঘটনা দেখা যাক:

আমি মূল রাস্তা ধরে হাঁটছি। আমার সাথে ২জন বন্ধু আছেন।

আমি মূল রাস্তা ধরে আরো এক মাইল এগোলাম, এবারে আমার সাথে আরো ২জন বন্ধু যোগ দিলেন। অর্থাৎ মোট বন্ধুর সংখ্যা ৪জন।

এবারে আমি রাস্তা বদল করলাম। ডানের গলিতে ঢুকে গেলাম। এই গলিতে আমি আরো ২জন বন্ধু জুটিয়ে নিলাম। মোট বন্ধু: [আগের] ৪জন + [নতুন] ২জন = ৬জন।

আরো এক মাইল এগোলাম, আরো ৪জন বন্ধু জুটিয়ে নিলাম, মোট বন্ধু হলেন ৬+৪=১০জন।

এমন সময় হঠাৎ, পথে আপনার সাথে দেখা। আপনি জিজ্ঞেস করলেন, আপনি এই রাস্তায় কেন? আপনার মূল রাস্তা কোথায়? আমি বললাম, সেটাতো ফেলে এসেছি। আপনি বললেন, বাহ, দারুণ! ১০জন বন্ধু নিয়ে পথ চলছেন! মূল রাস্তাতে আপনার কয় জন বন্ধু ছিলেন? বললাম, ৪জন। কেন, ১০জন নয় কেন? কারণ, বাকি ৬জন যে আমি ডানের গলিতে পেয়েছি।

হ্যা, ব্রাঞ্চিং-এর ক্ষেত্রে এই ব্যাপারটাই ঘটে। যতক্ষণ পর্যন্ত আপনি মূল রাস্তা ধরে হাঁটছেন, ততক্ষণ পর্যন্ত যা ঘটেছে, গলিপথে বা শাখা পথে ঢোকার সময় শাখা পথ কিন্তু ততটুকুর খবরই জানে। আর গলিপথে ঢুকে আপনি কতটুকু এগিয়েছেন, কী করেছেন, মূল পথ কিন্তু তার খবর জানে না।

স্বস্তাশ্রেণীর একটা উদাহরণ হয়ে গেল, তবু এটা বুঝলে ব্রাঞ্চিং-এর কিছুটা ধারণা পাওয়া যাবে। …কথা না বাড়িয়ে এবারে হাত নোংরা করা যাক…

গিট ব্রাঞ্চ তৈরি করা

নিজের কম্পিউটারে একটা ডিরেক্টরি (ফোল্ডার) তৈরি করি test নামে। এই ডিরেক্টরিতে ১টা ফাইল তৈরি করি index.html এবং সেই ফাইলে কিছু একটা লিখে দিই। যা ইচ্ছা লিখতে না চাইলে নিচের মতো লিখে একটা ভ্যালিড HTML ফাইল বানিয়ে নেয়া যেতে পারে:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Testing Git Branching</title>
   </head>
   <body>
      <h1>Testing Git Branching</h1>
   </body>
</html>

ব্রাউযারে index.html ফাইলটা খুললে দেখা যাবে, সাদা দৃশ্যপটে কালো লেখা স্পষ্ট দেখা যাচ্ছে। এবারে সেই ডিরেক্টরি-পাথে git bash চালু করি (মাউসের ডান বোতামে git bash here চেপে – বিস্তারিত)। যেহেতু এটা শ্রেফ একটা ডিরেক্টরি, তাই একে আগে গিট রেপোযিটোরিতে রূপান্তর করি: ব্যাশ-এ লিখি: git init। ব্যস, আমাদের ১টা ফাইলসমৃদ্ধ ডিরেক্টরিটা একটা গিট রেপোযিটোরিতে বদলে গেলো। আমরা এবারে আমাদের প্রথম commit করি, মানে আক্ষরিক অর্থে ভার্ষন নিয়ন্ত্রণ শুরু করি…। (দেখুন পর্দাদৃশ্য ১)

ভালো করে খেয়াল করে দেখুন, ঠিক প্রথম লাইনটার পরে পরের লাইনগুলোতে কোনো বিশেষ কিছু আপনার চোখে পড়ছে কিনা… ‘(master)‘ কথাটা যোগ হয়েছে প্রথম লাইনের পরে, এবং সেটা প্রতিবারই আপনার সাথে সাথে চলছে।

কী এই master?

কমান্ড: git branch

কমান্ড দিই:

$ git branch

অর্থাৎ, আমরা গিটকে বললাম, গিট তোমার ব্রাঞ্চের খবর জানাও। এবারে সে আমাদের দেখাবে:

* master

আবারো সেই master। মানে সে জানালো, তোমার ব্রাঞ্চ বা শাখা হচ্ছে master। ঠিকইতো আছে, এখনও তো আমি মূল রাস্তায় আছি। তো আমাকে যদি কেউ জিজ্ঞেস করে, কোন রাস্তায়? আমি বলবো, মূল রাস্তায় (master) – এর বাইরে তো কিছু বলার প্রশ্নই উঠে না, তাই না?

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

কমান্ড: git branch <branch-name>

ব্যাশে লিখলাম:

$ git branch style

সে আমাদের কিছু না বললেও আসলে style নামে একটা ব্রাঞ্চ তৈরি করা শেষ। আপনার নামের ডানদিকে, এখনও দেখুন (master) কথাটাই আছে, তার মানে আমরা এখনও master ব্রাঞ্চেই রয়েছি। কিন্তু আমাদেরতো নতুন খোলা style ব্রাঞ্চে কাজ করার কথা। আসুন তবে নতুন পথ ধরি…

গিট ব্রাঞ্চ অদলবদল

কমান্ড: git checkout <branch-name>

ব্যাশে লিখি:

$ git checkout style

টিপ্‌স:
ব্রাঞ্চ তৈরি আর বদল করার জন্য দুটো কমান্ড শিখেছি। শর্টকাটে একটা কমান্ড দিয়েও কাজটা করা যায়, লিখতে হবে:
git checkout -b <branch-name>

সে বলছে, হ্যা, style ব্রাঞ্চে বদলে নিয়েছি। আমরা কিন্তু এবারে নতুন রাস্তায় উঠে গেছি। নতুন রাস্তাকে যদি জিজ্ঞেস করি, তোমার কাছে কয়টা ফাইল আছে? বলবে, ১টা (index.html)। তোমার কাছে কয়টা commit রেকর্ড আছে? বলবে, ১টা। আমরা যে আসলেই master ব্রাঞ্চ থেকে বদলে style ব্রাঞ্চে চলে এসেছি, সেটা আমরা এবারে নিজের নামের ডানদিকে দেখতেও পাচ্ছি, (master) নামটা বদলে ‘(style)‘ হয়ে গেছে। তবু আমরা একটু যাচাই করে দেখলাম:

$ git branch
  master
* style

আশা করি বুঝে গেছি যে, ঐ স্টারটা (asterisk – *) আসলে আমাদের দেখায় আমার সক্রীয় ব্রাঞ্চ কোনটা।

এবারে আমাদের ডিরেক্টরিতে (ফোল্ডারে) একটা ফাইল তৈরি করলাম, style.css এবং তাতে লিখলাম:

body{
   background-color: black;
   color: white;
}

আর index.html ফাইলটা খুলে স্টাইলশিটটা লিংক করে দিলাম, <title> ট্যাগের ঠিক নিচেই লিখলাম:

<link rel="stylesheet" href="style.css">

ব্যস, আমাদের সাইটে একটা দারুণ স্টাইলিং করা হয়ে গেল 🙂 ।

এবারে ব্যাশে git status জানতে চাইলে দেখাবে index.html পরিবর্তন হয়েছে, আর style.css নতুন যোগ হয়েছে, তাই untracked। আমরা সব পরিবর্তনকে স্টেজ করে তারপর আরেকটা কমিট করি (ধরা যাক, কমিট বার্তা দিয়েছি: “styles added”)। এবারে গিটের লগ (কমান্ড: git log) পরখ করলে দেখা যাবে দুটো কমিট হয়েছে:

• একটা কমিট হয়েছিল master ব্রাঞ্চে থাকা অবস্থায় (বার্তা: “Initial Commit”)
• আরেকটা কমিট এইমাত্র করলাম, style ব্রাঞ্চে থাকা অবস্থায় (বার্তা: “styles added”)

আমরা যা শিখেছিলাম, সব মিলে গেল। মূল রাস্তা পর্যন্ত যা যা হয়েছিল, সব শাখা রাস্তায় এসেছে। আর শাখা রাস্তায়ও নতুন বন্ধু জুটিয়ে নিয়েছি (নতুন ফাইল কিংবা নতুন লাইন কিংবা পরিবর্তিত লাইন)। ব্রাউযারে index.html ফাইলটা খুললে দেখা যাবে, কালো দৃশ্যপটে সাদা লেখা স্পষ্ট দেখা যাচ্ছে।

আসল মজাটা এখনও শুরু হয়নি। আসল মজাটা দেখা যাবে, যদি আমরা এখন আবার master ব্রাঞ্চে ফিরে যাই। ব্যাশ খুলে লিখলাম:

$ git checkout master

master ব্রাঞ্চে নিয়ে চলো। সে বরাবরের মতোই বলবে:

Switched to branch 'master'

হ্যা, master ব্রাঞ্চে, মানে মূল রাস্তায় ফিরে এসেছি। এবারে ডিরেক্টরিটা (ফোল্ডার) খুলে একটু দেখুন তো…

অ্যাবরাক্যাডাবরা! ছুহ মন্তর ছুহ, যাদু মন্তর ছুহ!

আমাদের style.css হাওয়ায় মিলিয়ে গেছে। শুধু তা-ই নয়, index.html ফাইলটা খুলে দেখুন, স্টাইলশিটটা লিংক করেছিলেন যে লাইন লিখে, সেই লাইনটিও নেই। কী মনে করে ব্রাউযার খুলে দেখলেন, কালো রঙের ব্যাকগ্রাউন্ডও হাওয়া। মাথায় হাত: হায়, হায়! আমার এতো কষ্টের কোড সব মুছে ফেললো গিট!

না বৎস, ধৈর্য্যই ধর্ম্ম!

গিট একেবারে ঠিক কাজটিই করেছে। আপনি গিটকে জিজ্ঞেস করেছেন, গিট তোমার মূল রাস্তার খবর বলো। সে বলছে, ১টা ফাইল, আর ১০ লাইনের কোড। বাকি যা যা যোগ করেছিলেন এই রেপোযিটোরিতে, সব করেছেন নতুন রাস্তায় গিয়ে। পরে যে রাস্তা যোগ হয়েছে, আগের রাস্তা তার খবর কী করে রাখবে? তাই সে আসলে নতুন রাস্তার খবর জানে না। …শান্ত হোন, আপনার কোড হারিয়ে যায়নি। আপনার কোড এখনও নতুন রাস্তায় আছে ঠিকই। আবারও যদি নতুন রাস্তায় ঘুরতে যান, ঠিকই সবকিছু ঠিকঠাক পাবেন, সেখানকার বন্ধুদেরও পাবেন। ব্যাশে লিখুন:

$ git checkout style

দেখুন তো সব ফিরে এসেছে কিনা? …এবার একটু প্রাণ খুলে হাসুন 😀 ।

আমি যখন প্রথম ব্যাপারটা লক্ষ করেছিলাম, আমি ব্যাশটাকে একপাশে এমনভাবে সরিয়ে রেখেছিলাম, যাতে মনিটরের আরেক পাশে ডিরেক্টরিটাও দেখতে পারি। তারপর ব্রাঞ্চ থেকে ব্রাঞ্চে একটু চেকআউট করে এই মজার দৃশ্য দেখেছিলাম মন ভরে। দারুণ লেগেছিল ব্যাপারটা আমার কাছে। 🙂

ব্যস, ব্রাঞ্চিং শেখা শেষ।

গিট ব্রাঞ্চ মিশিয়ে নেয়া

এবারে যদি আপনার style ব্রাঞ্চে করা স্টাইলগুলো দেখে আপনার মন পরিবর্তন করেন, চিন্তা করেন যে, নাহ্‌! ভালোইতো লাগছে কালো ব্যাকগ্রাউন্ডটা (নতুন রাস্তার বন্ধুরা তো ভালো মানুষই)। এক কাজ করি না কেন, মুল প্রজেক্টেই নিয়ে আসি না কেন (মূল রাস্তায়ই নিয়ে আসি বন্ধুদের)? যেই ভাবা, সেই কাজ। আপনি এবারে আপনার style ব্রাঞ্চটিকে master ব্রাঞ্চের সাথে মিলিয়ে নিবেন (merge করবেন)।

কমান্ড: git merge <branch-name>

গাছের একটা ডাল কাটবেন, তো সেটা কি ডালে বসে কাটবেন, নাকি গাছের কান্ডে বসে কাটবেন? …তো সেজন্যই আগে কান্ডে ফিরে আসুন (মানে যে ব্রাঞ্চের মধ্যে অন্য ব্রাঞ্চটাকে মিলিয়ে নিতে চলেছেন)। আর তারপর ডালটার বিহিত করুন (master ব্রাঞ্চে style ব্রাঞ্চটা মার্জ্‌ করুন):

$ git checkout master
$ git merge style

এতে সে দেখাবে: এই হয়েছে, সেই হয়েছে, তোমার দুটো ব্রাঞ্চ মার্জ করে ফেলেছি। অর্থাৎ style ব্রাঞ্চে যা যা করেছিলে, এখন তা হুবহু master ব্রাঞ্চেও যোগ/বিয়োগ করে মিলিয়ে নিয়েছি। তোমার সবকিছু রেডি। ব্যাশে লক্ষ করুন, আপনি এখন master ব্রাঞ্চে আছেন। ডিরেক্টরিতে লক্ষ করুন, style.css ফাইলটা দেখা যাচ্ছে। এই অবস্থায় আপনি ব্রাউযার রিলোড করে দেখুন, আপনার ওয়েবসাইট কালো ব্যাকগ্রাউন্ডে সাদা লেখা দেখাচ্ছে।

গিট ব্রাঞ্চ রিমোটে তোলা

যদি আপনি আপনার রেপোযিটরিটা সার্ভারে কোথাও ব্যাকআপ রাখেন, হতে পারে সেটা github, gitlab, bitbucket, meat ইত্যাদি আপনার নিজস্ব git সার্ভার কিংবা শ্রেফ কোনো শেয়ার্ড রেপোযিটরি। আমরা বোধহয় আলাদা করে গিট রিমোট যোগ করা দেখিনি। খুবই মামুলি কাজ, আমরা এবারে সেটা করে নিই। ধরা যাক, আমাদের গিটহাবে একটা রেপোযিটরি আছে test নামে, তার পাথটা নিলাম, তারপর ব্যাশে লিখলাম:

$ git remote add origin https://github.com/mayeenulislam/test.git

ব্যস, তাতেই হয়ে গেল। origin নামে আমাদের একটা রিমোট যোগ হয়ে গেল, অর্থাৎ একটা সার্ভার কানেক্ট করে ফেললাম আমরা আমাদের এই রেপোযিটরিতে। এবারে আমরা চাচ্ছি, আমাদের style ব্রাঞ্চটা [মার্জ করি বা না করি], সেটা সার্ভারেও তুলে দিতে।

কমান্ড: git push <remote-name> <branch-name>

ব্যাশে লিখতে হবে, সেই পুরোন জানা কমান্ডটি, ধাক্কা দিয়ে তুলে দাও:

$ git push origin master
$ git push origin style

প্রথমে আমরা master ব্রাঞ্চটাকে ধাক্কা দিয়ে তুলে তারপর style ব্রাঞ্চটাকে ধাক্কা দিয়ে তুলে দিচ্ছি। (ইউযারনেম, পাসওয়ার্ড চাইলে দিয়ে দিতে হবে)

ব্রাঞ্চগুলোকে একবার পরখ করে দেখে নেয়া যেতে পারে:

$ git branch --all
* master
  style
  remotes/origin/master
  remotes/origin/style

গিট ব্রাঞ্চ মুছে ফেলা

যেহেতু আমাদের style ব্রাঞ্চের কাজটা আমরা মূল ব্রাঞ্চে (master) মিশিয়ে নিয়েছি, আর ঐ ব্রাঞ্চ নিয়ে কাজ করারও ইচ্ছে নেই, তাই এখন আমরা চাইলে ব্রাঞ্চটা মুছে ফেলতে পারি। নতুন রাস্তার বন্ধুরা যদি আমার রাস্তায় চলে আসে, নাইবা থাকলো সে নতুন রাস্তা। 🙂

কমান্ড: git branch -d <branch-name>

মুছে ফেলার কাজটা খুব সোজা, কান্ডে থাকা অবস্থায় কিন্তু ডাল কাটতে হবে, অর্থাৎ master ব্রাঞ্চে থাকা অবস্থায় শাখা মুছে ফেলার কমান্ড দিতে হবে:

সতর্ক থাকুন:
ব্রাঞ্চ ডিলিট করার জন্য -d লেখাটা নিরাপদ। এতে সে মার্জ করতে না পারলেও কারণ দেখাবে। আর যদি আমরা -d না লিখে -D লিখতাম, তাহলে কিন্তু সে জোর করে ব্রাঞ্চটা ডিলিট করে দিত।

$ git branch -d style

অর্থাৎ, গিট, style ব্রাঞ্চটাকে মুছে ফেলো তো। এতে সে লোকাল রেপোযিটরি থেকে style ব্রাঞ্চটা মুছে ফেলবে। পরখ করে দেখে নিতে পারেন:

$ git branch --all
* master
  remotes/origin/master
  remotes/origin/style

আমরা যেহেতু style ব্রাঞ্চটাকে master ব্রাঞ্চে মার্জ করেই ফেলেছি, সেটাকে তাহলে আর সার্ভারে তুলে দেখানোর কোনো মানেই ছিল না। ভুয়া একটা কাজ করেছি। কিন্তু তবু শিখে রাখলাম, মার্জ করি বা না করি, উভয় অবস্থায়ই ব্রাঞ্চকে রিমোটে তুলে রাখা যায়। কিন্তু এইমাত্র আমরা লোকাল style ব্রাঞ্চটাকে মুছে ফেলেছি। সার্ভারেরটা কিন্তু এখনও আছে। সেটা কিভাবে মুছবো?

সার্ভারের style ব্রাঞ্চটা মুছে ফেলা খুব সোজা। শুধু লোকালের style ব্রাঞ্চটা সার্ভারে একটু কেরামতি করি তুলে দিলেই হলো।

কমান্ড: git push <remote-name> :<branch-name>

তাহলে আমাদের origin রিমোট থেকে style ব্রাঞ্চটি মুছে ফেলতে লিখতে হবে:

$ git push origin :style

ব্রাঞ্চের নামের আগে কোলন (:) খেয়াল করবেন কিন্তু। এটা হচ্ছে true‘র প্রতীক।

সতর্কতা
গিট ব্রাঞ্চিং ব্যবহার করার সময় খুব সতর্ক থাকতে হয় আপনি আসলে কোন ব্রাঞ্চে কাজ করছেন। ধরা যাক আপনি একটা ফিচার ব্রাঞ্চ খুলে কাজ করছিলেন, অথচ সপ্তা’খানেক পরে ভুলে গেলেন সেটা। আপনি অন্য কোনো কাজ ভুলে, এই ব্রাঞ্চে করে যাচ্ছেন অনবরত। অনেকদিন কাজ করার পর মনে পড়লো, হায় হায়, এটা কী করলাম, এই কাজ তো এই ব্রাঞ্চে করার কথা ছিল না। এই এত্তোগুলো কমিট তো এই ব্রাঞ্চে করার কথা ছিল না। তখন হয়তো ফেরা যাবে, কিন্তু সেটা যে বন্ধুর পথ হবে, সেটা আন্দাজ করা যায়।

এজন্য, যে এডিটর/আইডিই আপনি ব্যবহার করছেন, তাতে গিট ইন্টেগ্রেড করা গেলে খুব কাজের হয়। আর যদি তা না করা যায়, তাহলে প্রতিবার কাজে নামার আগে ব্যাশ খুলে ব্রাঞ্চটা দেখে নেয়ার অভ্যাস করতে পারেন।

আমার অভিজ্ঞতা:
যারা আমার মতো LESS বা Sass দিয়ে সিএসএস করেন, তারা কোনো না কোনো কম্পাইলার ব্যবহার করে থাকেন। এই কম্পাইলারগুলো যদি সেটআপ করা থাকে যে স্বয়ংক্রীয়ভাবে কম্পাইল হবে, তাহলে এগুলো ফাইলের modified টাইমস্ট্যাম্পের দিকে খেয়াল রাখে। যদি এধরণের কম্পাইলার সক্রীয় থাকে আর আপনি কম্পাইল করে একটা মিনিফাইড সিএসএস ফাইল তৈরি করে থাকেন, তাহলে ব্রাঞ্চ থেকে ব্রাঞ্চে অদলবদল হবার সময় সে মনে করে ফাইলটা বদলেছে, সাথে সাথে সে একটা কম্পাইল্‌ড সংস্করণ তৈরি করে। এটা ব্রাঞ্চ থেকে ব্রাঞ্চে দৌঁড়াদৌঁড়ির সময় খুবই বিশ্রী রকমের ঝামেলা তৈরি করে। এই ঝামেলা এড়াতে আমি ব্রাঞ্চ বদলের আগে কম্পাইলারটা সাময়িক বন্ধ করে নিই। …আপনাদের কাছে ভালো কোনো সমাধান থাকলে, তা মন্তব্য করে জানালে খুব উপকার হবে।

পরিশেষ

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

ব্রাঞ্চিং-এ গেলে কিংবা একাধিক ডেভলপার মিলে কাজ করতে গেলে সবচেয়ে বড় যে সমস্যাটার সম্মুখিন সবাই হয়, তা হলো merge conflict বা মেশানোতে সংঘর্ষ। এই মার্জ কনফ্লিক্ট, কলেবোরেট করে, মানে একাধিক ডেভলপার মিলে ঝামেলা না করে কাজ করা বিষয়ে আরেকটা আলোচনার জোর দাবি রাখে। আগামী কোনো পর্বে সেটা নিয়ে আলোচনা করার আশা রাখি, ইনশাল্লাহ। সেদিন আমরা সহজে বোধগম্য কোনো গিট মডেল নিয়ে আলোচনা করতে পারি, যা আমাদের কাজকে আরো ঝামেলাহীন করে কলেবোরেটিভ কোড করতে সহায়তা করবে।

আরো গভীরে জানা যাক:

1. Git Branching – Branch Management – Git^ – Scott Chacon-এর বই
2. Git: Delete a branch (local or remote)^ – Tobias Kraze
3. Branching and merging best practices in Git^ – StackOverflow

প্রচ্ছদের ছবি: chloepettersson.com থেকে নেয়া ছবি ও অন্যান্য গিট ব্রাঞ্চিং মডেলের মন্তাজ।

হালনাগাদ: ৩১ জানুয়ারি ২০১৭

The post গিট দিয়ে ভার্ষন নিয়ন্ত্রণ – git branch appeared first on Tuts by Mayeenul Islam.

• আপনি যে থিম ব্যবহার করছেন, তার কোডের মান কেমন?
• আপনি যে প্লাগইনগুলো ব্যবহার করছেন, তার কোডের মান কেমন?
• আপনি যে সার্ভারে সাইট হোস্ট করেছেন, তার মান/গতি কেমন?
• কিংবা আপনি যে তথ্য আপনার সাইটে রাখছেন, তা কতটা অপটিমাইজ্‌ড, মানে প্রয়োজনানুগ গুছিয়ে রাখা?
• কিংবা আপনার সাইটে যেসব থার্ড পার্টি রিসোর্স ব্যবহার করেছেন, সেগুলো কতটা গতিশীল?

…ইত্যাদি বহু কিছু। এসব বিষয়গুলো নিশ্চিত করার পরও অনেক সময় সাইটের গতি আশানুরূপ পাওয়া যায় না। আপনি যদি তখন Google-এর PageSpeed Insights, GTmetrix কিংবা Yahoo!’র YSlow ব্যবহার করে পরখ করে থাকেন, তাহলে দেখবেন, সেখানে আপনাকে বলা হচ্ছে, “Enable Compression” (কম্প্রেশন সক্রীয় করুন)।

এটা খায় না মাথায় দেয়

আপনি যখন একটা ওয়েবসাইটের ঠিকানা লিখে এন্টার চাপেন, আপনি তখন আসলে সার্ভারকে বলেন, অমুক সাইটের তথ্যগুলো পাঠাও তো…। সার্ভার তখন সেই সাইটের তথ্যগুলো আপনাকে পাঠাতে থাকে। 10 মেগাবাইট ডাটা থাকলে, সে 10 মেগাবাইট ডাটা আপনাকে পাঠিয়ে দেয়, আপনি তখন সাইটটা দেখতে পারেন। যদি gZip Compression চালু করা থাকে, তাহলে যা ঘটবে: আপনি সার্ভারকে বলবেন, সাইটের ডাটা পাঠাও… সে তখন দেখবে সাইটে 10 মেগাবাইট ডাটা আছে, সে সেটাকে কম্প্রেস করবে, মানে যিপ করবে, মানে গুটিয়ে নিবে, এতে ডাটার আকার কমে আসবে মাত্র 3 মেগাবাইটে, অর্থাৎ সার্ভার তখন আপনার ব্রাউযারে পাঠাবে 10 মেগাবাইটের বদলে মাত্র 3 মেগাবাইট… কতটা দ্রুত হয়ে যাবে সাইট বুঝতেই পারছেন। বাকি কাজটা হবে এবার আপনার ব্রাউযারে… ব্রাউযার সেই কম্প্রেস করা ফাইলটা পেয়ে সেটাকে আনকম্প্রেস/ডিকম্প্রেস করবে, মানে আনযিপ করবে, পোটলা খুলবে, তারপর আপনাকে সাইটটা দেখিয়ে দিবে। …এভাবে gZip কম্প্রেশন আপনার সাইট পেজের আকার ৭০% পর্যন্ত কমিয়ে আনতে পারে।

কিভাবে কম্প্রেশন সক্রীয় করতে হয়

আমি সাধারণত Apache সার্ভার ব্যবহার করি, তাই আমার জানা সমাধানগুলো অ্যাপাচি সার্ভার-কেন্দ্রীক।

জ্ঞাত পদ্ধতি ১: প্রথমদিকে মহা ফ্যাসাদে পড়লাম, কমপ্রেশন সক্রীয় করার উপায় পাচ্ছিলাম না। এমন সময় এক ব্লগে লেখা দেখলাম: ওয়ার্ডপ্রেস সাইটের অ্যাডমিন প্যানেলে লুকানো একটা সেটিং আছে: ব্রাউযারে লিখুন: .../wp-admin/options.php – মানে, সাইটের অ্যাডমিন প্যানেলে থেকে options.php পাতায় যান। এখানে gzipcompression নামে একটা অপশন আছে, সেটার মান 0 থেকে বদলে 1 করে দিতে হবে, মানে false থেকে true করে দিতে হবে। কিন্তু এটা ব্যবহার করে আমি কোনো সমাধান পেলাম না। আপনাদের কারো উপকার হলে, এটাই একাজে সবচেয়ে সহজ সমাধান।

জ্ঞাত পদ্ধতি ২: পরে ওয়ার্ডপ্রেস ডেভলপমেন্ট স্ট্যাকএক্সচেঞ্জে আলোচনা করে বের করে আনলাম এর কার্যকরী পদ্ধতি: আমাকে Toscho (Thomas Scholz) জানালেন: php.ini ফাইলে zlib.output_compression = On চালু করলেই তা হয়ে যায়।

যেহেতু আমি শেয়ার্ড সার্ভার ব্যবহার করছিলাম, তাই এটাও পরখ করে দেখা হয়নি।

সক্রীয় পদ্ধতি ৩: তারপর আরেকদিন আলোচনায় Rarst (Andrey “Rarst” Savchenko) আমাকে জানালেন এর .htaccess পদ্ধতির কথা। তিনি আমাকে অ্যাপাচি’র কোড স্নিপেট^ই সরাসরি শেয়ার করলেন। সময়ের আবর্তে এই পাতায় অনেক পরিবর্তন আসছে, আসবে। তাই লাইন নম্বর ধরে কোডটা দিলে আজ এক জায়গায় কাল আরেক জায়গায় চলে যাবে। তাই আমি শুধু প্রয়োজনীয় অংশটুকু আলাদা করে নিলাম এখানে:

যেটা করতে হবে, আপনার ওয়ার্ডপ্রেস সাইটের .htaccess ফাইলটা সম্পাদনা মোডে খুলুন (ফাইলটা ওয়ার্ডপ্রেসের র‍্যুটেই থাকে)। যদি .htaccess ফাইল না থাকে, ঠিক এই নাম দিয়ে একটা ফাইল তৈরি করে নিন। আগে থেকে থাকা ফাইলে কিছু কোড থাকবে, সেগুলো আগে একটা জায়গায় কপি করে ব্যাকআপ নিয়ে রাখুন। সেখানেই সবার নিচে এই কোডটুকু বসিয়ে নিন।

ব্যস, কাজ শেষ।

যাচাই করুন

এবারে আসলেই সাইটে gZip কম্প্রেশন চালু হয়েছে কিনা যাচাই করে নিন RedBot^ থেকে, কিংবা GTmetrix^ থেকে। আপনার সাইটের URL লিখে সাবমিট করুন, দেখিয়ে দিবে gZip কম্প্রেশন চালু হয়েছে কিনা, এবং কতটুকু গতিবৃদ্ধি পেল তাতে।

মুদ্রার উল্টো পিঠ

আমরা বলেছিলাম সার্ভার আমাদের ব্রাউযারে কম্প্রেস করা ফাইলটা পাঠাবে। কিন্তু আমাদের ব্রাউযার যদি জানেই না কিভাবে কম্প্রেস করা ফাইলকে ডিকম্প্রেস করতে হয়, তখন? পুরোন ব্রাউযারগুলোতে এই সমস্যা ছিল। এখন আর এটা বোধহয় সমস্যা না। তাছাড়া, যত বড় কম্প্রেস ফাইল, তত বেশি CPU-এর ব্যবহার। সুতরাং এই পারফর্মেন্স পাওয়ার পিছনে আপনার সার্ভারের সিপিইউ-এর ব্যবহারও বাড়ছে। আরো জানা যাবে Lori MacVittie-এর এই ব্লগ (আর্কাইভ থেকে)^ থেকে।

তাই মনে রাখবেন, যদি কোনো সমস্যা হয়, তাহলে আপনার .htaccess, যা ব্যাকআপ রেখেছিলেন, তা থেকে .htaccess আবার আগের মতো করে নিন। আপনার ভুলের দায়ে আমাকে জড়ালে খুব কষ্ট পাবো তখন। 🙂 শুভ হোক!

-মঈনুল ইসলাম
mayeenulislam.github.io

বাড়তি পঠন

• PageSpeed: Enable gZip Compression^ – GTmetrix

The post ওয়ার্ডপ্রেস সাইটকে গতিশীল করতে gZip Compression চালু করার পদ্ধতি appeared first on Tuts by Mayeenul Islam.

ওয়ার্ডপ্রেস ৪.৩ ছাড়পত্র পেয়েছে ১৯ আগস্ট ২০১৫, এবং এরই সাথে ট্যাক্সোনমিতে একটা নতুন দিগন্তও সূচিত হয়েছে। ট্যাক্সোনমি টার্মগুলো এখন যেকোনো ট্যাক্সোনমি থেকেই আসুক না কেন, তারা এখন একক^, অর্থাৎ একটার সাথে আরেকটা মিলবে না। কাজ শুরু করার আগে আসুন পরিষ্কার হয়ে নেয়া যাক, ট্যাক্সোনমি আর টার্ম দ্বারা কী বোঝানো হচ্ছে।

পরিচিতি

ওয়ার্ডপ্রেসে পূর্বনির্ধারিত ট্যাক্সোনমির মধ্যে বহুল পরিচিত হলো Categories, Tags ইত্যাদি। হ্যা, ঠিকই শুনছেন, ক্যাটাগরি, ট্যাগ – এগুলো আসলে একেকটা ট্যাক্সোনমি। এর মধ্যে Categories-এ পূর্বনির্ধারিত থাকে Uncategorized নামক একটা ক্যাটাগরি। আমরা যারা ক্যাটাগরি আর ট্যাগ ব্যবহার করতে অভ্যস্থ, আমরা জানি, ক্যাটাগরিতে একটার অধীনে (under) আরেকটাকে সেট করা যায়, কিন্তু ট্যাগ প্রতিটাই আলাদা আলাদা। এই যে, Categories এবং Tags, এরা হলো ট্যাক্সোনমি, আর Categories-এর ভিতরে ঐ যে Uncategorized, সেটা হলো ট্যাক্সোনমি টার্ম।

এই পূর্বনির্ধারিত ট্যাক্সোনমি আর টার্মের বাইরে ইচ্ছেমতো ট্যাক্সোনমি আর টার্ম তৈরি করা যায়। ধরা যাক, আমরা ছাত্রদের তথ্য নিয়ে কাজ করছি, এবং তাঁদের শ্রেণীর তথ্য সংরক্ষণ করার জন্য একটা নিজস্ব ট্যাক্সোনমি (Custom Taxonomy) বানিয়ে নিলাম: Classes। এবারে এই ক্লাসেস ট্যাক্সোনমির ভিতরে আমরা ইনসার্ট করলাম I, II, III, IV, V ইত্যাদি শ্রেণীর নাম, অর্থাৎ রোমান সংখ্যায় আমরা শ্রেণীগুলোর নাম লিখেছি: ওয়ান, টু, …। …তাহলে Classes হলো আমাদের ট্যাক্সোনমি, আর I, II, III, … এগুলো হলো আমাদের টার্ম।

কেন দরকার?

আমরা যারা ওয়ার্ডপ্রেসের পোস্টে অতিরিক্ত তথ্য যোগ করতে চাই, আমরা জানি Post Meta’র গুরুত্ব সেখানে কতটা। পোস্ট মেটা দিয়ে হেন কাজ নেই যে, করা যায় না। আর যারা ডাটাবেয ঘাঁটতে জানি, তারা জানি যে, পোস্টের সাথের এই অতিরিক্ত তথ্য (Meta data) জমা রাখার জন্য ওয়ার্ডপ্রেসে একটা আলাদা টেবিলও আছে, নাম postmeta। এবং খুব সহজে সেখানকার তথ্য নিয়ে খেলার জন্য রয়েছে বেশ কয়েকটা সহজ ফাংশন: add_post_meta(), update_post_meta(), get_post_meta(), delete_post_meta() ইত্যাদি। এই ফাংশনগুলো ব্যবহার করে, ধরা যাক, আপনার প্রতিটা পোস্টকে আলাদা আলাদা রঙে রাঙাতে চাচ্ছেন, তো পোস্টের মেটা ডাটাতে একটা করে রঙের কোড পাঠিয়ে দিলেই কাজটা আপনার হয়ে যাচ্ছে। …পোস্ট মেটার ব্যবহার খুব সহজ। 🙂

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

তখনই মনে পড়ে পোস্টের অতিরিক্ত তথ্য যোগ করার পদ্ধতির – মেটা ডাটা। কিন্তু দুঃখের বিষয় হচ্ছে, ট্যাক্সোনমিতে মেটা ডাটা যোগ করার কোনো ব্যবস্থা ওয়ার্ডপ্রেসে নেই। সেজন্য এর আলাদা কোনো টেবিলও নেই। কিন্তু এর যে দরকার আছে, সে নিয়ে বিস্তর আলোচনা চলছে বহুদিন ধরে। ওয়ার্ডপ্রেস বহুল ব্যবহৃত একটা সিএমএস, পৃথিবীব্যাপী কোটি কোটি ব্যবহারকারী এটি ব্যবহার করছেন, তাই এতে হুট করে কোনো পরিবর্তন আনা যাবে না। দরকার বহু আলোচনা, গবেষণা, এবং পরীক্ষা-নিরীক্ষা। যদি সবকিছু সন্তোষজনক হয়, তবেই সেটা প্রয়োগ করা হয়। তাই, এটা যে কবে হবে, বা আদৌ হবে কিনা, সেটা আমরা জানি না।

কিন্তু ততদিন কি আমরা বসে থাকবো? আমরা কি আমাদের প্রয়োজনগুলো পূরণ করবো না? আমাদের ক্লাসগুলোর সাথে ফুলের ছবি কি আমরা দিতে পারবো না?

অবশ্যই পারবো, ইনশাল্লাহ।

কিভাবে?

প্রথমেই সিদ্ধান্ত নিই যে, আমরা কি পোস্ট মেটার মতো করে আলাদা একটি টেবিল বানিয়ে নিব ট্যাক্সোনমি মেটার জন্যও? সত্যি বলতে কি এ’নিয়ে বিস্তর বিতর্ক আছে। অনেকের মতেই ওয়ার্ডপ্রেস ডাটাবেয স্কেমাতে থাকাটা যৌক্তিক, নিরাপদ, এবং দ্রুত। তাই আমরা নতুন টেবিল তৈরি না করে কিভাবে সেটা করা সম্ভব, তা-ই এখানে দেখাবো।

আমরা আসলে ওয়ার্ডপ্রেসের অত্যন্ত গুরুত্বপূর্ণ একটা টেবিল: options টেবিলটিতে আমাদের এই তথ্যগুলো রাখবো।

বিদ্যমান সেবাসমূহ

ট্যাক্সোনমি মেটা যোগ করার জন্য ইতোমধ্যেই রয়েছে প্রচুর রিসোর্স^, বিভিন্ন প্লাগইন রয়েছে, রয়েছে অনেক থিম/প্লাগইন এক্সটেনশন লাইব্রেরী:

• Taxonomy Metadata^ – WordPress Plugins
• Taxonomy Meta^ – WordPress Plugins
• Category Meta Plugin^ – WordPress Plugins
• WP Custom Category Meta^ – WordPress Plugins
• Tax Meta Class^ by Bainternet
• …

এর মধ্যে Tax Meta Class আমরা থিমে এক্সটেনশন লাইব্রেরি হিসেবে ব্যবহার করতে পারি। কিন্তু এই ক্লাস ব্যবহার করতে গিয়ে আমরা কিছু সমস্যার সম্মুখিন হয়েছি, যার কারণে আমরা মৌলিক বিষয়টা জেনে নেয়াটাই উচিত মনে করছি।

মৌলিক প্রক্রিয়া

বেসিকটা জানা থাকা উচিত, যাতে বিদ্যমান রিসোর্সে প্রয়োজনীয় পরিবর্তন যদি কিছু লাগে, তাও কোথায় কিভাবে করতে হবে আমরা জেনে-বুঝে করতে পারবো। আর যদি নিজে থেকেও কিছু তৈরি করতে চাই, মৌলিক ধারণাটা পূঁজি করে নিজের মতো কিছু একটা তৈরিও করে নিতে পারবো।

আমরা আমাদের পরীক্ষা-নিরীক্ষার জন্য ওয়ার্ডপ্রেসের সাম্প্রতিক সংস্করণ 4.3 এবং TwentyFifteen থিমটা ব্যবহার করে দেখাচ্ছি:

প্রথম ধাপ: HTML ফিল্ডগুলো তৈরি করে নেয়া

ট্যাক্সোনমি ইনসার্ট করার ফর্মেই প্রথমে আমাদেরকে আমাদের ফর্ম ফিল্ডগুলো যোগ করে নিতে হবে, যাতে করে আমরা তথ্য এন্ট্রি করতে পারি।

এই কোডগুলো আমাদের থিমের functions.php-তে বসিয়ে নিলে আমরা Posts-এর Categories পাতায় Category যোগ করার ফর্মের নিচে নতুন একটা টেক্সট ফিল্ড দেখতে পাবো (যদি প্লাগইনে এমনটা করতে চাই, তাহলে কোডগুলো প্লাগইনের ফাইলে বসাতে হবে)। আমরা শুধুমাত্র একটা HTML ফর্ম ফিল্ড যোগ করেছি, এটা এখনও কাজ করার উপযোগী হয়নি।

জেনে রাখি: আমরা {$taxonomy}_add_form_fields হুকটা^ (ডেভলপার গাইড^) ব্যবহার করছি। এই হুকটি ওয়ার্ডপ্রেসে 3.0.0 সংস্করণ থেকে আমাদের জন্য সক্রীয় আছে। হুকটি $taxonomy নামক একটি প্যারামিটার গ্রহণ করে। আমরা যেহেতু Category ট্যাক্সোনমিতে কাজটা করতে চাচ্ছি, তাই আমরা লিখেছি category_add_form_fields।

এবারে ক্যাটাগরি যোগ করার সময় অতিরিক্ত ফিল্ড দেয়ার ব্যবস্থা করলাম ঠিকই, কিন্তু সেই ক্যাটাগরিটা এডিট করতে গেলে সেখানে কিন্তু এই ফিল্ডটা দেখাবে না। তাই এপর্যায়ে আমরা এডিট পাতায় এই ফিল্ডটা যোগ করে নিব:

এবারে টার্মটা এডিট মোডে খুললেও এই ফিল্ডটা আমরা দেখতে পাবো।

জেনে রাখি: আমরা {$taxonomy}_edit_form_fields হুকটা^ (ডেভলপার গাইড^) ব্যবহার করছি। এই হুকটি ওয়ার্ডপ্রেসে 3.0.0 সংস্করণ থেকে আমাদের জন্য সক্রীয় আছে। হুকটি $tags এবং $taxonomy নামক দুটো প্যারামিটার গ্রহণ করে। এবং আমরা যেহেতু Category ট্যাক্সোনমিতে কাজটা করতে চাচ্ছি, তাই আমরা লিখেছি category_edit_form_fields।

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

দ্বিতীয় ধাপ: তথ্য সংরক্ষণ করা

এই ধাপটা গুরুত্বপূর্ণ এবং বুঝে নেয়ার বিষয়: ১২ নং লাইনে আমরা বলছি, যদি ট্যাক্সোনমিটা ‘Category’ হয়, তবে কাজটা করো, এটা আসলে জরুরি না। যদি একাধিক ট্যাক্সোনমি নিয়ে কাজ করেন, তখন এটা কাজে লাগে। যদি না করেন, তাহলে এই কন্ডিশনাল স্টেটমেন্টটি বাদ দিয়েও কাজ করবে। ১৬ নং লাইনে এসে আমরা যাচাই করে দেখছি, এই ফিল্ডটিতে তথ্য ঢুকেছে কিনা, যদি ঢুকে, তাহলে আমরা একটা অ্যারেতে একটা কী (key) দিয়ে সেই তথ্যটা নিয়ে নিচ্ছি। এবং ১৯ নং লাইনে এসে, আমরা সত্যিকার অর্থে options টেবিলে তথ্যটা নিজস্ব একটা কী দিয়ে সংরক্ষণ করছি। …তো সেই কী-টা কেমন? আমরা দিয়েছি tax_meta{$term_id}, এর মানে হচ্ছে, সে যখন options টেবিলে তথ্যটা রাখবে, তখন এর option_key হবে tax_meta13 বা এরকম কোনো একটা নাম।

জেনে রাখি: আমরা edit_term^ (ডেভলপার গাইড^) এবং create_term^ (ডেভলপার গাইড^) হুকদুটো ব্যবহার করছি, দুটোই ওয়ার্ডপ্রেসের 2.3.0 সংস্করণ থেকে আমাদের জন্য সক্রীয় আছে। এই দুটো হুকের বৈশিষ্ট্য হচ্ছে, এদুটোই, টার্মটা তৈরি হয়ে যাওয়ার পরপরই, কিন্তু, টার্ম ক্যাশ পরিষ্কার করার আগে, কাজে নামে। আমরা মনে করছি, আমাদের ফিল্ডের তথ্যগুলো এইসময়টায় সংরক্ষণের জন্য দিলে উপযুক্ত হবে।

এবারে যদি আমরা একটা ডিফল্ট ক্যাটাগরি টার্ম Uncategorized এডিট করে আমাদের তৈরি করা Extra Input Field-এ কিছু লিখে সংরক্ষণ করি, তাহলে তা ডাটাবেযের options টেবিলে সংরক্ষিত হয়ে যাবে। আমরা options টেবিল খুলে সর্বশেষ সংরক্ষিত এন্ট্রিটা দেখলে এভাবে দেখতে পাবো:

লক্ষ করুন, Uncategorized টার্মটির টার্ম আইডি হচ্ছে 1, তাই আমাদের দেয়া কী-টার সাথে সেটা যোগ হয়ে আমাদের টার্ম মেটা যোগ হয়েছে (tax_meta1)। আমি ভ্যালু হিসেবে দিয়েছিলাম “data I stored”, ডান দিকে option_value অংশে আমাদেরই দেয়া কী (extra_input) নিয়ে কিন্তু সেই ভ্যালুটা PHP Serialized Data হিসেবে সংরক্ষিত হয়েছে।

তৃতীয় ধাপ: গোছগাছ

আমরা তো নিশ্চিত যে, আমাদের দেয়া তথ্যটা ডাটাবেযে সংরক্ষিত হয়েছে, এবং সবকিছু ঠিকঠাক কাজ করছে। এবারে যদি আমরা Uncategorized আবারো এডিট করতে যাই, আশ্চর্য হয়ে দেখবো, আমাদের দেয়া তথ্যটা আর ঐ ফিল্ডে দেখা যাচ্ছে না। আসুন সেটা সমাধান করা যাক। আগের কোডটাই এভাবে একটু বদলে নিই:

পরিবর্তনটা দেখা যাবে লাইন নং ৭ এবং ১৬-তে। আমরা লাইন নং ৭-এ options টেবিল থেকে সেই ফিল্ডটা তুলে আনছি (কী কী তথ্য উঠে আসছে, বুঝতে হলে লাইন নং ৮টা আনকমেন্ট করে নিতে পারেন)। তারপর সেই ফিল্ড-এ তথ্য আমাদের কী (extra_input) ধরে ১৬ নং লাইনে value ফিল্ডে দেখাচ্ছি। ব্যস, কাজ শেষ। আমরা সফলভাবে ট্যাক্সোনমিতে মেটা ফিল্ড যোগ করতে পেরেছি, এবং সেখান থেকে তথ্য নিয়ে ডাটবেযে যোগও করতে পেরেছি। আবার ডাটাবেয থেকে তথ্য বের করে এনে দেখতেও পেরেছি।

সবটুকু কোড একত্রে দেখতে যেমনটা হবে:

কাস্টম ট্যাক্সোনমির ক্ষেত্রে মেটা ফিল্ড?

আমরা তো এতক্ষণ ডিফল্ট ট্যাক্সোনমি Category-তে মেটা ফিল্ড যোগ করে দেখছিলাম, কিভাবে সেটা করতে হয়, কিন্তু আমরা তো স্কুলের Classes-এ বিভিন্ন ফুলের ছবি যোগ করতে চাইছিলাম। এবারে দেখা যাক সেটা কিভাবে করতে হয়:

আমরা নতুন ট্যাক্সোনমি তৈরি করার সময় ওয়ার্ডপ্রেসের দেয়া register_taxonomy()^ ফাংশনটা ব্যবহার করে থাকি। সুতরাং আমাদের এপর্যন্ত যতগুলো হুক আমরা ব্যবহার করেছি, সেগুলোতে {$taxonomy} অংশে আমরা সেই প্রথম প্যারামিটারটা ব্যবহার করলেই আমাদের মেটা ফিল্ডগুলো সেই ট্যাক্সোনমিতে দেখা যাবে। অর্থাৎ যদি ট্যাক্সোনমির নাম হয় student_classes:

register_taxonomy( 'student_classes', array( 'post' ) );

তাহলে হুক করার সময়ে লিখতে হবে এভাবে:

add_action( 'student_classes_add_form_fields', 'function_name_here' );

যদি একাধিক ট্যাক্সোনমিতে একই ফিল্ডের দরকার পড়ে?

এমনকি হতে পারে না যে, এমন একটা ফিল্ড আমাদের লাগবে, যা আমাদের একাধিক ট্যাক্সোনমিতেই লাগবে, তখন আসলে ব্যাপারটা পানির মতো সহজ: সবটুকু কাজ এভাবেই করতে হবে, শুধু হুকটা প্রতিটার জন্য একেকবার করে করে নিলেই হয়ে যাবে:

খুব সহজ, তাই না? 🙂

সীমাবদ্ধতা

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

এবারে সত্যিকারের একটা সীমাবদ্ধতার কথা জানা যাক: যেহেতু আমরা options টেবিল ব্যবহার করছি, সেহেতু options টেবিল কিভাবে কাজ করে তা জানা খুব দরকার। options টেবিলে option_name-এর অধীনে একক তথ্য যেমন রাখা যায়, তেমনি array-ও রাখা যায়। অ্যারের তথ্য ডাটাবেযে রাখার ক্ষেত্রে তা দু’ভাবে রাখা যায়: json_encode() করে কিংবা serialize() করে, এক্ষেত্রে ওয়ার্ডপ্রেস ব্যবহার করে serialization পদ্ধতি। সিরিয়ালাইযেশন ব্যাপারটা কেমন, দেখা যাক: যদি আমাদের কাছে একটা অ্যারে থাকে, আর আমরা তাকে সিরিয়ালাইয করি, তাহলে:

ফলাফল হবে এরকম:

a:2:{s:11:"extra_input";s:13:"data I stored";s:8:"file_url";s:61:"http://localhost/project/wp-content/uploads/2015/09/image.jpg";}

দেখাই যাচ্ছে, সিরিয়ালাইয্‌ড তথ্যে সব তথ্যই সংক্ষেপে রাখা হয়, যেমন: array-কে লেখা হচ্ছে a, string-কে লেখা হচ্ছে s; এছাড়াও অ্যারে কিংবা স্ট্রিং-এর দৈর্ঘ্যও (length) জমা করে রাখে সে। যেমন: extra_input কী-র স্ট্রিং-এর দৈর্ঘ্য ১১, আবার তাতে রক্ষিত তথ্যের স্ট্রিংটার দৈর্ঘ্য ১৩ ক্যারেক্টার; …এবং এখানেই আসল সমস্যার সূচনা। আমরা একটা প্রকল্পে Bainternet-এর Tax Meta Class ব্যবহার করছিলাম, তখন এই সমস্যাটির কারণে মহা ঝামেলায় পড়েছিলাম, যদিও অবশ্য পরে সমস্যাটার সমাধান আমরা করতে পেরেছিলাম একটা তৃতীয় পক্ষের কোডের মাধ্যমে।

সমস্যাটা কী?

ঐ ক্লাসটা দিয়ে কোনো ছবি আপলোড করে সংরক্ষণ করা হলে, সে ঠিক আমাদের সিরিয়ালাইয্‌ড তথ্যটার মতো একটা স্ট্রিং ডাটাবেযে সংরক্ষণ করতো। আমরা যখন লোকাল সার্ভার থেকে ডেভলপমেন্ট শেষ করে প্রকল্পটা সার্ভারে তুললাম, তখন আমরা ডাটাবেযের সবগুলো লোকাল পাথ বদলে সার্ভারের পাথ বানিয়ে নিতাম, অর্থাৎ http://localhost/project/ বদলে সেখানে লিখতাম http://project.com/ কিংবা হয়তো http://dev.project.com/ ইত্যাদি। খুব সুন্দর! কিন্তু, এভাবে করার কারণে কিন্তু ঐ স্ট্রিংটার ক্যারেক্টারের সংখ্যা (character count) বদলাতো না। যেমন: আমাদের উদাহরণে, file_url-এ রাখা URL-টার দৈর্ঘ্য হচ্ছে ৬১, যদি আমি এই স্ট্রিংটাকে এভাবে বদলে নেই, http://project.com/wp-content/uploads/2015/09/image.jpg, তাহলে তা হয়ে যায় ৫৫, আর যদি dev দিয়ে করি তাহলে হয় ৫৯। যখনই সিরিয়ালাইয্‌ড স্ট্রিং-এ স্ট্রিং কাউন্ট বদলে যায়, তখন পুরো সিরিয়ালাইয স্ট্রিং-এ থাকা কোনো তথ্যই আর ওয়ার্ডপ্রেস [কিংবা পিএইচপি] পড়তে পারে না। (ঘটনার লগ এবং সমাধান কৌশল পাওয়া যাবে “বাড়তি পঠন অংশে“)

তাই আমাদের পর্যবেক্ষণে যেটা বেরিয়ে আসে, তা হলো: যেখানেই প্রজেক্টের ইউআরএল সংরক্ষণ করার দরকার পড়বে, সেখানে ইউআরএল স্ট্রিং সরাসরি সংরক্ষণ না করে, সম্ভব হলে তার কোনো আইডি সংরক্ষণ করা উচিত।

সমাধান

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

আমরা টেক্সট ফিল্ড থেকে যেহেতু ছবিটার absolute URL পাচ্ছিলাম, আমরা পিপিন-এর এই কোডটা^ তখন কাজে লাগিয়ে ছবিটার ইউআরএল থেকে তার আইডিটা বের করে নিলাম, এবং সংরক্ষণের সময় ইউআরএলটা না পাঠিয়ে সেই আইডিটা পাঠালাম:

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

সংরক্ষিত তথ্য দেখানো

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

ব্যবহারবিধি

• nano_get_tax_meta( 1 ); – 1 নং টার্মের জন্য রাখা সকল মেটা ফিল্ড বের করে দিবে, array আকারে। (দ্বিতীয় প্যারামিটার ঐচ্ছিক)
• nano_get_tax_meta( 1, 'extra_input' ); – 1 নং টার্মের জন্য রাখা সকল মেটা ফিল্ড থেকে শুধুমাত্র 'extra_input' কী’র তথ্যগুলো বের করে দিবে। (দ্বিতীয় প্যারামিটার ঐচ্ছিক)
• nano_get_tax_meta_img_src( 1, 'extra_input', 'thumbnail' ); – 1 নং টার্মের জন্য রাখা 'extra_input' ফিল্ডটা যদি কোনো ছবির আইডি (attachment ID) হয়, তাহলে এটি সেটার thumbnail আকারের ছবিটির URL বের করে দিবে। তৃতীয় প্যারামিটারের সম্ভাব্য মানগুলো হলো: 'thumbnail', 'medium', 'large', 'full', কিংবা নিজস্ব তৈরি করে নেয়া যেকোনো ইমেজ সাইয।  (তৃতীয় প্যারামিটার ঐচ্ছিক, পূর্বনির্ধারিত মান: thumbnail)
• nano_delete_tax_meta( 1 ); – 1 নং টার্মের জন্যে রাখা সকল তথ্য মুছে ফেলবে। (দ্বিতীয় প্যারামিটার ঐচ্ছিক)
• nano_delete_tax_meta( 1, 'extra_input' ); – 1 নং টার্মের জন্য রাখা সকল তথ্য থেকে শুধুমাত্র 'extra_input' কী-তে রাখা তথ্যগুলো মুছে ফেলবে। (দ্বিতীয় প্যারামিটার ঐচ্ছিক)
• nano_update_tax_meta( 1, 'extra_input', 'Some value' ); – 1 নং টার্মের জন্য রাখা মেটা তথ্যের 'extra_input' কী’র জন্য রাখা তথ্যকে 'Some value' লেখাটি দিয়ে আপডেট করে দিবে। (তিনটি প্যারামিটারই দেয়া বাধ্যতামূলক)

উপসংহার

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

-মঈনুল ইসলাম
mayeenulislam.github.io

বাড়তি পঠন

• Tax Meta Class ব্যবহার করে পড়া সমস্যার লগ ও সমাধান-যাত্রা^ – WordPress StackExchange
• ওয়ার্ডপ্রেস কেন json_encode() ব্যবহার না করে serialize() ব্যবহার করে^ – WordPress StackExchange

হালনাগাদ

Bainternet এই পোস্টে মন্তব্য করেন যে, যে পদ্ধতিতে আমরা ডাটাবেযে সার্চ-রিপ্লেস করছিলাম, ওয়ার্ডপ্রেসে তা করা ঠিক নয়। তাই তিনি তাঁর তৈরি ক্লাসের তথ্য সংরক্ষণ-পদ্ধতিকে ত্রুটি (bug) বলতে নারাজ। আমরা সেটা মেনে নিয়েছি, এবং এই প্রকাশনার তথ্যগুলো এমনভাবে বদলে নেয়া হয়েছে যে, আমাদের কাজের ধারায় আমরা সমস্যার সম্মুখিন হয়েছিলাম। আমরা যেহেতু মৌলিক জ্ঞান নিয়ে আলোচনা করেছি, তাই তা আমাদের আলোচনার সাথে সাংঘর্ষিকও নয়। Bainternet-কে ধন্যবাদ তাঁর বক্তব্যের জন্য। (Translation: Bainternet commented on this post that, search-and-replace site URL in database, is a big no-no in WordPress. So as we said earlier that, it’s a bug of his class, he doesn’t think so. And we admit it too, and made changes to this article in the way that, we faced issues because we went through a process. As we discussed the basics of Taxonomy Meta, it’s not contradictory to our main motive. Thanks to Bainternet for his concern.)

The post ওয়ার্ডপ্রেসে ট্যাক্সোনমি মেটা ব্যবহার – সম্পূর্ণ গাইড appeared first on Tuts by Mayeenul Islam.

CSV ফাইল কী?

Comma Separated Values কথাটিকে সংক্ষেপে CSV বলে। এধরণের ফাইলগুলোর এক্সটেনশন হলো .csv [ডট সিএসভি]। ব্যাপারটা খুব সহজ:

1,Someone Extraordinary,Developer
2,Someone New,Debugger
3,John Kauwa Kala,QA Manager

এই যে ফাইলের তথ্যগুলো উপরে দেখা যাচ্ছে, এখানে তথ্য থেকে তথ্যকে আলাদা করা হয়েছে কমা (,) দিয়ে আর একেকটা আলাদা আলাদা তথ্যগোষ্ঠিকে আলাদা করা হয়েছে এন্টার চেপে লাইন ব্রেক করে। এখন এই তথ্যগুলো একটা ফাইলে রেখে তার এক্সটেনশন .csv করে নিলেই তা হয়ে যাবে আমাদের কাঙ্ক্ষিত CSV ফাইল।

কখন লাগবে সিএসভি ফাইল?

ধরা যাক, আপনার ডাটাবেযের টেবিলে তিনটা ফিল্ড আছে: id, name, এবং designation। এই টেবিলে ৫০০০ [পাঁচ হাজার] জন আলাদা আলাদা ব্যক্তির তথ্য আছে। এবারে কোনো কারণে আরেকটা ফিল্ড বাড়ানো লাগলো: age। তখন এই ৫০০০ জনের তথ্য আলাদা আলাদা করে এডিট করে করে তাদের প্রত্যেকের বয়স ডাটাবেযে ঢুকিয়ে নিতে হবে। চিন্তা করুন তো একবার? ৫০০০টা তথ্য খুলে, এডিট করে, সংরক্ষণ করা… কতটা বিরক্তিজনক কাজ হবে! …কিংবা এমনও হতে পারে, একটা কোম্পানী ২০ বছর ধরে খাতায়-পত্রে তাদের কোম্পানীর কর্মচারীদের তথ্য লিখে রাখতো। এখন তারা আপনাকে দিয়ে একটা সফ্‌টওয়্যার বানিয়েছে। তো তারা চায় নতুন যারা আসবে, তাদের তথ্য তো সফ্‌টওয়্যারে নতুন করে লিখে নিবেনই, কিন্তু ২০ বছরের পুরোন সব কর্মচারীদের তথ্যও যেন সফ্‌টওয়্যারে ঢোকানো থাকে। এখানেই বিপুল পরিমাণ তথ্য একবারে ঢুকিয়ে দেয়ার জন্য ব্যবহার করা হয় CSV।

CSV কিভাবে তৈরি করতে হয়?

এরকম ক্ষেত্রে আমরা সাধারণত মাইক্রোসফ্‌ট এক্সেল-এর বহুল ব্যবহার করে থাকি, তবে অন্য যেকোনো স্প্রেডশিট সফ্‌টওয়্যার ব্যবহার করা যেতে পারে। আমরা এখানে এক্সেল এবং Open Office-এর OpenOffice Calc ব্যবহার করে কাজটি করা দেখাবো ইনশাল্লাহ। স্প্রেডশিটে মূলত দরকারি তথ্যগুলো বিভিন্ন রো’ এবং কলামে লিখে ফেলা হয়:

+----+-----------------------+----------------+-----+
| id | Name                  | Designation    | Age |
+----+-----------------------+----------------+-----+
| 1  | Someone Extraordinary | Developer      | 26  |
| 2  | Someone New           | Debugger       | 21  |
| 3  | John Kauwa Kala       | QA Manager     | 32  |
+----+-----------------------+----------------+-----+

যেমন আমরা মান্ধাত্যা আমলের সব তথ্য নিতে হলে এভাবে নিলাম। কিন্তু ধরা যাক, আগের সব তথ্য আছে, এখন শুধু ‘বয়স’-এর তথ্যটা নতুন যোগ হবে, সেক্ষেত্রে id আর age কলামই শুধু লিখলাম। আইডি এজন্য লিখলাম, যাতে একটা আনকোরা (unique) তথ্য যেন থাকে, যা দিয়ে আমরা একটা তথ্য থেকে আরেকটা তথ্যকে আলাদা করতে পারি, এবং বয়সের তথ্যটা ঠিক সেই ব্যক্তির ক্ষেত্রেই বসে, যার বয়স যেটা। সেক্ষেত্রে তাদের আইডি ধরে ধরে বসানোটাই সবচেয়ে সহজ।

মনে রাখতে হবে, স্প্রেডশিটে তথ্য ঢোকানোর সময় যদি কোনো কলামের তথ্যে কমা (,) থেকে থাকে, তাহলে পুরো কলামের তথ্যটাকে অবশ্যই ডাবল কো’ট (“) দিয়ে আলাদা করে নিতে হবে। এই তথ্যগুলোকে আলাদা করার পদ্ধতি নিচে ফাংশনের ডেলিমিটার অংশে আলোচিত হলো।

এভাবে যত লক্ষ-কোটি তথ্য ইচ্ছা, আপনি প্রস্তুত করে নিতে পারেন স্প্রেডশিটে। এরপর .csv ফাইলে একে সংরক্ষণ করে নিতে হবে:

মাইক্রোসফ্‌ট এক্সেল (২০০৭+) হলে:

• ধরে নিচ্ছি আপনি স্প্রেডশিটে এভাবে তথ্যগুলো বসিয়ে নিয়েছেন, এবং একটা .xlsx কিংবা .xls ফাইল আছে আপনার। এবারে সেই ফাইল খুলে Office Button > Save As > Other Formats
• ফাইলের একটা নাম দিয়ে, Save as type: ড্রপডাউন মেনু থেকে CSV (Comma delimited) (*.csv) বাছাই করুন
• Save বোতাম চাপুন
• ওয়ার্নিং আসতে পারে: প্রথম ওয়ার্নিং বলছে, শুধু কিন্তু এই শিটটা সংরক্ষণ হচ্ছে (বাদবাকি শিট-এর খবর জানি না) – আমরা Ok চাপবো
• দ্বিতীয় ওয়ার্নিং বলছে, CSV-তে এমন কিছু ফিচার আছে, যেগুলো কিন্তু সাপোর্ট করবে না – আমরা সেটা মেনে নিবো – Yes চাপবো
• এক্সেল বন্ধ করে দিই, এবং কোনো ডায়লগ বক্স এলে বলে দিই – No – আমরা আর সংরক্ষণ করতে চাই না (কারণ আমাদের কাজ তো হয়ে গেছে)

ওপেনঅফিস ক্যাল্‌ক (4+) হলে:

• ধরে নিচ্ছি আপনি ক্যাল্‌ক-এর স্প্রেডশিটে তথ্যগুলো বসিয়ে নিয়েছেন, এবং একটা .ods ফাইল আছে আপনার। এবারে সেই ফাইল খুলে File > Save as (Ctrl + Shift + S) চাপুন
• ফাইলের একটা নাম দিয়ে, Save as type: ড্রপডাউন মেনু থেকে Text CSV (.csv) (*.csv) বাছাই করুন
• Save বোতাম চাপুন
• ওয়ার্নিং আসতে পারে: আপনি কি আসলেই ODS ফর্মেটের বাইরে সেভ করতে যাচ্ছেন – আমরা Keep Current Format বাছাই করবো
• Export Text File নামের একটা ডায়লগ বক্স আসবে, এখানে: Character set: থেকে Unicode (UTF-8) বাছাই করে দিন। আর বাকিগুলো যেমন আছে থাকুক: আমরা কমা (,) দিয়ে আলাদা করছি, আর টেক্সট ডেলিমিটার ডাবল কো’ট রাখছি (“) – OK বোতাম চাপুন
• ওয়ার্নিং আসতে পারে: শুধু কিন্তু এই শিটটা সংরক্ষিত হচ্ছে – আমরা বলবো – OK

কাজ শেষ।

আমাদের .csv ফাইল তৈরি। এবারে ফাইলটা সরাসরি Open না করে মাউসের ডান বোতাম চেপে Notepad (অথবা যেকোনো টেক্সট এডিটর, যেমন: Notepad++, Sublime Text)-এ খুলি। তাহলেই দেখতে পাবো, আমাদের স্প্রেডশিটে দেয়া তথ্যগুলো কমা দিয়ে আলাদা আলাদা হয়ে সুন্দর করে বসে গেছে।

কিভাবে PHP দিয়ে CSV ফাইল পড়বো?

এবারে খুব সহজেই আমরা PHP ব্যবহার করে তথ্যগুলো পড়তে পারি। নিচের কোড স্নিপেটটি একটা ফাইলে রেখে ফাইলটা সার্ভার থেকে খোলা যাক… ইনলাইন মন্তব্যগুলো দেখুন, বিস্তারিত পরে বলছি:

এবারে এই পাতাটা খুললে আমরা খুব সাধারণ একটা এইচটিএমএল ফর্ম দেখতে পাবো:

এখানে আমাদের তৈরি করা .csv ফাইলটা আপলোড করে Submit বোতাম চাইলেই সিএসভি’র চারটা কলামের তথ্যকে আমরা খুব সহজে দেখতে পাবো পর্দায়।

উপরের কোডটা এবার বোঝা যাক: একেবারে নিচে আমরা খুবই সাধারণ একটা এইচটিএমএল ফর্ম ব্যবহার করেছি, যা দিয়ে আমরা ফাইল আপলোড করতে পারি। ফর্মে post মেথড ব্যবহার করেছি, এবং এনক্রিপশন টাইপ রেখেছি multipart/form-data। এই ফর্মটা সাবমিট হলে উপরের পিএইচপি ব্লকে যায়। সেখানে চেক করে আসলেই কি কোনো ফাইল আপলোড হয়েছে কিনা, ফাইলের আকার (size > 0) দেখে। তারপর আমরা ফাইলটাকে $file ভ্যারিয়েবলে রেখেছি। $handle-এ এসে আমরা ফাইলটাকে খুলে পড়েছি। এরপরে while loop-এর ভিতরে আমরা পিএইচপি’রই দেয়া fgetcsv()^ ফাংশনটা ব্যবহার করেছি সিএসভি ফাইলটা নিজেদের মতো করে পড়ার জন্য। বাকিটা কেবলই ইতিহাস।

এপর্যায়ে fgetcsv() ফাংশনটাকে চেনা যাক:

fgetcsv( file, length, separator, enclosure);

এখানে:

• file হচ্ছে প্রথম প্যারামিটার, যা দিতেই হয়, এখানে আমরা আমাদের সিএসভি ফাইলটাকে দিবো
• length হচ্ছে আমাদের প্রতিটা লাইনে কতগুলো ক্যারেক্টার থাকবে তার পরিমাণ (যদি নিশ্চিত না হোন, তাহলে উল্লেখ করা থেকে বিরত থাকুন, কারণ ভুল হলে তথ্য ভেঙে যেতে পারে)
• separator হচ্ছে সেই ক্যারেক্টার, যা দিয়ে আপনার কলামগুলো আলাদা করা থাকবে, আমরা কমা দিয়ে কাজটি করছি। এক্ষেত্রে ফাংশনে তাই ডিফল্ট করা কমা (,), আমরা যদি অন্য কিছু দিয়ে করতাম, তাহলে এই প্যারামিটারে তা বলে দিতাম
• delimiter হচ্ছে স্ট্রিং-কে চিনিয়ে দেয়ার পদ্ধতি। CSV-তে কমা পেলেই সে আলাদা কলাম ধরে নিবে। কিন্তু আপনার তথ্যের মধ্যেই যদি কোনো কমা থেকে থাকে (যেমন: “He, you and I went there”), তখন কী হবে? তখন ঐ লেখাটিকে ডাবল কো’ট (“) দিয়ে আটকে দিতে হবে। আর সেটা এই প্যারামিটারে বলে দিলে একেকটা ডাবল কোটের ভিতরকার তথ্যে কমা থাকলেও সে সেটাকে কলাম ধরে নিবে না। এর ডিফল্ট হিসেবে ডাবল কো’ট (“) নির্ধারণ করে দেয়া আছে

আমরা তথ্যগুলো পিএইচপি দিয়ে পড়ে ফেলার পর এতটুকু নিশ্চয়ই বুঝে গেছি যে, আমাদের স্প্রেডশিটে লেখা তথ্যগুলোর উপর দখল নিতে পেরেছি আমরা। তাহলে এপর্যায়ে আমরা এই তথ্য নিয়ে যা ইচ্ছা তা করতে পারি। আমরা নিশ্চয়ই এও বুঝে গেছি যে, কমা (,) দিয়ে আলাদা করা প্রতিটা কলামকে fgetcsv() একটা পিএইচপি অ্যারেতে নিয়েছে, তাই প্রথম কলামটা পেতে আমরা অ্যারের যিরো ইনডেক্স ($data[0]) ধরেছি। এভাবে প্রতিটা লাইনকে fgetcsv() আমাদের জন্য আলাদা করে বের করে নিয়ে এসেছে। যারা আগে থেকে কাজ করছেন, তাদেরকে আর বুঝিয়ে বলা লাগবে না, কিভাবে এই তথ্যকে ডাটাবেযে নিয়ে যেতে হবে। তবু আমরা সেবিষয়েও আলোকপাত করছি:

কিভাবে MySQL ব্যবহার করে CSV ফাইলের তথ্য ডাটাবেযে নিবো?

আমার উপরে কোড স্নিপেটটির সাথে MySQL কোড যোগ করে এখানে দেখিয়েছি, কিভাবে সিএসভি ফাইল থেকে আমরা যা পড়তে পারছি, তা খুব সহজে ডাটাবেযে নিয়ে যেতে পারি:

সচেতন থাকুন, অপরিশোধিত তথ্য ডাটাবেযে নেয়া খুবই বিপজ্জনক। এজন্য অবশ্যই তথ্যকে যথাযথ sanitization, validation আগে থেকে আপনাকে করে নিতে হবে – যা আমরা এখানে দেখাইনি।

আমরা ধরে নিয়েছি আপনি একটা MySQL ডাটাবেয তৈরি করে নিয়েছেন, যার নাম csv_db এবং তাতে একটা টেবিল আছে, যার নাম csv_table, যেখানে id, name, designation, age নামে চারটা কলাম তৈরি করাই আছে (এতগুলো বিষয় আমরা ইচ্ছে করেই দেখাচ্ছি না, টিউটোরিয়ালটাকে যথাসম্ভব ছোট রাখার জন্য)।

$find_header > 1 কেন?

আপনারা আগের কোডের সাথে এখানে অতিরিক্ত একটা পিএইচপি কাউন্টার দেখতে পাচ্ছেন। আপনারা আগের কোডটি রান করালে দেখতে পাবেন, id, name, designation, age – স্প্রেডশিটের এই লাইনটাও আমাদের সিএসভি থেকে সে রিড করে ফেলেছে। এখন যখন আপনি বিপুল পরিমাণ ডাটা ডাটাবেযে ঢুকাতে যাবেন, তখন কিন্তু প্রথম ডাটা হিসেবে সে হেডারের এই তথ্যগুলোও নিয়ে নিবে। তাই আমরা প্রথম লুপটা অযথাই ঘুরিয়ে আনছি, আর যখন লুপটা একবার ঘুরে গেল, তার মানে প্রথম রো’-টা পার করে গেল, তখনই আমরা বলছি: এবার তুমি ইনসার্ট করা শুরু করো। তাই আমরা আমাদের কাউন্টার ১-এর বেশি হলে তখন থেকে শুরু করতে বলে দিচ্ছি।

ব্যস, আমরা আমাদের সিএসভি থেকে বিপুল পরিমাণ তথ্য নিয়ে ডাটাবেযে ঢুকিয়ে নিতে পেরেছি।

CSV’র তথ্য যদি হয় বাংলায়?

এটা একটা মহামসিবতের কথা!

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

তখন আমরা OpenOffice ব্যবহার করতাম না। কারণ ওপেনঅফিস-এর পদ্ধতিতে ৫ নম্বর ধাপে এনকোডিং যে Unicode (UTF-8)-এ হবে, তা বলে দেয়া যায়। আর তাতেই সমাধানটা হয়ে যায়। আমরা সমস্যায় পড়েছিলাম মাইক্রোসফ্‌টের Excell দিয়ে কাজটা করতে গিয়ে।

আমরা অনেক ঘাঁটাঘাঁটি করে তখন দুটো সমাধান পেয়েছিলাম, এখন আরেকটা বোনাস:

এক্সেল দিয়ে Unicode CSV – সমাধান ১ (ঝামেলার):

• প্রথম ধাপ আগের মতো
• দ্বিতীয় ধাপে এসে Save as type: থেকে Unicode Text (*.txt) বাছাই করুন (বুঝতেই পারছেন, আমরা সরাসরি সিএসভি বানাচ্ছি না)
• ওয়ার্নিংগুলো আগের মতোই ডীল করুন, এবং এক্সেল বন্ধ করে দিন (এক্সেলে আর কোনো কাজ নেই)
• এবারে যে .txt ফাইলটা তৈরি হয়েছে, তা Notepad-এ খুলুন, দেখবেন সবগুলো লেখাই পড়া যাচ্ছে, আগের মতো প্রশ্নবোধক চিহ্ন হয়ে যায়নি। কিন্তু এটা সিএসভি না, কারণ কলামগুলো কমা দিয়ে আলাদা নয়, বরং ট্যাব দিয়ে আলাদা করা
• এবারে নোটপ্যাডের Edit > Replace (Ctrl + H) চেপে Find&Replace ডায়লগ বক্সটা খুলে নিয়ে Find what:-এ ছবিতে দেখানো পদ্ধতিতে ট্যাব-স্পেসটুকু কপি করে বসিয়ে দিতে পারেন। এতে দৃশ্যত প্রথম ফিল্ডটা আসলে ফাঁকাই দেখা যাবে। এবারে Replace with:-এ একটা কমা (,) বসিয়ে দিন। …হ্যা, বুঝে ফেলেছেন, যেহেতু পুরো ডকুমেন্ট ট্যাব দিয়ে আলাদা করা, আমরা ট্যাবগুলোকে কমা বানিয়ে ফেললেই এটা একটা কমা সেপারেটেড ফাইল হয়ে যাবে। …এবারে Replace All চাপুন
• এবারে সাবধানতার জন্য ফাইলের এনকোডিংকে Unicode থেকে Unicode (UTF-8) করে নিতে হবে। এজন্য নোটপ্যাডে File > Save as-এ ক্লিক করুন, এবং একেবারে নিচে Save বোতামের বাম দিকে Encoding থেকে UTF-8 বাছাই করে দিন। ফাইলের নতুন একটা নাম দিলে ঝামেলা নেই, একই নাম দিলে, রিপ্লেস করে নিতে হবে। কাজ শেষ, নোটপ্যাড বন্ধ করে দিন
• এবারে ফাইলটা রিনেম করে এর .txt এক্সটেনশনটাকে বদলে .csv করে ফেলুন। যদি ফাইলের নাম হয়: data.txt, তাহলে একে আপনি বানাচ্ছেন data.csv

এক্সেল দিয়ে Unicode CSV – সমাধান ২ (তুলনামূলক ঝামেলাহীন):

• আমরা Jaimon Mathew-এর এই ব্লগ পোস্টটি^ পেয়েছিলাম, যেখানে তাঁর তৈরি একটা অ্যাডইন রয়েছে (পুরো প্রোজেক্টের কোডটি তিনি গিটহাবে হোস্ট^ করে রেখেছেন)। অ্যাডইনটি ডাউনলোড করে নিতে হবে আগে (ডাউনলোড লিংক^ : setupfiles.zip – filesize: 247kb)
• সেটআপ চালু হলে পিসি রিস্টার্ট নিবে, তাই কোনো কাজ থাকলে আগে ব্যাকআপ নিয়ে নিন
• আনযিপ করে নিয়ে Setup.exe চালু করুন (ওটা কাজ না করলে UnicodeCSVAddin.vsto ফাইলটা চালু করতে নির্দেশনা রয়েছে)
• এতে সে তার প্রয়োজনীয় ফাইল ইন্টারনেট ব্যবহার করে নামিয়ে নিয়ে তা কম্পিউটারে ইন্সটল করে নিবে। ইন্সটলেশনের অংশ হিসেবে সে পিসিকে নিজে থেকেই রিস্টার্ট করে নিবে। পিসিকে রিস্টার্ট হতে দিন
• ইন্সটল করা হয়ে গেলে সরাসরি আপনার বাংলা লেখা এক্সেল ফাইলটা খুলে নিন এক্সেলে। এবারে রিবনে একটা আলাদা নাম দেখতে পাবেন: Unicode CSV। ওটাতে গিয়ে Save বোতাম চাপুন। নাম দিয়ে ফাইলটা সংরক্ষণ করে নিন
• ব্যস, ইউনিকোডে আপনার সিএসভি ফাইল প্রস্তুত। যাচাই করতে এক্সেল বন্ধ করে দিয়ে .csv ফাইলটা নোটপ্যাডে খুলে দেখে নিন

এক্সেল দিয়ে Unicode CSV – সমাধান ৩ (গুগল ডক্স):

• আপনার এক্সেল ফাইলটা গুগল ড্রাইভে^ আপলোড করে দিন
• এবারে তাকে Open with Google Sheets করে নিন
• নতুন গুগল শিটে এবারে আপনার বাংলা স্প্রেডশিটটা খুললে File > Download as > Comma-separated values (.csv, current sheet) বাছাই করুন
• ব্যস, ইউনিকোডে বদলে সিএসভি হয়ে নেমে আসবে আপনার স্প্রেডশিটটা

পরিশেষ

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

বোনাস: ওয়ার্ডপ্রেসে CSV পড়া

ওয়ার্ডপ্রেসও কিন্তু PHP-MySQL-ভিত্তিক সিএমএস, সুতরাং আলাদা ঝামেলার কিছুই নেই। তবু আমি যেহেতু একজন ওয়ার্ডপ্রেস ডেভলপার, তাই ওয়ার্ডপ্রেসে কাজটি সহজে কিভাবে করা যায়, তা হয়তো বলে দিতেই পারি।

ওয়ার্ডপ্রেসে একটা পিএইচপি কোড রান করানোর জন্য বিভিন্নরকম প্লাগইন রয়েছে, যেমন: Otto’র PHP Code Widget^। এই উইজেটে আপনার পিএইচপি কোড বসিয়ে নিয়ে তা ওয়ার্ডপ্রেসের যেকোনো উইজেট সক্রীয় অংশে রান করাতে পারবেন।

যাদের প্লাগইন ব্যবহার করতে মন চাইছে না, তারা কোডের বিপুল ঝামেলায় না গিয়ে যে কাজটি করতে পারেন খুব সহজে, তা হলো একটা Page Template বানিয়ে ফেলা, কিছুই না, শুধুমাত্র কমেন্টের ভিতরে Template Name: CSV বসিয়ে নিলেই যেকোনো ফাইলকে WordPress-এর পাতায় রান করানো যায়। এই ফাইলটা থিমের ফোল্ডারে থাকলে Add New Page থেকে নতুন পাতা তৈরি করে পেজ টেমপ্লেট হিসেবে CSV (আমাদের টেমপ্লেটের নাম) বাছাই করে দিলেই হলো।

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

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

-মঈনুল ইসলাম
mayeenulislam.github.io

____________________________________________________________

কৃতজ্ঞতা

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

প্রচ্ছদের ছবি Christlich Soziale Volkspartei-এর তৈরি ছবি^, উইকিমিডিয়া কমন্স থেকে নিয়ে বদলে নেয়া হয়েছে প্রয়োজনমতো।

The post PHP-MySQL দিয়ে CSV ফাইল থেকে বাংলা তথ্য আপলোড appeared first on Tuts by Mayeenul Islam.

ওয়ার্ডপ্রেস সার্চ বা অনুসন্ধান করার বিষয়টি ডিফল্টভাবেই থাকে, <?php get_search_form(); ?> লিখেই আমরা সার্চ ফর্মটা লোড করে নিতে পারি থিম কিংবা প্লাগইন ইন্টাফেসে। আর সার্চ করার পর ফলাফল দেখার জন্য search.php টেমপ্লেটটা সাজিয়ে নিতে হয়, তাহলেই অনুসন্ধানের ফলাফল দেখা যায়। কিন্তু ডিফল্ট সার্চ সুবিধাটি শুধুমাত্র keyword বা লেখার টুকরা নিয়ে অনুসন্ধান করে, যা সাধারণত পোস্ট, পেজ ইত্যাদিতেই সীমাবদ্ধ — কাস্টম ফিল্ড, ট্যাক্সোনমি ইত্যাদিতে অতিরিক্ত উপাদানের ভিতরকার তথ্যাদি অনুসন্ধান করার জন্য আপনাকে অ্যাডভান্সড সার্চ তৈরি করার কোনো বিকল্প নেই। এছাড়া এমন অনেক ক্ষেত্র আছে, যেখানে কয়েকটা আলাদা আলাদা উপাদানের বিভিন্ন মিশ্রণের প্রেক্ষিতে কিছু খুঁজে নেয়ার দরকার হতে পারে। যেমন: একটা অনলাইন স্টোর ওয়েবসাইট, কিংবা অনলাইনে গাড়ি বিক্রীর ওয়েবসাইট, যেখানে পণ্যের বা গাড়ির দাম, পণ্যের বা গাড়ির আকার, পণ্যের বা গাড়ির রং ইত্যাদি আলাদা আলাদা মিশ্রণে পণ্য বা গাড়ি খুঁজে নেয়ার দরকার হতে পারে — কেউ লাল রঙের গাড়ি ১টি চাইতে পারে, কেউ নীল রঙের গাড়ি ৩টি চাইতে পারে। তো এসব ক্ষেত্রে অ্যাডভান্সড সার্চ তৈরি করার দরকার পড়ে। আমরা আজকে ধারণা নিবো কিভাবে তা করা যায়:

ধাপ ১

আপনার থীমে শুরুতেই একটা HTML ফর্ম বানিয়ে নিতে হবে। যা দিয়ে আমরা ব্যবহারকারী থেকে তথ্য নিবো। অর্থাৎ ব্যবহারকারী কী কী মিলিয়ে অনুসন্ধান করতে চান, আমরা সেই তথ্যগুলো নেবার জন্য একটা ফর্ম বানাবো:

ফর্মটি আমরা একটা নাম দিয়ে সেভ করবো, কিন্তু তা অবশ্যই searchform.php হবে না। উদাহরণস্বরূপ আমরা দিলাম advanced-searchform.php — কিন্তু বুঝতেই পারছেন অন্যান্য টেমপ্লেটের সাথে সাংঘর্ষিক নয় এরকম যেকোনো নামই হতে পারে।

ফর্মের সিনট্যাক্স কেমন, কোডেক্স-এ ডিফল্ট সার্চ ফর্ম থেকে তার একটা ধারণা নেয়া যেতেই পারে।
get_search_form() – Codex

এবারে আমাদের বানানো সার্চ ফর্মটি থীমের যেখানে দেখাতে চাচ্ছি, সেখানে নিচের কোডটি বসাতে হবে:

<?php get_template_part( 'advanced', 'searchform' ); ?>

আমরা ওয়ার্ডপ্রেসের Default থিম TwentyFourteen-এর সাইডবারে কোডটা বসিয়ে পরীক্ষা করতে পারি:

তো আপনার সার্চ ফর্ম তৈরি। এবারে আপনার ব্যবহারকারীদের পছন্দ আপনি একটা URL-এ নিয়ে নিতে পারছেন। অথ্যাৎ যদি আপনি গাড়ির নামের জায়গায় “Ferrari” আর মডেলের জায়গায় “Model2” বাছাই করে সাবমিট করেন, তাহলে URL-টা দাঁড়াবে এরকম:

http://example.com/?search=advanced&name=Ferrari&model=model2

ধাপ ২

এবারে আপনার যা দরকার: ডাটাবেজে কুয়েরি করা এবং কাস্টম ফিল্ডে সার্চ কুয়েরি অনুযায়ী খুঁজে মিলিয়ে নেয়া। মনে রাখবেন, সার্চ কুয়েরি কিন্তু আপনার URL, যা আপনি ফর্মটা সাবমিট করার পরে পেয়েছেন। …এপর্যায়ে আপনি ওয়ার্ডপ্রেসকে বলে দিবেন যে, যখন আপনার ব্যবহারকারীরা সার্চ করবেন, তখন যেন আপনার নিজস্ব অনুসন্ধান পাতাটি খুঁজে এনে সেখানে ফলাফল দেখায়। এজন্য নিচের ফাংশনটি আপনার functions.php ফাইলে বসিয়ে নিন। এটি বসালে ফর্ম সাবমিট করার পরে ডিফল্ট সার্চ টেমপ্লেট না খুলে আপনার নিজস্ব সার্চ পাতা খুলবে।

<?php
function wpse_load_custom_search_template() {
        if ( 'advanced' === isset($_REQUEST['search']) ) {
                require( 'advanced-search-result.php' );
                die();
        }
}

add_action( 'init', 'wpse_load_custom_search_template' );

এই কোডটি আমি ওয়ার্ডপ্রেস স্ট্যাকএক্সচেঞ্জ থেকে নিয়েছি (দুর্ভাগ্যবশত আমি এর উৎসটা ভুলে গেছি), কিন্তু এই কোডটি ব্যবহারে মতদ্বৈততা আছে, বিশেষ করে init-তে অ্যাকশটা হুক করার বিষয়ে। কিন্তু সত্যি কথা বলতে কি তবু কোডটি কাজের (দুর্বল যুক্তি নিশ্চিত!)

ইতালির Giuseppe (G.M.) এব্যাপারে আরেকটি পথ বাৎলে দিয়েছেন^, তাও দেখা যেতে পারে।

ধাপ ৩

আরেকটি নতুন ফাইল তৈরি করুন, যাকে advanced-search-result.php নাম দিয়ে সংরক্ষণ করা যাক (কারণ functions.php-তে আমরা এই নামটিই দিয়েছিলাম)। আর তাহলেই আপনি এবার মুক্ত – অবশ্যই। কারণ কনসেপ্ট বা মূল ধারণাটা হলো:

• URL থেকে তথ্যটা ধরুন,
• একটা সাধারণ WP_Query() কাজে লাগান (কুয়েরি জটিল কিছু হলে $wpdb কুয়েরি ব্যবহার করুন)
• কমান্ডগুলো কুয়েরিতে পাস করুন, আর ডাটাবেজ থেকে তথ্য বের করে নিন, এবং
• ফলাফলটা দেখান

উদাহরণ হিসেবে দেখা যাক:

তো আপনার পুরো জিনিসটা তৈরি এখন। কিন্তু তবু এখনও আপনার জন্য অনেক চ্যালেঞ্জ বাকি রয়ে গেলে:

• বদলি অনুসন্ধান তথ্য: অ্যাডভান্সড সার্চ যেমন সবগুলো ফিল্ড মিলিয়ে হতে পারে, তেমনি যেকোনো একটি ফিল্ড দিয়েও হতে পারে, তাই আপনাকে নিশ্চিত হতে হবে যে, আপনার কুয়েরি সব ধরণের অবস্থায়ই ডাটাবেজে থাকা তথ্য ঠিক ঠিক বের করে আনছে।
• শুদ্ধিকরণ আর যাচাইকরণ: টেক্সট ফিল্ড আর টেক্সটএরিয়াগুলো খুবই মারাত্মক, কারণ এগুলো দিয়ে খুব সহজেই ডাটাবেজে অযাচিত তথ্য পাঠিয়ে ওয়েবসাইটের বারোটা বাজিয়ে দেয়া যেতে পারে। তাই বলে অন্যান্য ফর্ম এলিমেন্টও কম ঝুঁকির না। তাই সরাসরি তথ্য পাঠিয়ে দেয়াটা সবসময়ই অনিরাপদ, আপনাকে অবশ্যই আগে তথ্যকে পরিশুদ্ধ করে নিয়ে যথাযথ যাচাই-বাছাইয়ের মধ্য দিয়ে তথ্যকে ডাটাবেজ কুয়েরিতে পাঠাতে হবে – যাকে বলে Sanitization & Validation। (Data Sanitization and Validation with WordPress – TutsPlus^)
• নকশায়ন: সাজিয়ে নেয়ার বিষয়টিও আসতে পারে, কিভাবে আপনি আপনার অনুসন্ধান পাতাটি সাজাবেন, সেক্ষেত্রে আপনি page.php (কিংবা search.php) টেমপ্লেটটির সহায়তা নিতে পারেন।

তো, আপনি আসল ধারণাটি পেয়ে গেছেন, এবারে বাকি পথটা আপনাকেই চলতে হবে — পথ ধরুন, নতুন পথ আবিষ্কার করুন। মনে রাখবেন, পৃথিবীতে প্রত্যেকের পথই আলাদা। আপনারটা তৈরি করে নিন, যাতে একদিন আমি আপনাকে অনুসরণ করতে পারি। 🙂

– মঈনুল ইসলাম
mayeenulislam.github.io

The post ওয়ার্ডপ্রেসে অ্যাডভান্সড সার্চ তৈরির উপায় appeared first on Tuts by Mayeenul Islam.

কিন্তু মানুষ মাত্রেই ভুল হতেই পারে। কিছু ভুল আছে, যেগুলো সংশোধনের অযোগ্য, কিন্তু আশার কথা হলো, এই ভুলটা সংশোধনযোগ্য, আর আজকে সেই কথাটিই জানাতে চাচ্ছি: ভুল করে wp-config.php ফাইলটি যদি মুছেই দিয়ে থাকেন, তাহলে দুটো উপায় অবলম্বন করতে পারেন:

• সহজ পদ্ধতি: পুণরুদ্ধার করা
• একটু ঝামেলার: নতুন করে সাজিয়ে নেয়া

সহজ পদ্ধতি: পুণরুদ্ধার করা

আপনার প্রজেক্টের যদি কোনো ব্যাকআপ থাকে, তাহলে সেটাই সবচেয়ে সহজ পদ্ধতি, পুরোন সেই ব্যাকআপ থেকে আপনার wp-config.php ফাইলটি কপি করে আপনার প্রজেক্টে পেস্ট করে নিন, ব্যস, কাজ শেষ। কিন্তু ব্যাকআপ যদি না থাকে, তাহলে…

কম্পিউটারে দুভাবে ফাইল ডিলিট করা যায়, শুধু Del (Delete) চেপে, কিংবা Shift + Del চেপে। প্রথম পদ্ধতিতে ডিলিট করলে বা মুছলে তা আমরা Recycle Bin-এ পাওয়া যায়, সেটা একটা শিশুও জানে, কিন্তু দ্বিতীয় পদ্ধতিতে মুছলে তা আর আমরা কোত্থাও পাই না… কথাটা পুরোপুরি ঠিক না। আসলে কম্পিউটার, পুরোপুরি মুছে ফেলা ফাইলগুলোকে এমন একটা পর্যায়ে নিয়ে রেখে দেয় যে, অন্য আরেকটা ফাইল দিয়ে তা ওভাররাইট বা প্রতিস্থাপন করা যায়, কিন্তু সেটা স্বাভাবিক কোনো অবস্থায় বা স্থানে আমরা দেখতে পাই না। সেই সব হারিয়ে যাওয়া ফাইল পুণরুদ্ধারের জন্য রয়েছে বিভিন্ন ডাটা-রিকভারি সফ্‌টওয়্যার। অনেক সফ্‌টওয়্যারই আমি এজন্য ব্যবহার করেছি, কিন্তু Piriform-এর Recuva’র মতো ছোট্ট আকারের, আর দ্রুত খুঁজে এনে দেয়ার মতো সফ্‌টওয়্যার, তাও আবার বিনামূল্যের সফ্‌টওয়্যার, আমি আর পাইনি। Recuva চালু করে, যে ড্রাইভ থেকে wp-config.php ফাইলটা হারিয়ে গেছে, সেই ড্রাইভটা স্ক্যান করুন, এরপর মুছে যাওয়া ফাইলটি, কিংবা হারিয়ে যাওয়া ফাইলটি উদ্ধার করে ফেলুন।

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

তাই এই পদ্ধতিটা সহজ হলেও সব সময় ঠিক কাজের না, হারিয়ে যাওয়া wp-config.php ফাইলটা আমরা অনেক সময়ই পাই না। তাই দরকার পড়ে একটু ঝামেলা করে wp-config.php আবার নতুন করে সাজিয়ে ফেলার…

একটু ঝামেলার: নতুন করে সাজিয়ে ফেলা

ঝামেলা মনে করলেই ঝামেলা, জেনে গেলে কোনো কাজই আর ঝামেলার মনে হয় না। তাই ঐ “ঝামেলা” শব্দটিকে বুড়ো আঙ্গুল দেখিয়ে আমরা এবার পদ্ধতিটা শিখে নিব। নতুন ডাউনলোড করা একটা ওয়ার্ডপ্রেস ইঞ্জিনে প্রথমেই যে ফাইলগুলো থাকে, সেখানে লক্ষ করলে দেখতে পাবেন, সেখানে wp-config-sample.php নামে একটা ফাইল দেয়া থাকে।

এই sample বা নমুনা ফাইলটার একটা কপি তৈরি করুন (কপি করে পেস্ট করুন), তারপর ফাইলটিকে রিনেম করে একে wp-config.php নাম দিন। আশা করি বুঝে গেছেন যে, এতে প্রয়োজনীয় তথ্যাদি দিয়েই আমাদের যথাযথ কনফিগারেশন ফাইলটি আমরা সাজিয়ে নিচ্ছি। ‘বানিয়ে নিচ্ছি’ বলছি না একারণে যে, এতে সবকিছু বানিয়ে দেয়া আছে, শুধু সাজিয়ে নিতে হবে।

মনে রাখতে হবে, নতুন একটা কনফিগারেশন ফাইল বানাতে আপনার মাত্র দুটো জিনিস দরকার, কিন্তু এই ওয়ার্ডপ্রেস ইন্সটলকে আরো বেশি নিরাপদ রাখতে সব মিলিয়ে আপনার দরকার পড়বে তিনটা জিনিস:

• ডাটাবেযের সাথে সংযোগের বৃত্তান্ত
• ডাটাবেযের প্রিফিক্স
• নিরাপত্তার জন্য salt

sample ফাইল থেকেই যেহেতু আমাদের wp-config.php ফাইলটি বানানো, তাই এতে নিচের মতো করে লেখা দেখা যাবে:

এখানে আমাদের মূল কাজটি হচ্ছে DB_NAME, DB_USER, DB_PASSWORD নিয়ে। আপনার প্রজেক্টের ডাটাবেজ ম্যানেজারটি খুলুন, আমি ধরে নিচ্ছি phpMyAdmin। এবারে পিএইচপিমাইঅ্যাডমিনে আপনার কয়েকটা বিষয় জানা থাকতে হবে:

1. ডাটাবেযের নাম
2. ডাটাবেযের ব্যবহারকারী নাম
3. ডাটাবেযের পাসওয়ার্ড

প্রথমটা জানা না থাকলে সমস্যার শেষ নেই। সব ডাটাবেয ঘেঁটে ঘেঁটে আসল ডাটাবেয খুঁজে বের করাটা অনেক ঝামেলার কাজ, কিন্তু আসলে সেটি ছাড়া গত্যান্তর নেই। আর ডাটাবেযের নাম জানা থাকলে ডাটাবেযের ব্যবহারকারী নাম আর পাসওয়ার্ড হয়তো সহজে বের করা যাবে, বের না করা গেলেও বিকল্প উপায়ে তথ্যাদি অন্য নতুন ডাটাবেজে সরিয়ে নেয়া যাবে।

যাহোক, আমি ধরে নিচ্ছি, এই তিনটেই আপনি জানেন, অন্তত লোকালহোস্টে হলে তো অবশ্যই জানেন, যেমন WAMP ব্যবহার করলে ডাটাবেয ব্যবহারকারীর ডিফল্ট নামটি হলো root, আর পাসওয়ার্ড দেয়া থাকে না, তাই পাসওয়ার্ড ফিল্ডটা ফাঁকা রাখতে হয়। তাই ফিল্ডগুলো লোকালহোস্টের মতো করে সাজিয়ে নিলে হবে এরকম (ধরে নিলাম ডাটাবেযের নাম mydbname):

define('DB_NAME', 'mydbname');
define('DB_USER', 'root');
define('DB_PASSWORD', '');

প্রাথমিক কাজ শেষ। অর্থাৎ আমাদের ওয়ার্ডপ্রেস ইন্সটলেশনটি এখন ডাটাবেযের সাথে সংযোগ করতে সক্ষম। কিন্তু এখনও পুরো কাজ শেষ হয়নি।

ওয়ার্ডপ্রেসের ডাটাবেয নিরাপত্তার অংশ হিসেবে টেবিলের prefix দেয়ার একটা রীতি প্রচলিত। প্রাথমিকভাবে ওয়ার্ডপ্রেস এটাকে wp_ দিয়ে রাখে, এবং নিরাপত্তা বাড়ানোর জন্য বলা হয় যে, প্রজেক্টওয়ারি এই প্রিফিক্সটা বদলে নেয়া উত্তম। প্রিফিক্সটা আসলে কী করে? ওয়ার্ডপ্রেসের টেবিলগুলোর নামকে সহজে আন্দাজযোগ্য অবস্থা থেকে বের করে একটু আন্দাজঅযোগ্য অবস্থায় নিয়ে আসে, কারণ প্রিফিক্স জুড়ে দিলে ওয়ার্ডপ্রেসের ডিফল্ট টেবিলগুলোর নাম হয়ে যায় এরকম: wp_posts, wp_options; আর আপনি যদি আপনার পছন্দমতো প্রিফিক্সটা দিয়ে থাকেন, ভাবুন তা কতটা দুর্বোধ্য আর আন্দাজঅযোগ্য হবে… যেমন: pst_posts, pst_options ইত্যাদি। যেহেতু আপনি আপনার ডাটাবেযটি জানেন, তাই সেই ডাটাবেযে ঢু মারলেই টেবিলগুলোর নামের আগের ঐ প্রিফিক্সটা দেখলেই আপনি বুঝতে পারছেন প্রিফিক্সটা কী, কারণ প্রিফিক্সগুলো সাধারণত মূল টেবিলের নাম থেকে একটা আন্ডারস্কোর দিয়ে আলাদা করা থাকে, যেমন আমাদের উদাহরণের pst_। তাহলে এবারে wp-config.php ফাইলের ডাটাবেয প্রিফিক্সটা মিলিয়ে নিন:

/**
 * WordPress Database Table prefix.
 *
 * You can have multiple installations in one database if you give each a unique
 * prefix. Only numbers, letters, and underscores please!
 */
$table_prefix  = 'wp_';

উদাহরণের মতো করে বদলালে লিখতে হবে:

$table_prefix  = 'pst_';

ব্যস, এবারে আপনার ওয়ার্ডপ্রেস ইন্সটলেশন আপনার ডাটাবেযকে চেনার পাশাপাশি টেবিলগুলোকেও পড়তে পারবে। মূল কাজটা কিন্তু এখানেই শেষ।

কিন্তু আমরা বলেছিলাম, আমাদের একটা নিরাপদ ওয়ার্ডপ্রেস ইন্সটলেশনও দরকার, তাই salt দিয়ে ওয়ার্ডপ্রেসকে আরো বেশি নিরাপদ করে নেয়া উচিত হবে। সেজন্য আমরা নিচের ১০-১৭ লাইনগুলোকে:

এখানে put your unique phrase here লেখাটিকে বদলে নিজের ইচ্ছেমতো হাবিজাবি, উল্টাপাল্টা ক্যারেক্টার: অক্ষর, সংখ্যা, চিহ্ন বসালেই কাজ শেষ। কিন্তু বিষয়টা যেহেতু নিরাপত্তা-সংশ্লিষ্ট, তাই এই উল্টাপাল্টাটাও যেন অনেক বেশি প্রকারের উল্টাপাল্টা হয়, যাতে আন্দাজ করা কোনোভাবেই সম্ভব না হয়, কিংবা অনেক বেশি কঠিন হয়, সেটাই নিশ্চিত করা উচিত। এজন্য রয়েছে WordPress Secret Key Generator। এই জেনারেটর কাজে লাগিয়ে আপনি এই ৮টা সিকিউরিটি কী তৈরি করে নিতে পারেন অনায়াসে।

• WordPress Secret Key (Salt) Generator – WordPress API^

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

• সল্ট সম্পর্কে প্রাথমিক পরিচিতি – Jeff Starr – digwp.com^
• wp-salt() – WordPress Codex^
• কেন ওয়ার্ডপ্রেস সল্ট গুরুত্বপূর্ণ – Codeseekah.com^

আপনার ওয়ার্ডপ্রেস ইন্সটলেশনকে নিরাপদ করতে এই সল্টগুলো বদলে নিন, দুর্বোধ্য কিছু দিয়ে, আর এই কীগুলো কারো সাথে শেয়ার করবেন না, ব্যস। আপনার ওয়ার্ডপ্রেস আগের অবস্থায় সম্পূর্ণ প্রস্তুত। শুধু অ্যাডমিন প্যানেলে ঢুকতে আরেকবার লগ-ইন করা লাগবে – এই যা।

পুনশ্চ, যদি নতুন ডাটাবেয পাবার পরও সাইটের বিভিন্ন লিংক 404 এরর দেখায়, তাহলে অ্যাডমিন প্যানেলের Settings > Permalink-এ গিয়ে Save changes বোতামে একবার ক্লিক করলেই rewrite rules-গুলো রিফ্রেশ হয়ে যাবে, সব আগের মতোই কাজ করবে ইনশাল্লাহ।

কোনো প্রশ্ন থাকলে যেমন শেয়ার করার অনুরোধ করছি, তেমনি অনুরোধ করছি, যদি এতে কোনো সমস্যা হয়, কিংবা আপনারা নতুন কিছু জেনে থাকেন, কিংবা আমার জানায় কোনো ঘাটতি থাকে…। স্বাগতম!

-মঈনুল ইসলাম
mayeenulislam.github.io

The post ওয়ার্ডপ্রেসের wp-config.php মুছে ফেললে করণীয় appeared first on Tuts by Mayeenul Islam.

Grab the Original English version here on WordPress StackExchange

জ্ঞানস্তর: প্রাথমিক/মাধ্যমিক স্তর

সময়: ৫ মিনিট

ফেভিকন (favicon) হলো ওয়েবসাইটের একটা সংক্ষিপ্ততম পরিচিতি বা ব্র্যান্ডিং, যা, আপনি ওয়েবসাইট খুললে ব্রাউযারের ট্যাবে কিংবা টাইটেল বারে, ওয়েবসাইটের নামের পাশে দেখা যায়। সাধারণত ওয়েবসাইটের লগো’র ছোট্ট রূপটাই ফেভিকন হিসেবে ব্যবহার করতে দেখা যায়, তবে এক্ষেত্রে ফেভিকনটা সম্পূর্ণই আপনার ব্যক্তিগত পছন্দ – যা ইচ্ছা তা হতে পারে। কোনো ওয়েবসাইটে ফেভিকন যুক্ত করার জন্য HTML <head> ট্যাগের ভিতর নিচের লাইনটি লিখতে হয়, আর যথাস্থানে .ico (Icon) এক্সটেনশানের একটা ইমেজ ফাইল রাখতে হয়:

<link rel="shortcut icon" href="images/favicon.ico" />

ওয়ার্ডপ্রেস ওয়েবসাইটেও একইভাবে ফেভিকন যুক্ত করা যায়, তবে ওয়ার্ডপ্রেসে ফাইলের পাথ (মানে কোথায় ফাইলটি আছে) বোঝানো একটু অন্যরকম, তাছাড়া সর্বত্র ফেভিকনকে দেখানোর বিষয়টিও আমরা এখানে আলোচনা করতে যাচ্ছি।

প্রথমত জেনে নেয়া দরকার, আপনি এই কাজটি থিম কিংবা প্লাগইন উভয় পদ্ধতিতেই করতে পারেন – আমরা উভয় পদ্ধতিই আলোচনা করছি:

প্রস্তুতি

যে ছবিটিকে ফেভিকন হিসেবে দেখাতে চান, তা নির্বাচন করুন, এবং যেকোনো ছবি এডিট করার টুল (যেমন: পেইন্ট, ফটোশপ, গিম্প ইত্যাদি) দিয়ে ছবিটিকে 16px × 16px কিংবা 32px × 32px-এ সংরক্ষণ করুন। ছবির ফাইলটি .jpg (JPEG), .png (PNG), .gif (GIF) ইত্যাদি যেকোনো ফর্মেটেরই হতে পারে। তবে ব্যাকগ্রাউন্ডহীন ছবি হলে .png-তে সংরক্ষণ করতে হবে।

ফাইলটিকে রিনেম করুন, এবং এক্সটেনশানটা বদলে .ico করে ফেলুন। ধরা যাক আপনার ছবিটি ছিল favicon.png, এবারে তা হয়ে গেল favicon.ico।

ব্যস, প্রস্তুতি শেষ। এবারে কাজে নামার পালা।

থিম-এর মাধ্যমে ফেভিকন যোগ

স্ট্যাটিক বা স্থির কোড

থিম তৈরি করার সময় থিমের images ফোল্ডারের ভিতর ফেভিকন আইকন ফাইলটি রেখে, থিমের হেডারে <head> ট্যাগের ভিতর উপরের কোডটি বসিয়ে দিলেই কাজটা হয়ে যাবে। তবে কোডটিতে একটু পরিবর্তন করে নিতে হবে:

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" />

লক্ষ করুন এখানে get_template_directory_uri()ব্যবহার করা হয়েছে। ওয়ার্ডপ্রেসে থিমের ফোল্ডারটির পাথ সনাক্ত করাবার জন্য এটি ব্যবহার করা হয়ে থাকে। আপনি যদি চাইল্ড থিম নিয়ে কাজ করেন, তাহলে এক্ষেত্রে get_stylesheet_directory_uri()-এর ব্যবহার করুন।

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

ডায়নামিক কোড

ওয়ার্ডপ্রেস থিমের হেডারের <head> সেকশনে wp_head()-এর ব্যবহার উত্তম, এবং একটি আধুনিক পদ্ধতি – অনেক প্লাগইনই এর হুকটা ব্যবহার করে প্রয়োজনীয় কোড লোড করে। আপনার থিমে এই হুকটা যদি হেড সেকশনে বসানো থাকে, তাহলে থিমের functions.php ফাইলে নিচের কোডটি বসাতে হবে:

এখানে আমরা একটা ফাংশনের ভিতরে আমাদের আগের স্ট্যাটিক কোডটাই লিখেছি। তারপর add_action() দিয়ে দুটো আলাদা জায়গায় হুক করেছি, পাশের কমেন্ট দেখে আপনারা বুঝতে পারছেন, কোন হুকটা দিয়ে আমাদের ফেভিকনটা কোথায় চলে যাচ্ছে – তবু বলে দিচ্ছি, প্রথম অ্যাকশন দিয়ে wp_head() হুকের মাধ্যমে সাইটের ফ্রন্টএন্ডে ফেভিকনটা দেখা যাবে, আর দ্বিতীয়টার ব্যবহারে সাইটের ব্যাকএন্ডেও ফেভিকনটা দেখা যাবে।

রেফারেন্স লিংক:

• get_template_directory_uri() – ওয়ার্ডপ্রেস কোডেক্স^
• get_stylesheet_directory_uri() – ওয়ার্ডপ্রেস কোডেক্স^

প্লাগইন-এর মাধ্যমে ফেভিকন যোগ

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

এজন্য শুরুতেই একটা নিজস্ব প্লাগইন^ বানিয়ে নিতে পারি। কোড এডিটর খুলে নিচের কোডগুলো লিখুন:

লক্ষ করুন, এখানে আমরা আগের ফাংশনটার বদলে plugins_url() ফাংশনটা ব্যবহার করেছি, কারণ আমরা প্লাগইনের ভিতরে আমাদের আইকন ফাইলটি রাখতে যাচ্ছি। এবারে ফাইলটি ধরা যাক my-favicon.php লিখে সংরক্ষণ করলাম। ফাইলটা একটা my-favicon নামক একটা ফোল্ডারে রেখে আমাদের favicon.ico ফাইলটি ঐ ফোল্ডারে রাখি। এবারে এই পুরো ফোল্ডারটি wp-content/plugins ফোল্ডারের ভিতর পেস্ট করি। তাহলে ব্যাপারটা যা দাঁড়ালো:

wp-content/
    plugins/
       my-favicon/
         -my-favicon.php
         -favicon.ico

এখন আপনার ওয়ার্ডপ্রেস অ্যাডমিন প্যানেলের প্লাগইন্‌স পাতায় (সাধারণত /wp-admin/plugins.php) গিয়ে My Favicon নামক প্লাগইনটি অ্যাক্টিভেট বা সক্রীয় করুন।

ব্যস, এবার আপনার সাইটের ফ্রন্টএন্ড এবং ব্যাকএন্ডে উপভোগ করুন ফেভিকন!

রেফারেন্স লিংক:

• plugins_url() – ওয়ার্ডপ্রেস কোডেক্স^

বোনাস – অ্যাপল টাচ আইকন যোগ!

অ্যাপলের মোবাইল (আইফোন) কিংবা আইপ্যাডে অ্যাপল টাচ আইকন দেখা যায়, যা আপনার সাইটের প্রতিনিধিত্ব করবে অনেকটা ফেভিকনের মতো।  যদিও ফেভিকন এবং অ্যাপল টাচ আইকন ভিন্ন বিষয়, তবু এদের পদ্ধতিটা যেহেতু এক, তাই বিষয়টা এখানেই আলোচনা করা হলো:

ফেভিকন যেখানে ১৬-১৬ কিংবা ৩২-৩২ ডাইমেনশনে তৈরি করা হয়েছিল, অ্যাপল টাচ আইকনটা সেখানে তৈরি করতে হবে 129px × 129px ডাইমেনশনে, তবে ফাইলটা .png হলেও সমস্যা নেই। এবারে আগের কোডের মতোই হবে এবারের কোডটিও, লিখতে হবে:

বাকিটা এবারে আপনিও পারবেন ইনশাল্লাহ। 🙂

এই অংশটির জন্য helgatheviking^-কে ধন্যবাদ (মূল উৎস^)।

-মঈনুল ইসলাম
mayeenulislam.github.io

______________________________

^{পুরো টিউটোরিয়ালটা আগে, ইংরেজিতে প্রকাশ করেছিলাম StackExchange-এর WordPress Development প্রশ্নোত্তর সাইটে ১৬ মার্চ ২০১৪ তারিখে। (মূল লিংক^)}

The post ওয়ার্ডপ্রেস ফ্রন্টএন্ড ও ব্যাকএন্ডে ফেভিকন যোগ appeared first on Tuts by Mayeenul Islam.

জ্ঞানস্তর: মাধ্যমিক

লক্ষ্যণীয়: এই আলোচনায় ধরে নেয়া হয়েছে যে, পাঠকের পিএইচপি কন্ডিশনাল স্টেটমেন্ট এবং লুপ সম্পর্কে প্রাথমিক ধারণা রয়েছে।

আমি ফেসবুকে আমার অনেকগুলো ছবি একটা অ্যালবামে আপলোড করলাম, তারপর যখন অ্যালবামটা খুললাম, তখন দেখি ছবিগুলো কেমন থরে থরে সাজিয়ে রাখা হয়েছে, যেন পাশাপাশি পাঁচটা বাক্সে পাঁচটা ছবি, তারপর নিচে আবার পাঁচটা বাক্সে পাঁচটা ছবি… বেশ সুন্দর! কিংবা ধরা যাক, আমি একটা ওয়েবসাইট আছে, যেখানে আমার লেখাগুলো একটার পর একটা আসছে। এখন আমি চাচ্ছি যাতে লেখাগুলো দুই কলামে আসে – একটা লেখা বামের কলামে, তো দ্বিতীয় লেখাটা হবে ডানের কলামে, আবার তৃতীয় লেখাটা পরের লাইনে গিয়ে বসবে বামের কলামে… দারুণ হবে বিষয়টা। যারা পিএইচপি জানেন, তারা জানেন যে, এই ছবিগুলোকে একত্র করে দেখানো কিংবা লেখাগুলোকে একটার পর একটা নিয়ে এসে দেখানোর কাজটা করা হয় পিএইচপি লুপ ব্যবহার করে।

আমরা এরকম একটি অতি সাধারণ for loop নিলাম, যেখানে কিছু CSS ব্যবহার করে আমরা একটা প্রাথমিক চেহারা দাঁড় করাবো বিষয়টা বোঝার জন্য।

আমরা এজন্য কিছু CSS লিখলাম, যাতে বিষয়টা একটু বোধগম্য হয়, এই সিএসএস-এর সাথে কলামের এখনও কোনো সম্পর্ক নেই; আমরা আসলে, কলামটা যে ঠিকমতো কাজ করছে, সেটা যাতে বুঝতে পারি, তারই জন্য একটা প্রস্তুতি নিচ্ছি মাত্র।

এবারে পাতাটা যদি আমরা ব্রাউযারে রান করি, তাহলে তা দেখা যাবে এরকম:

আমরা জানি পিএইচপি লুপ দিয়ে একইরকমের কাজের পুণরাবৃত্তি করা যায়। যেমন: আমরা এখানে মাত্র একটাই content-body ডিভ ৫ বার দেখিয়েছি। আমরা আগেই বলেছি, কলাম করার জন্য এটা শ্রেফ প্রস্তুতি, এবারে আমরা এই কোড দিয়েই কলাম তৈরি করবো। লক্ষ করলে দেখবেন test নামক ক্লাস দিয়ে একটা ডিভ রেখেছি, এখানে আমরা বিভিন্ন পরীক্ষা-নিরীক্ষাগুলো করবো, যে পরীক্ষা-নিরীক্ষাগুলো আমরা ব্রাউযারে দেখবো।

২ কলাম তৈরি

কলাম তৈরি করার জন্য একটু ছোটবেলায় ঢু মেরে আসা যাক। আচ্ছা…, ভাগ অংকের কথা মনে আছে? একটু দেখা যাক। ৪-কে ২ দিয়ে ভাগ করুন। না না না না, ক্যালকুলেটর দিয়ে ভাগ করলে হবে না, একটু হাতে-কলমে করুন। করা হয়ে গেলে, এরপর ৩-কে ২ দিয়ে ভাগ করুন।

বিষয়টা কী হলো? ৪-কে ২ দিয়ে ভাগ দেয়ায় তা দেয়া গেলো, অর্থাৎ ৪, ২ দিয়ে নিঃশেষে বিভাজ্য। কিন্তু ৩-কে ২ দিয়ে ভাগ দেয়া গেলো না, কারণ তাতে ১ ভাগশেষ হিসেবে অবশিষ্ট থাকে। হ্যা, আমাদের উদ্দেশ্য আসলে ঐ ভাগ অংক শেখানো নয়, বরং ঐ ভাগশেষের সাথে আপনাকে পরিচয় করিয়ে দেয়া, কারণ এই সাধারণ একটা গাণিতিক হিসাব আমাদেরকে কলাম তৈরিতে খুব সহায়তা করবে। এবং মজার ব্যাপার হলো আপনি ক্যালকুলেটরেই ভাগশেষের হিসাব বের করতে পারবেন, তাই মাথা খাটিয়ে অংক করার ঝামেলা নেই, সুতরাং শান্তিই শান্তি!

ক্যালকুলেটরে কিংবা কম্পিউটারে গাণিতিক হিসাবে ভাগশেষকে বলা হয় modulus (উচ্চারণ: মড্যূলাস)। আর ভাগশেষের প্রতীকটা হলো %, একে বলা হয় modulo (উচ্চারণ: মড্যূলো)। অর্থাৎ 4 % 2 = 0 এবং 3 % 2 = 1। তাহলে ক্যালকুলেটরে কিভাবে তা বের করা যায়? এজন্য লাগবে সাইন্টিফিক ক্যালকুলেটর। একজন প্রোগ্রামারের জন্য কম্পিউটারেই আছে একটা ক্যালকুলেটর, সেটাকে সাইন্টিফিক মোডে খুলে নিলেই হবে। সেখানে ভাগশেষকে ইংরেজিতে লেখা আছে Mod। তাহলে করা যাক: 4 Mod 2, আর 3 Mod 2, যথাক্রমে 0 এবং 1 দেখাবে। আমরা কলাম তৈরিতে এই ভাগশেষকে খুব বেশি ব্যবহার করবো।

আমরা যেহেতু ২ কলামের জন্য কোড করছি, ২ কলাম করলে তা কীরকম হবে, সেটা দেখা যাক:

এবারে এই সংখ্যাগুলোকে ২ দিয়ে ভাগ করি, যাতে ভাগশেষ জানতে পারি: 1 mod 2 = 1; 2 mod 2 = 0; 3 mod 2 = 1; 4 mod 2 = 0; 5 mod 2 = 1। কী বোঝা গেল? যেহেতু দুটি কলাম, তাই প্রথম ভাগশেষটা ১ এবং দ্বিতীয় ভাগশেষটা শূণ্য – এই ধারা বজায় রেখেই বারবার তারা ঘুরে ঘুরে আসছে। আমরা আসলে এই সুযোগটারই সদ্ব্যবহার করে আমাদের কলামের জন্য প্রয়োজনীয় ক্লাস লোড করবো।

আমরা এবারে লুপের মধ্যে কাউন্টার বসিয়ে ভাগশেষ করে একটা মজার বিষয় দেখবো, আগের কোডের মধ্যে নিচের মতো করে কোডগুলো লিখে ফেলুন:

কোডটা লিখে পেজটা রিফ্রেশ করুন… মজাটা কি এবারে দেখা যাচ্ছে? অবশ্যই দেখা যাচ্ছে। কী দেখা যাচ্ছে?

এখানে দেখতেই পাচ্ছেন, যখন ডিভটা হচ্ছে ‌১ (মানে প্রথম ডিভ), তখন ২ দিয়ে ভাগ করলে তার ভাগশেষটা হচ্ছে ১; যখন ডিভ ২, তখন ২ দিয়ে ভাগ করলে তার ভাগশেষটা ০। প্রশ্ন হচ্ছে আমরা দুই দিয়ে ভাগ করছি কেন?

উত্তরটা খুব সহজ: কারণ আমরা দুই কলাম (2-column code) তৈরি করার জন্য কোড করছি।

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

আমরা ঐ ভাগশেষকে কাজে লাগিয়ে মাত্র একটা শর্ত দিয়ে কী দারুণভাবে কিছু ডায়নামিক লেখা যোগ করে ফেললাম। আমরা আমাদের test ডিভে সেটা দেখতে পাচ্ছি। (দেখার জন্যই তো রেখেছি ওটাকে 🙂 )

শর্তটা হলো:

যদি ডিভটাকে ২ দিয়ে ভাগ করলে ভাগশেষ শূণ্য পাও, তাহলে $class ভ্যারিয়েবলে রাখো “ second-div” কথাটা, নাহলে রাখো “ first-div” কথাটা।

আপনি ব্রাউযারে Inspect Element করলেই আসল মজাটা পাবেন, কারণ দেখতে পাবেন, আপনার content-body ক্লাসের পাশে এবারে খুব সুন্দর করে যথাক্রমে first-div এবং second-div নামে দুটো HTML ক্লাস বসে গেছে। আসলে যে, ঐ first-div আর second-div কথাটা দুটো ক্লাসের নাম আমরা এখন সেটা বুঝতে পারছি আমরা। এজন্যই নামগুলোর আগে, ডাবল কোটের ভিতরে একটা স্পেস বা ফাঁকা স্থান রেখে নিয়েছি, যাতে, যখন তা ক্লাস হিসেবে বসবে, তখন যেন অন্য আরেকটা ক্লাসের সাথে লেগে না যায়, তাহলে কাজ করবে না।

আমরা যেহেতু আমাদের ডিভের মধ্যে ডায়নামিকভাবে ক্লাস লোড করতে পেরেছি, আসল কাজটাই হয়ে গেছে আমাদের। বাকিটা এবার CSS-এর কারসাজি।

এবারে আমাদের content-body ক্লাসে দেয়া width-কে কমিয়ে অর্ধেকের একটু কম করে ফেলবো (অর্ধেক করছি কারণ পুরো ডিভ যদি 100%, তাকে 2 দিয়ে ভাগ করলে তা 50% হয়, আমরা দুটো কলামের মাঝে একটা ফাঁকা স্থান রাখার জন্য তা আরো একটু কমিয়ে এনেছি), এছাড়া এতে একটু float দিবো; আর নতুন দুটো ক্লাসে প্রোপার্টি দিবো।

ব্যস, হয়ে গেলো আমাদের কলাম। এই প্রোপার্টিগুলো একটা একটা করে দিয়ে দিয়ে প্রিভিউ দেখলে বুঝতে পারা যাবে, কিভাবে কাজটি হচ্ছে। তবুও বলছি: আমরা content-body-তে বামে ফ্লট দিয়ে width [অর্ধেকেরও কমে] কমিয়ে দিতেই ডিভগুলো বাম বরাবর পাশাপাশি এসে যাবে। তারপর শুধু ডানপাশের ডিভগুলোকে (.second-div) ডানে ফ্লট করে দিতেই আমাদের কাঙ্ক্ষিত কলাম তৈরি হয়ে গেলো। শুধু একটাই সমস্যা: এখনতো সবগুলো ডিভের উচ্চতা সমান, তাই বিষয়টা বোঝা যাচ্ছে না, কিন্তু যখন ডায়নামিক কন্টেন্ট দিয়ে ডিভগুলো ভরবে, তখন এগুলো কোনটা উচ্চতায় ছোট, কোনোটা বড় হবে। তখন second-div-এর উচ্চতা কমলেই first-div লাফ দিয়ে ডানদিকে সরে গিয়ে উপরের ঐ ফাঁকা জায়গাটা ভরতে যাবে, কারণ সব ডিভেই ফ্লট দেয়া – যা আমরা কোনোভাবেই চাই না। এজন্য আমরা প্রত্যেকটা first-div-কে বলে দিলাম, তুমি ডানে-বামে কোনোদিকেই ফ্লট মানবে না। সব মিলে যা দাঁড়ালো:

ব্যস, হয়ে গেল আমাদের ২ কলাম তৈরি। শুধু আরেকটু সুন্দর করে উপস্থাপন করার জন্য আর কোড কমিয়ে আনার জন্য এবারে কোডে কিছু যাদু প্রয়োগ করা যাক:

আমরা test ডিভটা ফেলে দিবো, ওটার কাজ শেষ। আমরা যে কন্ডিশনাল স্টেটমেন্টটা লিখেছিলাম, তাকে শর্ট ফর্মে লিখতে পারি। তাহলে…

<?php if( $divCounter % 2 == 0 ) { $class = ' second-div'; } else { $class = ' first-div'; } ?>

হয়ে যাবে…

<?php $class = ( $divCounter % 2 == 0 ? ' second-div' : ' first-div' ); ?>

আর সিএসএস-এ .content-body থেকে box-shadow’র লাইনটা বাদ দিয়ে দিই, তাহলে বর্ডারটা চলে যাবে। ব্যস হয়ে গেলো আমাদের দুই কলাম তৈরির কাজ। এবারে পূর্ণাঙ্গ কোডটি নিচের লিংক থেকে নামিয়ে মিলিয়ে নিতে পারেন।

৩ কলাম তৈরি

যারা ২ কলাম তৈরি করতে পেরেছেন, সবচেয়ে বড় কথা, বুঝে বুঝে কাজটা করতে পেরেছেন, তারা এবারে অনায়াসেই ৩ কলামের কাজটি করে ফেলতে পারেন। লজিক বা সূত্রটা এক্ষেত্রেও সমান। সেই একই ভাগশেষের অংক, শুধু পার্থক্য হলো এবারে ৩ দিয়ে ভাগ দিয়ে দিয়ে কাজ করতে হবে। আমি বরং সরাসরি কোডটা দিই, তারপর বুঝিয়ে বলি:

সাথে লাগবে এই সিএসএসগুলো:

এবারে পাতাটি ব্রাউযারে খুললেই দেখা যাবে বিষয়টা কী হচ্ছে।

এখানে লক্ষ করুন: প্রথমত বিষয়টা বুঝার জন্য for-loop-এর লিমিটটা একটু বাড়িয়ে নিয়েছি। তারপর সেই ভাগ শেষ পন্থায় আমরা ক্লাস লোড করেছি। যখন আমরা তিন কলামের জন্য কাজ করছি, তখন কলামগুলো কিভাবে পড়ছে, দেখা যাক:

এবারে ৩ দিয়ে একটা একটা করে ভাগ করা যাক, 1 mod 3 = 1; 2 mod 3 = 2; 3 mod 3 = 0; 4 mod 3 = 1; 5 mod 3 = 2; 6 mod 3 = 0; 7 mod 3 = 1। দেখা যাচ্ছে, যে সংখ্যাকে ভাগ করিনা কেন, তিনটা আলাদা আলাদা ভাগশেষ আসার পরই, আবার ঐ একই ভাগশেষই তিনবার তিনবার করে ঘুরে ঘুরে আসছে। আমরা আসলে এই ব্যাপারটাকেই টার্গেট করছি আর এর অনুপাতে প্রয়োজনীয় ডিভ ক্লাস লোড করছি।

লক্ষ করলে দেখবেন, আমরা মাত্র দুটো ক্লাস লোড করে দুটো কলামকে চিহ্নিত করেছি। কারণ, আমাদের কলাম তৈরি করাতে দ্বিতীয় কলাম কোনটি, তা না জানলেও চলছে। প্রথম কলামের জন্য লজিক আগের মতোই, ফ্লটকে ক্লিয়ার করে দিচ্ছি। তবে .content-body-তে অতিরিক্ত হিসেবে যোগ হয়েছে margin-right। ডানদিকে মার্জিন দেয়ার কারণে প্রথম কলাম থেকে দ্বিতীয় কলাম পর্যন্ত একটা ফাঁকা স্থান তৈরি হয়েছে, তেমনি দ্বিতীয় কলাম থেকে তৃতীয় কলাম পর্যন্ত ফাঁকা স্থান, তেমনি তৃতীয় কলাম থেকে ডানদিকে ফাঁকা স্থান। দেখা যাচ্ছে, এই ডানদিকে-মার্জিনের প্রভাব পড়ছে সবগুলো ডিভে, অথচ তৃতীয় কলামের ডানে আর মার্জিনের দরকার নেই আমাদের, কারণ ওপাশে আর কোনো কলাম নেই, তাই আমরা .third-div-এ margin: 0 করে দিয়েছি।

ব্যস, লজিকটা আমরা এবারে জেনে গেছি।

পুরো প্রজেক্টের সোর্স কোড নিচের লিংক থেকে নামিয়ে নিতে পারেন। সাথে, তিন কলাম দিয়ে করা নমুনা ডিযাইনও থাকছে।

৪, ৫ ইত্যাদি আরো বেশি কলাম

লজিকটা এখন আর আশা করি বুঝিয়ে বলা লাগবে না। এই এক লজিকে আমরা মনের মতো করে ডিভে ইচ্ছেমতো ক্লাস লোড করে নিতে পারি, আর সে অনুপাতে সিএসএস দিয়ে সাজিয়ে নিতে পারি আমাদের ডিভগুলোকে আলাদা আলাদা করে। শুধু সূত্রে পরির্বতনটা হবে, যে সংখ্যা দিয়ে ভাগ করা হচ্ছে, তা: কারণ ২ কলামের সময় ভাগ দিয়েছি ২ দিয়ে, ৩ কলামের সময় ৩… তো ৩৯ কলামের জন্য???

শেষ কথা

এই টিউটোরিয়ালে আমরা পিএইচপি লুপ কাজে লাগিয়ে ক্লাস লোড করে করে তাতে সিএসএসের প্রয়োগ করে কলাম তৈরি করেছি। এখানে আমরা CSS2 ব্যবহার করেছি। কিন্তু CSS3 দিয়ে, ক্লাস লোড না করেই এরকম কলাম তৈরি করা যায়। সেটা আমরা অন্য অরেকদিন দেখবো। তবে, এই লুপ দিয়েই এখনকার মতো অনেক কাজ আপনারা সেরে নিতে পারবেন।

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

-মঈনুল ইসলাম
mayeenulislam.github.io

The post পিএইচপি লুপ দিয়ে কলাম তৈরি – ২ কলাম, ৩ কলাম এবং যত ইচ্ছা appeared first on Tuts by Mayeenul Islam.