WordPress Eğitimi: Sonsuz Kaydırma WP sitesi oluşturma

Güncellenme tarihi: 29 Tem 2014 / Makale: Rochester Oliveira

Sitenizin kullanılabilirliğini iyileştirmek için kesinlikle çalışıyorsunuz, bu nedenle kullanıcılarınız daha sık ve daha sık geri gelme olasılıkları olacak, değil mi? Eh, uygulayabileceğiniz geliştirmelerden biri sonsuz kaydırma tekniği. Temelde Twitter'da veya Facebook'ta sahip olduğumuz şeyle aynı, sadece temel içeriğin ilk sırada gösterilmesi ve siz aşağı doğru ilerledikçe daha fazla içeriğin eklenmesi. Bu, sitenizin performansını iyileştirmek (yükleme süresini kısaltmak) ve kullanıcı deneyimini iyileştirmek için oldukça iyidir (çünkü bir düğmeyi tıklatmak gibi daha fazla öğe yüklemek için herhangi bir işlem yapılmasına gerek yoktur).

Burada kendi sitenizde neden ve nasıl kullanılacağını göreceğiz

Sonsuz Kaydırma sitesi için örnekler

Büyük adamların orada ne yaptığını kontrol etmek her zaman iyidir ve bu tür bir etki (çoğu zaman farkedilmez) Facebook (canlı yayın), Twitter, Pinterest, Feedly gibi birçok büyük site ve uygulama tarafından kullanılır.

Feedly

twitter

Sonsuz Kaydırma - Yapılması ve Yapılmaması Gerekenler

Bu teknik, sitenizin normal sayfalama bağlantısını ("daha eski gönderiler" veya gönderilerinizden sonra numaralandırılmış sayfalar) kaldıracaktır. Bu tekniğin büyük “pro ”'su yükleme süresidir, çünkü daha az ürün ilk önce yüklenir ve çok daha hızlı bir siteye sahip olabilirsiniz ve sayfa yeniden yüklemesi olmadan daha fazla öğe eklendiğinden kullanıcı, 10“ sayfaları ”için aşağı kaydırılabilir. fark etmek, sitenizde daha uzun kalmak.

Çoğu sitede uygulanabilir, ancak çok fazla içerik ve resminiz olduğu ve çok fazla içeriğe sahip olmak istemediğiniz bloglar veya portföy benzeri siteler için daha uygundur.

Bu rehber kodlama yeterliliği gerektirmez ve dürüst olmak gerekirse, WordPress temanızı nasıl değiştireceğiniz konusunda biraz bilgi edinebilirsiniz.

Varlıklar

Kullanacağız Paul Irish'ın JS eklentisi. Indirin ve temanın js klasörüne yükleyin. Onları öğrenmek için Yirmi Twelve'i kullanacağız, ancak herhangi bir temada kullanmaktan çekinmeyin (ve eğer sizin için çalışmıyorsa sorularınızı gönderin).

Ayrıca "yükleniyor" mesajınız için güzel bir gif resmine ihtiyacınız olacak. Birçoğunu orada bulabilirsiniz, ancak Ajaxload site çok sayıda hazır ayar stilinde size yardımcı olacak harika bir araçtır ve renk düzeninize daha iyi uyan rengi seçebilirsiniz.

Wp-content / themes / twentytwelve / js altında senaryoyu ve güzel gif resminizi aldıktan sonra başlayabiliriz!

PHP kodu

Tamam, korkma, size bir kopyala ve yapıştır pasajı vereceğiz, ancak işte işe yaraması için yapmanız gerekenler:

  • Sonsuz kaydırma eklentisini dahili olarak yükleyecek ve kaydedecek bir işlev oluşturun. Bu, WordPress'in bunu iki kez yüklemesini ve işlevini kırmasını engeller.
  • Komut dosyasını yalnızca tek bir gönderi olmayan bir sayfanız olduğunda yükleyin - yalnızca gösterilecek 1'den fazla gönderinizin olduğu sayfaların daha fazla öğe yüklemesi gerekir.

Functions.php dosyası sizin temanın kalbidir. Tüm işlevsellik genellikle orada veya başka dosyalardan denir. Sonsuz kaydırma desteğini eklemek için bu kodu işlevler dosyanıza ekleyebiliriz (dosyanın sonuna ekleyin):

    
                    
            /*
                This is the inifinite scrolling setting, you can modify this at your will
            */
            var inf_scrolling = {                
                /*
                    img: is the loading image path, add a nice gif loading icon there                    
                    msgText: the loading message                
                    finishedMsg: the finished loading message
                */
                loading:{
                    img: "/images/ajax-loading.gif",
                    msgText: "Loading next posts....",
                    finishedMsg: "Posts loaded!!",
                },

                /*Next item is set nextSelector. 
                NextSelector is the css class of page navigation.
                In our case is #nav-below .nav-previous a
                */
                "nextSelector":"#nav-below .nav-previous a",

                //navSelector is a css id of page navigation
                "navSelector":"#nav-below",

                //itemSelector is the div where post is displayed
                "itemSelector":"article",

                //contentSelector is the div where page content (posts) is displayed
                "contentSelector":"#content"
            };

            /*
                Last thing to do is configure contentSelector to infinite scroll,
                with a function jquery from infinite-scroll.min.js
            */
            jQuery(inf_scrolling.contentSelector).infinitescroll(inf_scrolling);
                
    

Alternatif yaklaşım - yükleme sayfaları ve özel posta türleri

Önceki kod tüm gönderilerinizi yükleyecektir, ancak ne sayfalar göstermek isterseniz veya özel posta türleri (temsili destekliyorsa portföy öğeleri gibi) ne olacak? Eh, kodu biraz değiştirebilir ve aynı zamanda çalışabiliriz.

İhtiyacınız olan tek ayar, endeksinizde, kategorinizde veya öğeleri yükleyecek herhangi bir başka dosyada mevcut döngünüzü farklı bir kodla değiştirir. Döngününüzü bu kodla tanımlayabilirsiniz:

while (have_posts ()):

Yani, bir kez bulduktan sonra bu sihirbaz kodunu kullanabilirsiniz:

'sayfa', // Yalnızca Sayfalar); sorgu_ gönderileri ($ değiştirgeler); // gönderileri yükle if (have_posts ()):?>

Sonuç

Bu sadece bir "ısınma" makalesi. Bu tür bir yaklaşımla yapabileceğiniz pek çok şey var. Örneğin, kullanıcı scroll'ları olarak mağazanıza (WooCommerce kullanarak) ürün yükleyebilir veya post resimleri için harika paralaks benzeri bir yükleyici oluşturmak için daha fazla JS ve CSS kodu ekleyebilirsiniz.

Bu teknik hakkında ne düşünüyorsun? Sevdin mi? Kullanır mısın? Düşüncelerinizi yorum bölümünü kullanarak paylaşın!

Rochester Oliveira hakkında

Brasil, Itajubá (MG) 'dan bir web tasarımcısı ve girişimcisiyim. Karanlık konular hakkında yazmayı ve güzel şeyler yapmayı seviyorum.