WordPress’te sonraki / önceki bağlantıları eklemek istiyor musunuz?
Sonraki ve önceki bağlantılar, kullanıcıların bir sonraki veya bir önceki gönderiyi görüntülemesine olanak tanıyan dinamik bağlantılardır.
Bu makalede, WordPress’te sonraki/önceki bağlantılarını nasıl kolayca ekleyebileceğinizi ve bunlardan en iyi şekilde nasıl yararlanabileceğinizi göstereceğiz.
WordPress’te Sonraki / Önceki Bağlantılar Nedir?
Sonraki / Önceki bağlantıları, bir WordPress teması tarafından eklenen ve kullanıcıların bir sonraki veya bir önceki gönderiye kolayca gitmesini sağlayan dinamik bağlantılardır. Bu, sayfa görüntülemelerini artırmaya ve hemen çıkma oranınızı azaltmaya yardımcı olabilir.
Varsayılan olarak, WordPress blog gönderileri ters kronolojik sırada görüntülenir (önce daha yeni gönderiler).
Bu, bir sonraki gönderinin bir kullanıcının görüntülediği mevcut gönderiden sonra yayınlanan gönderi olduğu ve önceki gönderinin mevcut gönderiden önce yayınlanan gönderi olduğu anlamına gelir.
Sonraki/önceki bağlantıları, kullanıcıların tek tek makalelerde ve blog arşiv sayfalarında kolayca gezinmesini sağlar. Ayrıca blogunuz için daha fazla sayfa görüntülemesi elde etmenize yardımcı olur.
Çoğu WordPress teması, her yazının altında otomatik olarak görüntülenen yerleşik sonraki ve önceki yazı bağlantılarıyla birlikte gelir. Ancak bazı temalar bunları göstermez veya WordPress web sitenizde nerede ve nasıl görüneceklerini özelleştirmek isteyebilirsiniz.
Bununla birlikte, WordPress’te sonraki ve önceki bağlantıların nasıl kolayca eklenebileceğine bir göz atalım.
Bu makalede ele alacağımız konuların listesi aşağıdadır.
- Bir Eklenti Kullanarak WordPress’e Sonraki / Önceki Bağlantıları Ekleme
- WordPress Temasına Sonraki / Önceki Bağlantıları Ekleme
- WordPress’te Sonraki / Önceki Bağlantıları Şekillendirme
- Sayfalara Sonraki / Önceki Bağlantıları Ekleme
- Küçük Resimlerle Sonraki / Önceki Bağlantıları Ekleme
- WordPress’te Sonraki / Önceki Bağlantıları Kaldırma
Bir Eklenti Kullanarak WordPress’e Sonraki / Önceki Bağlantıları Ekleme
Bu yöntem daha kolaydır ve web sitelerine kod ekleme konusunda rahat olmayan yeni başlayanlar için önerilir.
Öncelikle CBX Next Previous Article eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.
Etkinleştirmenin ardından, Ayarlar ” CBX Sonraki Önceki sayfasını ziyaret etmeniz gerekir. Buradan, web sitenizde sonraki ve önceki bağlantıları nerede göstermek istediğinizi seçebilirsiniz.
Eklenti, tekli yazılarda, sayfalarda, arşiv sayfalarında ve daha fazlasında Sonraki ve Önceki bağlantı oklarını göstermenizi sağlar.
Sonraki ve önceki bağlantılarınızı daha alakalı hale getirmek için, aynı kategori veya etiketten sonraki ve önceki gönderileri görüntülemeyi de seçebilirsiniz.
Eklentinin ücretsiz sürümü yalnızca sonraki ve önceki makaleler için oklar görüntülemenize izin verir. Kaydırmalı açılır pencere gibi diğer görüntüleme seçeneklerinin kilidini açmak için pro sürüme yükseltebilirsiniz.
Aynı taksonomiden sonraki / önceki gönderileri görüntülemeyi seçerseniz, Taksonomiye Göre Gezin sekmesine geçmeniz gerekir.
Buradan, sonraki ve önceki bağlantıları seçmek için hangi taksonomiyi kullanmak istediğinizi seçmeniz gerekir.
İsteğe bağlı olarak, eklenti Google Analytics kullanarak tıklamaları izlemenize de olanak tanır. Bu özelliği kullanmak için öncelikle WordPress’e Google Analytics’i yüklemeniz gerekir.
Bundan sonra, eklenti ayarlarında Google Analytics sekmesine geçin ve tıklama izleme seçeneklerini etkinleştirin.
İşiniz bittiğinde, değişikliklerinizi kaydetmek için Ayarları Kaydet düğmesine tıklamayı unutmayın.
Artık sonraki/önceki bağlantılarını çalışırken görmek için WordPress web sitenizi ziyaret edebilirsiniz.
Bu yöntem daha kolaydır ancak size fazla esneklik sağlamaz. Örneğin, ücretsiz sürüm bir sonraki veya bir önceki gönderi başlığını göstermez.
Daha fazla esnekliğe ihtiyacınız varsa, okumaya devam edin.
WordPress Temasına Sonraki / Önceki Bağlantıları Ekleme
Bu yöntem için WordPress tema dosyalarınızı düzenlemeniz gerekir. Bunu daha önce yapmadıysanız, WordPress’te kod kopyalama ve yapıştırma hakkındaki kılavuzumuza bir göz atın.
Ardından, bir FTP istemcisi kullanarak veya WordPress hosting kontrol panelinizdeki Dosya Yöneticisi uygulamasını kullanarak WordPress web sitenize bağlanmanız gerekir.
Bağlandıktan sonra /wp-content/themes/your-current-theme/ klasörüne gitmeniz gerekir.
Şimdi, single.php dosyasını bulmanız gerekecek. Bu, web sitenizdeki tekli gönderi öğelerini görüntülemekten sorumlu dosyadır.
Bazı WordPress temaları single.php dosyası içinde başka dosyalara referans verebilir. Bu dosyalar şablon parçaları olarak adlandırılır ve WordPress temanızın template-parts klasörünün içinde bulunur.
Daha fazla ayrıntı için WordPress temasında hangi dosyaların düzenleneceğine ilişkin makalemize bakın.
Bundan sonra, aşağıdaki kodu kopyalayıp şablon dosyasında sonraki ve önceki bağlantıları görüntülemek istediğiniz konuma yapıştırmanız yeterlidir.
<?php the_post_navigation(); ?>
Artık değişikliklerinizi kaydedebilir ve Sonraki / Önceki bağlantılarını çalışırken görmek için web sitenizi ziyaret edebilirsiniz.
Yukarıdaki şablon etiketi, bağlantı metni olarak yazı başlığı ile sonraki ve önceki yazıların bağlantısını gösterecektir. Bunların sonraki ve önceki makalelerin bağlantıları olduğunu söylemez.
Bunu biraz değiştirelim ve kullanıcılara bu bağlantılar hakkında biraz bağlam sağlayalım. Bunu, the_post_navigation şablon etiketi için mevcut parametreleri ekleyerek yapacağız.
Yukarıdaki kodu aşağıdaki ile değiştirmeniz yeterlidir:
<?php the_post_navigation( array(
'prev_text' => __( 'Previous Article: %title' ),
'next_text' => __( 'Next Article: %title' ),
) );
?>
Artık değişikliklerinizi kaydedebilir ve web sitenizi önizleyebilirsiniz.
İşte test sitemizde nasıl göründüğü:
Sonraki ve önceki gönderi başlıklarıyla birlikte özel karakterler ve oklar da kullanabilirsiniz.
Kodu aşağıdaki ile değiştirmeniz yeterlidir:
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>
İşte bu kodun test web sitemizde nasıl göründüğü:
Şimdi diyelim ki sonraki ve önceki bağlantıları kullanıcının o anda görüntülediği makaleyle daha alakalı hale getirmek istiyorsunuz.
Bunu, aynı kategoriden veya etiketlerden sonraki ve önceki bağlantıları göstererek yapabilirsiniz.
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
'in_same_term' => true,
'taxonomy' => __( 'category' ),
) );
?>
Bu kod WordPress’e aynı kategorideki sonraki ve önceki yazıları görüntülemesini söyler. Gerekirse taksonomi parametresini etiketler veya başka bir özel taksonomi olarak değiştirebilirsiniz.
WordPress’te Sonraki / Önceki Bağlantıları Şekillendirme
Artık WordPress’te Sonraki / Önceki bağlantılarını nasıl ekleyeceğimizi öğrendiğimize göre, bunları nasıl düzgün bir şekilde biçimlendireceğimize bir göz atalım.
WordPress varsayılan olarak yazı gezinti bağlantılarına otomatik olarak birkaç varsayılan CSS sınıfı ekler. Bu bağlantıları şekillendirmek için WordPress temanızda bu CSS sınıflarını kullanabilirsiniz.
İşte temanıza ekleyebileceğiniz bazı temel CSS’ler.
.nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
display: flex;
}
.nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
flex: 1 0 50%;
}
.nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
text-align: end;
flex: 1 0 50%;
}
Bu temel CSS basitçe sonraki ve önceki bağlantıları yan yana ancak aynı satırın farklı taraflarında görüntüler.
Ayrıca arka plan rengi, fareyle üzerine gelme efekti ve daha fazlasını ekleyerek gezinme bağlantılarınızı öne çıkarabilirsiniz.
Burada başlangıç noktası olarak kullanabileceğiniz bazı örnek CSS kodları bulunmaktadır.
.post-navigation {
background-color:#f3f9ff;
padding:0px;
}
.nav-previous, .nav-next{
padding:10px;
font-weight:bold
}
.nav-previous:hover,.nav-next:hover {
background-color:#0170b9;
}
.nav-previous:hover a:link ,.nav-next:hover a:link {
color:#fff;
}
Bu kod, bağlantı metnini stilize eder ve sonraki ve önceki bağlantıları daha belirgin hale getirmek için biraz arka plan rengi ve fareyle üzerine gelme efekti ekler.
WordPress Sayfalarına Sonraki / Önceki Bağlantıları Ekleme
Normalde WordPress’te blog yazıları için yazı gezinti bağlantıları kullanılır. Bunun nedeni, bu öğelerin ters kronolojik sırada yayınlanmasıdır.
Öte yandan, WordPress sayfaları genellikle kronolojik sırayla yayınlanmaz. Daha fazla ayrıntı için WordPress’te yazılar ve sayfalar arasındaki fark hakkındaki kılavuzumuza bakın.
Ancak, bazı kullanıcıların bir sonraki sayfayı kolayca bulabilmeleri için sayfa navigasyonunu görüntülemeleri gerekebilir.
Neyse ki, sayfalar için daha önce kullandığımız kodu kullanabilirsiniz. Ancak, kodu page.php şablonunun içine eklemeniz gerekecektir.
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>
İşte demo sitemizde nasıl göründüğü:
WordPress’te Küçük Resimlerle Sonraki / Önceki bağlantıları ekleme
Sonraki ve önceki bağlantılarınızı daha dikkat çekici hale getirmek ister misiniz? Görseller, kullanıcıların dikkatini çekmenin ve bu bağlantıları daha ilgi çekici hale getirmenin en kolay yoludur.
Yanlarında yazı küçük resmi veya öne çıkan resim bulunan sonraki ve önceki bağlantıları ekleyelim.
Öncelikle, aşağıdaki kodu temanın functions.php dosyasına veya siteye özel bir eklentiye eklemeniz gerekir.
function wpb_posts_nav(){
$next_post = get_next_post();
$prev_post = get_previous_post();
if ( $next_post || $prev_post ) : ?>
<div class="wpb-posts-nav">
<div>
<?php if ( ! empty( $prev_post ) ) : ?>
<a href="<?php echo get_permalink( $prev_post ); ?>">
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
<?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
</div>
</div>
<div>
<strong>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
<?php _e( 'Previous article', 'textdomain' ) ?>
</strong>
<h4><?php echo get_the_title( $prev_post ); ?></h4>
</div>
</a>
<?php endif; ?>
</div>
<div>
<?php if ( ! empty( $next_post ) ) : ?>
<a href="<?php echo get_permalink( $next_post ); ?>">
<div>
<strong>
<?php _e( 'Next article', 'textdomain' ) ?>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
</strong>
<h4><?php echo get_the_title( $next_post ); ?></h4>
</div>
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
<?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
</div>
</div>
</a>
<?php endif; ?>
</div>
</div> <!-- .wpb-posts-nav -->
<?php endif;
}
Bu kod basitçe, sonraki ve önceki gönderileri öne çıkan resimlerle veya gönderi küçük resimleriyle görüntüleyen bir işlev oluşturur.
Ardından, bağlantıları görüntülemek istediğiniz temanızın single.php dosyasına wpb_posts_nav() işlevini eklemeniz gerekir.
Temanızda zaten sonraki ve önceki bağlantıları varsa, the_post_navigation() işlevini içeren satırı bulup silmek isteyebilirsiniz.
Şimdi özel sonraki ve önceki bağlantılarınızı görüntülemek için aşağıdaki kodu ekleyin.
<?php wpb_posts_nav(); ?>
Kodu ekledikten sonra, değişikliklerinizi kaydetmeyi ve bağlantıları çalışırken görmek için web sitenizi ziyaret etmeyi unutmayın.
Şimdi, bu bağlantıların çok temiz görünmediğini fark edebilirsiniz.
Bunları stilize etmek için bazı özel CSS ekleyerek bunu değiştirelim.
.wpb-posts-nav {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 50px;
align-items: center;
max-width: 1200px;
margin: 100px auto;
}
.wpb-posts-nav a {
display: grid;
grid-gap: 20px;
align-items: center;
}
.wpb-posts-nav h4,
.wpb-posts-nav strong {
margin: 0;
}
.wpb-posts-nav a svg {
display: inline-block;
margin: 0;
vertical-align: middle;
}
.wpb-posts-nav > div:nth-child(1) a {
grid-template-columns: 100px 1fr;
text-align: left;
}
.wpb-posts-nav > div:nth-child(2) a {
grid-template-columns: 1fr 100px;
text-align: right;
}
.wpb-posts-nav__thumbnail {
display: block;
margin: 0;
}
.wpb-posts-nav__thumbnail img {
border-radius: 10px;
}
Artık değişikliklerinizi kaydedebilir ve web sitenizi ziyaret ederek sonraki ve önceki bağlantıları küçük resimlerle görüntüleyebilirsiniz.
İşte test sitemizde nasıl göründüğü:
Daha fazla ayrıntı için önceki ve sonraki gönderi bağlantılarına küçük resim ekleme hakkındaki kılavuzumuza bakabilirsiniz.
Bonus: WordPress’te Sonraki ve Önceki Bağlantıları Kaldırın
Bazı kullanıcılar WordPress’te sonraki ve önceki bağlantıları kaldırmak isteyebilir.
Örneğin, bazı kullanıcılar bu bağlantıların daha az yararlı olduğunu düşünebilir. Bazıları bunun yerine ilgili gönder ileri veya popüler gönderileri görüntülemek isteyebilir.
WordPress’te sonraki ve önceki bağlantıları kaldırmanın iki yolu vardır.
Yöntem 1. WordPress Temanızdaki Kodu Silin
WordPress’te sonraki ve önceki bağlantıları kaldırmak için, WordPress temanızdaki bağlantıları görüntülemekten sorumlu kodu kaldırmanız gerekir.
Bu yaklaşımla ilgili sorun, temanızı güncellediğiniz anda silinen kodun geri gelmesidir.
Bundan kaçınmak için bir alt tema oluşturmanız gerekir.
Ardından, ana temanızda sonraki ve önceki bağlantıları görüntülemekten sorumlu kodu bulmanız gerekir.
Genellikle single.php veya content-single.php şablonlarının içinde bulunur.
Temel olarak, aşağıdaki işlevi içeren kodu arayacaksınız.
<?php the_post_navigation() ?>
Bu kod biraz farklı bir biçime ve parametrelere sahip olabilir. Örneğin, test sitemizde tema bağlantıları görüntülemek için bu kodu kullandı:
the_post_navigation(
array(
'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
)
);
Bir alt tema kullanıyorsanız, bu şablonu alt temanızda çoğaltmanız ve ardından sonraki veya önceki bağlantıları görüntülemek için kullanılan satırları silmeniz gerekir.
Ana temanızda silmeyi tercih ederseniz, bunu da yapabilirsiniz.
Kodun silinmesi WordPress’in sonraki ve önceki bağlantıları görüntülemesini durduracaktır.
Yöntem 2. Sonraki ve Önceki Gönderiler Bağlantılarını Gizleyin
Bu yöntem, sonraki ve önceki bağlantıları gerçekten kaldırmaz. Bunun yerine, sadece onları insan okuyucular için görünmez hale getirir.
WordPress temanıza aşağıdaki Özel CSS’yi eklemeniz yeterlidir.
nav.navigation.post-navigation {
display: none;
}
Değişikliklerinizi kaydetmeyi ve gezinme bağlantılarının kaybolduğunu görmek için web sitenizi ziyaret etmeyi unutmayın.
Umarız bu makale WordPress’te sonraki ve önceki bağlantıları nasıl kolayca ekleyebileceğinizi öğrenmenize yardımcı olmuştur. Ayrıca en iyi web tasarım yazılımının nasıl seçileceğine ilişkin kılavuzumuzu veya en iyi alan adı kayıt şirketlerine ilişkin uzman karşılaştırmamızı da görmek isteyebilirsiniz.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Carolyn says
Hey there! This article is awesome! It was easy to get it all plugged in… however, do you know how to set it so that the previous/next navigates only within the category instead of navigating between ALL posts from all categories?
WPBeginner Support says
The code for that is in our article just before the Styling section
Yönetici
Shanna says
I created a WP.org website and I have 4 post per page. I don’t see a next page at the bottom of my page. I have over 20 blog posts. How can I see more blog posts or go to the next page?
WPBeginner Support says
If you are using pages instead of posts, you would not see a next page option, we would recommend taking a look at our guide below for understanding how pages work compared to posts.
https://www.wpbeginner.com/beginners-guide/what-is-the-difference-between-posts-vs-pages-in-wordpress/
This guide would show how to go through posts with previous and next links.
Yönetici
Kristi Borst says
Thanks for your article. Very helpful. How would I edit the call to limit the title to xx number of characters followed by eclipse “…”? I tried using css but nothing I did worked.
WPBeginner Support says
At the moment we do not have a beginner friendly way to set that up at the moment and that would require editing the code, not the CSS. If we find a way we would recommend we will be sure to share!
Yönetici
George Okinda says
Awesome! this helped. Thanks and God bless you all in Christ Jesus
WPBeginner Support says
You’re welcome, glad our guide was helpful!
Yönetici
Jennifer says
Hello,
So, how would the code look if you wanted to use a shortcode instead of adding it to the single.php file? I am using GeneratePress and I want to add a hook to my post pages.
Would it look like this?
add_shortcode( ‘posts-nav’, ‘prev_add_next_blogs’ );
the_post_navigation(
array(
‘prev_text’ => __( ‘← %title’ ),
‘next_text’ => __( ‘%title →’ ),
‘in_same_term’ => true,
‘taxonomy’ => __( ‘category’ ),
) );
add_action( ‘init’, ‘prev_add_next_blogs’ );
This did not work for me, any help would be greatly appreciated.
Thank you
Jennifer
WPBeginner Support says
You would want to place the add_shortcode below the code for one likely reason if you have not tested so far.
Yönetici
Ciprian Popescu says
This is a good tutorial and I have just implemented it on my blog. It will definitely help with user retention and bounce rate.
The Full Site Editor will never be able to do this using HTML only. That’s why having the code in functions.php (or, even better, in another PHP file called from functions.php) will always work. The function could be coded as a shortcode (with a slight modification to return data instead of echoing it):
`add_shortcode( ‘posts-nav’, ‘wpb_posts_nav’ );`
And then adding it to every post, as a shortcode block (for the Block Editor).
WPBeginner Support says
Thank you for your feedback on an alternative option!
Yönetici
WPBeginner Support says
For what it sounds like you’re wanting, you would want to add in_same_term to the post navigation code similar to the code below:
the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
'next_text' => true,
) );
Yönetici
Bipo says
Hello,
thanks for this tutorial.
While I’m trying to have thumbnail thing working with Divi (images are not shown), I would ask if it is posssible to add the category/taxonomy filter to this code too.
I mean: is it possible to show links and thumbs only when pages are in the same category?
(I’ve already added category to pages and the_post_navigation works )
Henrik Blomgren says
Hi, great tutorial. For old style WordPress.
Now if I wanted to do the image thumbnail post navigation next previous with the new thing in WordPress. The Full Site Editing?
How would I go around doing this tutorial with that?
WPBeginner Support says
Unless we hear otherwise, we would still recommend this method with the full site editor but we will certainly take a look and update the article as needed!
Yönetici
Henrik Blomgren says
Thank you very much for your reply. I forgot you still have full access to functions.php so the code will absolutely work.
Just that getting it into the single.html file is why my brain shut down. Since having to use single.php as the fallback for single posts feels a little weird.
So yes, please either update the article when time has been found or if possible please point me in the direction of how to use the function written in php in our html template.
Tina Filipčič says
Thank you. It helps a lot. I only have this problem now: the navigation is displayed on both – pages and posts. How to make it display on posts only?
WPBeginner Support says
The simplest method would be to have a template for your pages that does not use this, you can see more on our guide below about the template hierarchy:
https://www.wpbeginner.com/wp-themes/wordpress-template-hierarchy-explained/
as well as our guide below about creating a child theme:
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
Yönetici
Tina Filipčič says
Hello,
I solved the problem by adding this:
let page = document.querySelector(‘.page’);
page.querySelector(‘.wpb-posts-nav’).style = “display:none”