かちびと.net > WordPress > カスタマイズ > WordPressプラグインを使わずに記事ごとにcssを加えられるようにするカスタマイズ

WordPress(RSSRSS)を好んで使用しますのでソフトウェアとは別にトピックを独立させています

WordPressプラグインを使わずに記事ごとにcssを加えられるようにするカスタマイズ

カテゴリ » WordPress, カスタマイズ
書いた日 » 月曜日, 3月 15th, 2010

記事単体に別のcssを加えられる
ようにする為のメモ。プラグインは
使いたくないよ、という方向けの
カスタマイズ方法になります。
functions.phpで投稿画面にcss
の追加用boxを作成します。

※追記・プラグインにしました
記事ごとにスタイルを追加出来るように、投稿画面にcss追加用のboxを加える為のカスタマイズ。add-css-jsなら簡単ですが、カスタムフィールドが個人的に面倒だったのでfunctions.phpを使いました。

方法

css-add
↑　こんな感じでcss追加用のboxを作成します。お使いのテーマファイルのfunctions.phpを開いて以下のコードを追加するだけ。

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();

echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';

endwhile; endif;
rewind_posts();
}

}

追加したらfunctions.phpをアップロードしてください。記事とページの投稿画面に「追加するCSS」という名の付いたboxが追加されているはずです。あとは記事ごとに加えたいcssを記入して更新すれば<head>内に

<style type="text/css">追加したスタイル</style>

が追加されます。

ページ部分のスタイルだけ変えたい時やWeb関連ブロガーさんがcssテクを紹介する時にも使えるのでは。zen-codingと併用するとより便利です。導入も楽なので結構気に入っています。同じ方法でjs用boxも作れそうですね。

(via:Digging into WordPress)

追記・プラグイン化

さくらさんにプラグイン化して貰ったので配布します。テーマファイルの更新をされると上書きされてしまいますが、プラグインならそう言うこともありません。もともとカスタムフィールドがいやだっただけなので・・以下よりどうぞ。

【WordPressプラグインを使わずに記事ごとにcssを加えられるようにするカスタマイズ】へのコメント 4

トラックバック

TRB:
  1. » WordPressプラグインを使わずに記事ごとにcssを加えられるようにするカスタマイズ – かちびと.net My_Room-bookmarks
  2. 2010/03/15に気になったこと | debeso
  3. WordPressに記事ごとにCSSを設定する方法 « Ruko666.com
  4. links for 2010-03-15 « 個人的な雑記

この記事のトラックバックとURL

URL:
TRB:

お気軽にコメントして下さい

*は必須です

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:

You can add images to your comment by clicking here.

WPデザインギャラリー