ご注意!

この記事には PHP コードが含まれており、開発者を対象としています。このコードは便宜上提供していますが、コードのカスタマイズやサードパーティの開発についてはサポートを提供していません。

追加のガイダンスについては、WPBeginner の カスタムコードの追加方法に関するチュートリアル を参照してください。

閉じる

説明

wpforms_display_submit_spinner_src フィルターは、フォーム設定でAJAXによるフォーム送信を有効にするが有効になっており、フォームが送信された場合にのみ実行されます。

パラメーター

$src
(string) スピナーに使用される画像のソース(URL)
$form_data
(配列) 後で利用できるように処理されたフォームの設定/データの配列。

ソース

wpforms/src/Frontend/Frontend.php

詳細情報

wpforms_display_submit_spinner_src フィルターは、フォーム設定でAJAXが有効になっている場合に、フォーム送信中に表示されるアイコン/画像を変更するために使用できます。

フォームビルダーの設定画面の「一般」タブでAJAXを有効または無効にする

この例では、すべてのフォームのスピナーソースを変更します。

/**
 * Filter for changing the spinning loader icon shown as the form is submitted.
 *
 * @link    https://wpforms.com/developers/wpforms_display_submit_spinner_src/
 *
 * @param   string  $src        Source of the image used for the spinner.
 * @param   array   $form_data  Processed form settings/data, prepared to be used later.
 *
 * @return  string
 */

function custom_wpforms_display_submit_spinner_src(  $src ) {
  
    return 'https://yoursite.com/your-image.svg';
}

add_filter( 'wpforms_display_submit_spinner_src', 'custom_wpforms_display_submit_spinner_src', 10, 2 );

この例では、特定のフォームを対象としています。フォームIDは42です。

/**
 * Filter for changing the spinning loader icon shown as the form is submitted for a specific form.
 *
 * @link    https://wpforms.com/developers/wpforms_display_submit_spinner_src/
 *
 * @param   string  $src        Source of the image used for the spinner.
 * @param   array   $form_data  Processed form settings/data, prepared to be used later.
 *
 * @return  string
 */

function custom_wpforms_display_submit_spinner_src( $src, $form_data ) {

    if ( $form_data[ 'id' ] === '42' ) {

        $src = 'https://yoursite.com/your-image.svg';

    }

    return $src;
}
add_filter( 'wpforms_display_submit_spinner_src', 'custom_wpforms_display_submit_spinner_src', 10, 2 );

推奨される画像サイズは26×26です。代替として、.wpforms-submit-spinner CSSクラスを対象とするCSSでサイズを定義することもできますが、追加されたCSSはデフォルトのインラインスタイルを上書きするために!importantを使用する必要があります。

記事参照: 送信時のプリローダーアイコンを変更する方法