نمایش موقعیت کاربران در وردپرس
شما اینجا هستید!
حتما با عنوانی که در بالا نوشته ایم بارها برخورد کرده اید. در برخی سایت ها مشاهده می کنیم که بخشی را برای نمایش موقعیت کاربران به نمایش گذاشته اند. در این بخش لینک هایی کنار هم مانند “وان اسکریپت »آموزش ها »آموزش وردپرس” قرار می گیرند و کاربر را از آدرسی که در آن موقعیت است، با اطلاع می سازد. اگر شما هم می خواهید چنین امکانی را به سایت خود اضافه کنید، همراه وان اسکریپت باشید.
نمایش موقعیت کاربران در وردپرس
امروز شما را با قابلیت BreadCrumb آشنا می کنیم. برد کرامپ شامل یک سری لینک می باشد که به به ترتیب و منظم در کنار هم قرار می گیرند. قابلیت BreadCrumb به کاربر نمایش می دهد که در حال حاضر در چه قسمتی از سایت قرار دارد. این امکان در سیستم های دیگر به نام های مختلف مثلا Speedbar استفاده می شود. همراه ما باشید.
حالت اول: کد های ساده BreadCrumb
کدهای BreadCrumb برای هر صفحه از سایت به یک شکل می باشد که ما آن ها را به همراه یک استایل مناسب برای شما آماده کرده ایم.
کد زیر را در فایل index.php قرار دهید:
|
1 |
شما اینجا هستید : <a href="<?php bloginfo('url'); ?>">خانه</a> |
کد زیر را در فایل archive.php قرار دهید:
|
1 |
شما اینجا هستید : <a href="<?php bloginfo('url'); ?>">خانه</a> --> <?php single_cat_title(); ?> |
کد زیر را در فایل single.php قرار دهید:
|
1 |
شما اینجا هستید : <a href="<?php bloginfo('url'); ?>">خانه</a> --> <?php the_category(', ') ?> --> <?php the_title();?> |
کد زیر را در فایل page.php قرار دهید:
|
1 |
شما اینجا هستید : <a href="<?php bloginfo('url'); ?>">خانه</a> --> صفحه <?php the_title();?> |
حالت دوم: کدهای BreadCrumb با استایل زیبا
با قرار دادن کدهای بالا در مکان های مشخص شده، کار تمام و کدها فعال می شوند و موقعیت را برای کاربران نمایش می دهند. اما همانطور که مشاهده می کنید ظاهر آن کمی ساده به نظر می رسد. اگر می خواهید این بخش را کمی زیباتر کنید، می توانید از کد های زیر استفاده کنید.
توجه » اگر حالت دوم را انتخاب می کنید پس به حالت اول کاری نداشته باشید و فقط مراحل زیر را انجام دهید.
مرحله اول: کد های زیر را به Style.css پوسته وردپرس خود اضافه کنید.
|
1 2 3 4 |
<div id="breadcrumbs"> #breadcrumbs{background:#f8f8f8;padding:5px 10px;margin-bottom:15px} #breadcrumbs a{color:#10afcc;} </div> |
کد زیر را در فایل index.php قرار دهید:
|
1 2 3 |
<div id="breadcrumbs"> شما اینجا هستید : <a href="<?php bloginfo('url'); ?>">خانه</a> </div> |
کد زیر را در فایل archive.php قرار دهید:
|
1 2 3 |
<div id="breadcrumbs"> شما اینجا هستید : <a href="<?php bloginfo('url'); ?>">خانه</a> --> <?php single_cat_title(); ?> </div> |
کد زیر را در فایل single.php قرار دهید:
|
1 2 3 |
<div id="breadcrumbs"> شما اینجا هستید : <a href="<?php bloginfo('url'); ?>">خانه</a> --> <?php the_category(', ') ?> --> <?php the_title();?> </div> |
کد زیر را در فایل page.php قرار دهید:
|
1 2 3 |
<div id="breadcrumbs"> شما اینجا هستید : <a href="<?php bloginfo('url'); ?>">خانه</a> --> صفحه <?php the_title();?> </div> |
تمام شد. به همین سادگی!
موفق باشید.
دیدگاهتان را بنویسید