Samouczek WordPress: Jak utworzyć wtyczkę Testimonials

Artykuł napisany przez:
  • WordPress
  • Zaktualizowano: Aug 12, 2013

Tak, oto nasz drugi cotygodniowy samouczek dotyczący WordPressa. Nauczyliśmy się, jak tworzyć nieskończona przewijana strona WP i wtyczka page-flip w przeszłości. Dzisiaj dowiemy się trochę więcej o niestandardowych typach postów i sposobach ładowania ich danych.

Ta funkcja jest bardzo ważna w Twojej witrynie, ponieważ pozwala pokazywać ludziom, którzy Cię polecają. Referencje są wspaniałym dowodem społecznym na twoją wspaniałość. A do tego nie potrzeba skomplikowanych wtyczek ani mnóstwa kodu, jak zobaczysz z kilkoma plikami, możesz stworzyć seksowną prezentację dla swoich referencji.

Zacznijmy więc!

Zip i instalacja

Jeśli spieszysz się, aby to sprawdzić, możesz pobieranie i zainstalować go.

Będziesz musiał dodać trochę danych, dodając kilka referencji za pomocą zupełnie nowych referencji, które możesz zobaczyć na swoim pulpicie nawigacyjnym:

listy-referencje

Następnie możesz użyć podstawowego skrótu, aby załadować to:

[referencje rand = 0 max = 5]

Po dodaniu tego kodu zobaczysz coś takiego na swojej stronie:

główne referencje

Teraz zobaczymy, jak stworzyć i zbadać to (dodając więcej funkcji i zmieniając wygląd).

Podstawy

Jak już powiedzieliśmy, musisz dodać metadane nagłówka, utwórz plik wtyczki i wywołaj swoje skrypty. Krótko mówiąc, utworzysz nowy folder pod swoją wp-content / plugins z nazwą wtyczki, a następnie utworzysz plik o tej samej nazwie, co folder, który będzie głównym plikiem wtyczki.

Po wykonaniu tej kopii i wklejeniu wykonaj następujące czynności:

<? php / * Nazwa wtyczki: Testimonials Opis: Wyświetl referencje klientów. Wersja: 1.0 Autor: Web Revenue Blog Licencja: GPL2 * / // skladanie skryptów i stylów function plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('flexslider', plugins_url ('js / jquery.flexslider-min.js', __FILE__), array ('jquery'), '2.2', false); wp_enqueue_script ('testimonials', plugins_url ('js / testimonials.js', __FILE__), array ('jquery'), '1.0', false); wp_enqueue_style ('flexsliderCSS', plugins_url ('css / flexslider.css', __FILE__), false, '2.2', 'all'); wp_enqueue_style ('testimonialsCSS', plugins_url ('css / testimonials.css', __FILE__), false, '1.0', 'all'); } add_action ("wp_enqueue_scripts", "plugin_scripts");

Oto, co robimy:

  • Mówiąc do WP, jakie jest nasze imię i nazwisko wtyczki, autor, co robi
  • Tworzenie funkcji, w której wstawiamy zwykłe skrypty (takie jak jQuery) i niestandardowe skrypty (np. Flexslider) oraz arkusze stylów
  • Mówienie do WP, aby załadować funkcję skryptów w domyślnym wywołaniu skryptów, tak aby faktycznie zostały załadowane na strony

To wszystko jest całkiem fajne, ale nie zapomnij o utworzeniu plików w / js i / css. Możesz po prostu pobrać je z naszej zawartości demonstracyjnej, więc nie musisz dużo kopać, aby znaleźć pliki Flexslider.

Teraz mamy wszystkie podstawowe rzeczy na miejscu, możemy zacząć zabawną część.

Niestandardowy typ wpisu

Domyślnie WordPress ma typowe typy postów, strony i posty 2. Ale ma też wiele wewnętrznych typów postów (takich jak załączniki), więc definicja "typu postu" to: Każdy typ danych, które należy przechowywać.

Ponieważ nasza wtyczka stworzy nową funkcjonalność, WP nie ma wbudowanego miejsca do przechowywania, więc musimy ją stworzyć. Nie bój się małego konika polnego, to całkiem proste, możesz użyć tego kodu:

// czarna magia do utworzenia funkcji typu postu create_post_type () {register_post_type ('referencje', // nowa tablica typów postów ('labels' => array ('name' => __ ('Testimonials'), 'singular_name' => __ ('Testimonial')), 'public' => true, / * Typ postu jest przeznaczony do użytku publicznego. Dotyczy to zarówno interfejsu użytkownika, jak i wp-admin. * / 'Supports' => array ('title ',' editor ',' thumbnail ',' custom_fields '),' hierarchical '=> false)); }

Tutaj właśnie używamy funkcji register_post_type (), aby powiedzieć WP "Hej, kolego, musimy przechowywać tego rodzaju dane, proszę być gotowym, aby je odebrać".

Mówimy mu również, że tego rodzaju dane nazywają się "referencjami", powinny być dostępne dla publicznego dostępu (tak, aby faktycznie tworzył dla niego nowy element menu w swoim panelu), pola, które są nam potrzebne i jeśli jest to hierarchiczny lub nie (jak strony, które mamy strony nadrzędne i podrzędne).

Następnie musimy wywoływać go za każdym razem, gdy ładujemy WordPress. Ten haczyk to zrobi:

add_action ('init', 'create_post_type');

Pola niestandardowe

Teraz nasz niestandardowy typ postu ma tytuł (imię i nazwisko), treść (referencje osoby), zdjęcie (polecany obraz), ale brakuje mu linku, ponieważ jeśli dana osoba jest na tyle dobra, aby rozmawiać o tobie, powinieneś przynajmniej podać link do ich strona, prawda?

Możemy to zrobić ze zwykłymi niestandardowymi polami, ale o wiele lepiej jest mieć „zamknięte” pole, w którym użytkownik nie musi wpisywać nazwy pola, a także gdzie można dodać kilka reguł sprawdzania poprawności.

Przede wszystkim musimy stworzyć nowy metabox, czyli te ładne panele, które masz w swoim obszarze edycji postów, każdy mały panel to metabox. Ta funkcja utworzy i wywoła:

// dodanie funkcji pola meta box adresu URL add_custom_metabox () {add_meta_box ("custom-metabox", __ ("Link"), "url_custom_metabox", "referencje", "strona", "niska"); } add_action ('admin_init', 'add_custom_metabox');

Funkcja add_meta_box () wymaga następujących parametrów:

  1. ID - Unikalny identyfikator dla tego. Możesz użyć czegoś unikalnego tutaj, jak "Jednorożca-jedzenie-tęcza" lub "referencje-link". Wszystko, co można wykorzystać wewnętrznie
  2. Tytuł - Co zostanie wyświetlone dla użytkownika? Tutaj ważne jest użycie funkcji __ (), jest to funkcja, która pozwala użytkownikom z języków obcych przetłumaczyć wtyczkę na pliki .po (bez edycji plików wtyczek)
  3. Callback - Funkcja, w której masz rzeczywistą zawartość metabox
  4. Typ postu - w naszym przypadku chcemy, aby był widoczny tylko dla referencji
  5. Kontekst - Miejsce na stronie, które chcesz wyświetlić
  6. Priorytet - jeśli powinien znajdować się przed innymi przedmiotami tej samej pozycji lub po nich

Teraz musimy utworzyć funkcję url_custom_metabox (), ponieważ ją nazwaliśmy.

// HTML dla funkcji obszaru administracyjnego url_custom_metabox () {global $ post; $ urllink = get_post_meta ($ post-> ID, 'urllink', true); // sprawdzanie poprawności! if (! preg_match ("/ http (s?): ///", $ urllink) && $ urllink! = "") {$ error = "Ten adres URL jest nieprawidłowy"; $ urllink = "http: //"; } // wyślij komunikat url i wpisz adres http: // do pola wejściowego if (isset ($ error)) {echo $ error; }?> <p> <label for = "siteurl"> URL: <br /> <input id = "siteurl" size = "37" name = "siteurl" wartość = "<? php if (isset ($ urllink) ) {echo $ urllink;}?> "/> </label> </p> <? php}

Ok, teraz tłumaczę to na zwykły angielski:

  • Zmienna globalna $ post jest wywoływana, dzięki czemu możemy dowiedzieć się, który jest POSTID bieżącego elementu
  • Załadujemy aktualną wartość adresu URL
  • Sprawdzamy, czy wartość wstawiona przez użytkownika jest poprawna. Jeśli występuje co najmniej jedno wystąpienie "http" lub "https", wartość jest OK, w przeciwnym razie jest poprawna i musimy użyć wartości domyślnej
  • Następnie pokazujemy błędy, jeśli są jakieś
  • Teraz zaczynamy rzeczywisty HTML, dodając domyślną wartość w polu wejściowym, tak jak mamy w PHP

Po tym momencie musimy faktycznie zapisać, co jest wysyłane przez użytkownika. Użyjemy haka "save_post", więc za każdym razem, gdy WordPress zapisuje post, wywoła tę funkcję:

// zapisuje niestandardową funkcję danych pola save_custom_url ($ post_id) {global $ post; if (isset ($ _ POST ['siteurl'])) {update_post_meta ($ post-> ID, 'urllink', $ _POST ['siteurl']); }} add_action ('save_post', 'save_custom_url');

Tutaj sprawdzamy tylko, czy są jakieś dane pocztowe o nazwie "link do podstrony", które jest naszą nazwą pola. Jeśli istnieje link do podstrony, zapiszmy go.

Gdy wszystko już będzie gotowe, oto jak będzie wyglądać twoja nowa strona z referencjami:

nowy-referencje

Ładowanie naszych danych niestandardowych

Teraz musimy załadować nasze produkty, a my użyjemy funkcji get_posts (), głównie dlatego, że mamy tylko proste dane, więc nie potrzebujemy odpowiedniej pętli WP (która by dodała wiele wywołań DB, a my naprawdę nie nie potrzebuję tego).

Najpierw utwórzmy funkcję, aby uzyskać link do naszej strony, jeśli taki istnieje.

// return URL dla funkcji post get_url ($ post) {$ urllink = get_post_meta ($ post-> ID, 'urllink', true); return $ urllink; }

Teraz możemy uruchomić funkcję shortcode. Prostym sposobem domyślnym i sprawdzania poprawności danych shortcode jest tworzenie atrybutów pętli jako tablicy, dzięki czemu możemy dodawać nowe elementy, gdy ich potrzebujemy, na przykład:

// rejestracja krótkiego kodu w celu wyświetlenia referencji funkcja load_testimonials ($ a) {$ args = array ("post_type" => "referencje"); if (isset ($ a ['rand']) && $ a ['rand'] == true) {$ args ['orderby'] = 'rand'; } if (isset ($ a ['max'])) {$ args ['posts_per_page'] = (int) $ a ['max']; } // zdobycie wszystkich referencji $ posts = get_posts ($ args); // WYJŚCIE HTML} add_shortcode („referencje”, „load_testimonials”);

Jak widać, atrybuty shortcode są ładowane i przekazywane do tablicy $ args podczas sprawdzania poprawności, w formacie wymaganym przez WordPress, dzięki czemu możemy ładować posty za ich pomocą.

Teraz musimy dodać tam kod HTML, domyślną strukturę Flexslider. Oto jak będzie wyglądać:

echo "<div>"; echo '<ul>'; foreach ($ postów jako $ post) {// uzyskanie obrazu kciuka $ url_thumb = wp_get_attachment_thumb_url (get_post_thumbnail_id ($ post-> ID)); $ link = get_url ($ post); echo "<li>"; if (! empty ($ url_thumb)) {echo '<img src = "'. $ url_thumb. '" />'; } echo '<h2>'. $ post-> post_title. '</ h2>'; if (! empty ($ post-> post_content)) {echo '<p>'. $ post-> post_content. '<br />'; } if (! empty ($ link)) {echo '<a href="'.$link.'"> Odwiedź stronę </a> </ p>'; } echo "</ li>"; } echo '</ ul>'; echo "</ div>";

Czekaj, ale dlaczego mielibyśmy stworzyć kod HTML wewnątrz funkcji PHP? Dzieje się tak dlatego, że możemy warunkowo ładować zawartość tylko wtedy, gdy użytkownik dodał treść, więc nie będziesz mieć pustych znaczników HTML, tylko czekając, aby zepsuć układ.

A co z paskiem bocznym?

Większość ludzi po prostu chce pokazywać referencje na pasku bocznym, a ta wtyczka nie zadziała zbyt dobrze, ponieważ widżety tekstowe nie przetwarzają krótkich kodów. Jest na to proste rozwiązanie, po prostu dodaj to w swoim kodzie:

add_filter ("widget_text", "do_shortcode");

Co dalej?

Czy podobał Ci się ten samouczek? Co mógłbyś dodać jako opcję dla swojego referencyjnego shortcode? Czy masz jakieś pomysły na przyszłe posty? Daj nam znać, korzystając z sekcji komentarzy!

O Rochester Oliveira

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