WordPress、function、自作CSS、JSファイルを読み込む

CMS
2024.06.09
この記事は約7分で読めます。

WordPressでは、テーマやプラグインのカスタマイズを行う際、自作のCSSやJavaScriptファイルを読み込むことで、独自のデザインや機能を追加することができます。この記事では、functions.phpを使ったCSSやJSファイルの読み込み方法を具体例を交えながら解説します。

CSSファイルの読み込み

CSSファイルを読み込むには、wp_enqueue_style()を使用します。以下の例は、CSSファイルを読み込むための基本的なコードです。

基本例：CSSファイルを読み込む

function my_css_main() {
    $handle  = 'my_css_main_handle'; // ハンドル名（識別子）
    $src = get_stylesheet_directory_uri() . '/css/main.css'; // 読み込むCSSファイルのパス
    $deps = array("cocoon-style", "cocoon-child-style"); // 依存関係
    $media = 'all'; // 対象メディア（all, screen, printなど）
    wp_enqueue_style($handle, $src, $deps, $media);
}
add_action('wp_enqueue_scripts', 'my_css_main');
PHP

コードのポイント

  • get_stylesheet_directory_uri()：子テーマのディレクトリパスを取得します。親テーマを使用する場合はget_template_directory_uri()を使用します。
  • $deps（依存関係）：このCSSを読み込む前に必要な他のCSSファイルを指定します。
  • $media：どのメディアで使用するかを指定します。通常はallを指定します。

特定のURLでのみCSSを読み込む

ページごとに異なるCSSファイルを読み込みたい場合、現在のURLを取得して条件分岐を行います。

function my_css_sample1() {
    if (get_the_permalink() == "http://localhost/w1/sample1-top/") {
        $handle = 'my_css_sample1';
        $src = get_stylesheet_directory_uri() . '/css/sample1.css';
        $deps = array("cocoon-style", "cocoon-child-style");
        $media = 'all';
        wp_enqueue_style($handle, $src, $deps, $media);
    }
}
add_action('wp_enqueue_scripts', 'my_css_sample1');
PHP

応用ポイント

  • get_the_permalink()：現在のページURLを取得して条件分岐を行います。
  • 条件に該当するページでのみCSSを読み込みます。これにより、不要なリソースを読み込まず、サイトのパフォーマンスを向上できます。

JavaScriptファイルの読み込み

JavaScriptファイルを読み込むには、wp_enqueue_script()を使用します。以下は、基本的なコード例です。

基本例：JSファイルを読み込む

function add_files_js3() {
    $permalink = get_the_permalink(); // 現在のページURL
    $top = "http://localhost/w1/sample3-top/"; // 対象URL
    if (strpos($permalink, $top) === 0) { // URLが対象の場合のみ実行
        wp_enqueue_script("site2_main_js", get_stylesheet_directory_uri() . '/js/sample2.js', '', '', true);
    }
}
add_action('wp_enqueue_scripts', 'add_files_js3');
PHP

コードのポイント

  • true（第5引数）：スクリプトをフッターで読み込むかどうかを指定します。通常はtrueに設定し、フッターで読み込むことでサイトの読み込み速度を向上させます。
  • strpos()：部分一致を確認するための関数。トップページ以降のURLでのみスクリプトを適用するよう条件分岐しています。

特定のページで異なるJSを読み込む

ページごとに異なるJSファイルを読み込む場合のコード例です。

Chart.jsを特定ページで読み込む

function add_files_js1() {
    if (get_the_permalink() == "http://localhost/w3/chart/") {
        $handle = 'add_files_js1';
        $src = get_stylesheet_directory_uri() . '/js/chart.js';
        $deps = array("cocoon-style", "cocoon-child-style");
        $media = 'all';
        wp_enqueue_style($handle, $src, $deps, $media);
    }
}
add_action('wp_enqueue_scripts', 'add_files_js1');
PHP

Swiper.jsを特定ページで読み込む

function add_files_js1() {
    if (get_the_permalink() == "http://localhost/w3/chart/") {
        wp_enqueue_script("chart_js", get_stylesheet_directory_uri() . '/my_page/Chart.js/j_chart.js', '', '', true);
    }
}
add_action('wp_enqueue_scripts', 'add_files_js1');
PHP

実際の運用での注意点

  1. ファイルのパスを正しく指定する
    • 外部ファイルのURLやディレクトリパスが間違っていると、ファイルが正しく読み込まれません。
  2. 依存関係の設定
    • CSSやJSファイルが他のライブラリに依存している場合、依存関係を適切に設定することで競合やエラーを防止できます。
  3. 不要なファイルの読み込みを避ける
    • 条件分岐を活用し、必要なページでのみファイルを読み込むように設定すると、パフォーマンスが向上します。
  4. 読み込み順を確認する
    • 特定のJSが他のJSファイルに依存している場合、読み込み順を適切に設定してください。

まとめ

WordPressで自作のCSSやJavaScriptファイルを読み込む方法を解説しました。wp_enqueue_style()やwp_enqueue_script()を使用することで、テーマやプラグインのカスタマイズが容易になります。適切な条件分岐を使い、不要なファイルの読み込みを防ぎながら効率的なサイト運営を目指しましょう。

この記事のコードを参考に、ぜひあなたのWordPressサイトに独自のデザインや機能を追加してみてください！

コメント