A kezdőlapon, valamint a kategóriaoldalakon, archívumokban és keresési eredményeknél általában szükség van oldalnavigációra (más néven oldalszámozásra). Ez alól a WordPress-en lévő blogok sem használnak oldalszámozást, amikor az információkiadás eredményeit több oldalra osztják.

Korábban ennek a funkciónak a megvalósításához harmadik féltől származó beépülő modulokat vagy speciális funkciókat használtak, amelyek a fájlban voltak függvények.php. A WordPress 4.1-es verziójának megjelenésével azonban a lapozási funkció beépült a CMS magjába, és most már a WordPress belső funkciói is elegendőek az oldalnavigáció megvalósításához, és nincs szükség harmadik féltől származó kód vagy bővítmények hozzáadására.

Korábban írtam a WordPress hasonló fejlesztéséről a TITLE címkével kapcsolatban - https://aboutwordpress.ru/post/wordpress-title/.

Mi az a lapozás

A lapozás az információk oldalakra való felosztása. Ez a fogalom az oldalak sorszámozását is jelenti, amelyet a lap alján, tetején vagy oldalán található számok jelzik.

WP-PageNavi – WordPress lapozási bővítmény

A WordPress legnépszerűbb lapozási bővítménye a WP-PageNavi. Hogy őszinte legyek, olyan jól megbirkózik a lapozási feladattal, hogy nincs értelme más beépülő modulokat tárgyalni és összehasonlítani.

WordPress oldalszámozás - WP-PageNavi bővítmény

WordPress oldalszámozás plugin nélkül

A beépülő modulok nélküli oldal lapozáshoz a WordPress beépített the_posts_pagination() függvényét fogjuk használni. A szükséges helyre be kell szúrnunk a következő kódot (általában ezek fájlok index.php, kategória.phpés a hasonlók):

A the_posts_pagination() függvény eredménye hozzávetőlegesen a következő HTML-kód lesz:

H2 címsor eltávolítása a lapozásból

A H2 fejléc „Post Navigation” azonnal felkelti a figyelmet. Aminek a legtöbb esetben nincs helye az oldalon. Megszabadulásához adja hozzá a következő kódot a fájlhoz függvények.php:

/* H2 eltávolítása a lapozásból */ add_filter("navigation_markup_template", "my_navigation_template", 10, 2); function my_navigation_template($sablon, $class)( return "

"; }

Lapozási oldalak beállítása

Alapértelmezés szerint a the_posts_pagination() megjeleníti az első és az utolsó oldalt, valamint egy oldalt az aktuális körül. Az összes többit ellipszis helyettesíti. Ez a viselkedés argumentumokkal módosítható:

• show_all - az összes oldal megjelenítése
• end_size - oldalak száma a lista elején és végén
• mid_size – az aktuális oldaltól balra és jobbra eső oldalak száma

Például így:

2, "end_size" => 2,)); ?>

CSS lapozási stílusok

Üdvözlöm a blogoldal kedves olvasóit. Ma a nagyon népszerű WP-PageNavi bővítményről fogunk beszélni, amely lehetővé teszi, hogy új szintre emelje a WordPress blog oldalnavigációját.

Az alapértelmezés szerint használt oldalnavigáció (lapozás) elvileg meglehetősen felhasználóbarát, de a bővítmény által kínált lehetőség sokkal vonzóbbnak tűnik.

Miért érdemes a WP-PageNavi beépülő modult használni?

Ítélje meg maga, így néz ki az alapértelmezett oldalszámozás:

És ez a plugin telepítése után:

vagy így:

ez a beállítási ablakban kiválasztott opcióktól függ.

Véleményem szerint a második lehetőség sokkal szebb, mint az első, ami az alapértelmezett. Ha Ön is így gondolja, akkor olvassa el ezt a cikket a végéig, és tudjon meg mindent a telepítés árnyalatairól és ennek a csodálatos bővítménynek a konfigurálásáról.

Először le kell töltenie a bővítményt innen. Keresse meg a „Letöltés” ​​gombot a jobb oldalon, és mentse el a wp-pagenavi.zip archívumot a számítógépére. Ezután csomagolja ki, és töltse fel a kapott mappát a tárhelykiszolgálóra a wp-content/plugins/ pluginokkal.

Ehhez el kell érnie a WP-blog fájljait és mappáit FTP()-en keresztül.

Kibontáskor előfordul, hogy egy plusz külső mappa jelenik meg, ezért ezt nézd meg, és szükség esetén válassz meg tőle. Remélem érthetően elmagyaráztam? Ellenkező esetben a WordPress nem fogja látni a telepített bővítményt. Oké, folytassuk.

Miután a beépülő modul fájljait a wp-content/plugins/ mappában lévő tárhelykiszolgálóra másolta, lépjen a WordPress adminisztrációs paneljére (http://vash_sait.ru/wp-admin/), és válassza a „Plugins” lehetőséget a listából. bal oldali admin menü" A megnyíló „Kezelés” ablak tetején kattintson az „Inaktív” linkre (vagy ha nincs fordítás, akkor „Inaktív”).

Megnyílik egy ablak az összes telepített, de még nem aktivált bővítménnyel. Keresse meg köztük a „WP-PageNavi”-t, és kattintson a neve alatt található „Aktiválás” hivatkozásra.

Illessze be a bővítmény kimeneti kódját a szükséges WordPress sablonokba

A beépülő modul aktiválva van, de ahhoz, hogy munkája eredményét lásd a blogodon, be kell illesztened a wp_pagenavi függvény meghívó kódját is az éppen használt téma fájljaiba. .

Az oldalszámozást általában a blog kezdőlapján (INDEX.PHP fájl a téma mappájából), az archív weboldalakon (ARCHIVE.PHP) és a keresési eredményeken (SEARCH.PHP fájl) használják. Valójában ezekbe a fájlokba (sablonokba) kell beillesztenünk a szükséges függvény meghívásához szükséges kódot.

Azok. Újra csatlakoznia kell FTP-n keresztül, és az aktuális témával rendelkező mappába kell lépnie:

Wp-content/themes/A témát tartalmazó mappa neve

Keresse meg benne az INDEX.PHP-t, és nyissa meg szerkesztésre egy Önnek megfelelő szerkesztőben (én fejlett NotePad++-t használok erre a célra - van egy cikkem a használatáról). Most az a feladatod, hogy megkeresd az INDEX.PHP-ben azt a kódrészt, amely az előző vagy a következő oldalra lépésért felelős. Nem könnyű feladat, igaz? Bár persze attól függ, hogy kitől.

Az INDEX.PHP nem túl nagy, figyelmesen tanulmányozza a tartalmát, hogy keresse az oldalszámozással kapcsolatos megjegyzéseket, például:

A WordPress téma készítői általában az ilyen megjegyzéseket az oldalnavigáció megjelenítéséért felelős kódterületen helyezik el. Maga a szabványos kód például így nézhet ki:

Miután azonosította a szükséges töredéket, le kell cserélnie a wp_pagenavi függvényhívási sorra:

Most el kell mentenie az INDEX.PHP-ben végrehajtott módosításokat, mennie kell a blog főoldalára, és meg kell győződnie arról, hogy minden a megfelelő módon működik. Azok. A WordPressben használt szabványos oldalszámozás helyett a WP-PageNavi szépségét használja.

Egyébként a szabványos lapozást nem kell eltávolítani az INDEX.PHP kódból, hogy a bővítmény eltávolításakor ne legyen vele gond. Ehhez a szabványos navigációs kód helyett az INDEX.PHP-be kell beírni egy feltételt, amely meghatározza, hogy mikor jelenjen meg a szabvány és mikor a WP-PageNavi panel.

A feltétel attól függ, hogy a WP-PageNavi beépülő modul telepítve van-e a blogján vagy sem. Valahogy így nézhet ki:

Ebben a kódban a feltétel a következő:

If(function_exists("wp_pagenavi"))

ellenőrzi, hogy a bővítmény telepítve van-e, és ha nincs telepítve, akkor a szabványos szkript fut:

Más (?>

És ha a WP-PageNavi telepítve van, akkor ez fogja létrehozni a navigációs sávot:

{ ?>

}

Bár természetesen nem kell vesződni, és csak az egyiket a másikkal cserélni, de ez rajtad múlik.

Tehát most ugyanezt kell tennie az ARCHIVE.PHP és a SEARCH.PHP fájlokkal a témát tartalmazó mappából (wp-content/themes/A témát tartalmazó mappa neve).

WP-PageNavi beépülő modul beállításai egy WordPress bloghoz

Ahhoz, hogy bejusson hozzájuk, ki kell választania az „Oldalok listája” lehetőséget a bal oldali menü „Opciók” területén az adminisztrációs panelen. Megnyílik egy ablak az „Oldallista sablonok” füllel:

A fenti ábra „Általános oldallista sablonja” mezőben az aktuális oldal és az összes oldalszám megjelenítése kerül beállításra. Ha ezt a mezőt kitölti, a WP-PageNavi panel így fog kinézni:

Ebbe a mezőbe hozzáadhatja az "Oldal" szót, ha úgy tetszik:

%CURRENT_PAGE%/%TOTAL_PAGES% oldal

És ha szeretné, teljesen megtisztíthatja. Az „Aktuális oldal” elem és az „Oldal” elem” oszlopokban hagyjon mindent úgy, ahogy van. Itt állíthatja be, hogy az aktuális és az összes többi weboldal címke sorozatszám formájában jelenjen meg. Valahogy így fog kinézni:

A „Szöveg az első oldalhoz” és a „Szöveg az utolsó oldalhoz” mezőkben beállíthatja az első és az utolsó gomb szövegét:

A „Szöveg az első oldalhoz” oszlopban a szöveg helyett írhat egyet, és a „Szöveg az utolsó oldalhoz” mezőt - %TOTAL_PAGES% (e felirat helyett az összes weboldal száma jelenik meg):

A „Szöveg a következő bejegyzéshez” és a „Szöveg az előző bejegyzéshez” mezőkben nyíljelek vannak írva, amelyek a következő és az előző gombokon jelennek meg:

A következő két mezőt töröltem, mert... egyébként két fehér gomb volt, szöveg nélkül. Lehetséges, hogy neked ez nem lesz meg és te döntöd el magad, hogy mire kellenek.

Térjünk át a „Listabeállítások” nevű további beállításokra:

A „Panavi-css.css használata” jelölőnégyzet lehetővé teszi a beépülő modulhoz tartozó kaszkád stíluslap (CSS) fájl letiltását vagy engedélyezését. A „Listastílus” mezőben két CSS-stílus közül választhat a legördülő listából.

Láttad a „Normál” feliratot az előző képernyőképeken, és amikor a „legördülő lista” stílust választod, valami ehhez hasonló nézetet kapsz a WordPress WP-PageNavi paneljéről:

Ha bejelöli az „Oldalnavigáció mindig megjelenítése” jelölőnégyzetet, akkor még a számozást még nem igénylő weboldalak esetében is (tegyük fel, hogy még nincs elég bejegyzés a főoldalon ahhoz, hogy a felosztás megtörténjen), a navigáció továbbra is valami ilyesmit jelenített meg:

A "Number Of Pages To Show" (Megjelenítendő oldalak száma) alatt beállíthatja, hogy hány oldal jelenjen meg folyamatos (szekvenciális) számsorozatként. A többire váltani a következő és előző gombokkal, valamint az első és az utolsó gombokkal lehet majd átváltani. Oda tettem egy ötöst, aminek eredménye:

A „Number Of Larger Page Numbers To Show” (Number Of Larger Page Numbers To Show) mezőben beállíthatja, hogy a következő gomb után hány távoli weboldal (nagyobb, mint az aktuálisan megjelenített számértékek száma) jelenjen meg.

A „Nagyobb oldalszámok megjelenítése többszörösen” mezőben pedig beállíthatja, hogy milyen lépésekkel jelenjenek meg a távoli weboldalak számai. Tegyük fel, hogy az első mezőbe hármast tettem, a másodikba pedig kettőt:

Ennek eredményeként a PageNavi panel így fog kinézni:

Azok. Csak három távoli weboldal száma jelenik meg kettővel (6, 8, 10) egyenlő intervallummal (lépéssel). Annak érdekében, hogy ne használja a távoli számok megjelenítését, csak egy nullát kell tennie a „Megjelenítendő nagyobb oldalszámok száma” oszlopban.

Az Ön által megadott módosítások alkalmazásához és megjelenítéséhez a bővítmény beállításainál kattintson az alul található „Változtatások mentése” gombra.

Az oldalszámozási navigációs sáv megjelenésének módosítása

A blogján megjelenő oldalszámozási panel színsémájának, kitöltésének, betűtípusainak és egyéb megjelenési jellemzőinek megváltoztatásához hozzá kell adnia a szükséges CSS-tulajdonságokat a bővítmény lépcsőzetes stíluslapfájljához.

Igaz, hogy az ebben a cikkben szereplő képernyőképeken látható formát öltse, nem a bővítmény CSS-fájljához (/wp-content/plugins/wp-pagenavi/pagenavi-css.css) adtam hozzá további tulajdonságokat, hanem az általam használt fájl témákat (wp-content/themes/a theme/style.css mappa neve).

Ebben a fájlban a WP-PageNavi panel megjelenését meghatározó CSS-tulajdonságok így néznek ki:

#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active ( kitöltés: 3px 8px 3px 8px; margó: 2px; szövegdekoráció: nincs; szín: #fff; keret: 0px vonalmagasság:24px; háttérszín: #2b99ff; padding: 3px 8px 3px 8px margó: 2px 2px 2px #add352 háttér:#26343c)

Kérjük, vegye figyelembe, hogy az itt használt osztálynevek és ID() kifejezetten az én sablonomra vonatkoznak. Hadd magyarázzam el néhány CSS-szabály és -tulajdonság célját.

#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active ( kitöltés: 3px 8px 3px 8px; margó: 2px; szövegdekoráció: nincs; szín: #fff; keret: 0px vonalmagasság:24px háttérszín: #2b99ff )

beállítja a külső és belső margókat (lásd róluk) a panelgombokhoz (valójában az ezekről a gombokról származó hivatkozásokhoz, mivel ezek a tulajdonságok kifejezetten az A címke által meghatározott hivatkozásokra vonatkoznak, és a wp-pagenav tárolóba kerülnek) .

Ez a szabály a hivatkozás szövegének színét is beállítja (a fehér szín a color tulajdonságban van beállítva: #fff; - ).

A hivatkozások körül nem lesz szegély (border tulajdonság: 0px), és az ilyen hivatkozásokat tartalmazó tárolók háttérszínét a background-color tulajdonság határozza meg: #2b99ff; . Ezt a színt láthatja a fenti képernyőképeken az oldalnavigációs panel inaktív gombjainál.

CSS szabály:

#content .wp-pagenavi a:hover ( color:#fff; háttérszín: #154b7d; )

beállítja a tároló (gomb) szövegének és hátterének színét azzal a hivatkozással, amely felett az egérkurzor éppen áll (a hivatkozás CSS-tulajdonságai lebegve - a:hover - ).

A hivatkozás szövegének színe fehér marad, de a háttérszín (valójában a gomb színe) sötétebbre változik (háttérszín: #154b7d;). Azok. Amikor a látogató az egeret a navigációs sáv gombjaira viszi, a gomb színe megváltozik, ami interaktivitás érzetét keltheti.

CSS szabály:

#content .wp-pagenavi span.current ( kitöltés: 3px 8px 3px 8px; margó: 2px; vonalmagasság: 25px; betűvastagság: félkövér; szín: #add352; háttér:#26343c; )

Beállítja a gomb megjelenését az éppen megnyitott blogoldal számával (ennek a linknek a kódjába a CURRENT osztályú SPAN tag kerül beírásra). Ez a gomb ugyanúgy fog kinézni, mint az első számú gomb az alábbi képen:

Ez a CSS-szabály módosítja az aktív gomb háttérszínét (tulajdonság háttere: #26343c), a link szövegének színét ezen a gombon (tulajdonság színe: #add352), valamint a hivatkozás szövegének betűtípusát félkövér ennek a CSS-tulajdonságnak köszönhetően - font-weight :bold().

De az oldalnavigációs panel megjelenésének megváltoztatásához hozzáadhatja a szükséges CSS-tulajdonságokat a bővítmény stílusfájljához. Ezt a lépcsőzetes stíluslapfájlt megnyithatja szerkesztésre a mappából:

/wp-content/plugins/wp-pagenavi/pagenavi-css.css

Például egy ilyen panel létrehozásához:

Le kell töltenie ezt az archívumot, ki kell csomagolnia, és az IMAGES mappát át kell másolnia a WP-PageNavi plugin mappájába, amelyet a következő elérési úton találhat meg:

/wp-content/plugins/wp-pagenavi

A IMAGES mappában található egy fon.gif grafikus fájl, amely a PageNavi panel hátterét képezi. Most meg kell nyitnia a /wp-content/plugins/wp-pagenavi/pagenavi-css.css fájlt szerkesztéshez, és le kell cserélnie a kódot a következő szabályokkal:

Wp-pagenavi ( szélesség: 100%; túlcsordulás: rejtett; kitöltés: 4px 0px 4px 0px; margó balra: 0px; szegély: 1px tömör #00598F; háttér: url("images/fon.gif") középen balra ismétlés-x ; ) .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited ( kitöltés: 4px 5px 4px 5px; margó: 2px 0px 2px 0px; szín: #ffffff; betűsúly: félkövér -dekoráció: nincs #00598F; szín: #FFFFFF; félkövér gif") bal középső ismétlés-x; háttérszín: #4f4f4f; betűsúly: vastag szegély-felül: 1px szilárd #00598F; háttérszín: #00598F. margó: 2px 0px 2px 0px; margó-jobb: 0px; margó-bal: 0px; border-top: 1px solid #00598F; keret-alsó: 1px tömör #00598F; szín: #FFFFFF; háttér: url("images/fon.gif") bal középső ismétlés-x; betűsúly: félkövér; ) .wp-pagenavi span.next-prev ( font-family: Arial; /* IE javítás */ )

Mentse el a módosításokat a pagenavi-css.css fájlba, és keresse fel blogját, és nézze meg, hogy a navigáció megváltozott-e. Ha nem változott, próbálja meg frissíteni az ablak tartalmát a böngészőben a SHIFT gomb lenyomásával, és ha ez nem segít, akkor törölje a böngésző gyorsítótárát.

Sok szerencsét! Hamarosan találkozunk a blog oldalain

Lehet, hogy érdekel

Easy Social Share Buttons – bővítmény közösségi hálózati gombok hozzáadásához a WordPresshez, beleértve a VKontakte-t és az Odnoklassnikit
Feliratkozás a WordPress megjegyzéseire – feliratkozás a WordPress cikkekhez fűzött megjegyzésekre
Breadcrumbs a WordPressben a Breadcrumb NavXT bővítmény használatával (a linkelés megerősítése)
Egyszerű számlálók és kategória- és oldalikonok – gyönyörű RSS- és Twitter-számlálók, valamint kategóriák és oldalak ikonjai a WordPressben
WordPress bővítmények telepítése és konfigurálása, lehetséges problémák megoldása
All in One SEO Pack és egy WordPress blog belső keresőoptimalizálása (Canonical, Description és Title meta tagek)
Galéria a WordPresshez a NextGEN Gallery beépülő modul alapján – fotógalériák és diavetítések létrehozása és megjelenítése cikkekben
Google XML-webhelytérképek – webhelytérkép készítése WordPresshez
Jobb hírcsatorna a WordPress számára – hogyan ne küldje el a bejegyzések teljes szövegét RSS-re, és hogyan védje meg magát a tartalomlopástól egy hírcsatornán keresztül
Weboldalak újrahivatkozása a WordPress upPrev beépülő moduljának (kihúzható panel) példájával

Sziasztok!

Továbbra is cikkeket írok a webhely-navigációról a WordPress motoron.

Ebben az anyagban pedig megmutatom, hogyan történik az oldalnavigáció pluginok nélkül és a jól ismert WP-PageNavi használatával. A megvalósításhoz hasonlóan itt is többféleképpen bemutatom a megvalósítást, így kiválaszthatja az Önnek legmegfelelőbbet. És vannak esetek, amikor valamelyik módszer nem működik valakinél. Ezért lesz valamilyen biztonsági háló.

Az anyag nagyon terjedelmes volt, és talán a legátfogóbb a hálózaton.

Az oldalnavigáció (oldalszámozás) az információk oldalakra való felosztása. Ha sok webhelyet vesz fel a Wordpres-en, akkor ezt a jelenséget egyértelműen kifejezi az oldalszámok listája az egyes oldalak alján, közleményekkel. A blogomon ez a funkció így néz ki:

A kialakítás változhat. De a lényege ugyanaz - az információk oldalakra bontása. Mint ismeretes, alapértelmezés szerint az oldal főoldalán megjelennek a bejegyzések bejelentései, amelyekből bizonyos szám lehet (az „Írás” menüpont beállításaitól függően).

Ha nem bontjuk le a számukat, akkor egy oldalon jelennek meg. És ez nem jó, mivel kényelmetlen lesz az oldal használata, és a főoldal betöltése sokáig tart, mert idővel hatalmas számú bejelentés lesz.

Általános szabály, hogy a modern Wodpress sablonokban az oldalnavigáció már be van építve. De van egy lehetőség, amikor nincs. Akkor végre kell hajtani. Ehelyett előfordulhat, hogy a bejelentések oldalszámozása a korábbi és a következő bejegyzésekre mutató hivatkozások formájában történik. Ezt a szabványos sablonok egyértelműen kifejezik.

Ez a lehetőség is kényelmetlen, hiszen ha 3 oldalt visszamegyünk, akkor nem tudunk egy lépésben visszatérni az eredeti oldalra. Háromszor kell kattintania az előző vagy a következő bejegyzésekre. Az oldalnavigáció lehetővé teszi ennek a pillanatnak a rugalmasabb kezelését.

Általában térjünk át a megvalósításra, és az első lépés az, hogy integráljuk egy sablonba plugin nélkül. Ezt a módszert egy oktatóvideóban tárgyaltam. Azt javaslom, hogy először nézze meg, majd tanulmányozza át az utasítások szöveges változatát.

plugin nélkül csináljuk

Most mutatok egy módszert, ami után pontosan ugyanazt a WordPress oldal navigációt kapod, mint én. Minden nagyon egyszerűen történik. 2 kódrészre lesz szükség, amit el kell helyezni a sablonfájlokba, majd stílusokat kell hozzáadni a design beállításához. Kezdjük el!

Íme a kód első része. A tervezősablon functions.php fájljában kell elhelyezni.

függvény wp_corenavi() ( globális $wp_query, $wp_rewrite; $pages = ""; $max = $wp_query->max_sum_pages; if (!$current = get_query_var("paged")) $current = 1; $a["base "] = str_replace(999999999, "%#%", get_pagenum_link(999999999)); $a["összesen"] = $max; $a["aktuális"] = $aktuális; $összesen = 0; //1 - a "Page N of N" szöveg megjelenítése, 0 - ne jelenítse meg az $a["mid_size"] = 1-et //hány linket kell megjeleníteni az aktuálistól balra és jobbra $a["end_size"] = 1; //hány linket kell megjeleníteni az elején és a végén $a["prev_text"] = "" //link text "Előző oldal" $a["next_text"] = ""; Következő oldal" if ($max > 1) echo "

"; }

függvény wp_corenavi() ( globális $wp_query , $wp_rewrite ; $oldalak = "" ; $max = $wp_query -> max_oldalak_száma ; if (! $aktuális = get_query_var ( "lapozva" ) ) $aktuális = 1 ; $a [ "base" ] = str_replace ( 999999999 , "%#%" , get_pagenum_link ( 999999999 ) ) ; $a [ "összesen" ] = $max ; $a [ "current" ] = $aktuális ; $összesen = 0 ; //1 - "Page N of N" szöveg megjelenítése, 0 - ne jelenjen meg $a [ "közepes méret" ] = 1 ; //hány linket kell megjeleníteni az aktuálistól balra és jobbra $a [ "end_size" ] = 1 ; //hány linket kell megjeleníteni az elején és a végén $a [ "prev_text" ] = "" ; //link szövege "Előző oldal" $a [ "next_text" ] = "" ; //link szövege "Következő oldal" if ($max > 1 ) echo " " ;

A kódot a fájl legelejére, a nyitó tag után helyeztem el

Ebben a kódban beállíthatunk néhány paramétert:

• 10. sor - ha 0-ról 1-re változtatja az értéket, akkor az oldalszámok mellett egy olyan felirat jelenik meg, mint a „3/45. oldal”. Ezt az opciót megteheti, de szerintem ebben az esetben nincs rá szükség, hiszen az oldalszámokból már egyértelmű, hogy hány oldal van az oldalon. Az aktív oldal pedig más színnel van kiemelve;
• 11. és 12. sor – az aktív oldalszámtól balra és jobbra bizonyos számú előző vagy következő számnak kell megjelennie. Itt megjelenítjük a számukat. Ez a kód az 1 értéket tartalmazza. 2-t vagy 3-at is beírhat. Itt kell egy kicsit kísérletezni, mert minél több a szám, annál szélesebb lesz a navigáció. Minden a sablon szélességétől függ.

wp_corenavi();

Mivel az oldalnavigációt mindenhol meg kell jeleníteni, ahol a közlemények listája megjelenik, ezt a kódot minden olyan fájlban el kell helyezni, ahol ez előfordul:

• Kezdőlap - index.php;
• Kategória és archív oldalak - kategória.php és archívum.php;
• Keresőoldal - search.php.

Mellesleg, egyes sablonokban a kategóriák és archívumok oldalainak kimenete egyetlen fájlban is végrehajtható. Az én archívum.php fájlom felelős ezért.

Ha a sablonodban nincs navigáció a közlemények oldalakra bontásához, akkor a második kódot a tartalom megjelenítése után helyezzük el. Ha vannak korábbi és következő linkjei, ami valószínűbb, akkor ez a lehetőség könnyebben megvalósítható, mivel csak le kell cserélnie őket a fent megadott kóddal.

Általános szabály, hogy normál navigáció az előző és a következő formájában. a linkek hasonló kóddal jelennek meg.

< div class = "nav-previous" > ← Régebbi bejegyzések", "huszontíz" ) ; ?>< / div > < div class = "nav-next" > "Új bejegyzések →" , "huszontíz" ) ; ?>< / div >

Ez a kód mindenkinél eltérő lehet, de a fő tartalma ugyanaz lesz. Meg kell találnia egy kódot, amely tartalmazza a next_posts_link és previous_posts_link nevű kódot.

Ha megtalálta, nyugodtan törölje ezt a tartalmat a fájlból, és másolja a helyére az oldalnavigációt megjelenítő szükséges kódot.

Így a szabványos navigációt oldalankénti navigációra kell cserélnie minden olyan fájlban, ahol közlemények jelennek meg. A fenti fájlneveket megadtam.

Mellesleg, ha problémái vannak ezzel a folyamattal, forduljon hozzám segítségért a megjegyzésekben. próbálok segíteni.

/* NAVIGÁCIÓ */ .navigation ( lebegés: balra; szélesség: automatikus; margó balra: 216 képpont; margó felső: -2 képpont; betűméret: 16 képpont; ) .navigation > a ( lebegés: balra; szélesség: 32 képpont; betűtípus -súly: 700 szöveg-dekoráció: nincs szélesség: 29px; balra; magasság: 34px; háttér: url ("images/bow_left.png") no-repeat: 0 images/bow_right.png") no-repeat; margó balra: 14 képpont; .navigation > .dots ( lebegés: balra; betűméret: 14 képpont; betűsúly: 700; szélesség: 32 képpont; szövegigazítás: középen; szín : #c4c8cc padding- felső: 7px)

/* NAVIGÁCIÓ */ Navigáció ( balra lebeg; szélesség: auto; margó-bal : 216px ; margin-top : -2px ; betűméret: 16 képpont; Navigáció > a ( balra lebeg; szélesség: 32px; betűsúly: 700; szöveg igazítása: középre; szín : #637b93 ; szöveg-dekoráció: nincs; margó-bal : 1px ; padding-top: 7px; Navigáció > .current ( balra lebeg; betűsúly: 700; szélesség: 29 képpont; szöveg igazítása: középre; szín: #c4c8cc ; margó-bal : 5px ; padding-top: 7px; Navigáció > .prev ( balra lebeg; szélesség: 32px; magasság: 34 képpont; background : url ( "images/bow_left.png" ) no-repeat ; margó-bal : 0 ; Navigáció > .next ( balra lebeg; szélesség: 34 képpont; magasság: 34 képpont; background : url ( "images/bow_right.png" ) no-repeat ; margó-bal : 14px ; Navigáció > .dots ( balra lebeg; betűméret: 14 képpont; betűsúly: 700; szélesség: 32px; szöveg igazítása: középre; szín: #c4c8cc ; padding-top: 7px;

Fel kell töltenie az előre és hátra mozgási nyilak képeit is a tárhelyre a tervezősablon képek mappájában. . A letöltéshez használhatja a tárhelyszolgáltató szabványos fájlkezelőjét. Én vagyok.

Ha elhelyeztük a kódokat a functions.php fájlokban, minden olyan fájlban, amelyik hirdetményes oldalakat jelenít meg és írott stílusa van, ellenőrizhetjük a navigáció működőképességét. Nekem minden működik, és a szabványos sablonban így néz ki.

Megbeszéltük a módszert plugin nélkül. 100%-ig biztos vagyok abban, hogy ha mindent a fent leírtak szerint csináltál, akkor mindennek nagy lendülettel kell működnie. Volt egy második lehetőség is plugin nélkül, de miután megnéztem, rájöttem, hogy ez lényegében ugyanaz, csak kicsit módosítva. Ezért továbblépek az oldalnavigáció beépülő modul segítségével történő megvalósítására.

WP-PageNavi bővítmény

Először töltse le a bővítményt a hivatalos oldalról, és telepítse a webhelyre.

A bővítmény telepítése után el kell helyezni azt a kódot is, amely a navigációt megjeleníti az oldal alján.

Most a beépülő modul elvégzi a feladatát, és az oldalszámok a következő kialakításúak lesznek.

Egyrészt nem annyira dögös a dizájn, másrészt viszont egyáltalán nem rossz, hiszen nem bántja a szemet. A felhasználók szeretik az egyszerűséget! Ezért mindent úgy hagyhat, ahogy van. Ha valami színesebbre vágyik, akkor most megnézünk néhány lehetőséget. Addig is megbeszéljük a wp pagenavi beállítását. Vannak beállítások, és érdemes róluk beszélni.

Az első „Oldallista sablonok” beállítási elemét illetően semmit sem kell módosítani. elégedettek vagyunk. Továbblépünk az "Oldallista beállításai" elemre.

Megjegyzem, ezen a ponton minden paraméterrel kísérleteznie kell, hogy megtalálja magának az optimális értéket. Csak röviden elmagyarázom, mit csinálnak az egyes paraméterek.

• Stílus használata - ha az értéket "Nem"-re állítjuk, akkor a beépülő modulok stílusai el lesznek távolítva, és az oldalszámok nem lesznek formázva;

• Oldallista stílusa - a megszokott oldalszámlistán kívül választhatunk egy legördülő lista opciót;

• Mindig jelenítse meg az oldalak listáját – ezt a beállítást nem engedélyezzük. Azt szeretné, hogy a lista csak ott jelenjen meg, ahol szükséges;
• Megjelenítendő oldalak száma – felelős a lista elején megjelenő oldalszámok számáért. Alapértelmezés szerint az érték 5, és a fenti képernyőképeken pontosan 5 oldal jelenik meg;
• Megjelenítendő oldalak köre – ha webhelye sok oldalt tartalmaz, akkor ez a funkció rendkívül hasznos lesz. A fő lista után oldalszámokat ad ki 10, 20, 30, 40 és így tovább. Az ezen értékek közötti intervallumot a következő paraméter határozza meg:
• Oldaltartományok együtthatója - ha az értéket 5-re állítja, akkor az oldaltartomány így fog kinézni - 10, 15, 20, 25 stb. Ha 10, akkor 10, 20, 30, 40 és így tovább. A 10-es érték bőven elég.

Ezek mind azok a beállítások, amelyeket az igényeinek megfelelően módosítania kell. Itt mindenki maga szabályozza.

A legegyszerűbb lehetőség egy további bővítmény telepítése, amely előre elkészített stílusokkal rendelkezik, és lehetővé teszi az egyes paraméterek egyedi konfigurálását. Úgy hívják, hogy plugin.

A telepítés után egy új elem jelenik meg a WordPress adminisztrációs paneljén.

Átállás után azonnal kiválaszthatjuk a meglévő tervezési blankokat.

Ha a stílusokat egyedileg szeretnénk testre szabni, akkor a „Stíluslap kiválasztása” beállítások első pontjában válassza az „Egyéni” opciót, és állítsa be az összes elem paramétereit (szegélyek és színeik, betűszínek és -méretek, hivatkozások színe, amikor az egérkurzor lebegtetése és így tovább).

Lefordítom neked az összes paramétert.

• Címsor színe - szöveg színe "3/45. oldal";
• Háttérszín - háttérszín;
• Aktív/Aktív háttérszín – az aktív oldalszám háttérszíne;
• Betűméret - betűméret;
• Link színe - link színe;
• Link Mouse Hover/Active Hover – a hivatkozás színe, amikor az egeret egy szám fölé viszi, és amikor a szám aktív;
• Link Border Color - szegély színe;
• Link Border Mouse Hover/Active Color – szegélyszín, amikor az egérkurzort lebegteti, és ha a szám aktív;
• Navigáció igazítása – navigációs hely (balra, jobbra, középre).

A kívánt kitöltési szín kiválasztásakor kereshet színértékeket az interneten vagy a Photoshopban.

A plugin opció nem rossz, de mindig azt mondom, hogy meg kell szabadulni a felesleges pluginoktól, és ebben az esetben az.

A második lehetőség a stílusfájl szerkesztésével történik, amely a tárhely Wp-pagenavi beépülő moduljával rendelkező mappában található - pagenavi-css.css.

Ez a fájl akkor szerepel, ha a „Paginavi-css.css stílus használata” beállítás aktív a beépülő modul beállításaiban. Ezért, ha szerkesztjük, akkor a bővítmény frissítése után minden stílus lecserélődik szabványosra. Annak érdekében, hogy ne cserélje ki ezt a fájlt minden alkalommal, és ne írja át a stílusokat, a következőket javaslom:

1. Szerkessze saját stílusára a fájl stílusait, megadva a kívánt dizájnt az oldalnavigációnak;
2. Tiltsa le a "Paginavi-css.css stílus használata" beállítást;
3. Helyezze el ezeket a stílusokat a stílus.css tervezősablon fő stílusfájljában.

Így ezek a stílusok a beépülő modultól függetlenül működni fognak. És a frissítés során nem fognak tévútra menni. Talán ez a legjobb tervezési lehetőség a navigációhoz ebben a bővítményben, amelyet magam csinálnék. De szerencsére plugin nélkül használom a lehetőséget, ezt tanácsolom.

Szóval barátok. Az anyag nagyon jó lesz, mint nekem. Mit gondolsz erről? Remélem elkészültél. Ha valami nem sikerül, megpróbálok segíteni a megjegyzésekben. Írj, ne félj! Egyszer én is sokat szenvedtem és sikerült rájönnöm.

Ezzel a megjegyzéssel szeretném gyorsan befejezni ezt a bejegyzést, mivel sok energiát igényelt. Ezt fogom tenni. Elköszönök, pihenek, aztán elfoglalom az új tartalmak írását.

Üdvözlettel: Konstantin Khmelev!

Ahhoz, hogy egy WordPress oldalhoz oldalnavigációt adjunk, vagy inkább a normál navigációt rendes oldalnavigációs gombokra cseréljük, a WP-pagenavi bővítményt és 5 másik, a 4.9.5-ön tesztelt bővítményt használjuk.

A szerzőtől

Az oldalnavigáció bármely rendszer oldalához történő hozzáadásának vannak előnyei (kényelem a látogató számára) és hátrányai is (az oldalak ismétlődő címsorokkal jelennek meg a címcímkékben). Ahhoz, hogy oldalnavigációt adjunk egy WordPress webhelyhez, vagy inkább a normál navigációt (előző oldal - következő oldal) rendes oldalnavigációs gombokra cseréljük, a WP-pagenavi bővítményt használjuk.

Szabványos WordPress oldalnavigáció

Először is megjegyzem, hogy a webhelynavigáció megjelenítéséért felelős WP-funkciók meghívását a munkasablonfájlok tartalmazzák. Ezért ha a szabványostól eltérő működő témát telepített, akkor könnyen előfordulhat, hogy a téma szerzője már beépítette az oldalnavigációt a témafájlokba, és ez már megvan. Ha nem, akkor a szabványos webhelynavigáció olyan feliratokat tartalmaz, mint: „Előző oldal” és „Következő oldal” az oldal alján.

Funkciók, amelyek szabványos navigációt adnak ki: next_posts_link és previous_posts_link . Emlékezzünk rájuk, hasznunkra lesznek.

A WP-pagenavi beépülő modul segít oldalnavigációt hozzáadni WordPress webhelyéhez.

A blogon a navigáció megváltoztatásához és a szelektív lapozáshoz gombok hozzáadásához a WP-pagenavi bővítményt használjuk. Plugin oldal: https://wordpress.org/plugins/wp-pagenavi/installation/

Három szabványos módszer létezik:

1. From, a név szerinti keresés használatával;
2. Töltse le a bővítményt a WordPress.org oldaláról (link a cikk alján);
3. Vagy töltse le a bővítményt a WordPress.org oldaláról, csomagolja ki az archívumot, töltse fel a wp-pagenavi beépülő modul könyvtárát a /wp-content/plugins/ mappába, majd aktiválja a bővítményt a blogkonzolról.

A WP-pagenavi bővítmény futtatása

De a beépülő modul aktiválása nem elegendő a működő témakóddal.

Jegyzet: Amikor elkezdi módosítani a munkatéma fájljait, készítsen biztonsági másolatot a webhelyről és annak adatbázisáról. Ha valami elromlik, visszaállíthatja a biztonsági másolatot.

A wp-pagenavi aktiválásának feladata a következő. Meg kell találnia a next_posts_link és previous_posts_link függvényeket a munkatéma-fájlokban, és a sorokat a következőre kell cserélnie:

Hol és hogyan kell keresni a next_posts_link és previous_posts_link függvényeket

Általában a next_posts_link és previous_posts_link függvények megtalálhatók a témafájlokban: index, archívum, functions. Ezt megteheti a Szerkesztőben a blogkonzolból.

Lapozási navigáció hozzáadása WordPress webhelyéhez

Ha a konzolról történő keresés nem hoz gyors eredményeket, és egyszerűen nem látja ezeket a funkciókat, tegye a következőket:

• FTP kapcsolaton keresztül a munkatéma fájlokat a számítógépünkre másoljuk.
• Nyissa meg az összes letöltött fájlt egy szövegszerkesztőben, például a Notepad++-ban.
• Ezután használjuk a szerkesztő „Keresés az összes fájlban” keresését, és keressük a függvényeink nevét: next_posts_link és previous_posts_link .

• Miután megtalálta őket, cserélje ki őket:

Csere után töltse vissza a szerkesztett fájlt a webhely könyvtárába, és ellenőrizze az oldalnavigációs gombok megjelenését az oldalon.

A WP-pagenavi gombok megjelenésének megváltoztatása

• Alapértelmezés szerint az oldalszámmal ellátott palagin gombok fehér/szürke színűek. A keretek négyzet alakúak. Módosíthatja a gombok megjelenését a következő fájlban: pagenavi-css.css. Ez a fájl a következő könyvtárban található: wp-content/plugins/wp-pagenavi.

A szerkesztéshez töltse le a fájlt a számítógépére, és szerkessze egy szövegszerkesztőben. Ugyanakkor az eredeti forrásfájlt tartsa érintetlenül biztonsági másolatként.

További oldalnavigációs bővítmények

• Lapozás: BestWebSoft. https://ru.wordpress.org/plugins/pagination/
• Egyszerű oldalnavi. https://ru.wordpress.org/plugins/simplistic-page-navi/
• Alfabetikus lapozás. https://ru.wordpress.org/plugins/alphabetic-pagination/
• SX Nincs oldalszámozás. https://ru.wordpress.org/plugins/sx-no-homepage-pagination/
• WP-oldalszámozás. https://ru.wordpress.org/plugins/wp-paginate/

Ebben a cikkben megvizsgáljuk hogyan készítsünk oldalnavigációt (lapozást) egy WordPress webhelyen a WP-PageNavi és a WP Page Numbers beépülő modulok segítségével.

Nem minden webhely rendelkezik oldalszámozással, és hogy pontos legyek, nem minden WordPress-téma rendelkezik beépített oldalszámozással. Egy egyszerű plugin segítségével azonban könnyen megszervezhető.

Oldalnavigációs bővítmény WP-PageNavi

Töltse le a WP-PageNavi-t. A bővítmény a WordPress bővítményeinek hivatalos könyvtárában található, és letölthető a konzolról.

Az aktiválás után azonnal láthatja a beépülő modul működését:

A megjelenés nagymértékben függ a WordPress sablon kialakításától, ezért ne ijedjen meg a fenti képernyőképen látható lapozási bővítmény aszketikus megjelenése.

Az oldalnavigációs bővítmény számos beállítást tartalmaz, amelyek a részben találhatók "Beállítások" - "Oldalok listája".

Az általános oldallista sablon lehetővé teszi a kezdeti tervezést:

Ennek eredményeként a következőket kapjuk:

A dizájnelemekről általában nem írok, senki nem változtat rajtuk.

Beállíthatja, hogy a lapozási navigáció legördülő listaként jelenjen meg:

A kilátás természetesen nem teljesen vonzó, de minden nagyon kompakt.

Azt is beállíthatja, hogy hány oldal jelenjen meg az oldalnavigációs panelen.

A megjelenítendő oldalak tartománya és az oldaltartományok együtthatója leegyszerűsíti a navigációt olyan esetekben, amikor sok oldal van a webhelyen vagy a blogon.

WP oldalszámok lapozási bővítmény

Plugin letöltése. Mi telepítjük.

Ez a bővítmény kicsit jobban tetszett, mint az előző, mivel számos tagadhatatlan előnye van.

Az egyiket azok is értékelni fogják, akik nem értenek a CSS-hez. Ugyanis a plugin támogatja 5 WordPress oldalnavigációs sáv tervezési stílusa. Így a webhely tulajdonosa kiválaszthatja a szükséges stílustervet, amely illeszkedik a webhely általános tónusaihoz.

Menjünk-hoz Beállítások – Oldalszámok.

Az optimális kialakítás kiválasztása:

Lefordítjuk a fő elemeket:

Beállítjuk, hogy mely oldalnavigációs elemek legyenek elrejtve, és melyek jelenjenek meg a webhelyen:

Az utolsó lépés a beépülő modul kimeneti kódjának hozzáadása.

Hogyan kell csinálni? Először is meg kell találnia a kódot, amely felelős a szabványos navigáció megjelenítéséért:

Ez a kód szükségszerűen 2 WordPress funkciót tartalmaz: előző_bejegyzés() és következő_bejegyzés().

A navigációs sáv a főoldalon, kategóriákban, címkékben, archívumokban jelenik meg, ezért ezt a kódot kell keresnie a megfelelő fájlokban:

wp-content\themes\your_theme\index.php

wp-content\themes\your_theme\category.php

wp-content\themes\your_theme\tag.php

wp-content\themes\your_theme\archives.php

A talált kódot le kell cserélni a plugin beállításaiban megadott kódra:

Mi a teendő, ha nincs ilyen kód? Egyes WordPress-témákban ezek a funkciók külön fájlba helyezhetők. Megtalálásukhoz olyan szövegszerkesztőt kell használni, amely támogatja a fájlkeresést, például: Notepad++, vagy Dreamweaver, ez is jól megbirkózik ezzel a funkcióval.

A következő keresési feltételeket kell beállítani:

A következő kódot találtam:

Amit le kell cserélni.