1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function wp_corenavi() { global $wp_query, $wp_rewrite; $pages = ''; $max = $wp_query->max_num_pages; if (!$current = get_query_var('paged')) $current = 1; $a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999)); $a['total'] = $max; $a['current'] = $current; $total = 1; //1 - выводить текст "Страница N из N", 0 - не выводить $a['mid_size'] = 3; //сколько ссылок показывать слева и справа от текущей $a['end_size'] = 1; //сколько ссылок показывать в начале и в конце $a['prev_text'] = 'Назад'; //текст ссылки "Предыдущая страница" $a['next_text'] = 'Дальше'; //текст ссылки "Следующая страница" if ($max > 1) echo '<div class="navigator">'; if ($total == 1 && $max > 1) $pages = '<span class="pages">Страница ' . $current . ' из ' . $max . '</span>'."\r\n"; echo $pages . paginate_links($a); if ($max > 1) echo '</div>'; } |
В коде присутствуют подсказки, думаю кто захочет поиграться с настройками разберется без проблем.
2. Выводим навигацию на страницах нашей темы.
Для того, чтобы вывести навигацию, нужно вставить код в в нужном месте. К примеру навигация используется в файле category.php или index.php. Нужно найти стандартную навигацию заменить ее. У меня она выглядела так:
1 2 3 4 | <div> <div><?php next_posts_link('« Раньше') ?></div> <div><?php previous_posts_link('Позже »') ?></div></div> |
или как то так:
1 2 3 4 5 6 | <nav id="nav-single"><div class="assistive-text"><?php _e( 'Post navigation', 'gstudio' ); ?></div><span class="nav-previous"><?php previous_post_link( 'Предыдущая запись <br> %link'); ?></span><span class="nav-next"><?php next_post_link ('Следующая запись <br> %link'); ?></span><div class="clear"></div></nav><!-- #nav-single --> |
Может быть совсем иначе, но смысл думаю понятен. В общем это счастье нужно заменить на наш новый код, который выглядит так.
1 | <?php if (function_exists('wp_corenavi')) wp_corenavi(); ?> |
После всех этих действий, навигация уже начнет работать, вот только выглядеть она будет не очень. И поэтому перейдем к следующему пункту.
3. Зададим стили css нашей навигации
Ниже приведен css код с видом как на моем сайте, который нужно вставить в файл style.css. Если вы хоть немного разбираетесь в css, думаю вы без проблем подгоните его под себя.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | .navigator {padding:22px 0 25px 0;overflow:hidden;font-size:13px;color:#333333;clear:both;margin:0 auto;text-align:center;}.navigator a{color: #333333;font-size: 13px;padding:5px 9px;text-decoration: none;-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4);-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);box-shadow: 0 1px 2px rgba(0,0,0,0.4);}.navigator span.pages {padding: 3px 5px;color: #ffffff;background: #544DA7; padding:5px 9px;-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4);-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);box-shadow: 0 1px 2px rgba(0,0,0,0.4);}.navigator a:hover{background: #544DA7; color: #ffffff;font-size: 13px;text-decoration: none;padding:5px 9px;-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4);-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);box-shadow: 0 1px 2px rgba(0,0,0,0.4);}.navigator span.current {background: #fff;border: 1px solid #544DA7; font-size: 13px;padding:5px 9px;text-decoration: none;-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4);-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);box-shadow: 0 1px 2px rgba(0,0,0,0.4);}.navigator span.extend {padding:5px 9px;background:#f1f8f9;border: 1px solid #544DA7; }.str{background: #fff;color: #333333;font-size: 13px;padding:5px 9px;text-decoration: none;-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4);-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);box-shadow: 0 1px 2px rgba(0,0,0,0.4);} |
Вот и все что нужно, чтобы заработала постраничная навигация на WordPress. Если вы все вставили правильно то у вас появится симпатичная навигация.
На этом все. Спасибо за внимание 🙂
