WordPressって、文字だけ投稿する場合、投稿欄からテキストを入力すればいいだけですが、Javascriptやcssを読み込ませる場合、投稿欄には挿入できる項目がありません。
「金額入力してボタン押すだけ！宅飲み割り勘計算ツールを作ってみた」を作成した時、にJavascriptとcssを読み込ませたかったので、方法を探していました。
function.phpに投稿欄を追加してJavascriptやcssを読み込める欄を作成することができるみたいなので追加してみました。ですが、公開ボタンを押したらエラーがでてきました。
プログラムを投稿欄から読み込めるようになるとセキュリティ的にあまりよくないのか、サーバー側で制限かけているんでしょうか？
仕方がないのでheader.phpとfooter.phpに読み込ませることにしました。
simplicityの子テーマを使用しているので、正確にはheader-insert.phpとfooter-insert.phpに追加しました。
simplicityの子テーマを使用している時は、親テーマのheader.phpからheader-insert.phpを、親テーマのfooter.phpからfooter-insert.phpを読み込むように設定されています。
他のテーマを使用している方は、基本はheader.phpとfooter.phpに追加すればいいと思います。
ご自身でテーマを作成していればheader.phpとfooter.phpに追加で問題ないですが、提供されたテーマを利用している方は、header.phpとfooter.phpに書くと更新があった時に上書きされて追加した部分がなくなってしまいますので気をつけてください。
全ての投稿にJavascriptとcssを読ませる必要はないのでif文を使用して特定の投稿のみ読み込ませるようにしました。
下記が記載した内容です。
header-insert.php
まずはcssをヘッダーで読み込みます。
<?php if(is_single('投稿ID')): ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/dummy.css" type="text/css" />
<?php endif; ?>
<?php if(is_single('投稿ID')): ?>
で投稿IDと合致するもののみ処理するという条件指定をします。
投稿IDは、投稿記事編集のアドレスバーに記載している「～post.php?post=123」の123の部分になります。
<?php echo get_stylesheet_directory_uri(); ?>
は、使用しているテーマのディレクトリーを取得して表示します。
ドメイン直下にwordpressを設置していたら「http://ドメイン名/wp-content/themes/simplicity-child」を表示します。
ここでは、
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/dummy.css" type="text/css" />
としているので、
<link rel="stylesheet" href="http://ドメイン名/wp-content/themes/simplicity-child/dummy.css" type="text/css" />
という表示になります。
ですのでdummy.cssはftpを使用して「/wp-content/themes/simplicity-child/」に格納しておきます。
footer-insert.php
次にJavascriptをフッターで読み込みます。
<?php if(is_single('投稿ID')): ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/dummy.js" ></script>
<?php endif; ?>
ヘッダー同様、
<?php if(is_single('投稿ID')): ?>
で投稿IDと合致するもののみ処理するという条件指定をします。
<?php echo get_stylesheet_directory_uri(); ?>
もヘッダー同様です。
Javascriptは、テーマディレクトリの下に作成した「js」ディレクトリ内に格納したので、「/js」を追加しました。
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/dummy.js" ></script>
は、
<script type="text/javascript" src="http://ドメイン名/wp-content/themes/simplicity-child/js/dummy.js" ></script>
という表示になります。
修正したheader-insert.phpとfooter-insert.phpをftpで「http://ドメイン名/wp-content/themes/simplicity-child/」に上書きアップロードしたら完了です。