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

Mfano os tovuti ya Usio wa Usio

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 gif 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
• Weka script tu wakati una ukurasa ambao sio tu baada ya kurasa ambazo una zaidi ya chapisho la 1 kuonyesha utahitaji kupakia vitu vingi.

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

<? php / ************************* WEB REVENUE INFINITE SCROLLING ***************** ******** / / * Kazi ambayo itasajili na kuondokana na script isiyoyepuka ya script itatumiwe katika mandhari. * / kazi ya ishirini na mbili_script_infinite_scrolling () {wp_register_script ('infinite_scrolling', // jina la script get_template_directory_uri (). '/ js / jquery.infinitescroll.min.js', // ambapo faili ni safu ('jquery'), // script hii inahitaji script ya jquery null, // hawana script version namba ya kweli // script itawekwa juu ya footer); kama (! ni_singular ()) {// tu wakati tuna zaidi ya baada ya 1 // tutaweza kuzungumza script hii ya wp_enqueue_script ('infinite_scrolling'); }} // Weka maandiko yetu ya desturi! add_action ('wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling'); / * Kazi ambayo itaweka mwandiko usio na mpangilio kuonyeshwa kwenye ukurasa. * / kazi set_infinite_scrolling () {if (! ni_singular ()) {// tena, tu wakati tuna zaidi ya 1 post // kuongeza js script chini?> <script aina = "text / javascript"> / * Hii ndio Inifinite scrolling setting, unaweza kurekebisha hili kwa mapenzi yako * / var inf_scrolling = {/ * img: ni njia ya kupakia picha, ongeza icon nzuri ya kupakia icon huko msgText: ujumbe wa kupakia umekamilikaMsg: ujumbe uliotakamilika wa kupakia * / upakiaji { Img: "<? echo kupata_template_directory_uri ();?> / images / ajax-loading.gif", msgText: "Inapakia machapisho yafuatayo ....", imekamilikaMg: "Maagizo yaliyobezwa !!",}, / * Bidhaa inayofuata ni Weka Selector ijayo. NextSelector ni darasa la css la urambazaji wa ukurasa. Kwa upande wetu ni # nav-chini .nav-ya awali ya * / "Selector ijayo": "Nambari ya chini -na .nav-ya awali", // navSelector ni id css ya ukurasa wa navigation "navSelector": "# N-chini ", // itemSelector ni div ambako chapisho linaonyeshwa" kipengele cha habari ":" makala ", // maudhuiSelector ni div ambapo maudhui ya ukurasa (posts) yanaonyeshwa" maudhuiSelector ":" # maudhui "}; / * Mwisho wa kufanya ni usanidi wa maudhuiSelector kwa msimbo usio na usio, na jquery ya kazi kutoka kwa usio na mipaka-scroll.min.js * / jQuery (inf_scrolling.contentSelector) .infinitescroll (inf_scrolling); </ script> <? }} / * tunahitaji kuongeza hatua hii kwenye ukurasa wa ukurasa. 100 ni namba ya kipaumbele ambayo inashughulikia utekelezaji wa baadaye. * / add_action ('wp_footer', 'set_infinite_scrolling', 100); ?>

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:

<div id = "yaliyomo" jukumu = "kuu"> <? php / * Onyesha Kurasa pekee kwenye kitabu cha usio na mwisho! Hapa ni siri: Unaweza kuweka post_type kwa nini unahitaji, ni rahisi! Baadhi ya post_types inaweza kuwa: kwingineko, mradi, bidhaa Tunaweza kuongeza aina nyingi za post kama tunavyotaka, kuzipatanisha na visa, kama 'post', 'ukurasa', 'bidhaa' * / $ args = array (// kuweka hoja 'post_type' => 'ukurasa', // Tu Kurasa); swala_sajili ($ args); // mzigo machapisho ikiwa (zilizo na_afuatayo ()):?> <? php / * Anza Loop * /?> <? php wakati (zilizo na_afuatayo ()): the_post (); // "kawaida" kitambulisho cha kuonyesha vitu hivi>>

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!