Kompletny przewodnik po tworzeniu wtyczki WordPress

Wtyczki są istotną częścią witryn WordPress, które wymagają określonych funkcji.

Podczas gdy oficjalne repozytorium WordPressa ma do wyboru ponad 45 000 wtyczek, wiele z tych wtyczek mija się z celem.

Tylko dlatego, że wtyczka znajduje się w repozytorium, nie oznacza to, że nie utrudni jej działania ani nie naruszy bezpieczeństwa.

Więc co możesz zrobić? Cóż, możesz zbudować swój własny.

Tworzenie świetnej wtyczki WordPress zaczyna się od starannego planowania.

Niezależnie od tego, czy budujesz go od zera, czy na podstawie schematu, przestrzeganie dobrze udokumentowanych najlepszych praktyk jest absolutnie niezbędne.

W tym samouczku dowiesz się, jak zbudować prostą wtyczkę WordPress we właściwy sposób.

Jeśli chcesz przejrzeć ostateczny kod źródłowy w trakcie czytania, możesz go znaleźć tutaj.

Zacznij od planu.

Najpierw wypiszmy, jakie funkcje będzie mieć nasza wtyczka i dokładnie opiszmy, co musi zrobić.

Wtyczka, którą tworzymy, umożliwi odwiedzającym witrynę zapisywanie treści do późniejszego przeczytania.

Dla zarejestrowanych użytkowników będziemy przechowywać listę w bazie danych, a dla anonimowych użytkowników zapiszemy listę za pomocą plików cookie.

Poniżej znajduje się zarys funkcji i funkcjonalności, które zapewni nasza wtyczka.

Ustawienia ekranu

• Możliwość dodania przez administratorów przycisku „Zapisz element” na końcu treści.
• Możliwość wybrania rodzaju postów, w których chcemy dodać ten przycisk.
• Zaoferuj użytkownikom możliwość decydowania, czy chcą korzystać z naszej predefiniowanej stylizacji, czy nie
• Zapewnij opcję włączenia funkcjonalności tylko dla zalogowanych użytkowników.
• Zapewnij opcję zmiany wiadomości, które pojawiają się w części wtyczki skierowanej do gościa.

Zapisywanie treści

• Jeśli użytkownik jest zalogowany, zapisz zawartość w niestandardowym polu użytkownika
• Jeśli użytkownik nie jest zalogowany, zapisz zawartość w plikach cookies

Wiadomości

Poniższe komunikaty pojawią się na ekranie w odpowiedzi na interakcję użytkownika z wtyczką lub jako etykiety na elementach, które można wykonać:

• „Zapisz element”.
• „Odpisz element”.
• „Uratowany. Zobacz zapisane elementy”.
• „Nie masz żadnych zapisanych elementów”.

Zapisany ekran

Tutaj odwiedzający przeglądają listę zapisanych postów.

• Pokaż listę zapisanych elementów
• Utwórz zapisaną stronę po aktywacji wtyczki
• Usuń zapisaną stronę po dezaktywacji wtyczki

Krótki kod

Dzięki shortcode zapisana strona może być renderowana wszędzie tam, gdzie zostanie dodana.

Użyj kotła.

To najlepszy schemat, jaki znalazłem. Jest dobrze zorganizowany, zorientowany obiektowo i wydajny. Podąża za każdą najlepszą praktyką. I jest szybki i lekki.

Możesz użyć tej strony, aby wygenerować bazę kodów wtyczek na podstawie tego szablonu wtyczki WordPress:

Powinieneś otrzymać plik .zip .

Wypakuj go i umieść w folderze instalacyjnym WordPressa: wp-content/plugins/ .

Jeśli otworzysz swój pulpit nawigacyjny WordPress i przejdziesz do wtyczek, zobaczysz, że Twoja wtyczka jest tam wymieniona. Nie aktywuj go jeszcze.

Obsługa aktywacji i dezaktywacji.

Ważne jest, aby nasza wtyczka prawidłowo obsługiwała aktywację i dezaktywację.

Gdy nasza wtyczka zostanie aktywowana, utworzymy stronę o nazwie „Zapisane”, na której będą przechowywane elementy zapisane przez użytkownika.

Tworząc tę ​​stronę, dodamy krótki kod dla naszych zapisanych elementów do treści tej strony.

Na koniec zapiszemy stronę; uzyskać jego identyfikator; i przechowywać je w bazie danych, abyśmy mogli uzyskać do nich dostęp później po dezaktywacji wtyczki.

Gdy nasza wtyczka zostanie dezaktywowana, otrzymamy z bazy danych identyfikator strony „Zapisane”, a następnie usuniemy stronę „Zapisana”, usuwając wszelkie ślady po samej wtyczce.

Wszystko to możemy zrobić w plikach include/class-toptal-save-activator.php i include/class-toptal-save-deactivator.php .

Zacznijmy od procesu aktywacji:

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Activator { /** * On activation create a page and remember it. * * Create a page named "Saved", add a shortcode that will show the saved items * and remember page id in our database. * * @since 1.0.0 */ public static function activate() { // Saved Page Arguments $saved_page_args = array( 'post_title' => __( 'Saved', 'toptal-save' ), 'post_content' => '[toptal-saved]', 'post_status' => 'publish', 'post_type' => 'page' ); // Insert the page and get its id. $saved_page_id = wp_insert_post( $saved_page_args ); // Save page id to the database. add_option( 'toptal_save_saved_page_id', $saved_page_id ); } }

Funkcja activate() jest wywoływana, gdy wtyczka jest aktywowana.

Tworzy nową stronę za pomocą funkcji wp_insert_post() i zapisuje identyfikator strony w bazie danych za pomocą add_option() .

Przejdźmy teraz do dezaktywacji wtyczki.

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Deactivator { /** * On deactivation delete the "Saved" page. * * Get the "Saved" page id, check if it exists and delete the page that has that id. * * @since 1.0.0 */ public static function deactivate() { // Get Saved page id. $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Check if the saved page id exists. if ( $saved_page_id ) { // Delete saved page. wp_delete_post( $saved_page_id, true ); // Delete saved page id record in the database. delete_option( 'toptal_save_saved_page_id' ); } } }

Funkcja deactivate() , która jest wywoływana, gdy wtyczka jest dezaktywowana, pobiera stronę za pomocą funkcji get_option() , usuwa odpowiednią stronę z bazy danych za pomocą wp_delete_post() i usuwa zapisany identyfikator z tabeli opcji za pomocą delete_option() .

Jeśli aktywujemy naszą wtyczkę i przejdziemy do stron, powinniśmy zobaczyć stronę o nazwie „Zapisane” z krótkim kodem.

Gdybyśmy dezaktywowali wtyczkę, ta strona zostałaby usunięta.

Ponieważ użyliśmy true jako argumentu w naszej wp_delete_post() , ta strona nie zostanie wyrzucona do kosza, ale raczej zostanie całkowicie usunięta.

Utwórz stronę ustawień wtyczki.

Możemy utworzyć naszą stronę ustawień w pliku admin/class-toptal-save-admin.php , a pierwszą rzeczą, którą musimy zrobić w tym pliku, jest usunięcie lub skomentowanie wywołania wp_enqueue_style() wewnątrz funkcji enqueue_styles() i wywołaj wp_enqueue_script() wewnątrz funkcji enqueue_scripts() , jeśli nie będziemy dodawać żadnego CSS/JS do ekranu administratora.

Jeśli jednak zamierzamy dodać trochę stylizacji, radzę ładować te pliki tylko na stronie ustawień naszej wtyczki, a nie na wszystkich stronach administracyjnych WordPressa. Możemy to zrobić, umieszczając poniższy kod bezpośrednio nad wierszami, które byśmy skomentowali:

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-admin.css', array(), $this->version, 'all' );

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-admin.js', array( 'jquery' ), $this->version, false );

Jeśli zastanawiasz się, skąd wziąłem tę 'tools_page_toptal-save' .

Cóż, o to chodzi, wiem, że mam zamiar utworzyć stronę ustawień z slug toptal-save, a także wiem, że zamierzam dodać ją do ekranu Tools ( tools.php ). Tak więc, łącząc te dwie wartości, możemy stwierdzić, że wartością zmiennej $hook będzie 'tools_page_toptal-save' — połączenie tych dwóch wartości.

Jeśli nie jesteśmy na naszej stronie ustawień wtyczki, używamy return , aby natychmiast zakończyć wykonywanie funkcji, w której się znajdujemy.

Ponieważ nie będę dodawać żadnych niestandardowych stylów do mojego ekranu administratora – ponieważ chcę, aby mój ekran wtyczki wyglądał jak natywny ekran WordPressa – nie dodam tego kodu.

Teraz możemy przystąpić do tworzenia naszej strony ustawień.

Zaczniemy od dodania prostej metody do klasy Toptal_Save_Admin , która wywoła funkcję add_submenu_page() .

 /** * Register the settings page for the admin area. * * @since 1.0.0 */ public function register_settings_page() { // Create our settings page as a submenu page. add_submenu_page( 'tools.php', // parent slug __( 'Toptal Save', 'toptal-save' ), // page title __( 'Toptal Save', 'toptal-save' ), // menu title 'manage_options', // capability 'toptal-save', // menu_slug array( $this, 'display_settings_page' ) // callable function ); }

To całkiem garść argumentów, które przekazujemy do funkcji add_submenu_page() . Oto, co każdy z nich oznacza.

• Nadrzędny ślimak: nazwa ślimaka dla menu nadrzędnego (lub nazwa pliku standardowej strony administratora WordPress). Możesz zobaczyć pełną listę nadrzędnych ślimaków tutaj.

• Tytuł strony: Tekst, który ma być wyświetlany w znacznikach tytułu strony po wybraniu menu.

• Tytuł menu: Tekst, który ma być użyty w tytule menu.

• Zdolność: Zdolność wymagana przez użytkownika do wyświetlenia tego menu. Wykorzystaliśmy opcję „manage_options”, która umożliwia dostęp do opcji Panelu Administracyjnego. Możesz przeczytać więcej o rolach i możliwościach tutaj.

• Ślimak menu: nazwa ślimaka odnosząca się do tego menu.

• Funkcja wywoływalna: funkcja, która ma zostać wywołana w celu wyświetlenia zawartości tej strony. Ponieważ zdefiniowaliśmy nazwę naszej funkcji wywoływalnej, musimy ją utworzyć, ale zanim to zrobimy, użyliśmy $this , aby odwołać się do instancji klasy z jej wnętrza. Oto co dokumentacja PHP ma na ten temat do powiedzenia:

Pseudozmienna $this jest dostępna, gdy metoda jest wywoływana z kontekstu obiektu. $this jest referencją do obiektu wywołującego (zwykle obiektu, do którego należy metoda, ale prawdopodobnie innego obiektu, jeśli metoda jest wywoływana statycznie z kontekstu obiektu drugorzędnego).

Następnie dodamy do klasy kolejną metodę:

 /** * Display the settings page content for the page we have created. * * @since 1.0.0 */ public function display_settings_page() { require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/partials/toptal-save-admin-display.php'; }

Ta wywoływalna funkcja zawiera nasz szablon, który pokaże naszą stronę ustawień. Widać, że odwołujemy się do pliku znajdującego się w admin/ partials o nazwie toptal-save-admin-display.php .

Teraz, jeśli przejdziesz do Narzędzi, nie zobaczysz tego ekranu. Czemu? Ponieważ nie podczepiliśmy naszej metody register_admin_page() do zaczepu admin_menu .

Możemy to zrobić, otwierając nasz plik include/class-toptal-save.php i dodając ten fragment kodu do metody define_admin_hooks() , tuż poniżej, gdzie $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); część jest.

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

Nie przejmuj się wywołaniami metody add_action() , ponieważ omówimy to później.

Na razie po prostu otwórz stronę Narzędzia, a zobaczysz stronę Toptal Save. Jeśli go otworzymy, działa, ale widzimy pusty ekran, ponieważ nic na nim nie ma.

Robimy pewne postępy, ale hej, musimy wyświetlić tutaj pewne ustawienia, więc zróbmy to.

Zaczniemy tworzyć pola i to jest coś, co zrobimy za pomocą WordPress Settings API.

Jeśli go nie znasz, pozwala nam tworzyć pola formularzy, które możemy wykorzystać do zapisania naszych danych.

 /** * Register the settings for our settings page. * * @since 1.0.0 */ public function register_settings() { // Here we are going to register our setting. register_setting( $this->plugin_name . '-settings', $this->plugin_name . '-settings', array( $this, 'sandbox_register_setting' ) ); // Here we are going to add a section for our setting. add_settings_section( $this->plugin_name . '-settings-section', __( 'Settings', 'toptal-save' ), array( $this, 'sandbox_add_settings_section' ), $this->plugin_name . '-settings' ); // Here we are going to add fields to our section. add_settings_field( 'post-types', __( 'Post Types', 'toptal-save' ), array( $this, 'sandbox_add_settings_field_multiple_checkbox' ), $this->plugin_name . '-settings', $this->plugin_name . '-settings-section', array( 'label_for' => 'post-types', 'description' => __( 'Save button will be added only to the checked post types.', 'toptal-save' ) ) ); // ... }

Wewnątrz funkcji register_settings() możemy dodać i skonfigurować wszystkie pola. Pełną implementację funkcji znajdziesz tutaj. W powyższej funkcji użyliśmy następujących funkcji:

• register_setting() : Rejestruje ustawienie i jego wywołanie zwrotne dotyczące oczyszczania.
• add_settings_section() : Dodaje nową sekcję do strony ustawień.
• add_settings_field() : Dodaje nowe pole do sekcji strony ustawień.

Za każdym razem, gdy używaliśmy jednej z tych trzech funkcji, zapewniane było wywołanie zwrotne dotyczące oczyszczania. Pozwala to na oczyszczenie danych i, jeśli jest to pole, pokazanie odpowiedniego elementu HTML (pole wyboru, radio, dane wejściowe itp.).

Ponadto przekazaliśmy tablicę danych do tych wywołań zwrotnych, takich jak label_for, description lub default, jeśli to konieczne.

Teraz możemy utworzyć te wywołania zwrotne odkażania. Kod dla tych wywołań zwrotnych znajdziesz tutaj.

Wszystko jest w porządku, jednak musimy podpiąć pola do haka admin_init , a następnie je pokazać.

Użyjemy add_action , który jest hakiem, który uruchamia rdzeń WordPressa w określonych punktach podczas wykonywania lub gdy wystąpi określone zdarzenie. admin_init jest wyzwalany przed każdym innym podpięciem, gdy użytkownik uzyskuje dostęp do obszaru administracyjnego.

Najpierw musimy dodać akcję w pliku include/class-toptal-save.php .

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); // Hook our settings page $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); // Hook our settings $this->loader->add_action( 'admin_init', $plugin_admin, 'register_settings' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

Następnie w admin/partials/topal-save-admin-display.php , musimy udostępnić widok obszaru administracyjnego naszej wtyczki:

 <?php /** * Provide a admin area view for the plugin * * This file is used to markup the admin-facing aspects of the plugin. * * @link https://www.toptal.com/resume/ratko-solaja * @since 1.0.0 * * @package Toptal_Save * @subpackage Toptal_Save/admin/partials */ ?> <!-- This file should primarily consist of HTML with a little bit of PHP. --> <div> <form method="post" action="options.php"> <?php settings_fields( 'toptal-save-settings' ); do_settings_sections( 'toptal-save-settings' ); submit_button(); ?> </form> </div>

Funkcja settings_fields() służy do wyprowadzania pól nonce, action i option_page dla strony ustawień.

Po nim następuje funkcja do_settings_sections() , która drukuje wszystkie sekcje ustawień dodane do określonej strony ustawień.

Na koniec dodawany jest przycisk przesyłania za pomocą dostarczonego tekstu i odpowiednich klas za pomocą funkcji submit_button() .

Teraz, jeśli spojrzymy na naszą stronę, będzie ona wyglądać tak:

To wszystko, co musimy zrobić w naszym obszarze administracyjnym. Zacznijmy pracę nad publiczną częścią naszej wtyczki.

Utwórz funkcjonalność wtyczki.

Oto interesująca część. Musimy stworzyć wiele funkcji, aby oddzielić naszą funkcjonalność:

• Funkcja, która pokaże przycisk „Zapisz element”. To musi sprawdzić, czy bieżący użytkownik już zapisał ten element, czy nie, w zależności od tego, pokażemy inny tekst, a także kolor.
• Funkcja, która zapisze/odpisze element (AJAX).
• Funkcja, która pokaże wszystkie zapisane pozycje.
• Funkcja, która wygeneruje nasze skróty.

Zacznijmy więc od pokazania przycisku. Zrobimy to wszystko w public/class-toptal-save-public.php .

Robiąc to, będziemy musieli stworzyć kilka dodatkowych funkcji pomocniczych, aby zadbać o pewne rzeczy, takie jak:

• Tworzenie unikalnej nazwy plików cookie dla strony internetowej
• Tworzenie pliku cookie
• Uzyskiwanie wartości cookie
• Uzyskiwanie statusu członkostwa w ustawieniach

Kod tych funkcji pomocniczych można znaleźć tutaj.

Funkcja get_unique_cookie_name() pomoże nam wygenerować unikalną nazwę pliku cookie na podstawie adresu URL witryny, nazwy witryny i naszego niestandardowego przyrostka. Dzieje się tak, aby wygenerowana nazwa pliku cookie nie powodowała konfliktu, gdy jest używana w wielu witrynach WordPress w tej samej domenie.

Funkcje toptal_set_cookie() i toptal_get_cookie() będą odpowiednio tworzyć i pobierać wartość naszych plików cookie.

Funkcja get_user_status() otrzyma status naszego pola wyboru członkostwa w ustawieniach (zwracając 1, gdy zaznaczone, 0 w przeciwnym razie).

Teraz część soczysta, tworząca funkcję, która będzie odpowiedzialna za wyświetlanie przycisku zapisu. Implementację naszej funkcji show_save_button() można znaleźć tutaj. I tutaj wykorzystaliśmy kilka nowych funkcji z API WordPressa:

• get_queried_object_id() : Pobiera identyfikator aktualnie badanego obiektu.
• is_user_logged_in() : Sprawdza, czy aktualny gość jest zalogowanym użytkownikiem.
• get_user_meta() : Pobiera pole metadanych użytkownika dla użytkownika.
• wp_create_nonce() : Tworzy token kryptograficzny powiązany z określoną akcją, użytkownikiem, sesją użytkownika i oknem czasu.

Teraz stwórzmy funkcję, która doda nasz przycisk na końcu treści. Tutaj mamy dwa kluczowe wymagania.

1. Upewnij się, że przycisk jest wyświetlany tylko przy typach postów, które są wybrane w ustawieniach.
2. Upewnij się, że pole wyboru dołączania przycisku jest zaznaczone.

 /** * Append the button to the end of the content. * * @since 1.0.0 */ public function append_the_button( $content ) { // Get our item ID $item_id = get_queried_object_id(); // Get current item post type $current_post_type = get_post_type( $item_id ); // Get our saved page ID, so we can make sure that this button isn't being shown there $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Set default values for options that we are going to call below $post_types = array(); $override = 0; // Get our options $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['post-types'] ) ) { $post_types = $options['post-types']; } if ( ! empty( $options['toggle-content-override'] ) ) { $override = $options['toggle-content-override']; } // Let's check if all conditions are ok if ( $override == 1 && ! empty( $post_types ) && ! is_page( $saved_page_id ) && in_array( $current_post_type, $post_types ) ) { // Append the button $custom_content = ''; ob_start(); echo $this->show_save_button(); $custom_content .= ob_get_contents(); ob_end_clean(); $content = $content . $custom_content; } return $content; }

Teraz musimy podpiąć tę funkcję do haka the_content .

Czemu? Ponieważ the_content służy do filtrowania treści postu po jego pobraniu z bazy danych, a przed wydrukowaniem go na ekranie.

Dzięki temu możemy dodać nasz przycisk zapisu w dowolnym miejscu treści. Możemy to zrobić w include/class-toptal-save.php w define_public_hooks() w następujący sposób:

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Teraz, jeśli przejdziesz do ustawień wtyczki i sprawdzisz posty i strony, a także dołączysz przycisk, zobaczymy, że przycisk jest wyświetlany w każdym poście na blogu.

Od tego momentu powinniśmy iść dalej i stylizować ten przycisk.

Możemy to zrobić w public/css/toptal-save-public.css . Tutaj znajdziesz zaktualizowany plik CSS.

Teraz stwórzmy funkcję, która faktycznie zapisze element.

Zrobimy to w naszej klasie publicznej i zrobimy to za pomocą AJAX. Kod jest tutaj.

Podłączmy tę funkcję do WordPress AJAX.

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Możesz przeczytać więcej o AJAX we wtyczkach tutaj.

Zanim zakończymy tę część, musimy zrobić jeszcze dwie rzeczy.

1. Zlokalizuj skrypt.
2. Utwórz nasze wywołanie AJAX w public/js/toptal-save-public.js

Zlokalizowanie skryptu zostanie wykonane za pomocą funkcji wp_localize_script() w naszym pliku public/class-toptal-save-public.php .

Ponadto, gdy już przy tym jesteśmy, upewnimy się, że zaimplementujemy wyświetlanie plików CSS i JS w zależności od stanu naszego pola wyboru „użyj naszego stylu”.

 /** * Register the stylesheets for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_styles() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['toggle-css-override'] ) && $options['toggle-css-override'] == 1 ) { wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-public.css', array(), $this->version, 'all' ); } } /** * Register the JavaScript for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_scripts() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-public.js', array( 'jquery' ), $this->version, false ); // Get our options $options = get_option( $this->plugin_name . '-settings' ); // Get our text $item_save_text = $options['text-save']; $item_unsave_text = $options['text-unsave']; $item_saved_text = $options['text-saved']; $item_no_saved = $options['text-no-saved']; $saved_page_id = get_option( 'toptal_save_saved_page_id' ); $saved_page_url = get_permalink( $saved_page_id ); wp_localize_script( $this->plugin_name, 'toptal_save_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'item_save_text' => $item_save_text, 'item_unsave_text' => $item_unsave_text, 'item_saved_text' => $item_saved_text, 'item_no_saved' => $item_no_saved, 'saved_page_url' => $saved_page_url ) ); }

Teraz możemy kontynuować nasze wywołanie AJAX.

Nasz skrypt front-endowy będzie szukał elementów z klasą „toptal-save-button”.

Dla wszystkich pasujących elementów zostanie zarejestrowany moduł obsługi kliknięć, który wykona wywołanie interfejsu API i odpowiednio zaktualizuje interfejs użytkownika.

Kod znajdziesz tutaj, a niezbędny kod CSS tutaj.

Dodałem również funkcję, która obsłuży powiadomienie, gdy element zostanie dodany.

Oto jak to wszystko działa.

Następnie musimy stworzyć krótki kod, który użytkownicy będą mogli wstawiać w dowolnym miejscu.

Możemy to zrobić w public/class-toptal-save-public.php :

 /** * Create Shortcode for Users to add the button. * * @since 1.0.0 */ public function register_save_unsave_shortcode() { return $this->show_save_button(); }

Musimy go również zarejestrować, ponieważ sama funkcja nic nie zrobi.

W include/class-toptal-save.php dodaj ten kod po tej linii, w której dodaliśmy nasz przycisk.

 // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );

Teraz to nie zadziała, ponieważ nie załadowaliśmy jeszcze metody add_shortcode() do naszej klasy loadera.

Oto pełny kod pliku include/class-toptal-save-loader.php .

Dodałem nową chronioną zmienną o nazwie shortcodes , następnie w metodzie konstruktora klasy zamieniłem ją w tablicę.

W linii 104 dodałem funkcję, która będzie odpowiedzialna za tworzenie naszych krótkich kodów; widać, że jest prawie taki sam jak funkcja powyżej ( add_filter() ), z wyjątkiem tego, że zmieniłem „filtr” na „shortcode” i „filtry” na „shortcodes”.

Ponadto w metodzie run() dodałem kolejny foreach , który przejdzie przez naszą tablicę shortcodes i zarejestruje je w WordPressie.

To było łatwe.

Pamiętaj, że na początku użyliśmy [toptal-saved] , więc stwórzmy metodę, która pokaże wszystkie nasze zapisane elementy.

Tutaj znajdziesz pełny kod tej metody.

Teraz, jak zwykle, musimy zarejestrować krótki kod w include/class-toptal-save.php :

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' ); $this->loader->add_shortcode( 'toptal-saved', $plugin_public, 'register_saved_shortcode' ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Mamy jeszcze dwie rzeczy do zrobienia.

1. Wystylizuj naszą stronę z zapisanymi przedmiotami.
2. Upewnij się, że gdy użytkownik usunie zapisany element, zniknie on ze strony zapisanych elementów.

Niezbędny kod CSS do pierwszego zadania znajdziesz tutaj.

W przypadku drugiego wymaga trochę skryptowania front-end.

Pełny kod JavaScript można znaleźć tutaj.

Jak zobaczysz w wierszu 52, wyszukałem div z klasą „toptal-save-item”.

Następnie w wierszach 70-75 sprawdzamy, czy ten nadrzędny div ma klasę toptal-saved-item.

Jeśli tak, ukrywamy nasz przedmiot za pomocą fadeOut, a następnie, po zakończeniu animacji, całkowicie usuwamy przedmiot z ekranu.

Przejdźmy teraz do trudniejszej części – uczynienia go modułowym.

Uczyń wtyczkę modułową.

Podstawowa definicja wtyczki modułowej to:

Rozszerzalny lub modułowy kod to kod, który można modyfikować, wchodzić w interakcje, dodawać lub manipulować – wszystko to bez modyfikowania podstawowej bazy kodu.

Teraz, jeśli chodzi o tę wtyczkę, upewniłbym się, że użytkownicy mogą zmienić kod HTML wewnątrz zapisanego elementu na stronie zapisanych elementów.

Dlatego będziemy musieli wprowadzić kilka zmian w naszej metodzie register_saved_shortcode() :

• Zmień html_to_return na inner_html_to_return wszędzie tam, gdzie chcemy, aby użytkownicy mogli zmieniać kod HTML. Upewnij się, że pierwsza deklaracja naszej zmiennej inner_html_to_return ma „=” bez poprzedzającej go kropki.
• Użyj metody apply_filters() , aby zarejestrować nasz filtr.

Po tych dwóch zmianach powinieneś otrzymać coś takiego.

Teraz, jeśli użytkownicy chcą wchodzić w interakcję z naszym kodem, mogą dodać coś takiego w swoim pliku functions.php :

 <?php add_filter( 'toptal_saved_item_html', 'change_toptal_saved_item_html'); function change_toptal_saved_item_html( $inner_html_to_return ) { // Some custom code return $inner_html_to_return; }

Generuj pliki tłumaczeń.

Tłumaczenie jest bardzo ważne, ponieważ pozwala członkom społeczności WordPress i poliglotom przetłumaczyć twoją wtyczkę, czyniąc ją dostępną dla stron nieanglojęzycznych.

Mając to na uwadze, przyjrzyjmy się niektórym technicznym szczegółom dotyczącym obsługi tłumaczeń przez WordPress.

WordPress wykorzystuje do tłumaczenia strukturę lokalizacyjną GNU gettext . W tej strukturze istnieją trzy rodzaje plików:

• Szablon obiektu przenośnego (POT)
• Obiekt przenośny (PO)
• Obiekt maszyny (MO)

Każdy z tych plików reprezentuje etap procesu tłumaczenia.

Aby wygenerować plik POT, potrzebujemy programu, który przeszuka kod WordPressa i pobierze cały tekst przekazany do naszych funkcji tłumaczących, takich jak __e() i _e() . Możesz przeczytać więcej o funkcjach tłumaczenia tutaj.

Tutaj tłumaczymy tekst z pliku POT, zapisując zarówno język angielski, jak i nasze tłumaczenie w pliku PO, a także konwertujemy plik PO na plik MO.

Wykonanie tego ręcznie zajęłoby dużo czasu, ponieważ musiałbyś napisać kilka wierszy kodu dla każdego możliwego do przetłumaczenia pliku, który masz we wtyczce. Na szczęście jest lepszy sposób, używając poręcznej wtyczki o nazwie Loco Translate.

Po zainstalowaniu i aktywacji przejdź do Loco Translate > Wtyczki > Toptal Save.

Następnie kliknij Edytuj szablon, a następnie Synchronizuj i zapisz. Spowoduje to edycję naszego pliku toptal-save.pot w naszym folderze języków.

Teraz wtyczka jest dostępna do tłumaczenia.

Zbuduj teraz swoją wtyczkę WordPress.

W tym artykule zbudowaliśmy dość prostą wtyczkę, ale w trakcie tego postępowaliśmy zgodnie z praktykami i standardami, które pozwoliły nam na łatwe utrzymanie i rozszerzanie tej wtyczki.

Wykorzystaliśmy funkcje WordPressa w sposób, który nie wpłynie negatywnie na ogólną wydajność platformy.

Niezależnie od tego, czy jest to prosta wtyczka, czy skomplikowana, niezależnie od tego, czy jesteś indywidualnym programistą, czy firmą programistyczną WordPress, planowanie i przestrzeganie najlepszych praktyk jest kluczem do zbudowania solidnej wtyczki.