আপনি আপনার ওয়েবসাইটে ওয়ার্ডপ্রেস মন্তব্য ফর্ম শৈলী পরিবর্তন করতে চান? মন্তব্য একটি ওয়েবসাইট ব্যবহারকারী জড়িত নির্মাণ গুরুত্বপূর্ণ ভূমিকা পালন করে। একটি ভাল-সন্ধানকারী ব্যবহারকারী বান্ধব মন্তব্য ফর্ম ব্যবহারকারীদের আলোচনার জন্য উত্সাহিত করে। এভাবেই আমরা কীভাবে ওয়ার্ডপ্রেস মন্তব্য ফর্মটি স্টাইল করতে পারি তার উপর চূড়ান্ত নির্দেশিকা তৈরি করেছি।

শুরু করার আগে

ওয়ার্ডপ্রেস থিম আপনার ওয়েবসাইট চেহারা নিয়ন্ত্রণ। প্রতিটি ওয়ার্ডপ্রেস থিম টেমপ্লেট ফাইল, ফাংশন ফাইল, জাভা Scripts, এবং স্টাইলশীট সহ বিভিন্ন ফাইল সহ আসে।

স্টাইলশীটগুলি আপনার ওয়ার্ডপ্রেস থিম দ্বারা ব্যবহৃত সমস্ত উপাদানগুলির জন্য CSS বিধি ধারণ করে। আপনি আপনার থিম এর শৈলী নিয়ম override আপনার নিজস্ব কাস্টম CSS যোগ করতে পারেন।

ওয়ার্ডপ্রেস মন্তব্য ফর্ম স্টাইল

সবচেয়ে ওয়ার্ডপ্রেস থিম ভিতরে comments.php নামে একটি টেমপ্লেট আছে। এই ফাইলটি আপনার ব্লগ পোস্টগুলিতে মন্তব্য এবং মন্তব্য ফর্ম প্রদর্শন করতে ব্যবহৃত হয়। ওয়ার্ডপ্রেস মন্তব্য ফর্ম ফাংশন ব্যবহার করে তৈরি করা হয়: : <?php comment_form(); ?>.

ডিফল্টরূপে, এই ফাংশনটি আপনার পাঠ্য ফর্মটি তিনটি পাঠ্য ক্ষেত্র (নাম, ইমেল এবং ওয়েবসাইট), মন্তব্য পাঠ্যের জন্য একটি টেক্সটেরিয়া ক্ষেত্র, জিডিপিআর সম্মতির জন্য একটি চেকবাক্স এবং জমা বোতাম সহ তৈরি করে।

ডিফল্ট CSS ক্লাসগুলিকে সহজেই টিভ করে আপনি সহজেই এই ক্ষেত্রগুলির প্রতিটিটি সংশোধন করতে পারেন। নীচে ওয়ার্ডপ্রেস প্রতিটি মন্তব্য ফর্ম যোগ করে যে ডিফল্ট CSS ক্লাসের একটি তালিকা।

#respond { } 
#reply-title { } 
#cancel-comment-reply-link { }
#commentform { } 
#author { } 
#email { } 
#url { } 
#comment 
#submit
.comment-notes { } 
.required { }
.comment-form-author { }
.comment-form-email { } 
.comment-form-url { }
.comment-form-comment { } 
.comment-form-cookies-consent { }
.form-allowed-tags { } 
.form-submit

কেবল এই সিএসএস ক্লাসগুলিকে টিভ করার মাধ্যমে, আপনি সম্পূর্ণরূপে আপনার ওয়ার্ডপ্রেস মন্তব্য ফর্মের চেহারা এবং অনুভূতিটি পরিবর্তন করতে পারেন।

আসুন এগিয়ে যান এবং কিছু জিনিস পরিবর্তন করার চেষ্টা করুন, যাতে আপনি কীভাবে এটি কাজ করে সে সম্পর্কে একটি ভাল ধারণা পেতে পারেন।

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

#respond { 
background: #fbfbfb;
padding:0 10px 0 10px;
}
  
/* Highlight active form field */
  
#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
   
   
#respond input[type=text]:focus,
input[type=email]:focus, 
input[type=url]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}

পরিবর্তনের পরে ওয়ার্ডপ্রেস টোয়েন্টি থিম থিমটিতে আমাদের ফর্ম কেমন লাগলো:

Highlight active comment form field

এই ক্লাসগুলি ব্যবহার করে, আপনি ইনপুট বক্সগুলির ভিতরে পাঠ্য প্রদর্শিত হওয়ার আচরণটি পরিবর্তন করতে পারেন। আমরা এগিয়ে যাব এবং লেখকের নাম এবং URL ক্ষেত্রের পাঠ্য শৈলীটি পরিবর্তন করব।

#author, #email { 
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d; 
letter-spacing:.1em;
} 
  
#url  { 
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace; 
} 

আপনি যদি নীচের স্ক্রীনশটটিতে ঘনিষ্ঠভাবে নজর রাখেন, তবে নাম এবং ইমেল ক্ষেত্রের ফন্টটি ওয়েবসাইট URL এর চেয়ে আলাদা।

Changing comment form input style

আপনি ওয়ার্ডপ্রেস মন্তব্য ফর্ম স্টাইল বাটন শৈলী পরিবর্তন করতে পারেন। ডিফল্ট জমা বাটন ব্যবহার করার পরিবর্তে, এটি কিছু CSS3 গ্রেডিয়েন্ট এবং বক্স শ্যাডো দিন।

#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
} 
  
#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a; 
}
#submit:active { 
position:relative;
top:1px;
}
Comment form button style

পরবর্তী স্তরে ওয়ার্ডপ্রেস মন্তব্য ফর্ম গ্রহণ

আপনি খুব মৌলিক ছিল যে চিন্তা হতে পারে। ওয়েল আমরা সেখানে শুরু আছে, তাই সবাই বরাবর অনুসরণ করতে পারেন।

আপনি ফর্ম ওয়ার্ডগুলি পুনর্বিন্যাস করে, সামাজিক লগইন যুক্ত করে, মন্তব্যগুলিতে সাবস্ক্রাইব করতে, মন্তব্য নির্দেশিকাগুলি, quicktags এবং আরও অনেক কিছু দিয়ে আপনার ওয়ার্ডপ্রেস মন্তব্য ফর্মটি পরবর্তী স্তরে নিতে পারেন।

ওয়ার্ডপ্রেস মন্তব্য সামাজিক যোগ করুন

আপনি যা করতে হবে প্রথম জিনিস ওয়ার্ডপ্রেস সামাজিক লগইন প্লাগইন ইনস্টল এবং সক্রিয় করা হয়।  WordPress Social Login 

অ্যাক্টিভেশন করার পরে, আপনাকে সেটিংস »WP সামাজিক লগইন পৃষ্ঠায় প্লাগইন সেটিংস কনফিগার করতে যেতে হবে।

WP Social Login settings

সামাজিক প্ল্যাটফর্মের সাথে সংযোগ করার জন্য প্লাগইনটি API কীগুলির প্রয়োজন হবে। প্রতিটি প্ল্যাটফর্মের জন্য এই তথ্যটি কীভাবে পেতে হয় তার নির্দেশাবলীর সাথে লিঙ্কগুলি দেখতে পাবেন।

আপনার API কীগুলি প্রবেশ করার পরে, আপনার পরিবর্তনগুলি সংরক্ষণ করতে সংরক্ষণ সেটিংস বোতামে ক্লিক করুন।

আপনি এখন আপনার মন্তব্য ফর্ম উপরে সামাজিক লগইন বোতাম দেখতে আপনার ওয়েবসাইট পরিদর্শন করতে পারেন।

Add social login buttons to comment form

মন্তব্য ফর্ম আগে বা পরে মন্তব্য নীতি টেক্সট যোগ করা

আমরা আমাদের সকল ব্যবহারকারীকে ভালোবাসি, এবং আমরা সত্যিই তাদের সাইটের উপর একটি মন্তব্য করার জন্য কয়েক মিনিট সময় নিয়ে তাদের প্রশংসা করি। তবে, একটি সুস্থ আলোচনা পরিবেশ তৈরি করতে মন্তব্যগুলি মডারেট করা গুরুত্বপূর্ণ।

পূর্ণ স্বচ্ছতার জন্য, আমরা একটি মন্তব্য নীতি পৃষ্ঠা তৈরি করেছি, তবে আপনি এই লিঙ্কটিকে কেবল পাদচরণে রাখতে পারবেন না।

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

আপনি যদি কোনও মন্তব্য নীতি পৃষ্ঠা যুক্ত করতে চান তবে প্রথমে আপনাকে একটি ওয়ার্ডপ্রেস পৃষ্ঠা তৈরি করতে হবে এবং আপনার মন্তব্য নীতি নির্ধারণ করতে হবে (আপনি আমাদের চুরি করতে এবং আপনার প্রয়োজন মেটাতে এটি সংশোধন করতে পারেন)।

তারপরে, আপনি আপনার থিমের functions.php ফাইল বা সাইট-নির্দিষ্ট প্লাগইনটিতে নিম্নলিখিত কোডটি যোগ করতে পারেন।

function wpbeginner_comment_text_before($arg) {
    $arg['comment_notes_before'] = "<p class='comment-policy'>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href='http://www.example.com/comment-policy-page/'>comment policy</a>.</p>";
    return $arg;
}
  
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

উপরের কোডটি এই পাঠ্য সহ নোটগুলির আগে ডিফল্ট মন্তব্য ফর্ম প্রতিস্থাপন করবে। আমরা কোডে একটি CSS শ্রেণীও যুক্ত করেছি, যাতে আমরা CSS ব্যবহার করে বিজ্ঞপ্তিটি হাইলাইট করতে পারি। এখানে আমরা ব্যবহৃত নমুনা সিএসএস:

p.comment-policy {
    border: 1px solid #ffd499;
    background-color: #fff4e5;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0px 10px 0px;
    font-size: small;
    font-style: italic;
}
Comment policy notice

আপনি যদি মন্তব্য পাঠ্য এলাকাটির পরে লিঙ্কটি প্রদর্শন করতে চান তবে নিম্নলিখিত কোডটি ব্যবহার করুন।

function wpbeginner_comment_text_after($arg) {
    $arg['comment_notes_after'] = "<p class='comment-policy'>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href='http://www.example.com/comment-policy-page/'>comment policy</a>.</p>";
    return $arg;
}
  
add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');

সেই অনুযায়ী ইউআরএল পরিবর্তন করতে ভুলবেন না, তাই এটি example.com এর পরিবর্তে আপনার মন্তব্য নীতি পৃষ্ঠাতে যায়

নীচের মন্তব্য টেক্সট ক্ষেত্র সরান

ডিফল্টরূপে, ওয়ার্ডপ্রেস মন্তব্য ফর্ম মন্তব্য পাঠ্য এলাকাটি প্রথম এবং তারপরে নাম, ইমেল এবং ওয়েবসাইট ক্ষেত্র প্রদর্শন করে। এই পরিবর্তন ওয়ার্ডপ্রেস 4.4 চালু করা হয়েছিল।

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

যদি আপনি এটি করতে চান, তবে আপনাকে যা করতে হবে তা হল আপনার থিমের functions.php ফাইল বা সাইট-নির্দিষ্ট প্লাগইনটিতে নিম্নলিখিত কোডটি যোগ করুন।

function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}
  
add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom'

এই কোডটি কেবল মন্তব্য পাঠ্য এলাকা ক্ষেত্রটি নিচের দিকে নিয়ে যায়।

Comment text area to bottom

ওয়ার্ডপ্রেস মন্তব্য ফর্ম থেকে ওয়েবসাইট (URL) ক্ষেত্র সরান

মন্তব্য ফর্ম মধ্যে ওয়েবসাইট ক্ষেত্র স্প্যামার অনেক আকর্ষণ। এটি সরানোর সময় স্প্যামারগুলি বন্ধ করবে না বা এমনকি স্প্যাম মন্তব্যগুলি কমাবে না, এটি অবশ্যই ভুল লেখক ওয়েবসাইট লিঙ্কের সাথে একটি মন্তব্য অনুমোদন করে আপনাকে সংরক্ষণ করবে।

মন্তব্য ফর্ম থেকে URL ক্ষেত্রটি সরাতে, কেবল আপনার ফাংশন.এইচপি ফাইল বা একটি সাইট-নির্দিষ্ট প্লাগইনটিতে নিম্নলিখিত কোড যোগ করুন।

function wpbeginner_remove_comment_url($arg) {
    $arg['url'] = '';
    return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');
Remove URL field from comment form

ওয়ার্ডপ্রেস মন্তব্য চেকবক্স একটি সাবস্ক্রাইব যোগ করুন

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

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

Subscribe to comments reloaded

মন্তব্য ফর্ম মধ্যে Quicktags যোগ করুন

কুইকট্যাগগুলি বিন্যাসকরণ বোতাম যা ব্যবহারকারীদের সহজেই তাদের মন্তব্যগুলি স্টাইল করতে সক্ষম করে। এতে বোতাম, ইটালিকাইজ, একটি লিঙ্ক যুক্ত করুন, বা ব্লককোট অন্তর্ভুক্ত করুন।

QuickTags যোগ করার জন্য, আপনাকে বেসিক মন্তব্য কুইকট্যাগ প্লাগইনটি ইনস্টল এবং সক্রিয় করতে হবে। Basic Comment Quicktags

QuickTags যোগ করার পরে আপনার মন্তব্য ফর্ম কিভাবে দেখাবে।

quicktags in comment form

আমরা আশা করি এই নিবন্ধটি আপনাকে আপনার ব্যবহারকারীর জন্য আরো মজাদার করার জন্য কীভাবে ওয়ার্ডপ্রেস মন্তব্য ফর্ম স্টাইল করতে শিখবে