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

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

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

🤔بردکرامب چیه و چرا لازمش داریم؟

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

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

آموزش طراحی بردکرامب با استایل جذاب بدون استفاده از افزونه

مرحله اول: ساخت شورت‌کد بردکرامب با PHP

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

خب حالا بریم سراغ ساخت بردکرامب. قدم اول اینه که با یه قطعه کد PHP، بردکرامب رو بسازیم. این کدها رو تو فایل functions.php قالب سایتت بذار:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

این کد یه شورت‌کد به نام [RayaWp-Bb] تعریف می‌کنه که می‌تونی تو هر کجای سایتت ازش استفاده کنی. با این کار، موقعیت کاربر تو صفحه با بردکرامب به نمایش درمیاد و به راحتی می‌تونه مسیرش رو دنبال کنه. 🧭

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

حالا باید به بردکرامب یک استایل جذاب بدیم تا ظاهرش بهتر و شیک‌تر بشه. برای این کار، به تب پیشرفته در المنتور برو اسکرول کن به پایین صفحه تو همون تب پیشرفته، در بخش کد CSS سفارشی، کدهای زیر رو وارد کن

برای استایل دارک از کد زیر استفاده کن:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

برای استایل لایت یا روشن از کد زیر استفاده کن:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

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

سفارشی سازی اسکرول بار وردپرس : آموزش با و بدون افزونه

مطالعه

تعداد بازدید پست ها در وردپرس رو بدون افزونه نمایش بده!

مطالعه

نمایش تبلیغات در نوشته های وردپرس بدون نصب افزونه

مطالعه