Tutorial WordPress: Jinsi ya Kujenga Infinite Scrolling tovuti WP

Wewe hakika hufanya kazi kwa bidii ili kuboresha usability wa tovuti yako ili watumiaji wako wawe na furaha na uwezekano wa kurudi mara nyingi, sawa? Hakika, mojawapo ya maboresho unayoweza kutekeleza ni mbinu ya kupiga mipaka isiyo na mwisho. Ni sawa na kile tulicho nacho kwenye Twitter au Facebook, ambapo maudhui ya kimsingi yanaonyeshwa mara ya kwanza, na maudhui zaidi yanaongezwa unapoendelea. Hii ni nzuri kuboresha utendaji wa tovuti yako (kupunguza muda wa upakiaji), na kuboresha uzoefu wa mtumiaji (kwani hakuna hatua inahitajika kupakia vitu vingi, kama kubonyeza kifungo).

Hapa tutaona kwa nini na jinsi ya kuitumia kwenye tovuti yako mwenyewe

Mifano ya tovuti isiyo na mwisho ya Kutembeza

Daima ni vizuri kuangalia nini watu wakubwa wanafanya huko nje, na aina hii ya athari (ngumu mara nyingi) haitumiwi na maeneo mengi na programu, kama Facebook (hiyo chakula cha moja kwa moja), Twitter, Pinterest, na kweli.

Kitabu cha usio kamili - Fanya na usichokifanya

Mbinu hii itachukua kiungo cha kawaida cha pagination ya tovuti yako ("machapisho ya zamani", au kurasa zilizohesabiwa unazofuata baada ya machapisho yako). "Pro" kubwa ya mbinu hii ni wakati wa upakiaji, kwa kuwa vitu vidogo vilivyopakiwa kwanza unaweza kuwa na tovuti ya haraka zaidi, na kwa kuwa vitu vingi vinaongezwa bila mtumiaji wa upyaji wa ukurasa unaweza kupiga chini kwa "Kurasa" za 10 za posts bila hata kutambua, kukaa muda mrefu kwenye tovuti yako.

Inaweza kutumika katika maeneo mengi, lakini yanafaa zaidi kwa blogu au maeneo kama vile kwingineko, ambapo una maudhui mengi na picha, na hutaki kuzidi mtumiaji kwa maudhui mengi.

Mwongozo huu hauitaji ustadi wa kuweka alama, na kuwa mwaminifu hakika utajifunza kidogo juu ya jinsi ya kubadilisha mada yako ya WordPress kidogo.

Mali

Tutatumia JS Plugin ya Ireland ya Ireland. Pakua na kuiweka katika folda ya mandhari ya js. Tutatumia ishirini na mbili kwa ajili ya kujifunza inapendekeza lakini jisikie huru kutumia katika mandhari yoyote (na maswali ya posta ikiwa haikufanyi kazi kwako).

Pia utahitaji picha nzuri ya zawadi kwa ujumbe wako wa "upakiaji". Unaweza kupata mengi yao huko nje, lakini AjaxLoad tovuti ina chombo cha kushangaza kabisa kukusaidia na mitindo mingi ya preset na unaweza kuchagua rangi inayofanana na mpango wako wa rangi.

Mara tu una script na picha yako nzuri ya gif chini ya Wp-maudhui / themes / twentytwelve / js tunaweza kuanza!

Nambari ya PHP

Sawa, usiogope, tutakupa nakala na kubandika snippet, lakini hii ndio tunahitaji kufanya ili iweze kufanya kazi:

• Unda kazi ambayo itapakia na kujiandikisha Plugin isiyo na mipangilio ya ndani - Hii itawazuia WordPress kuipakia mara mbili na kuvunja utendaji wa mandhari
• Pakia hati tu wakati una ukurasa ambao sio chapisho moja - kurasa tu ambapo una zaidi ya chapisho 1 la kuonyesha itahitaji kupakia vitu zaidi.

Faili ya kazi.php ni moyo wa mandhari. Kazi zote ni kawaida huko au zinaitwa huko kutoka kwa faili nyingine. Kwa hiyo tunaweza kuongeza msimbo huu katika faili yako ya kazi ili kuongeza msaada usio na ukomo wa kuifuta (uongeze kwenye mwisho wa faili):

    
                    
            /*
                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);
                
    

Njia mbadala - kurasa za upakiaji na aina za posta za desturi

Msimbo uliopita utapakia machapisho yako yote, lakini utafanya nini ikiwa unataka kuonyesha kurasa, au aina za post desturi (kama vitu vya kwingineko, ikiwa mandhari unasaidia)? Naam, tunaweza kurekebisha kificho kidogo na kupata kazi pia.

Marekebisho tu yanayohitajika ni katika orodha yako, kikundi au faili yoyote ambayo itapakia vitu, utachukua nafasi ya kitanzi chako cha sasa na msimbo tofauti. Unaweza kutambua kitanzi chako kwa msimbo huu:

wakati (wana_kurasa ()):

Kwa hiyo, mara tu umeipata unaweza kutumia msimbo huu wa uchawi:

'ukurasa', // Kurasa tu); posta za swala ($ args); // pakia machapisho ikiwa (ina_post ()):?>

Hitimisho

Hii ni tu "habari ya joto". Kuna mambo mengi ambayo unaweza kufanya na aina hii ya mbinu. Kwa mfano, unaweza kupakia bidhaa katika duka lako (kwa kutumia WooCommerce, labda) kama miamba ya mtumiaji, au hata kuongeza zaidi JS na CSS code huko ili kujenga na kushangaza parallax-kama loader kwa picha post.

Unafikiria nini kuhusu mbinu hii? Unaipenda? Ungetumia? Shiriki mawazo yako kwa kutumia sehemu ya maoni!