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

[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はフォーラムライセンスが有効のユーザーにのみ表示されます

[joen1900]

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

[石川＠Vektor,Inc.]

親の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
});

に書いてください。

[joen1900]

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

[投稿者]

投稿