Kamakailan lamang ang isa sa aming mga gumagamit ay nagtanong sa amin kung may isang paraan para sa kanila na magdagdag ng isang accordion ng FAQ sa kanilang WordPress site. Maraming mga plugin na magagamit na nagbibigay-daan sa iyo upang magdagdag ng isang madalas na itanong o seksyon FAQ sa WordPress. Sa artikulong ito ipapakita namin sa iyo kung paano magdagdag ng isang accordion ng jQuery FAQ sa iyong WordPress site.
Ano ang Kordyon?
Sa web design, ang accordion ay isang terminong ginamit para sa isang pattern ng disenyo ng user interface na may mga tab o mga bloke ng nilalaman na bumagsak o lumawak sa pakikipag-ugnayan ng user. Ang bawat tab ay may nilalaman sa ibaba ng mga ito na nagpapalawak kapag nag-click ang gumagamit sa item ng menu. Sa madaling salita, ito ay tulad ng isang menu na lumalawak kapag nag-click ka dito. Gumagamit kami ng katulad na epekto sa aming libreng pahina ng pag-setup ng WordPress blog. Nasa ibaba ang isang screenshot ng isang sample na akurdyon.
Pagdagdag ng isang jQuery FAQ Accordion
Bago ka makapagdagdag ng isang accordion ng jQuery FAQ, kailangan mong tiyakin na mayroon kang seksyon ng FAQ. Magsimula sa pagdaragdag ng isang seksyon ng FAQ sa pamamagitan ng pagsunod sa aming tutorial kung paano magdagdag ng seksyon ng FAQ sa WordPress.
Ngayon, magpatuloy tayo sa pagdaragdag ng accordion ng jQuery FAQ. Ang WordPress ay may jQuery library gayunpaman wala itong jquery themes. I-load namin iyon mula sa Google CDN at i-queue ang mga script na ito sa WordPress. Gumagawa rin kami ng isang shortcode na nagpapakita ng aming mga madalas na itanong. Karamihan sa lahat ay gagawin namin ang lahat ng iyon sa pamamagitan ng paglikha ng isang WordPress plugin.
Gumawa ng isang folder sa iyong desktop at pangalanan ito ng my-accordion. Buksan ang Notepad o anumang iba pang editor ng teksto na iyong pinili. Lumikha ng isang file na tinatawag my-accordion.php at i-paste ang code na ito sa loob nito:
10,
'Orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'tanong',
));
// Pagbuo ng Output
$ faq. = ''; // Buksan ang lalagyan
foreach ($ post bilang $ post) {/ / Bumuo ng markup para sa bawat Tanong
$ faq. = sprintf ((' % 1 $ s
% 2 $ s '),
$ post-> post_title,
wpautop ($ post-> post_content)
);
}
$ faq. = ''; / / Isara ang lalagyan
bumalik $ faq; // Bumalik sa HTML.
}
add_shortcode ('faq_accordion', 'accordion_shortcode');
Pagkatapos i-save ang iyong mga pagbabago sa file na iyon, buksan ang isang bagong blangkong file. I-save ito bilang accordion.js . Susunod na ilagay ang code na ito sa loob nito at i-save ang file:
jQuery (dokumento) .ready (function () {
jQuery ("# accordion"). accordion ();
}) ();
Ngayon ay handa na ang aming plugin upang mag-upload. Buksan ang iyong FTP Client at i-upload ang folder na my accordion sa / wp-contnt / plugins / direktoryo sa iyong website ng WordPress. Susunod, kailangan mong i-activate ang plugin sa pamamagitan ng pagpunta sa screen ng iyong plugin sa WordPress admin area.
Pagdagdag ng isang pahina ng FAQ na may Kordyon
Upang maipakita ang mga FAQ na ito sa isang format ng akurdyon, kailangan mong lumikha ng isang bagong pahina. Pumunta sa Mga Pahina »Magdagdag ng Bago . Bigyan ang iyong pahina ng pamagat, hal. Ang mga FAQ at sa lugar ng pag-edit ng pahina ay ipasok ang shortcode na ito:
[faq_accordion]
I-save at I-publish ang iyong pahina, at i-preview ito. Makikita mo ang iyong mga FAQ na ipinapakita sa isang magandang menu ng akurdyon.
Pagbabago ng Estilo at Mga Kulay ng Iyong Kordyon
Para sa mga kulay at estilo ang FAQ na ito Ang Accordion ay gumagamit ng mga tema ng jQuery UI na naka-host sa Google. Ito ay karaniwang isang style sheet, at kung gusto mo maaari mong i-download at ilagay ito sa iyong sariling website. Ang jQuery website ay may seksyon ng jQuery tema ng tema na may ilang handa na gamitin ang mga tema. Tulad ng makikita mo na ginamit namin ang tema ng sangkatauhan sa aming plugin. Maaari mong palitan ito sa alinman sa mga magagamit na mga tema tulad ng kinis, cupertino, atbp Maaari mo ring lumikha o baguhin ang mga tema sa Themeroller.
Umaasa kami na ang artikulong ito ay nakatulong sa iyo na magdagdag ng isang jQuery FAQ Accordion sa iyong WordPress website. Para sa feedback at mga katanungan mangyaring mag-iwan ng komento sa ibaba.