Módne tendencie a trendy.  Doplnky, topánky, krása, účesy

Módne tendencie a trendy. Doplnky, topánky, krása, účesy

» Stránkovanie Woocommerce. Stránkovanie WordPress bez doplnku! Kde a ako hľadať funkcie next_posts_link a previous_posts_link

Stránkovanie Woocommerce. Stránkovanie WordPress bez doplnku! Kde a ako hľadať funkcie next_posts_link a previous_posts_link

Zdravím čitateľov môjho blogu, dnes sa s vami podelím o nastavenia pre stránkovanie bez pluginu na blogu. Prečo potrebujete stránkovanie na stránke a na čo je to užitočné? je to blog o použiteľnosti, vďaka ktorému môžu návštevníci stránky jednoducho nájsť pre nich užitočné informácie.

Takže predtým, ako prejdete na nastavenia navigácie, musíte nastaviť pohodlný režim čítania vašich príspevkov, ktoré sa budú zobrazovať na stránke blogu. Ak to chcete urobiť, prejdite na panel správy - Nastavenia - Čítanie:

a nastavte počet zobrazovaných príspevkov, ktoré sa majú zobraziť na každej stránke:

V tomto prípade je nastavených 5 záznamov. Blog zvyčajne zobrazuje 5 až 7 záznamov na stránku. Teraz, keď sme sa zaoberali týmito nastaveniami, v spodnej časti stránky vidíme štandardné stránkovanie WordPress, ktoré vyzerá asi takto:

Keď máte na blogu 10-15 príspevkov a nezaberajú viac ako 2-3 strany, potom je takáto navigácia celkom pohodlná, ale keď je dôležitý blog pravidelne naplnený obsahom a počet článkov sa blíži k 100 alebo 200 a všetky tieto príspevky sú umiestnené po 5 na každej stránke. Potom si myslím, že nebude ťažké vypočítať, koľko stránok bude na blogu zverejnených. Zároveň, aby návštevník vášho blogu nemusel prechádzať všetkými stránkami blogu WordPress, aby našiel nejaký príspevok, navigácia na stránke by mala mať pre používateľa pohodlnejší a funkčnejší vzhľad:

Takáto navigácia pomôže udržať čitateľa na vašom blogu, aby bolo pre neho pohodlnejšie rolovať po vašom webe pri hľadaní príspevkov, ktoré sú pre neho relevantné. Takto sa opäť zlepšujeme, čo nám pomáha pri propagácii nášho blogu.

Podobný navigačný panel je možné vykresliť pomocou doplnku WP-PageNavi. Zároveň sa domnievam, že blog by mal fungovať s čo najmenším počtom pluginov, aby sa pri zobrazovaní stránky nevytvárali ďalšie záťaže. Preto zvážime jednoduché nastavenie zobrazenia navigácie na stránke WordPress bez doplnku.

Technické nastavenia

Otvorte Administračný panel - Nastavenia - Editor - otvorte súbor functions.php a na začiatok vložte nasledujúci kód:

// Navigačná lišta
funkcia wp_corenavi() (
globálne $wp_query, $wp_rewrite;
$pages = ";
$max = $wp_query->max_num_pages;
if (!$current = get_query_var('paged')) $current = 1;
$a["base"] = str_replace(999999999, ‘%#%’, get_pagenum_link(999999999));
$a["celkom"] = $max;
$a["aktuálny"] = $aktuálny;

$celkom = 0; //1 - zobrazenie textu "Strana N z N", 0 - nezobrazenie
$a["stredná_veľkosť"] = 1; //koľko odkazov sa má zobraziť naľavo a napravo od aktuálneho
$a["end_size"] = 1; //koľko odkazov zobraziť na začiatku a na konci
$a["prev_text"] = '"'; //Úvod doľava"
$a["next_text"] = '"'; //Pravý skokový citát"

if ($ max > 1) echo ‘

’;
if ($total == 1 && $max > 1) $pages = ‘ Stránka ' . $current. ' od ' . max. ''."\r\n";
echo $pages . paginate_links($a);
if ($ max > 1) echo ‘
’;
}

alebo takto:

a nahraďte zvýraznený kód nasledujúcim:

Potom skontrolujeme nastavenia na vašom webe, malo by sa zobraziť štandardné zobrazenie nastavení navigácie:

Navigačná lišta

*/
.wp-pagenavi (
výška: 50px;
jasné: oboje;

farba:#BB7B00;
}
.wp-pagenavi span.pages(
farba: #BB7B00;
}
.wp-pagenavi a, .wp-pagenavi span (
textová výzdoba: žiadna;
výplň: 6px 9px;
okraj: 2px
pozadie:#ffffff;
font: bold 14px Verdana,sans-serif;
farba: #85B6C5;
border-radius:5px ;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current (
farba okraja: #BB7B00;
pozadie:#85B6C5;
farba:#ffffff;
}
.wp-pagenavi span.current(
farba: #f5f5f5;
pozadie:#85B6C5;
výplň: 8px 9px;
}

Teraz, keď sme upravili navigačný panel vo WordPress bez použitia doplnku, mali by sme byť schopní vidieť takýto vzhľad:

Aby sme sa zbavili ďalších duplicitných stránok, ktoré vyhľadávače nemajú radi, musíme stránku stránky zatvoriť z indexovania. Aby sme to dosiahli, na začiatok súboru functions.php musíme pridať nasledujúci kód:

/*** PRIDAŤ meta robots noindex,nofollow PRE STRÁNKY ***/
funkcia my_meta_noindex()(

ak (
is_paged() // Všetky a navigačné stránky
) (echo „“.' '."\n" ;)
}

add_action('wp_head', 'my_meta_noindex', 3); // pridanie noindex,nofollow do hlavy

Uložíme a skontrolujeme naše nastavenia. Ak to chcete urobiť, otvorte ktorúkoľvek zo stránok 2, 3-10 atď., stlačte Ctrl + U a v kódovaní stránky by sa mal zobraziť nasledujúci kód:

Zároveň je to dôležité v súbore robots.txt by sa nemal zavrieť Disallow: /page z indexovania. Týmto sú nastavenia dokončené, dúfam, že ste prišli na všetky tieto kódovania. Ak máte nejaké otázky, píšte do komentárov, určite odpoviem. Do skorého videnia!

V dnešnom článku si povieme niečo o populárnom plugine tzv WP-PageNavi. Tento praktický doplnok poskytuje možnosť usporiadať stránkovanie blogu WordPress pohodlnejším spôsobom, ako keby ste použili predvolený spôsob. V zásade je pohodlie štandardnej navigácie po stránkach relatívna záležitosť a je celkom možné použiť takzvané predvolené nástroje, ale WP-PageNavi nám ponúka oveľa atraktívnejšiu možnosť. Ak v predvolenom nastavení máme dve tlačidlá „skôr“ a „neskôr“ ako navigáciu stránkovaním, to znamená, že prechádzame stránkami postupne pri hľadaní tej, ktorú potrebujeme, potom po konečnej inštalácii a konfigurácii WP-PageNavi dostaneme tlačidlá označujúce čísla strán, čo nám umožňuje jednoducho prejsť na požadovanú stránku. V závislosti od zvolených nastavení môže navigačný panel vyzerať inak, ale na to sa pozrieme o niečo neskôr.

Aké konkrétne dôvody môže mať začínajúci bloger na používanie doplnku PageNavi na organizovanie navigácie v blogu? Možno, že takáto potreba spočiatku nevzniká a na navigáciu na piatich stránkach blogu stačia dve tlačidlá. Postupom času však množstvo informácií, a teda aj stránky, neustále narastá a bežná navigácia sa stáva nepohodlnou a pre čitateľa je ľahšie zapamätať si, na ktorej stránke dočítal alebo našiel potrebný článok, než si pamätať, koľkokrát kliknite na tlačidlo „ďalší“. Preto je PageNavi logickou evolúciou navigácie takmer každého blogu; Samozrejme, existujú aj iné podobné pluginy, ale najväčšiu slávu a popularitu si získal WP-PageNavi.

Inštalácia WP-PageNavi

Pred prácou s týmto pluginom si ho samozrejme stiahneme a nainštalujeme. Po stiahnutí požadovaného archívu s pluginom je potrebné ho rozbaliť; ako výsledok dostaneme priečinok s názvom WP-PAGENAVI, ktorý potom nahráme na váš hostingový server do priečinka WordPress plugins, ktorý nájdeme pod názvom wp-content/plugins/. Ak to chcete urobiť, musíte pristupovať k priečinkom blogu WordPress pomocou protokolu FTP.

Osobitná pozornosť by sa mala venovať skutočnosti, že priečinok obsahujúci súbory doplnkov podlieha skopírovaniu na hostiteľský server. Ak skopírujete priečinok s rovnakým názvom, v ktorom sa nachádza priečinok, ktorý potrebujeme, WordPress nebude môcť vidieť nainštalovaný doplnok, a preto nebude možné pokračovať v práci.

Po dokončení kopírovania súborov doplnku WP-PageNavi je ďalším krokom prihlásenie do oblasti správy WordPress a výber Doplnky. Potom sa vám zobrazí okno správy doplnkov, kde si vyberiete odkaz „Neaktívne“ („Neaktívne“, v anglickej verzii). Táto akcia vám umožní otvoriť zoznam nainštalovaných, ale ešte neaktivovaných doplnkov pre váš blog.
V tomto zozname musíte nájsť doplnok WP-PageNavi, ktorý potrebujeme, a kliknúť na odkaz „Aktivovať“ (nachádza sa priamo pod názvom doplnku).

Vloženie výstupného kódu doplnku WP-PageNavi do šablón tém WordPress

Požadovaný plugin sme teda aktivovali, no na to, aby sme konečne videli výsledky jeho práce, to často nestačí. Po aktivácii pluginu sa musíte prihlásiť do blogu ako bežný používateľ a zistiť, či nastali nejaké zmeny v zobrazení navigácie. V prípade, že navigačná lišta konečne získala nový vzhľad, môžete okamžite pristúpiť k nastaveniu pluginu. Ak sa nič nezmenilo, budeme musieť manuálne vložiť kód volania doplnku do hlavných súborov témy WordPress, ktorá sa momentálne používa na blogu. Našťastie na tom nie je nič zvlášť zložité – hlavnou podmienkou úspechu je poznať štruktúru WordPress šablóny a pochopiť, do ktorých súborov (a do ktorej konkrétnej časti z nich) pridať kód pluginu.

Musím povedať, že dnes už má veľa šablón plnú podporu pre plugin PageNavi. V tomto prípade stačí aktivovať plugin. Malo by byť zrejmé, že to všetko veľmi závisí od konkrétnej zvolenej témy blogu.

Použitie stránkovania je spravidla relevantné na hlavnej stránke (ide o súbor INDEX.PHP v priečinku s použitou témou) a tiež v dvoch ďalších prípadoch - na stránke archívov (ARHIVE.PHP) a vyhľadávaní stránka s výsledkami pre celý blog (SEARCH.PHP ). Preto práve do týchto troch súborov budeme musieť vložiť kód služby zásuvného modulu PageNavi, ktorý nám umožní zobraziť pohodlný navigačný panel na správnom mieste nášho blogu WordPress. Aby ste mohli vložiť kód služby zásuvného modulu PageNavi do požadovaných súborov šablón, musíte sa pripojiť k blogu cez protokol FTP a prejsť do priečinka s aktuálne používanou témou.

Najprv si v priečinku témy nájdime súbor s názvom INDEX.PHP a začnime ho upravovať v najpohodlnejšom a najznámejšom editore (osobne na tento účel používam pokročilý Notepad ++).

V súbore, ktorý sa otvorí, budete musieť nájsť časť kódu, ktorá je výslovne zodpovedná za navigáciu na mnohých stránkach vášho blogu. Musím povedať, že v niektorých prípadoch je to dosť náročná úloha. Samotný súbor INDEX.PHP je však malý a jeho dôkladné preštudovanie nezaberie veľa času. Vašou úlohou je nájsť komentáre, ktoré súvisia napríklad s navigáciou a. V takýchto komentároch tvorcovia tém zvyčajne uzatvárajú oblasť kódu služby, ktorá je zodpovedná za stránkovanie na blogu WordPress.

Kód stránkovania v súbore INDEX.PHP vašej témy môže vyzerať akokoľvek, ale zatiaľ ho musíte správne identifikovať a potom ho nahradiť volacou linkou doplnku wp_pagenavi, ktorý zvažujeme. Tento riadok vyzerá takto: . Zmeny vykonané v súbore uložíme, prejdeme na hlavnú stránku blogu a uistíme sa, že všetko funguje presne tak, ako sme potrebovali.

V zásade platí, že štandardný navigačný kód umiestnený v súbore INDEX.PHP nesmie byť vymazaný, takže neskôr, keď bude náš plugin odstránený, bude stránkovanie vášho blogu fungovať primerane. Ak to chcete urobiť, namiesto štandardného kódu pre navigáciu po stránke budete musieť napísať podmienku, ktorá určí, kedy sa má zobraziť štandardná navigácia WordPress a kedy sa má zobraziť panel navigácie po stránke vytvorený pomocou doplnku WP-PageNavi. .

Mimochodom, primeranosť navigácie spočíva aj v možnosti prístupu napríklad z hlavnej stránky na akúkoľvek inú. Je ľahké vidieť, že štandardné tlačidlá dopredu/dozadu na tento účel nefungujú, najmä pri viacstránkových blogoch.

Po dokončení práce so súborom INDEX.PHP budete musieť vykonať rovnaké operácie pre zostávajúce súbory (SEARCH.PHP a ARCHIVE.PHP) z rovnakého priečinka s témou použitou vo vašom blogu. Po úspešnom dokončení týchto operácií môžeme uvažovať, že sme úplne prišli na to, ako nastaviť zobrazenie panelu, ktorý zabezpečuje stránkovanie na našom blogu WordPress. To však nie je všetko, pretože teraz sa zoznámime s nastaveniami pluginu, ktoré nám umožňujú zmeniť štruktúru navigačnej lišty stránky.

Podrobná konfigurácia WP-PageNavi

Ak chcete spustiť nastavenia doplnku, musíte vybrať položku „PageNavi“ v ľavom menu na správcovskom paneli WordPress z oblasti „Nastavenia“ alebo v Russified verzii „Zoznam stránok“. Táto akcia otvorí okno so zoznamom nastavení doplnku WP-PageNavi v oblasti šablóny zoznamu stránok.

Prvé pole s názvom „všeobecná šablóna zoznamu stránok“ obsahuje špecifikované zobrazenie aktuálnej stránky a celkový počet stránok. Ak je vybratá táto možnosť, potom v blogu WordPress bude navigačný panel strán sekvenčný zoznam stránok so zvýrazneným číslom aktuálnej stránky; do tohto poľa môžete pridať aj slovo, napríklad „Stránka“ – to vôbec neovplyvní funkčnosť. Ak existuje taká túžba, toto pole môže byť úplne vyčistené.

Nasledujúce polia sú pomenované "Prvok "Aktuálna stránka", Ďalej - "Prvok "stránka". Obsahu týchto polí sa nedotýkame, keďže práve tu je zobrazovanie stránok (aktuálnej aj všetkých ostatných) nastavené ako poradové číslo. Pokiaľ ide o panel WP-PageNavi, všetko tu bude vyzerať celkom štandardne a prirodzene. Podobný systém stránkovania možno teraz nájsť na mnohých blogoch.

Textové polia pre prvú a poslednú stranu sú určené na nastavenie textu v nich, ktorý sa zobrazuje na tlačidlách na prechod na prvú a poslednú stranu. Klasickým riešením je napísať namiesto textu pre pole prvej strany jeden a „Text pre poslednú stranu“ vyplniť riadkom %TOTAL_PAGES% – vďaka tomu sa celkový počet stránok vášho blogu zobrazí v posledný riadok.

Nasledujúce polia sú určené na zobrazenie tlačidiel na prechod na predchádzajúcu a nasledujúcu stránku blogu. Nesú mená "Text pre predchádzajúci príspevok" a "Text pre nasledujúci príspevok". Spravidla sú tu predpísané obvyklé šípky zodpovedajúceho smeru.

Osobne som radšej vymazal zvyšné dve polia, pretože inak nám ukážu pár bielych tlačidiel bez textu. Vo svojom blogu však môžete nájsť miesto pre tieto polia s príslušnými tlačidlami.

Teraz je čas vykonať ďalšie úpravy doplnku WP-PageNavi a prejsť na nastavenia zoznamu stránok. Prvá vec, ktorú vidíme v okne "nastavenia zoznamu stránok"- toto je položka „Použiť pagenavi-css.css“, ktorá vám začiarknutím políčka umožňuje zakázať alebo povoliť súbor s kaskádovými štýlmi, ktorý je súčasťou dnes diskutovaného doplnku.

Ďalšie pole s názvom "Štýl zoznamu stránok", nás vyzve, aby sme otvorili rozbaľovací zoznam štýlov CSS, čo nás v podstate vyzýva na výber jedného štýlu z dvoch navrhnutých. Bežným štýlom sú už spomínané tlačidlá stránkovania, zatiaľ čo štýl s názvom „Rozbaľovací zoznam“ zobrazuje navigáciu vo forme stručného rozbaľovacieho zoznamu s číslami strán.

Ďalšie pole nastavenia nás vyzve, aby sme začiarkli alebo zrušili začiarknutie políčka Vždy zobraziť navigáciu po stránke. Ak zaškrtnete toto políčko, navigácia sa zobrazí aj pre tie stránky, ktoré ešte nemajú dostatok príspevkov na rozdelenie – napríklad na hlavnej stránke.

Pole „Počet stránok na zobrazenie“ slúži na to, aby ste určili, koľko stránok sa zobrazí ako postupná séria čísel, zatiaľ čo presun na iné stránky vášho blogu sa vykoná pomocou tlačidiel „ďalšia“ a „predchádzajúca“ (tzv. tie isté, ktoré sme označili šípkami), ako aj tlačidlá na prechod na prvú a poslednú stranu.

Volalo pole "Počet väčších čísel strán na zobrazenie" nastavuje, koľko vzdialených čísel, ktoré sú väčšie ako zobrazené čísla číselnej hodnoty, uvidí návštevník blogu po kliknutí na tlačidlo prechodu na ďalšiu stránku v poradí.

Nakoniec pole tzv "Zobraziť väčšie čísla strán v násobkoch" poskytuje možnosť nastaviť krok, s ktorým sa budú zobrazovať čísla vzdialených stránok vášho blogu. Napríklad do prvého z týchto opísaných polí dáme trojku a do druhého dvojku. To bude mať za následok, že na paneli WP-PageNavi s aktuálnou stránkou očíslovanou 1 a počtom zobrazených strán nastaveným na 5, po sekvenčne zobrazených stranách od prvej po piatu, stranách očíslovaných 6, Viditeľné budú 8, 10 – teda tri stránky vášho blogu s krokom (intervalom) rovným dvom. Nemôžete však použiť túto funkciu, pre ktorú stačí zadať 0 do poľa pre počet zobrazených vzdialených čísel.

Po vykonaní všetkých potrebných zmien v nastaveniach zobrazenia navigačnej lišty ich musíte uložiť. Ak to chcete urobiť, kliknite na príslušné tlačidlo v spodnej časti panela nastavení.

Práca so vzhľadom navigačnej lišty stránkovania

Prirodzene, možno budete chcieť zmeniť predvolenú farebnú schému navigačného panela alebo jeho písmo a iné externé ozdoby, aby vyhovovali štýlu vášho blogu. Aby ste to mohli urobiť, budete musieť napísať potrebné vlastnosti CSS do súboru kaskádových štýlov.

Je však možné pridať ďalšie vlastnosti priamo do súboru CSS aktuálnej WordPress témy ( wp-content/themes/current theme/style.css), a nie v príslušnom súbore doplnku, ktorý sa nachádza na adrese: .

Ďalším spôsobom, ako zmeniť vzhľad nášho panela stránkovania umiestneného na stránkach blogu pri používaní doplnku WP-PageNavi, je zmeniť súbor so štýlmi samotného doplnku. Tento súbor sa nachádza v priečinku /wp-content/plugins/wp-pagenavi/pagenavi-css.css.

Len nasledujúcim spôsobom: Späť - Vpred alebo cez takéto odkazy Predchádzajúce - Nové príspevky, potom máte štandardnú, nie pohodlnú navigáciu. Ak máte sto a viac správ, je to pre návštevníka veľká nepríjemnosť. Musíte to zmeniť na niečo pohodlnejšie. navigácia po stránke aby bol pre používateľa pohodlný ľubovoľný pohyb, to znamená, že by sa mohol dostať aj na posledné stránky vášho webu.

moderný, krásna navigácia na stránke pre blog WordPress organizované prostredníctvom populárny doplnok WP-PageNavi. Na oficiálnej stránke wordpress.org je tento modul na štvrtom mieste v počte stiahnutí. V čase písania tohto príspevku už bol stiahnutý 4065194 krát. Ako funguje pohodlná navigácia po stránkach, si môžete pozrieť na mojom blogu. Ak ste pripravení na svoj webový zdroj, začnime.

Stránkovanie WordPress s doplnkom WP-PageNavi

Stránkovanie blogu WordPress

Ako nainštalovať a nakonfigurovať doplnok WP-PageNavi

Ako vidíte na snímke obrazovky, text môžete nahradiť vlastným alebo ho nechať tak, ako je. Začiarknite políčko -Použiť štýl pagenavi-css.css alebo nie. Ak potrebujete prispôsobiť štýl CSS WP-PageNavi, môžete tak urobiť v súbore doplnku. Ak to chcete urobiť, prejdite do sekcie "Pluginy" - "Editor", vyberte WP-PageNavi ako doplnok, ktorý chcete zmeniť, a v zozname, ktorý sa otvorí, nájdite súbor wp-pagenavi/pagenavi-css.css. Nastavenia sú prehľadné. Ďalší krok je tento.

V súboroch index.php, archive.php a search.php vašej témy musíte nájsť volania next_posts_link() a previous_posts_link() a nahradiť ich. V téme TwentyTen to vyzerá takto:

V iných vláknach to môže vyzerať takto:

Hľadajte niečo podobné a tieto riadky musíte nahradiť týmto:

Všetky. Pripravený. Teraz bude plugin fungovať. Ak váš štýl navigácie nevyhovuje dizajnu vášho blogu a chcete mu dať špeciálny vzhľad, musíte čítať ďalej.

Doplnok WP PageNavi Style pridáva ďalšie farebné možnosti pre Wp-PageNavi

Áno, čítate správne, aby ste mohli používať hotové štýly pre navigáciu na stránke WP-PageNavi, musíte si nainštalovať ďalší doplnok WP PageNavi Style od toho istého vývojára. Rovnakým spôsobom nainštalujte tento modul, aktivujte ho a v admin bočnom paneli budete mať položku WP PageNavi Style. Kliknutím naň prispôsobíte a upravíte svoju novú navigáciu:

Prispôsobenie doplnku štýlu WP PageNavi

Ako môžete vidieť na snímke obrazovky, môžete si vybrať rôzne krásne panely a ich umiestnenie. Sada štýlov doplnkov:

Sada štýlu doplnku WP PageNavi Style Plugin

Skvelá voľba. Ak nechcete používať preddefinované štýly, nastavte - Vlastné a prispôsobte štýl vlastným spôsobom:

Všetky. Ešte moment. Ak ste pripravení nainštalovať stránkovanie manuálne, teda bez doplnku, čítajte ďalej.

Ako nainštalovať stránkovanie WordPress bez doplnku

Tento kód je taký bežný, že nie je známe, na ktorý blog sa má odkazovať. Tak sa zaobídeme bez toho.

Otvorte súbor „Funkcie témy“ (functions.php), prejdite nadol po stránke a pred uzatváraciu značku ?> vložte nasledujúci kód (nezabudnite si vytvoriť zálohu pre prípad, že by sa pokazil:

Funkcia navigácia() ( globálne $wp_query, $wp_rewrite; $pages = ""; $max = $wp_query->max_num_pages; if (!$current = get_query_var("paged")) $current = 1; $a["základ "] = str_replace(999999999, "%#%", get_pagenum_link(999999999)); $a["total"] = $max; $a["current"] = $current; $total = 0; //1 - zobraziť text "Stránka N z N", 0 - nezobrazovať $a["stredná_veľkosť"] = 3; //koľko odkazov sa má zobraziť naľavo a napravo od aktuálneho $a["koncová_veľkosť"] = 5; //koľko odkazov zobraziť na začiatku a na konci $a["prev_text"] = "" Predchádzajúca "; //text odkazu "Predchádzajúca stránka" $a["next_text"] = "Ďalšia »"; // text odkazu "Ďalšia stránka", ak ($ ​​max > 1) echo "

"; if ($total = 1 && $max > 1) $pages = " Stránka " . $current ." z " . $ max .""."\r\n"; echo $pages . paginate_links($a); if ($max > 1) echo "
"; }

Potom zmeníme štandardný výstupný kód vo všetkých súboroch, kde je navigácia - index.php, category.php, archive.php atď. Namiesto toho zmeňte:

Next_posts_link("Forward"); previous_posts_link("Späť »");

Navigácia ( padding:15px 0 25px 0; overflow:hidden; font-size:13px; color:#000; clear:both;) .navig a(background: #fff; border: 1px solid #DDDDDD; color: #000000; font-size: 13px; padding:5px; text-decoration: none;) .navig span.pages (padding: 3px 5px; background:#f1f8f9; border: 1px solid #C6D2D4;) .navig a:hover(background: # fff; orámovanie: 1px plná červená; farba:červená; veľkosť písma: 13px; výzdoba textu: žiadna;) .navig span.pages (výplň: 3px 5px; pozadie:#f1f8f9; orámovanie: 1px plné #C6D2D4;) . navig span.current (background: #fff; border: 1px solid #111; font-size: 13px; padding:5px; text-decoration: none;) .navig span.extend (padding: 3px 5px; background:#f1f8f9; border: 1px solid #C6D2D4;) .str(background: #fff; color: #000000; font-size: 13px; padding: 5px; text-decoration: none;)

Pripravený. Ak nemáte jasno v tom, ako urobiť navigáciu manuálne, je lepšie použiť plugin. A to je z mojej strany všetko. Maj sa.

(funkcia(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId: "R-A -292864-4", renderTo: "yandex_rtb_R-A-292864-4", async: true )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); s .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); ))(toto , tento.dokument, "yandexContextAsyncCallbacks");

Ahojte všetci!

Pokračujem v písaní článkov o navigácii na webe na engine WordPress.

A v tomto článku ukážem, ako sa stránkovanie robí bez pluginov a pomocou známeho WP-PageNavi. Rovnako ako u , aj tu ukážem realizáciu niekoľkými spôsobmi, aby ste si mohli vybrať ten, ktorý vám najviac vyhovuje. Áno, a sú chvíle, keď niektorá metóda pre niekoho nefunguje. Preto bude nejaké poistenie.

Materiál vyšiel veľmi objemný a možno najvyčerpávajúcijší v sieti.

Navigácia po stránkach (stránkovanie) je rozdelenie informácií na stránky. Ak vezmete veľa stránok na Wordpres, potom je tento jav jasne vyjadrený vo videu so zoznamom čísel stránok v spodnej časti každej stránky s oznámeniami. Na mojom blogu má táto funkcia nasledovnú podobu.

Dizajn sa môže líšiť. Jeho podstata je ale rovnaká – rozdelenie informácií na stránky. Ako viete, predvolene sa na hlavnej stránke webu zobrazujú oznámenia o záznamoch, ktorých môže byť určitý počet (v závislosti od nastavení v položke „Písanie“).

Ak ich počet nerozdelíme, tak sa zobrazia na jednej stránke. A to nie je dobré, pretože používanie stránky bude nepohodlné a načítanie hlavnej stránky bude trvať dlho, pretože v priebehu času sa objaví veľké množstvo oznámení.

Stránkovanie je spravidla už zabudované do moderných šablón Wodpress. Ale je tu možnosť, keď nie je. Potom musíte implementovať. Namiesto toho môže byť stránkovanie oznámení vo forme odkazov na predchádzajúce a nasledujúce položky. Toto je jasne vyjadrené v štandardných šablónach.

Táto možnosť je tiež nepohodlná, pretože pri návrate o 3 strany späť sa nebudeme môcť vrátiť na pôvodnú stránku v jednom kroku. Budete musieť kliknúť 3-krát na predchádzajúce záznamy alebo na nasledujúce. Stránkovanie vám na druhej strane umožňuje flexibilnejšie spravovať daný moment.

Vo všeobecnosti prejdime k jej implementácii a prvým krokom je jej vloženie do šablóny bez pluginu. Túto metódu som popísal vo videonávode. Odporúčam, aby ste si ho najprv pozreli a potom si preštudovali textovú verziu návodu.

Robiť to bez pluginu

Teraz vám ukážem, ako budete mať presne rovnaké stránkovanie WordPress ako ja. Všetko sa robí veľmi jednoducho. Bude to trvať 2 kusy kódu, ktoré bude potrebné umiestniť do súborov šablón, a potom napísať štýly na nastavenie vzhľadu. Začnime!

Tu je prvá časť kódu. Musí byť umiestnený v súbore functions.php šablóny dizajnu.

funkcia wp_corenavi() ( globálne $wp_query, $wp_rewrite; $pages = ""; $max = $wp_query->max_num_pages; if (!$current = get_query_var("paged")) $current = 1; $a["základ "] = str_replace(999999999, "%#%", get_pagenum_link(999999999)); $a["total"] = $max; $a["current"] = $current; $total = 0; //1 - zobraziť text "Stránka N z N", 0 - nezobrazovať $a["stredná_veľkosť"] = 1; //koľko odkazov sa má zobraziť naľavo a napravo od aktuálneho $a["koncová_veľkosť"] = 1; //koľko odkazov zobraziť na začiatku a na konci $a["prev_text"] = ""; //text odkazu "Predchádzajúca stránka" $a["next_text"] = ""; //text odkazu "Nasledujúca stránka" if ($max > 1) echo "

"; }

funkcia wp_corenavi()(

globálne $wp_query , $wp_rewrite ;

$pages = "" ;

$max = $wp_query -> max_num_pages ;

if (! $current = get_query_var ("stránkované" ) ) $current = 1 ;

$a [ "základ" ] = str_replace (999999999 , "%#%" , get_pagenum_link (999999999) );

$a["celkom"] = $max ;

$a [ "aktuálny" ] = $aktuálny ;

$celkom = 0 ; //1 - zobrazenie textu "Strana N z N", 0 - nezobrazenie

$a [ "stredná_veľkosť" ] = 1 ; //koľko odkazov sa má zobraziť naľavo a napravo od aktuálneho

$a[ "veľkosť konca" ] = 1 ; //koľko odkazov zobraziť na začiatku a na konci

$a["prev_text"] = "" ; //text odkazu "Predchádzajúca stránka"

$a [ "ďalší_text" ] = "" ; //text odkazu "Ďalšia stránka"

if ($max > 1) echo "

" ;

Kód som umiestnil na úplný začiatok súboru za otváraciu značku


V tomto kóde môžeme upraviť niektoré parametre:

  • Riadok 10 - ak zmeníte hodnotu 0 na 1, tak sa vedľa čísel strán zobrazí nápis formulára, napríklad "Strana 3 zo 45". Túto možnosť môžete urobiť, ale myslím si, že v tomto prípade to nie je potrebné, pretože čísla stránok už chápu, koľko stránok je na webe. A aktívna stránka je zvýraznená inou farbou;
  • Riadky 11 a 12 – určitý počet predchádzajúcich alebo nasledujúcich čísel by sa mal zobraziť vľavo a vpravo od čísla aktívnej strany. Tu uvádzame ich počet. V tomto kóde je hodnota 1. Môžete zadať 2 alebo 3. Tu budete musieť trochu experimentovať, pretože čím väčší je počet čísel, tým širšia bude navigácia. Všetko závisí od šírky šablóny.

wp_corenavi();

Keďže stránkovanie by sa malo zobrazovať všade tam, kde sa zobrazuje zoznam oznámení, je potrebné umiestniť tento kód do všetkých súborov, kde sa to stane:

  • Hlavná stránka - index.php;
  • Kategória a archívne stránky - category.php a archive.php;
  • Stránka vyhľadávania - search.php.

Mimochodom, v niektorých šablónach môže byť výstup nadpisov a stránok archívov vykonaný v jednom súbore. Môže za to môj súbor archive.php.

Ak vaša šablóna nemá žiadnu navigáciu na rozdelenie oznámení na stránky, potom druhý kód umiestnime po zobrazení obsahu. Ak máte predchádzajúce a nasledujúce odkazy, čo je pravdepodobnejšie, potom sa táto možnosť ľahšie implementuje, pretože ich stačí nahradiť vyššie uvedeným kódom.

Štandardná navigácia je spravidla vo forme predchádzajúcej a nasledujúcej. odkazy sa zobrazujú pomocou podobného kódu.

< div class = "nav-previous" > ← Staršie príspevky", "dvadsať" ) ); ?>< / div >

< div class = "nav-next" > „Novšie príspevky " , "dvadsať" ) ); ?>< / div >

Každý daný kód môže byť iný, ale jeho hlavná náplň bude rovnaká. Budete musieť nájsť kód, ktorý bude obsahovať kód s názvom next_posts_link a previous_posts_link.

Keď ho nájdete, pokojne odstráňte tento obsah zo súboru a na jeho miesto skopírujte potrebný kód, ktorý zobrazí stránkovanie.


Štandardnú navigáciu teda musíte nahradiť stránkovaním vo všetkých súboroch, kde je výstup hlásení. Názvy súborov som uviedol vyššie.

Mimochodom, ak máte problémy s týmto procesom, môžete ma kontaktovať o pomoc v komentároch. snažím sa pomáhať.

/* NAVIGÁCIA */ .navigation ( float: left; width: auto; margin-left: 216px; margin-top: -2px; font-size: 16px; ) .navigation > a ( float: left; width: 32px; font -váha: 700; zarovnanie textu: na stred; farba: #637b93; dekorácia textu: žiadna; ľavý okraj: 1px; vrchná časť: 7px; ) .navigation > .current ( float: left; font-weight: 700 ; width: 29px; text-align: center; color: #c4c8cc; margin-left: 5px; padding-top: 7px; ) .navigation > .prev ( float: left; width: 32px; height: 34px; background: url ("images/bow_left.png") no-repeat; margin-left: 0; ) .navigation > .next ( float: left; width: 34px; height: 34px; background: url("images/bow_right.png") no-repeat; margin-left: 14px; ) .navigation > .dots ( float: left; font-size: 14px; font-weight: 700; width: 32px; text-align: center; color: #c4c8cc; padding- hore: 7px ;)

/* NAVIGÁCIA */

Navigácia (

plavák : vľavo ;

šírka: auto

ľavý okraj : 216px ;

margin-top : -2px ;

font-size : 16px ;

Navigácia > a (

plavák : vľavo ;

šírka: 32px

font-weight : 700 ;

text-align : center ;

farba : #637b93 ;

text-dekorácia: žiadna

margin-left : 1px ;

padding-top : 7px ;

Navigácia > .current(

plavák : vľavo ;

font-weight : 700 ;

šírka: 29px

text-align : center ;

farba : #c4c8cc ;

margin-left : 5px ;

padding-top : 7px ;

Navigácia > .prev(

plavák : vľavo ;

šírka: 32px

výška: 34px;

background : url ("images/bow_left.png" ) no-repeat ;

ľavý okraj: 0

Navigácia > .next(

plavák : vľavo ;

šírka: 34px

výška: 34px;

background : url ("images/bow_right.png" ) no-repeat ;

ľavý okraj : 14px ;

Navigácia > .bodky (

plavák : vľavo ;

font-size : 14px ;

font-weight : 700 ;

šírka: 32px

text-align : center ;

farba : #c4c8cc ;

padding-top : 7px ;

Tiež musíte nahrať obrázky šípok dopredu a dozadu na hosting v priečinku obrázky v šablóne dizajnu. . Na stiahnutie môžete použiť štandardného správcu súborov poskytovateľa hostingu. ja áno.

Keď sme umiestnili kódy do súborov functions.php, do všetkých súborov, ktoré zobrazujú stránky s oznámeniami a napísali štýly, môžeme skontrolovať funkčnosť navigácie. Všetko mi funguje a v štandardnej šablóne to vyzerá takto.

Metódu sme analyzovali bez doplnku. Som si 100% istý, ak je všetko vykonané tak, ako je popísané vyššie, potom by všetko malo fungovať pre vás. Existovala aj druhá možnosť bez pluginu, no po jej preskúmaní som si uvedomil, že v skutočnosti ide o tú istú možnosť, len mierne upravenú. Preto prechádzam na spôsob implementácie stránkovania pomocou pluginu.

Doplnok WP-PageNavi

Ak chcete začať, stiahnite si doplnok z oficiálnej stránky a nainštalujte ho na web.

Po nainštalovaní pluginu budete musieť umiestniť aj kód, ktorý zobrazí navigáciu v spodnej časti stránky.

Teraz plugin vykoná svoju úlohu a čísla stránok budú mať nasledujúci dizajn.

Na jednej strane dizajn nie je taký horúci, ale na druhej strane je to vlastne o ničom, pretože z neho nebolí oči. Používatelia milujú jednoduchosť! Preto môžete všetko nechať tak, ako je. Ak chcete niečo farebnejšie, teraz zvážime niekoľko možností. Medzitým budeme diskutovať o takej veci, ako je nastavenie wp pagenavi. Existujú nastavenia a oplatí sa o nich hovoriť.

Čo sa týka prvej položky nastavení „Šablóny zoznamu stránok“, v nej netreba nič meniť. Sme spokojní. Prechádzame na „Nastavenia zoznamu stránok“.

Všimol som si, že musíte experimentovať so všetkými parametrami v tomto odseku, aby ste našli optimálnu hodnotu pre seba. Len stručne vysvetlím, za čo sú jednotlivé parametre zodpovedné.

  • Použiť štýl – ak je nastavené na „Nie“, štýly doplnkov budú odstránené a čísla stránok nebudú naformátované;

  • Štýl zoznamu strán – okrem bežného zoznamu čísiel strán si môžeme zvoliť možnosť rozbaľovacieho zoznamu;

  • Vždy zobrazovať zoznam stránok – toto nastavenie nepovoľujte. Je potrebné, aby sa zoznam zobrazoval len tam, kde je to potrebné;
  • Počet strán na zobrazenie – zodpovedá za počet zobrazených čísel strán na začiatku zoznamu. Štandardne je hodnota 5 a na snímkach obrazovky vyššie vidíte, že sa zobrazuje presne 5 stránok;
  • Rozsah stránok na zobrazenie – ak má váš web veľa stránok, potom bude táto funkcia mimoriadne užitočná. Po hlavnom zozname vypíše čísla strán s hodnotami 10, 20, 30, 40 atď. Interval medzi týmito hodnotami je určený nasledujúcim parametrom;
  • Koeficient pre rozsahy strán – ak nastavíte hodnotu na 5, potom rozsah strán bude vyzerať – 10, 15, 20, 25 atď. Ak 10, tak 10, 20, 30, 40 a tak ďalej. Stačí hodnota 10.

Toto sú všetky nastavenia, ktoré si musíte nastaviť podľa svojich potrieb. Tu sa každý prispôsobí podľa seba.

Najjednoduchšou možnosťou je nainštalovať dodatočný doplnok, ktorý už má pripravené štýly a tiež umožňuje individuálne konfigurovať každý parameter. Volá sa to plugin.

Po nainštalovaní sa na paneli správcu WordPress zobrazí nová položka.

Po prepnutí naň môžeme ihneď vybrať existujúce dizajnové prírezy.


Ak si chceme štýly prispôsobiť individuálne, tak v prvej položke nastavení „Vybrať šablónu so štýlmi“ vyberieme možnosť „Vlastné“ a nakonfigurujeme parametre všetkých prvkov (okraje a ich farby, farby a veľkosti písma, farby odkazov pri nanášaní kurzora myši). cez myš atď.).


Všetky parametre Vám preložím.

  • Farba nadpisu - farba textu "Strana 3 zo 45";
  • Farba pozadia - farba pozadia;
  • Aktívna/Aktuálna farba pozadia - farba pozadia čísla aktívnej strany;
  • Veľkosť písma - veľkosť písma;
  • Link Color - farba odkazu;
  • Link Mouse Hover/ Active Hover - farba odkazu pri umiestnení kurzora myši na číslo a keď je číslo aktívne;
  • Link Border Color - farba okraja;
  • Link Border Mouse Hover/Active Color - farba orámovania pri prejdení myšou a keď je číslo aktívne;
  • Zarovnať navigáciu - umiestnenie navigácie (vľavo, vpravo, v strede).

Hodnoty farieb môžete vyhľadať na internete alebo vo Photoshope, keď vyberiete požadovanú farbu na výplň.


Možnosť pluginu nie je zlá, ale vždy hovorím, že sa treba zbaviť nepotrebných pluginov a v tomto prípade to tak je.

Druhá možnosť sa robí úpravou súboru štýlu, ktorý sa nachádza v priečinku s pluginom Wp-pagenavi na hostingu – pagenavi-css.css.

Tento súbor je zahrnutý, keď je v nastaveniach pluginu aktívne nastavenie „Použiť štýl pagenavi-css.css“. Ak ho teda upravíme, tak po aktualizácii pluginu budú všetky štýly nahradené štandardnými. Ak chcete tento súbor zakaždým nahradiť a neprepisovať štýly, odporúčam vám urobiť nasledovné:

  1. Upravte štýly v tomto súbore na svoje vlastné, čím získate požadovaný dizajn stránkovania;
  2. Vypnite nastavenie "Použiť štýl pagenavi-css.css";
  3. Umiestnite tieto štýly do hlavného hárku štýlov šablóny dizajnu, style.css.

Týmto spôsobom budú tieto štýly fungovať bez ohľadu na doplnok. A keď ich aktualizujete, nezablúdia. Toto je možno najlepší dizajn navigácie v tomto doplnku, ktorý by som sám urobil. Ale, našťastie, používam možnosť bez pluginu, čo je moja rada pre vás.

Takže priatelia. Materiál bude veľmi dobrý, ako pre mňa. Čo si o tom myslíš? Dúfam, že všetci áno. Ak niečo nefunguje, pokúsim sa pomôcť v komentároch. Píšte, nebojte sa! Aj ja som kedysi veľmi trpel a podarilo sa mi na to prísť.

Pri tejto poznámke už chcem tento príspevok čo najskôr dokončiť, keďže to chcelo veľa síl. Toto urobím. Rozlúčim sa a idem si oddýchnuť a potom sa zahrabem do písania nového obsahu.

S pozdravom Konstantin Khmelev!

Na pridanie stránkovania na stránku WordPress alebo skôr na zmenu štandardnej navigácie na bežné tlačidlá stránkovania používame doplnok WP-pagenavi a 5 ďalších doplnkov testovaných 4.9.5.

Od autora

Pri pridávaní stránkovania na stránku akéhokoľvek systému existujú plusy (pohodlie pre návštevníka) aj mínusy (stránky s opakovanými názvami sa objavia v značkách názvu). Na pridanie stránkovania na stránku WordPress alebo skôr na zmenu štandardnej navigácie (predchádzajúca strana - nasledujúca strana) na bežné tlačidlá stránkovania používame doplnok WP-pagenavi.

Štandardné stránkovanie WordPress

Na začiatok poznamenám, že volanie funkcií WP, ktoré sú zodpovedné za zobrazenie navigácie na stránke, sú v súboroch pracovnej šablóny. Preto, ak ste nainštalovali inú pracovnú tému ako predvolenú, môže sa stať, že autor témy už zahrnul stránkovanie do súborov témy a vy ju už máte. Ak nie, navigácia na stránke je štandardná, sú to nápisy ako: „Predchádzajúca stránka“ a „Nasledujúca stránka“ v spodnej časti stránky.

Funkcie s výstupom štandardnej navigácie: next_posts_link a previous_posts_link . Pamätajme na ne, budú nám užitočné.

Doplnok WP-pagenavi vám pomôže pridať stránkovanie na váš web WordPress

Na zmenu navigácie po stránkach na blogu a pridanie tlačidiel pre selektívne stránkovanie používame plugin WP-pagenavi. Stránka pluginu: https://wordpress.org/plugins/wp-pagenavi/installation/

Existujú tri štandardné spôsoby:

  1. Od , pomocou vyhľadávania podľa mena;
  2. Stiahnite si doplnok z jeho stránky WordPress.org (odkaz v spodnej časti článku);
  3. Alebo si stiahnite doplnok z jeho stránky WordPress.org, rozbaľte archív a nahrajte adresár doplnku wp-pagenavi do priečinka /wp-content/plugins/ a aktivujte doplnok z konzoly blogu.

Ako spustiť doplnok wp-pagenavi

Aktivácia pluginu ale nestačí, treba pracovať s pracovným kódom témy.

Poznámka: Keď začnete vykonávať zmeny vo svojich pracovných súboroch tém, zálohujte si svoju lokalitu a jej databázu. Ak sa niečo pokazí, môžete sa vrátiť k zálohe.

Úloha na aktiváciu wp-pagenavi je nasledovná. V súboroch pracovných tém musíte nájsť funkcie next_posts_link a previous_posts_link a nahradiť nimi riadky:

Kde a ako hľadať funkcie next_posts_link a previous_posts_link

Funkcie next_posts_link a previous_posts_link sa zvyčajne nachádzajú v súboroch tém: index, archive, functions . Môžete to urobiť v editore z konzoly blogu.

Pridajte stránkovanie na stránku WordPress

Ak vyhľadávanie z konzoly neprináša rýchle výsledky, ale tieto funkcie jednoducho nevidíte, postupujte takto:

  • Cez FTP pripojenie skopírujeme súbory pracovnej témy do nášho počítača.
  • Otvorte všetky stiahnuté súbory v textovom editore, ako je napríklad Notepadd++.
  • Potom použite vyhľadávací editor „Nájsť vo všetkých súboroch“ a vyhľadajte názvy našich funkcií: next_posts_link a previous_posts_link .
  • Po ich nájdení ich nahradíme:

Po výmene nahrajte upravený súbor späť do adresára lokality a skontrolujte vzhľad stránkovacích tlačidiel na lokalite.

Ako zmeniť vzhľad tlačidiel WP-pagenavi

  • Tlačidlá stránkovania s číslami strán sú štandardne biele/sivé. Rámy sú štvorcové. Môžete zmeniť vzhľad tlačidiel v súbore: pagenavi-css.css. Tento súbor sa nachádza v adresári: wp-content/plugins/wp-pagenavi.

Ak chcete súbor upraviť, stiahnite si ho do počítača a upravte ho v textovom editore. Zároveň ponechajte pôvodný zdroj súboru neporušený ako zálohu.

Viac doplnkov pre navigáciu na stránke

  • Stránkovanie od BestWebSoft. https://ru.wordpress.org/plugins/pagination/
  • Zjednodušená navigácia na stránke. https://ru.wordpress.org/plugins/simplistic-page-navi/
  • Abecedné stránkovanie. https://ru.wordpress.org/plugins/alphabetic-pagination/
  • SX Žiadne stránkovanie domovskej stránky. https://ru.wordpress.org/plugins/sx-no-homepage-pagination/
  • WP-Paginate. https://ru.wordpress.org/plugins/wp-paginate/