サイト全体で使うもの以外は、使うページのみで読み込ませる方が無駄がなく便利です。
当サイトでは、グラフを使った解説ページがいくつかある為、その記事のみで読み込ませるようにしています。
サンプルはグラフ表示のJavaScriptファイル「Chart.bundle.js」になっていますので、
内容は変更してご利用下さい。
特定ページのみに読み込ませる方法
記載するのは、以下のいずれかの箇所です。
- <head></head>内
- <footer></footer>内
- function.php
コピペの後、変更が必要な部分
XXX部分は記事IDです。
投稿記事の場合 「is_single」
固定ページの場合「is_page」
<script src=” ファイルURL ”>
投稿記事の場合 「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()) の部分は、ヘッダー・フッター内で記載する場合と同様に、固定ページのみや、個別の記事指定などが可能です。