ওয়ার্ডপ্রেসের wp-config.php মুছে ফেললে করণীয়

যারা ওয়ার্ডপ্রেস ব্যবহার করেন, তারা জানেন যে, ওয়ার্ডপ্রেসের wp-config.php ফাইলটি পুরো ওয়ার্ডপ্রেস ইন্সটলেশনের মাথাস্বরূপ। এই ফাইলে সামান্য ত্রুটির কারণে পুরো ওয়ার্ডপ্রেস ইন্সটলেশনই ভজকট পাকিয়ে যেতে পারে, এমনকি নতুন করে ওয়ার্ডপ্রেস ইন্সটল করা লাগতে পারে। সেকারণে এই ফাইলটি এডিট করতে খুব বেশি সাবধান থাকতে হয়, এবং ডেভলপারদেরকে এই ফাইলটি এডিট করার প্রয়োজনীয় নির্দেশনা দিয়ে দেয়া আছে (দেখুন: Codex: Editing wp-config.php^), যাতে তারা পারতপক্ষে ভুল না করেন। ওয়ার্ডপ্রেস ম্যানুয়ালি, মানে নিজের হাতে আপডেট করার ক্ষেত্রেও এমনভাবে নির্দেশনা দেয়া আছে (দেখুন: Codex: Updating WordPress^) যাতে, এই ফাইলটা তার মতো যথাস্থানে রেখেই আপনি নতুন ফাইল দিয়ে ওয়ার্ডপ্রেস আপডেট করে নিতে পারেন।

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

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

Read more…

ওয়ার্ডপ্রেস ফ্রন্টএন্ড ও ব্যাকএন্ডে ফেভিকন যোগ

ওয়ার্ডপ্রেস সাইটের সর্বত্র ফেভিকন যোগ - ন্যানোডিযাইন্‌স

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

সময়: ৫ মিনিট

ফেভিকন (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।

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

পিএইচপি লুপ দিয়ে কলাম তৈরি – ২ কলাম, ৩ কলাম এবং যত ইচ্ছা

Column Design using PHP-CSS by nanodesigns

পিএইচপি (PHP)

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

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

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

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

<?php for($counter = 0; $counter < 5; $counter++) { ?>
   <div class="content-body">
      <div class="test"></div>
      <h2>বিষয় শিরোনাম</h2>
      <p>অর্থহীন লেখা যার মাঝে আছে অনেক কিছু। হ্যাঁ, এই লেখার মাঝেই আছে অনেক কিছু। যদি তুমি মনে করো, এটা তোমার কাজে লাগবে, তাহলে তা লাগবে কাজে। নিজের ভাষায় লেখা দেখতে অভ্যস্ত হও। মনে রাখবে লেখা অর্থহীন হয়, যখন তুমি তাকে অর্থহীন মনে করো; আর লেখা অর্থবোধকতা তৈরি করে, যখন তুমি তাতে অর্থ ঢালো। যেকোনো লেখাই তোমার কাজে অর্থবোধকতা তৈরি করতে পারে, যদি তুমি সেখানে অর্থদ্যোতনা দেখতে পাও।</p>
   </div> <!-- .content-body -->
<?php } //endfor ?>

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

ওয়ার্ডপ্রেস থীম অপশন্‌স “এডিটর” অ্যাকাউন্ট উপযোগী করার উপায়

ওয়ার্ডপ্রেস থিম অপশন্‌স পাতায় এডিটরকে পূর্ণ প্রবেশাধিকার দিন।জ্ঞানস্তর: মাধ্যমিক/উচ্চস্তর

সময়: ৫ মিনিট

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

ওয়ার্ডপ্রেসে অ্যাডমিন প্যানেলে আলাদা পাতা বানিয়ে সেটিংস ডাটাবেযে সংরক্ষণের চিন্তা করলেই আপনাকে ওয়ার্ডপ্রেসের Settings API^‘র কথা চিন্তা করতে হবে। কারণ এই পদ্ধতিতে আপনি অনেক ঝামেলার বিষয়কে এড়িয়ে, হ্যাকিংয়ের সম্ভাবনা কমিয়ে আপনার সাইটের অ্যাডমিন প্যানেলে একটি সুরক্ষিত অ্যাডমিন সেকশন তৈরি করে নিতে পারবেন। কিন্তু সেটিংস এপিআই একটু সময় নিয়ে করতে হয়। যাহোক, সেটিংস এপিআই নিয়ে অন্য একদিন কথা বলা যাবে। এছাড়াও বিভিন্ন অপশন্‌স ফ্রেমওয়ার্ক আছে, যেগুলো অনুসরণ করে অনেক কম সময়ে অনেক ভালো অ্যাডমিন সেকশন তৈরি করে ফেলা যায়। কিন্তু এই পদ্ধতিগুলোর একটা সমস্যা আছে, সেটা হলো গতি। অ্যাডমিন ফ্রেমওয়ার্কগুলো সাইটকে অনেক ধীর করে দেয়। খুব ছোটখাটো কাজের জন্য তাই ফ্রেমওয়ার্কের বিকল্প হলো আমার গুরু Ian Stewart-এর Sample Theme Options^। মাত্র একটি ফাইল ব্যবহার করে দারুণ একটি থিম অপশন্‌স পেজ তৈরি করা যায় অনায়াসেই।

এরকমই একটি থিম অপশন্‌স পেজ তৈরি করে ফেলার পর যখন সাইটটা ক্লায়েন্টকে ডেলিভারি দেবার সময় ঘনিয়ে এলো, তখন বিভিন্নভাবে পরীক্ষা-নিরীক্ষা করতে গিয়ে দেখা গেলো, ক্লায়েন্টের জন্য তৈরি করা এডিটর ইউযার রোল হিসেবে লগইন করে ঐ থিম অপশন্‌স পেজ থেকে কোনো কিছু সংরক্ষণ করা যায় না। একটা এরর দেখায়:

Cheatin’ uh?

এররটা একটু বিতর্কিত, কারণ অনেকেই এধরণের ভুলকে ‘চিটারি’ বলে অপমান করা মনে করেন। যাহোক, সেটা আমাদের বিষয় না। …অনেক ঘাঁটাঘাঁটি করলাম। কিন্তু আশানুরূপ কোনো সমাধান পেলাম না। ঘাঁটতে ঘাঁটতে ওয়ার্ডপ্রেসের trac-এ একটি টিকেট^ পেয়ে গেলাম, সেখানে একটা আপাত-সমাধান পেলাম। Read more…

ওয়ার্ডপ্রেস পাসওয়ার্ড বদলান এসকিউএল ম্যানেজার না থাকলেও

ওয়ার্ডপ্রেস পাসওয়ার্ড রিসেট, পিএইচপিমাইঅ্যাডমিন ছাড়াইজ্ঞানস্তর: উচ্চস্তরের টিউটোরিয়াল

সময়: ১০ মিনিট

অতি সম্প্রতি আমার একজন ক্লায়েন্ট এমন একটি সাইট নিয়ে উপস্থিত হয়েছেন, যেখানে আগের ডেভলপার তাঁকে ঠকিয়েছে। সাইটটা যে ওয়ার্ডপ্রেসে করেছে, তাও বলেনি, সাইটের অ্যাডমিন প্যানেলের পাসওয়ার্ডও দিয়ে যায়নি। ক্লায়েন্ট আমাকে কন্ট্রোল প্যানেলের পাসওয়ার্ড দিতে পারলেও সেখানে ঢুকে আমি থ’ হয়ে গেলাম: ৫ গিগাবাইট সার্ভার স্পেস থাকাসত্ত্বেয় সেখানে phpMyAdmin কিংবা SQL Manager নেই, এখন কিভাবে ওয়ার্ডপ্রেসের ব্যাকআপ নেয়া যায়? ব্যাকআপ না নিয়ে তো নতুন কাজে হাত দেয়া যায় না…

শেষ পর্যন্ত একটা উপায় খুঁজে পেলাম, যেভাবে কোনো এসকিউএল ম্যানেজার না থাকলেও ওয়ার্ডপ্রেস পাসওয়ার্ড পরিবর্তন করে অ্যাডমিন প্যানেলে ঢোকা যাবে। নিচের কোডটি দেখুন:

<?php
//Connect to mySQL First
$connection = mysql_connect('DB_HOST','DB_USER','DB_PASSWORD');
//Select Database
mysql_select_db('DB_NAME');
//Reset password with SQL UPDATE Query
$SQL="update wp_users set user_pass=MD5('newpassword123here') where user_login='admin'";
//If everything's OK, your password will be reset
if(mysql_query($SQL)){
 echo "Your password was succesfully reset!";
}

লক্ষ করুন, আমি তৃতীয় এবং ষষ্ঠ লাইনটি নির্দেশ করেছি, কারণ এটা হলো আমাদের মূল কোড, এখানে আমাদের ওয়ার্ডপ্রেসের ডাটাবেজের তথ্যাদি যুক্ত করতে হবে। যেহেতু আপনার কাছে cPanel কিংবা কন্ট্রোল প্যানেলে ঢোকার অনুমতি আছে, তাই আপনি খুব সহজেই ওয়ার্ডপ্রেসের wp-config.php ফাইলটি খুলতে পারবেন। সেখানে এই লাইনগুলো দেখতে পাবেন:

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'database_123');
/** MySQL database username */
define('DB_USER', 'user_123');
/** MySQL database password */
define('DB_PASSWORD', 'password_123');
/** MySQL hostname */
define('DB_HOST', '127.0.0.1');

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

<?php
//Connect to mySQL First
$connection = mysql_connect('127.0.0.1','user_123','password_123');
//Select Database
mysql_select_db('database_123');
//Reset password with SQL UPDATE Query
$SQL="update wp_users set user_pass=MD5('newpassword123here') where user_login='admin'";
//If everything's OK, your password will be reset
if(mysql_query($SQL)){
 echo "Your password was succesfully reset!";
}

এখানে নির্দেশিত লাইনগুলোতে আমরা তথ্যগুলো বসিয়েছি। এছাড়া এখানে আরেকটি বিষয় হচ্ছে, আমরা পাসওয়ার্ড বসাচ্ছি ৯ নম্বর লাইনে, যেখানে আমি পাসওয়ার্ড দিয়েছি newpassword123here, আপনি আপনার মতো পাসওয়ার্ড দিয়ে নিতে পারেন। এই লাইনেরই শেষ অংশে দেখুন আমরা কোন username-এর জন্য পাসওয়ার্ড পরিবর্তন করতে যাচ্ছি, লিখেছি admin। কারণ ওয়ার্ডপ্রেস ইন্সটল করার সময়ই user_ID = 1 আর ডিফল্ট ইউযারনেম admin দিয়ে একটি অ্যাকাউন্ট তৈরি করে দেয়। সেটা যদি পরিবর্তন না করা হয়ে থাকে, তাহলে আমরা এই কোড দিয়ে সফলভাবে পাসওয়ার্ড রিসেট করতে পারবো ইনশাল্লাহ।

ব্যস, কাজ শেষ। এবারে ফাইলটা সংরক্ষণ করা যাক একটা নাম দিয়ে, হতে পারে reset.php। ফাইলটা এবারে ওয়ার্ডপ্রেস ইন্সটলেশনের root-এ (যেখানে wp-config.php ফাইলটা আছে, সেখানে) আপলোড করে দিন। তাই নাম নির্বাচনের সময় এমন নাম দেয়া যাবে না ফাইলটাতে, যা এখানকার কোনো ফাইলের সাথে সাংঘর্ষিক হয়। (ফাইলটা এখান থেকে^ নামিয়েও নিতে পারেন)

এবারে http://example.com/reset.php -এভাবে আপনার সাইটের URL দিয়ে ফাইলটা একবার ব্রাউয করুন। সব ঠিকঠাক হলে কিছুক্ষণের মধ্যেই ইনশাল্লাহ সুসংবাদ ভেসে উঠতে দেখবেন।

তাহলে এবারে http://example.com/wp-login.php-তে গিয়ে ইউযারনেম admin এবং পাসওয়ার্ড newpassword123here দিয়ে লগইন করুন।

আর এভাবে ওয়ার্ডপ্রেসের Export ফিচার ব্যবহার করে ক্লায়েন্টের সাইটের মোটামুটি একটা ব্যাকআপ নিতে সমর্থ হয়েছি আমি।

-মঈনুল ইসলাম

wz.islam@gmail.com

বিনামূল্যে ড্রপবক্সে ওয়ার্ডপ্রেস সাইট ব্যাকআপ নিন স্বয়ংক্রীয়ভাবে

বিষয়: ওয়ার্ডপ্রেস ব্যাকআপ

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

সময়: কমপক্ষে ৫ থেকে ১০ মিনিট (আপেক্ষিক)

যারা ওয়ার্ডপ্রেসে তৈরি কোনো সাইট দীর্ঘদিন থেকে নিয়মিত চালাচ্ছেন, তারাই জানেন, নিয়মিত আপডেটের কারণে কিভাবে ডাটাবেয ভারি হচ্ছে, এবং সার্ভারে নতুন নতুন ফাইল জমা হয়ে ভরাট হচ্ছে সার্ভার স্পেস। ধরা যাক, আপনি ওয়ার্ডপ্রেস ইঞ্জিন ব্যবহার করে নিজস্ব ডোমেইনে একটি ব্লগ চালাচ্ছেন; এক্ষেত্রে নিয়মিত আপডেটের কারণে ডাটাবেযও ভারি হচ্ছে, সার্ভারেও প্রচুর ফাইল জমা হচ্ছে। হঠাৎ যদি সাইট কোনো কারণে ক্র্যাশ করে বা নষ্ট হয় কিংবা হ্যাকার কিংবা স্প্যামার দ্বারা আক্রান্ত হয় – সব ধুলোয় মিশে যাবে। এজন্য দরকার নিয়মিত ব্যাকআপ। কিন্তু নৈমিত্তিকই কন্ট্রোল প্যানেলে ঢুকে হোম ডিরেক্টরি ব্যাকআপ নেয়া কিংবা যিপ-আনযিপ করে ব্যাকআপ নেয়া কিংবা এফটিপি দিয়ে ফাইল নামানোতে যেমন সার্ভারের ব্যান্ডউইড্‌থ ক্ষয় হয়, তেমনি ক্ষয় হয় আপনার লিমিটেড ডাটার ইন্টারনেট সংযোগটিও। তাই এমন একটি সমাধান শ্রেয়, যেখানে নির্দিষ্ট সময় পর পর স্বয়ংক্রীয়ভাবে সাইটের যাবতীয় ফাইল এবং ডাটাবেয কোনো একটা জায়গায় ব্যাকআপ হয়ে থাকবে, এবং আপৎকালীন সেই ব্যাকআপ থেকে তা উদ্ধার করা যাবে। এরকমই একটা সমাধান হলো WordPress Backup to Dropbox, -যে প্লাগইনটি ড্রপবক্সের অ্যাকাউন্ট ব্যবহার করে আপনার সাইটের ব্যাকআপ জমিয়ে রেখে আপনার উপকার করবে।

এজন্য প্রথমেই আপনার নিজস্ব ওয়ার্ডপ্রেস সাইটের অ্যাডমিন প্যানেলে ঢুকতে হবে (সাধারণত /wp-admin)। এবারে Plugins > Add New ক্লিক করে টেক্সট বক্সে লিখতে হবে WordPress Backup to Dropbox, তারপর তালিকা থেকে Michael De Wildt^-এর ডেভলপ করা কিনা দেখে নিয়ে, প্লাগইনটা ইন্সটল করে নিতে হবে আপনার সাইটে। অথবা ম্যানুয়ালি আপনি সার্ভারে যিপ ফাইল তুলেও ইন্সটল করে নিতে পারেন প্লাগইনটি। এক্ষেত্রে এই ঠিকানা^ থেকে প্লাগইনের যিপ ফাইলটা (.zip) নামিয়ে নিতে হবে। ইনস্টল করা শেষে প্লাগইনটি অ্যাক্টিভেট করে নিতে হবে। তাহলে অ্যাডমিন প্যানেলে WPB2D নামে নতুন একটি অ্যাডমিন মেনু (wpb2d-icon) যোগ হবে।

এবারে ভিযিট করুন www.dropbox.com^-এ। আগের অ্যাকাউন্ট না থেকে থাকলে Sign Up বোতামে ক্লিক করুন। প্রয়োজনীয় তথ্যাদি দিয়ে, এবং একটি শক্তিশালী পাসওয়ার্ড দিয়ে নতুন একটি অ্যাকাউন্ট খুলুন ড্রপবক্সে।

ধাপ ১: এবারে ওয়ার্ডপ্রেস সাইটের অ্যাডমিন প্যানেলে WPB2D > Backup Settings পাতায় যান। এখানে Authorize বোতাম চাপুন।

প্রথম ধাপে সেটিংস পাতায় আপনার প্লাগইনকে ড্রাপবক্সের সাথে অথোরাইয করতে হবে।

প্রথম ধাপে সেটিংস পাতায় আপনার প্লাগইনকে ড্রাপবক্সের সাথে অথোরাইয করতে হবে।

এতে প্লাগইনটি আপনার ড্রপবক্স অ্যাকাউন্টে ঢুকবার অনুমতি চাইবে। আপনি আপনার ড্রপবক্সের ই-মেইল ও পাসওয়ার্ড দিয়ে ড্রপবক্সে ঢুকলেই তখন সে API Authorization নিশ্চিত হতে চাইবে, Read more…

বেসিX: সিএসএস পরিচিতি

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

সিএসএস (CSS: Cascade StyleSheet) হলো ওয়েব ডিযাইনের একটি ভাষা, যা দিয়ে ওয়েবসাইটের HTML দিয়ে লেখা কাঠামোগুলোকে সাজানো হয়। ক্যাসক্যাড কথাটার মানে হলো ‘জলপ্রপাতের মতো নেমে আসা’, তবে ইলেকট্রনিক্সের পরিভাষায় এর অর্থটা এরকম: A series of components or networks, the output of each of which serves as the input for the next — বাংলা করলে দাঁড়ায়: ক্যাসক্যাড হলো এমন ধারাবাহিক কিছু, যার একটি দিয়ে অন্যটির সূত্রপাত হয়। সোজা বাংলায় সিএসএসের কোডগুলো ঝরণার মতোই ধাপে ধাপে সাজানো, যেখানে পরের কোডটা, আগের কোডের চেয়ে প্রাধান্য পায়।

রহিম { যাও: ওদিকে;}

রহিম { যাও: এদিকে;}

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

সিএসএসের ধরণ: সিএসএস-এর আসলে কোনো প্রকারভেদ নেই, সব সিএসএস-ই একইরকম। কিন্তু কিভাবে সেটা ব্যবহার করা হচ্ছে, তার হিসাবে সিএসএস তিন রকম:

  1. ইনলাইন সিএসএস বা লাইনের মধ্যবর্তী সিএসএস (Inline CSS)
  2. ইন্টারনাল সিএসএস বা অভ্যন্তরীণ সিএসএস (Internal CSS)
  3. এক্সটার্নাল সিএসএস বা বহিঃস্থ সিএসএস (External CSS)

ইনলাইন সিএসএস লেখা হয় HTML এলিমেন্ট বা ট্যাগগুলোর ভিতরে ভিতরে। এক্ষেত্রে HTML এলিমেন্টের মধ্যে লিখতে হয় style আর সিএসএস কোডগুলো লিখতে হয় সমান চিহ্নের (=) পরে ডাবল কোটের (“”) ভিতরে। এভাবে লেখার কারণটা সিএসএসের মধ্যে নয়, বরং HTML-এর মধ্যে, কারণ HTML-এ কোনো প্রোপার্টি লেখার পদ্ধতি হলো এরকম, সমান চিহ্নের পরে ডাবল কোটের ভিতরে লিখতে হয়। উদাহরণ দেখা যাক:

 <p style=”color: red; align: center;” align=”center”>Paragraph</p> 

কিংবা,

 <div style=”font-size: 12px; color: #333;”>Section is called ‘div’ in HTML</div> 

কিংবা,

 <div style=”font-weight: bold; color: black;”> The color of the text is black, but <span style=”color: red;”>the text inside this span is red</span>.</div> 

লক্ষ করুন, প্রথম উদাহরণে style-এর ভিতরে যে align লেখা হয়েছে, এটা সিএসএস, কিন্তু বাইরে যে align লেখা হয়েছে, তা এইচটিএমএল। এখানে তৃতীয় উদাহরণে লক্ষ করুন, কিভাবে লাইনের ভিতরে ভিতরে সিএসএস করা হয়েছে – এজন্যই একে ইনলাইন সিএসএস বলা হয়।

ইন্টারনাল সিএসএস, HTML এলিমেন্টের ভিতর লেখা হয় না, তবে HTML ফাইলের ভিতরে লেখা হয় বলেই একে অভ্যন্তরীণ সিএসএস বলে। এধরণের সিএসএস লেখা হয় HTML-এর <style> ট্যাগের ভিতরে। এভাবে:

<style>
div{color: black;}
</style>

ইনলাইন সিএসএস-এ যেহেতু আমি HTML এলিমেন্ট বা ট্যাগের ভিতরে ভিতরেই প্রয়োজনীয় সিএসএস কোড বসাতে পারছি, সেহেতু কোন সিএসএস কোনো ট্যাগের জন্য বসানো হচ্ছে, তা সহজেই বোঝা যাচ্ছে। কিন্তু ইন্টারনাল সিএসএস-এ সমস্যা হলো সিএসএস-কে HTML থেকে আলাদা করে লেখা হচ্ছে, তাই তখন রহিম, করিম ইত্যাদি নাম ধরে ডাকতে হয় HTML এলিমেন্টগুলোকে। অর্থাৎ HTML এলিমেন্টগুলো কিংবা তাদেরকে দেয়া id কিংবা class-এর নাম ধরে ডাকতে হয় তখন। যেমন:

<div id=”my-div” style=”font-weight: bold; color: black;”>The color of the text is black, but <span id=”this-is-span” style=”color: red;”>the text inside this span is red</span>.</div></p>
 <style>
  #my-div{color: black;}
  #this-is-span{color: red;}
 </style>

সিএসএস-এ হ্যাশ চিহ্ন (#) দিয়ে HTML-এর id-কে বোঝানো হয়ে থাকে।

ইন্টারনাল সিএসএস, HTML কোড ব্লকের যেকোনো জায়গায়ই বসানো যায়। তবে এক্ষেত্রে উত্তম হলো পাতার সমস্ত সিএসএস <head> এবং </head>ট্যাগের ভিতর বসানো। এভাবে:

<head>
 <style>
  #my-div{color: black;}
  #this-is-span{color: red;}
 </style>
</head>

এক্সটার্নাল সিএসএস-এর নাম থেকেই বুঝা যাচ্ছে, এজাতীয় সিএসএস-কে মূল HTML ফাইল থেকেই বিচ্ছিন্ন করে ফেলা হয়। আগেই বলেছি, সিএসএস-এর কোনো রকমভেদ নেই, সব সিএসএসই একই জিনিস, কিন্তু ব্যবহার ভিন্ন বলেই নাম ভিন্ন হয়েছে। তাই সাধারণ সিএসএস কোডই একটা ফাইলে লিখে, তাকে ডট সিএসএস (.css) ফাইল হিসেবে সংরক্ষণ করলেই তাকে এক্সটার্নাল সিএসএস বলা হয়।

ধরা যাক, কোনো একটা ওয়েবসাইটের মূল ফাইলটা যদি হয় index.html, তাহলে সেই HTML এলিমেন্টগুলোর যাবতীয় স্টাইল সাজানো থাকলো style.css ফাইলে। কিন্তু ইনলাইন সিএসএস কিংবা ইন্টারনাল সিএসএস করলে তো সিএসএস কোডগুলো থাকে HTML ফাইলের ভিতরেই, অথচ এক্ষেত্রে আমরা সিএসএস-এর আলাদা একটা ফাইল করেছি। এখন এই দুটোর মধ্যে সংযোগ স্থাপন করবো কিভাবে?

খুবই সহজ। এজন্য HTML-এর <head> এবং </head> ট্যাগের ভিতরে গিয়ে লিখতে হবে:

<link type=”text/css” rel=”stylesheet” href=”style.css”/>

আমরা এখানে HTML-এর <link> ট্যাগটি দিয়ে আমাদের style.css ফাইলটিকে লিংক করছি, যেখানে আমরা বলে দিচ্ছি যে, এই যে ফাইলটা লিংক করছি, তার ধরণ হলো, তাতে সিএসএস কোড text আকারে লেখা রয়েছে, এবং HTML ফাইলটার সাথে ঐ ফাইলটার সম্পর্ক (relation) হলো, ঐ ফাইলটা এই ফাইলের স্টাইলশীট – যা এই ফাইলে ডিযাইন বা স্টাইল যোগ করবে। স্টাইল ফাইলের নাম যে style-ই হতে হবে এমন কোনো কথা নেই হতে পারে styles.css, styleheet.css কিংবা abul.css, kamala.css ইত্যাদি যেকোনো কিছু। তবে style, styles, stylesheet ইত্যাদি বোধগম্য এবং সুন্দর নাম ব্যবহার করতে উৎসাহ দেয়া হয়।

সিএসএস-এর প্রাধান্য: সিএসএস-এ ব্যবহারের ভিত্তিতে করা এই তিন ধরণের মধ্যে একটা খুব মজার বিষয় লুক্কায়িত আছে, আর তা হলো প্রাধান্য বা গুরুত্ব। আচ্ছা, যদি প্রশ্ন করি: পাশের ঘরে আগুন লেগেছে, তার তাপ বেশি অনুভূত হবে, নাকি আপনার হাতে আগুন লেগেছে, তার তাপ? অবশ্যই আপনার হাতের আগুনের তাপ বেশি অনুভূত হবে, তার কারণ হলো নৈকট্য বা প্রক্সিমিটি। সুতরাং খুব সহজেই বোঝা যাচ্ছে যে, এক্সটার্নাল সিএসএস-এর চেয়ে গুরুত্ব বেশি পাবে ইন্টারনাল সিএসএস, আবার ইন্টারনাল সিএসএস-এর চেয়েও বেশি গুরুত্ব পাবে ইনলাইন সিএসএস – কারণ? কারণ ইনলাইন সিএসএস, HTML এলিমেন্টের সবচেয়ে কাছাকাছি থাকে, সেই তুলনায় ইন্টারনাল একটু দূরে, আর এক্সটার্নাল সিএসএস-এর সাথে শুধু পারিবারিক সম্পর্ক (<link rel=”stylesheet”>) আছে, কিন্তু সে থাকে বহুদূরে।
আমরা আগেই বলেছি, উপরের লাইনের সিএসএস-এর চেয়ে [ক্যাসক্যাডিং-এর কারণে] প্রাধান্য পায় তার নিচের লাইনের সিএসএস কোড। এরপর এক্সটার্নাল সিএসএস-এ যে নির্দেশনা দেয়া আছে, ইন্টারনালের নির্দেশনা তারচেয়েও বেশি প্রাধান্য পায়; আবার ইন্টারনালের চেয়ে বেশি প্রাধান্য পায় লাইনের ভিতরে ভিতরে দেয়া সিএসএস।

তবে এই সব সিএসএস-কেই অপ্রধান করেও কোনো সিএসএস প্রোপার্টিকে প্রাধান্য দিতে চাইলে? – সেটা নাহয় আরেকদিন জানবো।

-মঈনুল ইসলাম
গ্রাফিক্স ডিযাইনার অ্যান্ড ওয়েব ডেভলপার
wz.islam@gmail.com

বেসিX: কম্পিউটারে ওয়ার্ডপ্রেস ইন্সটলেশন

ভার্ষন: ওয়ার্ডপ্রেস ৩.২.১, ৩.৩, ৩.৩.১+

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

ওয়েব ডিযাইনিং-এ CMS (Content Management System)-এর মধ্যে সবচেয়ে জনপ্রিয় হলো জুমলা। কিন্তু প্রাথমিক জ্ঞান দিয়ে যারা ওয়েব ডিযাইন করতে চান, তাদের কাছে সবচেয়ে বেশি পছন্দের ওয়ার্ডপ্রেস। যারা ইন্টারনেটে WordPress.com-এ একটা ব্লগ সাইট খুলেছেন, তারা খুব আশ্চর্য হয়ে ভাবছেন, ওয়ার্ডপ্রেস তো ব্লগ! এটা ওয়েবসাইট হবে কিভাবে? হ্যা, ব্লগের ধারণাকে একটু বদলে নিয়ে ওয়ার্ডপ্রেস দিয়ে জনপ্রিয় সব ওয়েবসাইট বানানো যায়। আর তার প্রকৃষ্ট উদাহরণ আপনারা দেখতে পাবেন WordPress.org ওয়েবসাইটে (.com নয়)।

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

কিভাবে বাংলায় ভিডিও’র সাবটাইটেল লিখবেন?

অন্যান্য টিউটোরিয়াল

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

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

চলচ্চিত্রে দেখা যাবে বাংলা সাবটাইটেল, তৈরি করবো নিজেই :)

চলচ্চিত্রে দেখা যাবে বাংলা সাবটাইটেল, তৈরি করবো নিজেই :)

সাবটাইটেল ফাইল পরিচিতি:

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

সাবটাইটেল ফাইলের কার্যপদ্ধতি:

দেখা যাক একটা সাবটাইটেল ফাইল কিভাবে কাজ করে Read more…

CSS – tool-tip, acronym-এর দৃষ্টিনন্দন বিকল্প

CSS-tooltip-how-it-works
জ্ঞানস্তর: মাধ্যমিক

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

কোডটার ব্যবহার:

<acronym title=“Bangladesh Agricultural and Rural Development”>BARD</acronym>

এই কোডটা ব্যবহার করলে যখনই আপনি BARD লেখাটার উপরে মাউস আনবেন, একটু অপেক্ষা করলেই সেখানে একটা হলদে বাক্সে দেখাবে BARD-এর মানে, যা আপনি acronym-এর title-এ দিয়েছেন। 

কিন্তু যারা HTML-এর acronym ব্যবহার করে একটু ক্লান্ত, তাদের জন্য রয়েছে সিএসএস (CSS)-এর অপূর্ব একটা কৌশল, যার নাম “tool-tip”। আসুন দেখা যাক কিভাবে ব্যবহার করা যায় এটা: Read more…

Go to top
%d bloggers like this: