カナの自動入力

query.autoKana.js

入力フォームの氏名に漢字とカナ欄がある場合、漢字が入力されると自動でカナが入力されるライブラリです。　

jquery.autoKana.jsは下記からダウンロードします。
GitHub

GITHUBにアクセスすると以下のファイルがあります。

Codeから複数まとめてダウウンロードした場合 jquery.autoKana.js以外にもファイルが含まれる場合がありますが、必要なのは jquery.autoKana.jsだけです。

使い方

1.組み込み

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"><script>
    <script src="js/jquery.autoKana.js"></script>

※ jqueryのバージョン や jquery.autoKana.jsのパスは実行環境に合わせてください 2.実装
フリガナは平仮名とカタカナから選択できます。

  <input type="text" id="UserName">
  <input type="text" id="UserFuriganaH"> 　・・・ ひらがな
  <input type="text" id="UserFuriganaK"> 　・・・ カタカナ

  <script>
    $.fn.autoKana('#UserName', '#UserFuriganaH');
    $.fn.autoKana('#UserName', '#UserFuriganaK',{katakana:true});
  <script>

動作確認

お名前：
フリガナ：

WordPressに 組み込むには
WordPressでは、<script タグ でjquery.autoKana.jsを読み込むことは推奨されない
1. “\wp-includes\js\jquery以下に
　　autokanaフォルダを作成し、ダウンロードしたjquery.autoKana.js等を置く
　　これにより配置した結果のパスは以下となる　
　　”\wp-includes\js\jquery\autokana\jquery.autoKana.js”

2. “\wp-content\themes\テーマ名\functions.php”
　にjquery.autoKana.jsを読み込むための関数を追加する

// functions.php に追加
function enqueue_autokana_script_for_post() {
    if ( is_singular('post') || is_page() ) {
        wp_enqueue_script(
            'jquery-autokana', 
            includes_url( '/js/jquery/autokana/jquery.autoKana.js' ), 
            array( 'jquery' ), // 依存関係に 'jquery' を必ず指定
            '1.0', 
            true // 直前で読み込み
        );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_autokana_script_for_post' );