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

یکی از خوانندگان ما اخیراً از ما پرسیده است که چگونه می توانیم صفحه بندی عددی را در صفحه وبلاگ WPBeginner اضافه کنیم. مضامین پیش فرض وردپرس و بسیاری از تم های دیگر پیوندهای صفحه بندی را با اضافه کردن پیوندهای قدیمی تر و پیوندهای جدیدتر در پایین صفحه بایگانی وردپرس خود نمایش می دهند. با این حال ، سایت های وردپرسی بسیاری وجود دارند که از صفحه بندی عددی مانند WPBeginner استفاده می کنند. از تجربه ما ، صفحه بندی عددی کاربر پسند تر ، جذاب تر و سئو دوستانه است. پیشرفته ترین چارچوب های قالب WordPress مانند Genesis دارای یک ویژگی داخلی برای افزودن صفحه بندی عددی است. در این مقاله ما به شما نحوه افزودن صفحه بندی عددی در قالب وردپرس خود را نشان خواهیم داد. هدف این است که پیوندهای پیش فرض صفحه بندی قدیمی و جدید را در پایین صفحات بایگانی جایگزین کنید و به راحتی بتوانید شماره صفحه را هدایت کنید.

Difference between default WordPress navigation and Numeric Pagination

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

افزودن صفحه بندی عددی به صورت دستی در مضامین وردپرس h4>

ابتدا به شما نشان خواهیم داد که چگونه صفحه بندی عددی را به صورت دستی در مضامین وردپرس خود اضافه کنید. این به نفع کاربران پیشرفته ما و کاربرانی است که در حال یادگیری توسعه طرح زمینه هستند یا می خواهند این کار را بدون اتکا به افزونه شخص ثالث انجام دهند. با افزودن کد زیر در پرونده توابع.php موضوع خود شروع می کنیم.

توجه: این کد از چارچوب پیدایش که ما در سایت خود استفاده می کنیم. اگر از Genesis استفاده می کنید ، دیگر نیازی به این کد یا پلاگین ندارید.


تابع wpbeginner_numeric_posts_nav () {

if (تک_نفری است)
برگشت؛

$ wp_query جهانی؛

/ ** اگر فقط 1 صفحه وجود دارد اعدام را متوقف کنید * /
if ($ wp_query-> max_num_pages  max_num_pages)؛

/ ** افزودن صفحه فعلی به آرایه * /
اگر ($ paged> = 1)
$ links [] = $ paged؛

/ ** صفحات اطراف صفحه فعلی را به آرایه اضافه کنید * /
اگر ($ paged> = 3) {
$ links [] = $ paged - 1؛
$ links [] = $ paged - 2؛
}

اگر (($ paged + 2)  
    “. ” n”؛

    / ** لینک پست قبلی * /
    if (دریافت_پیوندهای_پیشین_لینک) ()
    printf (‘

  • ٪ s
  • ‘. ” n”، get_previous_posts_link ())؛

    / ** پیوند به صفحه اول ، بعلاوه در صورت لزوم بیضی ها * /
    if (! in_array (1 ، $ پیوند)) {
    $ class = 1 == $ صفحه بندی شده؟ ‘class = “فعال” “:”؛

    printf (‘

  • ٪ s
  • ‘. ” n”، $ class، esc_url (get_pagenum_link (1))، ‘1’)؛

    if (! in_array (2 ، $ پیوند))
    echo ‘

  • ‘؛
    }

    / ** پیوند به صفحه فعلی ، بعلاوه 2 صفحه در هر جهت در صورت لزوم * /
    مرتب سازی ($ پیوندها)؛
    foreach ((آرایه) $ link به عنوان $ link) {
    $ class = $ paged == $ پیوند؟ ‘class = “فعال” “:”؛
    printf (‘

  • ٪ s
  • ‘. ” n”، $ class، esc_url (get_pagenum_link ($ link))، $ link)؛
    }

    / ** پیوند به صفحه آخر ، به علاوه در صورت لزوم بیضوی ها * /
    if (! in_array (حداکثر $ ، $ پیوند)) {
    if (! in_array (حداکثر $ – 1 ، $ پیوند))
    echo ‘

  • ‘. ” n”؛

    $ class = $ paged == $ max؟ ‘class = “فعال” “:”؛
    printf (‘

  • ٪ s
  • ‘. ” n”، $ class، esc_url (get_pagenum_link ($ max))، $ max)؛
    }

    / ** لینک ارسال بعدی * /
    if (get_next_posts_link ())
    printf (‘

  • ٪ s
  • ‘. ” n”، get_next_posts_link ())؛

    echo ‘

‘. ” n”؛

}

در WPBeginner ، ما از همین کد برای صفحه بندی عددی در صفحات بایگانی خود استفاده می کنیم (به عنوان مثال وبلاگ ما ، یا آموزش های WordPress صفحه دسته بندی). کاری که این کد انجام می دهد این است که تعداد صفحات را بازیابی می کند و لیستی از پیوندهای شماره دار را تهیه می کند. برای افزودن این مورد در الگوهای خود ، باید برچسب الگوی زیر را در index.php ، archive.php ، category.php و هر الگوی صفحه بایگانی موضوع خود اضافه کنید.


اکنون که لیست صفحات شماره گذاری شده خود را دریافت کردیم ، باید این لیست را سبک کنیم. ما می خواهیم لیست را به صورت بلوک خطی نشان دهیم که صفحه فعال با رنگ پس زمینه دیگری برجسته شود. برای دستیابی به این هدف ، بیایید ادامه دهیم و موارد زیر را در پرونده style.css قالب خود اضافه کنیم:

ناوبری لی ،
.navigation li a: شناور ،
.navigation li.active a ،
.navigation li.disabled {
رنگ: #fff؛
دکوراسیون متن: هیچ؛
}

.navigation li {
نمایش: درون خطی ؛
}

ناوبری در یک ،
.navigation li a: شناور ،
.navigation li.active a ،
ناوبری li.disabled {
background-color: # 6FB7E9؛
شعاع مرز: 3px؛
مکان نما: اشاره گر؛
بالشتک: 12px؛
بالشتک: 0.75rem؛
}

.navigation li a: شناور ،
.navigation li.active a {
background-color: # 3C8DC5؛
}

آنجا داری. ما در موضوع خود لیستی از صفحه بندی عددی داریم که عالی به نظر می رسد.

Manually adding numeric pagination to WordPress themes without a plugin

افزودن صفحه بندی عددی در وردپرس با استفاده از WP-PageNavi

حال بیایید نگاهی به نحوه افزودن صفحه بندی عددی در قالب WordPress خود با استفاده از یک افزونه موجود به نام WP-PageNavi بیندازیم. اولین کاری که باید انجام دهید نصب و فعال سازی است افزونه WP-PageNavi . برای پیکربندی تنظیمات افزونه ، پس از فعال کردن افزونه به تنظیمات »PageNavi بروید.

Configuring WP-PageNavi settings

در صورت تمایل می توانید تنظیمات صفحه پیش فرض متن و عدد را با صفحه خود تنظیم کنید. با این حال ، تنظیمات پیش فرض باید برای اکثر وب سایت ها کار کند.

در مرحله بعدی ، باید یک برچسب الگو در قالب وردپرس خود اضافه کنید. به پوشه طرح زمینه خود بروید و خطوط مربوط به صفحه بندی جدیدتر و جدید را در الگوهای صفحه بایگانی خود پیدا کنید: index.php ، archive.php و سایر پرونده های الگو بایگانی. برچسب الگوی زیر را اضافه کنید تا جایگزین برچسب های قبلی_پیوندها و پیوندهای قبلی و پیوندهای بعدی شود.

  

هنگامی که قطعه wp_pagenavi را اضافه کردید ، صفحه بندی عددی به این شکل است:

Default view of wp-pagenavi's numeric pagination

اگر می خواهید رنگ و سبک صفحه بندی عددی در wp-pagenavi را تغییر دهید ، باید به تنظیمات »صفحهNavi بروید. گزینه استفاده از Use pagenavi-css.css را بردارید و تغییرات را ذخیره کنید. اکنون به افزونه ها »ویرایشگر بروید. از منوی کشویی افزونه را برای ویرایش انتخاب کنید ، WP-PageNavi را انتخاب کنید و بر روی دکمه انتخاب کلیک کنید. ویرایشگر پرونده های پلاگین را در نوار کناری سمت راست بارگیری می کند. بر روی pagenavi-css.css کلیک کنید تا آن را در ویرایشگر باز کنید و سپس محتوای پرونده را کپی کنید.

Copy the contents of pagenavi-css file

در مرحله بعدی ، باید به Appearance »Editor بروید و محتوای pagenavi-css.css را در پرونده style.css قالب خود وارد کنید. اکنون می توانید از اینجا رنگ بندی و سبک را تغییر دهید. دلیل اینکه ما مطالب css پلاگین را در صفحه سبک theme کپی کردیم ، جلوگیری از از دست دادن تغییرات سبک در صورت بروزرسانی افزونه است. در اینجا یک نسخه کمی تغییر یافته از صفحه بندی عددی وجود دارد ، در صورت تمایل از آن استفاده کنید و آن را در طرح زمینه خود تغییر دهید.


.wp-pagenavi {
روشن: هر دو؛
}

.wp-pagenavi a ، .wp-pagenavi span {
رنگ: #FFF؛
دکوراسیون متن: هیچ؛
background-color: # 6FB7E9؛
حاشیه: 1 پیکسل جامد # B2D1E5؛
بالشتک: 5px 5px؛
حاشیه: 2px؛
}

.wp-pagenavi a: شناور ، .wp-pagenavi span.current {
حاشیه رنگ: # E9F2F9؛
background-color: # 6FB7E9؛
}

.wp-pagenavi span.current {
font-weight: پررنگ؛
background-color: # 3C8DC5؛
}

شکل ظاهری اینگونه است:

Customized PageNavi CSS

مثل همیشه باید با CSS آزمایش کنید. هدف باید این باشد که صفحه بندی عددی را با ظاهر و احساس رنگ وب سایت خود مطابقت دهید ، به طوری که به زیبایی ترکیب شود و به عنوان یک مورد عجیب و غریب قرار نگیرد.

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

منبع:
https://www.wpbeginner.com/wp-themes/how-to-add-numeric-pagination-in-your-wordpress-theme/.

دیدگاهتان را بنویسید