WordPressでこの投稿ページだけデザインを変えたいとか、この固定ページだけにmeta descriptionを設定したいということはないでしょうか？そんなときに役立つ便利なコードのご紹介です。
[adsense]
WordPressのhead内に直接コードを挿入できるAdd to headウィジェット
Add to headウィジェットは下記のコードをfunctions.phpにコピペするだけです。functions.phpがない場合は追加する必要があります。functions.phpコピペの前にはバックアップをお忘れなく！
//記事別にhead内に追加
add_action('admin_menu', 'add_head_hooks');
add_action('save_post', 'save_add_head');
add_action('wp_head','insert_add_head');
function add_head_hooks() {
add_meta_box('add_head', 'headに追加', 'add_head_input', 'post', 'normal', 'high');
add_meta_box('add_head', 'headに追加', 'add_head_input', 'page', 'normal', 'high');
}
function add_head_input() {
global $post;
echo '<input type="hidden" name="add_head_noncename" id="add_head_noncename" value="'.wp_create_nonce('add-head').'" />';
echo '<textarea name="add_head" id="add_head" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_add_head',true).'</textarea>';
}
function save_add_head($post_id) {
if (!wp_verify_nonce($_POST['add_head_noncename'], 'add-head')) return $post_id;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
$add_head = $_POST['add_head'];
update_post_meta($post_id, '_add_head', $add_head);
}
function insert_add_head() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo get_post_meta(get_the_ID(), '_add_head', true);
endwhile; endif;
rewind_posts();
}
}
これで新規投稿画面、新規固定ページの追加画面に下記のように出現します。
Add to headの記述方法
【head内に追加】の記述欄に書かれたものはそのままhead内に追加されます。CSSファイルやJavaScriptファイルをそのページにだけ読み込むこともできますし、ちょっとしたcssやJavaScriptなら直接記述することだって可能です。
たとえばこの投稿ページだけ、背景を真っ赤にしたいときは、下記のように記述します。
<style type="text/css">body {background-color:#F00;}</style>
スタイルの適応順番として、
外部CSSファイル ＜ head内 ＜ HTMLタグの属性
となりますので、cssファイルのスタイルが打ち消されてhead内のスタイルが優先される訳ですねー
CSSファイルやJavaScriptファイルを読み込むときは絶対パスで！
個別に作ってWordPress内の階層に置いたCSSファイルやJavaScriptファイルを相対パスで記述してみたところ、うまくいかなかったので絶対パスで記述することをお勧めします。
また、cssは改行せず一行で書いてください
cssファイルの呼び出し方
<link rel="stylesheet" type="text/css" href="cssファイルまでの絶対パス"/>
たとえばテーマ内のstyle.cssやheader.phpと同じ階層にcssファイルを置いた絶対パスは、
というふうになります。
JavaScriptファイルの呼び出し方
<script type="text/javascript" src="jsファイルまでの絶対パス" ></script>
meta要素もページごとに記述できる
ページ個別に管理画面からメタタグを挿入できるプラグインはいくつかあると思います。有名どころでいうと、Descriptionとkeywords設定をできる[Meta Manager]、no indexやno followなどの設定をできる[WordPress Meta Robots]、なんでもできる(!?)[All in One SEO Pack]など。
しかし有能すぎて、設定したくないところにも必要のないコードを記述していたりするようです。
STINGER5の作者のENJIさんのこちらエントリーが有名ですね。
知らないと逆効果！WordPressプラグインでSEO対策したつもりの結果
Add to headウィジェットはページのhead内に文字列が記述されるだけのシンプルな作りになっているので、その点は安心です。
メタタグコピペのサンプル
それぞれの細かな説明は割愛します
<meta name="keywords" content="キーワード1, キーワード2, キーワード3"> <meta name="description" content="個別ページの説明文。"> <meta name="robots" content="index,nofollow"> <meta name="robots" content="noindex,nofollow"> <meta name="robots" content="noindex,follow">
head内に記述するメタタグはこんなところではないでしょうか？
個別記事にメタタグをちょっとするのにはコードをコピペするだけなので、手間はかかりませんね。
まとめ
以上プラグインを使わずにページごとにCSSやJavaScriptやメタタグを挿入する方法でした。Add to headはfunctions.php部分のコードを変えると、カスタム投稿ページやfooter部分への記述も出来そうですね！
Add to headウィジェットはこちらのサイトを参考にさせていただきました。
それでは、ちゅんこ@shufulifeがお送りしました！