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

হালনাগাদ: জুন ৪, ২০১৬: ওয়ার্ডপ্রেস ৪.৩ সংস্করণ থেকে কাস্টোমাইযার ব্যবহার করে লগো আপলোডের সুবিধা যোগ করা হয়েছে এবং এই লগোই সাইটের জন্য ফেভিকনের কাজ করে। সুতরাং এই টিউটোরিয়ালটি অনুসরণের আগে নিশ্চিত হয়ে নিন, আপনার সাইটে লগো-সুবিধাটি থাকাসত্ত্বেয় আপনি এটি ব্যবহার করতে চান। ধন্যবাদ।

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।

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

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

Continue reading

by ·1 Comment
Column Design using PHP-CSS by nanodesigns

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

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

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

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

PHP ব্যবহার করে লুপ চালিয়ে লেখা দেখানো

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

Continue reading

by ·0 Comments
ওয়ার্ডপ্রেস থিম অপশন্‌স পাতায় এডিটরকে পূর্ণ প্রবেশাধিকার দিন।

জ্ঞানস্তর: মাধ্যমিক/উচ্চস্তর
সময়: ৫ মিনিট

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

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

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

Cheatin’ uh?

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

সমাধানটা হলো ঐ পাতা ব্যবহারকারীর সক্ষমতা (capabilities) হিসেবে যদি edit_theme_options‘র বদলে manage_options করে দেয়া যায়, তাহলেই সব সমাধান হয়ে যায়। অর্থাৎ theme-options.php ফাইলের add_theme_page() ফাংশনটিকে যদি নিচের মতো করে লেখা যায়:

Continue reading

by ·1 Comment
ওয়ার্ডপ্রেস পাসওয়ার্ড রিসেট, পিএইচপিমাইঅ্যাডমিন ছাড়াই

জ্ঞানস্তর: উচ্চস্তরের টিউটোরিয়াল

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

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

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

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

Continue reading

by ·6 Comments

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

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

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

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

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

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

Continue reading

by ·1 Comment

ফটোশপ basiX (প্রাথমিক জ্ঞান)

ভার্ষন: ফটোশপ ৭ (এবং সমমান)

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

ফটোশপ ৭-এর ওয়ার্কপ্লেস পরিচিতি
স্ক্রিনশট ০১.১: ফটোশপ ৭-এর ওয়ার্কপ্লেস পরিচিতি (ছবিটা ক্লিক করে মূল রেযোল্যুশনে খুলুন)

চিত্র ১ থেকে আমরা পুরো উইন্ডো’র একটা পরিচিতি পেয়ে যাবো। নিচে সেগুলোর সংক্ষিপ্ত পরিচিতি দেয়া হলো (এগুলোর বিস্তারিত আমরা ভবিষ্যতে জানবো, ইনশাল্লাহ):

টাইটেল বার: নাম শুনেই বোঝা যাচ্ছে এখানে দেখা যাবে পরিচিতিমূলক নাম বা টাইটেল। সবচেয়ে উপরের অংশটিতেই তা থাকে। যেহেতু আমাদের সফ্‌টওয়্যারের নাম ফটোশপ, তাই এখানে টাইটেল বারে লেখা Adobe Photoshop।

Continue reading

by ·0 Comments

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

ভার্ষন: ফটোশপ (যেকোনো ভার্ষন)

আজকে আমরা জানবো কিভাবে একটা সাদাকালো (Grayscale) ছবিকে রঙিন করা যায়। ফটোশপে আমাদেরকে সেই সাদাকালো ছবিটাকে খুলে নিতে হবে। এবারে দেখতে হবে, ছবিটা কোন কালার মোডে আছে: RGB, নাকি Grayscale। এটা দেখার সহজ পদ্ধতি হলো যে ছবিটা খোলা হলো, তার উপরের রিবনের লেখাটা পড়া। যদি ব্যাপারটা পরিষ্কার না হয়, তাহলে এই পদ্ধতি: Image > Mode, দেখুন টিক চিহ্ন কিসে দেয়া। যদি সেটা RGB-তে হয়, তাহলে আমাদের আর কিছুই করা লাগবে না। যদি সেটা Grayscale কিংবা অন্য কোনো অপশনে থাকে, তাহলে সেটাকে RGB-তে নিয়ে আসতে RGB’র উপর একটা ক্লিক করতে হবে। এটা করতে হবে এজন্য যে, RGB মোড দিয়ে রঙিন ছবিকে বোঝানো হয়, আর, আমরা যখন একটা ছবিকে রং করবো, তখন সেখানে বিভিন্ন রং যেন দেখা যায়।

যাহোক, এবারে লেয়ার প্যালেটে (লেয়ার প্যালেট না দেখা গেলে Window > Layers) একটা নতুন লেয়ার নিতে হবে সাদাকালো ছবিটার ব্যাকগ্রাউন্ড লেয়ারটার উপরে (Shift + Ctrl + N)। এবারে লেয়ার প্যালেটে এই নতুন লেয়ারটি সিলেক্ট থাকা অবস্থায় [ছবিতে দেখানোমতে] Normal mode থেকে লেয়ারটিকে Color মোডে নিয়ে যেতে হবে। আমরা এই লেয়ারটাতে এখন যা রং দিবো, সাদাকালো ছবিটা সেই রঙে রাঙতে থাকবে।

Continue reading

by ·0 Comments

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

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

ভার্ষন: ফটোশপ (যেকোনো ভার্ষন)

ফটোশপে File > New (Ctrl + N) ক্লিক করে নতুন একটি ডকুমেন্ট নিন। আমাদের মোটামুটি আকারের একটা ডকুমেন্ট হলেই কাজ চলবে, তাই আমরা Width: 400, Height: 200, Resolution: 72 pixels/inch দিয়ে RGB মোডে একটা ডকুমেন্ট নিয়েছি। এবারে টুলস প্যালেট থেকে Rectangle Tool (U) সিলেক্ট করে [Shape layers মোডে] ডকুমেন্টের সাদা জমিনে একটা আয়তক্ষেত্র আঁকবো (ছবিতে যেমনটা দেখানো হয়েছে)। এবারে নতুন যে লেয়ারটি তৈরি হয়েছে তার ডানদিকে ডাবল ক্লিক করে এই লেয়ারের স্টাইল চালু করতে হবে (লেয়ার প্যালেটের নিচে বামদিকে f লেখাটিতে ক্লিক করেও ব্লেন্ডিং অপশন চালু করা যায়) (ফটোশপ সিএস-এ লেয়ারের বাম দিকের থাম্বনেইলে ক্লিক করতে হবে)।

 ব্লেন্ডিং মোডে Gradient Overlay সিলেক্ট করতে হবে। সেখানে Gradient-এর সাদা-কালো শেডটাতে একবার ক্লিক করতে হবে। এবারে Gradient Editor-এর লম্বা বারটির বাম দিকের নিচের তীরটাতে ক্লিক করে কালার কোড হিসেবে #949494 দিয়ে OK করুন, আর ডান দিকের তীরে ক্লিক করে কালার কোড দিন #d1d1d1, OK করে বেরিয়ে আসুন। ব্লেন্ডিং মোড চালু থাকা অবস্থায় এবারে Drop Shadow অপশনে ক্লিক করুন। সেখানে Blend mode: Multiply, রং থাকবে কালো (#000000), Opacity: 20%, Use Global Light-এর টিক চিহ্ন তুলে দিয়ে Angle দিন 90 degree। এবারে Distance: 1, Spread: 0, Size:0 দিয়ে OK করে ব্লেন্ডিং প্রয়োগ করুন। ব্যস, আপনার বার এখন প্রস্তুত। এবারে এই বারের উপর আমরা খোদাই করা লেখা লিখবো।

Continue reading