W artykule:
Niedawno jeden z naszych użytkowników zapytał nas, czy istnieje sposób, aby dodać Akordeon FAQ na swojej stronie WordPress. Dostępnych jest wiele wtyczek, które pozwalają dodać sekcję Często zadawane pytania lub Często zadawane pytania w WordPress. W tym artykule pokażemy Ci, jak dodać Akordeon FAQ jQuery w swojej witrynie WordPress.
Co To jest Akordeon?
W projektowaniu stron internetowych Akordeon to termin używany dla wzorca interfejsu użytkownika, który ma karty lub bloki treści, które zwijają się lub rozszerzają podczas interakcji z użytkownikiem. Każda karta ma zawartość pod nimi, która rozszerza się, gdy użytkownik kliknie na pozycję menu. W prostych słowach, to jest jak menu, które rozszerza się po kliknięciu na niego. Zastosowaliśmy podobny efekt na naszej darmowej stronie konfiguracji bloga WordPress. Poniżej zrzut ekranu przykładowego akordeonu.
Video Tutorial
Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, Kontynuuj czytanie.
Dodawanie akordeonu jQuery FAQ
Zanim będziesz mógł dodać Akordeon FAQ jQuery, musisz upewnić się, że masz sekcję FAQ. Zacznij od dodania sekcji FAQ, postępując zgodnie z naszym samouczkiem, jak dodać sekcję FAQ w WordPress.
Teraz przejdźmy do przodu z dodaniem akordeonu jQuery FAQ. WordPress jest dostarczany z biblioteką jQuery, jednak nie ma motywów jquery. Załadujemy to z Google CDN i ustawimy te skrypty w WordPress. Stworzymy również krótki kod, który wyświetli nasze Często zadawane pytania. Co najważniejsze, zrobimy to wszystko, tworząc wtyczkę WordPress.
Utwórz folder na pulpicie i nazwij go my-accordion. Otwórz Notatnik lub dowolny inny edytor tekstu do wyboru. Utwórz plik o nazwie mój-Akordeon.php i wklej ten kod do środka:
<?php
/**
Nazwa wtyczki: Akordeon WPBeginner ' s FAQ
Opis: Akordeon zasilany jQuery dla Najczęściej Zadawanych Pytań oparty na samouczku autorstwa WPBeginner
Wersja: 1.0
Autor: WPBeginner
Autor URI: https://www.wpbeginner.com
Licencja: GPL2
*/
function accordion_shortcode () {
// Rejestracja skryptów i stylów
wp_register_style ('wpb-jquery-ui-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.css', false, null);
wp_enqueue_style ('wpb-jquery-ui-style');
wp_register_script ('wpb-custom-js', plugins_url ('/Akordeon.js', __FILE__), array ('jquery-ui-Akordeon'),", true);
wp_enqueue_script ('wpb-custom-js');
// Uzyskiwanie najczęściej zadawanych pytań z WordPress FAQ Manager wtyczki niestandardowe pytania typu post
$posts = get_posts (array(
'posts_per_page' = > 10,
'orderby' = > 'menu_order',
'order' = > 'ASC',
'post_type' = > 'pytanie',
));
// Generowanie Wyników
$ faq .= '<div id = "Akordeon">'; / / Otwórz kontener
foreach ($posts as $post) {//Generuj znaczniki dla każdego pytania
$ faq .= sprintf (('<H3 > <a href= "" >%1$s</a > < / h3> < div > %2$s< / div>'),
$post - > post_title,
wpautop ($post->post_content)
);
}
$ faq .= '</div>'; //Zamknij kontener
return $faq; / / Return the HTML.
}
add_shortcode ('faq_accordion', 'accordion_shortcode');
Po zapisaniu zmian w tym pliku Otwórz nowy pusty plik. Zapisz jako Akordeon.js. Następnie wklej ten kod do środka i zapisz plik:
jQuery (dokument).ready (function () {
jQuery ("#Akordeon").Akordeon ();
})();
Teraz mamy nasz plugin gotowy do przesłania. Otwórz klienta FTP i prześlij folder my-accordion do katalogu / wp-contnt / plugins / w Twojej witrynie WordPress. Następnie musisz aktywować wtyczkę, przechodząc do ekranu wtyczki w obszarze administracyjnym WordPress.
Dodawanie strony FAQ z akordeonem
Aby wyświetlić te często zadawane pytania w formacie akordeonu, musisz utworzyć nową stronę. Przejdź do Strony ” Dodaj Nowy. Nadaj swojej stronie tytuł, np. FAQ i w obszarze edycji strony wpisz ten krótki kod:
[faq_accordion]
Zapisz i opublikuj swoją stronę oraz wyświetl jej podgląd. Zobaczysz swoje FAQ wyświetlane w ładnym menu akordeonu.
Zmiana stylu i kolorów akordeonu
W przypadku kolorów i stylizacji Akordeon FAQ wykorzystuje motywy jQuery UI hostowane w Google. Jest to w zasadzie arkusz stylów, a jeśli wolisz, możesz pobrać i umieścić go na własnej stronie internetowej. strona jQuery ma sekcję motywów jQuery UI z kilkoma gotowymi do użycia motywami. Jak widać, użyliśmy motywu ludzkości w naszej wtyczce. Możesz go zastąpić dowolnym z dostępnych motywów, takich jak gładkość, cupertino itp. Możesz również tworzyć lub modyfikować te motywy na Themeroller.
Mamy nadzieję, że ten artykuł pomógł Ci dodać Akordeon jQuery FAQ na swojej stronie WordPress. Aby uzyskać opinie i pytania, zostaw komentarz poniżej.
