Sa nakaraan, ipinakita namin sa iyo kung paano magdagdag ng gallery sa WordPress gamit ang isang lightbox effect. Ang artikulo na iyon ay sumasaklaw lamang sa ibabaw ng pag-andar ng WordPress. Kamakailan lamang, nagkaroon kami ng isang kliyente na nais naming lumikha ng isang gallery ng larawan na nakaayos ayon sa buwanang mga album. Nais nilang magawang mag-click ang user sa larawan ng album upang makita ang lahat ng mga post na nakalista sa album na iyon ng buwan. Ang bawat larawan ay dapat magkaroon ng sariling indibidwal na pahina na may impormasyon tungkol sa photographer at kanilang URL. Karaniwan ang mga tao ay magsisilbing mga plugin tulad ng NextGen Gallery o iba pa upang magawa ang ganito. Nais naming maiwasan ang paggamit ng third party plugin kaya nagpasya kaming gamitin ang core-functionality na nag-aalok ng WordPress upang lumikha ng isang bagay na gumagana. Sa artikulong ito, ipapakita namin sa iyo kung paano lumikha ng buwanang photo album gallery sa WordPress nang walang plugin.
Tandaan: Ito ay isang medyo advanced na tutorial na nagdudulot ng maraming mga konsepto ng WordPress magkasama. Dapat kang magkaroon ng isang makatarungang kaalaman sa WordPress at HTML / CSS upang sundin ito.
Update: Nagsulat kami ng isang bagong tutorial na gumagamit ng isang plugin na aming binuo, Envira Gallery, kaya napakabilis at madaling gamitin. Kung ikaw ay isang baguhan o simpleng ayaw mong harapin ang code tingnan ang tutorial na ito.
Ano ang sinusubukan naming gawin:
Bago tayo magsimula, hayaan nating tingnan kung ano ang ipalagay na ang huling resulta ay tulad ng:
Kapag nag-click ang gumagamit sa pahina ng Mga Album, makikita nila ang isang archive sa isang display grid kung saan ang bawat album ay nagsisimula sa ito ay nakakikilala na takip at lahat ng mga larawan sa loob nito. Ang ideya ay magkaroon ng isang album bawat buwan.
Kung nag-click ang gumagamit sa larawan ng cover ng album, dadalhin sila sa isang pahina para lamang sa album na iyon kung saan maaari mong ibigay ang gumagamit ng ilang impormasyon sa background pati na rin ang listahan ng lahat ng mga larawan sa album na iyon.
Kung ang gumagamit ay nag-click sa larawan, pagkatapos ay dadalhin sila sa iisang pahina ng larawan kung saan makikita nila ang Pamagat ng Larawan. Pangalan ng photographer at URL ng kanilang site.
Paano natin ito gagawin?
Tulad ng makikita mo mula sa paglalarawan sa itaas, ang lahat ng mga tampok na kinakailangan ay maaaring gawin gamit ang built-in WordPress functionality. Maaari naming tratuhin ang bawat buwanang album bilang isang post, kaya ang bawat album ay maaaring magkaroon ng sariling solong pahina na may ilang impormasyon sa background atbp Ang bawat imahe ay itinuturing bilang isang attachment (kaya nakakakuha ito ng sariling solong pahina). Gagamitin namin ang built-in na mga thumbnail na itinatampok para sa larawan ng cover ng album. Maaari mong gamitin ang mga default na post, kung ang layunin ng buong site ay ang gallery ng album ng larawan na ito, ngunit kung mayroon ka ring blog, dapat na gawin ito sa isang pasadyang uri ng post.
Hinahayaan naming lumikha ng Gallery ng Album ng Larawan
Ang unang bagay na dapat mong gawin ay lumikha ng isang site-specific na plugin (o kahit isang plugin na partikular sa proyekto).
Kung gagamitin mo ang Mga Uri ng Pasadyang Post para sa iyong proyekto, dapat mong buuin ang mga code at i-paste ito sa iyong site-specific na plugin. Maaari mo ring panoorin ang aming video kung paano lumikha ng Mga Uri ng Custom na Post.
Ang susunod na bagay na kailangan mong gawin ay magparehistro ng mga karagdagang laki ng imahe sa WordPress para sa display ng grid.
Halimbawa ay magiging:
add_image_size ('album-grid', 225, 150, true);
Pagkatapos ng karagdagang laki ng imahe, hinahayaan kang magdagdag ng ilang karagdagang mga patlang sa Uploader ng Media. Papayagan ka nito na magdagdag ng Pangalan ng Litratista at kanilang URL kapag nag-upload ka ng bawat larawan. Ito ang dahilan kung bakit isinulat namin ang isang artikulo tungkol dito dalawang araw na ang nakakaraan.
Paano magdagdag ng karagdagang mga patlang sa WordPress Media Uploader
Kapag nagawa mo na ito, hinahayaan ang sige at magdagdag ng ilang mga album (post). Mag-upload ng lahat ng mga larawan na nais mong ilakip sa album na iyon. Pagkatapos ay i-attach ang isang natatanging larawan ng pabalat at itakda ito bilang isang itinatampok na imahe. Maaari mong idagdag ang impormasyon sa background sa lugar ng nilalaman ng post.
Ngayon na mayroon kang ilang mga album sa backend, hinahayaan ilagay ang code upang maipakita ito.
Sabihin nating ang iyong pasadyang uri ng post ay tinatawag na mga album. Kaya ikaw ay lumikha ng isang file na tinatawag na template archive-albumss.php . Ilagay ang mga header ng code, ang mga footer code, sidebar at iba pang mga elemento ng disenyo na gusto mo. Lumikha ng loop ng post. Sa loob ng post na loop na ito, ipapakita namin ang lahat ng mga attachment mula sa isang post maliban sa thumbnail na mag-link sa iisang pahina ng imahe. Tatamasahin din namin ang itinatampok na thumbnail ng post na itinatampok (larawan sa pabalat ng album) at i-link iyon sa iisang pahina ng post (pahina ng album).
Nagpasya kaming mag-estilo ng mga larawan ng grid gamit ang elemento ng listahan. Mukhang ganito ang code:
post_type == ‘albums’ && $ post-> post_status == ‘publish’) {
$ attachment = get_posts (array (
‘Post_type’ => ‘attachment’,
‘Posts_per_page’ => -1,
‘Post_parent’ => $ post-> ID,
‘Ibukod’ => get_post_thumbnail_id ()
));
kung ($ mga attachment) {
foreach ($ attachment bilang $ attachment) {
$ class = “post-attachment mime-“. sanitize_title ($ attachment-> post_mime_type);
$ title = wp_get_attachment_link ($ attachment-> ID, ‘album-grid’, totoo);
echo ‘
‘;
}
}
}
?>
Pinagmulan: Paano Kumuha ng Lahat ng Mga Attachment maliban para sa Itinatampok na Larawan
Ang pangunahing estilo ng CSS na talagang kailangang mag-alala ay ang klase .album-grid
.album-grid {width: 225px; taas: 150px; lumutang pakaliwa; estilo ng listahan: none; list-style-type: none; margin: 0 18px 30px 0px;}
Ito ay magpapahintulot sa bawat imahe na mailagay nang naaangkop sa grid, at makuha namin ang estilo kung paano namin ito nais.
Ang susunod na bagay na kailangan mong gawin ay lumikha ng isang solong-kalakip na template. Ito ang magiging pahina kung saan dadalhin ang user sa, kaya maaari nilang tingnan ang bawat indibidwal na imahe. Makikita nila ang pamagat ng larawan, pangalan ng photographer at photographer URL dito. Maaari mong sundin ang aming tutorial sa Paano Gumawa ng isang Pasadyang Single Attachment Template sa WordPress.
Huwag mag-atubiling estilo ang nag-iisang template gayunpaman gusto mo.
Ngayon ang tanging bagay na naiwan sa listahan ay upang lumikha ng isang indibidwal na pahina ng mga album. Muli na ipagpalagay na ang iyong pasadyang uri ng post ay tinatawag na mga album, kakailanganin mong lumikha ng isang single-albums.php file. Kopyahin ang lahat ng header, footer, sidebar, o anumang iba pang mga elemento ng disenyo na gusto mo.
Sa loop elemento talaga gawin ang parehong bagay na ginawa namin sa template ng archive-album. Bago mo idagdag ang itinatampok na larawan at ang mga parilya ng attachment bagaman, kailangan mong idagdag ang pamagat at paglalarawan ng album. Na maaaring gawin sa pamamagitan lamang ng pagdaragdag ng code tulad nito:
/ / Ilagay ang grid code sa ibaba ng linyang ito
Kaya, tapos na kami. Lumikha kami ng buwanang gallery ng album ng album sa WordPress nang hindi gumagamit ng anumang plugin. Ipaalam sa amin kung mayroon kang anumang mga katanungan.