آموزش قرار دادن Breadcrumb در قالب + استایل جذاب

آموزش قرار دادن Breadcrumb در قالب + استایل جذاب

آموزش قرار دادن Breadcrumb در قالب + استایل جذاب

ت

تجربه کاربری امری است که به بهبود تجربه یک کاربر از بازدید سایت می پردازد. نکات و کار های مختلفی وجود دارد تا این تجربه کاربری را برای سایتمان بهبود ببخشیم. اما یکی از مهمترین نکات، دسترسی آسان به بخش های مختلف سایت و رسیدن سریعتر به هدف است. Breadcrumb یا سلسله نشانی، قابلیتی است که این امر را محقق می کند. علاوه بر اینها بردکروم تا حد زیادی باعث بهبود سئوی سایت می شود. حتما بخش سلسله نشانی های افزونه Yoast SEO را دیده اید. این موضوع نشانگر آن است که برد کرام تا چه حد بر سئو تاثیرگذار است که در چنین افزونه ای یک بخش جداگانه برای آن در نظر گرفته شده است.

قرار دادن Breadcrumb

بردکروم یا سلسله نشانی، چیزی است که محل فعلی کاربر را نشان می دهد. مثلا به این صورت: خانه » وردپرس » آموزش قرار دادن Breadcrumb در قالب.

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

قرار دادن Breadcrumb

قرار دادن Breadcrumb در قالب بدون نیاز به افزونه

ابتدا کد زیر را به انتهای فایل functions.php قالب خود اضافه کنید:

سپس کد زیر را به جایی که میخواهید بردکرام نمایش داده شود اضافه کنید. مثلا در قسمت بالای صفحه در فایل single.php میتوانید اضافه کنید (یا هر جایی که خودتان می خواهید):

توجه: کد بالا را باید به فایل های category.php – archive.php – page.php – author.php هم اضافه کنید.

برای ایجاد تغییرات در ظاهر سلسله نشانی خود، میتوانید کدی که به functions.php اضافه کردید را ویرایش کنید. مثلا متن ها را تغییر دهید یا علامت جداکننده را تغییر دهید. برای تغییر دادن علامت جدا کننده برد کرام، در بخش $delimiter یک عبارت » قرار دارد. آن را به علامت دلخواه خود تغییر دهید.

استایل جذاب برای Breadcrumb

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

حالا کد CSS زیر را به انتهای فایل استایل قالب خود (style.css) اضافه کنید:

خب تمام شد. حالا فایل استایل خود را ذخیره کنید. بروید به یکی از مطالبتان و نتیجه را ببینید. خوب شد نه؟! امیدواریم از این آموزش هم لذت و هم استفاده برده باشید. پیش نمایش کار ما را هم در زیر میتوانید ببینید:

قرار دادن Breadcrumb

سفارش نرم افزار باشگاه مشتریان طراحی سایت، تبلیغات در گوگل ادوردز، سئو و دیجیتال مارکتینگ

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)