web-dev-qa-db-ja.com

カスタムフォームをテーマに追加

私はWordPressの新しいバージョンをインストールし、物事をきちんと保つために開発目的のために子テーマを使用しています。

私はPostメソッドで送信してWePayによって処理される寄付用のカスタムHTMLフォームを作成しました。

HTMLフォームには、ユーザーが「その他の金額」オプションを選択したときに数字だけが入力されるようにするためのJavaScriptがあります。

今の課題は、このソリューションをWordPressに実装することになると困惑することです。

JavaScriptはどこに行くべきですか？ （たとえば、メインテーマからheader.phpをコピーし、それを子テーマのディレクトリに入れて、そこにJavaScriptを配置するという人もいます）

PHPファイルはどこに行きますか。 （パスを取得するのに苦労しましたが、直接リンクすると500エラーが発生しました）

javascriptforms
2
Jaxian

自分のサイトに自分のフォームを表示させる方法はいくつかあります。

  • フォーム付きショートコード/ウィジェットの箱詰め
  • ページテンプレートを作成する

Phpでフォームを処理する方法はいくつかあります。

  • ページテンプレートのphpファイルに直接処理を追加する
  • init/wpまたはその他のアクションに処理を追加する
  • ajaxアクションに処理を追加する

私はこれらをどのようにするでしょう：

  • ページテンプレートを作成する
  • フォームを挿入する
  • これらのページテンプレート専用のスクリプトとスタイルをエンキューする
  • アクション属性を<?php echo admin_url( 'admin-ajax.php' ); ?>に設定
  • name="action"とvalue="my_form_action"で隠し入力を追加する
  • ajaxアクションを作成するadd_action( 'wp_ajax_my_form_action', 'my_form_function' );とadd_action( 'wp_ajax_nopriv_my_form_action', 'my_form_function' );_noprivはログインしていないユーザー向けです
  • フォーム処理関数my_form_functionを作成する

例：template-my-form.php

<?php
/* Template Name: My Form Template */
get_header();
// here goes form..
// you can copy index.php, rename it and insert your form
// where starts if( have_posts() )
?><form action="<?php echo admin_url( 'admin-ajax.php' ); ?>">...</form><?php
get_footer();

functions.php

add_action( 'wp_ajax_my_form_action', 'my_form_function' );
add_action( 'wp_ajax_nopriv_my_form_action', 'my_form_function' );
function my_form_function() {
    $form_element = sanitize_text_field( $_REQUEST['form_name'] );
    // here you do what you'r form should do
    // remember that you'r now in admin-ajax.php
    // so you need to redirect back to your page
    // check wp_referer_field and wp_nonce_field

    // if you want to make js ajax calls you should do wp_send_json_success( array );
}
add_action( 'wp_enqueue_scripts', 'my_form_scripts' );
function my_form_scripts() {
    if( is_page_template( 'template-my-form.php' ) ) {
        wp_enqueue_scripts('my_file', get_stylesheet_directory_uri() . '/js/my_script.js', array( 'jquery' ) );
    }
}

my_script.js

$(document).on( 'submit', 'form', function( event ) {
    var $ajax = $(this).find( 'input[name="ajax"]' );
    if( $ajax.length < 1 || parseInt( $ajax.val() ) < 1 )
        return;
    $.ajax( {
        action: $(this).attr( 'action' ),
        data: $(this).serialize(),
        success: function( res ) {
            if( res.success ) {
                // do on success form proccessing
                // res.data holds array passed to wp_send_json_success
            } else {
                // do on error form proccessing
                // res.data holds array passed to wp_send_json_error
            }
        }
    } );

} );
2
Maikal