Shtojca me lëvizje të pafundme Super WordPress. Teknologjia Ajax për WordPress: shtojcat dhe kuptimet e tyre Teknologjia AJAX: përditësimi i të dhënave të faqes në internet pa ripërditësim

Nëse në faqen time shkoni në një faqe ose ndonjë kategori, atëherë në fund të faqes, pranë navigimit bazë anësor, do të klikoni në butonin Angazhohu, i cili ju lejon të nënvizoni postimet aktuale pa përditësuar faqen. Inki .

Unë do t'ju them drejtpërdrejt, në faqen time ka një lloj mënyre shamanike për të lundruar nëpër faqe - Unë e kam eksploruar këtë navigim për një kohë të gjatë dhe ndoshta për momentin nuk kam pasur një problem të tillë me PHP dhe jQuery . Tani do t'ju tregoj një mënyrë më korrekte dhe efektive të zbatimit të navigimit post-faqe me mundësinë e angazhimit asinkron të postimeve të reja. Kështu që ju nuk keni pse të shikoni kodin e faqes sime, por nëse keni ushqim, atëherë kërkoni prova mbi to në komentet përpara mbjelljes ose shikoni.

E përdorur me temën standarde TwentySeventeen, para së gjithash, kjo temë është e thjeshtë dhe nuk ka nevojë të shqetësoheni për kodimin, përndryshe mund ta instaloni direkt nga zona e administratorit nga depoja e temave të WordPress.

Çfarë do të përpiqemi të fitojmë nga kjo mbjellje?

• Postime të favorshme kur klikoni në butonin Vanquish more.
• Vëmendje e pafund, njoftimet dhe komentet do të theksohen automatikisht kur të lëvizni nëpër faqe (ashtu si në VKontakte).
• Le të sigurohemi që rritja e postimeve të funksionojë për çdo arkiv.

Për të filluar, ne duhet të dimë skedarin që lejon navigimin e pasme. Skedari i TwentySeventeen është vetëm index.php. Nëse nuk e kuptoni se cilët skedarë duhet të kërkohen në temën tuaj, ju rekomandoj t'i hidhni një sy.

Nëse keni qenë fitimtar për temat standarde (si unë), atëherë do t'ju kujtoj se për ndryshime duhet të vikorist (raportoni në videon në fund të postimit).

Gjeni një vend të përshtatshëm në shabllon midis ciklit while, pasi të përfundojë postimi i postimeve (për TwentySeventeen, ky vend është praktikisht menjëherë pas endwhile) dhe futni kodin atje:

Ajaxurl Tse në WordPress. true_posts Vargu i serializimit për të vendosur të gjithë parametrat e nevojshëm në rekord, p.sh. Numri i_faqes aktuale.

Dhe tani disa stile që do t'i shtojmë në butonin tonë për ta bërë atë të duket e lezetshme (stilet mund të futen në stilin standard.css në dosjen e temave).

Fitimtarët e suksesshëm të gjeneratës së parë do të kenë nevojë për këtë buton, i cili do t'ju kërkojë të shfaqeni në faqen e të gjitha regjistrimeve, por kini parasysh se nëse nuk ka regjistrime të mjaftueshme për dy faqe, atëherë nuk do të ketë buton për kë ose do të krijoni më shumë regjistrime iv, ose shkoni te Settings > Lexoni dhe ndryshoni numrin e imazheve të shfaqura në faqen e postimit atje.

Kroka më e lehtë prapa.

Me fjalë të tjera, nuk kemi më nevojë për stile CSS, pasi i keni shtuar ato, thjesht mund t'i fshini.

Së treti, në vend të skedarit loadmore.js, ndryshoni në:

Skedari functions.php (rreshtat 2 dhe 4) do të fshihet pa ndryshime.

Ajax Load More është shtojca më e fundit e rrotullimit të pafund të WordPress për ngarkimin dembel të postimeve, postimeve të vetme, faqeve, komenteve dhe më shumë me pyetjet me Ajax Powered.

Ndërtoni pyetje komplekse të personalizuara të WordPress me Ajax Load More code short Builder do të fusë kodin e shkurtër në faqen tuaj anësore duke përdorur redaktuesin ose direkt në skedarët tuaj të shabllonit.

Ajax Load More është i pajtueshëm për lëvizje të pafundme me shtojcat e njohura të tregtisë elektronike si WooCommerce dhe Easy Digital Downloads.

• Ndërtuesi i kodeve të shkurtra - Krijoni ngarkesën tuaj të personalizuar Ajax Më shumë kode të shkurtra tregojnë parametra të ndryshëm të WordPress në ndërtuesin tonë manual të kodeve të shkurtra (shihni Parametrat e kodit të shkurtër).
• Parametrat e pyetjes - Ajax Load More ju lejon të kërkoni WordPress Pyetje sipas llojit të postimit, formatit të postimit, datës, kategorisë, etiketave, taksonomive të personalizuara, termave të kërkimit, autorëve dhe më shumë!
• Modelet e përsëritësve — Ndryshoni dhe zgjeroni funksionalitetin e Ajax Load More duke krijuar shabllonin tuaj të përsëritësit që të përputhet me pamjen dhe ndjesinë e faqes tuaj të internetit (shih pamjet e ekranit).
• Instanca të shumëfishta - Mund të aktivizoni disa raste të Ajax Load More në një faqe, postim ose shabllon të vetëm.
• Ajax Filtering — Ajax Load Më shumë metoda e filtrimit me porosi do t'ju lejojë të filtroni dhe përditësoni rezultatet e pyetjeve tuaja Ajax.
• Përputhshmëria me shumë faqe — Menaxhoni shabllonet e përsëritësve në të gjitha sajtet në rrjetin tuaj.
• Paneli i cilësimeve - Personalizoni versionin tuaj të Ajax Load More për përditësimin e cilësimeve të ndryshme të shtojcave.

• përsëritës - Zgjidhni një shabllon përsëritës (shtesa e disponueshme). Default = 'default'
• post_type - Lista e llojeve të postimeve të ndara me presje. e parazgjedhur = 'postim'
• sticky_posts — Ruani renditjen e postimeve ngjitëse për listimin e Ajax. Default=false
• post_format - Pyetje sipas formatit të postës. Default = null
• kategori - Një listë e kategorisë e ndarë me presje për t'u përfshirë nga gjuajtja. Default = null
• kategori__dhe — Një listë e kategorive e ndarë me presje për t'u përfshirë me ID. Default = null
• kategori__jo_në — Një listë kategorish e ndarë me presje për t'u përjashtuar me ID. Default = null
• etiketë - Një listë etiketave të ndara me presje për t'u përfshirë nga gjuajtja. Default = null
• tag__dhe — Informacion rreth atyre që janë etiketa të veçanta ndërtesash për t'u përfshirë me ID. Default = null
• tag__not_in - Një listë etiketash e ndarë me presje për t'u përjashtuar me ID. Default = null
• taksonomia - Pyetje sipas emrit të taksonomisë me porosi. Default = null
• taksonomia_terms - Lista e ndara me presje e termave të taksonomisë me porosi (slug). Default = null
• operator_taksonomie
• taksonomia_lidhja - Marrëdhënia logjike midis secilës taksonomi kur ka më shumë se një. (DHE/OSE). e parazgjedhur = 'DHE'
• dita - dita e javës. Default = null
• muaji - muaji i vitit. Default = null
• viti - viti i postimit. Default = null
• taxonomy_operator — Operatori për krahasimin e kushteve taksonomike kundër (IN/NOT IN). e parazgjedhur = 'IN'
• meta_key - Tasti i personalizuar i fushës (emri). Default = null
• meta_value - Vlera e personalizuar e fushës. Default = null
• meta_compare - Operatori për krahasimin e meta_çelës dhe meta_vlerës kundër. e parazgjedhur = 'IN'
• meta_type - Lloji i personalizuar i fushës. e parazgjedhur = 'CHAR'
• meta_relation — Përdoret me hyrje të shumta në fushë të personalizuar (DHE/OR). e parazgjedhur = 'DHE'
• autor – Lista e autorëve e ndarë me presje sipas id. Default = null
• post__in — Lista e identifikimit të postimit të ndara me presje të përfshira në pyetje. Default = null
• post__not_in — Lista e veçuar me presje e përjashtimit të ID-së së postimit nga pyetja. Default = null
• kërkim - Pyetje për termin e kërkimit ('s'). Default = null
• custom_args - listë e ndarë me pikëpresje e argumenteve vlerë: çift. p.sh. tag_slug__dhe:dizajn,zhvillim; event_display: e ardhshme. Default = null
• post_status - Zgjidh statusin e postimit. e parazgjedhur = 'publikoj'
• renditja — Shfaq postimet në renditje ASC (në ngjitje) ose DESC (në zbritje). Parazgjedhja = 'DESC'
• orderby — Renditni postimet sipas datës, titullit, emrit, renditjes së menysë, autorit, ID-së së postimit ose numrit të komenteve. e parazgjedhur = 'data'
• offset - Kompensoni pyetjen fillestare (numrin). e parazgjedhur = '0'
• posts_per_page — Shumë informacione në lidhje me ngarkesën me secilën kërkesë të Ajax. e parazgjedhur = '5'
• lëviz — Ngarko më shumë postime ndërsa përdoruesi lëviz faqen (e vërtetë/e gabuar). Default = 'e vërtetë'
• lëviz_distance - Qëndroni përpara harkut deri në skaj për të shkaktuar ngarkimin e postimeve gjatë lëvizjes. e parazgjedhur = '150'
• scroll_container — Kufizoni Ajax Load Më shumë lëvizje të pafundme te një kontejner prind. Default = null
• max_pages — Numri maksimal i faqeve për t'u ngarkuar ndërsa përdoruesi është duke lëvizur (aktivizohet kur lëviz = e vërtetë). e parazgjedhur = '0'
• pause_override — Lejo që lëvizja të anashkalojë parametrin Pause dhe të aktivizojë ngarkimin e postimeve në lëvizje. Default = null
• pauzë — Mos ngarkoni postimet derisa përdoruesi të shtyp butonin Load More (e vërtetë/e gabuar). Default = 'e rreme'
• tranzicioni - Zgjidhni një postim që zbulon tranzicionin (zbehet/masoneri/asnjë). e parazgjedhur = 'fade'
• transition_container - Shfaq kontejnerin e ngarkimit të Ajax Load More (.alm-reveal). Default = 'e vërtetë'
• transition_container_classes — Shtoni klasa në .alm-reveal transition div.
• masonry_selector - emri i klasës së synuar për çdo artikull murature. Default = null
• masonry_animation — Zgjidhni llojin e tranzicionit të ngarkimit për artikujt e Masonerisë. (e parazgjedhur/zmadhuar/rrëshqitje lart/rrëshqitje-poshtë/asnjë). Default = default
• masonry_horizontalorder - Ruajtja e rendit horizontal. Default=e vërtetë
• images_loaded — Përmirësoni të gjitha imazhet për t'i shtuar vlerë të gjithë përmbajtjes së ngarkuar me ajax (e vërtetë/false). Default = 'e rreme'
• shkatërro_after — Hiq ajax load më shumë funksionalitet pasi numri 'n' i faqeve të jetë ngarkuar. Default = null
• progress_bar - Shfaq treguesin e shiritit të progresit në krye të dritares kur përmbajtja Ajax është e aktivizuar. Default = 'e rreme'
• progress_bar_color - Futni ngjyrën gjashtëkëndore të shiritit të përparimit. e parazgjedhur = 'ed7070'
• button_label — Teksti i njoftimit për butonin Load More. Parazgjedhja = 'Postime të vjetra'
— Përditësoni tekstin e butonit Load More ndërsa përmbajtja është duke u ngarkuar. Default = null
• Container_type — Zgjidhni llojin global të kontejnerit që është i instaluar në faqen e cilësimeve ALM. Default = null
• css_classes — Shtoni klasa të personalizuara CSS në kontejnerin Ajax Load More. Default = null
• id - Një ID unike për shembullin Ajax Load More.
• nested - ky është një shembull i Ajax Load More. Default=false

• Parazgjedhja - Funksionaliteti dhe stili jashtë kutisë.
• Fushat e avancuara të personalizuara - Lëvizje individuale të dhëna të fushave të personalizuara të avancuara me Ajax Load More.
• Bashkëngjitjet - Shtojcat e pafundme të postimeve me lëvizje.
• Destroy After — Hiq Ajax Load Më shumë funksionalitet pas numrit 'n' të faqeve.
• Listimi i ngjarjeve - Renditja dhe renditja e ngjarjeve sipas datës së fushës së personalizuar.
• Filtrimi - Rivendosni dhe filtroni në shembullin Ajax Load More.
• Flexbox - Krijimi i një rrjeti të përgjegjshëm Ajax Load More me Flexbox.
• Infinite Scroll — Një vështrim në funksionalitetin dhe stilet e reja të ngarkimit.
• Images Loaded — Ngarkoni imazhin përpara se të shfaqni përmbajtjen e ngarkuar me ajax.
• Masoneria - Planifikimi fleksibël i rrjetës me Masonry JS.
• Instanca të shumëfishta - Përfshini shumë Ajax Load More' në një faqe të vetme.
• URL-të e faqes — Krijoni URL unike pagimi për çdo pyetje Ajax Load More me shtesën SEO.
• — Postimet nuk do të ngarkohen derisa të inicohen nga përdoruesi.
• Postimet e parangarkuara — Ngarkoni me lehtësi një grup fillestar postimesh për të gjitha kërkesat e Ajax në server.
• Shiriti i Progresit - Shfaq treguesin e ngarkesës së shiritit të progresit me çdo kërkesë Ajax.
• Rezultatet e kërkimit - Kthimi i rezultateve bazuar në termat e kërkimit.
• Lëvizni kontejnerin - Kufizoni ngarkesën Ajax më shumë deri te kontejneri prind.
• SEO & Paging – Kombinoni këto dy shtesa për të krijuar një sistem të fuqishëm navigimi.
• Slideshow Gallery — Krijoni një galeri postimesh me shtesën Ajax Load More dhe Paging.
• Paraqitja e tabelës - Ajax Load More do të shfaqë rezultatet në një format tabele.

Siç e keni menduar tashmë, sot ka një rritje të vazhdueshme të hyrjeve të reja kur lëvizni në WordPress. Në vend të navigimit të pasme, shënimet do të shfaqen automatikisht ndërsa lëvizni. Është e mundur të shtoni hyrje të reja pa ri-ngarkim duke përdorur AJAX. Ne mund t'i bëjmë të gjitha, pa përdorur asnjë shtesë.

Tani do të tregoj dy mënyra për një përmirësim të tillë. Në thelb, kjo është e njëjta metodë, vetëm pak me fuqi të ndryshme. Opsionet do të aktivizohen automatikisht kur lëvizni ose kur shtypni një buton, për shembull - Shfaq më shumë. Çfarëdo që është më e përshtatshme për faqen tuaj varet nga ju.

Për të filluar, duhet të dini nëse dëshironi të prezantoni avancimin automatik. Më shpesh, ju duhet të instaloni një shkurtore për të hequr ciklin nga navigimi i pasme. Për shembull, skedari content.php është më i vogël. Kështu që ju mund të bëni të njëjtën gjë - index.php, archive.php, loop.php, kategori.php, search.php, etj. Këto skedarë mund të kenë navigim standard të WordPress ose një funksion të personalizuar. Aplikojeni atë në statistika.

Pra, nga ajo që keni të ngjashme me këtë, ajo zgjidhet vetë në fund të ciklit. Zëvendësoni këngën e re me kodin tjetër.

var ajaxurl = "/wp-admin/admin-ajax.php"; var true_posts = ""; var_faqja aktuale =; var max_pages = "";

Pjesa e sipërme e kodit nuk ka nevojë të gërvishtet, dhe boshti i poshtëm është përgjegjës për animacionin gjatë orës së tërheqjes. Ju nuk keni nevojë të fshini thjesht gjithçka në mes të bllokut - load_more_gs, por zëvendësoni gjithçka në mes të bllokut, jo vetë load_more_gs, por në vend të tij me kodin tuaj dhe do të keni animacionin tuaj.

UPD. Meqenëse pas promovimit, do të jetë më mirë të punoni në anën e kategorisë, sesa në anën e kërkimit, mund të provoni të zëvendësoni rreshtin e 4-të të kodit me një dy të ri:

// Zëvendëso këtë var true_posts = ""; // Tse $str = serialize($wp_query->query_vars); var true_posts = "";

Tani do të shtojmë stile për animacionin tonë. Nëse e keni parë tashmë këtë, mund ta kaloni këtë pikë.

#load_more_gs( gjerësia: 53 px; mbushje: 50 px 0; margjina: 0 automatike; ) .cssload-container( position:relative; ) .cssload-whirlpool, .cssload-whirlpool::fore, .cssload-whirlpool: absolute; krye: 50%; majtas: 50%; kufiri: 1px solid rgb (255,255,255); kufiri-majtas-ngjyra: rgb(0,225,255); kufiri-radius: 974px; -border-radius: 974px; -webkit-border-radius: 974px; -moz-border-radius: 974px; ) cssload-rotate 1150ms linear infinite;-o-animation: cssload-rotate 1150ms linear infinite;-ms-animation: cssload-rotate 1150ms linear infinite; rrotullohen 1150ms lineare infinite; ) .cssload-whirlpool::before (përmbajtja: ""; margjina: -22px 0 0 -22px; cssload-rotate 1150ms linear infinite; -ms-animation: cssload-rotate 1150ms linear infinite; -webkit-crotatesrotation-animation. 1150ms lineare infinite; -moz-animacion: cssload-rotate 1150ms linear infinite; ) .cssload-whirlpool::after (përmbajtja: ""; margjina: -28px 0 0 -28px; lartësia: 55px; gjerësia: animacion:cxs; -rotate 2300ms linear infinite;infinite;-ms-animation: cssload-rotate 2300ms linear infinite; -webkit-animation: cssload-rotate 2300ms linear infinite; -moz-animation: cssload-rotate infinite 2300;derotateg ) @-o-keyframes cssload-rotate ( 100% ( -o-transform: rrotullo(360deg); ) ) @-ms-keyframes cssload-rotate ( 100% ( -ms-transform: rotate( 360deg); ) ) @ -webkit-keyframes cssload-rotate ( 100% ( -webkit-transform: rotate(360deg); ) ) @-moz-keyframes cssload-rotate ( 100% ( -moz-transform: rotate(360deg) ;) )

Tani na duhet një skenar animacioni asinkron. Këtu ka dy drejtime. Ose futni skriptin në fundin tuaj, duke e shtrydhur në etiketat:

//këtu është skenari

Ose krijoni një skedar, për shembull - moreload.js, shtoni një skript të ri dhe më pas lidheni atë me fundin, duke specifikuar rrugën e saktë, si kjo: