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

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

پس بیا با هم این جدول محتوای خارق‌العاده رو بسازیم! 💪

ساخت جدول محتوای مدرن در وردپرس

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

اولین قدم اینه که یه شورت‌کد وردپرسی بسازیم. شورت‌کد‌ها راهی عالی برای اضافه کردن ویژگی‌های سفارشی به وردپرس هستن. برای این کار باید کد زیر رو به فایل functions.php قالبت اضافه کنی:

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗   ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║   ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

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

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

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

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

حالا که جدول محتوا رو ایجاد کردی، وقتشه ظاهرش رو به سلیقه خودت تغییر بدی و بهش استایل بدی👌🏼

اگر از المنتور استفاده می‌کنی، کافیه یک ویجت شورت‌کد به صفحه مقاله ات اضافه کنی و شورت‌کد [RayaWp-TableX] رو داخلش قرار بدی. سپس روی ویجت بزن تا بخش ویرایش ویجت رو ببینی، وارد تب «پیشرفته» بشو و در قسمت «CSS سفارشی»، کدهای زیر رو قرار بده تا جدول محتوات استایل مدنظر رو دریافت کنه:

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗   ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║   ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

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

چک‌ باکس‌ ها و دکمه‌ های رادیویی فرم‌ ها رو حرفه‌ای استایل بده!

مطالعه

آموزش ساخت فیلد جستجوی دراپ داون در المنتور

مطالعه

طراحی یک باکس تبلیغاتی جذاب در المنتور

مطالعه