ساخت شماره گذاری صفحات وردپرسی با افزونه WP-PageNavi

۱ دیدگاه

منتشر شده توسط hosein ramezannia در تاریخ ۲۸ بهمن ۱۳۹۶

با سلام کاربران گرامی

همیشه در اکثر وبسایت ها دیده اید که چند شماره در پایین صفحه های خود دارند 1.2.3.4و…

این شمارش های در بعضی از قالب ها نشان داده نمیشود و یا استایل خوبی ندارد اما شاید شما دوست دارید که این شماره ها را در وبسایت خود بگذارید اما کد نویسی را به طور حرفه ای و کامل و یا اصلا از کد نویسی چیزی نیاموخته اید

افزونه های زیادی برای ساختن شماره صفحه های وردپرس است که یکی از این افزونه ها WP-PageNavi است که محبوب ترین افزونه های بین کاربران است این افزونه بدون نیاز به تنظیمات پیشرفته به شما این اجازه را میدهد که شمارش صفحات در وردپرس برای خود بسازید

افزونه WP-PageNavi :

این افزونه قادر است که به شما این اجازه را دهد برای صفحات خود در وردپرس شماره هایی را بسازید که کاربر بعد از کلیک بر روی ان شماره ها بتواند به صفحه مورد نظر منتقل شود این کار کمک میکند که کاربر دیگر در سایت شما سرگردان نشود و به پست های شما دسترسی داشته باشد

اموزش افزونه WP-PageNavi :

در ابتدای کار افزونه را نصب و راهندازی کنید

بعد از نصب کردن افزونه در قسمت تنظیمت و در بخش pagenavi بروید این افزونه تنظیمات بسیار سختی ندارد

Text For Number Of Pages: از این کادر میتوانید متن برای تعداد صفحات را مشخص کنید .

Text For Current Page: از این کادر میتوانید متن برای صفحه فعلی را مشخص کنید .

Text For Page: از این کادر میتوانید متن برای صفحه را مشخص کنید .

Text For First Page : از این کادر میتوانید متن برای صفحه اصلی را مشخص کنید .

Text For Last Page :از این کادر میتوانید متن برای اخرین صفحه را مشخص کنید .

Text For Previous Page :از این کادر میتوانید مشخص کنید که گزینه برای رفتن به صفحه قبلی چه باشد .

Text For Next Page : از این کادر میتوانید مشخص کنید که گزینه برای رفتن به صفحه بعدی چه باشد .

Text For Previous : متن گزینه قبلی را مشخص کنید .

Text For Next : متن گزینه بعدیرا مشخص کنید .

Use pagenavi-css.css: این گزینه از شما میپرسد که از کد های css استفاده میکنید یا خیر .

Page Navigation Style : از این گزینه میتوانید مشخص کنید که استایل افزونه چه استایلی باشد .

Always Show Page Navigation : از این گزینه میتوانید مشخص کنید که همیشه شماره نمایش صفحه ها را نشان دهد یا خیر .

Number Of Pages To Show : تعداد صفحات برای نمایش که باید نمایش داده شوند را از اینجا مشخص کنید .

Number Of Larger Page Numbers To Show : تعداد صفحات ویژه برای نمایش .

Show Larger Page Numbers In Multiples Of : از این قسمت مشخص کنید که شمارش ها در چند ضلعی نمایش داده شوند .

استایل اختصاصی افزونه WP-PageNavi :

شاید شما استایل پیشفرض این افزونه را دوست نداشته باشید ما یک استایل جدید برای شما در نظر گرفته ایم که اختصاصی میباشد و به سادگی میتوانید انرا اجرا کنید

ابتدا فایل style.cssرا باز کنید :

.wp-pagenavi {
    clear: both;
    padding:0px 5px 15px 5px;
    direction:rtl
}
.wp-pagenavi h3 {
    font-weight:normal
}
.wp-pagenavi a, .wp-pagenavi span {
    text-decoration: none;
    background:#F9F8F2;
    border: 1px solid #ECE9D8;
    padding: 1px 6px;
    float :right;
    margin: 2px;
    -moz-border-radius: 3px;
}
.wp-pagenavi span.current {
    background:#ffffff;
    color:#666666;
    border: 1px solid #ECE9D8;
}
.wp-pagenavi a:hover {
    background:#e20030;
    border-color: #87001d;
    color:#ffffff
}
.wp-pagenavi span.current {
    font-weight: bold;
}

.wp-pagenavi {

clear: both;

padding:0px 5px 15px 5px;

direction:rtl

}

.wp-pagenavi h3 {

font-weight:normal

}

.wp-pagenavi a, .wp-pagenavi span {

text-decoration: none;

background:#F9F8F2;

border: 1px solid #ECE9D8;

padding: 1px 6px;

float :right;

margin: 2px;

-moz-border-radius: 3px;

}

.wp-pagenavi span.current {

background:#ffffff;

color:#666666;

border: 1px solid #ECE9D8;

}

.wp-pagenavi a:hover {

background:#e20030;

border-color: #87001d;

color:#ffffff

}

.wp-pagenavi span.current {

font-weight: bold;

}

بعد از وارد کردن کد بالا در فایل انرا ذخیره کنید و ببندید .

خب حالا اگر میخواهید شماره های تعداد صفحات نمایش داده شوند از کد زیر در هر جایی که باید ان شماره ها نمایش داده شوند را استفاده کنید

<div class="wp-pagenavi">
<div id="wp_page_numbers">
<ul>
    <li class="active_page"><!--?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?--></li>
</ul>
</div>
</div>