WordPressで記事個別や固定ページ単体にCSS・JavaScriptを追加する(プラグインなし)

この記事は約13分で読めます。

  • LINEで送る

css-javascript-noplugin

前回は、プラグインを使用して個別にCSSとJavaScriptを設定する方法をお伝えしました。
今回は、プラグインなしで個別にCSSとJavaScriptを設定する方法を説明します。

前回の記事はこちらをどうぞ。
WordPressで記事個別や固定ページ単体にCSS・JavaScriptを追加する(Custom CSS and JS)

PHPがわかる方にはこちらの方法がおすすめです。
以下のサイト(英語)を参考にしています。

Custom CSS Per Post | Digging Into WordPress

記事、固定ページにCSSとJSの直書きフィールドを追加

「外観 > テーマ編集」から「functions.php」を選択します。
「function.php」の1番下に以下のコードを追加します。

//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);
}
function insert_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			if (get_post_meta(get_the_ID(), '_custom_css', true) !='') {
				echo "<style type=\"text/css\" media=\"all\">\n".get_post_meta(get_the_ID(), '_custom_css', true)."\n</style>\n";
		}
		endwhile; endif;
		rewind_posts();
	}
}
//Custom JavaScript 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', '個別JavaScript', 'custom_js_input', 'post', 'normal', 'high');
	add_meta_box('custom_js', '個別JavaScript', 'custom_js_input', 'page', '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();
			if (get_post_meta(get_the_ID(), '_custom_js', true) !='') {
				echo "<script type=\"text/javascript\">\n".get_post_meta(get_the_ID(), '_custom_js', true)."\n</script>\n";
			}
		endwhile; endif;
		rewind_posts();
	}
}

css-javascript-noplugin

これで画像の通り、記事ページおよび固定ぺージに「個別CSS」、「個別JavaScript」ボックスが表示されます。
スタイルやスクリプトコードを追加することで、個別ページのみに反映させることができます。

出力されたHTMLソースは以下のようになります。

<style type="text/css">
p{color: #fff;}
</style>
<script type="text/javascript">
alert('おはよう');
</script>

追加ページの表示、非表示にも対応

css-javascript-noplugin

「表示オプション」に「個別CSS」、「個別JavaScript」のチェックボックスが追加されているので、
必要時以外は、チェックを外して入力ボックスを非表示にすることも可能です。

表示オプションや入力ボックスの名前を変更したい場合は、
それぞれのphpソース上の「個別CSS」「個別JavaScript」を変更してください(6,7行目)。

記事、固定ページにCSSとJSのファイルフィールドを追加

次に、CSSとJSをファイル単位で個別追加するフィールドを追加します。
先ほどと同様に「function.php」の1番下に以下のコードを追加します。

//Custom CSSFile Widget
add_action('admin_menu', 'custom_css2_hooks');
add_action('save_post', 'save_custom_css2');
add_action('wp_head','insert_custom_css2');
function custom_css2_hooks() {
	add_meta_box('custom_css2', '個別CSSファイル', 'custom_css2_input', 'post', 'normal', 'high');
	add_meta_box('custom_css2', '個別CSSファイル', 'custom_css2_input', 'page', 'normal', 'high');
}
function custom_css2_input() {
	global $post;
	echo '<input type="hidden" name="custom_css2_noncename" id="custom_css2_noncename" value="'.wp_create_nonce('custom-css2').'" />';
	echo '<textarea name="custom_css2" id="custom_css2" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css2',true).'</textarea>';
}
function save_custom_css2($post_id) {
	if (!wp_verify_nonce($_POST['custom_css2_noncename'], 'custom-css2')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css2 = $_POST['custom_css2'];
	update_post_meta($post_id, '_custom_css2', $custom_css2);
}
function insert_custom_css2() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			if (get_post_meta(get_the_ID(), '_custom_css2', true) !='') {
				echo "<link rel=\"stylesheet\" href=\"";
				echo bloginfo('template_url').get_post_meta(get_the_ID(), '_custom_css2', true)."\" type=\"text/css\" media=\"all\" />\n";
			}
		endwhile; endif;
		rewind_posts();
	}
}
//Custom JavaScriptFile Widget
add_action('admin_menu', 'custom_js2_hooks');
add_action('save_post', 'save_custom_js2');
add_action('wp_head','insert_custom_js2');
function custom_js2_hooks() {
	add_meta_box('custom_js2', '個別JavaScriptファイル', 'custom_js2_input', 'post', 'normal', 'high');
	add_meta_box('custom_js2', '個別JavaScriptファイル', 'custom_js2_input', 'page', 'normal', 'high');
}
function custom_js2_input() {
	global $post;
	echo '<input type="hidden" name="custom_js2_noncename" id="custom_js2_noncename" value="'.wp_create_nonce('custom-js2').'" />';
	echo '<textarea name="custom_js2" id="custom_js2" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_js2',true).'</textarea>';
}
function save_custom_js2($post_id) {
	if (!wp_verify_nonce($_POST['custom_js2_noncename'], 'custom-js2')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_js2 = $_POST['custom_js2'];
	update_post_meta($post_id, '_custom_js2', $custom_js2);
}
function insert_custom_js2() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			if (get_post_meta(get_the_ID(), '_custom_js2', true) !='') {
				echo "<script type=\"text/javascript\" src=\"";
				echo bloginfo('template_url')."/js".get_post_meta(get_the_ID(), '_custom_js2', true)."\" charset=\"utf-8\"></script>\n";
			}
		endwhile; endif;
		rewind_posts();
	}
}

css-javascript-noplugin

スタイルやJavaScriptコードの直書きフィールドと同様に、このようなボックスが表示されます。
このボックスに相対パスでファイル名を入力することで、個別のCSSやJSファイルが読み込まれます。

<link rel="stylesheet" href="http://www.keni-customize.net/wp-content/themes/keni61_wp_cool_131113/custom.css" type="text/css" media="all" />
<script type="text/javascript" src="http://www.keni-customize.net/wp-content/themes/keni61_wp_cool_131113/js/custom.js" charset="utf-8"></script>

ファイルはHTMLでこのように読み込まれます。
「http://www.keni-customize.net/wp-content/themes/keni61_wp_cool_131113/js」の部分は、それぞれ使用しているテーマフォルダが読み込まれます(bloginfo(‘template_url’)を使用しているため)。

もち、異なるディレクトリを読み込みたい場合は「bloginfo(‘template_url’)」を変更してください。

  • LINEで送る

コメントを残す

このページの先頭へ