JavascriptやCSSを特定ページのみで読み込ませる

WordPress・使い方

2024.02.10

この記事は約3分で読めます。

サイト全体で使うもの以外は、使うページのみで読み込ませる方が無駄がなく便利です。

当サイトでは、グラフを使った解説ページがいくつかある為、その記事のみで読み込ませるようにしています。

サンプルはグラフ表示のJavaScriptファイル「Chart.bundle.js」になっていますので、

内容は変更してご利用下さい。

特定ページのみに読み込ませる方法

特定ページのみに読み込ませる方法

記載するのは、以下のいずれかの箇所です。

<head></head>内
<footer></footer>内
function.php

コピペの後、変更が必要な部分

XXX部分は記事IDです。
投稿記事の場合　「is_single」
固定ページの場合「is_page」
<script src=”　ファイルURL　”>

jsファイルの場合は「src=””」のファイルURLを変更

CSSファイルの場合は「<link rel=”stylesheet” href=”URL” />」

ヘッダーまたはフッターに記載する例

投稿記事ページのみの場合

<?php if ( is_single() ): ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<?php endif; ?>

固定ページのみの場合

<?php if ( is_page() ): ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<?php endif; ?>

１記事の場合

<?php if ( is_single('XXX') ): ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<?php endif; ?>

複数記事の場合

<?php if ( is_single(array('XXX','XXX' ) ) ): ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<?php endif; ?>

function.phpで記載する例

add_action('wp_enqueue_scripts', 'themeslug_enqueue_script');
function themeslug_enqueue_script(){
if (is_single()) {
    wp_register_script('chart-js', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js', null, null, false);
    wp_enqueue_script('chart-js');
  }
}

if (is_single())　の部分は、ヘッダー・フッター内で記載する場合と同様に、固定ページのみや、個別の記事指定などが可能です。