大まかな流れ
- 記事内の
<head>内、及びに</body>直前に、カスタムフィールドに書いたCSSやScriptを挿入出来るようにする。 - カスタムフィールド内のショートコードでテーマフォルダ内のファイルを読み込む。
前段階
header.php
//~~~
wp_head();
//~~~
if (is_single()||is_page()): //記事ページor固定ページの場合
echo apply_filters('the_content', get_post_meta($post->ID, 'foo', true));
endif;
投稿時にカスタムフィールド「foo」の値に直接CSSを書けば読み込んでくれる。
<style>で囲むことを忘れずに。
footer.php
//~~~
wp_footer();
//~~~
if (is_single()||is_page()): //記事ページor固定ページの場合
echo apply_filters('the_content',get_post_meta($post->ID,'bar',true));
endif;
投稿時にカスタムフィールド「bar」の値に直接scriptを書けば読み込んでくれる。
<script>で囲むことを忘れずに。
テーマフォルダ内のファイルを読み込む(本題)
最初に試した方法(間違い)
functions.php
function show_path_to(){
return get_template_directory_uri(); //親テーマディレクトリ
//return get_stylesheet_directory_uri(); //子テーマディレクトリ
}
add_shortcode('path', 'show_path_to');
カスタムフィールド「foo」
<link rel="stylesheet" href="[path]/css/bar.css">
ショートコードが動かずにそのまま表示された。当然ファイルは読み込めていない。
敗因
HTMLタグ内でのショートコード使用には制限があるらしい。
imgのsrc属性内等なら動く。
上手くいった方法
functions.php
function includeFile($args){
$template = get_template_directory_uri();
//$template = get_stylesheet_directory_uri(); 子テーマを使っている場合はこちら
switch($args['kind']){
case 'js':
return '<script src="'.$template.'/js/'.$args['name'].'"></script>';
break;
case 'css':
return '<link rel="stylesheet" href="'.$template.'/css/'.$args['name'].'">';
break;
default:
return;
break;
}
}
add_shortcode('file', 'includeFile');
カスタムフィールド「foo」
[file kind=css name=foobar.css]