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

اگه می‌خواید برگه‌های مهم سایتتون رو یک‌جا و مرتب نشون بدید، افزونه Page-list بدون نیاز به کدنویسی کمکتون می‌کنه. با شورت‌کدهای این افزونه می‌تونید همه برگه‌ها، زیربرگه‌های برگه فعلی یا برگه‌های هم‌سطح رو به فهرست تبدیل کنید. شورت‌کد همون عبارت کوتاهی هست که داخل کروشه می‌نویسید و وردپرس اون رو به یک بخش آماده تبدیل می‌کنه.

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

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

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

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

قبل از شروع به چه چیزهایی نیاز دارید؟

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

• انتخاب تصویر شاخص برای برگه‌ها: هر برگه‌ای که قراره همراه تصویر دیده بشه، به تصویر شاخص نیاز داره. برگه رو ویرایش کنید و از تنظیمات کناری، بخش «تصویر شاخص» رو باز کنید.
• مشخص‌کردن برگه‌های اصلی و زیربرگه‌ها: اگه می‌خواید برگه‌ها به‌شکل سلسله‌مراتبی نمایش داده بشن، رابطه والد و فرزند اون‌ها رو درست تنظیم کنید. اگه هنوز تفاوت محتوای ثابت و مطالب وبلاگ براتون روشن نیست، آموزش تفاوت برگه و نوشته در وردپرس کمکتون می‌کنه.
• تهیه نسخه پشتیبان از سایت: نصب این افزونه پیچیده نیست، ولی بهتره قبل از تغییر افزونه‌ها یک نسخه پشتیبان سالم داشته باشید.

نصب و فعال‌سازی افزونه Page-list

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

نصب افزونه از پیشخوان وردپرس

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

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

بررسی فعال‌شدن افزونه

به صفحه «افزونه‌ها ← افزونه‌های نصب‌شده» برید و Page-list رو پیدا کنید. اگه گزینه «غیرفعال‌کردن» زیر نام افزونه دیده می‌شه، یعنی افزونه فعاله. Page-list معمولاً منوی تنظیمات مستقلی به پیشخوان اضافه نمی‌کنه؛ پس اگه منوی تازه‌ای نمی‌بینید، مشکلی پیش نیومده.

ساخت لیست ساده از همه برگه‌های وردپرس

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

اضافه‌کردن بلوک «کد کوتاه» به برگه

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

استفاده از شورت‌کد pagelist

شورت‌کد زیر رو داخل بلوک «کد کوتاه» بذارید:

[pagelist]

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

بررسی ترتیب و ساختار سلسله‌مراتبی برگه‌ها

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

برای تنظیم والد، برگه موردنظرتون رو ویرایش کنید و گزینه «والد» رو در تنظیمات برگه پیدا کنید. بعد نام برگه اصلی رو انتخاب کنید و تغییرات رو ذخیره کنید. جای دقیق این گزینه ممکنه با توجه به نسخه وردپرس یا ظاهر ویرایشگر کمی فرق کنه.

نمایش زیربرگه‌های برگه فعلی

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

شورت‌کد subpages چطور کار می‌کنه؟

بلوک «کد کوتاه» رو به برگه اصلی اضافه کنید و عبارت زیر رو داخلش بنویسید:

[subpages]

افزونه زیربرگه‌های برگه فعلی رو پیدا می‌کنه و نشون می‌ده. مثلاً اگه این کد داخل برگه «خدمات» باشه، فقط برگه‌هایی دیده می‌شن که «خدمات» به‌عنوان والد اون‌ها انتخاب شده.

چرا ساختار والد و فرزند برگه‌ها مهمه؟

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

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

نمایش برگه‌های هم‌سطح در وردپرس

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

استفاده از شورت‌کد siblings

داخل برگه موردنظرتون یک بلوک «کد کوتاه» اضافه کنید و این شورت‌کد رو داخلش بذارید:

[siblings]

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

تفاوت برگه‌های هم‌سطح با زیربرگه‌ها

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

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

برای اینکه عنوان، تصویر شاخص و بخشی از متن هر برگه رو کنار هم نشون بدید، باید از شورت‌کد توسعه‌یافته افزونه استفاده کنید. نام درست این شورت‌کد pagelist_ext هست.

استفاده از شورت‌کد pagelist_ext

برای دیدن خروجی پیش‌فرض، کد زیر رو داخل بلوک «کد کوتاه» بذارید:

[pagelist_ext]

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

فعال‌کردن نمایش تصویر شاخص

برای نمایش تصویر شاخص، پارامتر show_image رو با مقدار 1 داخل شورت‌کد بذارید. پارامتر یعنی یک گزینه داخل شورت‌کد که نتیجه خروجی رو تغییر می‌ده.

[pagelist_ext show_image="1"]

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

تغییر عرض تصویرهای شاخص

پارامتر image_width عرض تصویر رو کنترل می‌کنه. مثلاً کد زیر تصویرها رو با عرض ۵۰ پیکسل می‌سازه:

[pagelist_ext show_image="1" image_width="50"]

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

نمایش یا مخفی‌کردن متن هر برگه

اگه فقط عنوان و تصویر رو لازم دارید، نمایش محتوای برگه‌ها رو با کد زیر خاموش کنید:

[pagelist_ext show_image="1" show_content="0"]

مقدار show_content="0" متن رو کوتاه نمی‌کنه، بلکه اون رو کامل از خروجی کنار می‌ذاره. اگه توضیح کوتاه می‌خواید، باید محتوای برگه فعال بمونه و طولش رو محدود کنید.

محدودکردن طول خلاصه برگه‌ها

با پارامتر limit_content می‌تونید تعداد واژه‌های متن هر برگه رو محدود کنید. نمونه زیر حداکثر ۱۰۰ واژه از محتوای هر برگه رو نشون می‌ده:

[pagelist_ext show_image="1" image_width="80" show_content="1" limit_content="100"]

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

شخصی‌سازی لیست برگه‌ها با پارامترهای کاربردی

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

تغییر ترتیب نمایش برگه‌ها

برای مرتب‌کردن فهرست بر اساس عنوان می‌تونید از sort_column="post_title" استفاده کنید. مقدار sort_order="asc" هم ترتیب صعودی رو مشخص می‌کنه:

[pagelist sort_column="post_title" sort_order="asc"]

اگه ترجیح می‌دید ترتیب رو خودتون مشخص کنید، مقدار «ترتیب» برگه‌ها رو تنظیم کنید و از menu_order کمک بگیرید:

[pagelist sort_column="menu_order" sort_order="asc"]

نمایش برگه‌های دلخواه و کنارگذاشتن برگه‌های اضافی

هر برگه یک شناسه عددی یا ID داره. برای پیداکردنش، برگه رو در پیشخوان ویرایش کنید و عدد بعد از post= رو در نشانی مرورگر ببینید.

برای نمایش چند برگه مشخص، شناسه‌های اون‌ها رو با ویرگول داخل پارامتر include بنویسید:

[pagelist include="12,18,24"]

برای کنارگذاشتن چند برگه از فهرست هم می‌تونید از exclude استفاده کنید:

[pagelist exclude="2,7"]

عددهای نمونه رو با شناسه واقعی برگه‌های سایتتون عوض کنید. بهتره include و exclude رو هم‌زمان به کار نبرید؛ چون نتیجه ترکیب اون‌ها ممکنه با چیزی که انتظار دارید یکی نباشه. در آخر، خروجی و ساختار زیربرگه‌ها رو ببینید تا برگه ناخواسته‌ای داخل فهرست نمونده باشه.

کنترل تعداد برگه‌های داخل لیست

برای محدودکردن تعداد خروجی می‌تونید مقدار number رو تعیین کنید. نمونه زیر حداکثر ۶ برگه رو نشون می‌ده:

[pagelist number="6"]

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

ترکیب چند پارامتر در یک شورت‌کد

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

[pagelist_ext show_image="1" image_width="80" show_content="1" limit_content="100" number="6" sort_column="post_title" sort_order="asc"]

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

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

قراردادن لیست داخل نوشته یا برگه

در ویرایشگر بلوکی، بلوک «کد کوتاه» رو به نوشته یا برگه اضافه کنید و کد موردنظرتون رو داخلش بذارید. بعد پیش‌نمایش رو باز کنید؛ چون ممکنه خود ویرایشگر خروجی کامل شورت‌کد رو همون لحظه نشون نده.

قراردادن شورت‌کد در ابزارک‌های قالب کلاسیک

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

در نسخه‌های امروزی وردپرس، برای این کار لازم نیست فایل functions.php رو ویرایش کنید یا فیلتر جداگانه‌ای به ابزارک متن اضافه کنید. بلوک «کد کوتاه» راه امن‌تر و ساده‌تریه.

قراردادن شورت‌کد در ویرایشگر سایت قالب‌های بلوکی

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

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

حل مشکل نمایش‌ندادن لیست یا تصویر شاخص

بررسی درست‌بودن نام شورت‌کد

اول مطمئن بشید Page-list فعاله و نام شورت‌کد رو درست نوشتید. برای خروجی تصویری باید از pagelist_ext استفاده کنید. شورت‌کد رو داخل بلوک «کد کوتاه» بذارید و کروشه‌های اول و آخرش رو پاک نکنید.

بررسی تصویر شاخص برگه‌ها

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

بررسی رابطه والد و فرزند بین برگه‌ها

اگه subpages یا siblings خروجی مناسبی نشون نمی‌ده، تنظیم والد برگه‌ها رو بررسی کنید. برگه‌هایی که باید کنار هم دیده بشن، به والد مشترک نیاز دارن. زیربرگه‌ها هم باید برگه فعلی رو به‌عنوان والد خودشون بشناسن.

رفع تداخل قالب، افزونه و کش سایت

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

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

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

نکته‌های مهم برای مرتب و خوانا موندن لیست برگه‌ها

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

سؤال‌های رایج

جمع‌بندی

افزونه Page-list راه ساده‌ای برای نمایش برگه‌های سایت بدون نوشتن کد PHP در اختیارتون می‌ذاره. برای یک فهرست معمولی از pagelist استفاده کنید. subpages زیربرگه‌های برگه فعلی رو نشون می‌ده و siblings هم برای برگه‌های هم‌سطح کاربرد داره.

برای نمایش لیست برگه‌ها در وردپرس با تصویر شاخص، سراغ pagelist_ext برید. بعد با گزینه‌هایی مثل show_image، image_width، show_content و limit_content خروجی رو با نیاز سایتتون هماهنگ کنید. در آخر هم فهرست رو روی موبایل ببینید و مطمئن بشید عنوان‌ها، تصویرها و خلاصه‌ها راحت خونده می‌شن.

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

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