ওয়ার্ডপ্রেসের জন্য স্টাইলিশ পেজ নেভিগেশন, কোন প্লাগিন ছাড়া!!

আশাকরি সকলে খুব ভালো আছেন। আমরা জানি আমাদের ওয়ার্ডপ্রেস ব্লগের জন্য নাম্বারড পেজ নেভিগেশন একটি গুরুত্বপূর্ণ জিনিষ। অধিকাংশ থিমে ডিফল্ট ভাবে <<Prev এবং Next>> থাকে কিন্তু সেখানে নির্দিষ্ট পেজ নাম্বার থাকে না। তাই আপনি যদি চান তাহলে আপনার প্রিয় ওয়ার্ডপ্রেস ব্লগের জন্য আপনি নিজেই একটি সুদৃশ্য নাম্বারড পেজ নেভিগেশন যুক্ত করতে পারবেন কোন প্রকার প্লাগিন ছাড়া। আসুন আমরা তার একটি স্ক্রীনশট দেখি:

কি? সুন্দর না? হ্যা আর এটা যদি আপনি আপনার ওয়ার্ডপ্রেস ব্লগে যোগ করতে চান তাহলে আপনাকে যা করতে হবে হা হল:

প্রথমে আপনি আপনার ওয়ার্ডপ্রেস ব্লগের functions.php এর একটি ব্যাক আপ নিবেন। এখন আপনার ওয়ার্ডপ্রেস এর ড্যাশবোর্ডে ঢুকুন। এখান থেকে থিম সিলেক্ট করে Edit ক্লিক করুন। এরপর functions.php কে এডিট মোডে ওপেন করবেন। তার পর নিচের কোড টুকু কপি করে functions.php এর মধ্যে ?> এর পূর্বে  পেষ্ট করে সেভ করুন।

 

//---------------------------- [ Pagenavi Function ] ------------------------------//

function wp_pagenavi() {
global $wp_query, $wp_rewrite;
$pages = '';
$max = $wp_query->max_num_pages;
if (!$current = get_query_var('paged')) $current = 1;
$args['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
$args['total'] = $max;
$args['current'] = $current;

$total = 1;
$args['mid_size'] = 3;
$args['end_size'] = 1;
$args['prev_text'] = '«';
$args['next_text'] = '»';

if ($max > 1) echo '</pre>
<div>';
if ($total == 1 && $max > 1) $pages = '<span>Page ' . $current . ' of ' . $max . '</span>';
echo $pages . paginate_links($args);
if ($max > 1) echo '</div>
<pre>';
}

 

তার পর আবার একই ভাবে style.css ওপেন করে তার মধ্যে নিচের কোড গুলো কপিকরে পেষ্ট করুন এবং সেভ করুন।

 

/*-------------------------------- [ Page Navigation ] --------------------------------*/

.wp-pagenavi {
clear:both;
margin: 20px 0 30px 0;
padding-top:10px;
}

.wp-pagenavi span.pages {
border:none;
margin-right:5px;
padding:10px;
background:#2b2b2b;
color:white;
border:1px solid black;
text-decoration:none;
border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
-moz-border-radius: 3px; /* Firefox up to version 3.6 */
-webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}

.wp-pagenavi a.page,
.wp-pagenavi .page-numbers,
.wp-pagenavi span.extend,
.wp-pagenavi a.first,
.wp-pagenavi a.nextpostslink,
.wp-pagenavi a.previouspostslink,
.wp-pagenavi a.last {
border:none;
margin-right:0px;
padding:10px;
background:#2b2b2b;
color:white;
border:1px solid black;
text-decoration:none;
border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
-moz-border-radius: 3px; /* Firefox up to version 3.6 */
-webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}

.wp-pagenavi span.current,
.wp-pagenavi a:hover {
border:none;
margin-right:0;
padding:10px;
background:#fcfcfa;
color:black;
border:1px solid #454545;
text-decoration:none;
border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
-moz-border-radius: 3px; /* Firefox up to version 3.6 */
-webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}

.navigation {
padding-top:10px;
}

.navigation a {
padding:10px;
background:#454545;
text-decoration:none;
color:white;
border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
-moz-border-radius: 3px; /* Firefox up to version 3.6 */
-webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}

.navigation a:hover {
padding:10px;
background:#093f6c;
text-decoration:none;
color:white;
border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
-moz-border-radius: 3px; /* Firefox up to version 3.6 */
-webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}

 

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

সবাইকে অনেক ধন্যবাদ।

Leave a Comment