কিভাবে ওয়ার্ডপ্রেস এবং jQuery দিয়ে একটি সাধারন পোস্ট রেটিং সিস্টেম তৈরি করা যায়

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

ধাপ ১ ভূমিকা 

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

তাই আমি সিদ্ধান্ত নিয়েছি কাস্টম পোস্ট রেটিং সিসটেম তৈরি করার একটি পদ্ধতি আপনাদের সাথে শেয়ার করার।  আমরা ব্যবহার করবঃ 

• সাধারন HTML মার্কাপ এবং CSS3 তাই এটি কাস্টমাইজ করতে খুব সহজ 
• Ajax calls নিয়ন্ত্রণ করতে jQuery 
• PHP এবং ডাটা নিয়ন্ত্রণ করতে hooks

ধাপ ২ HTML মার্কাপ 

আমরা আর্টিকেল এর ফুটার সেকশন এ হার্ট-আকৃতির বাটন প্রদর্শন করাতে যাচ্ছি।  তা করার জন্য, আমরা content-single.php ফাইলে মার্কাপ যোগ করব (Twenty Eleven theme এর মধ্যে)। 

1

2

<p class="post-like">

3

  <a data-post_id="POST_ID" href="#">

4

		<span class="qtip like" title="I like this article"></span>

5

	</a>

6

	<span class="count">POST_LIKES_COUNT</span>

7

</p>

মনে রাখবেন যে আমরা আমাদের ডাটা সংরক্ষনের জন্য HTML5 কাস্টম মেটা এট্রিবিউট ব্যবহার করব যাতে এটি jQuery দিয়ে নিয়ন্ত্রণ করতে খুবই সহজ হয়।  তারপর, এটি PHP দিয়ে জেনারেট হবে, যা আমরা পরের ধাপে দেখতে পাবো। 

ধাপ ৩ CSS3

আমরা CSS3 animations ব্যবহার করব কিছু ভিজ্যুয়াল ইন্টারএক্টিভিটির জন্য এবং CSS sprites ব্যবহার করব বাইরের চিত্রগুলির সংখ্যা হ্রাস করার জন্য।

1

2

article footer  .post-like{

3

	margin-top:1em

4

}

5

6

article footer .like{

7

	background:url(images/icons.png) no-repeat;

8

	width: 15px;

9

	height: 16px;

10

	display: block;

11

	float:left;

12

	margin-right: 4px;

13

	-moz-transition: all 0.2s ease-out 0.1s;

14

	-webkit-transition: all 0.2s ease-out 0.1s;

15

	-o-transition: all 0.2s ease-out 0.1s

16

}

17

18

article footer .post-like a:hover .like{

19

	background-position:-16px 0;

20

}

21

22

article footer .voted .like, article footer .post-like.alreadyvoted{

23

	background-position:-32px 0;

24

}

এই মুহুর্তে এটি এই রকম দেখানোর কথা

ধাপ ৪ jQuery

আমরা ajax অনুরোধগুলি নিয়ন্ত্রণ করার জন্য বিল্ট-ইন jQuery ব্যবহার করব।  ক্লিক করলে, jQuery কিছু পেরামিটার পাস করবে আমাদের php হেন্ডলার এর কাছে এবং কিছু রেস্পন্স হেন্ডল করবে উপযুক্ত তথ্য প্রদর্শনের জন্য। 

চলুন আমরা post-like.js নামে নতুন একটি ফাইল তৈরি করি এবং এটি js ফোল্ডারে যোগ করি।  তারপর এটি খুলুন এবং এই কোডগুলি যোগ করুনঃ 

1

2

jQuery(document).ready(function() {

3

4

	jQuery(".post-like a").click(function(){

5

6

		heart = jQuery(this);

7

8

		// Retrieve post ID from data attribute

9

		post_id = heart.data("post_id");

10

11

		// Ajax call

12

		jQuery.ajax({

13

			type: "post",

14

			url: ajax_var.url,

15

			data: "action=post-like&nonce="+ajax_var.nonce+"&post_like=&post_id="+post_id,

16

			success: function(count){

17

				// If vote successful

18

				if(count != "already")

19

				{

20

					heart.addClass("voted");

21

					heart.siblings(".count").text(count);

22

				}

23

			}

24

		});

25

26

		return false;

27

	})

28

})

ব্যাখ্যা

প্রথমে, চলুন আমরা পোস্ট আইডি উদ্ধার করি jQuery র ডাটা মেথড এর মাধ্যমে এবং এটি PHP হেন্ডেলারের কাছে পাস করি। ajax_var ভেরিয়েবলটি ডায়নামিকভাবে তৈরি করা হয়েছে PHP দিয়ে (আমরা এ সম্পর্কে বিস্তারিত জানবো পরের অংশে)।

ওয়ার্ডপ্রেস এ ajax ব্যবহারের সর্বোত্তম উপায় হচ্ছে admin-ajax.php কল করা। এটি wp-admin এ অবস্থিত এবং আপনি আপনার কলব্যাক ফাংশনগুলো হুকের মধ্যমে আবদ্ধ করতে পারেন। চলুন দেখি এটি কিভাবে কাজ করে।

ধাপ ৫ PHP এবং Hooks

আমরা কিভাবে শুরু করব? ওয়ার্ডপ্রেস হুকে আমরা কিছু ফাংশন আবদ্ধ করব এবং তারপর আমাদের স্ক্রিপ্ট enqueue করবো এবং jQuery ব্যবহার করে কিছু PHP-জেনারেটেড JavaScript ভেরিয়েবল যোগ করব।

হুক

চলুন functions.php ফাইলটি খুলি এবং আমাদের ফাংশনগুলো যোগ করা শুরু করি।

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

1

2

add_action('wp_ajax_nopriv_post-like', 'post_like');

3

add_action('wp_ajax_post-like', 'post_like');

প্রথম হুকটি বহিষ্কৃত হবে যখন ব্যবহারকারী লগড ইন থাকবে এবং অন্যটি যদি তারা না থাকে। আরো তথ্য জানতে দেখুন কিভাবে ajax সঠিক পদ্ধতিতে কাজে লাগাতে হয়ঃ ওয়ার্ডপ্রেস এ ajax ব্যবহার করার ৫ টি পরামর্শ।

আপনি দেখতে পারেন হুকের "post-like" অংশটি, যা একটি একশন প্যারামিটার আমরা পূর্বের ধাপে jQuery এর সাথে ব্যবহার করেছিলাম।

এখন আমরা আমাদের স্ক্রিপ্ট enqueue করব এবং আমাদের ভেরিয়েবলগুলি ঘোষনা করবঃ

1

2

wp_enqueue_script('like_post', get_template_directory_uri().'/js/post-like.js', array('jquery'), '1.0', true );

3

wp_localize_script('like_post', 'ajax_var', array(

4

	'url' => admin_url('admin-ajax.php'),

5

	'nonce' => wp_create_nonce('ajax-nonce')

6

));

এখানে, আমরা দুটি গুরুত্বপূর্ন প্যারামিটার নির্ধারন করবঃ

• url: admin-ajax.php তে একটি সম্পূর্ন URI
• nonce: একটি নিরাপত্তা হ্যাশ আক্রমন এবং ভুলগুলো প্রতিরোধের জন্য

আপনি প্যারামিটার দুটি jQuery দিয়ে এভাবে ব্যবহার করতে পারেনঃ ajax_var.url এবং ajax_var.nonce ।

"ওয়ার্ডপ্রেস হুক এবং admin-ajax.php হচ্ছে Ajax এর সাথে লেনদেন করার নিরাপদতম উপায়।"

ফাংশন

চলুন post_like টি যোগ করি। এটি যা করবেঃ

• nonce চেক করবে
• পোস্ট আইডি, ব্যবহারকারীর আইপি এবং কাস্টম পোস্টের মেটাগুলো উদ্ধার করবে
• ব্যবহারকারী ভোট দিয়েছে কিনা চেক করবে
• বর্তমার পোস্টের জন্য ডাটা সেভ করবে (আইপি + ভোট গননা)
• গননা করা ভ্যালু  jQuery তে পাঠাবে

1

2

function post_like()

3

{

4

	// Check for nonce security

5

	$nonce = $_POST['nonce'];

6

7

    if ( ! wp_verify_nonce( $nonce, 'ajax-nonce' ) )

8

        die ( 'Busted!');

9

10

	if(isset($_POST['post_like']))

11

	{

12

		// Retrieve user IP address

13

		$ip = $_SERVER['REMOTE_ADDR'];

14

		$post_id = $_POST['post_id'];

15

16

		// Get voters'IPs for the current post

17

		$meta_IP = get_post_meta($post_id, "voted_IP");

18

		$voted_IP = $meta_IP[0];

19

20

		if(!is_array($voted_IP))

21

			$voted_IP = array();

22

23

		// Get votes count for the current post

24

		$meta_count = get_post_meta($post_id, "votes_count", true);

25

26

		// Use has already voted ?

27

		if(!hasAlreadyVoted($post_id))

28

		{

29

			$voted_IP[$ip] = time();

30

31

			// Save IP and increase votes count

32

			update_post_meta($post_id, "voted_IP", $voted_IP);

33

			update_post_meta($post_id, "votes_count", ++$meta_count);

34

35

			// Display count (ie jQuery return value)

36

			echo $meta_count;

37

		}

38

		else

39

			echo "already";

40

	}

41

	exit;

42

}

আমরা সংরক্ষন করছি ব্যবহারকারীর আইপি এবং বর্তমান সময় একটি post_meta তে এবং ভোট গননা আরেকটিতে। সময় আমাদেরকে চেক করতে সাহায্য করবে যদি ব্যবহারকারী একটি নির্দিষ্ট সময় অতিক্রান্তের পরে পুনরায় ভোট দিতে পারে।

আপনি জিজ্ঞেস করতে পারেন বর্তমান পোস্টের জন্য যখন কোন ভোট নথিভুক্ত হবে না তখন কি হবে? বেশ, ওয়ার্ডপ্রেস আমাদের আরো একবার সাহায্য করছে এখানে, কারন update_post_meta চেক করে যে মেটা আছে কিনা এবং না থাকলে একটি তৈরি করে (এই ফাংশন সম্পর্কে আরো তথ্য জানতে ওয়ার্ডপ্রেস কোডেক্স দেখুন)।

আমরা নিরুপন করব যে একজন ব্যবহারকারীকে পুনরায় ভোট দেওয়ার জন্য কতক্ষণ অপেক্ষা করতে হয় (মিনিটে)।

1

2

$timebeforerevote = 120; // = 2 hours

এই ভেরিয়েবল নজির হিসেবে থিমের এডমিন প্যানেলে সংরক্ষিত হতে পারে, তাই এটি সহজে সম্পাদনযোগ্য।

এখন এই কোডটি যোগ করুন দেখার জন্য যদি ব্যবহারকারী ইতিমদ্ধ্যে ভোট দিয়ে থাকে।

1

2

function hasAlreadyVoted($post_id)

3

{

4

	global $timebeforerevote;

5

6

	// Retrieve post votes IPs

7

	$meta_IP = get_post_meta($post_id, "voted_IP");

8

	$voted_IP = $meta_IP[0];

9

10

	if(!is_array($voted_IP))

11

		$voted_IP = array();

12

13

	// Retrieve current user IP

14

	$ip = $_SERVER['REMOTE_ADDR'];

15

16

	// If user has already voted

17

	if(in_array($ip, array_keys($voted_IP)))

18

	{

19

		$time = $voted_IP[$ip];

20

		$now = time();

21

22

		// Compare between current time and vote time

23

		if(round(($now - $time) / 60) > $timebeforerevote)

24

			return false;

25

26

		return true;

27

	}

28

29

	return false;

30

}

"আপনার নিজেকে সবসময় জিজ্ঞেস করা উচিত কোনটি ব্যবহার যোগ্য একটি প্লাগইন ব্যবহার করে ওয়ার্ডপ্রেস কে ধীরগতির করে দেওয়া নাকি আপনার থিমে কিছু সাধারণ কোড যোগ করা।" যেখানে সম্ভব, ফাংশনালিটি অঙ্গীভূতকরন প্লাগইন দিয়ে করতে হবে, থিমের functions.php তে সরাসরি নয়।

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

ধাপ ৬ HTML মার্কআপ জেনারেট করার জন্য একটি ফাংশন তৈরি 

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

1

2

function getPostLikeLink($post_id)

3

{

4

	$themename = "twentyeleven";

5

6

	$vote_count = get_post_meta($post_id, "votes_count", true);

7

8

	$output = '<p class="post-like">';

9

	if(hasAlreadyVoted($post_id))

10

		$output .= ' <span title="'.__('I like this article', $themename).'" class="like alreadyvoted"></span>';

11

	else

12

		$output .= '<a href="#" data-post_id="'.$post_id.'">

13

					<span  title="'.__('I like this article', $themename).'"class="qtip like"></span>

14

				</a>';

15

	$output .= '<span class="count">'.$vote_count.'</span></p>';

16

17

	return $output;

18

}

আপনি ধাপ ২ এ নিবন্ধ করা কোড এই ফাংশন এর সাথে প্রতিস্থাপন করতে পারেনঃ

1

2

<?php echo getPostLikeLink(get_the_ID());?>

ধাপ ৭ শেষ নির্দেশনা

এখন ব্যবহারকারীরা পোস্টগুলিতে ভোট দিতে পারবে, আপনি হয়ত প্রতিক্রিয়া পেতে পছন্দ করবেন। উদাহরন হিসেবে, আপনি প্রদর্শিত করতে পারেন সেরা ১০ টি বেস্ট রেটেড পোস্ট।

তা করতে, আপনি এই অপশনগুলোর সাথে query_post ব্যবহার করতে পারেনঃ

1

2

query_posts('meta_key=votes_count&orderby=meta_value_num&order=DESC&posts_per_page=10');

ধাপ ৮ উপসংহার

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