投稿ごとに独自のCSSを読み込むカスタマイズ
カスタマイズの手順は以下の通りです。
- functions.phpにコードを追加する。
- header.phpにコードを追加する。
- 投稿画面に独自CSSの入力項目が追加されているのを確認する。
- 独自CSSが読み込まれているのを確認する。
個別にみていきましょう。
手順1：functions.phpにコードを追加する
functions.phpに以下のコードを追記してやります。
//Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
add_meta_box('custom_css', '独自CSS', 'custom_css_input', 'post', 'normal', 'high');
add_meta_box('custom_css', '独自CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
global $post;
echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
$custom_css = $_POST['custom_css'];
update_post_meta($post_id, '_custom_css', $custom_css);
}参考：Webお役立ちネタ帳
カスタマイズ自体は、上記のコードをfunctions.phpに追加することで完了です。
手順2：header.phpにコードを追加する
CSSを出力したい箇所に以下のコードを記述します。
<?php $css = get_field('_custom_css'); ?>
<?php if(!empty($css)):?>
<style type="text/css">
<?php echo get_post_meta(get_the_ID(), '_custom_css', true); ?>
</style>
<?php endif;?><?php wp_head(); ?>の上あたりに記述すればよいかと思います。
この辺りは臨機応変に変更してください。
手順3：投稿画面に独自CSSの入力項目が追加されているのを確認する
投稿編集画面を開いてください。
投稿編集画面の下部に、上記の独自CSSの入力項目が表示されていれば、第一段階は成功です。
上記の項目に入力したCSSが、その投稿で読み込まれるようになります。
適当なCSSを入力して投稿を保存してください。
手順4：独自CSSが読み込まれているのを確認する
投稿ページのソースを確認してみましょう。
head内に先ほど入力したCSSが表示されていれば、カスタマイズは成功です。
投稿ごとに独自のjsを読み込むカスタマイズ
カスタマイズの手順は以下の通りです。
- functions.phpにコードを追加する。
- header.phpにコードを追加する。
- 投稿画面に独自CSSの入力項目が追加されているのを確認する。
- 独自CSSが読み込まれているのを確認する。
個別にみていきましょう。
手順1：functions.phpにコードを追加する
functions.phpに以下のコードを追記してやります。
//Custom JS Widget
add_action('admin_menu', 'custom_js_hooks');
add_action('save_post', 'save_custom_js');
add_action('wp_head','insert_custom_js');
function custom_js_hooks() {
add_meta_box('custom_js', '独自js', 'custom_js_input', 'post', 'normal', 'high');
}
function custom_js_input() {
global $post;
echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="'.wp_create_nonce('custom-js').'" />';
echo '<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_js',true).'</textarea>';
}
function save_custom_js($post_id) {
if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
$custom_js = $_POST['custom_js'];
update_post_meta($post_id, '_custom_js', $custom_js);
}
function insert_custom_js() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo '<script>'.get_post_meta(get_the_ID(), '_custom_js', true).'</script>';
endwhile; endif;
rewind_posts();
}
}参考：Webお役立ちネタ帳
カスタマイズ自体は、上記のコードをfunctions.phpに追加することで完了です。
手順2：header.phpにコードを追加する
CSSを出力したい箇所に以下のコードを記述します。
<?php $js = get_field('_custom_js'); ?>
<?php if(!empty($js)):?>
<script>
<?php echo get_post_meta(get_the_ID(), '_custom_js', true); ?>
</script>
<?php endif;?><?php wp_head(); ?>の上あたりに記述すればよいかと思います。
この辺りは臨機応変に変更してください
手順3：投稿画面に独自jsの入力項目が追加されているのを確認する
投稿編集画面を開いてください。
投稿編集画面の下部に、上記の独自jsの入力項目が表示されていれば、第一段階は成功です。
上記の項目に入力したjsが、その投稿で読み込まれるようになります。
適当なjsを入力して投稿を保存してください。
手順4：独自jsが読み込まれているのを確認する
投稿ページのソースを確認してみましょう。
head内に先ほど入力したjsが表示されていれば、カスタマイズは成功です。
ここで入力した内容は【<script>と</script>の間】に出力されます。
jsを記述する時は、この部分に注意してください。
投稿以外でも独自CSSや独自jsを読み込みたい場合
今回ご紹介した方法は、投稿以外にも固定ページ、カスタム投稿でも利用可能です。
投稿以外でも独自CSSを読み込めるようにする方法
【投稿ごとに独自のCSSを読み込むカスタマイズ】でfunctions.phpに追加したコードの中にある、以下の部分を調整することで、固定ページやカスタム投稿でも独自CSSを読み込めるようになります。
function custom_css_hooks() {
add_meta_box('custom_css', '独自CSS', 'custom_css_input', 'post', 'normal', 'high');
}このコードを以下のように修正してやります。
固定ページで独自CSSを読み込めるようにしたい場合
以下のように修正します。
function custom_css_hooks() {
add_meta_box('custom_css', '独自CSS', 'custom_css_input', 'post', 'normal', 'high');
add_meta_box('custom_css', '独自CSS', 'custom_css_input', 'page', 'normal', 'high');
}赤文字部分のコードを追加しました。
カスタム投稿で独自CSSを読み込みたい場合
以下のように修正します。
function custom_css_hooks() {
add_meta_box('custom_css', '独自CSS', 'custom_css_input', 'post', 'normal', 'high');
add_meta_box('custom_css', '独自CSS', 'custom_css_input', 'カスタム投稿名', 'normal', 'high');
}赤文字部分のコードを追加されました。
追加されたコードの中に【カスタム投稿名】という部分があります。
独自CSSを読み込ませたいカスタム投稿の名前に書き換えてください。
カスタム投稿名が【test】であれば【test】と書き換えます。
カスタム投稿名の調べ方は、以下のコンテンツを参考にしてください。
⇒ カスタム投稿名とカスタムタクソノミー名の調べ方
投稿以外でも独自jsを読み込めるようにする方法
【投稿ごとに独自のjsを読み込むカスタマイズ】でfunctions.phpに追加したコードの中にある、以下の部分を調整することで、固定ページやカスタム投稿でも独自CSSを読み込めるようになります。
function custom_js_hooks() {
add_meta_box('custom_js', '独自js', 'custom_js_input', 'post', 'normal', 'high');
}このコードを以下のように修正してやります。
固定ページで独自jsを読み込めるようにしたい場合
以下のように修正します。
function custom_js_hooks() {
add_meta_box('custom_js', '独自js', 'custom_js_input', 'post', 'normal', 'high');
add_meta_box('custom_js', '独自js', 'custom_js_input', 'page', 'normal', 'high');
}赤文字部分のコードを追加しました。
カスタム投稿で独自jsを読み込みたい場合
以下のように修正します。
function custom_js_hooks() {
add_meta_box('custom_js', '独自js', 'custom_js_input', 'post', 'normal', 'high');
add_meta_box('custom_js', '独自js', 'custom_js_input', 'カスタム投稿名', 'normal', 'high');
}赤文字部分のコードを追加されました。
追加されたコードの中に【カスタム投稿名】という部分があります。
独自CSSを読み込ませたいカスタム投稿の名前に書き換えてください。
カスタム投稿名が【test】であれば【test】と書き換えます。
カスタム投稿名の調べ方は、以下のコンテンツを参考にしてください。
⇒ カスタム投稿名とカスタムタクソノミー名の調べ方
まとめ
投稿ごとに独自のCSSやjsを読み込ませるカスタマイズをご紹介しました。
- functions.phpにコードを追加する。
- header.phpにコードを追加する。（独自jsはfooter.php）
- 投稿画面に独自CSSの入力項目が追加されているのを確認する。
- 独自CSSが読み込まれているのを確認する。
基本的にコピペだけで行える簡単なカスタマイズです。
興味のある方は、挑戦してはいかがでしょうか？
WordPress投稿画面にタイトル文字数を表示させるカスタマイズ
カテゴリーやタグが日本語で作成されたときスラッグを自動的に英字に変換する方法
コメントを残す