>> 2024/1/25 サイトリニューアルにつき、見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→

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

JavascriptやCSSを特定ページのみで読み込ませる WordPress・使い方
この記事は約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; ?>

 

1記事の場合

<?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()) の部分は、ヘッダー・フッター内で記載する場合と同様に、固定ページのみや、個別の記事指定などが可能です。

 

 

 

コメント

タイトルとURLをコピーしました