ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট — শুরুটা যেভাবে — পর্ব ১

ওয়ার্ডপ্রেস বেদুঈন

Image for post
Image for post

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

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

ঘুম ভাঙতে চেয়ে দেখি বাইরে রাত নেমেছে। নড়াচড়ার শব্দ পেয়ে কিনা জানি না, বাদশাহর খাস খাদেম ঘরে ঢুকল। উঠে বসলাম।
- সালাম জনাব। বাদশাহ আপনার দেখা পাবার অপেক্ষায় আছেন।
- বেশ বেশ। চলুন।

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

মুখোমুখি আরেকটা খালি কেদারা দেখালেন। বসে পড়লাম।

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

ভিমরি খেলাম, “হুজুর, এগুলো না। উনি কি কম্পিউটার চালাতে পারেন? HTML, CSS, PHP এগুলো কিছু শিখেছেন?”

বাদশাহর ছোটভাই হাবিব নিজেই এবার বলে উঠল, “এগুলো কি বলেন? মরুভূমিতে থাকি বলে কি আমরা কম্পিউটার চালানো জানব না? সবই জানি আমি।”

আমার তারপরও সন্দেহ ছিল। এটাসেটা প্রশ্ন করে বুঝলাম সে HTML, CSS, PHP সবই পারে, তবে অল্প অল্প। আরও একটু পারলে ভালমত শেখানো যেত। যাই হোক, নাই মামার চেয়ে নাকি কানা মামা ভাল। ঠিক করলাম নতুন নতুন শিখবে, বেশি ব্যাখ্যা করব না, আস্তে আস্তে শিখে নেবে। শুরুটা করিয়ে দিই।

পরদিন সকালে হাবিবকে নিয়ে কম্পিউটারে বসে গেলাম। নাম ধরে ডাকছি, কারন সে বয়সে আমার থেকে অনেক ছোট আর রাজা-বাদশাহদের আদব-কায়দা মানা আমার দ্বারা সম্ভব নয়।

প্র্যাকটিসের জন্য প্রথমে একটা ফ্রি HTML5 থিম ইন্টারনেট (freehtml5.co) থেকে নামিয়ে নিলাম। এখানে ফাইবার অপটিক কেবল দিয়ে যে স্পিড পেলাম, তা অনেক বড় বড় শহরেও পাইনি। (ডাউনলোড লিঙ্কঃ https://www.dropbox.com/s/oj1qm1uex0i5oja/magazine.zip?dl=0 )

কম্পিউটারে লোকাল সার্ভার সেটআপ করলাম xampp দিয়ে। এরপর ওয়ার্ডপ্রেস (ভার্সন ৪.৫) ইন্সটল দিলাম এখান থেকে নামিয়েঃ https://wordpress.org/latest.zip । এগুলো সে বুঝতে পারছিল না। বললাম রাতে আবার ইউটিউবের ভিডিও দেখে চেষ্টা করতে, না পারলে আবার দেখাব।

এবার ডাউনলোড করা HTML5 থিমটা রাখলাম xampp/htdocs/wordpress/wp-content/themes ফোল্ডারে। এখানেই ওয়ার্ডপ্রেসের সব থিম থাকে। এবার ব্রাউজার খুলে লিখলাম http://localhost/wordpress/wp-admin , লগিন করে ওয়ার্ডপ্রেসের অ্যাডমিন প্যানেল দেখালাম। এখান থেকেই ওয়ার্ডপ্রেসের সব কাজ পরিচালনা করা হয়। বামপাশের সাইডবার থেকে Appearance -> Themes পেজে গেলাম। মজার ব্যাপার হল, ইতিমধ্যেই ওয়ার্ডপ্রেস আমাদের থিমটা পেয়েছে, যদিও ভাঙ্গা হিসেবে।

Image for post
Image for post
থিম

প্রতিটা ওয়ার্ডপ্রেস থিমে ২টি ফাইল থাকা বাধ্যতামূলক। একটি হল index.php আর অপরটি style.css । তো আমাদের থিম ফোল্ডারে (magazine) এই style.css ফাইল তৈরি করি আর index.html ফাইলটি রিনেম করে index.php করি। style.css ফাইলের একদম শুরুতে কমেন্ট আকারে থিমের বিভিন্ন তথ্য দিতে হয়। নিচের অংশটুকু ওখানে বসালাম।

এরপর থিম ফোল্ডারে রাখলাম নিচের ছবিটি। screenshot.png নামে ১২০০x৯০০ পিক্সেলের এই ছবিটি থিমের screenshot হিসেবে Appearance পেজে দেখাবে।

Image for post
Image for post
screenshot.png

সাইডবার থেকে Appearance -> Themes পেজ রিলোড করতেই নতুন থিমটি তালিকায় দেখাচ্ছে। হাবিব বলে উঠল, “মজা তো!”

Image for post
Image for post
নতুন থিমটি তালিকায় দেখাচ্ছে

WordPress Bedouin লেখা থিমে ক্লিক করতে থিমের তথ্যাবলি ভেসে উঠল। এসব তথ্যই style.css এ দিয়েছিলাম।

Image for post
Image for post
থিমের তথ্যাবলি

Activate বাটনে ক্লিক করে থিমটি active করা হল।

Image for post
Image for post
থিম Active হবার পর

হাবিব খুবই উৎসুক, দেখবে ওয়েবসাইট। http://localhost/wordpress এ গেলাম। হাবিব চোখ বড় বড় করে বলল, “একী!”

Image for post
Image for post

আমি বললাম, “CSS, JS ফাইল পায়নি। তাই এমন দেখাচ্ছে। Enqueue করতে হবে। এর জন্য Hook বুঝতে হবে।”

“Enqueue, Hook এসব কি? কখনো তো নাম শুনিনি!”, মাথা চুলকে বলল হাবিব।

আমি হাসলাম। “আচ্ছা, ওটা পরে বুঝলেও হবে। আপাতত লিঙ্কগুলো ঠিক করে দিই। ওয়ার্ডপ্রেসে একটি ফাংশন আছে, get_template_directory_uri() । এটি echo করলে বর্তমান থিমের URI প্রিন্ট হয়”।

Index.php ফাইলটি খুললাম। যেসব জায়গায় href=” আছে, রিপ্লেস করলাম href=”<?php echo get_template_directory_uri().’/’; ?> দিয়ে। যেখানে src=” ছিল, তাও রিপ্লেস করলাম src=”<?php echo get_template_directory_uri().’/’; ?> দিয়ে।

এবার ব্রাউজার রিলোড করতেই দেখা গেল চমৎকার।

Image for post
Image for post
নতুন থিমে লিঙ্ক ঠিক করার পর

হাবিব বলল, “বাহ! কি সুন্দর! হয়ে গেল?”

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

হাবিব বলল, “জনাব! এখন তো খাবারের সময় হয়ে গেছে!”

বিশাল রোস্টের কথা ভাবতেই জিভে জল চলে এল। “বেশ। তাহলে পরশুদিন ওটা দেখাব। কাল কিছু জরুরী কাজ সারতে হবে”।

পর্ব ২ঃ পোস্ট ডায়নামিক করা, মেন্যু, লেখকের বায়ো ইত্যাদি।

লেখকঃ ওয়ার্ডপ্রেস বেদুঈন

বি.দ্র.: সকল ঘটনা ও চরিত্র কাল্পনিক। ব্যবহৃত HTML5 থিমটি copyright ফ্রি।

The Invisible Man | Machine Learning Engineer, Programmer, Tech Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store