Сегодняшняя статья будет посвящена созданию постраничной навигации для cms Joomla 3 с использование css-фреймворка Bootstrap 3.

Подготовка

Для примера, возьмем специально подготовленную тему для Joomla, в которой уже реализована Bootstrap разметка и некоторые возможность вывода контента, предоставляемые cms.

Скачать данную тему можно по ссылке:
https://github.com/sbogdanov108/example_joomla

Также, по данной ссылке, можно скачать базу данных для создания полной копии используемого сайта.

Создание

Итак, возьмем в качестве примера для пагинации категорию Новости. Создадим через админку Joomla переопределение шаблона для компонента category. Для этого выберем в меню админки Расширения -> Менеджер Шаблонов -> Шаблоны -> Параметры Joomla Bootstrap 3.

Далее выберем вкладку Создать переопределение, в столбце Компоненты нажмем на com_content -> category. Теперь можно приступить к редактированию созданного шаблона переопределения.

Перейдем в редактор кода, откроем файл blog.php, который расположен в директории шаблона: joomlabootstrap3\html\com_content\category

В самом нижней части файла найдем следующий блок кода:

<div class="pagination">
  <!-- …здесь идет код -->
</div>

И удалим весь код, включая блок div, кроме следующей строчки:

<?php echo $this->pagination->getPagesLinks(); ?>

Теперь откроем файл pagination.php, который находится в директории joomlabootstrap3\html

Именно этот файл отвечает за формирование пагинации, которую можно привести к любому необходимому виду. Чтобы не дублировать здесь большое количество кода, я привел код этого файла к необходимому состоянию вывода пагинации как того требует фреймворк Bootstrap. Также добавил комментарии для лучшего понимания происходящих действий в коде. И оставил немного закомментированного кода для формирования дополнительных элементов пагинации.

Исходный код этого файла доступен по ссылке:
https://github.com/sbogdanov108/example_joomla/blob/master/templates/joomlabootstrap3/html/pagination.php

Таким образом, мы получили полностью рабочую постраничную навигацию в категории Новости, которая создана в соответствии с требованиями Bootstrap 3.