ساخت فهرست مطالب حرفه‌ ای در وردپرس بدون افزونه

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

نگران نباش، لازم نیست حتما کد نویسی بلدی باشی! با چند خط کد ساده و ترفندهایی که بهت میگم، می‌تونی فهرست مطالب رو به شکلی تمیز و جذاب درست کنی که هم برای بازدیدکننده‌ها خوشایند باشه، هم گوگل حسابی ازت راضی باشه! 😉 پس با من همراه شو تا گام به گام این کار رو انجام بدیم!

فهرست مطالب یا جدول محتوا چیه؟ 🤔

فهرست مطالب یا همون جدول محتوا (Table of Content به اختصار TOC)، یه لیست از لینک‌هاست که معمولاً توی صفحات طولانی یا مقالات با بخش‌های مختلف میزارن تا کاربر بتونه سریع به بخش مورد نظرش بره. این فهرست معمولاً شامل لینک‌هایی هست که به عناوین یا هدینگ های مختلف محتوا اشاره می‌کنن. برای مثال، اگه یه مقاله بلند داری که شامل چندین بخش مختلف مثل “مقدمه”، “محتوا”، “نتیجه‌گیری” و … باشه، فهرست مطالب این بخش‌ها رو لیست می‌کنه و با کلیک روی هر بخش، کاربر رو مستقیماً به همون قسمت می‌بره.

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

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

×

ترفند: آپلود فایل در هاست از طریق لینک (URL)

مطالعه

😊ساخت فهرست مطالب حرفه‌ ای در وردپرس بدون افزونه

در این پست، نحوه ساخت فهرست مطالب با استایل لیمو هاست رو به درخواست یکی از دوستان آموزش میدم 🙂

مرحله اول: افزودن کد php برای ایجاد فهرست مطالب

خب، حالا که با فهرست مطالب آشنا شدی، وقتشه که کد PHP لازم رو برای ایجاد این فهرست تو سایت وردپرست اضافه کنی. این کد کارش اینه که تمامی عناوین H2 تا H5 رو از محتوای صفحه استخراج می‌کنه و به یه فهرست مرتب تبدیلش می‌کنه. اصلاً نگران نباش، اصلاً نیاز نیست استاد برنامه‌نویسی باشی! فقط کافی هست کد زیر رو تو فایل functions.php قالب سایتت اضافه کنی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

یک نکته مهم! 👀 در کد بالا، عنوان پیش‌فرض فهرست مطالب (که به صورت پیش‌فرض نوشته شده: «آنچه در این مطلب خواهید خواند») قابل تغییره. می‌تونی این عنوان را به هر چیزی که دوست داری تغییر بدی. این فهرست مطالب به طور نرم و روان با کلیک روی هر بخش، به قسمت مربوطه (هدینگ) اسکرول میکنه.

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

×

با این ترفند از ویرایش ادمین‌ ها در وردپرس جلوگیری کنید

مطالعه

🚨 توجه! کد PHP بالا به طور خودکار عناوین و هدینگ‌ها رو از محتوای صفحه با کلاس contenty می‌گیره. بنابراین وقتی کد رو تو فایل functions قالبت گذاشتی، باید بری تو المنتور، ویرایش قالب پست‌ها رو بزنی و تو ویجت محتوای صفحه، تو بخش کلاس‌های CSS، کلاس contenty رو بهش اختصاص بدی. 😉

مرحله دوم: افزودن کد CSS برای استایل دهی به فهرست مطالب

حالا که فهرست مطالب رو ساختی، وقتشه که ظاهرش رو به دلخواه خودت تغییر بدی و استایل بدی. این مرحله خیلی مهمه، چون یه استایل خوب می‌تونه تجربه کاربری سایتت رو به شدت بهتر کنه. 👌🏼

اگر از المنتور استفاده می‌کنی، کافیه یه ویجت شورت‌کد به صفحه مقاله‌ات اضافه کنی و داخلش شورت‌کد [RayaWp_Toc] رو قرار بدی. بعدش روی ویرایش ویجت بزن، به تب ‘پیشرفته’ برو و در قسمت ‘CSS سفارشی’ کدهای زیر رو پیست کن تا استایل فهرست مطالب خودت رو تنظیم کنی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

سخن پایانی

✅ کار تمومه. هورااااااااا، حالا یه فهرست مطالب مشابه سایت لیمو هاست داری! 🎉 مرسی که تا آخر این مطلب منو با نگاه قشنگت دنبال کردی. امیدوارم این آموزش هم مثل آموزش‌های دیگه رایا وردپرس به دردت بخوره. اگر سوالی داشتی، می‌تونی تو قسمت دیدگاه‌ها مطرح کنی تا جواب بدم. 😊

×

آموزش ساخت چایلد تم (Child Theme) برای قالب وردپرس

مطالعه