固定ページで作成したプロフィールページだけ異なるcssでスタイリングしたい.
今回はこれを実現するためのカスタムフィールドについてまとめる.
結論だけ知りたい場合は 固定ページにcssを適用してみる を見るといい.
概要は次の通り.
参考
wp公式wikiで組み込み関数の使い方を調査した.
- カスタムフィールドの使い方 | wpdocs.osdn.jp
- 関数リファレンス/get post meta | wpdocs.osdn.jp
- 関数リファレンス/get template part | wpdocs.osdn.jp
動作環境
- WordPress 4.7.2
- エックスサーバ プラン X10
- theme 「simplicity2」
前提条件
次のセットアップは済んでいるものとする.
- シェルからのエックスサーバへのssh接続設定
- FTPソフト等の設定
- 使用テーマ 「simplicity2」の子テーマを用意
次の知識を前提とする.
- 子テーマに設置したファイルは親テーマのファイルを上書きすること
- htmlの基本的な構造を理解していること
エックスサーバへのssh接続設定は, 以前書いたこちらの記事を参照↓

simplicity2について
今回はwordpressテーマ 「simplicity2」 を例に作業を進める.
simplicityは作者の @わいひら さんがユーザフレンドリなファイルをいくつか用意してくれている.
ディレクトリ構造やファイルの種類だけを見ると, 他テーマユーザは応用できないかもしれない.
だから, 本記事では他テーマでも応用できるように次の点を意識して作業を進める.
- htmlの基本構造
- wordpress組み込み関数 使用方法
背景
私の プロフィールページ は固定ページで作成しているが…
ダサい.
特に写真周りが.
現状では次のように table
を用いて表示している.
画像から分かる通り, 次の点が気に入らない.
- 写真とsnsリンクまでの距離が遠い
table
にムダな空白がある- リストが画像の下にあるのが嫌だ
そんなわけで, cssの勉強も兼ねてこれらを解消したい.
作業方針
今回は次の方針で固定ページに特定のcssを適用する.
- 固定ページで使いたい css ファイルを用意
- 特定の固定ページでのみこのcssを読み込むためにカスタムフィールドを編集
考え方は通常のhtmlと一緒.
ただ, 何も考えずに <head></head>
内にコードを埋め込むと全ページに cssが適用されてしまう.
これは, レイアウト崩れの原因になる.
だから, 特定のページだけでこの css を読み込みたい.
特定のページにcssを適用するには, カスタムフィールドを利用するのが楽.
カスタムフィールドとは
ここで, カスタムフィールドについておさらいする.
私の認識は次の通り.
- 記事ごとに
- 自由なデータを入力可能な
- 管理画面上から操作可能な入力フォームのこと
管理画面でみるとこんな感じ.
記事編集エリアの下側に出てくるフィールドのこと.
デフォルトでは非表示なので, 次の手順で表示する.
- 管理画面へログイン
- 所望の記事の編集画面へ
- 画面右上-> 表示オプション -> カスタムフィールド にチェック
公式wikiには次のように書いてある.
WordPress には、投稿者が投稿に「カスタムフィールド」を追加できる機能があります。
この任意の情報は「メタデータ」と呼ばれており、たとえば以下のような情報を含めることができます。
- 現在のムード: 幸せいっぱい
- 今読んでいる本: 星の王子様
- BGM: Rock Around the Clock
- 今日の天気: 晴れ
要約すると↓こういうこと.
- メタデータと呼ばれる変数的なものに
- 好きなようにデータを格納して扱うことができる便利なもの
今回は, このメタデータにcssを入れて扱うつもり.
関係するファイルを一つずつ追ってみる
最終的にやりたいことは次の2つ.
</head>
タグの前で任意のcssを読み込みたい- 特定のページでのみ↑これを適用したい
これを実現するために関連ファイルを1つずつ追ってみる.
まずは </head>
直前での外部ファイルを読み込み方法を調査.
header.php を眺める
まずは head
タグを管理しているファイルを眺めてみる.
該当ファイルはこれ↓
- /themes/simplicity2/header.php
</head>
のあたりを眺めてみる↓
<!-- header.php -->
<!--
中略
-->
<?php get_template_part('header-insert');//ユーザーが子テーマからヘッダーに何か記述したい時に利用するテンプレート?>
<?php get_template_part('head-custom-field');//カスタムフィールドの挿入(カスタムフィールド名:head_custom)?>
<!--
中略
-->
</head>
wordpressの組込み関数で外部ファイルが読み込まれている.
読み込まれているファイルは次の2つ.
ファイル | 用途 |
---|---|
header-insert.php | css, js 等を headタグ内で呼び出したい時に |
head-custom-field.php | カスタムフィールドの値を headタグ 内で呼び出したい時に |
今回は目的を達成するために head-custom-field.php
を利用する.
ここで気になった関数を調査.
get_template_part()
get_template_part()
外部ファイルを呼び出す関数らしい.
テンプレートパーツ(ヘッダー、サイドバー、フッターを除きます)をテンプレートへ読み込みます。
head-custom-field.php
を眺める
次のファイルを眺めてみる.
<?php
if ( is_singular() ){
$head_custom = get_post_meta($post->ID, 'head_custom', true);
if ( $head_custom ) {
echo replace_directory_uri($head_custom);
}
}
?>
カスタムフィールドの値がセットされていたらURI置換が実行される、という内容.
ここでも気になった組み込み関数について紹介.
概要は次の通り.
is_singular()
get_post_meta()
replace_directory_uri()
is_singular()
個別投稿を表示しているかどうかをチェックする関数.
似たような関数で次のようなものがある.
is_page()
is_attachment()
詳しくは公式wikiで.
get_post_meta()
この関数は
- 特定の投稿の
- 特定のキーから
- カスタムフィールドの値を取得する関数
とのこと.
replace_directory_uri()
これはsimplicity作者の @わいひら さんが作った関数.
そもそもこの関数が定義されている場所はここ↓
/themes/simplicity2/functions.php
// functions.php
function replace_directory_uri($code){
$code = str_replace('[template_directory_uri]', get_template_directory_uri(), $code);
$code = str_replace('[stylesheet_directory_uri]', get_stylesheet_directory_uri(), $code);
$code = str_replace('<?php echo template_directory_uri(); ?>', get_template_directory_uri(), $code);
$code = str_replace('<?php echo get_stylesheet_directory_uri(); ?>', get_stylesheet_directory_uri(), $code);
return $code;
}
この関数では get_post_meta()
で取得した結果をロケーションURIに置換している.
ここまでで, 関連ファイルの把握はok.
固定ページにcssを適用してみる
実際に試してみる.
今回のゴールは次の通り.
- 固定ページで作成されたプロフィールページの
- ダサいtableを
- 美しく整列する
手順は次の通り.
profile.css
を用意- 子テーマ内に
head-custom-field.php
を設置 - カスタムフィールド編集
- 確認
以下, 詳細.
profile.css
を用意
次の場所に profile.css
を設置.
/themes/simplicity2-child/css/profile.css
デフォルトでは css
ディレクトリは存在しない.
自分で作った.
profile.css
の中身は記述済みとして解説を続ける.
子テーマ内に head-custom-field.php
を設置
親テーマのファイルは基本的に触らない.
今回は子テーマ内に次のファイルを用意する.
/themes/simplicity2-child/head-custom-field.php
ここで is_page()
の引数について調べてみる.
固定ページの ID、タイトル、スラッグ、またはそれらの配列。
つまり, ここでは profileページの次のいずれかを引数に取ればよい.
- ID
- タイトル
- スラッグ
ひとまず, これらの取得方法を確認する.
ID
次のコードで取得可能.
get_post()
<?php
echo '<pre>';
echo 'get_post() = ';
var_dump(get_post());
echo '</pre>';
?>
実行結果
get_post() = object(WP_Post)#7017 (24) {
["ID"]=>
int(8)
["post_author"]=>
string(1) "2"
["post_date"]=>
string(19) "2015-10-18 11:07:56"
["post_date_gmt"]=>
string(19) "2015-10-18 02:07:56"
["post_content"]=>
string(3115) "
IDは 8
らしい.
<pre></pre>
は出力結果を見やすくするために挿入している.
タイトル
次のコードでタイトルの取得が可能.
get_the_title(get_post()->ID)
echo '<pre>';
echo 'get_the_title() = ';
var_dump(get_the_title(get_post()->ID));
echo '</pre>';
get_the_title()
の引数には投稿IDを入れる必要がある.
投稿IDは先程使った get_post()
関数を利用して取得.
スラッグ
次のコードでスラッグの取得が可能.
$post->post_name
echo '<pre>';
echo '$post->post_name = ';
var_dump($post->post_name);
echo '</pre>';
実行結果
$post->post_name = string(6) "page-8"
page-8
がスラッグ.
今回参考にした, アクセス可能なオブジェクトについてのページはこちら.
head-custom-field.php 編集
最終的に, head-custom-field.php
には次のようなコードを書いた.
is_page()
の引数には ID
を用いた.
// /themes/simplicity2-child/head-custom-field.php
/**
* read .css under this conditions:
* - displaying `Page`
* - profile page id: get_post()->ID;// 8
*/
$prflPageId = 8;
$key = 'aboutCss';
if ( is_page($prflPageId) ){// 固定ページ かつ aboutページ の場合
$val = get_post_meta($post->ID, $key, true);
if ( $val ) {
$absPathToCss = replace_directory_uri($val);
$absPathToCss = esc_html($absPathToCss);
$displayProfileCss = "<link rel=\"stylesheet\" href=\"$absPathToCss\" type=\"text/css\" media=\"all\" />\n";
echo $displayProfileCss;
}
}
ここでやっていることは次の通り.
- 別ファイルで用意したcssを呼び出すために
- カスタムフィールで設定した キー, 値 を取得
- 取得した値を
<link>
タグとして出力
今回は文字列を表示するので esc_html()
でサニタイズを行った.
サニタイズのタイミングや流儀は正直よく分かっていない.
今後セキュリティの勉強を進めつつ, 自分のやり方を見つけてゆこうと思う.
カスタムフィールド編集
カスタムフィールドには次のように記述.
カスタムフィールドの入力項目は次の通り.
項目 | 入力内容 |
---|---|
名前 | キー のこと. get_post_meta() の第二引数で指定する文字列 |
値 | get_post_meta() で取得したい文字列 |
私は次のように入力した.
- 名前 :
aboutCss
- 値 : cssファイルが置いてある場所の絶対パス
確認
ブラウザから固定ページにアクセスして表示確認を行う.
見た目がずいぶんすっきりした.
今回のレイアウトで工夫した点は次の通り.
- snsアイコン 設置
- snsアイコンへのオンマウス時に変色させる
- 写真とアイコンの幅を合わせる
長くなったけど, 今回は以上.