WordPressにはたくさんのテーマがありますが、とりあえず今回は「customizr」というテーマを選んでみました。
・bootstrapベースで作られていること(レスポンシブデザイン)
・自分のページなのでデザインはしない前提なので素でもスッキリしている
いろいろありますが要は手を加えないで見た目スッキリしてるのがよかっただけです。
Webデザインの仕事上では「customizr」をベースにして作ることも多いです。
WordPressで運用する上で必要な機能を導入していこうと思います。
投稿ページ・固定ページに、そのページだけのCSSやJavascriptを記載できるエリアを作る
<style>
font-size:20px;
</style>
記事・・・とか直接書いてしまう方法や、タグにstyleを直書きする手もあります。
ブラウザではちゃんと表示してくれるのですが、htmlの標準からするとルールからはずれてしまいます。
簡単に書くとCSSは <head> の中に書くことが推奨されています。
ということでちゃんとCSSをhead内に書けるフィールドを作ります。
⇒http://nelog.jp/custum-field-in-theme
1.カスタムフィールドを作る
Defaultの設定では新規投稿画面にカスタムフィールドは表示されていません。
投稿画面右上にある「表示オプション」でカスタムフィールドのチェックボックスにチェックを入れる。
そうするとページ内にカスタムフィールドというBOXが表示されます。
header_custom と footer_custom というカスタムフィールドを作成します。
2.インクルードするテンプレートを作成する
参考にしたサイトにならってWordPressの「get_template_part()」関数を使用してテンプレートをインクルードするつくりにしてみます。
<?php
if ( is_singular() ){
$head_custom = get_post_meta($post->ID, 'head_custom', true);
if ( $head_custom ) {
echo $head_custom;
}
}
?><?php
if ( is_singular() ){
$footer_custom = get_post_meta($post->ID, 'footer_custom', true);
if ( $footer_custom ) {
echo $footer_custom;
}
}
?>get_post_meta($post_id, $key, $single);
は特定の投稿の特定のキーからカスタムフィールドの値を取得する関数です。
$post_id ⇒ カスタムフィールドを取得したい投稿の ID。上記ではグローバルの $post オブジェクトの ID プロパティを使用。
$single ⇒ trueだと文字列として。設定しないもしくはfalseだと配列を返す。
is_singular( $post_types );
のどれかがtrueだと「is_singular」がtrueになります。今回は投稿ページと固定ページで判定を入れたいのでこのまま。
投稿ページだけにしたければ「is_single()」に変更することで可能です。
$post_types ⇒オプションです。指定された投稿タイプを判定できます。
3.headerとfooterでインクルードする
Customizrテーマの場合headerを作っているphpは下記になります。
/wp-content/themes/customizr/inc/parts/class-header-header_main.php
<?php get_template_part('head-custom-field'); ?>同様にfooterにも。bodyの終わり直前あたりでよいかと思います。
/wp-content/themes/customizr/footer.php
<?php get_template_part('footer-custom-field'); ?>これでheaderとfooterにカスタムフィールドの埋め込みが完了しました。
4.使い方
復習になりますが、投稿を編集するときに「表示オプション」から「カスタムフィールド」を表示させます。
名前のところにheadに埋め込むときは header_custom
注意としては埋め込んだものがそのまま吐き出されるのでphpや""等の閉じ忘れとかあると表示が壊れたりするかもしれないです。
WORDPRESSおすすめの書籍
書籍は読む方だと思いますが、やはり実際に実装するとより深く学べるのを実感します。
WORDPRESS自体の本とPHPの本を読むことをお勧めします。
htmlとかCSSとかもわかると幅が広がると思いますが、デザイン部分はテンプレート任せでもなんとかなるのがWORDPRESSのいいところです。
いちばんやさしい WordPress 入門教室 (日本語) 単行本
WORDPRESS基礎。設置から丁寧に解説してくれています。
いろんな本があるのでどれでもいいのですが、出版日が最近なのと、著者が美人なので。
本格的に開発している方むけ。実例が紹介されているのでアイデア発掘にも使えます。
📦