jQuery, jCarousel, немного PHP и HTML/CSS и получится такая навигация, как у меня внизу на главной. При желании можно доделать до любой формы. Еще это минус один плагин, что есть гуд в плане ресурсов. Из плагинов у меня скоро наверно только акисмет останется.
Приступим.
Библиотеки
Нужна jQuery, а именно jquery-1.2.1.pack.js просит карусель и сама карусель
PHP/HTML
Я добавил код в footer.php. Можно и в index.php, но тогда придется добавлять и в archives.php. Код следующий:
<?php if(!is_single()){?> <?php $max_page = $wp_query->max_num_pages; if(empty($paged) || $paged == 0) { $paged = 1; } ?> <div id="alt_nav"> <div> <?php if(!is_paged()){ ?>Home <?php } else { ?> Page <?php echo $paged; }?></div> <ul id="mycarousel"> <?php for($i=1; $i<$max_page+1; $i++){ if($i == $paged){ ?><li><?php echo $i;?></li> <?php } else { ?> <li><a href=" <?php echo clean_url(get_pagenum_link($i));?> "><?php echo $i;?></a></li> <?php } }?> </ul> </div> <?php }?>
По английски главная и страницы у меня написаны потому что крусадер сохраняет русский в какой-то своей кодировке а мне лень искать, поэтому оставил так, пускай все думают, что я невозможный знаток английского ))
CSS
Самая большая часть кода тут.
#alt_nav {color:#9e9e9e;} #alt_nav .arrows1{ font:200% Helvetica; color:#9e9e9e; text-decoration:none; } #alt_nav .arrows1:hover{ font:200% Helvetica; color:#Cecece; } #alt_nav .arrows2{ font:100% Helvetica; color:#9e9e9e; text-decoration:none; } #alt_nav .arrows2:hover{ font:100% Helvetica; color:#Cecece; } #alt_nav .pageNum{ font:bold 65px Verdana; color:#e1e1e1; height:55px; display:block; overflow:hidden; } .jcarousel-skin-tango .jcarousel-container { padding:5px; border:1px solid white; border-radius: 8px; -o-border-radius: 8px; -icab-border-radius: 8px; -khtml-border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } .jcarousel-skin-tango .jcarousel-container-horizontal { width: 220px; height: 20px; padding-left:50px; background: #F0F6F9; } .jcarousel-skin-tango .jcarousel-clip-horizontal { width: 200px; } .jcarousel-skin-tango .jcarousel-item { width: 10px; height: 15px; } .jcarousel-skin-tango .jcarousel-item-horizontal { } .jcarousel-skin-tango .jcarousel-item-placeholder { background: #fff; color: #000; } .jcarousel-skin-tango .jcarousel-next-horizontal { position: absolute; top:0px; right: 5px; width: 32px; height: 32px; cursor: pointer; background: transparent url(next-horizontal.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-next-horizontal:hover { background-position: -32px 0; } .jcarousel-skin-tango .jcarousel-next-horizontal:active { background-position: -64px 0; } .jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -96px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal { position: absolute; top:0px; left: 5px; width: 32px; height: 32px; cursor: pointer; background: transparent url(prev-horizontal.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal:hover { background-position: -32px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal:active { background-position: -64px 0; } .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active { cursor: default; background-position: -96px 0; }
Подключение
Надо в шапку (header.php) добавить следующие строки:
<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script> <script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script> <link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css" /> <link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />Затем еще вставить секцию инициализации скрипта.
<script type="text/javascript"> function mycarousel_initCallback(carousel) { // Disable autoscrolling if the user clicks the prev or next button. carousel.buttonNext.bind('click', function() { carousel.startAuto(); }); carousel.buttonPrev.bind('click', function() { carousel.startAuto(); }); // Pause autoscrolling if the user moves with the cursor over the clip. carousel.clip.hover(function() { carousel.startAuto(); }, function() { carousel.stopAuto(); }); }; jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ auto: 0, wrap: 'last', scroll: 5, visible: 5, initCallback: mycarousel_initCallback }); }); </script>По опыту говорю — если что-то не работает, то это скорей всего неправильно прописанные пути виноваты.
Более конкретные примеры параметров для инициализации можно посмотреть на оффсайте
В итоге получается вот такая навигация
Из плюсов еще надо отметить, что при таком варианте навигации в коде есть прямые ссылки на все страницы сразу, но показываются только несколько, что есть гуд в плане SEO и не особо дерет глаз посетителям
5 комментариев
Я сильно не вникал в мануал установки и в код, надпись Home на фоне — это картинка? Или текст?
Это замена стандартному плагину wp-pagenavi?
Это текст. Насчет замены — таки да, хотя нет того функционала, но он мне и не нужен. Просто свои силы решил попробовать.
ПыСЫ. Что-то тебя акисмет в спам засунул второй раз…
Вот мой вариант, только он «получше», т.к. запоминает открытую страницу и она находится всегда в центре карусельки.
Сам вариант навигации описывается тут: http://wp-skins.info/2009/01/13/moy-otvet-chimberlenu-ili-novaya-postranichnaya-razbivka-stranits.html
Да, запоминать страницу это конечно удобно. Надо будет себе внести изменения
А как реализовать навигацию в Архиве? Например, я выбираю из свитка конкретный месяц — Август, в итоге отбражаются все заметки за август, а в конце всех заметок должна отображаться такая структура:
<<Июль | Cентябрь>>
как? *scratch*