wordpress

CSSの達人

CSSの達人になりたいと思っているのとは別に、WPを触っていて、時々そのページだけCSSを編集したい、という場合に、重宝する機能
カスタムCSS custom CSS

これは便利です。こちらから引用(Thanks!)

下記のデータをfunction.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', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom 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();
	}
}

ついでにJSも

JavaScriptを追加できるようにする場合は、以下を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', 'Custom JS', 'custom_js_input', 'post', 'normal', 'high');
	add_meta_box('custom_js', 'Custom JS', '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();
			echo '<script type="text/javascript">'.get_post_meta(get_the_ID(), '_custom_js', true).'</script>';
		endwhile; endif;
		rewind_posts();
	}
}

WPデータ移行

WordPress サイト作成時に 仮の領域でサイト作成し、本番環境に移すことが多々あるのですが、
お客様の状況により、仮領域と本番環境間でデータ移行を何度か繰り返す事がありました。

その際、移行時の手続きはバッチしOKと思ったのですが、うまくいかない時がありました。
その時に行った対応をφ(..)メモメモ

1.カスタムメニューを使っている場合は、メニューを保存を再度押す
(メニュー部がおかしいので気づきやすい)

2. ページ・記事が表示されない現象が起こった時は、パーマリンク設定の保存ボタンももう一度押す。
(TOPだけは正常に表示されたりするので気づきにくい。しかもTOP以外が表示されないので移行のミスかと思う)

サイト例(テンプレート)

5年以上前に使用していたテンプレートです。色使いが派手すぎて業種が限られてくるかもしれません。
ただ海外では、こういったものが流行っていました。
現在の日本では。参考になるでしょうか・・・・
たたき台としてご覧いただけたらと思います。

投稿フォーマット

wordpressのバージョンアップに伴って追加された「投稿フォーマット」を使いたくてメモしている投稿です。

Function.php のセットアップ関数部分に以下の記述を追加


add_theme_support( 'post-formats', array( 'aside', 'chat', 
'gallery', 'image', 'link', 'quote', 'status', 'video', 'audio' ) ); 

全部の項目はいらないと思います。


add_theme_support( 'post-formats', array( 'aside', 'gallery', 
'image', 'link', 'quote', 'video', 'audio' ) ); 

こんなところでしょうか。audioもいらないかも知れません。音楽好きなので残しています。

そうすると、記事の投稿画面に、フォーマットという選択BOXが表示されます。
そこで選んだものが、投稿記事を包むタグ(article です)にクラスメイトして「format-****」と付与されます。

例:$lt;artcle class="post-1 format-image" $gt;

CSSだけの操作で表示をコントロールすれば良い場合は、任意の操作を、CSSファイルに書き込むという事になります。。

参照ここ(http://www.mrta26.com/2011/01/20/wordpress-3-1-post-formats/)

1 / 212