Навигация в стиле Apple.com для WordPress

Нашел прикольный пост, показывают как сделать красивую навигацию средствами вордпресса без всяких плагинов.

Сам код:

<ul id="breadcrumb">
<li><a href="/" title="Home"><img src="/images/home.png" alt="Home" class="home" /></a></li>
<li><?php the_category(', ') ?></li>
<li><?php the_title(); ?></li>
</ul>

Css для него:

#breadcrumb {
font: 11px Arial, Helvetica, sans-serif;
height:30px;
line-height:30px;
color:#9b9b9b;
border:solid 1px #cacaca;
width:100%;
overflow:hidden;
margin:0px;
padding:0px;
}
#breadcrumb li {
list-style-type:none;
float:left;
padding-left:10px;
}
#breadcrumb a {
height:30px;
display:block;
background-image:url('/images/bc_separator.png');
background-repeat:no-repeat;
background-position:right;
padding-right: 15px;
text-decoration: none;
color:#000;
}
.home {
border:none;
margin: 8px 0px;
}
#breadcrumb a:hover {
color:#35acc5;
}

Результат у меня в шапке

P.S. Постоянно показывает путь до последнего поста. Пофиксил так

<ul id=»breadcrumb»>
<li><a href=»/» title=»Home»>Главная</a></li>
<?php if ( !is_home() ) { ?>
<li><?php the_category(‘, ‘) ?></li>
<li><?php the_title(); ?></li>
<?php } ?>
</ul>

#breadcrumb {
background-color:#A81B45;
font: 12px Verdana;
height:30px;
line-height:30px;
color:#FAFAFA;
border:solid 1px #cacaca;
#width:100%;
overflow:hidden;
margin:0px;
padding:0px;
}

0.00 avg. rating (0% score) - 0 votes

9 комментариев

  • А как теперь устранить то, что при заходе в рубрику показывает последнюю запись есть идеи?
    В принципе, можно поставить условие: если это «категория», то дальше ничего не выводить, если это не категория, то выводить… в итоге останется один вариант, что будет выводить еще и название поста.
    Или я что-то упустил 🙂

    • Я на другом блоге условиями решал чтоб не выводился последний пост в категориях, архивах и т.п. На is_single() вроде завязал.

  • Кстати, поправь второй вариант кода, там у тебя кавычки неправильные и код неверно работает 😉

    • Нодар, это вордпресс так код форматирует, это не я )

  • В общем, вот решение:

    <ul id=»breadcrumb»>
    <li><a href=»/» title=»Home»>Главная</a></li>
    <?php if ( !is_home() ) { ?>
    <li><?php the_category(’, ‘) ?></li>
    <?php } ?>
    <?php if( (!is_home()) AND (!is_category()) ) { ?>
    <li><?php the_title(); ?></li>
    <?php } ?>
    </ul>

    У меня работает хорошо, если где-то скобки покривил WP — не бить 🙂
    p.s. ССЫЛКУ МНЕ! :))

  • Но опять же вылазят «боки», когда заходишь в теги, но это все опять же через логические условия php ставится на свои места 😉

  • так сказать final version:
    <ul id=»breadcrumb»>
    <!— Выводит название и ссылку на главную страницу —>
    <li><a href=»/» title=»Home»>Женский журнал Украины</a></li>
    <!— Выводит главную страницу >> название категории —>
    <?php if (is_category()) { ?>
    <li><?php the_category(’, ‘) ?></li>
    <?php } ?>
    <!— Выводит главную страницу >> название категории >> название статьи —>
    <?php if( (!is_home()) AND (!is_category()) AND (!is_tag()) ) { ?>
    <li><?php the_title(); ?></li>
    <?php } ?>
    <!— Выводит главную страницу >> название тега (метки) —>
    <?php if(is_tag()) { ?>
    <li>»<?php single_tag_title(); ?>»</li>
    <?php } ?>

    </ul>

  • Теги не использовал, только архивы и категории под условия ставил.

    P.S. А что это за женский журнал Украины такой? ))

    P.P.S. Из красивостей еще вот можно попробовать http://alexvolkov.ru/postranichnaya-navigaciya-pri-pomoshhi-jquery.html

  • Ой, ну это я у себя скопировал, забыл изменить на «главную» 🙂 за это сорри 🙂
    Кстати, косяк нашел… вот это:

    <!– Выводит главную страницу >> название категории >> название статьи –>
    <?php if( (!is_home()) AND (!is_category()) AND (!is_tag()) ) { ?>
    <li><?php the_title(); ?></li>
    <?php } ?>

    нужно заменить на вот это:

    <!— Выводит главную страницу >> название категории >> название статьи —>
    <?php if( (!is_home()) AND (!is_category()) AND (!is_tag()) ) { ?>
    <li><?php the_category(’, ‘) ?></li>
    <li><?php the_title(); ?></li>
    <?php } ?>

css.php