WordPressでJavaScriptを読み込む方法3選

2024年11月1日2024年11月3日

URLをコピーしました！

WordPressでJavaScriptを利用することで、動的なコンテンツ表示やインタラクティブな機能を追加することが可能です。本記事では、初心者でも簡単に実践できる3つのJavaScriptの読み込み方法を紹介します。

WordPressにおけるJavaScript

JavaScriptはWebページにインタラクティブな要素を追加するためのプログラミング言語です。WordPressでもJavaScriptはHTMLやCSSとともに基本的な技術の一つです。

HTMLがページの構造を、CSSがデザインを担当するのに対し、JavaScriptは動的な機能やユーザーとのインタラクションを担当します。例えば、ボタンをクリックした際の動作や、特定の条件が満たされた場合に表示を切り替えるなど、ユーザーの操作に応じた動作を作り出せます。

WordPressでJavaScriptを読み込む方法3選

本記事では下記コードをサンプルとして解説します。下記コードは、リンク(<a>タグ)のrel属性からnoreferrerを削除するコードです。

document.addEventListener("DOMContentLoaded", function() {
    const links = document.querySelectorAll('a[rel*="noreferrer"]');
    links.forEach(link => {
        link.rel = link.rel.replace('noreferrer', '').trim();
    });
});

HTMLに直接記述して読み込む

最もシンプルな方法としてJavaScriptをHTMLファイル内に直接書き込む方法があります。<script></script>タグを使用して、JavaScriptのコードをHTMLの任意の場所に記述します。

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const links = document.querySelectorAll('a[rel*="noreferrer"]');
        links.forEach(link => {
            link.rel = link.rel.replace('noreferrer', '').trim();
        });
    });
</script>

SWELLでは「外観」→「カスタマイズ」→「高度な設定」に記述します。Google AnalyticsやAdSense等のコードは</head>直前、それ以外は</body>直前に記述します。

また、ウィジェットのフッター直前等にカスタムHTMLを設置し記述することもできます。

functions.phpに記述して読み込む

WordPressテーマのfunctions.phpにJavaScriptを追加することでサイト全体でJavaScriptを適用することができます。

function remove_noreferrer_script() {
    ?>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const links = document.querySelectorAll('a[rel*="noreferrer"]');
            links.forEach(link => {
                link.rel = link.rel.replace('noreferrer', '').trim();
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'remove_noreferrer_script');

子テーマのjsフォルダなどの外部ファイルに記述し読み込む

JavaScriptコードを外部ファイルとして保存し、WordPressに読み込ませる方法です。この方法では、子テーマ内にjsフォルダを作成し、そこにJavaScriptファイルを保存します。

functions.phpでwp_enqueue_script()を使用してファイルを読み込むことで、コードを管理しやすく、再利用も容易になります。また、サイトのパフォーマンスを考慮する場合に最適です。

external-link-handler.js:

document.addEventListener("DOMContentLoaded", function() {
    const links = document.querySelectorAll('a[rel*="noreferrer"]');
    links.forEach(link => {
        link.rel = link.rel.replace('noreferrer', '').trim();
    });
});

function.php:

function enqueue_custom_scripts() {
    // 外部リンクの処理
    wp_enqueue_script( 'external-links', get_stylesheet_directory_uri() . '/js/external-link-handler.js', array(), false, true );}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');