چگونه به کاربران اجازه دهیم به صورت پویا تعداد پست های هر صفحه را در وردپرس تغییر دهند

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

در این آموزش جدید، نحوه دستیابی به این قابلیت را خواهیم آموخت. برای این نمایش، من روی یک نصب محلی با موضوع کودک کار خواهم کرد بیست و بیست و یک (نسخه 1.6 در زمان نگارش این مقاله). با این حال، می‌توانید به راحتی کدی را که من در اینجا ارائه می‌دهم در قالب‌های زمینه سفارشی خود بگنجانید.

در اینجا یک ویدیوی سریع وجود دارد که عملکرد مورد انتظار را نشان می دهد:

توجه داشته باشید که چگونه هنگام تغییر گزینه انتخاب شده، URL یک پارامتر اضافی دریافت می کند.

آیا این تمرین خوبی به نظر می رسد؟ پس بیایید شیرجه بزنیم!

1. تعداد پست های نمایش داده شده در هر صفحه را پیکربندی کنید

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

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

2. ایجاد چند پست

برای آزمایش این به مقداری محتوا نیاز داریم. در مورد من، من 35 پست ایجاد کرده ام.

3. PHP و جاوا اسکریپت مورد نیاز را به تم خود اضافه کنید

همانطور که قبلاً اشاره کردم، برای این مثال، یک محیط محلی راه‌اندازی می‌کنم و با یک تم کودک از موضوع بیست و یکم کار می‌کنم. من وب سایت محلی خود را نام می برم زمین بازی. من فرض می کنم که شما با نحوه ساخت آشنا هستید تم های کودک، بنابراین از آن مراحل صرف نظر می کنم و فقط در مورد قسمت هایی که مسئول ساخت عملکرد هدف هستند صحبت می کنم.

شما می توانید تمام فایل های تم کودک را در اینجا پیدا کنید مخزن GitHub در صورتی که می خواهید آن را نصب کنید و آن را به عنوان تم فعال خود دنبال کنید.

در اینجا ساختار تم آن است:

کشویی را ایجاد کنید

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

در اینجا مراحلی وجود دارد که ما دنبال خواهیم کرد:

• پیش فرض را بگیرید پست در هر صفحه مقدار (6) و چند مضرب از این مقدار (12، 18، 24) تولید کنید. البته در اینجا می توانید مقادیری را مستقل از پیش فرض ارسال کنید posts_per_page گزینه.
• تمام این مقادیر تولید شده را در داخل ذخیره کنید $posts_to_show آرایه.
• ایجاد یک select عنصر با گزینه هایی که از مقادیر آرایه می آیند.
• مقدار هر گزینه URL فعلی خواهد بود (ارزش $_SERVER['REQUEST_URI']) با اضافی posts_to_show پارامتر به آن اضافه شده است. برای رسیدن به این هدف، از add_query_arg() عملکرد.
• افزودن selected بر اساس مقدار the به گزینه مناسب نسبت دهید posts_to_show پارامتر.

در اینجا کد PHP مورد نیاز است:

<?php
$default_posts_per_page = (int) get_option( 'posts_per_page' );
$posts_to_show          = array( $default_posts_per_page, $default_posts_per_page * 2, $default_posts_per_page * 3, $default_posts_per_page * 4 );
?>

<select class="posts-per-page">
  <?php
  foreach ( $posts_to_show as $number ) :
    $selected = isset( $_GET['posts_to_show'] ) && (int) $_GET['posts_to_show'] === $number ? 'selected' : '';
	?>
    <option value="<?php echo esc_url( add_query_arg( 'posts_to_show', $number ) ); ?>" <?php echo $selected; ?>>
      <?php echo $number; ?>
    </option>
  <?php endforeach; ?>							
</select>

و نشانه گذاری ایجاد شده:

بسته به ساختار تم شما، این کد می تواند در مکان های مختلفی وجود داشته باشد. در مورد من، من آن را در dynamic-posts-per-page.php فایل. در مرحله بعد، من این فایل را در مناطقی که به این قابلیت نیاز دارم اضافه می کنم. از آنجایی که در صفحه اصلی، وبلاگ و بایگانی به آن نیاز دارم، موضوع اصلی را لغو می کنم index.php و archive.php فایل ها به شرح زیر

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

در هر صورت، یک قانون کلی خوب این است که داده های ورودی (و به طور کلی آنچه را که خروجی می شود) پاکسازی کنیم، به خصوص زمانی که کنترل کاملی بر آن نداریم، تا از حملات رایجی مانند XSS (اسکریپت بین سایتی). خوشبختانه وردپرس دارای انواع مختلفی است توابع داخلی برای این هدف، با این حال همیشه می‌توانیم از دیگر توابع داخلی PHP نیز استفاده کنیم. به عنوان مثال، برای اینکه به شما ایده بدهم، در کد بالا از عبارت استفاده کردم esc_url() تابع فرار از URL خروجی.

پرس و جو اصلی را تغییر دهید

برای تغییر پیش فرض posts_per_page ارزش گذاری کنید و پست های صحیح را بر اساس انتخاب کاربران نشان دهید، ما از مزایای آن استفاده خواهیم کرد pre_get_posts قلاب.

در اینجا کاری است که ما انجام خواهیم داد:

• از دو شرط استفاده کنید تا مطمئن شوید که این اصلاح فقط برای پرس و جو اصلی و در صفحات پیشانی انجام می شود. از اینجا، اگر بخواهیم و این عملکرد را فقط به انواع خاص پست، صفحه وبلاگ و غیره محدود کنیم، می توانیم یک قدم جلوتر برویم. برچسب های شرطی که وردپرس ارائه می دهد و می تواند به شما کمک کند تا دقیق تر باشید.
• بررسی کنید که آیا posts_to_show پارامتر در URL تعریف شده است. به یاد داشته باشید که اگر این تعریف شده باشد، به این معنی است که کاربر انتخاب کرده است. در چنین حالتی، از آن مقدار پارامتر برای تنظیم پست های مورد نظر در هر صفحه استفاده می کنیم. در هر مورد دیگر، posts_per_page مقدار گزینه تعداد پست هایی را که باید در هر صفحه ظاهر شوند را تعیین می کند.

در اینجا کد PHP مورد نیاز است که باید به آن اضافه کنیم functions.php فایل:

function filter_posts( $query ) {
  if ( $query->is_main_query() && ! is_admin() ) :
    if ( isset( $_GET['posts_to_show'] ) ) :
      $posts_to_show = $_GET['posts_to_show'];
    else :
      $posts_to_show = get_option( 'posts_per_page' );
    endif;
    $query->set( 'posts_per_page', $posts_to_show );
  endif;
}
add_action( 'pre_get_posts', 'filter_posts' );

صفحه را بارگیری مجدد کنید

آخرین اما مهم، ما صفحه را مجبور می کنیم هر بار که کاربر گزینه انتخاب شده را تغییر می دهد، مجدداً بارگیری شود.

در اینجا کد جاوا اسکریپتی است که باید به موضوع خود اضافه کنیم:

forcePageReloadOnSelectChange();

function forcePageReloadOnSelectChange() {
  const selects = document.querySelectorAll("select.posts-per-page");
  for (const select of selects) {
    select.addEventListener("change", function () {
      location.href = this.value;
    });
  }
}

در مورد من، من این قطعه را به آن اضافه می کنم main.js فایل واقع در assets پوشه

نتیجه

این همه، مردم! امروز یاد گرفتیم که چگونه به کاربران این امکان را بدهیم که پست‌هایی را که می‌خواهند در هر صفحه نشان دهند انتخاب کنند. این می تواند یک افزودنی عالی برای سایت های وردپرس شما باشد، به خصوص اگر صفحات آرشیو شما حاوی تعداد زیادی پست باشد و کاربران مجبور باشند تا زمانی که همه آنها را ببینند کلیک کنند.

امیدوارم از این تمرین کوچک وردپرس به اندازه من لذت برده باشید و به شما کمک کرده است که یکی دو چیز در مورد توسعه قالب وردپرس یاد بگیرید.

مثل همیشه، خیلی ممنون که خواندید!