WordPressにCSSやJavascriptを追加する

WordPressにはたくさんのテーマがありますが、とりあえず今回は「customizr」というテーマを選んでみました。

理由としては

bootstrapベースで作られていること(レスポンシブデザイン)
自分のページなのでデザインはしない前提なので素でもスッキリしている
自分なりのアレンジも加えやすい
お客さんのサイトで使ったことがある

いろいろありますが要は手を加えないで見た目スッキリしてるのがよかっただけです。
Webデザインの仕事上では「customizr」をベースにして作ることも多いです。

WordPressで運用する上で必要な機能を導入していこうと思います。

投稿ページ・固定ページに、そのページだけのCSSやJavascriptを記載できるエリアを作る

文章を直接入力できるページに



記事・・・

とか直接書いてしまう方法や、タグにstyleを直書きする手もあります。
ブラウザではちゃんと表示してくれるのですが、htmlの標準からするとルールからはずれてしまいます。
簡単に書くとCSSは <head> の中に書くことが推奨されています。

ということでちゃんとCSSをhead内に書けるフィールドを作ります。
下記サイトを参考にカスタマイズしました。
⇒http://nelog.jp/custum-field-in-theme

1.カスタムフィールドを作る

Defaultの設定では新規投稿画面にカスタムフィールドは表示されていません。

投稿画面右上にある「表示オプション」でカスタムフィールドのチェックボックスにチェックを入れる。
そうするとページ内にカスタムフィールドというBOXが表示されます。
名前と値とあります。

名前　：　phpから呼び出す際に使用する
値　：　フィールドに実際に挿入したい内容

今回は参考にしたサイトに習って
header_custom と footer_custom　というカスタムフィールドを作成します。

2.インクルードするテンプレートを作成する

参考にしたサイトにならってWordPressの「get_template_part()」関数を使用してテンプレートをインクルードするつくりにしてみます。
今回作成するテンプレートは下記二つになります。
/wp-content/themes/customizr
に配置します。

head-custom-field.php

ID, 'head_custom', true);
  if ( $head_custom ) {
    echo $head_custom;
  }
}
?>

footer-custom-field.php

ID, 'footer_custom', true);
  if ( $footer_custom ) {
    echo $footer_custom;
  }
}
?>

■簡単な解説

get_post_meta($post_id, $key, $single);

は特定の投稿の特定のキーからカスタムフィールドの値を取得する関数です。

$post_id　⇒　カスタムフィールドを取得したい投稿の ID。上記ではグローバルの $post オブジェクトの ID プロパティを使用。
$key　⇒　取得したいカスタムフィールド名
$single　⇒　trueだと文字列として。設定しないもしくはfalseだと配列を返す。

is_singular( $post_types );

is_single(): 投稿ページ
is_page(): 固定ページ
is_attachment(): 添付ファイル

のどれかがtrueだと「is_singular」がtrueになります。今回は投稿ページと固定ページで判定を入れたいのでこのまま。
投稿ページだけにしたければ「is_single()」に変更することで可能です。

$post_types　⇒オプションです。指定された投稿タイプを判定できます。
最初から設定されている投稿タイプ
投稿 (‘post’)
固定ページ (‘page’)
添付ファイル (‘attachment’)
リビジョン (‘revision’)
ナビゲーションメニュー (‘nav_menu_item’)

exe 投稿の時にTrue
is_singular( ‘post’ );

3.headerとfooterでインクルードする

Customizrテーマの場合headerを作っているphpは下記になります。

/wp-content/themes/customizr/inc/parts/class-header-header_main.php
ここのheadタグ内に下記を埋め込みます。

同様にfooterにも。bodyの終わり直前あたりでよいかと思います。
/wp-content/themes/customizr/footer.php

これでheaderとfooterにカスタムフィールドの埋め込みが完了しました。
個別ページで設定したいものがあるときに使用します。

4.使い方

復習になりますが、投稿を編集するときに「表示オプション」から「カスタムフィールド」を表示させます。
名前のところにheadに埋め込むときは header_custom
footerに埋め込むときは footer_custom

注意としては埋め込んだものがそのまま吐き出されるのでphpや””等の閉じ忘れとかあると表示が壊れたりするかもしれないです。

WORDPRESSおすすめの書籍

書籍は読む方だと思いますが、やはり実際に実装するとより深く学べるのを実感します。
WORDPRESS自体の本とPHPの本を読むことをお勧めします。
htmlとかCSSとかもわかると幅が広がると思いますが、デザイン部分はテンプレート任せでもなんとかなるのがWORDPRESSのいいところです。

いちばんやさしい WordPress 入門教室 (日本語) 単行本
WORDPRESS基礎。設置から丁寧に解説してくれています。
いろんな本があるのでどれでもいいのですが、出版日が最近なのと、著者が美人なので。

エンジニアのためのWordPress開発入門
本格的に開発している方むけ。実例が紹介されているのでアイデア発掘にも使えます。

#wordpress