نمایش پست‌ها در وردپرس به‌صورت شبکه‌ای؛ ۲ روش ساده

برای نمایش پست‌ها در وردپرس به‌صورت شبکه‌ای، همیشه لازم نیست افزونه تازه‌ای روی سایتتون نصب کنید. خود وردپرس بلوکی به نام Query Loop داره که نوشته‌ها رو به‌شکل چندستونه کنار هم می‌ذاره. اگه امکانات بیشتری مثل فیلتر، Masonry، اسلایدر یا کنترل دقیق‌تر روی چیدمان می‌خواید، نسخه رایگان افزونه Post Grid هم گزینه خوبیه.

توی این آموزش، اول روش داخلی وردپرس رو با هم بررسی می‌کنیم. بعد سراغ نصب و تنظیم افزونه رایگان Post Grid می‌ریم. در پایان هم نکات مهم موبایل، تصویر شاخص، صفحه‌بندی و سرعت سایت رو می‌بینیم تا گرید نوشته‌هاتون هم مرتب باشه و هم پیدا کردن محتوا رو برای کاربر راحت‌تر کنه.

نمایش پست‌ها در وردپرس به‌صورت شبکه‌ای چه کاربردی داره؟

توی چیدمان شبکه‌ای، هر نوشته داخل یک کارت جدا دیده می‌شه. این کارت معمولاً تصویر شاخص، عنوان، خلاصه نوشته و دکمه مشاهده مطلب رو نشون می‌ده. وقتی کارت‌ها کنار هم قرار می‌گیرن، کاربر می‌تونه مطالب بیشتری رو در زمان کوتاه‌تری مرور کنه.

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

روش اول: نمایش شبکه‌ای نوشته‌ها با امکانات خود وردپرس

وردپرس بلوکی به نام Query Loop داره. Query Loop یعنی بلوکی که نوشته‌های سایتتون رو طبق شرط‌هایی که انتخاب می‌کنید پیدا می‌کنه و نشون می‌ده. برای ساخت یک گرید ساده وبلاگ، این روش رایگانه و به نصب افزونه هم نیازی نداره.

ساخت گرید با بلوک Query Loop

1. از پیشخوان وردپرس وارد بخش «برگه‌ها» بشید و برگه‌ای رو که می‌خواید تغییر بدید باز کنید.
2. روی دکمه افزودن بلوک با علامت + کلیک کنید.
3. عبارت Query Loop یا «حلقه پرس‌وجو» رو جست‌وجو کنید و بلوک رو به برگه اضافه کنید.
4. یکی از الگوهای شبکه‌ای آماده رو انتخاب کنید. اگه گزینه شروع خالی رو می‌بینید، می‌تونید چیدمان رو از ابتدا بسازید.
5. از نوار ابزار بلوک، حالت Grid یا شبکه رو انتخاب کنید و تعداد ستون‌ها رو تغییر بدید.
6. داخل هر کارت، بلوک‌های تصویر شاخص، عنوان نوشته، تاریخ، خلاصه و دکمه ادامه مطلب رو نگه دارید یا گزینه‌های اضافی رو حذف کنید.

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

فیلتر کردن نوشته‌های گرید

اگه نمی‌خواید همه نوشته‌ها داخل گرید دیده بشن، تنظیمات Query Loop رو باز کنید. اینجا می‌تونید دسته یا برچسب دلخواهتون رو انتخاب کنید. مثلاً می‌تونید گریدی بسازید که فقط نوشته‌های دسته آموزش وردپرس رو نشون بده.

برای مرتب‌سازی هم می‌تونید نوشته‌های تازه‌تر یا قدیمی‌تر رو اول قرار بدید. اگه این گرید بخشی از صفحه اصلی سایتتونه، نمایش تازه‌ترین نوشته‌ها معمولاً انتخاب ساده و مناسبیه.

روش دوم: نمایش پست‌ها با افزونه رایگان Post Grid

اگه بلوک داخلی وردپرس نیازتون رو کامل برطرف نمی‌کنه، می‌تونید از نسخه رایگان افزونه Post Grid کمک بگیرید. این افزونه از مخزن رسمی وردپرس نصب می‌شه و برای ساخت گرید نوشته‌ها به کدنویسی PHP، HTML یا CSS نیازی نداره.

Post Grid فعاله و می‌تونید ازش استفاده کنید، ولی رابط کاربری جدیدش با چیزی که توی تصاویر قدیمی این مقاله می‌بینید فرق داره. سازنده افزونه از نسخه ۲.۳.۱۰ یک سازنده تازه مبتنی بر React به اون اضافه کرده. React اسم فناوری‌ایه که رابط تنظیمات افزونه باهاش ساخته شده؛ برای کار با افزونه لازم نیست برنامه‌نویسی React بلد باشید.

نسخه فعلی افزونه قابلیت‌هایی مثل Grid، Slider، Masonry، فیلتر نوشته‌ها، صفحه‌بندی AJAX و دکمه بارگذاری بیشتر داره. Masonry نوعی چیدمان شبکه‌ایه که کارت‌های با ارتفاع متفاوت رو کنار هم می‌چینه. AJAX هم کمک می‌کنه نوشته‌های بعدی بدون بارگذاری دوباره کل صفحه دیده بشن. بعضی امکانات یا طرح‌ها ممکنه فقط توی نسخه پولی در دسترس باشن؛ پس قبل از اینکه طراحی نهایی رو انجام بدید، گزینه موردنظرتون رو توی نسخه رایگان امتحان کنید.

پیش‌نیازهای افزونه Post Grid

طبق اطلاعات صفحه رسمی افزونه، سایتتون باید حداقل وردپرس ۵، PHP ۷.۳ و MySQL ۵.۶ داشته باشه. PHP زبانیه که وردپرس روی سرور باهاش اجرا می‌شه و MySQL هم پایگاه داده‌ایه که اطلاعات سایت رو نگه می‌داره. معمولاً می‌تونید نسخه PHP رو از پنل هاست یا مسیر «ابزارها ← سلامت سایت ← اطلاعات» بررسی کنید.

قبل از شروع، آخرین نسخه افزونه رو نصب کنید. نسخه ۲.۳.۲۴ یک مشکل امنیتی XSS رو برطرف کرده. XSS نوعی مشکل امنیتیه که ممکنه راه اجرای کد ناخواسته توی صفحه رو باز کنه. یادتون نره وردپرس، قالب و بقیه افزونه‌ها رو هم به‌روز نگه دارید.

نصب افزونه رایگان Post Grid

از پیشخوان وردپرس وارد «افزونه‌ها ← افزودن افزونه تازه» بشید. عبارت Post Grid رو جست‌وجو کنید و قبل از نصب، نام و صفحه رسمی افزونه رو ببینید تا افزونه اشتباهی نصب نکنید. بعد دکمه نصب و سپس فعال‌سازی رو بزنید. اگه اولین باره افزونه نصب می‌کنید، راهنمای نصب افزونه در وردپرس هم کمکتون می‌کنه.

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

ساخت اولین پست گرید

از منوی Post Grid، گزینه ساخت گرید تازه رو باز کنید. توی رابط قدیمی، مسیر این بخش «Post Grid ← New Post Grid» بود. توی سازنده جدید ممکنه دکمه Add New یا گزینه‌ای با معنی ساخت گرید تازه ببینید.

اول یک نام مشخص مثل «نوشته‌های تازه صفحه اصلی» بنویسید. این نام فقط برای اینه که گریدها رو راحت‌تر مدیریت کنید و لازم نیست بازدیدکننده اون رو ببینه.

انتخاب نوع محتوا و نوشته‌ها

توی بخش Query یا Query Post مشخص می‌کنید چه محتوایی داخل گرید بیاد. Query یعنی قانونی که محتوا بر اساس اون انتخاب می‌شه. مثلاً می‌تونید تعیین کنید فقط نوشته‌های منتشرشده از یک دسته مشخص نمایش داده بشن.

• Post Type:نوع محتوا مثل نوشته، برگه یا محصول رو مشخص می‌کنه.
• Post Status: وضعیت نوشته رو تعیین می‌کنه. برای نمایش عمومی، Publish رو انتخاب کنید.
• Taxonomy and Terms: دسته‌ها یا برچسب‌های موردنظرتون رو انتخاب می‌کنه.
• Posts Per Page: تعداد کارت‌هایی رو تعیین می‌کنه که توی هر صفحه دیده می‌شن.
• Order: ترتیب صعودی یا نزولی محتوا رو مشخص می‌کنه.
• Order By: معیار مرتب‌سازی مثل تاریخ، عنوان یا شناسه نوشته رو تعیین می‌کنه.

برای ساخت یک گرید ساده از نوشته‌های تازه، Post Status رو روی Publish و Order By رو روی Date بذارید. ترتیب نزولی یا DESC باعث می‌شه تازه‌ترین نوشته‌ها اول دیده بشن.

گزینه Offset تعیین می‌کنه نمایش محتوا از چندمین نوشته شروع بشه. مثلاً اگه آخرین نوشته رو بالای صفحه به‌صورت جداگانه نشون داده‌اید، با Offset برابر ۱ می‌تونید جلوی تکرار همون نوشته رو توی گرید بگیرید.

بخش Exclude by Post ID برای کنار گذاشتن چند نوشته مشخص از گرید به کار می‌ره. ID همون شناسه عددی هر نوشته‌ست. اگه نمی‌خواید نوشته خاصی رو حذف کنید، این بخش رو خالی بذارید.

انتخاب ظاهر و چیدمان گرید

توی نسخه‌های قدیمی، تنظیمات ظاهر داخل بخش Skin & Layout قرار داشتن. نسخه‌های تازه یک سازنده گرافیکی و کتابخانه طرح دارن. بهتره طرح ساده‌ای رو انتخاب کنید که تصویر شاخص، عنوان و خلاصه نوشته رو واضح نشون بده.

برای متن فارسی، نوشته‌ها رو راست‌چین کنید. تعداد ستون‌ها رو هم به‌صورت جدا برای کامپیوتر، تبلت و موبایل تنظیم کنید. اگه این گزینه‌ها رو با اسم متفاوتی می‌بینید، دنبال تنظیماتی مثل Columns، Grid Items Width یا Responsive بگردید.

تنظیم اندازه کارت‌ها و تصاویر

عرض و ارتفاع کارت‌ها روی مرتب دیده شدن گرید اثر می‌ذارن. اگه همه تصاویر شاخص نسبت یکسانی ندارن، انتخاب ارتفاع ثابت ممکنه بخشی از تصویر رو ببُره. بهتره اول چند نوشته واقعی رو امتحان کنید و بعد سراغ اندازه نهایی برید.

گزینه Featured Image Size اندازه تصویر شاخص رو مشخص می‌کنه. بهتره اندازه‌ای رو انتخاب کنید که به عرض کارت نزدیک باشه. تصویر خیلی بزرگ حجم صفحه رو بالا می‌بره و تصویر خیلی کوچک هم تار دیده می‌شه. راهنمای بهینه‌سازی تصاویر سایت بدون افت کیفیت برای کم کردن حجم تصاویر کمکتون می‌کنه.

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

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

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

اضافه کردن جست‌وجو و فیلتر

اگه گریدتون نوشته‌های زیادی داره، جست‌وجو یا فیلتر می‌تونه پیدا کردن محتوا رو ساده‌تر کنه. گزینه Display Search Input توی رابط قدیمی، کادر جست‌وجو رو فعال می‌کرد. توی نسخه جدید دنبال بخش Search یا Filter بگردید.

برای متن داخل کادر جست‌وجو، یک عبارت روشن مثل «جست‌وجو بین نوشته‌ها» بنویسید. قبل از انتشار هم جست‌وجو رو با چند عنوان واقعی امتحان کنید. ممکنه دسترسی به بعضی مدل‌های فیلتر به طرح یا نسخه افزونه بستگی داشته باشه.

انتخاب Grid یا Masonry

حالت Grid کارت‌ها رو توی ردیف‌ها و ستون‌های منظم می‌چینه. این حالت برای بیشتر وبلاگ‌ها ساده‌تره و خوانایی بهتری داره.

حالت Masonry کارت‌های با ارتفاع متفاوت رو بدون فاصله‌های خالی بزرگ کنار هم قرار می‌ده. اگه خلاصه نوشته‌ها طول یکسانی ندارن یا تصاویر هم‌اندازه نیستن، این حالت می‌تونه ظاهر جذابی بسازه. بااین‌حال، حتماً نتیجه رو روی موبایل هم جداگانه بررسی کنید.

تنظیم صفحه‌بندی و دکمه بارگذاری بیشتر

نسخه‌های قدیمی افزونه گزینه‌های محدودتری برای صفحه‌بندی داشتن. نسخه‌های تازه می‌تونن صفحه‌بندی معمولی، صفحه‌بندی AJAX، دکمه‌های قبلی و بعدی یا گزینه Load More رو در اختیارتون بذارن. Load More یعنی کاربر یک دکمه رو می‌زنه و نوشته‌های بیشتری توی همون صفحه می‌بینه.

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

نمایش پست گرید داخل برگه

بعد از ذخیره یا انتشار گرید، افزونه یک شورت‌کد بهتون می‌ده. شورت‌کد یک عبارت کوتاه داخل کروشه‌ست که هرجا بذارید، خروجی افزونه همون‌جا دیده می‌شه. شکل شورت‌کد معمولاً شبیه نمونه زیره، ولی باید شناسه واقعی گرید خودتون رو کپی کنید.

[post_grid id="1234"]

1. شورت‌کد گریدی رو که ساخته‌اید از صفحه افزونه کپی کنید.
2. برگه موردنظرتون رو با ویرایشگر وردپرس باز کنید.
3. یک بلوک «شورت‌کد» به برگه اضافه کنید.
4. کد رو داخل بلوک بچسبونید و برگه رو به‌روز کنید.
5. نتیجه رو هم روی کامپیوتر و هم روی موبایل ببینید.

ممکنه افزونه یک کد PHP هم برای قرار دادن گرید داخل فایل‌های قالب بهتون بده. اگه تازه با وردپرس آشنا شده‌اید، بهتره از شورت‌کد کمک بگیرید. ویرایش مستقیم فایل‌های قالب با یک اشتباه می‌تونه سایت رو از دسترس خارج کنه. این تغییرها ممکنه بعد از به‌روزرسانی قالب هم از بین برن.

بلوک‌های Post Grid و افزونه ComboBlocks

بلوک‌های گوتنبرگ Post Grid از نسخه ۲.۳.۸ به افزونه جداگانه ComboBlocks منتقل شدن. گوتنبرگ همون ویرایشگر بلوکی وردپرسه. برای روش شورت‌کدی که توی این مقاله یاد گرفتید، لازم نیست ComboBlocks رو نصب کنید.

چون هدف این آموزش استفاده از یک افزونه رایگانه، مسیر اصلی رو با نسخه رایگان Post Grid و شورت‌کد پیش بردیم. فقط اگه دقیقاً به بلوک‌های منتقل‌شده نیاز دارید، صفحه رسمی ComboBlocks رو ببینید و مطمئن بشید امکانات رایگانش برای کار شما کافیه.

قبل از انتشار گرید این موارد رو بررسی کنید

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

روش بدون افزونه بهتره یا Post Grid؟

اگه فقط یک گرید ساده از نوشته‌ها می‌خواید، اول بلوک Query Loop خود وردپرس رو امتحان کنید. این روش افزونه اضافه‌ای به سایتتون تحمیل نمی‌کنه و مدیریت ساده‌تری داره.

اگه به چیدمان Masonry، فیلتر، اسلایدر، کنترل‌های بیشتر یا نمایش چند نوع محتوا نیاز دارید، نسخه رایگان Post Grid رو امتحان کنید. قبل از اینکه کل صفحه رو طراحی کنید، مطمئن بشید همه قابلیت‌های موردنیازتون توی نسخه رایگان فعال هستن.

جمع‌بندی

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

اگه به امکاناتی مثل Masonry، فیلتر، اسلایدر یا صفحه‌بندی AJAX نیاز دارید، نسخه رایگان Post Grid انتخاب بعدی شماست. فقط قبل از طراحی کامل صفحه، قابلیت‌های موردنیازتون رو توی نسخه رایگان امتحان کنید، افزونه رو به‌روز نگه دارید و مطمئن بشید گرید با قالب، کش سایت و اندازه‌های مختلف صفحه درست کار می‌کنه.

سؤالات متداول

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.