Постраничная навигация в WordPress без плагинов

Рассмотрим организацию визуально отображаемой постраничной навигации на примере WordPress 3.3.1. Делать будет своими руками и мозгами, т.е. никаких плагинов. Для большей убедительности глядим на снимок экрана, представленный ниже.

WordPress - постраничная навигация самостоятельно

Отличием от имеющегося в официальном сборнике готового решения под названием WP-PageNavi будет наличие поддержки горячих клавиш. Внимательные читатели наверняка приметили подобную фишку в результатах поиска Яндекса или к примеру на пресловутом блоговом Хабрахабре. В качестве демонстрационной площадки, как и в предыдущих уроках выбираю стандартную TwentyTen. Делаю так для того, чтобы тестирование результата работы стало доступнее и нагляднее для большинства посетителей моей скромной площадки. Плюс, у автора сей записи нет сейчас никакого желания вот уже тысячный раз подряд прописывать схожие стили. Ладно, вернемся к делу.

Сборку осуществляем последовательно парой шагов:

  1. Откройте functions.php и добавьте:
    /*
     * Улучшенный перелистыватель
     */
    function ya_pager($p = '«', $n = '»') {
        global $wp_query, $wp_rewrite;
        $k = $wp_query->max_num_pages;
        $ya_pager = array(
            'base' => add_query_arg('paged','%#%'),
            'format' => '',
    	'type' => 'plain',
            'total' => $k,
            'current' => $wp_query->query_vars['paged'] > 1 ? $active = $wp_query->query_vars['paged'] : $active = 1,
    	'mid_size' => 1, // поэкспериментируйте с числовыми значениями
    	'end_size' => 1, // этой пары параметрой, чтобы менять максимальное количество выводимых пунктов
            'prev_text' => $p,
            'next_text' => $n
    	);
    	
        if( $wp_rewrite->using_permalinks() )
            $ya_pager['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );
    
        if( !empty($wp_query->query_vars['s']) )
            $ya_pager['add_args'] = array( 's' => get_query_var( 's' ) );
    
        print '<span style="font-family:serif,Arial;font-weight: normal;border:solid 1px #F1F1F1;padding: 0.5em 0.75em;">СТРАНИЦА '.$active.' из '.$k.'</span> '.paginate_links( $ya_pager );
    	
    };
    
    /*
     * Фильтры добавляют пользовательские CSS-идентификаторы  
     * к ссылкам вида "Назад-вперед", - необходимо для будущего отлова нажатия
     * клавиш посредством JavaScript
     */
    add_filter('next_posts_link_attributes', create_function('$n', 'return '."'".'id="next"'."'".';'));
    add_filter('previous_posts_link_attributes', create_function('$p', 'return '."'".'id="prev"'."'".';'));
    
  2. Вставьте, приведенный ниже код в файл с циклом вывода записей сайта (loop.php), заменив при этом стандартную навигацию:

    <?php if (  $wp_query->max_num_pages > 1 ) { ?>
    <!-- Наш творческий подход -->
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    	<script type="text/javascript">
    	 $(document).ready(function() {
    		 document.onkeydown = hotkeys;
    		 function hotkeys(h) {
    			if (!h) h = window.event;
    			var c = h.keyCode;
    			var b;
    			if (h.ctrlKey) {
    				if (c == 37) { b = document.getElementById('prev'); }
    				if (c == 39) { b = document.getElementById('next'); } 
    			}
    			if (b) location.href = b.href;
    		}
    	});
    	</script>
    	<div id="nav-below" class="page-link">
    		<?php ya_pager('&#8592; Ctrl', 'Ctrl &#8594;'); ?>
    	</div>
    <!-- Конец -->
    <?php } ?>
    
    Встроенный в WordPress JQuery почему-то упорно не хотел нормально срабатывать, потому наспех подключил нужную библиотеку с Ajax Google API. Принцип действия прост: на OnKeyDown прикрепляю свою функцию обработчик, отлавливающую нажатия комбинаций клавиш Ctrl и стрелок влево-вправо на цифровом островке клавиатуры.

Архива с демкой выкладывать не буду, - сами сообразите почему, удачи.



инвестирование . Сервис на дмитровском шоссе на fooj.ru.

© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.