WordPressプラグインを構築するための究極のガイド

公開: 2022-03-11

プラグインは、特定の機能を必要とするWordPressWebサイトの重要な部分です。

公式のWordPressリポジトリには45,000以上のプラグインがありますが、これらのプラグインの多くはマークを外しています。

プラグインがリポジトリにあるからといって、そのパフォーマンスを妨げたり、セキュリティを危険にさらしたりしないという意味ではありません。

それで、あなたは何ができますか? さて、あなたはあなた自身を構築することができます。

WordPressプラグインを構築するための究極のガイド

優れたWordPressプラグインの構築は、慎重な計画から始まります。

ゼロから構築する場合でも、定型文に基づいて構築する場合でも、十分に文書化されたベストプラクティスに従うことは絶対に不可欠です。

このチュートリアルでは、簡単なWordPressプラグインを正しい方法で構築する方法を学びます。

読みながら最終的なソースコードを確認したい場合は、ここで見つけることができます。

計画から始めます。

まず、プラグインが持つ機能をリストし、プラグインが何をする必要があるかを正確に概説しましょう。

私たちが構築しているプラ​​グインにより、サイト訪問者はコンテンツを保存して後で読むことができます。

登録ユーザーの場合はリストをデータベースに保存し、匿名ユーザーの場合はCookieを使用してリストを保存します。

以下は、プラグインが提供する機能の概要です。

設定画面

  • 管理者がコンテンツの最後に「アイテムを保存」ボタンを追加する機能。
  • このボタンを追加する投稿の種類を選択する機能。
  • 事前定義されたスタイルを使用するかどうかを決定するオプションをユーザーに提供します
  • ログインしたユーザーに対してのみ機能を有効にするオプションを提供します。
  • プラグインの訪問者向けの部分に表示されるメッセージを変更するオプションを提供します。

コンテンツを保存する

  • ユーザーがログインしている場合は、コンテンツをカスタムユーザーフィールドに保存します
  • ユーザーがログインしていない場合は、コンテンツをCookieに保存します

メッセージ

以下のメッセージは、訪問者がプラグインを操作したことに応じて、またはアクション可能なアイテムのラベルとして画面に表示されます。

  • 「アイテムを保存します。」
  • 「アイテムを保存解除します。」
  • 「保存しました。 保存されたアイテムを参照してください。」
  • 「保存されたアイテムはありません。」

保存した画面

これは、訪問者が保存した投稿のリストを表示する場所です。

  • 保存されたアイテムのリストを表示する
  • プラグインのアクティブ化時に保存済みページを作成する
  • プラグインの非アクティブ化時に保存されたページを削除する

ショートコード

ショートコードを使用すると、保存されたページを追加された場所にレンダリングできます。

ボイラープレートを使用します。

これは私が見つけた中で最高の定型文です。 それはよく構造化され、オブジェクト指向で、効率的です。 それはすべてのベストプラクティスに従います。 そして、それは速くて軽いです。

このページを使用して、このWordPressプラグインボイラープレートに基づいてプラグインコードベースを生成できます。

Wordpressボイラープレート

.zipファイルを取得する必要があります。

それを抽出し、WordPressインストールフォルダー( wp-content / plugins / )に配置します。

WordPressダッシュボードを開いてプラグインに移動すると、プラグインがそこにリストされていることがわかります。 まだアクティブにしないでください。

アクティブ化と非アクティブ化を処理します。

プラグインがアクティブ化と非アクティブ化を適切に処理することが重要です。

プラグインがアクティブになると、「保存済み」という名前のページが作成され、ユーザーの保存済みアイテムが保持されます。

そのページを作成するときに、保存したアイテムのショートコードをそのページのコンテンツに追加します。

最後に、ページを保存します。 IDを取得します。 後でプラグインを非アクティブ化したときにアクセスできるように、データベースに保存します。

プラグインが非アクティブ化されると、データベースから「保存済み」ページIDを取得し、「保存済み」ページを削除して、プラグイン自体の痕跡をすべて削除します。

これはすべて、 includes/class-toptal-save-activator.phpおよびincludes/class-toptal-save-deactivator.phpで実行できます。

アクティベーションプロセスから始めましょう:

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

プラグインがアクティブ化されると、 activate()関数が呼び出されます。

wp_insert_post()関数を使用して新しいページを作成し、add_option( add_option()を使用してページIDをデータベースに保存します。

それでは、プラグインの非アクティブ化に進みましょう。

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

プラグインが非アクティブ化されたときに呼び出されるdeactivate()関数は、 get_option()関数を使用してページを取得し、wp_delete_post( wp_delete_post()を使用してデータベースから対応するページを削除し、 delete_option()を使用してオプションテーブルから保存されたIDを削除します。 。

プラグインをアクティブにしてページに移動すると、ショートコードが含まれる「保存済み」というページが表示されます。

Wordpressモジュールのアクティベーション

プラグインを非アクティブ化すると、そのページは削除されます。

wp_delete_post()メソッドの引数としてtrueを使用したため、このページはゴミ箱に移動せず、完全に削除されます。

プラグイン設定ページを作成します。

admin / class-toptal-save-admin.phpファイル内に設定ページを作成できます。このファイルで最初に行う必要があるのは、 enqueue_styles() wp_enqueue_style()の呼び出しを削除またはコメントアウトすることです。管理画面にCSS/JSを追加しない場合は、 enqueue_scripts()関数内でwp_enqueue_script()を呼び出します。

ただし、スタイルを追加する場合は、すべての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 )画面に追加することもわかっています。 したがって、これら2つを組み合わせると、変数$hookの値が'tools_page_toptal-save' (2つの値の連結)になることがわかります。

プラグイン設定ページが表示されていない場合は、 returnを使用して、現在の関数の実行をただちに終了します。

プラグイン画面をネイティブのWordPress画面のように見せたいので、管理画面にカスタムスタイルを追加しないので、そのコードは追加しません。

これで、設定ページの作成に進むことができます。

まず、 add_submenu_page()関数を呼び出す簡単なメソッドをToptal_Save_Adminクラスに追加します。

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

これは、 add_submenu_page()関数に渡すかなりの数の引数です。 それぞれの意味は次のとおりです。

  • 親スラッグ:親メニューのスラッグ名(または標準のWordPress管理ページのファイル名)。 親ナメクジの完全なリストはここで見ることができます。

  • ページタイトル:メニューが選択されたときにページのタイトルタグに表示されるテキスト。

  • メニュータイトル:メニュータイトルに使用されるテキスト。

  • 機能:このメニューを表示するためにユーザーが必要とする機能。 管理パネルオプションへのアクセスを許可する「manage_options」を使用しました。 役割と機能の詳細については、こちらをご覧ください。

  • メニュースラッグ:このメニューを参照するスラッグ名。

  • 呼び出し可能関数:このページのコンテンツを出力するために呼び出される関数。 呼び出し可能な関数の名前を定義したので、それを作成する必要がありますが、作成する前に、 $thisを使用して、それ自体の中からクラスのインスタンスを参照しました。 PHPのドキュメントには次のように書かれています。

疑似変数$thisは、オブジェクトコンテキスト内からメソッドが呼び出されたときに使用できます。 $ thisは、呼び出し元のオブジェクト(通常はメソッドが属するオブジェクトですが、メソッドが2次オブジェクトのコンテキストから静的に呼び出される場合は別のオブジェクト)への参照です。

次に、クラスに別のメソッドを追加します。

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

この呼び出し可能な関数には、設定ページを表示するテンプレートが含まれています。 admin/ partialsにあるtoptal-save-admin-display.phpというファイルを参照していることがわかります。

ここで、[ツール]に移動すると、その画面は表示されません。 なんで? register_admin_page()メソッドをadmin_menuフックにフックしていないためです。

これを行うには、 includes / class-toptal-save.phpファイルを開き、 define_admin_hooks()メソッド内の$plugin_admin = new Toptal_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 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' ); }

add_action()の呼び出しについては心配しないでください。これについては、後で説明します。

今のところ、[ツール]ページを開くだけで、[ToptalSave]ページが表示されます。 開くと動作しますが、何もないので空白の画面が表示されます。

Wordpressツールページ

少し進歩していますが、ここにいくつかの設定を表示する必要があるので、それを実行しましょう。

フィールドの作成を開始します。これは、WordPress設定APIを使用して行うことです。

慣れていない場合は、データの保存に使用できるフォームフィールドを作成できます。

 /** * 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() :設定ページのセクションに新しいフィールドを追加します。

これらの3つの関数のいずれかを使用するたびに、サニタイズコールバックが提供されました。 これにより、データをサニタイズし、フィールドの場合は適切なHTML要素(チェックボックス、ラジオ、入力など)を表示できます。

また、必要に応じて、label_for、description、defaultなどのデータの配列をこれらのコールバックに渡しました。

これで、これらのサニタイズコールバックを作成できます。 これらのコールバックのコードはここにあります。

これはすべて問題ありませんが、フィールドをadmin_initフックにフックしてから表示する必要があります。

実行中の特定のポイントで、または特定のイベントが発生したときにWordPressコアが開始するフックであるadd_actionを使用します。 admin_initは、ユーザーが管理領域にアクセスすると、他のフックの前にトリガーされます。

まず、 includes/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' ); }

次に、 admin / components / topal-save-admin-display.phpで、プラグインの管理領域のビューを提供する必要があります。

 <?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>

settings_fields()関数は、設定ページのnonce、action、およびoption_pageフィールドを出力するために使用されます。

その後に、特定の設定ページに追加されたすべての設定セクションを出力するdo_settings_sections()が続きます。

最後に、提供されたテキストを使用して送信ボタンを追加し、 submit_button()関数を使用して適切なクラスを追加します。

さて、私たちのページを見ると、次のようになります。

Wordpressページの完全な例

管理領域で行う必要があるのはこれだけです。 プラグインの公開部分の作業を始めましょう。

プラグイン機能を作成します。

ここに興味深い部分があります。 機能を分離するには、複数の機能を作成する必要があります。

  • 「アイテムを保存」ボタンを表示する機能。 これは、現在のユーザーがそのアイテムをすでに保存しているかどうかを確認する必要があります。それに応じて、色だけでなく異なるテキストも表示されます。
  • アイテムを保存/保存解除する関数(AJAX)。
  • 保存されたすべてのアイテムを表示する機能。
  • ショートコードを生成する関数。

それでは、ボタンの表示から始めましょう。 これらすべてをpublic/class-toptal-save-public.phpで実行します。

これを実行している間、次のような特定の処理を行うために、いくつかの追加のヘルパー関数を作成する必要があります。

  • Webサイトの一意のCookie名を作成する
  • クッキーの作成
  • Cookieの値を取得する
  • 設定からメンバーシップステータスを取得する

これらのヘルパー関数のコードはここにあります。

get_unique_cookie_name()関数は、WebサイトのURL、Webサイト名、およびカスタム定義のサフィックスから一意のCookie名を生成するのに役立ちます。 これは、同じドメイン内の複数のWordPressサイトで使用されたときに、生成されたCookie名が競合しないようにするためです。

toptal_set_cookie() ()関数とtoptal_get_cookie()関数は、それぞれCookieの値を作成および取得します。

get_user_status()関数は、設定のメンバーシップチェックボックスのステータスを取得します(チェックすると1を返し、それ以外の場合は0を返します)。

さて、ジューシーな部分は、保存ボタンの表示を担当する関数を作成します。 show_save_button()関数の実装はここにあります。 そして、ここでWordPressAPIのいくつかの新しい関数を使用しました。

  • get_queried_object_id() :現在クエリされているオブジェクトのIDを取得します。
  • is_user_logged_in() :現在の訪問者がログインしているユーザーであるかどうかを確認します。
  • get_user_meta() :ユーザーのユーザーメタデータフィールドを取得します。
  • wp_create_nonce() :特定のアクション、ユーザー、ユーザーセッション、および時間枠に関連付けられた暗号化トークンを作成します。

それでは、コンテンツの最後にボタンを追加する関数を作成しましょう。 ここでは、2つの重要な要件があります。

  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は、データベースから取得された後、画面に出力される前に、投稿のコンテンツをフィルタリングするために使用されるためです。

これにより、コンテンツのどこにでも保存ボタンを追加できます。 これは、 define_public_hooks()メソッドのincludes/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 ); $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で行います。 コードはこちらです。

この関数をWordPressAJAXにフックしてみましょう。

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

プラグインのAJAXについて詳しくは、こちらをご覧ください。

この部分を終える前に、さらに2つのことを行う必要があります。

  1. スクリプトをローカライズします。
  2. public / js/toptal-save-public.jsでAJAX呼び出しを作成します

スクリプトのローカライズは、 public/class-toptal-save-public.phpファイル内のwp_localize_script()関数を介して行われます。

また、その間、「スタイルを使用する」チェックボックスの状態に応じて、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 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 ) ); }

これで、AJAX呼び出しを続行できます。

フロントエンドスクリプトは、クラス「toptal-save-button」を持つ要素を検索します。

クリックハンドラーが一致するすべての要素に登録され、API呼び出しが実行され、それに応じてUIが更新されます。

ここにコードがあり、ここに必要な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(); }

関数自体は何もしないので、登録する必要もあります。

include / class-toptal-save.phpで、ボタンを追加した行の後にこのコードを追加します。

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

ローダークラス内にadd_shortcode()メソッドをまだロードしていないため、これは機能しません。

これがincludes/class-toptal-save-loader.phpファイルの完全なコードです。

shortcodesと呼ばれる新しい保護変数を追加し、クラスのコンストラクターメソッドでそれを配列に変換しました。

104行目に、ショートコードの作成を担当する関数を追加しました。 「filter」を「shortcode」に、「filters」を「shortcodes」に変更したことを除けば、その上の関数( add_filter() )とほとんど同じであることがわかります。

また、 run()メソッドに、shortcode配列を通過する別のforeachを追加し、それらをWordPressに登録しました。

それは簡単でした。

最初はショートコード[toptal-saved]を使用したので、保存したすべてのアイテムを表示するメソッドを作成しましょう。

このメソッドの完全なコードはここにあります。

いつものように、 includes/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' ); }

ここでやるべきことがあと2つあります。

  1. 保存したアイテムのページのスタイルを設定します。
  2. ユーザーが保存済みアイテムを削除すると、保存済みアイテムページから消えることを確認してください。

最初のタスクについては、ここで必要なCSSコードを見つけることができます。

2つ目は、フロントエンドのスクリプトが少し含まれています。

そのための完全なJavaScriptコードはここにあります。

52行目にあるように、クラス「toptal-saved-item」でdivを検索しました。

次に、70〜75行目で、その親divにクラスtoptal-saved-itemがあるかどうかを確認します。

含まれている場合は、fadeOutを使用してアイテムを非表示にし、アニメーションが終了した後、画面からアイテムを完全に削除します。

それでは、より難しい部分、つまりモジュール化に移りましょう。

プラグインをモジュール化します。

モジュラープラグインの基本的な定義は次のとおりです。

拡張可能またはモジュラーコードは、コアコードベースを変更することなく、変更、操作、追加、または操作できるコードです。

さて、このプラグインに関しては、ユーザーが保存済みアイテムページの保存済みアイテム内のHTMLを変更できることを確認します。

したがって、 register_saved_shortcode()メソッドにいくつかの変更を加える必要があります。

  • ユーザーがHTMLを変更できるようにしたい場合は、 html_to_returninner_html_to_returnに変更します。 inner_html_to_return変数の最初の宣言の前にドットがない「=」があることを確認してください。
  • apply_filters()メソッドを使用して、フィルターを登録します。

これらの2つの変更により、次のような結果になるはずです。

これで、ユーザーがコードを操作したい場合は、 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; }

翻訳ファイルを生成します。

翻訳は、WordPressコミュニティのメンバーやポリグロットがプラグインを翻訳し、英語以外のサイトからアクセスできるようにするため、非常に重要です。

そうは言っても、WordPressが翻訳を処理する方法についての技術的な詳細に飛び込みましょう。

WordPressは、翻訳にgettextローカリゼーションフレームワークを使用します。 このフレームワークには、次の3種類のファイルがあります。

  • ポータブルオブジェクトテンプレート(POT)
  • ポータブルオブジェクト(PO)
  • マシンオブジェクト(MO)

これらの各ファイルは、翻訳プロセスのステップを表しています。

POTファイルを生成するには、WordPressコードを検索し、 __e()_e() )などの翻訳関数に渡されるすべてのテキストを取得するプログラムが必要です。 翻訳機能の詳細については、こちらをご覧ください。

ここでは、POTファイルからテキストを翻訳し、英語と翻訳の両方をPOファイルに保存し、POファイルをMOファイルに変換します。

プラグインにある翻訳可能なファイルごとに数行のコードを記述する必要があるため、これを手動で行うには多くの時間がかかります。 幸い、LocoTranslateと呼ばれる便利な小さなプラグインを使用するより良い方法があります。

インストールしてアクティブ化したら、Loco Translate> Plugins>ToptalSaveに移動します。

そこから、[テンプレートの編集]、[同期して保存]の順にクリックします。 これにより、languagesフォルダー内のtoptal-save.potファイルが編集されます。

これで、プラグインを翻訳できるようになりました。

今すぐWordPressプラグインを作成してください。

この記事ではかなり単純なプラグインを作成しましたが、その過程で、このプラグインを簡単に保守および拡張できるようにするためのプラクティスと標準に従いました。

プラットフォームの全体的なパフォーマンスを妨げない方法でWordPressの機能を使用しました。

単純なプラグインであろうと複雑なプラグインであろうと、個人の開発者であろうとWordPress開発会社であろうと、堅牢なプラグインを構築するには、ベストプラクティスを計画して従うことが重要です。