Технология

Крайното ръководство за изграждане на приставка за WordPress



Приставките са жизненоважна част от уебсайтовете на WordPress, които се нуждаят от специфични функционалности.

Докато официалното хранилище на WordPress има повече от 45 000 приставки, от които можете да избирате, много от тези приставки пропускат оценката.



Само защото приставката е в хранилището, не означава, че няма да попречи на нейната производителност или да застраши сигурността.



И така, какво можете да направите? Е, можете да изградите свой собствен.



Крайното ръководство за изграждане на приставка за WordPress

Изграждане на страхотна приставка за WordPress започва с внимателно планиране.



Независимо дали изграждате такъв от нулата или се базирате на образец, спазването на добре документирани най-добри практики е абсолютно необходимо.

В този урок ще научите как да създадете проста приставка за WordPress по правилния начин.



Ако искате да прегледате окончателния изходен код, докато четете, можете да го намерите тук .

Започнете с план.

Първо, нека да изброим функциите, които ще има нашата приставка, и да очертаем точно какво трябва да направи.



Приставката, която изграждаме, ще позволи на посетителите на сайта да запазват съдържание, което да прочетат по-късно.

За регистрирани потребители ще съхраняваме списъка в базата данни, а за анонимни потребители ще го запазваме с помощта на бисквитки.



По-долу е даден контур на функциите и функционалностите, които ще предостави нашата приставка.

Екран за настройки

  • Възможността за администраторите да добавят бутона „Запазване на елемент“ в края на съдържанието.
  • Възможността да изберем типа публикации, където искаме този бутон да бъде добавен.
  • Предложете на потребителите възможност да решат дали искат да използват нашия предварително дефиниран стил или не
  • Предоставете опция за активиране на функционалността само за влезли потребители.
  • Предоставете опция за промяна на съобщенията, които се появяват на посетителя с лице към част от приставката.

Запазване на съдържанието

  • Ако потребителят е влязъл, запазете съдържанието в потребителско поле
  • Ако потребителят не е влязъл, запазете съдържанието в бисквитки

Съобщения

Съобщенията по-долу ще се покажат на екрана в отговор на взаимодействието на посетителя с приставката или като етикети на активни елементи:



  • „Запазване на елемент“.
  • „Запазване на елемента“.
  • „Запазено. Вижте запазените елементи. '
  • „Нямате запазени елементи.“

Запазен екран

Тук посетителите преглеждат списъка със запазените от тях публикации.

  • Показване на списък със запазени елементи
  • Създайте запазена страница при активиране на приставката
  • Изтриване на запазена страница при деактивиране на приставката

Кратък код

С кратък код, Запазената страница може да бъде изобразена навсякъде, където е добавена.

Използвайте шаблон.

Това е най-добрият шаблон Аз намерих. Той е добре структуриран, обектно-ориентиран и ефективен. Следва всяка най-добра практика. И е бърз и лек.

Можеш да използваш тази страница за генериране на кодова база на приставки, базирана на този пример за WordPress Plugin:

Wordpress шаблон

Трябва да получите a .zip файл.

Извлечете го и го поставете във вашата инсталационна папка на WordPress: wp-content / плъгини / .

Ако отворите таблото си за управление на WordPress и отидете на приставки, ще видите, че приставката ви е посочена там. Все още не го активирайте.

Обработвайте активирането и деактивирането.

За нашия плъгин е важно да се справя правилно с активирането и деактивирането.

Когато нашата приставка е активирана, ние ще създадем страница със име „Saved“, която ще съдържа в нея запазените елементи на потребителя.

Докато създаваме тази страница, ние ще добавим къс код за запазените ни елементи в съдържанието на тази страница.

Накрая ще запазим страницата; вземете идентификационния му номер; и го съхраняваме в базата данни, за да можем да го осъществим по-късно при деактивиране на приставката

Когато нашата приставка е деактивирана, ще получим идентификатора на страницата „Запазена“ от базата данни и след това ще изтрием страницата „Запазена“, като премахнем всяка следа от самата приставка.

Всичко това можем да направим в включва / class-toptal-save-activator.php и включва / class-toptal-save-deaktiviratiator.php .

Нека започнем с процеса на активиране:

__( '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 ); } }

activate() функция се извиква, когато приставката е активирана.

Създава нова страница с помощта на wp_insert_post() функция и записва идентификатора на страницата в базата данни, използвайки add_option() .

Сега да продължим с деактивирането на приставката.

deactivate() функция, която се извиква, когато приставката е деактивирана, извлича страницата с помощта на get_option() функция, премахва съответната страница от базата данни с помощта на wp_delete_post() и премахва запазения идентификатор от таблицата с опции с помощта на delete_option() .

Ако активираме нашия плъгин и отидем на страници, трябва да видим страница, наречена „Запазена“, с кратък код в нея.

Активиране на модул Wordpress

Ако трябва да деактивираме приставката, тази страница ще бъде премахната.

Тъй като използвахме true като аргумент в нашите wp_delete_post() метод, тази страница няма да отиде в кошчето, а по-скоро ще бъде изтрита напълно.

Създайте страница за настройки на приставки.

Можем да създадем нашата страница с настройки в admin / class-toptal-save-admin.php файл и първото нещо, което трябва да направим в този файл, е да премахнем или коментираме повикването към wp_enqueue_style() вътре в enqueue_styles() функция и извикване на wp_enqueue_script() вътре в enqueue_scripts() функция, ако няма да добавяме CSS / JS към администраторския екран.

Ако обаче ще добавим малко стил, препоръчвам да зареждаме тези файлове само на страницата с настройки на нашата приставка, а не на всички администраторски страници на WordPress. Можем да направим това, като поставим следния код директно над редовете, които бихме коментирали:

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 );

Ако се чудите откъде взех това ‘tools_page_toptal-save’ част от.

Е, това е нещото, знам, че ще създам страница за настройки с охлюв toptal-save и също така знам, че ще го добавя към Инструментите ( tools.php ) екран. И така, като съберем тези две заедно, можем да кажем, че стойността на променливата $hook ще бъде ‘tools_page_toptal-save’ - обединяване на двете стойности.

Ако не сме в страницата с настройки на приставката, използваме return незабавно да прекратим изпълнението на функцията, в която се намираме.

Тъй като няма да добавям персонализиран стил към моя администраторски екран - защото искам екранът ми на приставката да изглежда като естествен екран на WordPress - няма да добавя този код.

Сега можем да продължим със създаването на нашата страница с настройки.

Ще започнем, като добавим прост метод към ApeeScape_Save_Admin клас, който ще извика 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 __( 'ApeeScape Save', 'toptal-save' ), // page title __( 'ApeeScape Save', 'toptal-save' ), // menu title 'manage_options', // capability 'toptal-save', // menu_slug array( $this, 'display_settings_page' ) // callable function ); }

Това е доста шепа аргументи, които предаваме на add_submenu_page() функция. Ето какво означава всеки от тях.

  • Родителски охлюв: Името на плъзгача за родителското меню (или името на файла на стандартна административна страница на WordPress). Можете да видите пълния списък с родителски охлюви тук .

  • Заглавие на страница: Текстът, който ще се показва в заглавните маркери на страницата, когато е избрано менюто.

  • Заглавие на менюто: Текстът, който ще се използва за заглавието на менюто.

  • Възможност: Възможността, изисквана от потребителя, за да им се покаже това меню. Използвахме “manage_options”, който позволява достъп до опциите на административния панел. Можете да прочетете повече за ролите и възможностите тук .

  • Меню плужек: Името на охлюва, което да се отнася към това меню.

  • Извикваща функция: Функцията, която трябва да бъде извикана за извеждане на съдържанието на тази страница. Тъй като сме дефинирали името на нашата извикваща функция, трябва да я създадем, но преди да го направим, използвахме $this да се позовава на екземпляр на клас от себе си. Ето какво казва PHP документацията за него:

Псевдопроменливата $ this е налична, когато методът е извикан от контекста на обекта. $ това е препратка към извикващия обект (обикновено обектът, към който принадлежи методът, но вероятно друг обект, ако методът се извиква статично от контекста на вторичен обект).

След това ще добавим друг метод към класа:

/** * 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'; }

Тази извикваща функция включва нашия шаблон, който ще покаже нашата страница с настройки. Можете да видите, че правим препратка към файл, намиращ се в администратор / частични Наречен toptal-save-admin-display.php .

Сега, ако отидете в Инструменти, няма да видите този екран. Защо? Защото не сме закачили нашите register_admin_page() метод към admin_menu кука.

Можем да направим това, като отворим нашите включва / class-toptal-save.php файл и добавяне на тази част от кода в define_admin_hooks() метод, точно отдолу, където $plugin_admin = new ApeeScape_Save_Admin( $this->get_plugin_name(), $this->get_version() ); част е.

/** * 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 ApeeScape_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' ); }

Не се притеснявайте от обажданията до add_action() тъй като това е нещо, което ще разгледаме по-късно.

Засега просто отворете страницата с инструменти и ще можете да видите страницата ApeeScape Save. Ако го отворим, работи, но виждаме празен екран, тъй като на него няма нищо.

Страница с инструменти на Wordpress

Постигаме известен напредък, но хей, трябва да покажем тук някои настройки, така че нека го направим.

Ще започнем да създаваме полетата и с това ще направим нещо API за настройки на WordPress .

Ако не сте запознати с него, той ни позволява да създадем полета за формуляри, които да използваме за запазване на данните си.

/** * 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' ) ) ); // ... }

Вътре в register_settings() функция можем да добавяме и конфигурираме всички полета. Можете да намерите пълното изпълнение на функцията тук . Използвахме следното във функцията, показана по-горе:

  • register_setting() : Регистрира настройка и нейното обратно извикване за саниране.
  • add_settings_section() : Добавя нов раздел към страницата с настройки.
  • add_settings_field() : Добавя ново поле към раздел от страницата с настройки.

Винаги, когато използвахме една от тези три функции, се осигуряваше обратно извикване за саниране. Това позволява данните да бъдат дезинфекцирани и, ако това е поле, да показват подходящия HTML елемент (квадратче за отметка, радио, вход и т.н.).

Също така сме предали масив от данни на тези обратни извиквания, като label_for, описание или по подразбиране, ако е необходимо.

Сега можем да създадем тези обратни повиквания за саниране. Можете да намерите кода за тези обратни обаждания тук .

Всичко това е добре, но трябва да закачим полетата в admin_init кука и след това ги покажете.

Ще използваме add_action което е кука, която ядрото на WordPress започва в определени точки по време на изпълнение или когато настъпи конкретно събитие. admin_init се задейства преди всяка друга кука, когато потребител има достъп до администраторската област.

Първо, трябва да добавим действие в включва / 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 ApeeScape_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' ); }

След това, в admin / partials / topal-save-admin-display.php , трябва да предоставим изглед за административната област на нашия плъгин:

settings_fields() функцията се използва за извеждане на полета nonce, action и option_page за страница с настройки.

Следва я do_settings_sections() който отпечатва всички раздели с настройки, добавени към определена страница с настройки.

Накрая се добавя бутон за изпращане, като се използва предоставеният текст и подходящи класове, използвайки submit_button() функция.

Сега, ако разгледаме нашата страница, тя ще изглежда така:

Пълен пример за страницата на Wordpress

Това е всичко, което трябва да направим в нашата административна зона. Нека започнем да работим върху публичната част на нашия плъгин.

Създайте функционалността на приставката.

Тук идва интересната част. Трябва да създадем множество функции, за да отделим нашата функционалност:

  • Функция, която ще покаже бутона „Запазване на елемент“. Това трябва да провери дали текущият потребител вече е запазил този елемент или не, в зависимост от това ще покажем различен текст, както и цвят.
  • Функция, която ще запази / запази елемент (AJAX).
  • Функция, която ще покаже всички запазени елементи.
  • Функция, която ще генерира нашите шорткодове.

Така че нека да започнем с показването на бутона. Ще направим всичко това в public / class-toptal-save-public.php .

Докато правим това, ще трябва да създадем някои допълнителни помощни функции, за да се грижим за някои неща като:

  • Създаване на уникално име на бисквитки за уебсайта
  • Създаване на бисквитка
  • Получаване на стойността на бисквитката
  • Получаване на състоянието на членството от настройките

Кодът за тези помощни функции може да бъде намерен тук .

get_unique_cookie_name() функцията ще ни помогне да генерираме уникално име на бисквитка от URL адреса на уебсайта, името на уебсайта и нашата дефинирана по поръчка суфикс. Това е така, че генерираното име на бисквитка няма да противоречи, когато се използва в множество сайтове на WordPress под един и същи домейн.

toptal_set_cookie() и toptal_get_cookie() функции ще създадат и получат съответно стойността на нашите бисквитки.

get_user_status() функция ще получи състоянието на нашето квадратче за членство в настройките (връщайки 1 при отметка, 0 в противен случай).

Сега, сочната част, създаваща функцията, която ще отговаря за показването на бутона за запазване. Изпълнението за нашите show_save_button() функция може да бъде намерена тук . И тук използвахме някои нови функции от API на WordPress:

  • get_queried_object_id() : Извлича идентификатора на текущия заявен обект.
  • is_user_logged_in() : Проверява дали текущият посетител е влязъл потребител.
  • get_user_meta() : Извлича поле за метаданни на потребител за потребител.
  • wp_create_nonce() : Създава криптографски маркер, свързан с конкретно действие, потребител, потребителска сесия и прозорец на времето.

Сега, нека създадем функция, която ще добави нашия бутон в края на съдържанието. Тук имаме две ключови изисквания.

  1. Уверете се, че бутонът е показан само за типа (ите) на публикацията, които са избрани в настройките.
  2. Уверете се, че е поставена отметка в квадратчето за добавяне на бутона.
/** * 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; }

Сега трябва да прикачим тази функция към the_content кука.

Защо? Защото the_content се използва за филтриране на съдържанието на публикацията след извличането й от базата данни и преди отпечатването й на екрана.

С това можем да добавим бутона за запазване навсякъде в съдържанието. Можем да направим това в включва / class-toptal-save.php в define_public_hooks() метод, като този:

/** * 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 ApeeScape_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' ); }

Сега, ако отидете в настройките на приставките и проверите публикации и страници, както и добавите бутона, ще видим във всяка публикация в блога, че бутонът е показан.

Екран с настройки на приставката за Wordpress

Оттук нататък трябва да продължим напред и да оформим този бутон.

Можем да направим това в public / css / toptal-save-public.css . Намерете актуализирания CSS файл тук .

Сега нека създадем функция, която всъщност ще запази елемента.

Ще направим това в нашия публичен клас и ще го направим с AJAX. Кодът е тук .

Нека включим тази функция в 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 ApeeScape_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' ); }

Можете да прочетете повече за AJAX в приставки тук .

Преди да завършим тази част, трябва да направим още две неща.

  1. Локализирайте скрипт.
  2. Създайте нашето обаждане AJAX в public / js / toptal-save-public.js

Локализирането на скрипт ще се извърши чрез wp_localize_script() функция вътре в нашата public/class-toptal-save-public.php файл.

Освен това, докато сме готови, ще се погрижим също да приложим показването на CSS и JS файлове в зависимост от състоянието на нашата отметка „използвай нашия стил“.

/** * 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 ApeeScape_Save_Loader as all of the hooks are defined * in that particular class. * * The ApeeScape_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 ApeeScape_Save_Loader as all of the hooks are defined * in that particular class. * * The ApeeScape_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 ) ); }

Сега можем да продължим с нашето повикване AJAX.

Нашият интерфейсен скрипт ще търси елементи с клас „toptal-save-button“.

За всички съвпадащи елементи ще бъде регистриран манипулатор на кликвания, който ще извърши извикването на API и съответно ще актуализира потребителския интерфейс.

Можете да намерите кода тук и необходимия CSS тук .

Добавих и функция, която ще обработва известието при добавяне на елемента.

Ето как работи всичко.

Демонстрацията на Wordpress плъгин завършена

След това трябва да създадем шорт код, който потребителите да вмъкват, където пожелаят.

Можем да направим това в 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(); }

Ние също трябва да го регистрираме, тъй като функцията сама по себе си няма да направи нищо.

В включва / class-toptal-save.php добавете този код след този ред, където добавихме нашия бутон.

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

Сега това няма да работи, защото все още не сме заредили add_shortcode() метод в нашия клас на товарач.

Тук е пълният код на включва / class-toptal-save-loader.php файл.

Добавих нова защитена променлива, наречена shortcodes, след това в метода на конструктора на класа съм я превърнал в масив.

На ред 104 съм добавил функция, която ще отговаря за създаването на нашите къси кодове; можете да видите, че той е почти същият като функцията над него (add_filter()), с изключение на това, че промених „филтъра“ в „шорткод“ и „филтрите“ в „шорткодовете“.

Също така в run() метод, добавих друг foreach които ще преминат през нашия масив с къси кодове и ще ги регистрират в WordPress.

Това беше лесно.

Не забравяйте, че в началото използвахме шорткод [toptal-saved], така че нека създадем метод, който ще покаже всички наши запазени елементи.

Намерете пълния код за този метод тук .

Сега, както винаги, трябва да регистрираме шорткода в включва / 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 ApeeScape_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' ); }

Тук имаме да направим още две неща.

  1. Оформете нашата страница със запазени елементи.
  2. Уверете се, че когато потребителят премахне запазен елемент, той изчезва от страницата със запазени елементи.

За първата задача можете да намерите необходимия CSS код тук .

За втория той включва малко скриптове отпред.

Пълният код на JavaScript за това може да бъде намерен тук .

Както ще видите на ред 52, потърсих div с клас „toptal-saved-item“.

След това на редове 70-75 проверяваме дали този родителски div има клас toptal-saved-item.

Ако се случи, скриваме елемента си с fadeOut и след това, след като анимацията приключи, напълно премахваме елемента от екрана.

Сега да преминем към по-трудната част - да я направим модулна.

Направете приставката модулна.

Основната дефиниция на модулен плъгин е:

Разширяем или модулен код е код, който може да бъде модифициран, взаимодействан, добавян или манипулиран - и всичко това, без изобщо да променя основата на основния код.

Сега, когато става въпрос за тази приставка, бих се уверил, че потребителите могат да променят HTML вътре в запазения елемент на страницата със запазени елементи.

И така, ще трябва да направим няколко промени в нашите register_saved_shortcode() метод:

  • Промяна html_to_return до inner_html_to_return навсякъде, където искаме потребителите да могат да променят HTML. Уверете се, че първата декларация от нашите inner_html_to_return променливата има „=“, без точка пред нея.
  • Използвайте apply_filters() метод за регистриране на нашия филтър.

С тези две промени трябва да получите нещо подобно това .

Сега, ако потребителите искат да взаимодействат с нашия код, те могат да добавят нещо подобно в своите functions.php файл:

Генериране на файлове за превод.

Преводът е много важен, тъй като позволява на членовете на общността на WordPress и полиглотите да превеждат вашата приставка, като я правят достъпна за не-английски сайтове.

Като се има предвид това, нека се потопим в някои технически подробности за това как WordPress обработва преводите.

WordPress използва GNU gettext локализационна рамка за превод. В тази рамка има три типа файлове:

  • Преносим шаблон за обект (POT)
  • Преносим обект (PO)
  • Машинен обект (MO)

Всеки от тези файлове представлява стъпка в процеса на превод.

За да генерираме POT файл, имаме нужда от програма, която ще търси в кода на WordPress и ще получи целия текст, предаден на нашите функции за превод, като __e() и _e(). Можете да прочетете повече за функциите за превод тук .

Тук ние превеждаме текста от POT файл, като запазваме както английски, така и нашия превод в PO файл, и конвертираме PO файла в MO файл.

Правенето на това ръчно ще отнеме много време, тъй като ще трябва да напишете няколко реда код за всеки преводим файл, който имате във вашата приставка. За щастие има по-добър начин, като се използва удобен малък плъгин, наречен Loco Translate.

След като го инсталирате и активирате, отидете на Луд преводач > Приставки> ApeeScape Save.

Оттам щракнете върху Редактиране на шаблон, след това Синхронизиране и запазване. Това ще редактира нашите toptal-save.pot файл в нашата папка езици.

Сега приставката е достъпна за превод.

Създайте своя приставка за WordPress сега.

В тази статия сме изградили доста опростен плъгин, но в процеса следвахме практиките и стандартите, които биха ни позволили да поддържаме и разширяваме този плъгин лесно.

как да практикувате машинно обучение

Използвахме функционалностите на WordPress по начини, които няма да възпрепятстват цялостната производителност на платформата.

Независимо дали става въпрос за обикновен плъгин или сложен, независимо дали сте индивидуален разработчик или a WordPress компания за разработка , планиране и следване най-добри практики е от ключово значение за изграждането на стабилна приставка.

Директор на платена медия

Други

Директор на платена медия
Ръководство за многообработващи мрежови сървърни модели

Ръководство за многообработващи мрежови сървърни модели

Back-End