Убудова WordPress: дадайце панэль папярэдняга і наступнага паведамлення пасля паведамлення ў блогу
WordPress дае выдаўцам велізарны кантроль над тым, як чытачы арыентуюцца ў кантэнце, аднак многія сайты спыняюцца ў канцы паведамлення і цалкам пакідаюць наступны крок на волю выпадку. Даданне добра прадуманага раздзела папярэдняга і наступнага паведамлення адразу пасля кантэнту — адзін з самых простых спосабаў глыбей занурыць чытачоў у сайт, а таксама палепшыць паказчыкі ўзаемадзеяння, якія важныя як для маркетолагаў, так і для выдаўцоў.
Калі чытач заканчвае чытаць артыкул, ён знаходзіцца ў кропцы прыняцця рашэння. Без падказак ён, хутчэй за ўсё, сыдзе з сайта, як і працягне чытанне. Выразна прадстаўлены блок папярэдняга і наступнага паведамлення ліквідуе гэтае напружанне. Ён захоўвае кантэкстнасць уражанняў, адразу прапануе адпаведны кантэнт і стварае натуральны паток апавядання на вашым сайце.
З пункту гледжання аналітыкі, гэтая мадэль надзейна павялічвае колькасць старонак за сеанс і сярэдні час знаходжання на сайце. З пункту гледжання бізнесу, больш праглядаў старонак азначае больш магчымасцей для прадстаўлення чытачам падпіскі, формы для патэнцыйных кліентаў, унутраныя акцыі або манетызацыі. Вынікам гэтага не з'яўляецца рэйтынг. ўзламаць, але структурнае паляпшэнне, якое выраўноўвае карыстальніцкі досвед (UX) з мэтамі канверсіі.
WordPress ужо ведае, якія паведамленні папярэднічаюць і ідуць за бягучым, і захоўвае выяву і загаловак кожнага паведамлення. Падыход, апісаны ніжэй, выкарыстоўвае гэтыя дадзеныя падчас рэндэрынгу і дадае структураваны макет пасля зместу паведамлення. Паколькі ён працуе як плагін і выкарыстоўвае стандартныя перахопнікі WordPress, ён працуе з рознымі тэмамі без змены шаблонаў, што робіць яго партатыўным і зручным у абслугоўванні.
Убудова панэлі для папярэдняга і наступнага паведамленняў WordPress
Стварыце новую тэчку ўнутры вашай устаноўкі WordPress па адрасе wp-content/plugins/previous-and-next-post/ і дадайце файл з назвай previous-and-next-post.php з наступным зместам.
<?php
/**
* Plugin Name: Previous and Next Post
* Plugin URI: https://dknewmedia.com
* Description: Displays previous and next posts after the content with featured images and titles in a two-column grid.
* Version: 1.0.0
* Author: Douglas Karr
* Author URI: https://dknewmedia.com
*/
defined('ABSPATH') || exit;
function dk_add_previous_next_posts_after_content($content) {
if (!is_single() || !in_the_loop() || !is_main_query()) {
return $content;
}
$previous_post = get_previous_post();
$next_post = get_next_post();
if (!$previous_post && !$next_post) {
return $content;
}
ob_start();
?>
<div class="dk-prev-next-wrapper">
<?php if ($previous_post): ?>
<div class="dk-prev-next-item">
<a href="<?php echo esc_url(get_permalink($previous_post->ID)); ?>">
<?php echo get_the_post_thumbnail($previous_post->ID, 'medium'); ?>
<h3><?php echo esc_html(get_the_title($previous_post->ID)); ?></h3>
</a>
</div>
<?php endif; ?>
<?php if ($next_post): ?>
<div class="dk-prev-next-item">
<a href="<?php echo esc_url(get_permalink($next_post->ID)); ?>">
<?php echo get_the_post_thumbnail($next_post->ID, 'medium'); ?>
<h3><?php echo esc_html(get_the_title($next_post->ID)); ?></h3>
</a>
</div>
<?php endif; ?>
</div>
<?php
$navigation = ob_get_clean();
return $content . $navigation;
}
add_filter('the_content', 'dk_add_previous_next_posts_after_content');
function dk_prev_next_posts_styles() {
if (!is_single()) {
return;
}
?>
<style>
.dk-prev-next-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
margin-top: 48px;
}
.dk-prev-next-item {
text-align: center;
}
.dk-prev-next-item img {
width: 100%;
height: auto;
display: block;
margin-bottom: 12px;
}
.dk-prev-next-item h3 {
font-size: 1.1em;
line-height: 1.4;
margin: 0;
}
.dk-prev-next-item a {
text-decoration: none;
}
</style>
<?php
}
add_action('wp_head', 'dk_prev_next_posts_styles');Плагін падключаецца да фільтра the_content, які WordPress ужывае непасрэдна перад тым, як змест паведамлення выводзіцца на фронтэнд. Калі бягучае прадстаўленне — гэта адно паведамленне, плагін атрымлівае суседнія паведамленні, выкарыстоўваючы асноўныя функцыі WordPress. Калі папярэдняе або наступнае паведамленне існуе, ён выцягвае пастаянную спасылку, выяву і загаловак для кожнага з іх і адлюстроўвае іх у выглядзе табліцы з двума слупкамі. Кожны элемент размяшчае выяву спачатку, а загаловак — ніжэй, ствараючы зразумелую візуальную падказку для навігацыі.
Калі адзін з пастоў не існуе, напрыклад, у першым або апошнім пасце, плагін апускае гэты слупок, гарантуючы, што няма пустога або пашкоджанага макета. Гэты плагін захоўвае ўсё самадастатковым. Ён пазбягае перавызначэнняў тэм, паважае ўмовы WordPress і загружае стылі толькі для праглядаў аднаго паста. Пры жаданні вы можаце лёгка перанесці CSS у тэму або дадаць яго ў чаргу ў якасці табліцы стыляў пазней.
Усталёўка і актывацыя плагіна
Усталёўка плагіна адбываецца па той жа схеме, што і ўсталёўка любога карыстальніцкага плагіна WordPress. Пасля стварэння тэчкі і PHP файл, увайдзіце ў панэль адміністратара WordPress. Перайдзіце ў раздзел Убудовы і абярыце Усталяваныя ўбудовы. Вы павінны ўбачыць Папярэдні і наступны пост у спісе. Націсніце «Актываваць», і функцыя адразу ж стане даступнай.
Пасля актывацыі наведайце любую асобную публікацыю ў блогу на пярэднім інтэрфейсе. Унізе зместу публікацыі вы ўбачыце спасылкі на папярэднюю і наступную публікацыі ў выглядзе двухкалонкавай табліцы, кожная з якой мае выяву і загаловак, дзе гэта магчыма.
Паколькі плагін цалкам абапіраецца на асноўныя функцыі WordPress, ён будзе аўтаматычна адаптавацца па меры публікацыі новых паведамленняў, выдалення старых паведамленняў або абнаўлення вылучаных малюнкаў. У выніку атрымліваецца невялікае дапаўненне, якое незаўважна паляпшае навігацыю, узмацняе ўзаемадзеянне і павялічвае верагоднасць таго, што чытачы працягнуць сваё падарожжа па вашым сайце, а не скончаць яго ўнізе аднаго артыкула.
