Технология

Добавить и оформить пост-нумерацию постов в Genesis Themes без плагина

Добавить и оформить пост-нумерацию постов в Genesis Themes без плагина

В этом посте описывается, как добавить постраничную публикацию в Genesis Theme Framework без плагина и стилизовать его с помощью CSS. Большинство блоггеров знают, что разбиение постов на страницы – это один из способов увеличения просмотров страниц, снижения отказов и увеличения CTR. Genesis Theme Framework StudioPress предлагает некоторые профессионально разработанные темы и шаблоны WordPress. Под впечатлением его возможностей и настраиваемости мы переместили htpcBeginner в Genesis Theme Framework в июне 2012 года. С момента перехода на Genesis наш трафик постоянно увеличивается, Конечно, мы внесли и другие улучшения, но платные темы имеют ряд преимуществ, которые помогут вашему сайту в долгосрочной перспективе. Хотя большинство настроек темы Genesis довольно просты, некоторые требуют небольшой работы. Одной из таких задач является добавление пост-пагинации. Если вы предпочитаете добавлять пост-страницы, используя плагин, проверьте этот пост.

Вы также можете читать:

Посты

Genesis Theme Framework поддерживает номера страниц постов по умолчанию. Вам не нужно связываться с какими-либо кодами. Все, что вам нужно сделать, это добавить <!--nextpage-->в точку, где вы хотите разделить свой пост. Смотрите пример ниже:

First page contents <!--nextpage--> Second page contents <!--nextpage--> Third page contents

Действительно, добавить пост-нумерацию страниц так просто.

Стилизация номеров постов

Теперь наступает трудная часть. Обычные темы WordPress имеют плагины, такие как WP-PageNavi и WP-PageNavi Style, которые работают из коробки. Эти плагины не работают в Genesis Theme Framework из коробки. Не беспокойся Вы не нуждаетесь в них, и это очень легко стилизовать номера ваших постов. Сообщение с несколькими страницами по умолчанию выглядит следующим образом в детской теме Genesis:

Добавить и оформить пост-нумерацию постов в Genesis Themes без плагина

Post Pagination Before

Как вы можете видеть, это без каких-либо стилей. Чтобы стилизовать его, отредактируйте style.cssфайл в папке вашей темы (обычно /wp-content/themes/ThemeName). Пост-нумерация оформлена с использованием класса pages. Добавьте следующие стили для класса pages:

/*The section below styles the whole post page numbers area*/ .pages { font-size:12px; display:block; clear:both; padding: 3px 0 5px 5px; } /*The section below styles the post page number links and visited links*/ .pages a, .pages a:link, .pages a:visited, .pages a:active { padding: 4px 8px !important; margin: 3px !important; text-decoration: none !important; border: 1px solid #C8C8C2 !important; background: #FCFCFC !important; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1) !important; color: #0088B3 !important; } /*The section below styles the post pagination link while hovering mouse over over it*/ .pages a:hover { border: 1px solid #a7a7a3 !important; color: #fff !important; background: #0088B3 !important; }

Для Genesis 2.0.2 (HTML5) заменить .pagesна .entry-pagination.pagination( см. Комментарий ).

Это очень помогает, если вы уже немного знаете CSS. Имена говорят сами за себя. Цвета указываются в шестнадцатеричном коде. Границы, отступы и поля указываются в пикселях (px). Вы можете использовать этот сайт в качестве справочного материала и играть с различными настройками.

Рекомендуемые руководства:

Приведенный выше код вводил номера моих постов, как показано ниже:

Добавить и оформить пост-нумерацию постов в Genesis Themes без плагина

Post Pagination After

Добавление пост-страницы в вашу тему вручную

По умолчанию номера постов отображаются под постом слева. Ручное добавление функции пагинации в вашу тему дает вам больше контроля над тем, как и где отображаются номера страниц постов. Это требует немного знаний о структуре тем WordPress и PHP. Сначала вам нужно удалить постраничную пост-страницу по умолчанию, которая отображается после содержимого слева. Для этого добавьте следующий код в functions.phpфайл в папке дочерней темы.

//Remove Default Post Pagination remove_action( 'genesis_post_content', 'genesis_do_post_content_nav' );

Затем вы можете отобразить постраничную разметку в выбранном вами месте, добавив следующий код PHP:

Вместо цифр, если вы хотите отобразить «Следующая страница» и «Предыдущая страница», как показано на рисунке ниже:

Добавить и оформить пост-нумерацию постов в Genesis Themes без плагина

Genesis Post Pagination – Текст

Затем используйте следующий код PHP вместо приведенного выше:

Одним из способов добавления нумерации страниц к вашей теме является редактирование post.phpродительской темы Genesis (themes / genesis / lib / structure) в выбранном вами месте. Это требует некоторых знаний PHP, чтобы контролировать внешний вид и не нарушать вашу тему. Пример показан в моем другом сообщении, в котором также показано, как вставить пользовательский партнерский баннер или контент между содержимым публикации и нумерацией страниц. Помните, что любые изменения, внесенные в файлы родительской темы, будут потеряны при обновлении Genesis. Следовательно, это не рекомендуемый способ добавления постраничного разбиения на страницы .

Рекомендуемые руководства:

Второй и рекомендуемый метод – использование фильтров и хуков Genesis Theme. Вы можете использовать один из нескольких встроенных крючков. Чтобы добавить номера страниц публикации перед публикацией контента, откройте functions.phpфайл, расположенный в папке вашей дочерней темы, и добавьте следующий код PHP:

Вы можете изменить расположение номеров страниц, изменив genesis_before_post_contentхук. Сохранить и выйти. Теперь вы должны увидеть номера страниц в вашем сообщении.

Если вы думаете, что это сложно, попробуйте публиковать номера страниц с помощью плагина. Надеюсь это поможет! Идите вперед и добавьте постраничную публикацию на свой сайт, чтобы увеличить количество просмотров.

Источник записи: https://www.smarthomebeginner.com

Похожие записи
Технология

Как автоматически изменить размер AdSense в зависимости от размера окна браузера?

Технология

Полное руководство по настройке Pi Hole: лучший интернет без рекламы за 15 минут

Технология

Переместите UniFi Controller на новый хост без потери настроек

Технология

Как запустить PiHole в Docker на Ubuntu, без обратного прокси-сервера?

Sign up for our Newsletter and
stay informed
[mc4wp_form id="14"]

Политика конфиденциальности

Наш сайт использует файлы cookies, чтобы улучшить работу и повысить эффективность сайта. Продолжая работу с сайтом, вы соглашаетесь с использованием нами cookies и политикой конфиденциальности.

Принять