آموزش و کدهای Breadcrumbs وردپرس

امروز قرار هستش که باهم يک مروري بر Breadcrumbs وردپرس داشته باشيم که اصلا اين Breadcrumbs چي هستش ؟!! و کدهاش براي قرار دادن داخل قالب وردپرس چي هستند و همينطور يک استايل ساده و خوب هم براي نمايش اون براتون قرار داديم.

آموزش و کدهای Breadcrumbs وردپرس

Breadcrumbs چیست و کاربرد آن

معنی لغوی Breadcrumbs به انگلیسی میشه خرده نان !! اما به زبان خودموني و اینترنتی !! ، راهنماي کاربر براي اين که نشون بده الان اين صفحه که داره مي بينه تو کدوم مسير و دسته سايت قرار گرفته.
براي مثال نشون ميده ” شما اينجا هستيد خانه –> وردپرس –> هک و کدهاي وردپرس –> آموزش Breadcrumbs ” .
خوب مي رسيم به کاربرد ، کاربر اصلي براي سايت اينه که کاربر رو داخل سايت نگه ميداره و مثلا روي لينک اون صفحه قبلي که الان داخل اون قرار گرفته کليک مي کنه و مطالب ديگر سايت رو با اون موضوع رو مي بينه.کاربردش براي خوده کاربر اينه که داخل اين همه مطالب و موضوعات سايت گم نميشه و مي دونه الان کجاست.

کدهاي قرار دادن Breadcrumbs

اگر بخوام راستش رو بهتون بگم اينه که براي قرار دادن Breadcrumbs کدهاي php زيادي رو بايد داخل فايل functions.php قالب و همينطور داخل قالب وردپرس قرار بديد که کلي هم درده سر داره و آخرش هم خوب از کار در نمياد.ولي من يه ترفند ساده و راهکار خيلي کم درده سر دارم که همون کار رو حتي بهترشو براتون انجام ميده !

قالب براي نمايش Breadcrumb

من سعي کردم يک قالب خوب که در واقع يک کادر مستطيلي شکل هست براش آماده کنم.کدهاي زير استايل قالب Breadcrumbs هست که به انتها فايل style.css قالبتون بايد اضافه کنيد.

#breadcrumbs{background:#f8f8f8;padding:5px 10px;margin-bottom:15px}
#breadcrumbs a{color:#10afcc;}

براي فراخواني کدها هم تو صفحات مختلف قالب وردپرس هم بايد از کدهاي زير استفاده کنيد.

<div id="breadcrumbs">
محل قرار دادن کدهاي php مربوطه
</div>

داخل کد نوشتيم ” محل قرار دادن کدهاي php که در ادامه بهتون مي گم بايد چي بجاش قرار بديد.
اگر تا انتها مراحل رو انجام بديد ، اون وقت قالب Breadcrumbs اين طوري ميشه.

قالب Breadcrumbs وردپرس

کدهاي قرار دادن Breadcrumbs وردپرس

کدهاي خام براي اين کار (البته طبق روش ما !! ) اين ها هستند.براي هر صفحه قالب وردپرس کد جداگانه داريم که بايد اين چندتا کد رو بجاي اون محلي که تو قالب خالي گذاشتيم قرار بديد و سپس همه ي کدها رو در هر کجاي قالب که خواستيد( که معمولا براي تمام صفحات يکسان هست ) تو صفحاتي که ميگيم قرار بديد.اگر هم قالب Breadcrumbs بالا رو نخواستيد هيچي فقط از کدهاي زير استفاده کنيد.
کدهاي زير براي صفحه اصلي هستش.اين کد رو تو فايل index.php قالب وردپرس قرار بديد ( تکرار مي کنم اگر قالب رو هم مي خواهيد اين کد زير رو در محلي که تو قالب Breadcrumbs خالي گذاشتيم قرار بديد و بعد اون مجموعه رو تو فايل index.php قرار بديد).

شما اينجا هستيد : <a href="<?php bloginfo('url'); ?>">خانه</a>

کد زير رو بايد داخل فايل archive.php قالب وردپرس قرار بديد.

شما اينجا هستيد : <a href="<?php bloginfo('url'); ?>">خانه</a> --> <?php single_cat_title(); ?>

کد زير رو داخل فايل single.php قرار بديد.

شما اينجا هستيد : <a href="<?php bloginfo('url'); ?>">خانه</a> --> <?php the_category(', ') ?> --> <?php the_title();?>

کد زير براي صفحه page.php قالب وردپرس هستش.

شما اينجا هستيد : <a href="<?php bloginfo('url'); ?>">خانه</a> --> صفحه <?php the_title();?>

باز هم تکرار مي کنم اگر قالب رو هم خواستين ابتدا کدهاي بالا رو داخل محلي که تو قالب Breadcrumbs خالي گذاشتيم قرار بديد و سپس اون مجموعه کد رو داخل هر کدوم از فايل هاي قالب وردپرس که گفتيم بزاريد.

22 نظرات
  1. مصطفی می گوید

    مرسی

    خدا امواتت رو بیامرزه
    مشکل ما با این کد حل شد
    متاسفانه برای برد کرامب 200خط کد فانکشن وجود داره که قالب رو هم خراب میکنه ارور هم میده
    مرسی از دکتر وردپرس

  2. davod می گوید

    سلام
    من از breadcrumbs افزونه yoast استفاده میکنم . تو صفحات پست ها ، تا قسمت خانه-موضوع- رو درست میخونه اما قسمت عنوان مطلب جاری رو یه مطلب دیگه میزاره .
    اون مطلب دیگه ای که میذاره، آخرین مطلب از حلقه ی بالای صفحه هست .( حلقه بالای صفحه آخرین مطالب مربوط به موضوعی خاص هست .)
    مثلا بالای صفحه آخرین نوشته های مذهبی و به تعداد 10 تا ، خب؟ عنوان دهمین نوشته رو میاره میذاره به جای breadcrumbs . یعنی به جای اینکه عنوان صفحه ای که توش هستیم رو بیاره ، اون دهمین عنوان حلقه رو میذاره :D
    امیدوارم منظورمو رسونده باشم .
    چطوری میشه این موضوع رو حل کرد ؟ نمیخوامم اون نوشته های تازه موضوع خاص رو حذف کنم

    1. آرش حیدری می گوید

      سلام
      بله ، خوب الان کدهای breadcrumbs رو قرار دادیم دیگه که استفاده کنید
      الان مشکلی هستش ؟

  3. ArYanPour می گوید

    ممنون : )

  4. SANA می گوید

    سلام من دنبال یه آموزش به همین ساده ای هستم
    که راحت بتو نم باش کار کنم
    ولی من با asp.net کار می کنم و از وردپرس استفاده نمی کنم میشه یه آموزش خوب درasp.net هم بذارید…..

  5. ashkan می گوید

    سلام و خسته نباشید آقا آرش ببخشید من فقط میخوام سردسته یا همون دسته مادر نشون داده بشه (میگم من همه گزینه هارو تیک میزنم خودتون میدونید امکان داره یک پست چندتا دسته داشته باشه)مثلا دسته A دسته مادر میباشد و زیر شاخه های اون F , G , B میباشد من فقط میخوام A نشون داده بشه یعنی بشه:
    خانه–>A –> اسم پست
    ولی در این کد که شما گذاشتید میشه این
    خانه–> G<– F< — B اسم پست
    همه زیر شاخه ها نشون داده میشه
    با تشکر

    1. آرش حیدری می گوید

      سلام
      متوجه هستم منظورتونو ، اما راستش کدش رو بلد نیستم ، باید داخل codexوردپرس جستجو کنید ببینید همچین کدی هستش یا نه … بعدش ما رو هم بی زحمت خبر کنید : )
      با تشکر

  6. محمد می گوید

    مرسی خیلی عالی بود
    واقعا آموزشاتون عالیه
    در ضمن برای تشکر از خدماتتون وب سایتتون رو لینک کردم.
    با تشکر

    1. آرش حیدری می گوید

      ممنون ، خیلی لطف دارید.

  7. میهمان می گوید

    آقا ممنون، درست شد

  8. میهمان می گوید

    شما این لینک رو مشاهده کنید
    elmevarzeshدات com/

    1. آرش حیدری می گوید

      سلام
      بله از کدهای breadcrumbs ما استفاده کرده . الان مشکل چی هستش ؟
      با تشکر

  9. میهمان می گوید

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

    1. آرش حیدری می گوید

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

  10. AMIR می گوید

    ممنون از اموزشتون

  11. محمد می گوید

    مثل همیشه کاربردی و مفید

  12. احسان می گوید

    سلام دوست گرامی من تازه برنامه نویسی رو یاد گرفتم خواستم بدونم واسه اینکه وقتی یک صفحه وب رو طراحی میکنیم و مطمئن بشیم در اندازه های دیگه هم بخوبی صفحه وب نمایش داده میشه باید از چه تکنیکی استفاده کرد ممنون میشم منو راهنمایی کنید با تشکر

    1. آرش حیدری می گوید

      سلام
      از سایز استاندارد اکثر سایت ها استفاده کنید.
      همینطور در مطالب قبلی سایت آموزی در رابطه با این کار نوشتیم که می تونید ازش استفاده کنید
      doctorwp.com/?p=529
      همینطور مطلب زیر هم مفید هستش براتون ، مشاهده کنید ، سپاس
      doctorwp.com/?p=432

  13. امین می گوید

    آقا چرا خیلی کم مطلب میزارید؟

    1. آرش حیدری می گوید

      سلام ، راستش یکم درگیر هاست همین سایت هستم … بعضی قسمت هاش مشکل داره…
      چشم حتما ، سعی می کنم بیشتر مطلب بزارم
      تشکر

  14. محسن می گوید

    سلام چرا اون كادر مستطيلي رو نشون نميده

    1. آرش حیدری می گوید

      سلام ، باید ابتدا فایل های شیوه نامه رو به style.css اضافه کنید بعدش تو قالب کدهای html رو فراخوانی کنید ، کدهای php هم تو محل مورد نظر داخل کدهای html قرار بدید.

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.