7 хитростей для настройки темы GeneratePress »WebNots

GeneratePress — одна из легких тем, которые вы можете получить для сайтов WordPress. Однако бесплатная версия поставляется с ограниченными функциями, такими как ссылка в нижнем колонтитуле и ограниченные настройки темы. Вам необходимо приобрести премиум-плагин GeneratePress, чтобы использовать все функции. Если вы знакомы с настройкой коммерческой темы WordPress, вы будете удивлены, узнав, что GeneratePress предлагает другой способ работы. Вот 5 основных приемов, которые вы, возможно, ищете для настройки темы GeneratePress.

7 хитростей для настройки темы GeneratePress

Добавить Google Analytics без плагина
Вставить биографию автора без плагина
Вставьте рекламу без плагина
Изменить дату публикации на дату последнего обновления
Добавить комментарий над разделом комментариев
Вставьте хлебную крошку Yoast
Удалить ссылки с автора и дат публикации

Использование элементов в GeneratePress

GeneratePress не предлагает параметры темы, как многие другие темы. Вы должны использовать функцию Elements и настроить пользовательские хуки для вставки кодов на свой сайт. Следуйте приведенным ниже инструкциям, чтобы использовать функцию Elements в теме GeneratePress.

Активация элементов

Перейдите в раздел «Внешний вид> GeneratePress».
Здесь вы увидите все модули темы.
Щелкните ссылку «Активировать» напротив параметра «Элементы».
Помните, что «Отключить элементы» — это другая функция для отключения заголовка. Вы должны активировать опцию «Элементы».

Настройка хуков в GeneratePress

После активации Elements вам необходимо настроить ловушку для вставки кодов на вашу страницу.

Перейдите в меню «Внешний вид> Элементы» и нажмите кнопку «Добавить».
В раскрывающемся списке «Выбрать тип элемента» выберите вариант «Зацеп».
Используйте «Настройки» и «Правила отображения», чтобы применить коды к нужному разделу вашего сайта.

1. Настройка Google Analytics

Выполните следующие шаги, чтобы добавить код отслеживания Google Analytics:

Создайте новый элемент крючка.
Укажите имя для своего элемента, например «Аналитика», и вставьте код отслеживания в раздел ввода текста.

Добавьте Google Analytics в GeneratePress

Выберите «wp_head» в качестве ловушки на вкладке «Настройки».

На вкладке «Правила отображения» выберите в раскрывающемся списке вариант «Весь сайт».

Опубликуйте свой элемент. Теперь на вашем сайте установлена Google Analytics. Вы можете проверить это, просмотрев исходный код и отправив тестовый трафик из своей учетной записи Google Analytics.

2. Вставьте биографию автора без плагина

Тема GeneratePress использует схему CreativeWork, которая не требует обязательной информации об авторе. Следовательно, тема не предлагает раздел биографии автора, чтобы продемонстрировать детали автора с изображением граватара. Вы можете использовать ловушку и собственный CSS, чтобы вставить поле автора для вашего сайта.

Создайте новую ловушку и вставьте следующий код в текстовое поле.

<div class="author-box">
<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' ));?></div>
<h4 class="author-title" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">
<span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
</h4>
<div class="author-summary">
<p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?>
</p>
<div class="author-links">
<a href="https://www.webnots.com/5-tricks-to-customize-generatepress-theme/<?php echo get_author_posts_url( get_the_author_meta("ID' ) ); ?>" title="Read more">
...
</a>
</div>
</div>
</div>

Выберите позицию для вашего автора на вкладке «Настройки», выбрав раскрывающийся список опций. Чаще всего вам нужно вставить поле автора «after_main_content» или «before_comments_container».
Обязательно установите флажок «Выполнить PHP», поскольку это код PHP.
В разделе «Правила отображения» выберите «Опубликовать» в качестве вашего местоположения, а затем «Все публикации».
Это добавит поле автора в сообщения вашего блога.

Используйте следующий CSS, чтобы изменить внешний вид окна автора. Вы можете вставить этот CSS в раздел «Внешний вид> Настройка> Дополнительные CSS».

.author-links a {
    font-size: 2em;
    line-height: 1em;
    float: right;
}
.author-box {
    padding: 30px 30px 0px 30px;
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid rgb(235, 235, 235);
    border-radius: 2px;
}
.author-box .avatar {
    width: 60px;
    border-radius: 50%;
    margin-right: 30px;
}
h4.author-title {
    margin-bottom: 1em;
}
h4.author-title:before {
    content: 'About';
}

Вы можете настроить поля, заголовок, ширину граватара и другие детали в соответствии с вашими требованиями, чтобы они соответствовали полю автора в макете вашего сайта. Кроме того, если вы ведете блог с одним автором, удалите код ссылок на авторов, чтобы отображалось имя автора без ссылки на страницу архива. Окно автора на опубликованном сайте будет выглядеть, как показано ниже:

Отображение окна автора в теме GeneratePress

3. Вставьте рекламу без плагина

Подобно Google Analytics, вы также можете вставить Google AdSense или любые другие рекламные коды.

Создайте новый элемент и вставьте рекламный код в текстовое поле.
Выберите одну из позиций крючка, чтобы вставить рекламу в заголовок, комментарии, нижний колонтитул, боковую панель или внутри контейнера.
Настройте правила отображения, чтобы показывать рекламу в типах сообщений или в архивах.

Вы можете указать все доступные позиции крючка в теме GeneratePress. крючок визуальное руководство документацию и выберите правильную позицию. Однако вы не можете вставлять рекламные объявления между сообщениями. Для этой цели вам может потребоваться плагин Ad Inserter.

4 Изменить дату публикации на дату последнего обновления

По умолчанию GeneratePress будет показывать дату публикации ваших сообщений в блоге. Вы можете скрыть дату публикации и показать дату последнего обновления как метаданные. Это поможет пользователям понять дату последнего изменения вашего контента в публикации. Добавьте приведенный ниже код CSS в раздел «Внешний вид> Настройка> Дополнительные CSS». Вы можете изменить фразу «Обновлено» на все, что захотите, однако оставьте после фразы пробел, чтобы она правильно смотрелась на опубликованном веб-сайте. Вы также можете просмотреть предварительный просмотр в настройщике, чтобы проверить, как он выглядит в сообщениях вашего блога.

.posted-on .updated {display: inline-block;}
.posted-on .updated + .entry-date {display: none;}
.posted-on .updated:before {content: "Updated on ";}

Помните, что хотя ваши сообщения в блоге будут показывать дату последнего обновления, они все равно будут содержать дату публикации. Google будет показывать дату публикации в результатах поиска, а не дату изменения. Если вы хотите, чтобы Google показывал дату изменения, вам может потребоваться изменить файл PHP темы, что не рекомендуется.

5. Добавьте ссылку для ответа над разделом комментариев

Еще одна проблема с GeneratePress — это раздел комментариев. По умолчанию все темы WordPress показывают текст «Оставить ответ» с гиперссылкой для текстового поля ответа на комментарий. Это поможет пользователям быстро перейти к текстовому полю комментария, когда к статье много комментариев. Однако в теме GeneratePress отображается заголовок с количеством комментариев, список комментариев, а затем текстовое поле ответа. Когда у вас есть сотни комментариев, пользователям нужно прокрутить страницу вниз, чтобы оставить комментарий. В большинстве случаев пользователи не отвечают и закрывают страницу, что приводит к ухудшению пользовательского опыта.

Следуйте приведенным ниже инструкциям, чтобы добавить ссылку «Оставить ответ» на свой сайт GeneratePress.

Создайте новый крючок и вставьте приведенный ниже код. Измените фразу «Оставьте свой ответ». на все, что угодно, например «Оставь ответ».

<h4>
<a href="https://www.webnots.com/5-tricks-to-customize-generatepress-theme/#respond" class="smooth-scroll">Leave your response.</a>
</h4>

Выберите ловушку «below_comments_title» на вкладке «Настройки».
Установите «Правила отображения» как «Сообщения» / «Все сообщения».
Опубликуйте элемент.

Теперь у вас будет красивая ссылка с плавной прокруткой, которая приведет пользователей к полю ответа на комментарий при нажатии на ссылку.

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

<h4 class="response">
<a href="https://www.webnots.com/5-tricks-to-customize-generatepress-theme/#respond" class="smooth-scroll">Leave your response.</a>
</h4>

Вам необходимо вставить следующий настраиваемый CSS в «Внешний вид> Настроить> Дополнительные CSS».

h4.response {
    text-align: center;
}
h4.response a {
    color: rgb(255, 0, 0);
}
h4.response a:hover {
    color: rgb(0, 0, 255);
}

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

6. Добавьте Yoast Breadcrumb в тему GeneratePress

Yoast SEO предлагает интегрированную навигацию по хлебным крошкам. Но вам необходимо вставить PHP-код в заголовок или файл single.php, чтобы отобразить структуру хлебных крошек. Если вы используете плагин Yoast SEO с темой GeneratePress, вы можете добавить хлебную крошку, не изменяя файлы PHP.

Создайте новый перехватчик и вставьте в текстовое поле приведенный ниже PHP-код Yoast.
Выберите ловушку «before_content», «before_main_content» или «before_entry_title» в зависимости от места, в котором вы хотите продемонстрировать хлебную крошку.
Отметьте опцию «Выполнить PHP».
Настройте правило отображения, чтобы отображать цепочку навигации для всех сообщений.
Опубликуйте свой элемент, чтобы мгновенно увидеть цепочку навигации на действующем сайте.

<!-- BEGIN Yoast Breadcrumb -->
<?php if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
<!-- END Yoast Breadcrumb -->

Добавьте приведенный ниже CSS, чтобы стильно показать хлебную крошку:

#breadcrumbs {
     box-shadow: 1px 1px #d5d4d4;
     background: #eeeded;
     border: 1px solid #eeeded;
     border-radius: 5px;padding: 0 5px 0 10px;
     font-size: 16px;
}

Настройте размер шрифта, цвет, фон и тень по своему желанию.

7. Отключить ссылку от автора и даты публикации

В идеале дата публикации или изменения публикации должна указывать на страницу архива даты. Если вы заметили, GeneratePress по умолчанию связывает URL-адрес сообщения с метаданными сообщения. Вставьте приведенный ниже код в файл functions.php, чтобы удалить ссылку на метаданные в сообщениях. Вы можете использовать плагин или дочернюю тему для вставки кода в файл functions.php. Кроме того, вы можете вставить код в functions.php, перейдя в раздел «Внешний вид> Редактор тем». Вы должны обновлять это изменение каждый раз, когда обновляете тему.

// Remove Link from Date
add_filter( 'generate_post_date_output','tu_remove_date_link', 10, 2 );
function tu_remove_date_link( $output, $time_string ) {
    printf( '<span class="posted-on">%s</span>',
        $time_string
    );
}

Точно так же GeneratePress по умолчанию привяжет имя автора к странице архива автора. Если вы ведете блог с одним автором, вы можете отключить ссылку на автора, добавив приведенный ниже код в файл functions.php.

// Remove Link from Author
add_filter( 'generate_post_author_output','tu_no_author_link' );
function tu_no_author_link() {
    printf( ' <span class="byline">%1$s</span>',
        sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%1$s <span class="fn n author-name" itemprop="name">%4$s</span></span>',
            __( 'by','generatepress'),
            esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
            esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
            esc_html( get_the_author() )
        )
    );
}

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

7 хитростей для настройки темы GeneratePress »WebNots