4 761
Sa artikulong ito, ipapakita ko sa iyo kung paano lumikha ng isang menu ng nabigasyon ng WordPress. Gamit ang isang simpleng drag & drop tool gagawa ka ng magandang drop-down na menu sa iyong website.
Bakit kailangan mo ng menu? Binibigyang-daan ka nitong ipakita ang istruktura ng iyong site sa mga user - tinutulungan silang mag-browse ng mga seksyon at mabilis na mahanap ang impormasyong kailangan nila.
Ang menu ay matatagpuan sa itaas/ibaba at kanan/kaliwa sa pahina ng website.
Halos lahat ng mga tema ng WordPress ay naglalaman ng kahit isang uri ng layout ng menu.
Maaari kang magdagdag ng menu mula sa WordPress admin panel - Hitsura - Mga Menu.
Ang isang bagong window na "Lumikha ng Menu" ay lilitaw sa screen, na binubuo ng dalawang lugar. Ang kaliwang bahagi ay naglalaman ng iyong mga pahina, custom na link at kategorya. At sa kanan ay mga nako-customize na item sa menu.
Gawin natin ang iyong unang menu.
Magbigay ng pangalan para sa iyong menu, hal. "Aking Unang Menu" at pagkatapos ay i-click ang pindutang "Lumikha ng Menu".
Lalabas sa harap mo ang mga setting ng menu:
Tulad ng nakikita mo, ang tema ng website ng Azbuka WordPress ay nag-aalok ng 3 mga pagpipilian sa layout ng menu: pangunahin, pangalawa, footer.
Ang mga pangalan at lokasyon ng menu ay nakadepende sa napiling tema at maaaring mag-iba.
Pagkatapos ay piliin ang mga pahinang gusto mong idagdag - suriin ang mga pahinang nakalista sa kaliwang pane at i-click ang Idagdag sa Menu.
Pagkatapos ay piliin ang lokasyon ng iyong menu at i-save.
Maaari mong subukan ang iba't ibang mga layout upang makita kung paano ito mukhang tapos na.
Mapapansin mo na ang bawat idinagdag na item sa menu ay nasa pagkakasunud-sunod kung saan mo ito idinagdag. Halimbawa, ang pahinang Tungkol sa Akin ay lilitaw sa dulo at ang pahina ng Mga Produkto ay lilitaw sa simula.
Huwag mag-alala, maaari mong i-drag at i-drop ang mga item sa menu gamit ang iyong mouse at ayusin ang mga ito sa pagkakasunud-sunod na gusto mo.
Sa ganitong paraan maaari kang lumikha ng kinakailangang bilang ng mga menu para sa iba't ibang lugar ng site.
Ang dropdown na menu ay isang navigation menu. Sa mga elemento ng magulang at anak.
Kapag ini-hover ng user ang mouse sa elemento ng parent na menu, lahat ng iba pang elemento ng bata ay maayos na lilitaw nang sunud-sunod sa ilalim ng magulang.
Gamit ang dropdown na menumaaari kang lumikha ng maayos na structured navigation system.
Ngayon, magdagdag tayo ng submenu item para sa iyong bagong menu.
SA istraktura, i-drag ang elemento sa ibaba lamang ng pangunahing elemento nito, pagkatapos ay i-drag nang bahagya ang elemento pakanan. Mapapansin mo na awtomatiko itong magiging isang submenu item.
Sa ganitong paraan maaari kang lumikha ng ilang antas ng mga submenu. Ngunit, sa kasamaang-palad, hindi lahat ng mga tema ay sumusuporta sa paglikha ng naturang mga multi-level na menu - karamihan ay nagbibigay-daan sa iyo na lumikha lamang ng 2 mga antas.
Ginagamit ang mga kategorya upang lumikha ng drop-down na menu sa isang blog. At idinagdag ang mga ito ayon sa parehong prinsipyo ng mga pahina. Palawakin ang tab na "Mga Kategorya", piliin ang mga kailangan mo at idagdag ang mga ito sa menu.
Mapapansin mo na ang mga kategorya ay lilitaw bilang mga item sa menu. Tulad ng sa mga pahina, maaari mong i-drag at i-drop ang mga kategorya gamit ang iyong mouse upang ayusin ang mga ito sa pagkakasunud-sunod na gusto mo.
Sa halimbawa sa ibaba, tiniyak ko na ang lahat ng mga kategorya ay naging mga elemento ng bata ng pahina ng blog.
Kapag nagdagdag ka ng mga pahina o isang kategorya, awtomatikong ginagamit ng WordPress ang pamagat ng pahina o pangalan ng kategorya bilang teksto ng link.
Hindi ito nangangahulugan na hindi mo na ito mababago.
Palawakin ang elemento at i-edit ito kung kinakailangan.
Dito maaari mong baguhin ang pamagat, teksto ng link at magdagdag ng katangian ng pamagat sa link. I-save ang menu para hindi mawala ang lahat ng iyong pagbabago.
Palawakin din ang item sa menu at sa ibaba makikita mo ang pulang teksto na "Tanggalin".
Ang bawat tema ay nag-aalok ng sarili nitong mga uri ng layout ng navigation menu.
Sa tema ng site na ito, na ipinakita ko sa mga halimbawa, mayroong 3 uri ng layout ng menu. Maaaring marami o mas kaunti ang mga ito sa iyong paksa. At sila, siyempre, ay maaaring tawaging iba.
Bilang karagdagan sa mga karaniwang lugar, maaari kang magdagdag ng menu sa sidebar at iba pang mga lugar na may mga widget.
Sa admin panel, piliin ang "Hitsura" - "Mga Widget" at idagdag ang widget na "Custom Menu" sa sidebar.
Pagkatapos ay kailangan mong pamagat ang widget at pumili ng isa sa iyong mga customized na menu mula sa listahan. I-click ang save button.
Pumunta ngayon sa site at tingnan kung paano ipinapakita ang menu sa sidebar.
Pagdating sa mga social button sa mga menu, nag-aalok ang ilang tema ng mga built-in na social media button.
Kung wala ang mga ito sa iyong tema, maaari kang mag-install ng plugin tulad ng Menu Social Icons upang ikaw mismo ang magdagdag ng mga button.
Maaaring interesado ka sa:
Kung mayroon kang mga katanungan, sumulat sa mga komento.
At sundan mo kami
Ang pag-navigate sa mga tema ng WordPress ay kadalasang ipinapatupad sa karaniwang paraan - isang link sa mga nakaraang post at isang link sa mga susunod na post. Sapat na ito sa karamihan ng mga kaso, ngunit kung minsan ay kinakailangan na gawin ang page-by-page navigation sa WordPress, na kung saan ang libreng WP-PageNavi plugin ay makakatulong sa amin.
Ang WP-PageNavi ay isa sa pinakasikat at simpleng plugin para sa pagpapatupad ng page navigation o “pagination” sa WordPress. Ito ay magagamit sa direktoryo ng mga plugin sa WordPress.org at maaaring i-install mula sa WordPress admin panel sa ilalim ng Mga Plugin → Magdagdag ng Bago.
Pagkatapos i-install at i-activate ang plugin, dapat kang gumawa ng ilang pagbabago sa iyong aktibong tema ng WordPress. Ito ay matatagpuan sa direktoryo ng wp-content/themes. Hanapin sa direktoryong ito ang folder na may pangalan ng iyong aktibong tema.
Kapansin-pansin na ang ilang mga tema ay mayroon nang built-in na suporta para sa WP-PageNavi plugin, at pagkatapos ng pag-activate ay agad itong magpapakita ng page-by-page navigation sa halip na ang karaniwang isa, ngunit ang mga naturang tema ay napakabihirang. Sa karamihan ng mga kaso, kakailanganin mong gumawa ng mga manu-manong pagbabago upang suportahan ang pagination.
Dapat kang tumingin sa iyong mga theme file para sa mga tawag sa next_posts_link at previous_posts_link function. Maaaring nasa ilang lugar ang mga ito, ngunit kadalasan sa mga file na index.php, archive.php at functions.php.
Ang mga function na ito ay nagpapakita ng karaniwang nabigasyon, at upang ipakita ang page navigation gamit ang WP-PageNavi, dapat silang palitan sa pamamagitan ng pagtawag sa isang bagong function na wp_pagenavi.
Halimbawa, tingnan natin ang karaniwang tema ng Twenty Twelve. Sa iyong functions.php file, hanapin ang sumusunod na code:
At sa halip na tawagan ang next_posts_link at previous_posts_link function, tawagan ang wp_pagenavi function:
Bigyang-pansin ang ikatlong linya. Dito rin kami nagdagdag ng tawag sa function_exists bago tumawag sa wp_pagenavi . Makakatulong ito na maiwasan ang mga error na maipakita kung ang WP-PageNavi plugin ay na-deactivate o nawawala.
Pagkatapos i-save ang file, pumunta sa anumang page na may iyong mga post at makikita mo ang page-by-page navigation sa ActionView:
Kung hindi mo mahanap ang next_posts_link at previous_posts_link function para palitan ang mga ito sa iyong tema, mag-iwan ng komento na nagsasaad ng pangalan ng iyong tema at tiyak na tutulungan ka namin.
Para sa mas advanced na mga gumagamit ng WordPress, nararapat na tandaan na ang pagpapalit ng mga function at bahagi ng isang tema ay pinakamahusay na gawin gamit ang isang tema ng bata, gamit ang orihinal na tema bilang magulang. Makakatulong ito na mapanatili ang pagination at iba pang mga pagbabago, kahit na ina-update ang tema.
Sa seksyong Mga Opsyon → PageNavi, maaari mong baguhin ang isang bilang ng mga setting para sa iyong page navigation, kabilang ang: maximum na bilang ng mga pahina, ipinapakita bilang isang drop-down na listahan, gumamit ng mga inline na istilo, atbp.
Sa mga setting, maaari mo ring baguhin ang text na lumalabas sa mga link, na nagpapadali sa pagsasalin ng mga link na ipinapakita sa nabigasyon.
Kung nabasa mo na ang artikulo sa kung paano ipatupad ang pagination navigation nang walang mga plugin sa WordPress, kami ay labis Hindi namin inirerekomenda ang pamamaraang ito, at hindi lang ito nalalapat sa page navigation. Karamihan sa mga artikulo at tutorial na "walang plugin" ay kinokopya lang ang code mula sa isang plugin at i-paste ito sa iba't ibang bahagi ng iyong tema.
Ang “plugin-free” na diskarte sa pagpapalawak ng WordPress ay walang hindi mga pakinabang, ngunit may malaking bilang ng mga kawalan:
Ang mga plugin ay partikular na nilikha upang palawakin ang pag-andar ng WordPress, kaya huwag mag-atubiling gamitin ang mga ito.
Kung sa ilang kadahilanan ang WP-PageNavi plugin ay hindi angkop para sa iyo, bilang isang alternatibo, ipinapayo namin sa iyo na isaalang-alang ang WP-Paginate at WP Page Numbers na mga plugin, na nagpapatupad ng katulad na pagpapagana.
Kung mayroon kang anumang mga katanungan tungkol sa pag-navigate ng pahina sa WordPress o ang mga plugin na nabanggit sa itaas, maaari mong tanungin kami gamit ang form ng komento o sumulat sa amin sa
(3)
Ang WordPress ay isang napakaraming platform sa pag-blog, at sa tulong ng mga plugin maaari itong gawing mas madaling gamitin.
Nalalapat din ito sa page navigation (pagination) ng mga page, na sa una ay wala sa WordPress. Ngunit madali itong maayos sa pamamagitan ng pagpili ng isa sa 10 pinakamahusay na plugin para sa iyong site.
Isa sa pinakasikat at madalas na ginagamit na mga plugin. Gamit ang built-in na function wp_pagenavi() karaniwang mga link ← Bumalik | Susunod → ay magbabago sa kaakit-akit na pagination.
Isa pang kapaki-pakinabang na plugin na may isang napaka-maginhawang function. Maaari kang pumunta sa nais na pahina sa pamamagitan ng paglalagay ng numero nito sa karagdagang window.
Isa sa mga pinakamahusay at pinakasimpleng plugin na magagamit mo upang magdagdag ng karagdagang pagination para sa mga post at komento, na ginagawang mas madali ang pag-navigate sa iyong WordPress site.
Gamit ang plugin na ito, maaari mong i-filter ang mga post at pahina ayon sa alpabeto. Ito ay hindi lamang madaling i-install, ngunit din gamitin.
Ito ay isa sa mga pinakamahusay na plugin para sa paglikha ng pagination para sa mga pahina ng gallery, komento, atbp. Sa tulong nito, nagiging gallery ang mga gallery na may pagination.
Pinapayagan ka ng plugin na ito na lumikha ng pagination ng pahina ayon sa iyong mga kinakailangan. Maaari mong dagdagan ang pagnunumero sa isang pahina, piliin ang bilang ng mga yunit na ipapakita. Bilang default, maaaring mayroong 10.
Isa sa mga pinakamahusay na plugin na lumilikha ng nabigasyon sa pagitan ng susunod at nakaraang post sa anyo ng isang pop-up box sa kaliwa o kanang bahagi ng window. Kapag nag-scroll ang user sa page, may lalabas na pop-up box kung saan maaari mong piliin ang susunod o nakaraang entry.
Pinapayagan ka ng plugin na pumili sa pagitan ng 3 uri ng pagination kung itatakda mo ang nais na parameter. Ito ay isa sa mga pinakakaakit-akit na plugin ng pagination.
Isang mahusay na plugin na nag-aalok ng 11 iba't ibang mga pagpipilian sa pagination.
Isang mahusay na koleksyon ng mga istilo ng CSS para sa mga sikat na plugin ng WordPress - WP-PageNavi at WP-Paginate. May kasamang mga HTML na pahina na may mga pagpapakita ng istilo, at ang bawat istilo ay naglalaman ng isang hiwalay na CSS file.
Kamusta kayong lahat!
Patuloy akong nagsusulat ng mga artikulo sa pag-navigate sa website sa WordPress engine.
At sa materyal na ito ipapakita ko kung paano ginagawa ang page navigation nang walang mga plugin at gamit ang kilalang WP-PageNavi. Tulad ng sa , ipapakita ko ang pagpapatupad sa maraming paraan upang mapili mo ang isa na pinakamahusay na gagana para sa iyo. At may mga kaso kapag ang ilang paraan ay hindi gumagana para sa isang tao. Samakatuwid, magkakaroon ng ilang uri ng safety net.
Ang materyal ay napaka-voluminous at, marahil, ang pinaka-komprehensibo sa network.
Ang page navigation (pagination) ay ang paghahati ng impormasyon sa mga pahina. Kung kukuha ka ng maraming mga site sa Wordpres, kung gayon ang hindi pangkaraniwang bagay na ito ay malinaw na ipinahayag sa video ng listahan ng mga numero ng pahina sa ibaba ng bawat pahina na may mga anunsyo. Sa aking blog ang function na ito ay ganito ang hitsura:
Maaaring mag-iba ang disenyo. Ngunit ang kakanyahan nito ay pareho - pagsira ng impormasyon sa mga pahina. Tulad ng alam mo, bilang default, ang mga anunsyo ng mga post ay ipinapakita sa pangunahing pahina ng site, kung saan maaaring mayroong isang tiyak na numero (depende sa mga setting sa item na "Pagsusulat").
Kung hindi natin himayin ang kanilang numero, sila ay ipapakita sa isang pahina. At ito ay hindi maganda, dahil hindi ito maginhawang gamitin ang site at ang pangunahing pahina ay magtatagal upang mai-load, dahil sa paglipas ng panahon magkakaroon ng malaking bilang ng mga anunsyo.
Bilang isang patakaran, ngayon sa modernong mga template ng Wodpress, ang pag-navigate sa pahina ay naka-built-in na. Ngunit mayroong isang pagpipilian kapag ito ay wala doon. Pagkatapos ay kailangan mong ipatupad ito. Sa halip, maaaring mayroong pagination ng mga anunsyo sa anyo ng mga link sa mga nakaraan at susunod na post. Ito ay malinaw na ipinahayag sa karaniwang mga template.
Hindi rin maginhawa ang opsyong ito, dahil kung babalik tayo sa 3 pahina, hindi na tayo makakabalik sa orihinal na pahina sa isang hakbang. Kakailanganin mong mag-click ng 3 beses sa mga nakaraang entry o sa susunod na mga entry. Binibigyang-daan ka ng page navigation na pamahalaan ang sandaling ito nang mas flexible.
Sa pangkalahatan, magpatuloy tayo sa pagpapatupad nito at ang unang hakbang ay isama ito sa isang template na walang plugin. Tinalakay ko ang paraang ito sa isang video tutorial. Inirerekomenda kong panoorin muna ito, at pagkatapos ay pag-aralan ang tekstong bersyon ng mga tagubilin.
Ngayon ay ipapakita ko sa iyo ang isang paraan kung saan magkakaroon ka ng eksaktong kaparehong pag-navigate sa pahina ng WordPress gaya ng ginagawa ko. Ang lahat ay ginagawa nang napakasimple. Kakailanganin mo ng 2 bahagi ng code, na kakailanganing ilagay sa mga file ng template, at pagkatapos ay dapat idagdag ang mga estilo upang maitakda ang disenyo. Magsimula na tayo!
Narito ang unang bahagi ng code. Dapat itong ilagay sa functions.php file ng template ng disenyo.
function na wp_corenavi() ( global $wp_query, $wp_rewrite; $pages = ""; $max = $wp_query->max_num_pages; kung (!$current = get_query_var("paged")) $current = 1; $a["base "] = str_replace(999999999, "%#%", get_pagenum_link(999999999)); $a["total"] = $max; $a["current"] = $current; $total = 0; //1 - ipakita ang tekstong "Pahina N ng N", 0 - huwag ipakita ang $a["mid_size"] = 1; //ilang link ang ipapakita sa kaliwa at kanan ng kasalukuyang $a["end_size"] = 1 ; //ilang link ang ipapakita sa simula at sa dulo $a["prev_text"] = ""; //link text "Nakaraang page" $a["next_text"] = ""; //link text " Susunod na pahina" kung ($max > 1) echo " "; }
function na wp_corenavi() ( global $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 [ "kabuuan" ] = $max ; $a [ "kasalukuyan" ] = $kasalukuyan ; $kabuuan = 0 ; //1 - ipakita ang tekstong "Pahina N ng N", 0 - huwag ipakita $a [ "mid_size" ] = 1 ; //ilang link ang ipapakita sa kaliwa at kanan ng kasalukuyang link $a [ "end_size" ] = 1 ; //kung gaano karaming mga link ang ipapakita sa simula at sa dulo $a [ "prev_text" ] = "" ; //link text "Nakaraang pahina" $a [ "next_text" ] = "" ; //link ng text na "Next page" kung ($max > 1) echo " kung ($kabuuan == 1 && $max > 1 ) $pages = "pahina ". $kasalukuyan. "mula sa " . $max. "". "\r\n" ; echo $pages . paginate_links($a); kung ($max > 1) echo "" ; |
Inilagay ko ang code sa pinakadulo simula ng file pagkatapos ng pambungad na tag
Sa code na ito maaari naming ayusin ang ilang mga parameter:
wp_corenavi(); |
Dahil dapat ipakita ang page navigation saanman ipinapakita ang listahan ng mga anunsyo, dapat ilagay ang code na ito sa lahat ng file kung saan ito nangyayari:
Sa pamamagitan ng paraan, sa ilang mga template, ang output ng mga pahina ng mga kategorya at mga archive ay maaaring isagawa sa isang file. Ang aking archive.php file ay responsable para dito.
Kung ang iyong template ay walang anumang nabigasyon para sa paghahati ng mga anunsyo sa mga pahina, pagkatapos ay ilalagay namin ang pangalawang code pagkatapos ipakita ang nilalaman. Kung mayroon kang nakaraan at susunod na mga link, na mas malamang, kung gayon ang pagpipiliang ito ay mas madaling ipatupad, dahil kailangan mo lang palitan ang mga ito ng code na ibinigay sa itaas.
Bilang isang patakaran, karaniwang nabigasyon sa anyo ng nakaraan at susunod. ang mga link ay ipinapakita gamit ang katulad na code.
< div class = "nav-previous" > ← Mga lumang post", "dalawampu't sampu" )); ?>< / div > < div class = "nav-next" > "Mga bagong post " , "dalawampu't sampu" )); ?>< / div > |
Maaaring iba ang code na ito para sa lahat, ngunit ang mga pangunahing nilalaman nito ay magiging pareho. Kakailanganin mong maghanap ng code na maglalaman ng code na tinatawag na next_posts_link at previous_posts_link.
Kapag nahanap mo ito, huwag mag-atubiling tanggalin ang nilalamang ito mula sa file at sa lugar nito kopyahin ang kinakailangang code na nagpapakita ng pag-navigate sa pahina.
Kaya, kailangan mong palitan ang karaniwang nabigasyon ng page-by-page navigation sa lahat ng file kung saan ipinapakita ang mga anunsyo. Ibinigay ko ang mga pangalan ng file sa itaas.
Sa pamamagitan ng paraan, kung mayroon kang mga problema sa prosesong ito, maaari kang makipag-ugnay sa akin para sa tulong sa mga komento. Sinusubukan kong tumulong.
/* NAVIGATION */ .navigation ( float: left; width: auto; margin-left: 216px; margin-top: -2px; font-size: 16px; ) .navigation > a ( float: left; width: 32px; font -weight: 700; text-align: center; color: #637b93; text-decoration: none; margin-left: 1px; padding-top: 7px; ) .navigation > .current ( float: left; font-weight: 700 ; lapad: 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- tuktok: 7px;)
/* NABIGATION */ Nabigasyon ( lumutang pakaliwa; lapad: auto; margin-left : 216px ; margin-top : -2px ; laki ng font: 16px; Nabigasyon > a ( lumutang pakaliwa; lapad: 32px; font-weight: 700; text-align: center; kulay : #637b93 ; text-dekorasyon: wala; margin-left : 1px ; padding-top: 7px; Navigation > .current ( lumutang pakaliwa; font-weight: 700; lapad: 29px; text-align: center; kulay : #c4c8cc ; margin-left : 5px ; padding-top: 7px; Nabigasyon > .prev ( lumutang pakaliwa; lapad: 32px; taas: 34px; background : url ( "images/bow_left.png") no-repeat ; margin-left : 0 ; Navigation > .next ( lumutang pakaliwa; lapad: 34px; taas: 34px; background : url ( "images/bow_right.png") no-repeat ; margin-left : 14px ; Nabigasyon > .dots ( lumutang pakaliwa; laki ng font: 14px; font-weight: 700; lapad: 32px; text-align: center; kulay : #c4c8cc ; padding-top: 7px; |
Kailangan mo ring mag-upload ng mga larawan ng mga arrow ng pasulong at paatras na paggalaw sa pagho-host sa folder ng mga larawan ng template ng disenyo. . Upang mag-download, maaari mong gamitin ang karaniwang file manager ng hosting provider. Ako ay.
Kapag nailagay na namin ang mga code sa mga function.php file, sa lahat ng file na nagpapakita ng mga page na may mga anunsyo at may nakasulat na mga istilo, maaari naming suriin ang functionality ng navigation. Lahat ay gumagana para sa akin at sa karaniwang template ay ganito ang hitsura.
Napag-usapan namin ang pamamaraan nang walang plugin. Ako ay 100% sigurado na kung ginawa mo ang lahat tulad ng inilarawan sa itaas, kung gayon ang lahat ay dapat gumana para sa iyo nang malakas. Mayroon ding pangalawang opsyon na walang plugin, ngunit pagkatapos tingnan ito napagtanto ko na ito ay mahalagang parehong opsyon, bahagyang binago. Samakatuwid, lilipat ako sa isang paraan upang ipatupad ang page navigation gamit ang isang plugin.
Una, i-download ang plugin mula sa opisyal na pahina at i-install ito sa site.
Pagkatapos i-install ang plugin, kakailanganin mo ring ilagay ang code na magpapakita ng nabigasyon sa ibaba ng pahina.
Ngayon ay gagawin ng plugin ang gawain nito at ang mga numero ng pahina ay magkakaroon ng sumusunod na disenyo.
Sa isang banda, ang disenyo ay hindi masyadong mainit, ngunit sa kabilang banda, ito ay hindi masama sa lahat, dahil ito ay hindi nakakasira ng paningin. Gustung-gusto ng mga gumagamit ang pagiging simple! Samakatuwid, maaari mong iwanan ang lahat ng ito. Kung gusto mo ng isang bagay na mas makulay, pagkatapos ay titingnan natin ngayon ang ilang mga pagpipilian. Samantala, tatalakayin natin ang isang bagay tulad ng pag-set up ng wp pagenavi. May mga setting at sulit na pag-usapan ang mga ito.
Tungkol sa unang item ng setting na "Mga template ng listahan ng pahina," hindi mo kailangang baguhin ang anumang bagay dito. Kuntento na kami. Lumipat kami sa item na "Mga Setting ng Listahan ng Pahina".
Tandaan ko na kailangan mong mag-eksperimento sa lahat ng mga parameter sa puntong ito upang mahanap ang pinakamainam na halaga para sa iyong sarili. Ipapaliwanag ko lang sa madaling sabi kung ano ang ginagawa ng bawat parameter.
Ito ang lahat ng mga setting na kailangan mong ayusin upang umangkop sa iyong mga pangangailangan. Dito ang lahat ay magre-regulate para sa kanilang sarili.
Ang pinakasimpleng opsyon ay ang pag-install ng karagdagang plugin, na may mga pre-prepared na istilo at ginagawang posible na i-configure ang bawat parameter nang paisa-isa. Ito ay tinatawag na isang plugin.
Pagkatapos i-install ito, may lalabas na bagong item sa WordPress admin panel.
Pagkatapos lumipat dito, maaari naming agad na piliin ang mga umiiral na blangko ng disenyo.
Kung gusto naming i-customize ang mga istilo nang paisa-isa, pagkatapos ay sa unang item ng mga setting ng "Piliin ang Stylesheet", piliin ang opsyon na "Custom" at i-configure ang mga parameter ng lahat ng elemento (mga hangganan at kanilang mga kulay, kulay at laki ng font, kulay ng mga link kapag pag-hover sa cursor ng mouse, at iba pa).
Isasalin ko ang lahat ng mga parameter para sa iyo.
Maaari kang maghanap ng mga halaga ng kulay sa Internet o sa Photoshop kapag pumipili ng nais na kulay ng fill.
Ang opsyon sa plugin ay hindi masama, ngunit palagi kong sinasabi na kailangan mong alisin ang mga hindi kinakailangang plugin, at sa kasong ito ito ay.
Ang pangalawang opsyon ay isinasagawa sa pamamagitan ng pag-edit ng styles file, na matatagpuan sa folder na may Wp-pagenavi plugin sa hosting - pagenavi-css.css.
Kasama ang file na ito kapag aktibo ang setting na "Gumamit ng istilo ng pagenavi-css.css" sa mga setting ng plugin. Samakatuwid, kung i-edit namin ito, pagkatapos ay pagkatapos i-update ang plugin, ang lahat ng mga estilo ay papalitan ng mga karaniwang. Upang hindi palitan ang file na ito sa bawat oras at hindi muling isulat ang mga istilo, inirerekomenda kong gawin ang sumusunod:
Sa ganitong paraan gagana ang mga istilong ito anuman ang plugin. At kapag nag-update hindi sila maliligaw. Ito marahil ang pinakamahusay na pagpipilian sa disenyo para sa nabigasyon sa plugin na ito na gagawin ko sa aking sarili. Ngunit, sa kabutihang palad, ginagamit ko ang opsyon na walang plugin, na kung ano ang ipinapayo ko sa iyo na gawin.
Kaya, mga kaibigan. Ang materyal ay magiging napakahusay, tulad ng para sa akin. Ano sa tingin mo tungkol dito? Sana tapos ka na. Kung may hindi gumana, susubukan kong tumulong sa mga komento. Sumulat, huwag matakot! Minsan din akong nagdusa ng husto at napag-isipan ko ito.
Sa talang ito, gusto kong mabilis na tapusin ang post na ito, dahil kinailangan ito ng maraming enerhiya. Yan ang gagawin ko. Magpapaalam ako at magpapahinga, at pagkatapos ay magiging abala sa pagsusulat ng bagong nilalaman.
Pagbati, Konstantin Khmelev!
Pagbati, mahal na mga mambabasa ng blog site. Ngayon ay pag-uusapan natin ang tungkol sa napakasikat na WP-PageNavi plugin, na nagbibigay-daan sa iyong dalhin ang page navigation ng iyong WordPress blog sa isang bagong antas.
Sa prinsipyo, ang page navigation (pagination), na ginagamit bilang default, ay medyo user-friendly, ngunit ang opsyon na inaalok ng extension na ito ay mukhang mas kaakit-akit.
Maghusga para sa iyong sarili, ito ang hitsura ng default na pagination:
At ito pagkatapos i-install ang plugin:
o ganito:
depende ito sa mga opsyon na pipiliin mo sa window ng mga setting nito.
Sa palagay ko, ang pangalawang opsyon ay mas maganda kaysa sa una, na siyang default. Kung iniisip mo rin, dapat mong basahin ang artikulong ito hanggang sa dulo at alamin ang lahat tungkol sa mga nuances ng pag-install at kung paano i-configure ang kahanga-hangang extension na ito.
Kakailanganin mo munang i-download ang plugin mula rito. Hanapin ang button na “I-download” sa kanan at i-save ang archive ng wp-pagenavi.zip sa iyong computer. Pagkatapos ay i-unzip ito at i-upload ang resultang folder sa hosting server sa direktoryo na may mga plugin na wp-content/plugins/ .
Upang gawin ito, kakailanganin mong i-access ang mga file at folder ng iyong WP blog sa pamamagitan ng FTP().
Kapag nag-unzip, nangyayari na may lalabas na dagdag na panlabas na folder, kaya suriin ito at alisin ito kung kinakailangan. Sana ipinaliwanag ko ito ng malinaw? Kung hindi, hindi makikita ng WordPress ang plugin na iyong na-install. Okay, magpatuloy tayo.
Pagkatapos mong kopyahin ang mga file ng plugin sa hosting server sa wp-content/plugins/ folder, kakailanganin mong pumunta sa WordPress admin panel (http://vash_sait.ru/wp-admin/) at piliin ang “Plugins” mula sa ang kaliwang admin menu " Sa tuktok ng window na "Pamamahala" na bubukas, kailangan mong mag-click sa link na "Hindi Aktibo" (o, kung walang pagsasalin, pagkatapos ay "Hindi Aktibo").
Magbubukas ang isang window kasama ang lahat ng naka-install ngunit hindi pa naka-activate na mga extension. Hanapin ang "WP-PageNavi" sa kanila at mag-click sa link na "I-activate" na matatagpuan sa ilalim ng pangalan nito.
Ang plugin ay aktibo, ngunit upang makita ang mga resulta ng trabaho nito sa iyong blog, kakailanganin mo ring ipasok ang code para sa pagtawag sa wp_pagenavi function sa mga file ng iyong tema na kasalukuyang ginagamit. .
Karaniwan, ginagamit ang pagination sa home page ng blog (INDEX.PHP file mula sa iyong theme folder), archive web page (ARCHIVE.PHP), at mga resulta ng paghahanap (SEARCH.PHP file). Sa totoo lang, kakailanganin naming ipasok ang code para sa pagtawag sa function na kailangan namin sa mga file na ito (mga template).
Yung. Kakailanganin mong kumonekta muli sa pamamagitan ng FTP at pumunta sa folder na may kasalukuyang tema:
Wp-content/themes/Pangalan ng folder na may iyong tema
Hanapin ang INDEX.PHP dito at buksan ito para sa pag-edit sa isang editor na maginhawa para sa iyo (Gumagamit ako ng advanced NotePad++ para sa layuning ito - Mayroon akong isang artikulo sa pagtatrabaho dito). Ngayon ang iyong gawain ay hanapin ang seksyon ng code sa INDEX.PHP na responsable para sa paglipat sa nakaraan o susunod na pahina. Hindi isang madaling gawain, hindi ba? Bagaman, siyempre, depende ito sa kung sino.
Ang INDEX.PHP ay hindi masyadong malaki, maingat na pag-aralan ang mga nilalaman nito upang maghanap ng mga komentong nauugnay sa pagination, halimbawa, ang mga ito:
Karaniwan, ang mga tagalikha ng tema ng WordPress ay nagsasama ng mga naturang komento sa lugar ng code na responsable para sa pagpapakita ng nabigasyon ng pahina. Ang karaniwang code mismo ay maaaring magmukhang, halimbawa, tulad nito:
Kapag natukoy mo na ang fragment na kailangan mo, kakailanganin mong palitan ito ng wp_pagenavi function call line:
Ngayon ay kailangan mong i-save ang mga pagbabagong ginawa sa INDEX.PHP, pumunta sa pangunahing pahina ng iyong blog at tiyaking gumagana ang lahat ayon sa nararapat. Yung. Sa halip na ang karaniwang pagination na ginagamit sa WordPress, ginagamit mo ang kagandahan ng WP-PageNavi.
Sa pamamagitan ng paraan, ang karaniwang pagination ay hindi kailangang alisin mula sa INDEX.PHP code, upang kapag tinanggal mo ang plugin na ito ay hindi ka magkakaroon ng mga problema dito sa ibang pagkakataon. Upang gawin ito, kakailanganin mong magsulat sa INDEX.PHP, sa halip na ang karaniwang navigation code, isang kundisyon na tumutukoy kung kailan ipapakita ang pamantayan at kung kailan ang WP-PageNavi panel.
Ang kundisyon ay depende sa kung ang WP-PageNavi plugin ay naka-install sa iyong blog o hindi. Maaaring ganito ang hitsura nito:
Sa code na ito ang kundisyon ay:
If(function_exists("wp_pagenavi"))
sinusuri kung naka-install ang plugin, at kung hindi ito naka-install, tatakbo ang karaniwang script:
Iba pa (?>
At kung naka-install ang WP-PageNavi, ang navigation bar ay bubuo nito:
{ ?>
Bagaman, siyempre, hindi mo kailangang mag-abala at palitan lamang ang isa sa isa, ngunit nasa iyo iyon.
Kaya, ngayon ay kailangan mong gawin ang parehong para sa mga file na ARCHIVE.PHP at SEARCH.PHP mula sa folder na may iyong tema (wp-content/themes/Pangalan ng folder na may iyong tema).
Upang makapasok sa mga ito, kakailanganin mong piliin ang "Listahan ng mga pahina" mula sa kaliwang menu sa lugar na "Mga Opsyon" sa admin panel. Magbubukas ang isang window kung saan aktibo ang tab na "Mga Template ng Listahan ng Pahina":
Sa field na "Template ng pangkalahatang listahan ng mga pahina" sa figure sa itaas, ang pagpapakita ng kasalukuyang pahina at ang kabuuang bilang ng mga pahina ay nakatakda. Sa opsyong ito ng pagpuno sa field na ito, magiging ganito ang hitsura ng panel ng WP-PageNavi:
Maaari mong idagdag ang salitang "Pahina" sa field na ito kung gusto mo:
Pahina %CURRENT_PAGE% ng %TOTAL_PAGES%
At kung gusto mo, maaari mo itong linisin nang buo. Sa mga column na "Elemento "Kasalukuyang Pahina" at "Elemento "Pahina" iwanan ang lahat bilang ay. Dito maaari mong itakda ang pagpapakita ng label para sa kasalukuyan at lahat ng iba pang mga web page sa anyo ng isang serial number. Magiging ganito ang hitsura nito:
Sa mga field na "Text Para sa Unang Pahina" at "Text Para sa Huling Pahina" maaari mong itakda ang teksto para sa una at huling mga pindutan:
Sa halip na teksto sa column na “Text Para sa Unang Pahina,” maaari kang magsulat ng isa, at ang field na “Text Para sa Huling Pahina” - %TOTAL_PAGES% (sa halip na inskripsyon na ito ang bilang ng lahat ng web page ay ipapakita):
Sa mga field na “Text Para sa Susunod na Post” at “Text Para sa Nakaraang Post,” ang mga arrow sign ay isinulat upang ipakita sa susunod at nakaraang mga pindutan:
Ni-clear ko ang susunod na dalawang field, dahil... kung hindi, dalawang puting button na walang text ang ipapakita sa halip. Posibleng wala ka nito at ikaw ang magdedesisyon para sa iyong sarili kung ano ang kailangan nila.
Lumipat tayo sa higit pang mga setting na tinatawag na "Mga Setting ng Listahan":
Ang checkbox sa “Gumamit ng pagenavi-css.css” ay nagbibigay-daan sa iyong i-disable o i-enable ang cascading style sheet (CSS) file na kasama ng plugin. Sa field na "Estilo ng Listahan," maaari kang pumili ng isa sa dalawang estilo ng CSS mula sa drop-down na listahan.
Nakita mo ang "Normal" sa mga nakaraang screenshot, at kapag pinili mo ang istilong "Drop-down List", makakakuha ka ng isang bagay na tulad ng view na ito ng WP-PageNavi panel sa WordPress:
Kung lalagyan mo ng check ang kahon na “Palaging Ipakita ang Pag-navigate sa Pahina,” kahit na para sa mga web page na hindi pa nangangailangan ng pagnunumero (sabihin nating wala pang sapat na mga post sa pangunahing pahina para maganap ang paghahati), ang nabigasyon ay magiging nagpakita ng ganito:
Sa "Bilang Ng Mga Pahinang Ipapakita" maaari mong itakda kung gaano karaming mga pahina ang ipapakita bilang isang tuloy-tuloy na (sequential) na serye ng mga numero. Ang paglipat sa iba ay magiging posible gamit ang susunod at nakaraang mga pindutan, pati na rin ang paglipat ng mga pindutan sa una at huli. Naglagay ako ng lima doon, na nagresulta sa:
Sa "Bilang Ng Mas Malaking Mga Numero ng Pahina na Ipapakita" maaari mong itakda kung gaano karaming malayong mga numero ng web page (mas malaki kaysa sa kasalukuyang ipinapakita na mga numero ng halagang numero) ang ipapakita pagkatapos ng susunod na button.
At sa field na "Ipakita ang Mas Malaking Mga Numero ng Pahina Sa Maramihang Ng" maaari mong itakda ang hakbang kung saan ipapakita ang mga bilang ng malalayong web page. Sabihin nating naglagay ako ng tatlo sa unang field, at dalawa sa pangalawa:
Bilang resulta, ang PageNavi panel ay magiging ganito:
Yung. Ang mga bilang lamang ng tatlong malayong web page ay ipinapakita na may pagitan (hakbang) na katumbas ng dalawa (6, 8, 10). Upang hindi magamit ang pagpapakita ng mga malalayong numero, kakailanganin mo lamang na maglagay ng zero sa column na “Number Of Larger Page Numbers To Show”.
Upang ilapat at ipakita ang mga pagbabagong iyong tinukoy, sa mga setting ng plugin kakailanganin mong mag-click sa pindutang "I-save ang Mga Pagbabago" na matatagpuan sa ibaba.
Upang mabago ang scheme ng kulay, padding, mga font at iba pang mga katangian ng hitsura ng panel ng pagination na ipinapakita sa iyong blog, kakailanganin mong idagdag ang mga kinakailangang katangian ng CSS sa cascading style sheet na file ng plugin na ito.
Totoo, para makuha nito ang form na ipinapakita sa mga screenshot na ibinigay sa artikulong ito, nagdagdag ako ng mga karagdagang katangian hindi sa CSS file ng plugin (/wp-content/plugins/wp-pagenavi/pagenavi-css.css), ngunit sa ang file na ginamit ko na mga tema (wp-content/themes/name ng folder na may theme/style.css).
Sa file na ito, ang mga katangian ng CSS na tumutukoy sa hitsura ng panel ng WP-PageNavi ay ganito ang hitsura:
#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; background:#26343c; )
Pakitandaan na ang mga pangalan ng klase at ID() na ginamit dito ay partikular na tumutukoy sa aking template. Hayaan akong ipaliwanag ang layunin ng ilang mga panuntunan at katangian ng 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; )
itinatakda ang panlabas at panloob na mga margin (tingnan ang tungkol sa mga ito) para sa mga pindutan ng panel (sa katunayan, para sa mga link mula sa mga pindutang ito, dahil partikular na ilalapat ang mga katangiang ito sa mga link na tinukoy ng tag na A at inilagay sa lalagyan ng wp-pagenav) .
Itinatakda din ng panuntunang ito ang kulay ng text ng link (nakatakda ang puting kulay sa property ng kulay: #fff; - ).
Walang magiging hangganan sa paligid ng mga link (border property: 0px), at ang kulay ng background para sa mga container na may mga link na ito ay tutukuyin ng background-color property: #2b99ff; . Ito ang kulay na ito na makikita mo sa mga screenshot sa itaas para sa mga hindi aktibong button ng page navigation panel.
Panuntunan ng CSS:
#content .wp-pagenavi a:hover ( color:#fff; background-color: #154b7d; )
itinatakda ang kulay para sa teksto at background ng lalagyan (button) na may link na kasalukuyang pina-hover ng cursor ng mouse (mga katangian ng CSS ng link kapag naka-hover - a:hover - ).
Ang kulay ng text ng link ay nananatiling puti, ngunit ang kulay ng background (talagang kulay ng button) ay nagbabago sa isang mas madilim na kulay (kulay ng background: #154b7d;). Yung. Kapag ginalaw ng isang bisita ang mouse sa ibabaw ng mga button sa navigation bar, makikita nila ang pagbabago ng kulay ng button na iyon, na lumilikha ng isang pakiramdam ng interaktibidad.
Panuntunan ng CSS:
#content .wp-pagenavi span.current ( padding: 3px 8px 3px 8px; margin: 2px; line-height:25px; font-weight: bold; color: #add352; background:#26343c; )
Itinatakda ang hitsura ng button na may numero ng kasalukuyang bukas na pahina ng blog (ang SPAN tag na may CURRENT na klase ay isusulat sa code ng link na ito). Ang button na ito ay magiging kapareho ng numero unong button sa larawan sa ibaba:
Itinatakda ng panuntunang ito ng CSS na baguhin ang kulay ng background ng aktibong button na ito (background ng property: #26343c), ang kulay ng text ng link sa button na ito (kulay ng property: #add352), at bilang karagdagan, ang font ng text ng link ay magiging bold dahil sa CSS property na ito - font-weight :bold().
Ngunit upang baguhin ang hitsura ng panel ng nabigasyon ng pahina, maaari mong idagdag ang mga kinakailangang katangian ng CSS sa styling file ng plugin mismo. Maaari mong buksan ang cascading style sheet file na ito para sa pag-edit mula sa folder:
/wp-content/plugins/wp-pagenavi/pagenavi-css.css
Halimbawa, upang makakuha ng panel na tulad nito:
Kakailanganin mong i-download ang archive na ito, i-unzip ito at kopyahin ang folder ng IMAGES sa folder ng WP-PageNavi plugin, na makikita mo sa sumusunod na landas:
/wp-content/plugins/wp-pagenavi
Sa folder ng IMAGES mayroong isang graphic file na fon.gif, na bubuo sa background para sa panel ng PageNavi. Ngayon ay kakailanganin mong buksan ang file /wp-content/plugins/wp-pagenavi/pagenavi-css.css para sa pag-edit at palitan ang code doon ng mga sumusunod na panuntunan:
Wp-pagenavi ( width: 100%; overflow: hidden; padding: 4px 0px 4px 0px; margin-left: 0px; border: 1px solid #00598F; background: url("images/fon.gif") center left repeat-x ; ) .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited ( padding: 4px 5px 4px 5px; margin: 2px 0px 2px 0px; color: #ffffff; font-weight: bold; text -decoration: none; ) .wp-pagenavi a.last ( padding: 4px 5px 4px 5px; ) .wp-pagenavi a.first ( padding: 4px 5px 4px 5px; ) .wp-pagenavi a:hover ( background-color: #00598F; kulay: #FFFFFF; font-weight: bold; ) .wp-pagenavi span.pages ( padding: 4px 5px 4px 5px; margin: 2px 0px 2px 0px; kulay: #FFFFFF; background: url("images/fon .gif") sa gitna sa kaliwa repeat-x; background-color: #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; margin: 2px 0px 2px 0px; margin-right: 0px; margin-left: 0px; border-top: 1px solid #00598F; border-bottom: 1px solid #00598F; kulay: #FFFFFF; background: url("images/fon.gif") kaliwa sa gitna repeat-x; font-weight: bold; ) .wp-pagenavi span.next-prev ( font-family: Arial; /* IE fix */ )
I-save ang iyong mga pagbabago sa pagenavi-css.css file at bisitahin ang iyong blog upang makita kung nagbago ang nabigasyon. Kung hindi ito nagbago, pagkatapos ay subukang i-refresh ang mga nilalaman ng window sa browser sa pamamagitan ng pagpindot sa pindutan ng SHIFT, at kung hindi ito makakatulong, pagkatapos ay i-clear ang cache ng browser.
Good luck sa iyo! Magkita-kita tayo sa mga pahina ng blog site
Baka interesado ka
Easy Social Share Buttons - plugin para sa pagdaragdag ng mga pindutan ng social network sa WordPress, kabilang ang VKontakte at Odnoklassniki 
Mag-subscribe Sa Mga Komento para sa WordPress - subscription sa mga komento sa mga artikulo sa WordPress 
Breadcrumbs sa WordPress gamit ang Breadcrumb NavXT plugin (pagpapalakas ng pag-link) 
Mga Simpleng Counter at Kategorya at Mga Icon ng Pahina - magagandang RSS at Twitter counter, pati na rin ang mga icon para sa mga kategorya at pahina sa WordPress 
Pag-install at pag-configure ng mga plugin para sa WordPress, paglutas ng mga posibleng problema 
All in One SEO Pack at panloob na search engine optimization ng isang WordPress blog (Canonical, Description at Title meta tags) 
Gallery para sa WordPress batay sa NextGEN Gallery plugin - paggawa at pagpapakita ng mga gallery ng larawan at mga slideshow sa mga artikulo 
Google XML Sitemaps - paggawa ng sitemap para sa WordPress 
Mas mahusay na Feed para sa WordPress - kung paano hindi magpadala ng buong mga teksto ng mga post sa RSS at protektahan ang iyong sarili mula sa pagnanakaw ng nilalaman sa pamamagitan ng isang channel ng balita 
Muling pag-link ng mga pahina ng website gamit ang halimbawa ng upPrev plugin (pull-out panel) para sa WordPress
