Pagbati sa mga mambabasa ng aking blog site, ngayon ay ibabahagi ko sa iyo ang mga setting para sa pag-navigate sa pahina nang walang plugin sa blog. Bakit kailangan pa nga ang pag-navigate sa pahina sa isang website at anong mga kapaki-pakinabang na benepisyo ang naidudulot nito? Ito ay kakayahang magamit ng blog, salamat sa kung saan ang mga bisita sa site ay madaling makahanap ng impormasyon na kapaki-pakinabang sa kanila.
Kaya, bago lumipat sa mga setting ng nabigasyon, kailangan mong mag-set up ng isang maginhawang mode ng pagbabasa para sa iyong mga post na ipapakita sa pahina ng blog. Upang gawin ito, pumunta sa Administration Panel - Mga Setting - Pagbabasa:
at itakda ang bilang ng mga ipinapakitang post na ipapakita sa bawat pahina:
Sa kasong ito, 5 mga entry ang naka-install. Karaniwan ang isang blog ay nagpapakita ng 5 hanggang 7 mga entry sa bawat pahina. Ngayong naayos na namin ang mga setting na ito, sa ibaba ng pahina ay makikita namin ang karaniwang pag-navigate sa pahina ng WordPress, na mukhang ganito:
Kapag ang bilang ng mga post sa iyong blog ay, sabihin nating, 10-15 at sumasakop sila ng hindi hihigit sa 2-3 mga pahina, kung gayon ang naturang pag-navigate ay medyo maginhawa, ngunit kapag ang blog ay regular na puno ng nilalaman at ang bilang ng mga artikulo ay malapit sa 100 o 200 at lahat ng mga post na ito ay naka-post ng 5 sa bawat pahina. Pagkatapos ay sa tingin ko hindi ito magiging mahirap na kalkulahin kung gaano karaming mga pahina ang ipo-post sa blog. Kasabay nito, upang ang isang bisita sa iyong blog ay hindi kailangang mag-scroll sa lahat ng mga pahina ng iyong WordPress blog upang makahanap ng anumang post, ang page navigation ay dapat magkaroon ng isang mas maginhawa at functional na hitsura para sa gumagamit:
Ang ganitong pag-navigate ay makakatulong na panatilihin ang mambabasa sa iyong blog upang mas maginhawa para sa kanya na mag-scroll sa iyong site sa paghahanap ng mga post na may kaugnayan sa kanya. Kaya, muli kaming bumubuti, na tumutulong sa aming i-promote ang aming blog.
Maaaring ipakita ang isang katulad na navigation bar gamit ang WP-PageNavi plugin. Kasabay nito, naniniwala ako na ang isang blog ay dapat gumana sa isang maliit na bilang ng mga plugin, upang hindi lumikha ng mga karagdagang pag-load kapag ipinapakita ang site. Samakatuwid, isasaalang-alang namin ang isang simpleng pag-setup ng display ng nabigasyon ng pahina ng WordPress nang walang plugin.
Mga teknikal na setting
Buksan ang Administration Panel - Mga Setting - Editor - buksan ang functions.php file at ipasok ang sumusunod na code sa simula:
// Navigation bar
function na wp_corenavi() (
pandaigdigang $wp_query, $wp_rewrite;
$mga pahina = ";
$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"] = '"'; //kaliwang transition quote"
$a["next_text"] = '"'; //Tamang transition quote"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 '
}
o ganito:
at palitan ang naka-highlight na code ng mga sumusunod:
Pagkatapos nito, sinusuri namin ang mga setting sa iyong site at dapat na ipakita ang karaniwang pagpapakita ng mga setting ng nabigasyon:
Navigation bar
*/
.wp-pagenavi (
taas: 50px;
malinaw: pareho;
kulay:#BB7B00;
}
.wp-pagenavi span.pages(
kulay: #BB7B00;
}
.wp-pagenavi a, .wp-pagenavi span (
text-dekorasyon: wala;
padding: 6px 9px;
margin: 2px;
background:#ffffff;
font: bold 14px Verdana,sans-serif;
kulay: #85B6C5;
border-radius:5px ;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current (
kulay ng hangganan: #BB7B00;
background:#85B6C5;
kulay:#ffffff;
}
.wp-pagenavi span.current (
kulay: #f5f5f5;
background:#85B6C5;
padding: 8px 9px;
}
Ngayong nagsama na kami ng mga istilo para ipakita ang navigation bar sa WordPress nang hindi gumagamit ng plugin, makakakita kami ng ganito:
Upang maalis ang mga karagdagang duplicate na pahina na hindi gusto ng mga search engine, kailangan naming harangan ang pahina ng pahina mula sa pag-index. Upang gawin ito, kailangan naming idagdag ang sumusunod na code sa simula ng functions.php file:
/*** NAGDAGDAG NG meta robots noindex,nofollow PARA SA MGA PAGE ***/
function my_meta_noindex() (kung (
is_paged() // Lahat at mga pahina ng nabigasyon
) (echo "".' '."\n";)
}add_action('wp_head', 'my_meta_noindex', 3); // magdagdag ng noindex, nofollow sa head
I-save at suriin namin ang aming mga setting. Upang gawin ito, buksan ang alinman sa mga pahina 2, 3-10, atbp., pindutin ang Ctrl+U at ang sumusunod na code ay dapat na ipakita sa pag-encode ng pahina:
Ito ay mahalaga Disallow: Ang /page ay hindi dapat isara sa robots.txt file mula sa pag-index. Kinukumpleto nito ang mga setting. Sana maintindihan mo ang lahat ng pag-encode na ito. Kung mayroon kang anumang mga katanungan, sumulat sa mga komento, tiyak na sasagutin ko. Hanggang sa muli!
Sa artikulong ngayon ay pag-uusapan natin ang tungkol sa isang plugin na tinatawag WP-PageNavi. Ang madaling gamiting plugin na ito ay nagbibigay-daan sa iyo na ayusin ang iyong WordPress blog page navigation nang mas maginhawa kaysa kung ginamit mo ang default na paraan. Sa prinsipyo, ang kaginhawahan ng karaniwang pag-navigate sa pahina ay isang kamag-anak na tanong at medyo posible na gamitin ang tinatawag na mga default na tool, ngunit ang WP-PageNavi ay nag-aalok sa amin ng isang mas kaakit-akit na opsyon. Kung bilang default, mayroon kaming dalawang pindutan na "mas maaga" at "mamaya" bilang pag-navigate sa pahina, iyon ay, mag-scroll kami sa mga pahina nang sunud-sunod sa paghahanap ng kailangan namin, pagkatapos ay pagkatapos na sa wakas ay mai-install at mai-configure ang WP-PageNavi, nakakakuha kami ng mga pindutan na nagpapahiwatig mga numero ng pahina, na nagbibigay-daan sa amin upang madaling mag-navigate sa nais na pahina. Depende sa mga napiling setting, maaaring iba ang hitsura ng navigation bar, ngunit titingnan natin ito sa ibang pagkakataon.
Anong mga partikular na dahilan ang maaaring mayroon ang isang baguhang blogger sa paggamit ng plugin ng PageNavi upang ayusin ang pag-navigate sa blog? Marahil sa una ang gayong pangangailangan ay hindi lumitaw, at dalawang mga pindutan ay sapat na upang mag-navigate sa limang mga pahina ng blog. Ngunit sa paglipas ng panahon, ang dami ng impormasyon, at samakatuwid ang mga pahina, ay patuloy na lumalaki, at ang ordinaryong pag-navigate ay nagiging abala, at mas madaling matandaan ng mambabasa kung aling pahina ang natapos niyang basahin o natagpuan ang kinakailangang artikulo kaysa matandaan kung gaano karaming beses mag-click sa "susunod" na buton. Kaya naman ang PageNavi ay isang lohikal na ebolusyon ng halos bawat nabigasyon ng blog; Siyempre, may iba pang katulad na mga plugin, ngunit ito ay WP-PageNavi na nakakuha ng pinakamalaking katanyagan at katanyagan.
Naturally, bago magtrabaho kasama ang plugin na ito, dina-download at i-install namin ito. Pagkatapos naming ma-download ang kinakailangang archive gamit ang plugin, kailangan itong i-unpack; bilang resulta, nakakakuha kami ng folder na tinatawag na WP-PAGENAVI, na pagkatapos ay ia-upload namin sa iyong hosting server sa folder na may mga plugin ng WordPress, na makikita namin sa pangalang wp-content/plugins/. Upang magawa ito, kailangan mong i-access ang iyong mga folder ng WordPress blog gamit ang FTP.
Ang espesyal na pansin ay dapat bayaran sa katotohanan na ang folder kung saan matatagpuan ang mga file ng plugin ay dapat na direktang kopyahin sa hosting server. Kung kumopya ka ng isang folder na may parehong pangalan, sa loob kung saan matatagpuan ang folder na kailangan namin, hindi makikita ng WordPress ang naka-install na plugin at, nang naaayon, ay hindi na makakapagpatuloy sa pagtatrabaho.
Pagkatapos makumpleto ang pagkopya ng mga file ng WP-PageNavi plugin, ang susunod mong hakbang ay mag-log in sa WordPress admin area at piliin ang “Mga Plugin”. Pagkatapos nito, lilitaw ang window ng pamamahala ng plugin sa harap mo, kung saan ang iyong pipiliin ay ang link na "Inactive" ("Inactive", sa English na bersyon). Binibigyang-daan ka ng pagkilos na ito na magbukas ng listahan ng mga naka-install ngunit hindi pa na-activate na mga plugin para sa iyong blog.
Sa listahang ito, kailangan mong hanapin ang WP-PageNavi plugin na kailangan namin at mag-click sa link na "I-activate" (matatagpuan ito sa ilalim mismo ng pangalan ng plugin).
Kaya, na-activate namin ang kinakailangang plugin, ngunit upang sa wakas ay makita ang mga resulta ng trabaho nito, ito ay madalas na hindi sapat. Pagkatapos i-activate ang plugin, kailangan mong pumunta sa blog bilang isang regular na user at tingnan kung may mga pagbabagong naganap sa display ng nabigasyon. Kung sa wakas ay nakakuha na ng bagong hitsura ang navigation bar, maaari kang magpatuloy kaagad sa pag-set up ng plugin. Kung walang nagbago, kailangan nating manu-manong ipasok ang code sa pagtawag ng plugin sa mga pangunahing file ng tema ng WordPress na kasalukuyang ginagamit sa blog. Sa kabutihang palad, walang partikular na kumplikado tungkol dito - ang pangunahing kondisyon para sa tagumpay ay ang pag-alam sa istruktura ng template ng WordPress at pag-unawa kung aling mga file (at kung saang partikular na seksyon ng mga ito) idagdag ang plugin code.
Dapat sabihin na ngayon maraming mga template ang mayroon nang ganap na suporta para sa PageNavi plugin na nakapaloob sa kanila. Sa kasong ito, kailangan mo lamang i-activate ang plugin. Kasabay nito, kailangan mong maunawaan na ang lahat ng ito ay lubos na nakasalalay sa partikular na tema ng disenyo ng blog na napili.
Bilang isang tuntunin, ang paggamit ng page navigation ay may kaugnayan sa pangunahing pahina (ito ang INDEX.PHP file sa folder na may temang ginamit), gayundin sa dalawa pang kaso - sa pahina ng archive (ARHIVE.PHP) at ang pahina ng mga resulta ng paghahanap para sa buong blog (SEARCH.PHP ). Samakatuwid, nasa tatlong file na ito na kakailanganin naming ipasok ang code ng serbisyo ng plugin ng PageNavi, na magpapahintulot sa amin na magpakita ng isang maginhawang panel ng nabigasyon sa tamang lugar sa aming WordPress blog. Upang maipasok ang code ng serbisyo ng plugin ng PageNavi sa kinakailangang mga file ng template, kailangan mong kumonekta sa blog sa pamamagitan ng FTP protocol at pumunta sa folder na may kasalukuyang ginagamit na tema.
Una, maghanap tayo ng file na tinatawag na INDEX.PHP sa theme folder at simulan itong i-edit sa pinaka-kombenyente at pamilyar na editor (personal, ginagamit ko ang advanced notepad Notepad++ para sa mga layuning ito).
Sa file na bubukas, kakailanganin mong hanapin ang seksyon ng code na malinaw na responsable para sa pag-navigate sa maraming pahina ng iyong blog. Dapat sabihin na sa ilang mga kaso ito ay nagiging isang mahirap na gawain. Gayunpaman, ang INDEX.PHP file mismo ay maliit at maingat na pag-aaral nito ay hindi magtatagal ng maraming oras. Ang iyong gawain ay maghanap ng mga komentong nauugnay sa nabigasyon, halimbawa, at. Sa ganitong mga komento, kadalasang kasama ng mga tagalikha ng tema ang lugar ng code ng serbisyo na responsable para sa pag-navigate ng pahina sa isang WordPress blog.
Ang page navigation code sa INDEX.PHP file ng iyong tema ay maaaring magmukhang kahit ano, ngunit ngayon ay kailangan mo itong tukuyin nang tama at pagkatapos ay palitan ito ng linya ng tawag ng wp_pagenavi plugin na aming isinasaalang-alang. Ang linyang ito ay ganito ang hitsura: . Ise-save namin ang mga pagbabagong ginawa sa file, pumunta sa pangunahing pahina ng blog at tiyaking gumagana ang lahat nang eksakto tulad ng kailangan namin.
Sa prinsipyo, ang karaniwang navigation code na matatagpuan sa INDEX.PHP file ay hindi kailangang tanggalin, upang sa ibang pagkakataon kapag tinanggal mo ang aming plugin, ang page navigation ng iyong blog ay gagana nang maayos. Upang gawin ito, sa halip na ang karaniwang code para sa pag-navigate sa pahina, kakailanganin mong magsulat ng isang kundisyon na tutukuyin kung kailan dapat ipakita ang karaniwang nabigasyon ng WordPress, at kung kailan dapat ipakita ang page navigation bar na nilikha gamit ang WP-PageNavi plugin. .
Sa pamamagitan ng paraan, ang kasapatan ng pag-navigate ay nakasalalay din sa kakayahang ma-access, halimbawa, mula sa pangunahing pahina, sa anumang iba pa. Madaling maunawaan na ang mga karaniwang "pasulong" at "pabalik" na mga pindutan ay hindi angkop para sa layuning ito, lalo na para sa mga multi-page na blog.
Kapag tapos ka na sa INDEX.PHP file, kakailanganin mong gawin ang parehong para sa natitirang mga file (SEARCH.PHP at ARCHIVE.PHP) mula sa parehong folder ng tema para sa iyong blog. Matapos matagumpay na makumpleto ang mga operasyong ito, maaari naming ipagpalagay na ganap na naming naisip kung paano i-set up ang display ng panel na nagbibigay ng page navigation sa aming WordPress blog. Gayunpaman, hindi lang ito, dahil ngayon ay malapit na tayong maging pamilyar sa mga setting ng plugin na nagpapahintulot sa amin na baguhin ang istraktura ng panel ng nabigasyon ng pahina.
Upang simulan ang pag-set up ng plugin, kailangan mong piliin ang "PageNavi" o, sa Russian na bersyon, "Listahan ng mga pahina" sa kaliwang menu ng WordPress admin panel mula sa "Mga Setting" na lugar. Ang pagkilos na ito ay nagbubukas ng isang window na naglalaman ng isang listahan ng mga setting ng WP-PageNavi plugin sa lugar ng mga template ng listahan ng pahina.
Ang unang field, na tinatawag na "kabuuang template ng listahan ng pahina", ay naglalaman ng isang tinukoy na pagpapakita ng kasalukuyang pahina at ang kabuuang bilang ng mga pahina. Kung napili ang pagpipiliang ito, pagkatapos ay sa WordPress blog ang page navigation panel ay magiging isang sequential list ng mga page na may naka-highlight na kasalukuyang page number; Maaari ka ring magdagdag ng salita sa field na ito, halimbawa, “Page” - hindi nito maaapektuhan ang mismong functionality. Kung mayroong ganoong pagnanais, ang patlang na ito ay maaaring ganap na malinis.
Ang mga sumusunod na field ay pinangalanan "Kasalukuyang Elemento ng Pahina", Dagdag pa - "Elemento ng page". Hindi namin hinawakan ang mga nilalaman ng mga patlang na ito, dahil dito nakatakda ang pagpapakita ng mga pahina (kapwa ang kasalukuyan at lahat ng iba pa) sa anyo ng isang serial number. Tulad ng para sa panel ng WP-PageNavi, ang lahat dito ay magiging normal at natural. Ang isang katulad na page navigation system ay matatagpuan na ngayon sa maraming blog.
Ang mga patlang ng teksto para sa una at huling mga pahina ay inilaan upang tukuyin ang teksto na ipinapakita sa mga pindutan para sa paglipat sa una at huling mga pahina. Ang klasikong solusyon ay ang pagsulat ng isa sa halip na teksto para sa field ng unang pahina, at punan ang “Text Para sa Huling Pahina” ng linyang %TOTAL_PAGES% - salamat dito, ang kabuuang bilang ng mga pahina ng iyong blog ay ipapakita sa huling linya.
Ang mga sumusunod na field ay idinisenyo upang ipakita ang mga pindutan para sa pagpunta sa nakaraan at susunod na mga pahina ng blog. May mga pangalan sila "Text Para sa Nakaraang Post" at "Text Para Sa Susunod na Post" ayon sa pagkakabanggit. Bilang isang patakaran, ang karaniwang mga arrow sa kaukulang direksyon ay nakasulat dito.
Mas gusto kong i-clear ang natitirang dalawang field, dahil kung hindi, magpapakita sila sa amin ng ilang puting button na walang text. Gayunpaman, sa iyong blog makakahanap ka ng lugar para sa mga field na ito na may kaukulang mga pindutan.
Ngayon na ang oras upang magpatuloy sa karagdagang mga setting ng WP-PageNavi plugin at lumipat sa mga setting ng listahan ng pahina. Ang una naming pagkikita sa bintana "mga setting ng listahan ng pahina"- ito ang item na "Gumamit ng pagenavi-css.css", na nagbibigay-daan sa iyong i-disable o ikonekta ang file sa mga cascading style sheet na kasama ng plugin na tinalakay ngayon sa pamamagitan ng paglalagay ng check sa kahon.
Ang susunod na field, tinawag "Estilo ng Listahan ng Pahina", nag-aanyaya sa amin na magbukas ng drop-down na listahan ng mga estilo ng CSS, na mahalagang mag-imbita sa amin na pumili ng isang istilo mula sa dalawang inaalok. Ang regular na istilo ay ang mga pindutan ng nabigasyon ng pahina na nabanggit na namin, habang ang istilong tinatawag na "Drop-down list" ay nagpapakita ng nabigasyon sa anyo ng isang laconic na drop-down na listahan na may mga numero ng pahina.
Ang susunod na field ng setting ay nag-uudyok sa amin na lagyan ng tsek o alisan ng tsek ang item "Palaging Ipakita ang Pag-navigate sa Pahina". Kung lagyan mo ng check ang kahon dito, ang nabigasyon ay ipapakita kahit para sa mga pahinang iyon na wala pang sapat na mga post upang hatiin - halimbawa, sa pangunahing pahina.
Ang field na "Bilang Ng Mga Pahinang Ipapakita" ay nilayon para sa iyo na ipahiwatig kung gaano karaming mga pahina ang ipapakita bilang isang sunud-sunod na serye ng mga numero, habang ang pag-navigate sa iba pang mga pahina sa iyong blog ay isasagawa gamit ang "susunod" at "nakaraang" na mga pindutan (ang parehong mga minarkahan namin ng mga arrow), pati na rin ang mga pindutan upang pumunta sa unang pahina at sa huli.
Tinawag ang field "Bilang ng Mas Malaking Mga Numero ng Pahina na Ipapakita" tumutukoy kung gaano karaming mga malalayong numero na mas malaki kaysa sa mga ipinapakitang numerong halaga ang makikita ng isang bisita sa blog pagkatapos i-click ang pindutan upang pumunta sa susunod na pahina sa pagkakasunud-sunod.
Sa wakas, tinawag ang isang patlang "Ipakita ang Mas Malaking Mga Numero ng Pahina Sa Maramihan Ng" nagbibigay ng kakayahang itakda ang hakbang kung saan ipapakita ang mga bilang ng malalayong pahina ng iyong blog. Halimbawa, sa una sa mga patlang na ito ay maglalagay kami ng tatlo, at para sa pangalawa - dalawa. Ito ay hahantong sa katotohanan na sa WP-PageNavi panel, na ang kasalukuyang pahina ay may bilang na 1 at ang bilang ng mga ipinapakitang pahina ay tinukoy ng numero 5, pagkatapos ng sunud-sunod na ipinapakita na mga pahina mula sa una hanggang sa ikalima, ang mga pahina ay may bilang na 6, 8, 10 ay makikita - iyon ay, tatlong pahina ng iyong blog na may isang hakbang (interval) na katumbas ng dalawa. Gayunpaman, hindi mo kailangang gamitin ang function na ito, ilagay lamang ang 0 sa field para sa bilang ng mga ipinapakitang malalayong numero.
Pagkatapos mong gawin ang lahat ng kinakailangang pagbabago sa mga setting ng display ng navigation bar, kailangan mong i-save ang mga ito. Upang gawin ito, i-click ang kaukulang pindutan sa ibaba ng panel ng mga setting.
Naturally, maaaring gusto mong baguhin ang karaniwang scheme ng kulay ng navigation bar o ang font nito at iba pang panlabas na katangian sa mga mas angkop para sa istilo ng disenyo ng iyong blog. Upang magawa ito, kakailanganin mong isulat ang mga kinakailangang katangian ng CSS sa cascading style sheet file.
Gayunpaman, maaari kang magdagdag ng mga karagdagang katangian nang direkta sa CSS file ng kasalukuyang tema ng WordPress ( wp-content/themes/current theme/style.css), at hindi sa kaukulang file ng plugin, na matatagpuan sa: .
Ang isa pang paraan upang baguhin ang hitsura ng aming page navigation bar na nakalagay sa mga pahina ng blog kapag ginagamit ang WP-PageNavi plugin ay ang pagbabago ng styling file ng plugin mismo. Ang file na ito ay matatagpuan sa folder /wp-content/plugins/wp-pagenavi/pagenavi-css.css.
Lamang sa sumusunod na paraan: Pabalik - Pasulong o paggamit ng mga ganoong link Nakaraang - Mga Bagong Post, pagkatapos ay mayroon kang pamantayan, hindi maginhawang nabigasyon. Kung mayroon kang isang daan o higit pang mga mensahe, ito ay kumakatawan sa isang malaking abala para sa bisita. Kailangan mong baguhin ito sa isang bagay na mas maginhawa pag-navigate sa pahina, nang sa gayon ay maginhawa para sa gumagamit na lumipat nang arbitraryo, iyon ay, maaari pa nga siyang makarating sa mga huling pahina ng iyong site.
moderno, magandang page navigation para sa blog WordPress organisado sa tulong sikat na plugin na WP-PageNavi. Sa opisyal na website na wordpress.org ang modyul na ito ay nasa ikaapat na ranggo sa mga tuntunin ng mga pag-download. Sa oras ng pagsulat ng post na ito, ito ay nai-download na ng 4,065,194 na beses. Makikita mo kung paano gumagana ang maginhawang page navigation sa aking blog. Kung handa ka na para dito sa iyong web resource, magsimula tayo.
WordPress Blog Page Navigation
Tulad ng nakikita mo mula sa screenshot, maaari mong palitan ang teksto ng iyong sarili o iwanan ang lahat ng kung ano. Suriin ang -Gumamit ng estilo ng pagenavi-css.css o hindi. Kung kailangan mong i-customize ang CSS style ng WP-PageNavi, magagawa mo ito sa plugin file. Upang gawin ito, pumunta sa seksyong "Mga Plugin" - "Editor", piliin ang WP-PageNavi bilang plugin upang baguhin at hanapin ang file na wp-pagenavi/pagenavi-css.css sa listahan na bubukas. Ang lahat ay malinaw mula sa mga setting. Ang susunod na hakbang ay ito.
Sa index.php, archive.php, at search.php na file ng iyong tema, kailangan mong hanapin ang mga tawag sa next_posts_link() at previous_posts_link() at palitan ang mga ito. Sa TwentyTen theme, ganito ang hitsura:
Maaaring ganito ang hitsura nito sa ibang mga tema:
Maghanap ng katulad at kailangan mong palitan ang mga linyang ito ng ganito:
Lahat. handa na. Ngayon ay gagana ang plugin. Kung ang istilo ng pag-navigate ay hindi nababagay sa iyong disenyo ng blog at gusto mong bigyan ito ng isang espesyal na hitsura, pagkatapos ay kailangan mong basahin pa ang artikulo.
Oo, tama ka, upang magamit ang mga handa na istilo para sa pag-navigate sa pahina na WP-PageNavi, kailangan mong i-install ang karagdagang WP PageNavi Style plugin mula sa parehong developer. I-install ang module na ito sa parehong paraan, i-activate ito at magkakaroon ka ng item na WP PageNavi Style sa gilid na column ng admin panel. I-click ito upang i-configure at pumili ng istilo para sa iyong bagong nabigasyon:
Pag-set up ng WP PageNavi Style plugin
Tulad ng nakikita mo mula sa screenshot, maaari kang pumili ng iba't ibang magagandang panel at ang kanilang lokasyon. Set ng mga istilo ng plugin:
Set ng mga estilo ng plugin WP PageNavi Style Plugin
Napakagandang pagpipilian. Kung ayaw mong gumamit ng mga istilong handa na, i-install - I-customize at i-customize ang istilo sa iyong paraan:
Lahat. Isa pang bagay. Kung handa ka nang i-install nang manu-mano ang page navigation, iyon ay, nang walang plugin, pagkatapos ay basahin.
Ang code na ito ay napakakaraniwan na hindi mo alam kung aling blog ang ili-link. Kaya natin kung wala ito.
Buksan ang file na "Theme Functions" (functions.php), mag-scroll pababa sa page at bago ang pagsasara ng ?> tag, i-paste ang sumusunod na code (huwag kalimutang gumawa ng backup na kopya kung sakaling may magkamali:
Function navigation() ( 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"] = 3; //ilang link ang ipapakita sa kaliwa at kanan ng kasalukuyang $a["end_size"] = 5 ; //ilang link ang ipapakita sa simula at sa dulo $a["prev_text"] = ""Previous"; //link text "Nakaraang page" $a["next_text"] = "Next"; // link text "Next page" kung ($max > 1) echo "
Pagkatapos, binabago namin ang karaniwang output code sa lahat ng mga file kung saan mayroong nabigasyon - index.php, category.php, archive.php at iba pa. Baguhin sa halip:
Next_posts_link("" Ipasa"); previous_posts_link("Bumalik »");
Navig ( padding:15px 0 25px 0; overflow:hidden; font-size:13px; color:#000; clear:both;) .navig a(background: #fff; border: 1px solid #DDDDDD; color: #000000; laki ng font: 13px; padding:5px; text-decoration: wala;) .navig span.pages (padding: 3px 5px; background:#f1f8f9; border: 1px solid #C6D2D4;) .navig a:hover(background: # fff; border: 1px solid red; color: red; font-size: 13px; text-decoration: none;) .navig span.pages (padding: 3px 5px; background:#f1f8f9; border: 1px solid #C6D2D4;) . navig span.current (background: #fff; border: 1px solid #111; font-size: 13px; padding:5px; text-decoration: none;) .navig span.extend (padding: 3px 5px; background:#f1f8f9; border: 1px solid #C6D2D4;).str(background: #fff; color: #000000; font-size: 13px; padding: 5px; text-decoration: none;)
handa na. Kung hindi mo masyadong naiintindihan kung paano mag-navigate nang manu-mano, mas mainam na gumamit ng isang plugin. At iyon lang para sa akin. See you.
(function(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId: "R-A -292864-4", renderTo: "yandex_rtb_R-A-292864-4", async: true )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); s .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); ))(this , this.document, "yandexContextAsyncCallbacks");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!
Upang magdagdag ng page navigation sa isang WordPress site, o sa halip, para baguhin ang standard navigation sa mga ordinal page navigation button, ginagamit namin ang WP-pagenavi plugin at 5 pang plugin na sinubukan sa 4.9.5.
Ang pagdaragdag ng page navigation sa site ng anumang system ay may parehong mga pakinabang (kaginhawahan para sa bisita) at mga disadvantages (lumalabas ang mga page na may paulit-ulit na mga heading sa mga title tag). Upang magdagdag ng page navigation sa isang WordPress site, o sa halip, para baguhin ang standard navigation (nakaraang page - next page) sa mga ordinal page navigation button, ginagamit namin ang WP-pagenavi plugin.
Upang magsimula, mapapansin ko na ang pagtawag sa mga function ng WP na responsable para sa pagpapakita ng nabigasyon ng site ay nasa mga gumaganang template file. Samakatuwid, kung nag-install ka ng gumaganang tema maliban sa karaniwang tema, maaaring ang may-akda ng tema ay naisama na ang page navigation sa mga theme file at mayroon ka na nito. Kung hindi, ang karaniwang pag-navigate sa site ay mga inskripsiyon tulad ng: “Nakaraang page” at “Next page” sa ibaba ng page.
Mga function na naglalabas ng karaniwang nabigasyon: next_posts_link at previous_posts_link . Tandaan natin sila, magiging kapaki-pakinabang sila sa atin.
Para baguhin ang page navigation sa blog at magdagdag ng mga button para sa selective paging, ginagamit namin ang WP-pagenavi plugin. Pahina ng plugin: https://wordpress.org/plugins/wp-pagenavi/installation/
Mayroong tatlong karaniwang paraan:
Ngunit ang pag-activate ng plugin ay hindi sapat; kailangan mong magtrabaho kasama ang gumaganang code ng tema.
Tandaan: Kapag nagsimula kang gumawa ng mga pagbabago sa iyong mga file ng tema ng trabaho, kumuha ng backup ng iyong site at database nito. Kung may mali, maaari kang bumalik sa isang backup na kopya.
Ang gawain para sa pag-activate ng wp-pagenavi ay ang mga sumusunod. Kailangan mong hanapin ang next_posts_link at previous_posts_link function sa gumaganang theme file at palitan ang mga linya ng mga ito ng:
Kadalasan, ang next_posts_link at previous_posts_link function ay makikita sa mga theme file: index, archive, functions. Magagawa mo ito sa Editor mula sa blog console.
Magdagdag ng pagination navigation sa iyong WordPress site
Kung ang paghahanap mula sa console ay hindi nagdudulot ng mabilis na resulta, at hindi mo lang nakikita ang mga function na ito, gawin ang sumusunod:
Pagkatapos ng pagpapalit, i-upload ang na-edit na file pabalik sa direktoryo ng site at tingnan ang hitsura ng mga pindutan ng nabigasyon ng pahina sa site.
Upang i-edit, i-download ang file sa iyong computer at i-edit ito sa isang text editor. Kasabay nito, panatilihing buo ang orihinal na source file bilang backup.
