How to Add Custom PHP or JavaScript for WPForms

Markdownを表示

サイトにカスタムJavaScriptまたはPHPスニペットを追加しますか？このチュートリアルでは、サイトにこれらのスニペットを追加する方法について、選択したオプションごとにステップバイステップの説明で複数のオプションを提供します。PHPまたはJavaScriptを使用してサイトにカスタムコードスニペットを追加すると、特定のニーズに合わせてサイトの機能を拡張できます。WordPressテーマの機能を拡張する場合でも、プラグインの機能を拡張する場合でも同様です。

この役立つガイドを使用すると、サイトにスニペットを追加する方法を簡単に選択できます。実装方法を選択したら、開発者ドキュメントを探索して、サイトに追加したいスニペットを選択し始めることができます！

利用可能なスニペットのホストを確認するには、開発者ドキュメントをご覧ください。

サイトにカスタムPHPまたはJavaScriptを追加する方法をより実践的に確認するには、ビデオチュートリアルをご覧ください。

実装オプション

WPFormsだけでなく、追加したいカスタムコードにも、特定のニーズに合わせてPHPまたはJavaScriptを追加するためのアプローチがいくつかあります。

WPCodeプラグインを使用する（推奨）

WPCodeプラグインを使用すると、サイトにスニペットを非常に迅速かつ簡単に簡単に追加できます。

カスタムスニペットをサイトに追加するためにこのプラグインを強く推奨する多くの理由の1つは、スニペットを保存する前に組み込みチェックがあることです。セミコロンが欠落しているか、余分な括弧が追加されている場合、スニペットは保存されません。これにより、JavaScriptエラーやPHP致命的エラーなど、不正確にコピーアンドペーストされたスニペットがサイトで発生する可能性のある問題を防ぐことができます。そして、無料バージョンでも、スニペットがアクティブになる前にこの追加の監査を受け取ります。

注意:このプラグインの詳細については、専用ドキュメントを含む詳細情報については、サイトをご覧ください。

プラグインをインストールしたら、WordPressダッシュボードの左側メニューからコードスニペットメニューに移動し、+スニペットを追加を選択します。

次に、カスタムコードを追加（新規スニペット）をクリックし、青いスニペットを使用ボタンをクリックして新しいスニペットを作成します。

新しいスニペット画面が表示されたら、あなたとサイト管理者がその目的を理解できるように、わかりやすいスニペットの名前を付けます。コードタイプドロップダウンから、PHPを選択します。

注意:当社の開発者ドキュメント全体で見つかるWPFormsスニペットはすべて、特定のCSSスニペットを除く、JavaScriptを使用するスニペットであってもPHPスニペットとして追加されます。これは、ページにWPFormsフォームがない場合に、スニペットがスクリプトをロードしないようにするためです。これにより、すべてのページに適用されないスクリプトのロードの必要性が軽減されます。

このチュートリアルの目的のために、以下のスニペットを追加します。

コードプレビューセクションで、<?php のすぐ下にスニペットを追加します。このドキュメントでは、次の例を使用します。

/**
 * Trigger submit from checkbox click
 *
 * @link https://wpforms.com/developers/how-to-automatically-submit-a-form-with-a-field-choice/
 */
function wpf_dev_automatic_submit_form() {
    ?>
    <script type="text/javascript">
    jQuery(function($){
        var event = jQuery.Event("submit");
        jQuery("input:checkbox").change(
            function()
            {
                // when any checkbox is checked, trigger this function
                if( jQuery(this).is(":checked") )
                {
                    // only run this function for the form ID 3046
                    jQuery("#wpforms-form-3046").submit();
                }
            }
        );
    });
    </script>
    <?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_automatic_submit_form', 30);

次に、挿入セクションが表示されます。この特定のスニペットについては、挿入方法で自動挿入を、場所でフロントエンドのみを選択します。

注意：場所の設定は、コードが何をする必要があるかによって異なります。コードがウェブサイトの公開ページでのフォームの外観や動作のみを変更する場合は、フロントエンドのみを選択してください。

コードがすべてで機能する必要がある場合（フォームの検証や処理など）は、代わりにすべてで実行を選択してください。たとえば、wpforms_process_validate のようなフックは、正しく機能するためにすべてで実行が必要です。

スニペットを追加したら、スニペットを保存をクリックします。これによりスニペットは保存されますが、自動的に有効にはなりません。最初に保存すると、スニペットのステータスはデフォルトで非アクティブに設定されていることに気づくでしょう。単に非アクティブからアクティブにスイッチを切り替え、更新をクリックしてスニペットをアクティブに設定します。

WPCodeを使用すると、サイトにスニペットを追加するための非常にシンプルで簡単な方法が得られます

サイト固有のプラグインを作成する

注意：この特定の方法は、PHPファイルを編集し、サーバーに直接、またはお気に入りのFTPプログラムを介してアップロードすることに慣れている場合にのみ推奨されます。

上級ユーザーで、すべてのカスタムスクリプトをサイト上の1つのファイルにまとめておきたい場合は、独自のプラグインを簡単に作成してこれらのスニペットを保存できます。

サイト固有のプラグインの作成方法について、さらに詳しい情報が必要な場合は、このチュートリアルを参照してください。

プラグインを作成するには、次の手順に従う必要があります。

1. お気に入りのテキストエディタを使用して、新しいファイルを作成します。次に、ファイルの上部に次の行を追加します。
<?php /* Plugin Name: WPForms Custom Code Snippets Plugin URI: https://wpforms.com/ Description: Plugin for adding custom code snippets Author: WPForms Team Version: 1.0 Author URI: https://wpforms.com/ */
2. ファイルをwpforms-custom-snippets.phpとして保存します。
3. ファイルを圧縮またはzipします。
4. WordPress管理画面にログインし、プラグインの下にある新規追加をクリックします。画面の指示に従って、作成した.zipファイルをアップロードして有効化します。
5. プラグインを有効化したら、プラグイン » エディターからファイルを確認できるようになります。

注意：WordPressは、プラグインファイルやテーマファイルを含む、いかなるファイルに対してもライブでの変更を加えることを推奨しません。

子テーマ内のfunctions.phpの使用

子テーマの作成は、(再び)上級者向けです。これは、テーマファイル、テーマに含まれるスタイルシート、およびWPForms開発者向けチュートリアルやスニペットで説明されているような、使用したいカスタム関数に対する代替ソリューションです。

WPBeginnerの友人たちが、子テーマの作成方法に関する非常に優れた記事をまとめてくれました。このチュートリアルには、それに沿って進めるためのビデオも含まれています。

注意: テーマファイルを直接編集することは決してお勧めしません。テーマの作者がテーマのアップデートをリリースした場合、あなたが加えたすべての編集は失われます。子テーマを使用することで、途中で加えたカスタマイズを失うことなく、テーマを最新の状態に保つ機会が増えます。

この例では、WordPressテーマTwenty Twentyから子テーマを作成します。これを行うには、以下の手順に従ってください。

1. デスクトップにtwentytwenty-childという名前の新しいフォルダを作成します。
2. テキストドキュメントを作成し、次の行を追加します。
<?php /* Theme Name: Twenty Twenty Child Theme URI: http://yoursite.com/twenty-twenty-child/ Description: Twenty Twenty Child Theme Author: Your name Author URI: http://yoursite.com Template: twentytwenty Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentychild */
3. このファイルをtwentytwenty-childフォルダ内に保存し、style.cssという名前を付けます。
4. 同じフォルダ内に、新しいドキュメントを作成し、functions.phpという名前を付けます。このファイルには、開いているPHPタグのみが含まれます: <?php。

5. twentytwenty-childフォルダを圧縮またはzip化します。
6. WordPress管理画面にログインし、外観 » テーマの下にある新規追加をクリックして、作成したtwentytwenty-child.zipファイルをアップロードします。求められたら、このテーマも有効化してください。
7. これで、WordPress管理画面にTwenty Twenty Childテーマが有効化されているのが表示されます。

子テーマを使用してカスタムPHPまたはJavaScriptを追加できるようになりました

これらの手順が完了すると、Twenty Twentyの動作する子テーマと、スニペットを追加するための空のfunctions.phpファイル、およびカスタムCSSを追加できる空のスタイルシートが用意されます。

テーマは以前と同様に機能し、必要なすべてのファイルとスタイルを最初に読み込みます。ただし、WPForms開発者ドキュメントから使用するカスタムスニペットは、子テーマのfunctions.phpに追加され、追加したスニペットに基づいてフォームがカスタマイズされます。

そして、これらはサイトにカスタムPHPまたはJavaScriptを追加する簡単な方法のほんの一部です。

注記

サイトにカスタムコードを追加する際は、予期せぬ事態からコードを保護することが重要です。そのため、どの方法を選択する場合でも、常にサイトをバックアップしておくことをお勧めします。そうすれば、必要に応じてコードファイルの以前のバージョンにアクセスできます。

よくある質問

Q: WPFormsにカスタムコードを追加するのに、これはどのように役立ちますか？

A: このチュートリアルは、WPFormsのコードスニペットに特化したものではなく、あらゆるコードスニペットに関するものです。チュートリアルセクションやスニペットセクションで言及されているWPFormsのコードスニペットを含め、あらゆるコードスニペットを追加するために、上記で最も簡単なオプションを見つけてください。

WPForms にカスタム PHP または JavaScript を追加する方法

AI要約