[ 解決済 ] contactform7でjquery.autoKana.jsを利用したい

VWSとは フォーラム その他 [ 解決済 ] contactform7でjquery.autoKana.jsを利用したい

[ 解決済 ] contactform7でjquery.autoKana.jsを利用したい

  • このトピックには3件の返信、2人の参加者があり、最後にjoen1900により2年、 5ヶ月前に更新されました。
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #64690

    joen1900
    参加者

    ■ WordPress のバージョン
    WordPress 5.9.3

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    バージョン: 14.20.3

    ■ Pro Unit のバージョン
    Lightning Proバージョン: 4.3.1

    ■ スキンの種類
    Origin III

    ■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
    確認しました。

    ■ 期待する動作
    contactform7でjquery.autoKana.jsを利用して
    自動で漢字の名前のかな変換をしたい。

    ■ 自分で試した事
    Lightning Child Sample
    にJSフォルダーが無いので
    どこにjquery.autoKana.jsを
    登録するかわかりません。

    ■ 症状が発生するブラウザ
    Chrome

    ■ 実際の症状
    Lightning Child Sample
    にJSフォルダーが無いので
    どこにjquery.autoKana.jsを
    登録するかわかりません。

    登録できたら、

    function.php

    <script type=”text/javascript” src=”https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1″></script&gt;
    <script type=”text/javascript” src=”jquery.autoKana.js”></script>

    $(function() {
    $.fn.autoKana(‘input[name=”sei”] ‘, ‘input[name=”seikana”]’, {katakana:true}); //name属性で判別する場合
    $.fn.autoKana(‘#mei’, ‘#meikana’, {katakana:true}); //idで判別する場合
    }); 

    を記入すれば利用できますか?


    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #64745

    joen1900
    参加者

    「自己解決しました」
    親のheader.php
    に記述しました。

    #64746

    親のheader.php
    に記述しました。

    親のファイルを変更すると今後テーマのアップデートの度に作業が必要になります。
    アップデートしない場合、例えばまもなくリリースの WordPress 6.0 対応もテーマ側で作業進めているのに、自分で対応しないといけなくなります。

    下記参照の上…
    https://github.com/wckansai2016/make-wp-theme#javascript%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E5%87%BA%E5%8A%9B

    子テーマの functions.php などに以下記載ください

    
    function my_add_script() {
    	// js ファイルを登録.
    	wp_enqueue_script( '★ハンドル名を任意に設定★', get_stylesheet_directory_uri() . '/jquery.autoKana.js', array( 'jquery' ), '★バージョン名を適当に記入★', true );
    	// 追加したjsファイルに依存する JavaScript.
    	$script = '
    	jQuery(function() {
    		jQuery.fn.autoKana(\'input[name="sei"]\' , \'input[name="seikana"]\', {katakana:true}); //name属性で判別する場合
    		jQuery.fn.autoKana(\'#mei\', \'#meikana\', {katakana:true}); //idで判別する場合
    	});';
    	// 追加したjsファイルに依存する JavaScript をインラインで追加.
    	wp_add_inline_script( '★ハンドル名を任意に設定★', $script, 'after' );
    }
    add_action( 'wp_enqueue_scripts', 'my_add_script' );

    概ね上記のコードを調整すれば出来ると思います。

    上記がうまくいかなければ最悪

    できる!WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦!



    vektor-inc.co.jp/post/vws-online-studygroup-020-report/
    を見て、

    add_action( 'wp_footer',function(){
    ?>
    ここに JSを記入
    <?php
    });

    に書いてください。

    #64757

    joen1900
    参加者

    お世話になります。
    無事、子テーマに移植でき稼働しました。
    ありがとうございました。

4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • このトピックに返信するにはログインが必要です。