কিভাবে নিরাপদে ওয়ার্ডপ্রেস দিয়ে ভেক্টর ছবি ব্যবহার করবেন

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

এই নির্দেশিকায়, আমরা আপনার ওয়েবসাইটের সাথে আপোস না করে কীভাবে SVG বাস্তবে প্রয়োগ করতে হয় তা অন্বেষণ করব।

এমনকি আপনার ডিজাইনের অভিজ্ঞতা না থাকলেও, আপনি পেশাদার, উচ্চ-মানের ভেক্টর ছবি তৈরি করতে পারেন যাতে আপনার Divi ওয়েবসাইটটিকে দৃশ্যতভাবে পরবর্তী স্তরে নিয়ে যায়।

SVG এর ভূমিকা এবং এর ব্যবহার

SVG মানে স্কেলেবল ভেক্টর গ্রাফিক্স। এটি একটি বহুল ব্যবহৃত XML-ভিত্তিক ভেক্টর চিত্র বিন্যাস যা দ্বি-মাত্রিক ভেক্টর গ্রাফিক্স বর্ণনা করার জন্য ডিজাইন করা হয়েছে। রাস্টার ইমেজ ফরম্যাটের বিপরীতে (যেমন JPEG বা PNG) যেগুলি চিত্রগুলিকে উপস্থাপন করতে পিক্সেল ব্যবহার করে, SVG আকার, রেখা এবং রঙগুলিকে সংজ্ঞায়িত করার জন্য গাণিতিক সমীকরণ ব্যবহার করে, এটিকে একটি রেজোলিউশন-স্বাধীন এবং অত্যন্ত স্কেলযোগ্য বিন্যাস তৈরি করে।

এখানে ওয়েবসাইট ডিজাইনে SVG এর কিছু মূল ব্যবহার রয়েছে:

1. প্রতিক্রিয়াশীল গ্রাফিক্স: SVG ছবিগুলি রেজোলিউশন-স্বাধীন, যার মানে তারা গুণমান না হারিয়ে উপরে বা নিচে স্কেল করা যেতে পারে। এটি তাদের প্রতিক্রিয়াশীল ওয়েব ডিজাইনের জন্য নিখুঁত করে তোলে, যেখানে বিষয়বস্তু বিভিন্ন স্ক্রিনের আকার এবং রেজোলিউশনের সাথে মানানসই করে।
2. আইকন এবং লোগো: SVG সাধারণত ওয়েবসাইটগুলিতে আইকন, লোগো এবং অন্যান্য গ্রাফিকাল উপাদানগুলির জন্য ব্যবহৃত হয়। যেহেতু SVG ফাইলগুলি আকারে ছোট এবং সিএসএস এবং জাভাস্ক্রিপ্টের সাথে সহজেই কাস্টমাইজ করা এবং অ্যানিমেটেড করা যায়, তাই তারা ইন্টারেক্টিভ এবং দৃশ্যত আকর্ষণীয় ব্যবহারকারী ইন্টারফেস তৈরি করার জন্য একটি জনপ্রিয় পছন্দ।
3. রেটিনা এবং হাই-ডিপিআই ডিসপ্লে: রেটিনা ডিসপ্লেগুলির মতো উচ্চ-ডিপিআই (প্রতি ইঞ্চি ডট) স্ক্রিনে খাস্তা এবং তীক্ষ্ণ গ্রাফিক্স প্রদর্শনের জন্য SVG আদর্শ, যেখানে প্রথাগত রাস্টার চিত্রগুলিকে স্কেল করার সময় পিক্সেলেটযুক্ত প্রদর্শিত হতে পারে।
4. অ্যানিমেশন: SVG CSS অ্যানিমেশন বা Snap.svg এবং GreenSock অ্যানিমেশন প্ল্যাটফর্ম (GSAP) এর মতো জাভাস্ক্রিপ্ট লাইব্রেরির মতো সরঞ্জামগুলি ব্যবহার করে সরাসরি XML কোডের মধ্যে জটিল অ্যানিমেশন তৈরি করার অনুমতি দেয়। এটি একটি ওয়েবসাইটে গতিশীল এবং ইন্টারেক্টিভ উপাদান যোগ করা সম্ভব করে তোলে।
5. অ্যাক্সেসযোগ্যতা: SVG চিত্রগুলি স্ক্রিন রিডার এবং সহায়ক প্রযুক্তিগুলির কাছে সহজেই অ্যাক্সেসযোগ্য কারণ অন্তর্নিহিত XML কাঠামো বর্ণনামূলক পাঠ্যের সাথে টীকা করা যেতে পারে, যা ওয়েবসাইটগুলিকে আরও অন্তর্ভুক্ত করে এবং প্রতিবন্ধীদের জন্য ব্যবহারযোগ্য করে তোলে৷
6. এসইও সুবিধা: সার্চ ইঞ্জিন SVG ফাইলের মধ্যে বিষয়বস্তু পার্স এবং সূচী করতে পারে, যা সার্চ ইঞ্জিন ক্রলারদের আরও প্রসঙ্গ প্রদান করে সার্চ ইঞ্জিন অপ্টিমাইজেশান (SEO) উন্নত করতে পারে।
7. ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন: SVG ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহার করা যেতে পারে, যেমন চার্ট এবং গ্রাফ, যা একটি ওয়েবসাইটে কার্যকরভাবে তথ্য জানাতে সাহায্য করতে পারে।

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

ওয়ার্ডপ্রেসের সাথে ভেক্টর ইমেজ নিরাপদে ব্যবহার করার উপায়

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

ম্যানুয়ালি SVG সমর্থন যোগ করুন এবং আপনার কোড স্যানিটাইজ করুন

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

1. SVG সমর্থন সক্ষম করতে আপনার functions.php ফাইলে পরিবর্তন করুন৷
2. ওয়ার্ডপ্রেসে এসভিজি ফাইল আপলোড করা থেকে পছন্দসই ব্যবহারকারীর ভূমিকাগুলিকে অস্বীকৃতি দিন৷
3. কোনো SVG ফাইল আপলোড করার আগে, সেগুলিকে স্যানিটাইজ করুন।

সামগ্রিকভাবে, এক এবং দুই ধাপ সম্পূর্ণ করা কঠিন নয়। প্রথম ধাপ হল ফাইল ট্রান্সফার প্রোটোকল (এফটিপি) ব্যবহার করে আপনার ওয়েবসাইটের সাথে সংযোগ করা এবং ওয়ার্ডপ্রেসের রুট ফোল্ডারটি খুঁজে বের করা। সেখানে আপনার functions.php ফাইলটি খুঁজুন, এটি খুলুন এবং এতে নিম্নলিখিত কোডটি পেস্ট করুন।

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
 
  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }
 
  $filetype = wp_check_filetype( $filename, $mimes );
 
  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];
 
}, 10, 4 );
 
function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
 
function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

এটির সাহায্যে, আপনি ওয়ার্ডপ্রেসে SVG ফাইলগুলি আপলোড করতে পারেন এবং সেগুলিকে আপনার মিডিয়া লাইব্রেরিতে দেখতে পারেন, দুটি উদ্দেশ্যে পরিবেশন করতে পারেন৷ কোড যোগ করার পরে, আপনার functions.php ফাইলটি বন্ধ করুন এবং পরিবর্তনগুলি সংরক্ষণ করুন।

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

1. মিডিয়া লাইব্রেরিতে সীমাবদ্ধ বা কোনো অ্যাক্সেস নেই এমন ব্যবহারকারীদের জন্য অনন্য ব্যবহারকারীর ভূমিকা স্থাপন করুন।
2. প্রতিটি ব্যবহারকারীর ভূমিকা যে ধরনের ফাইল আপলোড করতে পারে তা সীমাবদ্ধ করতে, WP আপলোড সীমাবদ্ধতার মতো একটি প্লাগইন ইনস্টল করুন।

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

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

নিরাপদ SVG প্লাগইন ব্যবহার করে

আমরা উপরে উল্লিখিত পদ্ধতি ব্যবহার করে SVG বাস্তবায়ন কতটা কঠিন হতে পারে তা প্রদর্শন করতে চেয়েছিলাম। এটি প্রয়োজনীয় যাতে আপনি সম্পূর্ণরূপে বুঝতে পারেন যে নিরাপদ SVG প্লাগইনটি কী কাজ করে৷

নিরাপদ SVG এর জন্য প্লাগইন। সংক্ষেপে, আমরা পূর্বে যে অসুবিধাগুলি বলেছি সেগুলি এই প্লাগইন দ্বারা সমাধান করা হয়েছে, যার মধ্যে রয়েছে:

1. আপনার জন্য SVG আপলোড করা সম্ভব হচ্ছে।
2. আপনার SVGগুলি মিডিয়া লাইব্রেরিতে দৃশ্যমান কিনা তা যাচাই করা হচ্ছে।
3. নিরাপত্তা ত্রুটি এড়াতে আপনার আপলোড করা প্রতিটি SVG-এর সোর্স কোড পরিষ্কার করা। এই প্লাগইনটি মূলত প্লাগ-এন্ড-প্লে প্রকৃতির এবং ওয়ার্ডপ্রেসে এসভিজি বাস্তবায়নকে নিরাপদ করার সহজতম রুট নেয়। আপনি যদি SVG ব্যবহার করতে দৃঢ়প্রতিজ্ঞ হন তবে আমরা আপনাকে এটি চেষ্টা করার পরামর্শ দিই।

সিএসএস এবং প্লাগইন ব্যবহার করে এসভিজি অ্যানিমেটিং করা

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

• SVG গুলি অন্য যেকোন উপাদানের মতোই CSS দিয়ে ম্যানুয়ালি অ্যানিমেটেড হতে পারে।
• SVGs তৈরি এবং অ্যানিমেট করতে SVGator এর মত প্রোগ্রাম ব্যবহার করুন।

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

উপসংহার

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