Hiç bir blog yazısı okudunuz ve bir sonrakine atlamak için kolay bir yol istediniz mi?
İşte bu noktada sonraki/önceki bağlantıları işe yarar. Bu basit gezinme bağlantıları, okuyucuları sitenizdeki daha fazla içeriğe yönlendirerek onları aramak zorunda bırakmadan ilgilerini canlı tutar.
WordPress varsayılan olarak sonraki ve önceki yazı bağlantılarını içerir, ancak temanıza bağlı olarak bunlar görünür olmayabilir veya istediğiniz şekilde şekillendirilmeyebilir.
Ancak endişelenmenize gerek yok çünkü biz sizi koruyoruz! Farklı yöntemleri test ettikten sonra, bu bağlantıları eklemek ve özelleştirmek için birkaç güvenilir yol bulduk.
Bu kılavuzda, ister bir eklenti ister biraz özel kod kullanarak WordPress’te sonraki/önceki bağlantılarını nasıl kolayca ekleyebileceğinizi göstereceğiz.
WordPress’te Sonraki / Önceki Bağlantılar Nedir?
Sonraki ve önceki bağlantılar WordPress temalarında yerleşik olarak bulunan dinamik gezinme bağlantılarıdır. Kullanıcıların yazılar arasında kolayca hareket etmesini sağlayarak fazladan tıklama yapmadan daha fazla içerik keşfetmelerine yardımcı olurlar.
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 blogunuzda 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 ekleneceğine bir göz atalım. İstediğiniz bölüme atlamak için aşağıdaki bağlantıları takip edebilirsiniz:
- Adding Next / Previous Links to WordPress Using a Plugin (Easiest Method)
- Adding Next / Previous Links Using Custom Code
- Styling Next / Previous Links in WordPress
- Adding Next / Previous Links for Posts with Thumbnails
- Adding Next / Previous Links to WordPress Pages
- Bonus: Remove Next and Previous Links in WordPress
Bir Eklenti Kullanarak WordPress’e Sonraki / Önceki Bağlantıları Ekleme (En Kolay Yöntem)
Bu yöntem 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 edin. 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.
Bunu yapmak için, ‘Arşiv Görüntüleme Ayarları’ bölümüne gidin ve bu bağlantıları göstermek istediğiniz alanlar için ‘Evet’ seçeneğini seçin.
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.
Şimdi, ‘Tek Makale Görüntüleme Ayarları’ bölümüne gidin. Oklarınızın görüneceği varsayılan yazı türleri olarak Yazılar ve Sayfaların zaten seçili olduğunu göreceksiniz.
Önceki veya sonraki gönderi için yalnızca bir ok göstermek istiyorsanız, ‘Gönderiyi Göster’ ayarında ‘Önceki’ veya ‘Sonraki’ seçeneğini seçmeniz yeterlidir.
Ancak, her iki oku da görüntülemek istiyorsanız, ‘Her iki oku da göster’ ayarında ‘Evet’ seçeneğini seçin.
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 profesyonel sürüme yükseltebilirsiniz.
Bundan sonra, ‘Ok Stili Ayarları’ bölümündeki açılır menüden bir ok stili seçebilirsiniz.
Bunu yaptığınızda, aşağıdaki okların bir önizlemesini göreceksiniz. Ardından, devam edin ve ‘Ayarları Kaydet’ düğmesine tıklayın.
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çin. Ardından, ‘Ayarları Kaydet’ düğmesine tıklayın.
İ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.
Daha sonra ayarların geri kalanını olduğu gibi bırakabilir veya beğeninize göre yapılandırabilirsiniz. İşiniz bittiğinde, değişikliklerinizi kaydetmek için ‘Ayarları Kaydet’ düğmesine tıklamanız yeterlidir.
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 eklenti sürümü sonraki veya önceki yazı başlığını göstermez.
Özel Kod Kullanarak Sonraki / Önceki Bağlantıları Ekleme
Navigasyon bağlantıları eklemek için daha esnek ve özelleştirilebilir bir yol arıyorsanız, bu yöntem tam size göre. Sonraki/önceki bağlantılarını eklemek için WordPress tema dosyalarınızı düzenlemeniz gerekecektir.
En küçük bir hata sitenizi erişilemez hale getirebileceğinden bu çok riskli olabilir.
İşte burada WPCode devreye giriyor. En iyi WordPress kod parçacıkları eklentisidir çünkü web sitenizi bozma riski olmadan güvenli bir şekilde özel kod eklemenizi sağlar.
Daha fazla ayrıntı için WPCode incelememize bakın.
İlk olarak, WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Ayrıntılar için WordPress eklentisinin nasıl kurulacağına ilişkin eğitimimize bakın.
📒Not: WPCode’un ücretsiz bir planı vardır. Ancak, profesyonel sürüme yükseltmek size kod parçacıklarından oluşan bir bulut kütüphanesine, gelişmiş koşullu mantığa ve daha fazlasına erişim sağlayacaktır.
Etkinleştirmenin ardından WordPress kontrol panelinden Kod Parçacıkları ” +Snippet Ekle sayfasını ziyaret edin. Burada, ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin altındaki ‘+ Özel Snippet Ekle’ düğmesine tıklayın.
Bu sizi kodunuz için bir başlık ekleyerek başlayabileceğiniz ‘Özel Snippet Oluştur’ sayfasına yönlendirecektir.
Ardından, sağdaki açılır menüden kod türü olarak ‘PHP Snippet’i seçin.
Ardından, aşağıdaki özel kodu ‘Kod Önizleme’ kutusuna ekleyin:
1 | <?php the_post_navigation(); ?> |
Bundan sonra, ‘Ekleme’ bölümüne gidin ve ‘Otomatik Ekleme’ modunu seçin.
Kodunuz, aktivasyonun ardından sitenizde otomatik olarak çalıştırılacaktır.
Ardından, ‘Konum’ açılır menüsünü açın ve ‘Sayfaya Özel’ sekmesine geçin.
Ardından, kodunuzun konumu olarak ‘Gönderiden Sonra Ekle’yi seçin. Önceki/sonraki gönderi bağlantılarınız artık her gönderinin sonunda görüntülenecektir.
Ancak, aklınızda başka bir pozisyon varsa, o zaman bu seçeneği seçebilirsiniz.
Son olarak, en üste geri gidin ve ‘Etkin Değil’ anahtarını ‘Etkin’ olarak değiştirin.
Ardından, değişikliklerinizi kaydetmek için ‘Snippet’i Kaydet’ düğmesine tıklayın.
Artık Sonraki / Önceki bağlantılarını çalışırken görmek için WordPress sitenizi ziyaret edebilirsiniz.
Burada, eklediğiniz özel kodun yalnızca bağlantı metni olarak gönderi başlığı ile sonraki ve önceki gönderilerin bağlantılarını gösterdiğini fark edeceksiniz.
Bunların bir sonraki ve önceki makalelerin bağlantıları olduğu vurgulanmıyor.
Bunu değiştirmek istiyorsanız, bunun yerine ‘Kod Önizleme’ kutusuna aşağıdaki özel kodu ekleyebilirsiniz:
1 2 3 4 5 | <?php the_post_navigation( array( 'prev_text' => __( 'Previous Article: %title' ), 'next_text' => __( 'Next Article: %title' ), ) );?> |
Değişikliklerinizi WPCode’a kaydettikten sonra web sitenizi ziyaret etmeniz yeterlidir.
İş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:
1 2 3 4 5 | <?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:
1 2 3 4 5 6 7 | <?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 WPCode’da bu CSS sınıflarını kullanabilirsiniz.
İlk olarak, WordPress yönetici kenar çubuğundan Kod Parçacıkları ” Parçacık Ekle sayfasına gidin. Ardından, ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin altındaki ‘+ Özel Snippet Ekle’ düğmesine tıklayın.
‘Özel Snippet Oluştur’ sayfasına geldiğinizde, kodunuz için bir başlık ekleyin.
Ardından, açılır menüden kod türü olarak ‘CSS Snippet’i seçin.
Bundan sonra, aşağıdaki CSS kodunu ‘Kod Önizleme’ kutunuza ekleyebilirsiniz.
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .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%;} |
Ayrıca arka plan rengi, fareyle üzerine gelme efekti ve daha fazlasını ekleyerek gezinme bağlantılarınızın öne çıkmasını sağlayabilirsiniz.
Burada başlangıç noktası olarak kullanabileceğiniz bazı örnek CSS kodları bulunmaktadır:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .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;} |
Şimdi, ‘Ekleme’ bölümüne gidin ve ‘Otomatik Ekleme’ modunu seçin.
Özel kodunuz etkinleştirildikten sonra otomatik olarak yürütülecektir.
Devam edin ve ‘Etkin Değil’ düğmesini ‘Etkin’ olarak değiştirin.
Bundan sonra, ayarlarınızı kaydetmek için ‘Snippet’i Kaydet’ düğmesine tıklayın.
Şimdi, yazılarınızın stilize edilmiş bağlantılarını görmek için WordPress sitenizi ziyaret edin.
Bağlantı metninin artık biraz arka plan rengine ve sonraki ve önceki bağlantıları daha belirgin hale getirmek için bir fareyle üzerine gelme efektine sahip olduğunu fark edeceksiniz.
Küçük Resimli Yazılar için Sonraki / Önceki Bağlantıları Ekleme
Sonraki/önceki bağlantılarınızı daha dikkat çekici hale getirmek istiyorsanız, bağlantılarla birlikte gönderi küçük resimlerini de sergileyebilirsiniz. Görseller, kullanıcıların dikkatini çekmenin ve bu bağlantıları daha ilgi çekici hale getirmenin en kolay yoludur.
Bunu yapmak için functions.php dosyanıza özel kod ekleyebilirsiniz, ancak en küçük hatanın web sitenizi bozabileceğini unutmayın. Bu nedenle bunun için de WPCode kullanmanızı öneririz.
Eklenti etkinleştirildikten sonra, Kod Parçacıkları ” +Snippet Ekle sayfasına gidin ve ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin altındaki ‘+ Özel Snippet Ekle’ düğmesine tıklayın.
‘Özel Snippet Oluştur’ sayfasına yönlendirildikten sonra, kodunuz için bir başlık eklemeniz gerekir.
Ardından, sağdaki açılır menüden kod türü olarak ‘PHP Snippet’i seçin.
Bundan sonra, aşağıdaki özel kodu ‘Kod Önizleme’ kutusuna ekleyin:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 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.
Snippet’i girdikten sonra, anahtarı ‘Aktif’ olarak değiştirebilir ve ‘Snippet’i Kaydet’ düğmesine tıklayabilirsiniz.
Ardından, Kod Parçacıkları ” + Parçacık Ekle sayfasına geri dönmeniz ve ‘Özel Kodunuzu Ekleyin’ seçeneğinin altındaki ‘Parçacık Kullan’ düğmesine tıklamanız gerekir.
‘Özel Snippet Oluştur’ sayfası açıldığında, aşağıdaki kodu kopyalayın ve ‘Kod Önizleme’ kutusuna yapıştırın:
1 | <?php wpb_posts_nav(); ?> |
Bu kod, bağlantıları nerede görüntülemek istediğinize karar verir.
‘Kod Türü’ açılır menüsünden ‘PHP Snippet’ seçeneğini seçtiğinizden de emin olun.
Ardından, ‘Ekleme’ bölümüne gidin ve otomatik kod yürütme için ‘Otomatik Ekleme’ modunu seçin.
Ayrıca ‘Konum’ bölümünü genişletebilir ve ‘Sayfaya Özel’ sekmesine geçebilirsiniz. Buradan, küçük resimlerin bağlantıların yanında düzgün bir şekilde görünmesi için ‘Gönderiden Sonra Ekle’ seçeneğini seçin.
Son olarak, anahtarı ‘Etkin’ olarak değiştirebilir ve ‘Snippet’i Kaydet’ düğmesine tıklayabilirsiniz.
Şimdi, bağlantıları çalışırken görmek için web sitenizi ziyaret edebilirsiniz.
Şimdi, bu bağlantıların çok temiz görünmediğini fark edebilirsiniz.
Bunları şekillendirmek için WPCode ile bazı özel CSS ekleyerek bunu değiştirebilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | .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 WordPress’te önceki ve sonraki yazı bağlantılarına küçük resim ekleme kılavuzumuza bakabilirsiniz.
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 ziyaretçilerin bir sonraki sayfayı kolayca bulmalarına yardımcı olmak için sayfa navigasyonunu görüntülemek isteyebilir. İyi haber şu ki, daha önce WPCode ile kullandığımız kod, sayfalar için önceki ve sonraki bağlantıları gösterir.
Bu bağlantıları hem sayfalarda hem de gönderilerde görüntülemek istiyorsanız, herhangi bir ek değişiklik yapmanız gerekmeyecektir.
Ancak, sayfalar için yalnızca önceki/sonraki bağlantıları görüntülemek istiyorsanız, Kod Parçacıkları ” + Parçacık Ekle sayfasına gidin.
Burada, ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğini seçin.
‘Özel Snippet Oluştur’ sayfasına geldiğinizde, snippet’iniz için bir başlık ekleyin.
Ardından, açılır menüden kod türü olarak ‘PHP Snippet’i seçin.
Ardından, aşağıdaki özel kodu ‘Kod Önizleme’ kutusuna ekleyin.
Bu, gönderiler için önceki/sonraki bağlantıları eklemek için kullanabileceğiniz kodla aynıdır:
1 2 3 4 5 | <?php the_post_navigation( array( 'prev_text' => __( '← %title' ), 'next_text' => __( '%title →' ), ) );?> |
Bundan sonra, ‘Ekleme’ bölümüne gidin ve otomatik kod yürütme için ‘Otomatik Ekleme’ modunu seçin.
Bağlantılarınızın konumunu ‘Konum’ açılır menüsünden de yapılandırabilirsiniz. Örneğin, ‘Gönderiden Sonra Ekle’yi seçerseniz, bağlantılarınız her sayfanın sonunda görünecektir.
Aklınızda başka bir pozisyon varsa, açılır menüden uygun seçeneği seçmeniz yeterlidir.
Ardından, ‘Akıllı Koşullu Mantık’ bölümüne gidin ve ‘Mantığı Etkinleştir’ anahtarını açın.
🚨Not: Bu özelliğin yalnızca WPCode’un pro sürümünde mevcut olduğunu unutmayın.
Bundan sonra, ‘Koşullar’ açılır menüsünden ‘Göster’i seçin ve ‘+ Yeni grup ekle’ düğmesine tıklayın.
Bu, kod parçacığının ne zaman görüneceğine ilişkin koşulları tanımlamanız gereken bazı yeni ayarlar açacaktır.
Önceki/sonraki bağlantıları yalnızca sayfalarda görüntülemek istediğimiz için, ilk açılır menüyü açın ve sol sütundaki ‘Nerede (sayfa)’ sekmesine geçin.
Ardından, seçeneklerden ‘Gönderi Türü’nü seçin, ortadaki açılır menüden ‘Olduğunu’ seçin ve son açılır menüden ‘Sayfalar’ı seçin.
Son olarak, en üste geri gidin ve ‘Etkin Değil’ anahtarını ‘Etkin’ olarak değiştirin ve ‘Snippet’i Kaydet’ düğmesine tıklayın. Artık sayfalarınıza önceki/sonraki bağlantılarını başarıyla eklediniz.
İşte demo sitemizde nasıl göründüğü:
Bonus: WordPress’te Sonraki ve Önceki Bağlantıları Kaldırın
Bazı kullanıcılar WordPress’teki sonraki ve önceki bağlantılarını 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, orijinal temanın bir parçasıysa 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:
1 | <?php the_post_navigation() ?> |
Bu kod biraz farklı bir formata ve parametrelere sahip olabilir.
Örneğin, test sitemizde tema bağlantıları görüntülemek için bu kodu kullandı:
1 2 3 4 5 6 | 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:
1 2 3 | nav.navigation.post-navigation { display: none;} |
Değişikliklerinizi kaydetmeyi unutmayın.
Ardından, gezinme bağlantılarının kaybolduğunu görmek için web sitenizi ziyaret edin.
Bu makalenin WordPress’te sonraki ve önceki bağlantıları nasıl kolayca ekleyebileceğinizi öğrenmenize yardımcı olduğunu umuyoruz. WordPress blok kalıplarının nasıl kullanılacağına ilişkin kılavuzumuzu ve WordPress‘ te kısa kod kullanımına ilişkin temel ipuçları listemizi de 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.
Carolyn
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
The code for that is in our article just before the Styling section
Admin
Shanna
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
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.
Admin
Kristi Borst
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
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!
Admin
George Okinda
Awesome! this helped. Thanks and God bless you all in Christ Jesus
WPBeginner Support
You’re welcome, glad our guide was helpful!
Admin
Jennifer
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
You would want to place the add_shortcode below the code for one likely reason if you have not tested so far.
Admin
Ciprian Popescu
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
Thank you for your feedback on an alternative option!
Admin
WPBeginner Support
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,
) );
Admin
Bipo
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
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
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!
Admin
Henrik Blomgren
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č
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
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/
Admin
Tina Filipčič
Hello,
I solved the problem by adding this:
let page = document.querySelector(‘.page’);
page.querySelector(‘.wpb-posts-nav’).style = “display:none”