Стили Bootstrap для WP-PageNavi

Часто для дополнения возможностей пагинации WordPress используется популярный плагин WP-PageNavi (wordpress.org/extend/plugins/wp-pagenavi). Данный плагин добавляет возможность навигации между страницами с помощью блока ссылок с номерами страниц и кнопками » и «. Оформление генерируемых плагином элементов по-умолчанию достаточно незамысловатое и легко дополняется желаемыми стилями.

Но что делать если в теме используется фреймворк Bootstrap (twitter.github.com/bootstrap)? Ведь в этом случае необходимо, чтобы созданные плагином элементы имели идентификаторы и классы фреймворка, более того, сама структура элементов должна быть иной. Одна из таких тем – Roots Theme (rootstheme.com).

Можно внести необходимые изменения в код самого плагина, однако, такое решение не самое удачное. Гораздо удобнее и корректнее – дополнить файл footer.php следующим скриптом:

jQuery(document).ready(function() {
  $wp_pn = jQuery('.wp-pagenavi');
  $wp_pn.removeClass('wp-pagenavi').addClass('pagination').wrapInner('<ul />').find('span').wrap('<a />');
  $wp_pn.find('a').wrap('<li />');
  $wp_pn.find('span.current').parents('li').addClass('active');
});

В результате его работы произойдет замена класса wp-pagenavi на pagination и коррекция структуры верстки, что приведет к тому, что используемые во фреймворке стили будут применяться к данному элементу.

Источник gist.github.com/3508080

Опубликовано

Обратите внимание на предыдущие записи: