Custom Pagination for Admin $wp_query

অ্যাডমিন প্যানেলে একটা পাতায় (menu_page কিংবা submenu_page হতে পারে) একটা WP_Query() চালিয়ে কিছু তথ্য নিয়ে এসেছি। টেবিল আকারে তথ্যগুলো দেখিয়েছিও। এবং পেজিনেশনও করেছি। কিন্তু লক্ষ করলাম, পেজিনেশন কাজ করছে না। অনুসন্ধান করে দেখলাম Christine Cooper-ও একই সমস্যায় পড়েছিলেন এবং তিনি একটা সমাধানও বের করেছেন Milo’র পরামর্শকে কাজে লাগিয়ে। সমাধানটা দারুণ, এবং আমার সমস্যারও সমাধান দিলো। কিন্তু আরো কিছু বিষয়ের দরকার হয়ে পড়েছিল, তাই আমি সেটাতে আরো কাজ করে আপনাদের জন্য হাজির করলাম একটু গোছানো একটা সমাধান হিসেবে। আপনারা এটাকে আরো গুছিয়ে নিতে পারেন নিজের মতো করে।

আসলে কী হচ্ছে, কেন হচ্ছে?

এই ব্যাপারটা আগে জানা দরকার। কপি-পেস্ট সবাই করতে পারে, কোড বুঝে নিয়ে তা ব্যবহার করাটাই প্রকৃত প্রোগ্রামারের কাজ হওয়া উচিত। যা জানা গেল, তা হলো,Continue reading

গিটহাবে প্রোজেক্ট রিলিয দেয়া - tuts nano

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

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

রিলিয দেয়ার গিট পদ্ধতি

git ব্যবহার করে প্রোডাক্ট রিলিয দেয়ার পদ্ধতি হচ্ছে git tag। কমান্ডলাইনে (git bash ব্যবহার করে) কাজটা করার উপায় হচ্ছে:

git tag -a v1.0.0 -m "First Release"

এতে যেটা হবে সর্বশেষ কমিটে v1.0.0 ট্যাগটি জুড়ে যাবে। এবারে কমান্ডলাইনে ট্যাগ পুশ করে দিলেই গিটহাবে একটা ট্যাগ তৈরি হয়ে যাবে।

git push -u origin --tags

কিন্তু এতে রিলিয নোট লেখা হবে না। তাই ট্যাগ তৈরি এবং রিলিয দেয়ার জন্য গিটহাব-এ রয়েছে রিলিয ফিচার:

কিভাবে রিলিয করতে হয়

Continue reading

CSS3 দিয়ে কলাম তৈরি - nanodesigns

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

সিএসএস৩ দিয়ে তৈরি কলাম আরো পরিচ্ছন্ন, আরো সহজ। এখানে স্তবকে স্তবকে সাজানো <div>-গুলোকে কোনো ক্লাস কিংবা সিলেক্টরের তোয়াক্কা না করে শ্রেফ সিএসএস দিয়ে ধরে ধরে কলাম আকারে সাজিয়ে ফেলা যাবে। এবং রেসপন্সিভ ডিযাইনেও একই কৌশল কাজে লাগিয়ে লেআউটকে বিভিন্ন ভিউপোর্টে ইচ্ছামতো বদলে নেয়া যাবে।

আসুন দেখা যাক, কিভাবে সেটা করা হয়। আমরা সহজ করার জন্য সবটুকু কাজ একটা ফাইলের মধ্যেই করে দেখাচ্ছি:Continue reading

কমান্ডলাইনে কাজ করার মজা একজন প্রোগ্রামার খুব উপভোগ করেন। কমান্ডলাইন কী? উইন্ডোজে যেমন ডস মোডে প্রোগ্রাম লিখে কাজ করা – বিষয়টা তা-ই। ওমুক ফোল্ডারে ঢুকতে হলে লিখতে হয় cd omukমহা মসিবতের কথা! অথচ GUI পদ্ধতিতে আমরা মাত্র একটা ক্লিকে কত অনায়াসে ফোল্ডারের পর ফোল্ডারে যাতায়াত করতে থাকি। কিন্তু GUI পদ্ধতিতে কিছু কিছু কাজ আছে, যেগুলো করতে গেলে ঝামেলা পোহাতে হয়, অথচ কমান্ডলাইনে (মানে কমান্ড লিখে) খুব অনায়াসে, হয়তো মাত্র এক লাইনের একটা কোড লিখে কাজগুলো একসাথে করে ফেলা যায় – বলা ভালো তুড়ি মেরে করে ফেলা যায়। খুব সহজ একটা উদাহরণ হতে পারে, অমুক ফোল্ডারে ঢুকে সেখানকার সকল ফাইল তমুক ফোল্ডারে নিয়ে যাও। আপনি যেখানে কাজটি করতে পারবেন কমান্ডলাইনে মাত্র এক লাইনের কমান্ড লিখে, সেখানে GUI পদ্ধতিতে আপনাকে অনেকগুলো ফোল্ডারে ঘুরাঘুরি করে কাজটি করতে হবে। কমান্ডলাইন ব্যবহার করার মজাটা ব্যবহার না করেই বুঝতে চাইলে কীবোর্ড শর্টকাট ব্যবহারের সাথে তুলনা করে বুঝা যেতে পারে। খুব সহজে কীবোর্ড শর্টকাট ব্যবহার করে কপি-পেস্ট করার কমান্ডটি (ctrl+c » ctrl+v) আমরা হরহামেশা ব্যবহার করি। যারা অভ্যস্ত তারা স্বীকার করতে বাধ্য হবেন যে, এটা মাউস ব্যবহার করার চেয়ে দ্রুত। 🙂

আমরা আশা করি কমান্ডলাইনের মজা আর কার্যকারিতার শক্তিমত্তা সম্পর্কে একটা ধারণা পেয়ে গেছি। ব্যস, আমাদের আজকের আলোচনা কমান্ডলাইন নিয়ে হলেও তা অপারেটিং সিস্টেমের শেল কমান্ডলাইন না, বরং আমাদের বহুল পরিচিত, বহুল ব্যবহৃত ওপেন সোর্স ব্রাউজার Mozilla Firefox-এর কমান্ডলাইন, যার কেতাবি নাম হচ্ছে GCLI (Graphical Command Line Interpreter) – সোজা বাংলায়: কমান্ড লাইনের লেখাকে দৃষ্টিগ্রাহ্য করে কাজে রূপান্তর করার প্রোগ্রাম। এটি ফায়ারফক্সের বিল্ট-ইন ওয়েব ডেভলপার টুল-এর একটি এক্সটেনশন।

এই কমান্ডলাইনটি অতি সম্প্রতি আমার এক সহকর্মী আমাকে দেখালেন, আমি মোহাম্মদ সিরাজুল ইসলাম-এর কৃতজ্ঞতা জ্ঞাপন করছি। এটি ইউনিক্স কনসোলের মতোই অপূর্ব একটি ফিচার। এতোদিন কেন দেখলাম না, নিজেকেই শুধাই!Continue reading

গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান - ন্যানোডিযাইন্‌স

« আগের পর্ব

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

আমরা গত পর্বে বলেছিলাম মাত্র ৬টা কমান্ড দিয়ে শিখে নিব, গিট কিভাবে ব্যবহার করতে হয়। …এখুনি হাত নোংরা করার দরকার নেই, একটু ভালো করে বুঝে নিতে হবে আগে। গিট রেপোযিটরি (কিংবা রেপোজিটোরি) কী? গিট কমিট কী (কমিটি নয় কিন্তু, কিংবা কম্মিট বলারও দরকার নেই)? স্টেজ করা কী? …বুঝে বুঝে এগোলে কনসেপ্ট পরিষ্কার হবে, নতুন কিছু গ্রহণ করাও সহজ হবে।

গিট - ফোল্ডার স্ট্রাকচার

গিট – ফোল্ডার স্ট্রাকচার

ধাপে ধাপে গিট

গিট রেপোযিটরি: ধরা যাক, আমার একটা ওয়েবসাইট বানাতে হবে, যেখানে দুটো ফাইল থাকবে: (১) index.html আর (২) style.css। ওযেবসাইটের নাম “mywebsite”। এখন কী করবো? … খুব সহজ, mywebsite নামের একটা ফোল্ডার তৈরি করে তার ভিতরে ফাইল দুটো রাখবো। তাহলে আমরা যদি বলি ঐ mywebsite ফোল্ডারটা হলো আমাদের প্রজেক্ট ফোল্ডার, ইউনিক্সের ভাষায় যাকে বলে ডিরেক্টরি, আর গিটের ভাষায় যাকে বলে রেপোযিটরি (repository)। ব্যস রেপোযিটরি বুঝে ফেললাম আমরা – রেপোযিটরি হলো আমাদের প্রজেক্টের সকল ফাইল একত্র করে রাখার একটা স্থান। তাহলে দেখা যাচ্ছে, একটা ফোল্ডার আর রেপোযিটরির মধ্যে কোনো পার্থক্য নেই। …আসলে তা কিন্তু সত্যি নয় – পার্থক্য আছে।Continue reading

গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান - ন্যানোডিযাইন্‌স

গিট-এর লগোগিট (Git) হলো হাল আমলের সবচেয়ে প্রসিদ্ধ এবং জনপ্রিয় ভার্সন নিয়ন্ত্রণ সফ্‌টওয়্যার। …ভার্সন কন্ট্রোল বা ভার্সন নিয়ন্ত্রণ কী – আমরা সেটা দেখবো। আমরা যেহেতু একেবারে প্রাথমিক আলোচনা করছি, তাই অনেক বিষয়ই জানা থাকলেও একটু না একটু আলোচনা করতেই হবে, ধারণা পরিষ্কার হবে, আমরা বিষয়টা বুঝবোও সহজে। মনে রাখতে হবে, এপৃথিবীর সবকিছুর মূলে রয়েছে কিছু কনসেপ্ট বা ধারণা। ধারণাটা বুঝে ফেললে বাকি সব পানিভাত। Git নামটা বুঝার আগে আমি GitHub নামটা শুনেছিলাম, এবং এই দুটোর মধ্যে কোনো পার্থক্য করতে পারতাম না প্রথম প্রথম। আপনাদের মনেও যদি এই প্রশ্নটা থাকে, তাও আমরা পরিষ্কার করবো ইনশাল্লাহ। তবে শর্ত হলো দুটো –

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

সংক্ষেপে বলো – সহজে বলো

গিট সম্পর্কে জানতে হলে কি আপনার এইসব ফিরিস্তি পড়তে হবে বসে বসে? …মোট্টেই না।Continue reading

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

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

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

সময়: ৫ মিনিট

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

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

সিএসএস (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

সংস্করণ: ওয়ার্ডপ্রেস ৩.২.১, ৩.৩, ৩.৩.১+

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

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

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

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

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

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

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

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

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

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

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

দেখা যাক একটা সাবটাইটেল ফাইল কিভাবে কাজ করেContinue reading