نمونه سوالات پیام نور
خانه / اموزش / وردپرس / آموزش ساخت breadcrum یا همان وردپرس بدون افزونه

آموزش ساخت breadcrum یا همان وردپرس بدون افزونه

سلام، امروز در این پست قصد داریم طریقه ساخت “نمایش مکان فعلی کاربر ”  یا همان breadcrum را برای وردپرس آموزش بدهیم. پس با ما همراه باشید.

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

قراره حاصل کارمون بشه این:

ابتدا کدهای php زیر رو به فایل function قالبون اضافه کنید.(فرقی نمیکنه کجاش )

function qeydarkalair_breadcrumb() {
echo '<ul id="crumbs">';
if (!is_home()) {
echo '<li><a href="';
echo get_option('home');
echo '">';
echo 'خانه';
echo "</a><i class='flsh'></i></li>";
if (is_category() || is_single()) {
echo '<li><i class="flsh"></i>';
the_category(' </li><li> ');
if (is_single()) {
echo "<i class='flsh'></i></li><li><a>";
the_title();
echo '</a></li>';
}
} elseif (is_page()) {
echo '<li><a>';
echo the_title();
echo '</a></li>';
}
}
elseif (is_tag()) {single_tag_title();}
elseif (is_day()) {echo"<li><a>آرشیو "; the_time('F jS, Y'); echo'</a></li>';}
elseif (is_month()) {echo"<li><a>آرشیو "; the_time('F, Y'); echo'</a></li>';}
elseif (is_year()) {echo"<li><a>آرشیو "; the_time('Y'); echo'</a></li>';}
elseif (is_author()) {echo"<li><a>آرشیو نویسنده"; echo'</a></li>';}
elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>آرشیو بلاگ"; echo'</li>';}
elseif (is_search()) {echo"<li><a>نتایج جستجو"; echo'</a></li>';}
echo '</ul>';
}

حالا کد زیرو تی فایل های single.php و  page.php قبل از حلقه <?php if (have_posts()) : while (have_posts()) : the_post();? اضافه کنید.

<div class="breadcrumb">
<?php if (function_exists('km_breadcrumb')) km_breadcrumb(); ?>
</div>

خب تا اینجا کارمون با کدهای php تموم شدحالا میرسیم به کدهای css. کدهای زیر رو هم به فایل style.css قالبتون اضافه کنید:


.breadcrumb {
display: block;
clear: both;
display: block;
clear: both;
margin: 10px 0px 30px;
background: #fff;
box-shadow: 1px 1px 7px rgba(0,0,0,.2);
}
.breadcrumb #crumbs{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-start;
overflow: hidden;
}

.breadcrumb li{
float:left;
position: relative;
margin:0 !important;
padding: 10px 0;
}

.breadcrumb li a{
padding: 10px 7px 10px 20px;
}
.breadcrumb li:first-child a{
padding: 10px 15px 10px 20px;
}
.breadcrumb li:first-child a:before{
border: none;
}

.breadcrumb li a:before {
content: '';
background: #fff;
color: #fff;
border-right: 12px solid;
border-bottom: 20px solid transparent;
border-top: 21px solid transparent;
position: absolute;
right: -11px;
top: 0px;
display: inline-flex;
}

.breadcrumb li a:after {
content: '';
background: #fff;
color: #fff;
border-right: 10px solid;
border-bottom: 20px solid transparent;
border-top: 21px solid transparent;
position: absolute;
left: 3px;
top: 0px;
display: inline-flex;
}
.breadcrumb li:last-child a:after{
left:0 !important;
}
.breadcrumb li a:hover:before{
background: #f0f0f0;
z-index: 5;
}

.breadcrumb li a:hover:after{
border-right-color: #f0f0f0;
z-index: 5;
}
.breadcrumb li:hover > a:after{
border-right-color: #f0f0f0;
z-index: 5;
}
.breadcrumb li:hover > a:before{
background: #f0f0f0;
z-index: 5;
}
#crumbs .flsh{
background: url("img/breadcrumbs.png") no-repeat;
position: absolute;
height: 40px;
width: 12px;
top: 0;
left: 2px;
z-index: 6;
}

تبریک میکنم منوی شما امادست . فقط کافیه فایل breadcrumbs.png با همین نام توی پوشه img قالبتون کپی کنید. فایل همین پایینه!

درباره ی مدیر سایت

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

قالب وردپرس

از ما حمایت کنید :