ワードプレスにタイプライターエフェクトを追加する方法

				
					// ショートコードを定義してタイプライターエフェクトを実装する
function typewriter_shortcode($atts, $content = '') {
    // CSSとJavaScriptコードを含む
    $typewriter_script = "
    <style>
        .typewriter {
            font-family: 'MS Mincho', serif; /* フォントをMS 明朝に設定 */
            font-size: 30px; /* テキストのフォントサイズを50pxに設定 */
            overflow: hidden; /* テキストがはみ出さないようにする */
            white-space: pre-wrap; /* 改行を有効にする */
            margin: 0 auto; /* テキストを中央揃えにする */
            display: inline-block; /* インライン要素として表示 */
            border-right: .15em solid orange; /* カーソルを表示 */
            animation: blink-caret .75s step-end infinite;
        }

        @keyframes blink-caret {
            from, to { border-color: transparent; }
            50% { border-color: orange; }
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var elements = document.getElementsByClassName('typewriter');
            Array.prototype.forEach.call(elements, function(el) {
                var text = el.innerHTML;
                el.innerHTML = '';
                var i = 0;
                function type() {
                    if (i < text.length) {
                        el.innerHTML += text.charAt(i);
                        i++;
                        setTimeout(type, 100);
                    }
                }
                type();
            });
        });
    </script>
    ";

    return '<div class="typewriter">' . do_shortcode($content) . '</div>' . $typewriter_script;
}
add_shortcode('typewriter', 'typewriter_shortcode');