技術

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

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

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

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



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

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

優れたWordPressプラグインの構築 注意深い計画から始まります。

デザインの原則は何ですか

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

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

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

計画から始めます。

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

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

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

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

設定画面

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

コンテンツの保存

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

メッセージ

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

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

保存した画面

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

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

ショートコード

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

ボイラープレートを使用してください。

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

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

Wordpressの定型文

あなたは得る必要があります .zip ファイル。

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

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

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

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

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

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

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

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

私たちはこれらすべてを include / class-toptal-save-activator.php そして include / class-toptal-save-deactivator.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() 関数を使用してページIDをデータベースに保存します add_option() 。

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

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

さて、これが問題です。スラッグトップタルセーブを使用して設定ページを作成し、それをツールに追加することもわかっています（ tools.php ）画面。したがって、これら2つを組み合わせると、変数の値$hookがわかります。 ‘tools_page_toptal-save’になります--2つの値の連結。

プラグイン設定ページが表示されていない場合は、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は、オブジェクトコンテキスト内からメソッドが呼び出されたときに使用できます。 $ 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'; }

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

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

私たちは私たちを開くことによってそれを行うことができます include / 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の保存ページが表示されます。開くと動作しますが、何もないため空白の画面が表示されます。

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()の内部関数を追加して、すべてのフィールドを構成できます。関数の完全な実装を見つけることができます ここに 。上記の関数では、次のものを使用しました。

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

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

これで、これらのサニタイズコールバックを作成できます。あなたはそれらのコールバックのコードを見つけることができます ここに 。

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

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

まず、アクションを追加する必要があります 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 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 。

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

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

これにより、コンテンツのどこにでも保存ボタンを追加できます。私たちはでそれを行うことができます include / 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で行います。コードは ここに 。

この関数を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 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についてもっと読むことができます ここに 。

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

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

スクリプトのローカライズは、 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呼び出しを実行し、それに応じて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()をまだロードしていないため、これは機能しません。ローダークラス内のメソッド。

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

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

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

また、run()でメソッド、別のforeachを追加しましたショートコード配列を通過し、WordPressに登録します。

それは簡単でした。

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

このメソッドの完全なコードを見つける ここに 。

さて、いつものように、ショートコードをに登録する必要があります 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 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' ); }

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

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

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

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

そのための完全なJavaScriptコードは見つけることができます ここに 。

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

次に、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()を使用しますフィルタを登録する方法。

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

これで、ユーザーがコードを操作したい場合は、functions.php内に次のようなものを追加できます。ファイル：

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

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

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

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

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

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

POTファイルを生成するには、WordPressコードを検索し、__e()などの翻訳関数に渡されるすべてのテキストを取得するプログラムが必要です。および_e()。あなたは翻訳機能についてもっと読むことができます ここに 。

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

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

インストールしてアクティブ化したら、に移動します クレイジー翻訳 >プラグイン> ApeeScape保存。

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

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

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

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

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

単純なプラグインであろうと複雑なプラグインであろうと、個人の開発者であろうと、 WordPress開発会社 、計画とフォロー ベストプラクティス 堅牢なプラグインを構築するための鍵です。

ワイヤーフレームマッピング：スコープラグを回避する方法

Uxデザイン

ワイヤーフレームマッピング：スコープラグを回避する方法
Magentoの紹介：トップeコマースエコシステムのナビゲート

Magentoの紹介：トップeコマースエコシステムのナビゲート

技術