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

Yazan makale:
  • WordPress
  • Güncelleme: Temmuz 29, 2014

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

Örnekler Sonsuz Kaydırma sitesi os

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ükleme” mesajınız için hoş bir gif resmine ihtiyacınız olacak. Birçoğunu orada bulabilirsin, ama 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.
  • Yalnızca bir gönderi olmayan bir sayfanız olduğunda, yalnızca daha fazla öğe yüklemeniz gerekecek 1 yayınının bulunduğu sayfaların bulunduğu sayfaları yükleyin.

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):

<? php / **************************** WEB GELİŞTİRMEYEN KAYDIRMA ***************** ******** / / * Temada kullanılacak sınırsız yetenek komut dosyasını kaydeden ve zorlayan işlev. * / function twentytwelve_script_infinite_scrolling () {wp_register_script ('infinite_scrolling', // betiğin adı get_template_directory_uri (). '/ js / jquery.infinitescroll.min.js', //) burada dosya dizisi ('jquery', ///) bu betik, bir jquery betiği gerektirir, null, // bir betiğin sürüm numarası yok. if (! is_singular ()) {// sadece 1 yayından daha fazlasına sahip olduğumuzda // bu betiği yükleyeceğiz wp_enqueue_script ('infinite_scrolling'); }} // Özel scriptlerimizi kaydedin! add_action ('wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling'); / * Sayfada görüntülenecek sonsuz kaydırmayı ayarlayan işlev. * / function set_infinite_scrolling () {if (! is_singular ()) {// yine, yalnızca 1 gönderisinden daha fazlasına sahip olduğumuzda // // aşağıda js betiğini ekler mi? sınırsız kaydırma ayarında, bunu istediğiniz şekilde değiştirebilirsiniz * / var inf_scrolling = {/ * img: görüntü yükleme yolu, güzel bir gif yükleme simgesi ekleyin msgText: yükleme mesajı bitmişMsg: bitmiş yükleme mesajı * / yükleme: { img: "<? echo get_template_directory_uri ();?> / images / ajax-loading.gif", msgText: "Sonraki gönderileri yüklüyor ....", finishMsg: "Gönderilenler !!",}, / * Sonraki öğe: nextSelector'ı ayarlayın. NextSelector, sayfa gezinmesinin css sınıfıdır. Bizim durumumuzda # nav-below .nav-önceki a * / "nextSelector": "# nav-below .nav-önceki a", // navSelector "navSelector": "# nav-below sayfasının css kimliğidir. ", // itemSelector, yazının" itemSelector ":" makale ", /" contentSelector ":" # content "} sayfasının görüntülendiği div'dir; / * Yapılması gereken son şey, contentSelector öğesini sonsuz kaydırma yapacak şekilde yapılandırmaktır, infinite-scroll.min.js işlevinden jquery işlevi olan bir işlevdir. </script> <? }} / * bu eylemi sayfanın altbilgisine eklememiz gerekiyor. 100, daha sonraki bir yürütmeye karşılık veren öncelikli bir sayıdır. * / add_action ('wp_footer', 'set_infinite_scrolling', 100); ?>

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:

<div id = "content" role = "main"> <? php / * Sadece sonsuz kaydırmalı sayfalar göster! İşte sırrı: İhtiyacınız olan şey için post_type ayarlayabilirsiniz, bu basit! Bazı post_types şunlar olabilir: portföy, proje, ürün İstediğimiz sayıda posta türü ekleyebiliriz, onları virgülle ayırarak, 'post', 'page', 'product' * / $ args = array (// set up arguments) 'post_type' => 'page', // Only Pages); query_posts ($ args); // load posts if (have_posts ()):?> <? php / * Döngüyü başlat * /?> <? php while (have_posts ()): the_post (); // Bu öğeleri görüntülemek için "normal" döngü kodu?

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.