Jak stworzyć prostą wtyczkę FAQ dla WordPressa

Aktualizacja: 20 / Artykuł: Rochester Oliveira

Widzieliśmy już wiele wskazówki dotyczące blogowania i narzędzia. Cóż, dzisiaj dowiemy się, jak stworzyć dobre narzędzie dla swojego bloga - wtyczkę do strony FAQ. Ale najważniejsza jest nie tylko sama wtyczka, ale to, co możesz zrobić z tą zasadą. Dowiesz się, jak przechowywać dowolne typy danych w witrynie WP i jak zintegrować je z zewnętrznymi bibliotekami (takimi jak interfejs użytkownika jQuery), tworząc niestandardowe komponenty dla swojej witryny. Zacznijmy!

Pomysł, wersja demo i pobieranie

próbny

Naszym celem jest stworzenie wtyczki, która może być używana do wielu rzeczy, ale pasuje całkiem dobrze do stron FAQ.

Ale oprócz tego naszym głównym osiągnięciem będzie zrozumienie WordPress niestandardowe typy postów, krótkie kody, interakcje z zewnętrzną wtyczką JS / jQuery. Dzięki temu pomysłowi możesz stworzyć wiele rzeczy opartych na innych szalonych wtyczkach, które możesz tam znaleźć, to tylko punkt wyjścia dla ciebie, drogi Padawan.

So tutaj można znaleźć demo interfejsu API jQuery dla komponentu, którego będziemy używać - ale naprawdę fajną rzeczą jest kod używany do generowania tego komponentu (PHP).

Nagrzewanie - plik wtyczek i niestandardowy typ wpisu

Przede wszystkim musimy stworzyć niestandardowy typ postu do przechowywania naszych danych.

Niestandardowe typy postów to duża część magii WP, pozwala ona tworzyć nowy typ danych (rodzaj postów, stron, załączników ...), dzięki czemu można je wywoływać i manipulować za pomocą funkcji WP. Może to wydawać się proste dla początkujących, ale tylko dawni programiści PHP (czy to wciąż coś?) Wiedzą, jak trudno było po prostu połączyć i przechowywać dane w bazie danych. Nie mówiąc już o dynamicznym tworzeniu nowych typów danych, jest to subtelne, ale pozwala na dużą elastyczność w naszym kodzie.

Abyśmy mogli to zrobić, potrzebujemy wtyczki, ale prawdopodobnie już znasz tę koncepcję. Wtyczki są jak bloki Lego do WordPressa, dodają lub przekształcają bieżącą funkcjonalność za pomocą kodu, który można łatwo podłączyć (duh!) Lub też odłączyć, jeśli chcesz.

Aby utworzyć wtyczkę w sposób rozpoznawany przez WP, potrzebujesz rzeczy 2:

  1. Utwórz plik wewnątrz swojej wp-content / plugins /
  2. Dodaj metadane na początku tego pliku, aby WP mógł zrozumieć, o co w tym chodzi

Należy pamiętać, że nazwa pliku musi być unikalna, więc jeśli ktoś zainstaluje wtyczkę (nawet siebie), nie będzie żadnych konfliktów z obecnymi wtyczkami. W naszym przypadku dla lepszej organizacji dodamy nowy folder o nazwie faq-whsr, a wewnątrz niego plik o nazwie faq-whsr.php.

Teraz dla metady, po prostu dodaj coś takiego na początku pliku wtyczek (zaraz po

meta_01

Co znaczy:

  • Nazwa wtyczki: Ładna nazwa, która będzie wyświetlana w interfejsie wp-admin> wtyczki
  • Identyfikator URI wtyczki: jeśli chcesz dodać link do strony wtyczki (dokumenty, przykłady, strona sprzedaży)
  • Opis: To jest mały akapit pokazany w interfejsie wtyczek wp-admin>. Zachowaj prostotę, aby użytkownicy pamiętali, do czego służy
  • Author / Author URI: Osoba / firma, która utworzyła wtyczkę i link do kredytów
  • Licencja: aby użytkownicy wiedzieli, co mogą / nie mogą zrobić z Twoją wtyczką

Ok, teraz mamy już utworzoną wtyczkę i dodaliśmy kilka odpowiednich metadanych. Jak tylko zapiszesz plik wtyczki, powinieneś być w stanie zobaczyć go w interfejsie wp-admin

Aktywujmy go i zobaczmy, co się stanie.

Zaczekaj, nic? Cóż, to dobrze, jeśli coś było nie tak, zobaczysz błąd. Przejdźmy teraz do naszego niestandardowego tworzenia postów.

W naszym przypadku CPT jest pozycją FAQ, ale możesz tworzyć książki, filmy, referencje itd. Należy pamiętać o następujących kwestiach: nazwy funkcji powinny być unikalne. Powtarzaj teraz ze mną: nazwy funkcji powinny być unikalne, nazwy funkcji powinny być unikalne. Rozumiem? Dobrze, że zaoszczędzisz sobie wiele kłopotów, dopóki nie będziemy mogli użyć OOP (może w następnym samouczku).

Magia polega na tym kodzie:

CPT

I to właśnie oznaczają odpowiednie części:

  • $ labels - to tablica z etykietami i tekstem dla różnych sekcji twojego obszaru wp-admin. Dzięki temu WP będzie wiedział, jak prawidłowo dzwonić do naszych produktów
  • obsługuje - ten mówi, co możesz zobaczyć w wp-admin> FAQ> nowy ekran. W naszym przypadku będziemy mieć tytuł, redaktora (główne pole treści), autora, poprawki i pola niestandardowe (na wypadek, gdybyś je chciał).
  • taksonomie - tutaj informujesz WP, które taksonomie są dozwolone (kategorie, tagi lub taksonomie niestandardowe)
  • register_post_type ('faq_whsr', $ args) - to informuje WP „Hej, utwórz nowy niestandardowy typ posta z identyfikatorem faq_whsr, używając argumentów z $ args”.

Zapisz go i wstrzymaj oddech. Powinieneś zobaczyć teraz nową sekcję w głównym menu wp-admin

Zaczekaj, to jest? Tak. Ten fragment tworzy całą funkcjonalność CPT. Jeśli nie znajdziesz tego fajnego, poczekaj, aż w następnej sekcji zrobi się chłodniej.

Zanim opuścimy wp-admin, dodajmy trochę fikcyjnych danych (kilka pytań z co najmniej kategoriami 2).

Front-End - interakcja WP x jQuery

Teraz nadszedł czas, aby zobaczyć jakąś akcję i skorzystamy z niej Element jQuery UI Accordion dla tego.

Interfejs jQuery ma niemal takie same zalety jak jQuery:

  • Wielu programistów pracuje nad tym
  • Kod z obsługą wielu przeglądarek i urządzeń mobilnych
  • Dobrze udokumentowane
  • Odtwarza ładnie z WP (sam WP używa ich)

Pytanie brzmi teraz: jak to nazywamy?

Istnieją podejścia 2 do tego:

  1. Zły czysty / tags in your wp_head
  2. Miło wp_enqueue

Nie stracimy dzisiaj zbyt wiele czasu przy niewłaściwym podejściu, ale ten dobry w zasadzie mówi WP "Hej kolego, będziemy potrzebować jQuery UI w pewnym momencie naszego kodu, proszę zawrzyj go na stronie". W ten sposób WP może sprawdzić, czy ktokolwiek już go zawarł, czy też zawierał inną wersję i uniknąć kłopotów z duplikatami bibliotek. Ok, jak przetłumaczyć ten miły czat na kod?

Korzystanie z funkcji kolejkowania:

enqueue_02

The Shortcode

A teraz wracamy do wp-admin. Mamy często zadawane pytania i mamy bibliotekę, która pozwala stylizować przedmioty według naszych potrzeb, czego jeszcze brakuje? Cóż, musimy wezwać przedmioty!

Mamy na to wiele opcji, ale najłatwiej jest w tym przypadku utworzyć shortcode. Shortcode to coś, co dodajesz w polu treści (dla stron, postów, CPT ...), a WP będzie szukało funkcji, która zostanie na nim uruchomiona. Istnieją rodzaje skrótów 2:

  1. [samozamykające] - jak tagi lub ten rodzaj skrótu po prostu wywołuje w pewnym momencie funkcję - to jest nasz facet
  2. [opakowane] Treść [/ opakowane] - to jest jak tagi lub i faktycznie może przekształcić jego zawartość lub użyć treści jako argumentów.

Zobaczmy, jak to działa. Utwórz nową stronę w swoim wp-admin i dodaj ten kod tam:

[faq-whsr]

Zapisz i odwiedź tę stronę i zobacz, co się stanie ...

Żartujesz, to nic nie da, prawda? Cóż, to dlatego, że jeszcze nie stworzyliśmy dla niego funkcji.

Dodaj to w swoim pliku wtyczki:

shortcode_02

Teraz odśwież stronę i obiecuję, że stanie się coś naprawdę fajnego.

Fajne hę? Teraz możesz zobaczyć, że działa, a niebo jest teraz dla ciebie granicą. To, co ten kod robi, to po prostu powiedzieć WP, że istnieje shortcode, który nazywa się [faq-whsr] i jeśli WP go znajdzie, WP powinien uruchomić funkcję w tym punkcie strony.

W naszym przypadku będziemy musieli osiągnąć tę strukturę, aby panel jQuery UI został utworzony:

api_02

I do tego stworzymy a Zapytanie WP, załaduj nasze FAQ i ich zawartość. Zastąp funkcję shortcode tym:

shortcode-basic_02

Ok, teraz twoje elementy FAQ zostaną nazwane. To, co zrobiliśmy, to wywołanie wp_query w celu wywołania naszego niestandardowego typu postu, a następnie przekazanie go do zwrotu skrótu, aby WP wyświetlił wszystkie zgodnie z pożądaną strukturą.

Jest dobrze, ale czegoś brakuje, prawda? Co z niektórymi opcjami? Cóż, możemy dodać opcje dla shortcode, zobaczmy, jak utworzyć kilka argumentów WP_Query w naszym shortcode:

shortcode-final_02

W ten sposób możesz wywoływać elementy używając następujących argumentów (możesz łączyć dowolną liczbę):

  • cat - identyfikator kategorii (wielokrotność dodana jako tablica) [faq-whsr cat = 1]
  • nazwa_kategorii - nazwa kategorii [faq-whsr category_name = "jedzenie"]
  • zamówienie - ASC lub DESC (domyślnie DESC) [faq-whsr order = ”ASC”]
  • orderby - zmień kryteria zamawiania przedmiotów [faq-whsr orderby = ”title”]
  • posts_per_page - zmień liczbę załadowanych pozycji [faq-whsr posts_per_page = 5]

Ale jak powiedziałem, niebo jest granicą dla ciebie, przyjacielu. Oto kilka opcji dla WP_Query, które możesz zaimplementować i użyć:

  • Autor
  • Kategoria (dodawanie opcji exclude z not_in)
  • Szukaj (fajnie, jeśli chcesz dać użytkownikom możliwość przeszukiwania ich)
  • Pole niestandardowe (ponieważ elementy FAQ mają je, możesz ich używać do ładowania elementów z określonymi niestandardowymi polami i wartościami)

Teraz twoja kolej

To jest tylko punkt wyjścia dla ciebie, jak widzisz. Wszyscy możemy nauczyć się wielu innych fajnych rzeczy, aby ulepszyć tę prostą wtyczkę, oto kilka sugestii, abyś mógł głębiej zagłębić się w:

  • Elastyczny projekt
  • Tworzenie widgetów
  • Wtyczka aktywuje / dezaktywuje haki
  • Umiędzynarodowienie
  • OOP
  • Kolejkowanie tylko w razie potrzeby (dla niektórych stron)

Nie zapomnij zostawić swoich myśli w komentarzach! A oto nasze wyzwanie dla Ciebie: czy możesz zastosować opcję „domyślny element” dla shortcode (więc po załadowaniu strony kolejny element będzie otwarty, a nie pierwszy)? Jak byś to zrobił?

O Rochester Oliveira

Jestem web designer i przedsiębiorca z Itajubá (MG), Brasil. Uwielbiam pisać o niejasnych tematach i robić fajne rzeczy.