4 761
V tomto článku vám ukážem, ako vytvoriť navigačnú ponuku WordPress. Pomocou jednoduchého nástroja drag & drop môžete na svojej stránke vytvoriť krásnu rozbaľovaciu ponuku.
Prečo potrebujete jedálny lístok? Umožňuje vám prezentovať štruktúru vašej stránky používateľom – pomáha im prechádzať sekcie a rýchlo nájsť informácie, ktoré potrebujú.
Menu môže byť umiestnené v hornej/dolnej časti a vpravo/vľavo na stránke lokality.
Takmer všetky témy WordPress obsahujú aspoň jeden typ rozloženia ponuky.
Ponuku môžete pridať z administračného panela WordPress – Vzhľad – Ponuky.
Na obrazovke sa objaví nové okno Create Menu, ktoré pozostáva z dvoch oblastí. Ľavá oblasť obsahuje vaše stránky, vlastné odkazy a kategórie. A vpravo - prispôsobiteľné položky ponuky.
Poďme vytvoriť vaše prvé menu.
Zadajte názov svojho menu, napr. "Moja prvá ponuka" a potom kliknite na tlačidlo "Vytvoriť ponuku".
Uvidíte nastavenia ponuky:
Ako vidíte, téma WordPress Azbuka ponúka 3 možnosti rozloženia ponuky: hlavné, sekundárne, päta.
Názvy a umiestnenia menu závisia od zvolenej témy a môžu sa líšiť.
Potom vyberte stránky, ktoré chcete pridať – označte stránky uvedené v ľavom paneli a kliknite na „Pridať do ponuky“.
Potom vyberte umiestnenie svojho menu a uložte ho.
Môžete vyskúšať rôzne polohy, aby ste videli, ako to vyzerá po dokončení.
Všimnete si, že každá položka ponuky, ktorú pridáte, je v poradí, v akom ste ju pridali. Napríklad stránka „O mne“ sa zobrazí na konci, zatiaľ čo stránka „Produkty“ sa zobrazí na začiatku.
Nebojte sa, položky ponuky je možné presúvať myšou a usporiadať v takom poradí, aké potrebujete.
Môžete tak vytvoriť požadovaný počet ponúk pre rôzne oblasti lokality.
Rozbaľovacia ponuka je navigačná ponuka. S nadradenými a podradenými prvkami.
Keď používateľ podrží kurzor myši nad položkou nadradenej ponuky, všetky ostatné podradené položky sa hladko objavia jedna po druhej pod nadradenou položkou.
Pomocou rozbaľovacej ponukymôžete vytvoriť správne štruktúrovaný navigačný systém.
Teraz pridajte položku podponuky pre vašu novú ponuku.
IN štruktúru, potiahnite prvok tesne pod nadradený prvok a potom potiahnite prvok mierne doprava. Všimnete si, že sa automaticky stane položkou podmenu.
Týmto spôsobom môžete vytvoriť viacero úrovní podmenu. Bohužiaľ, nie všetky témy podporujú vytváranie takýchto viacúrovňových ponúk - väčšina vám umožňuje vytvoriť iba 2 úrovne.
Nadpisy sa používajú na vytvorenie rozbaľovacej ponuky v blogu. A pridávajú sa rovnakým spôsobom ako stránky. Rozbaľte kartu "Nadpisy", vyberte tie, ktoré potrebujete, a pridajte ich do ponuky.
Všimnete si, že rubriky sa zobrazia ako položky ponuky. Rovnako ako v prípade stránok môžete kategórie presúvať myšou a usporiadať ich v požadovanom poradí.
V nižšie uvedenom príklade som to urobil tak, že všetky kategórie sa stali deťmi stránky blogu.
Keď pridáte stránku alebo kategóriu, WordPress automaticky použije názov stránky alebo názov kategórie ako text odkazu.
To neznamená, že to nemôžete zmeniť.
Rozbaľte prvok a upravte podľa potreby.
Tu môžete zmeniť názov, text odkazu a pridať atribút title k odkazu. Uložte menu, aby ste nestratili žiadne zmeny.
Rozbaľte aj položku ponuky a v spodnej časti uvidíte červený text „Vymazať“.
Každá téma ponúka rôzne druhy rozloženia navigačnej ponuky.
V téme tejto stránky, ktorú som ukázal v príkladoch, sú 3 typy rozloženia menu. Vaša téma ich môže mať viac alebo menej. A, samozrejme, môžu sa nazývať inak.
Okrem štandardných oblastí môžete pridať ponuky na bočný panel a ďalšie oblasti s miniaplikáciami.
V administračnom paneli vyberte "Vzhľad" - "Widgety" a pridajte miniaplikáciu "Vlastná ponuka" na bočný panel.
Potom musíte miniaplikáciu pomenovať a vybrať jednu zo svojich prispôsobených ponúk zo zoznamu. Kliknite na tlačidlo uložiť.
Teraz prejdite na stránku a skontrolujte, ako sa ponuka zobrazuje na bočnom paneli.
Pokiaľ ide o sociálne tlačidlá v ponuke, niektoré témy ponúkajú vstavané tlačidlá sociálnych médií.
Ak ich váš motív nemá, môžete si nainštalovať doplnok, ako je Menu sociálnych ikon, aby ste si tlačidlá pridali sami.
Mohlo by vás zaujímať:
Ak máte nejaké otázky - napíšte do komentárov.
A sledujte nás na
Navigácia vo WordPress témach je najčastejšie realizovaná štandardným spôsobom – odkaz na predchádzajúce príspevky a odkaz na ďalšie príspevky. To vo väčšine prípadov stačí, no niekedy je potrebné urobiť navigáciu po stránkach vo WordPresse, s čím nám pomôže bezplatný plugin WP-PageNavi.
WP-PageNavi je jedným z najpopulárnejších a najjednoduchších doplnkov na implementáciu navigácie na stránke alebo „stránkovania“ vo WordPress. Je k dispozícii v adresári plugins na WordPress.org a dá sa nainštalovať z administračného panela WordPress v časti Plugins → Add New.
Po inštalácii a aktivácii doplnku by ste mali vykonať nejaké zmeny vo svojej aktívnej téme WordPress. Nachádza sa v adresári wp-content/themes. Nájdite v tomto adresári priečinok s názvom vašej aktívnej témy.
Stojí za zmienku, že niektoré témy už majú vstavanú podporu pre doplnok WP-PageNavi a po aktivácii okamžite zobrazí navigáciu po stránke namiesto štandardnej, ale takéto témy sú extrémne zriedkavé. Vo väčšine prípadov budete musieť manuálne vykonať zmeny na podporu stránkovania.
Vo svojich súboroch tém by ste mali nájsť volania funkcií next_posts_link a previous_posts_link. Môžu byť na mnohých miestach, ale najčastejšie sa nachádzajú v súboroch index.php, archive.php a functions.php.
Tieto funkcie vykresľujú štandardnú navigáciu a na vykreslenie navigácie po stránke pomocou WP-PageNavi by sa mali nahradiť jediným novým volaním funkcie wp_pagenavi.
Zvážte napríklad predvolenú tému Twenty Twelve. V súbore functions.php nájdite nasledujúci kód:
A namiesto volania funkcií next_posts_link a previous_posts_link zavolajte funkciu wp_pagenavi:
Venujte pozornosť tretiemu riadku. Tu sme tiež pridali volanie funkcie function_exists pred volaním wp_pagenavi . Pomôže to zabrániť vyvolaniu chyby, ak je doplnok WP-PageNavi deaktivovaný alebo chýba.
Po uložení súboru prejdite na ľubovoľnú stránku s vašimi príspevkami a v jazyku deytsivi uvidíte stránkovanie:
Ak nemôžete nájsť funkcie next_posts_link a previous_posts_link, ktoré chcete nahradiť vo svojej téme, zanechajte komentár s názvom vašej témy a my vám určite pomôžeme.
Pre pokročilejších používateľov WordPress stojí za zmienku, že nahradenie funkcií a sekcií témy je najlepšie vykonať pomocou podradenej témy s použitím pôvodnej témy ako nadradenej témy. Pomôže to zachovať stránkovanie a ďalšie zmeny, aj keď sa téma aktualizuje.
V časti Možnosti → PageNavi môžete zmeniť množstvo nastavení pre navigáciu po stránkach, vrátane: maximálneho počtu stránok, zobrazenia ako rozbaľovacieho zoznamu, použitia vložených štýlov atď.
V nastaveniach môžete zmeniť aj text, ktorý sa zobrazuje na odkazoch, čo uľahčuje preklad odkazov zobrazených v navigácii.
Ak ste si prečítali článok o tom, ako implementovať stránkovanie bez pluginov vo WordPress, sme extrémne túto metódu neodporúčame, a to neplatí len pre stránkovanie. Väčšina článkov a návodov v sérii bez doplnkov jednoducho skopíruje kód z doplnku a prilepí ho do rôznych častí vašej témy.
Prístup „bez doplnkov“ k rozšíreniu WordPress nemá žiadne žiadny výhody, ale má množstvo nevýhod:
Pluginy sú navrhnuté špeciálne na rozšírenie funkcionality WordPressu, takže ich pokojne používajte.
Ak z nejakého dôvodu nie je pre vás doplnok WP-PageNavi vhodný, odporúčame vám ako alternatívu zvážiť doplnky WP-Paginate a WP Page Numbers, ktoré implementujú podobné funkcie.
Ak máte akékoľvek otázky týkajúce sa stránkovania WordPress alebo vyššie uvedených doplnkov, môžete sa nás opýtať pomocou formulára na komentáre alebo nám napísať na adresu
(3)
WordPress je veľmi všestranná platforma na blogovanie a pomocou doplnkov môže byť ešte viac užívateľsky prívetivá.
Týka sa to aj navigácie (stránkovania) stránok, ktorá nie je natívne dostupná na WordPress. To sa však dá ľahko vyriešiť výberom jedného z 10 najlepších doplnkov pre váš web.
Jeden z najpopulárnejších a najčastejšie používaných pluginov. So vstavanou funkciou wp_pagenavi() obvyklé odkazy ← Späť | Ďalej → sa zmení na atraktívne stránkovanie.
Ďalší užitočný doplnok, ktorý má veľmi šikovnú funkciu. Môžete prejsť na požadovanú stránku zadaním jej čísla do doplnkového poľa.
Jeden z najlepších a najjednoduchších doplnkov, ktorý vám umožňuje nastaviť ďalšie stránkovanie pre príspevky a komentáre, vďaka čomu je navigácia na vašom webe WordPress oveľa jednoduchšia.
Pomocou tohto pluginu môžete filtrovať príspevky a stránky podľa abecedy. Nielenže sa ľahko inštaluje, ale aj používa.
Toto je jeden z najlepších pluginov na stránkovanie stránok galérie, komentárov atď. Premieňa galérie na stránkované galérie.
Tento plugin vám umožňuje vytvárať stránkovacie stránky podľa vašich požiadaviek. Môžete zvýšiť číslovanie na jednej strane, vybrať počet jednotiek, ktoré sa majú zobraziť. Predvolená hodnota je 10.
Jeden z najlepších doplnkov, ktorý vytvára navigáciu medzi nasledujúcim a predchádzajúcim príspevkom vo forme kontextového okna na ľavej alebo pravej strane okna. Keď používateľ posúva stránku, zobrazí sa kontextové okno, v ktorom môžete vybrať nasledujúci alebo predchádzajúci príspevok.
Plugin vám umožňuje vybrať si medzi 3 typmi stránkovania, ak nastavíte požadovaný parameter. Toto je jeden z najatraktívnejších doplnkov pre stránkovanie.
Skvelý doplnok, ktorý ponúka 11 rôznych možností stránkovania.
Vynikajúca zbierka štýlov CSS pre obľúbené doplnky WordPress - WP-PageNavi a WP-Paginate. Obsahuje stránky HTML s ukážkami štýlov a každý štýl obsahuje samostatný súbor CSS.
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.
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 " if ($celkom == 1 && $max > 1 ) $strany = "strana ". $current. " od " . max. "". "\r\n" ; echo $pages . paginate_links($a) ; 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:
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:
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.
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é.
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.
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é:
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!
Zdravím vás, milí čitatelia blogovej stránky. Dnes si povieme niečo o veľmi populárnom doplnku WP-PageNavi, ktorý vám umožní posunúť navigáciu na stránkach vášho blogu WordPress na novú úroveň.
Stránkovanie, ktoré sa štandardne používa, je v zásade celkom stráviteľné, no aj tak vyzerá možnosť, ktorú toto rozšírenie ponúka, oveľa atraktívnejšie.
Posúďte sami, takto vyzerá predvolené stránkovanie:
A po nainštalovaní pluginu:
alebo takto:
závisí to od možností, ktoré vyberiete v okne nastavení.
Podľa môjho názoru je druhá možnosť oveľa krajšia ako prvá, ktorá sa štandardne používa. Ak si to tiež myslíte, mali by ste si prečítať tento článok až do konca a dozvedieť sa všetko o nuansách inštalácie a konfigurácie tohto úžasného rozšírenia.
Plugin bude potrebné najprv stiahnuť. odtiaľ. Nájdite tlačidlo „Stiahnuť“ vpravo a uložte archív wp-pagenavi.zip do svojho počítača. Potom ho rozbaľte a výsledný priečinok nahrajte na hostingový server do adresára pluginov wp-content/plugins/ .
Ak to chcete urobiť, budete musieť pristupovať k súborom a priečinkom svojho blogu WP pomocou protokolu FTP ().
Pri rozbaľovaní sa stáva, že sa objaví extra externý priečinok, takže to skontrolujte a v prípade potreby sa ho zbavte. Dúfam, že som to vysvetlil jasne? V opačnom prípade WordPress neuvidí doplnok, ktorý ste nainštalovali. Dobre poďme ďalej.
Po skopírovaní súborov doplnku na hostiteľský server v priečinku wp-content/plugins/ budete musieť prejsť na panel správcu WordPress (http://your_sait.ru/wp-admin/) a vybrať položku „Pluginy“ položka z ľavého menu administračného panela “. V hornej časti okna „Správa“, ktoré sa otvorí, musíte kliknúť na odkaz „Neaktívne“ (alebo, ak neexistuje preklad, potom „Neaktívne“).
Otvorí sa okno so všetkými nainštalovanými, ale ešte neaktivovanými rozšíreniami. Nájdite medzi nimi „WP-PageNavi“ a kliknite na odkaz „Aktivovať“, ktorý sa nachádza pod jeho názvom.
Doplnok je aktivovaný, ale ak chcete vidieť výsledky jeho práce na svojom blogu, budete musieť do súborov aktuálnej témy vložiť aj kód volania funkcie wp_pagenavi. .
Stránkovanie sa zvyčajne používa na hlavnej stránke blogu (súbor INDEX.PHP v priečinku témy), na webových stránkach s archivovaným obsahom (ARCHIVE.PHP) a vo výsledkoch vyhľadávania (súbor SEARCH.PHP). V skutočnosti budeme musieť do týchto súborov (šablón) vložiť volací kód funkcie, ktorú potrebujeme.
Tie. budete sa musieť znova pripojiť cez FTP a prejsť do priečinka s aktuálnou témou:
wp-content/themes/Názov priečinka s vašou témou
Nájdite v ňom INDEX.PHP a otvorte ho na úpravu v editore, ktorý vám vyhovuje (ja na tento účel používam pokročilý Notepad ++ – mám článok o práci s ním). Teraz je vašou úlohou nájsť časť kódu v INDEX.PHP, ktorá je zodpovedná za prechod na predchádzajúcu alebo nasledujúcu stránku. Ťažká úloha, však? Aj keď, samozrejme, pre koho.
INDEX.PHP nie je príliš veľký, pozorne si preštudujte jeho obsah, či neobsahuje komentáre týkajúce sa stránkovania, napríklad tieto:
Tvorcovia tém WordPress zvyčajne zahŕňajú do takýchto komentárov oblasť kódu zodpovednú za zobrazenie stránkovania. Samotný štandardný kód môže vyzerať napríklad takto:
Keď identifikujete požadovaný fragment, budete ho musieť nahradiť riadkom volajúcim funkciu wp_pagenavi:
Teraz musíte uložiť zmeny vykonané v INDEX.PHP, prejsť na hlavnú stránku svojho blogu a uistiť sa, že všetko funguje tak, ako má. Tie. namiesto štandardného stránkovania používaného vo WordPress, využívate krásu WP-PageNavi.
Mimochodom, štandardné stránkovanie nie je možné z kódu INDEX.PHP odstrániť, takže po odstránení tohto pluginu s ním nebudete mať neskôr problémy. Ak to chcete urobiť, budete musieť do INDEX.PHP namiesto štandardného navigačného kódu napísať podmienku, ktorá určuje, kedy sa má zobraziť štandard a kedy panel WP-PageNavi.
Podmienka bude závisieť od toho, či je doplnok WP-PageNavi nainštalovaný na vašom blogu alebo nie. Môže to vyzerať nejako takto:
Podmienka v tomto kóde:
If(function_exists("wp_pagenavi"))
skontroluje, či je doplnok nainštalovaný, a ak nie je nainštalovaný, štandardný skript bude fungovať:
inak(?>
A ak je nainštalovaný WP-PageNavi, navigačný panel bude tvorený jeho silami:
{ ?>
Aj keď sa, samozrejme, nemôžete obťažovať a jednoducho nahradiť jeden iným, ale je to na vás.
Takže teraz budete musieť urobiť to isté pre súbory ARCHIVE.PHP a SEARCH.PHP z priečinka témy (wp-content/themes/Názov priečinka s témou).
Aby ste sa do nich dostali, budete musieť vybrať v administračnom paneli z ľavého menu v oblasti "Parametre" položku "Zoznam stránok". Otvorí sa okno s aktívnou kartou „Šablóny zoznamu stránok“:
V poli "Šablóna všeobecného zoznamu stránok" na obrázku vyššie sa nastavuje zobrazenie aktuálnej stránky a celkový počet strán. S touto možnosťou na vyplnenie tohto poľa bude panel WP-PageNavi vyzerať takto:
Ak chcete, môžete do tohto poľa pridať slovo „Stránka“:
Stránka %CURRENT_PAGE% z %TOTAL_PAGES%
A ak chcete, môžete ho dokonca vyčistiť. V stĺpcoch "Prvok "Aktuálna stránka"" a "Prvok" Stránka "" nechajte všetko tak, ako je. Tu môžete nastaviť zobrazenie nápisu pre aktuálnu a všetky ostatné webové stránky ako poradové číslo. Dopadne to asi takto:
V poliach "Text pre prvú stranu" a "Text pre poslednú stranu" môžete nastaviť text tlačidiel tak, aby prešli na prvú a poslednú:
Namiesto textu v stĺpci „Text pre prvú stranu“ môžete napísať jeden a pole „Text pre poslednú stranu“ - %TOTAL_PAGES% (namiesto tohto nápisu sa zobrazí počet všetkých webových stránok):
V poliach „Text pre nasledujúci príspevok“ a „Text pre predchádzajúci príspevok“ sú napísané šípky, ktoré sa majú zobraziť na tlačidlách na prechod na nasledujúci a predchádzajúci:
Vymazal som ďalšie dve polia, pretože inak sa namiesto toho zobrazili dve biele tlačidlá bez textu. Je možné, že toto nebudete mať a sami sa rozhodnete, na čo sú.
Prejdime k ďalším nastaveniam s názvom „Nastavenia zoznamu“:
Začiarkavacie políčko „Použiť pagenavi-css.css“ vám umožňuje zakázať alebo povoliť súbor kaskádových štýlov (CSS), ktorý sa dodáva s doplnkom. V poli "Štýl zoznamu" si môžete vybrať jeden z dvoch štýlov CSS z rozbaľovacieho zoznamu.
Na predchádzajúcich obrázkoch ste videli „Normálne“ a pri výbere štýlu „Rozbaľovací zoznam“ získate niečo ako tento pohľad na panel WP-PageNavi vo WordPress:
Ak zaškrtnete políčko „Vždy zobraziť navigáciu na stránke“, potom sa aj pri webových stránkach, ktoré ešte nevyžadujú číslovanie (povedzme, že na hlavnej stránke nie je dostatok príspevkov na rozdelenie), bude navigácia stále zobrazovať približne takto :
V časti „Počet strán na zobrazenie“ môžete nastaviť, koľko strán sa zobrazí ako súvislý (po sebe idúci) rad čísel. Prechod na zvyšok bude možný pomocou tlačidiel nasledujúci a predchádzajúci, ako aj tlačidiel na prechod na prvé a posledné. Dal som tam päťku, ako výsledok som dostal:
V časti "Počet väčších čísel stránok na zobrazenie" môžete nastaviť, koľko čísel webových stránok (väčších ako aktuálne zobrazené číselné hodnoty) sa zobrazí po ďalšom tlačidle.
A v poli "Zobraziť väčšie čísla stránok v násobkoch" môžete nastaviť krok, s ktorým sa budú zobrazovať čísla vzdialených webových stránok. Povedzme, že do prvého poľa dám trojku a do druhého dve:
V dôsledku toho bude panel PageNavi vyzerať takto:
Tie. čísla iba troch vzdialených webových stránok sa zobrazujú s intervalom (krokom) rovným dvom (6, 8, 10). Aby ste nepoužívali zobrazovanie vzdialených čísel, postačí, ak do stĺpca „Počet väčších čísel stránok na zobrazenie“ uvediete nulu.
Ak chcete použiť a zobraziť zmeny, ktoré ste nastavili, v nastaveniach pluginu budete musieť kliknúť na tlačidlo "Uložiť zmeny" umiestnené v spodnej časti.
Ak chcete zmeniť farebnú schému, výplň, fonty a ďalšie atribúty vzhľadu panela stránkovania zobrazeného na vašom blogu, budete musieť pridať potrebné vlastnosti CSS do súboru kaskádových štýlov tohto doplnku.
Pravda, aby mal podobu zobrazenú na snímkach obrazovky v tomto článku, pridal som ďalšie vlastnosti nie do súboru CSS pluginu (/wp-content/plugins/wp-pagenavi/pagenavi-css.css), ale do súboru súbor používam témy (wp-content/themes/názov priečinka s témou/style.css).
Vlastnosti CSS, ktoré definujú vzhľad panela WP-PageNavi, v tomto súbore vyzerajú takto:
#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active ( padding: 3px 8px 3px 8px; margin: 2px; text-decoration: none; color: #fff; border: 0px line-height:24px; background-color: #2b99ff; ) #content .wp-pagenavi a:hover ( color:#fff; background-color: #154b7d; ) #content .wp-pagenavi span.pages ( padding: 3px 8px 3px 8px; margin: 2px 2px 2px 2px; ) #content .wp-pagenavi span.current ( padding: 3px 8px 3px 8px; margin: 2px; line-height:25px; font-weight: bold; color: #add352; pozadie:#26343c; )
Upozorňujem na skutočnosť, že názvy tried a ID (), ktoré sú tu použité, sa vzťahujú konkrétne na moju šablónu. Dovoľte mi vysvetliť účel niektorých pravidiel a vlastností CSS.
#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active ( padding: 3px 8px 3px 8px; margin: 2px; text-decoration: none; color: #fff; border: 0px line-height:24px; background-color: #2b99ff; )
nastavuje vonkajšie a vnútorné okraje (pozri o nich) pre tlačidlá panela (v skutočnosti pre odkazy z týchto tlačidiel, pretože tieto vlastnosti sa použijú na odkazy špecifikované značkou A a umiestnené v kontajneri wp-pagenav).
Toto pravidlo nastavuje aj farbu textu odkazu (biela farba je nastavená vo vlastnosti color: #fff; - ).
Okolo odkazov nebude žiadne orámovanie (vlastnosť okraja: 0px) a farba pozadia pre kontajnery s týmito odkazmi bude určená vlastnosťou background-color: #2b99ff; . Práve túto farbu môžete vidieť na snímkach obrazovky vyššie pre neaktívne tlačidlá panela stránkovania.
CSS pravidlo:
#content .wp-pagenavi a:hover ( color:#fff; background-color: #154b7d; )
nastavuje farbu pre text a pozadie kontajnera (tlačidla) s odkazom, na ktorom sa práve nachádza kurzor myši (CSS vlastnosti hover odkazu - a:hover - ).
Farba textu odkazu je stále biela, ale farba pozadia (v skutočnosti farba tlačidla) je zmenená na tmavšiu (farba pozadia: #154b7d;). Tie. návštevník prejdením kurzorom myši po tlačidlách navigačnej lišty uvidí zmenu farby tlačidla, čo vytvára dojem interaktivity.
CSS pravidlo:
#content .wp-pagenavi span.current ( padding: 3px 8px 3px 8px; margin: 2px; line-height:25px; font-weight: bold; color: #add352; background:#26343c; )
Nastaví vzhľad tlačidla s číslom aktuálne otvorenej stránky blogu (tento odkaz bude mať v kóde značku SPAN s triedou CURRENT). Takéto tlačidlo by vyzeralo rovnako ako tlačidlo s číslom jedna na obrázku nižšie:
Toto pravidlo CSS mení farbu pozadia tohto aktívneho tlačidla (vlastnosť pozadia: #26343c), farbu textu odkazu na tomto tlačidle (farba: vlastnosť #add352) a okrem toho bude písmo textu odkazu tučné. na túto vlastnosť CSS — font-weight :bold().
Ak však chcete zmeniť vzhľad panela stránkovania, môžete do šablóny so štýlmi samotného doplnku pridať potrebné vlastnosti CSS. Tento súbor kaskádových štýlov môžete otvoriť na úpravy z priečinka:
/wp-content/plugins/wp-pagenavi/pagenavi-css.css
Napríklad, ak chcete získať takýto panel:
Tento archív si budete musieť stiahnuť, rozbaliť a skopírovať priečinok IMAGES do priečinka s doplnkom WP-PageNavi, ktorý nájdete v nasledujúcej ceste:
/wp-content/plugins/wp-pagenavi
Priečinok IMAGES obsahuje grafický súbor fon.gif , ktorý bude tvoriť pozadie pre panel PageNavi. Teraz budete musieť otvoriť súbor /wp-content/plugins/wp-pagenavi/pagenavi-css.css na úpravu a nahradiť tam kód nasledujúcimi pravidlami:
wp-pagenavi ( šírka: 100 %; overflow:hidden; padding: 4px 0px 4px 0px; margin-left: 0px; border: 1px solid #00598F; background: url("images/fon.gif") stred ľavý repeat-x ; ) .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited ( odsadenie: 4px 5px 4px 5px; okraj: 2px 0px 2px 0px; farba: #ffffff; váha písma: tučné; text -decoration: none; ) .wp-pagenavi a.last ( výplň: 4px 5px 4px 5px; ) .wp-pagenavi a.first ( výplň: 4px 5px 4px 5px; ) .wp-pagenavi a:hover ( farba pozadia: #00598F; farba: #FFFFFF; font-weight: bold; ) .wp-pagenavi span.pages ( výplň: 4px 5px 4px 5px; okraj: 2px 0px 2px 0px; farba: #FFFFFF; pozadie: url("images/fon .gif") stred ľavý repeat-x; farba pozadia: #4f4f4f; font-weight: bold; ) .wp-pagenavi span.current ( padding: 4px 7px 4px 7px; margin: 2px 0px 2px 0px; font-weight: bold; border-top: 1px solid #00598F; border-bottom: 1px solid #00598F; color: #FFFFFF; background-color: #00598F; font-weight: bold; ) .wp-pagenavi span.extend ( padding: 4px 0px 4px 0px; okraj: 2px 0px 2px 0px; pravý okraj: 0px; ľavý okraj: 0px; border-top: 1px plný #00598F; border-bottom: 1px solid #00598F; farba: #FFFFFF; pozadie: url("obrázky/fon.gif") stred vľavo repeat-x; font-weight: bold; ) .wp-pagenavi span.next-prev ( rodina fontov: Arial; /* oprava IE */ )
Uložte zmeny na pagenavi-css.css a navštívte svoj blog, aby ste zistili, či sa navigácia zmenila. Ak sa to nezmenilo, skúste obnoviť obsah okna v prehliadači podržaním tlačidla SHIFT a ak to nepomôže, vymažte vyrovnávaciu pamäť prehliadača.
Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu
Možno vás bude zaujímať
Easy Social Share Buttons - plugin na pridávanie tlačidiel sociálnych sietí do WordPress, vrátane Vkontakte a Odnoklassniki 
Prihlásiť sa na odber komentárov pre WordPress – odber komentárov k článkom vo WordPress 
Drobečková navigácia vo WordPress pomocou doplnku Breadcrumb NavXT (posilnenie prepojenia) 
Jednoduché počítadlá a ikony kategórií a stránok – krásne počítadlá RSS a Twitter, ako aj ikony kategórií a stránok vo WordPress 
Inštalácia a konfigurácia pluginov pre WordPress, riešenie možných problémov 
All in One SEO Pack a interná optimalizácia blogu WordPress pre vyhľadávače (metaznačky Canonical, Description a Title) 
Galéria pre WordPress založená na doplnku NextGEN Gallery – vytváranie a zobrazovanie fotogalérií a prezentácií v článkoch 
Google XML Sitemaps – Vytvorenie Sitemap pre WordPress 
Lepší Feed pre WordPress – ako neposielať plné texty príspevkov do RSS a chrániť sa pred krádežou obsahu cez news feed 
Prepojenie stránok webu na príklade doplnku upPrev (pohyblivý panel) pre WordPress
