Jak stworzyć prostą wtyczkę FAQ dla WordPressa

Artykuł napisany przez:
  • WordPress
  • Zaktualizowano: Feb 09, 2017

Widzieliśmy już wiele wskazówki i narzędzia do blogowania. Cóż, dzisiaj dowiemy się, jak stworzyć dobre narzędzie dla swojego bloga - wtyczkę strony FAQ. Ale najważniejsze jest nie tylko sama wtyczka, ale także to, co możesz zrobić dzięki tej zasadzie. Dowiesz się, jak przechowywać dowolny typ danych w witrynie WP i jak zintegrować je z bibliotekami zewnętrznymi (takimi jak jQuery UI), 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ę fajnym rozwiązaniem jest kod używany do generowania tego komponentu (PHP).

Aha, i oczywiście możesz znaleźć pliki wtyczek do pobrania tutaj a także możesz zainstalować w swojej witrynie WP.

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 metada, po prostu dodaj coś takiego na początku pliku wtyczek (zaraz po <? Php):

meta_01

Co znaczy:

  • Nazwa wtyczki: Przyjemna nazwa, która pojawi się w interfejsie wp-admin> plugins
  • Identyfikator URI wtyczki: jeśli chcesz dodać link do strony wtyczki (dokumenty, przykłady, strona sprzedaży)
  • Opis: Ten jest małym akapitem w interfejsie wp-admin> plugins. Zachowaj prostotę, aby użytkownicy zapamię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ą

Utworzono wtyczkę 01

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 - tablica z etykietami i tekstem dla różnych sekcji obszaru wp-admin. Więc WP będzie znał właściwy sposób wywoływania 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ł, edytor (główne pole zawartości), autora, poprawki i pola niestandardowe (jeśli chcesz).
  • taksonomie - tutaj możesz powiedzieć WP, jakie taksonomie są dozwolone (kategorie, tagi lub niestandardowe taksonomie)
  • register_post_type ('faq_whsr', $ args) - to mówi WP "Hej, utwórz nowy niestandardowy typ postu z identyfikatorem jako faq_whsr, używając argumentów z $ args" .

admin-faq

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łe czyste znaczniki <script> / <style> w twojej 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. [self-enclosing] - jak tagi <hr /> lub <br /> tego rodzaju shortcode po prostu wywołuje funkcję w pewnym momencie - to nasz facet
  2. [wrapped] Content [/ wrapped] - Ten jest podobny do tagów <p> </ p> lub <div> </ div> 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 (wiele dodanych jako tablica) [faq-whsr cat = 1]
  • category_name - nazwa kategorii [faq-whsr category_name = "food"]
  • order - ASC lub DESC (domyślnie DESC) [faq-whsr order = "ASC"]
  • orderby - zmiana kryteriów zamawiania pozycji [faq-whsr orderby = "title"]
  • posts_per_page - zmiana liczby załadowanych przedmiotów [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ślnego elementu” dla krótkiego kodu (więc kiedy strona zostanie załadowana, otworzy się inny element, to 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.