コード・実装

【WordPress】functions.phpでCSSやJSを読み込む(ページごとの条件分岐も)

WordPresで、CSSやJavaScriptファイルをfunctions.phpにて読み込むと、一元管理できて簡単です。

今回は、そのやり方の基礎から、functions.phpにて、条件分岐を使って、ページごとに読み込むファイルを選択するやり方も共有します。

WordPressでfunctions.phpでCSSやJSを読み込む

基本的なやり方は下記になります。

functions.phpに下記を記述。

<?php

function enqueue_scripts()
{
    // CSS
    wp_enqueue_style('main-css', get_stylesheet_directory_uri() . '/assets/css/style.css', array(), '', 'all');

    // JS
    wp_enqueue_script('index-js', get_stylesheet_directory_uri() . '/assets/js/index.js', array( 'jquery' ), '', true);
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

 

jQueryを追加したい場合は下記になります。

<?php

function enqueue_scripts()
{
    // CSS
    wp_enqueue_style('main-css', get_stylesheet_directory_uri() . '/assets/css/style.css', array(), '', 'all');

    // JS
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-1.12.4.min.js', array(), '1.12.4');
    wp_enqueue_script('index-js', get_stylesheet_directory_uri() . '/assets/js/index.js', array( 'jquery' ), '', true);
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

 

 

条件分岐で読み込むファイルを選択する

<?php

function enqueue_scripts()
{
    // 共通ファイルを読み込み
    ...

    // TOPページのみ読み込むファイル
    if (((is_front_page() && is_home()) || (is_front_page() && ! is_home())) && ! is_paged()) {
        wp_enqueue_style('style', '/assets/css/top.css');
    }

    // 固定ページのみ読み込むファイル
    if (is_page('1')) {
        wp_enqueue_style('style', '/assets/css/aaa.css');
    }

}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

 

ページごとの条件分岐を使用できます。

以上です!

 

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。

未経験からでも技術を学べる

Udemy

Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。

何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。

動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。

 

世界最大級のオンライン学習サイトUdemy

 

MENTA

プログラミングの学習をサポートしてくれる人を探したいのならMENTAがおすすめ。

メンターさんや他のメンティさん(自分と同じようにプログラミングを学習している方々)とやりとりをし、学習を進める形が多いです。

\新規登録で300円割引クーポンプレゼント/プログラミング学習のスキルプラットフォーム【MENTA】