wordpress 固定ページへの個別css設定方法

固定ページで作成したプロフィールページだけ異なるcssでスタイリングしたい.

今回はこれを実現するためのカスタムフィールドについてまとめる.
概要は次の通り.

1 参考
2 動作環境
3 背景
4 作業方針
5 カスタムフィールドとは
6 関係するファイルを一つずつ追ってみる
7 固定ページにcssを適用してみる

参考

wp公式wikiで組み込み関数の使い方を調査した.

動作環境

WordPress 4.7.2
エックスサーバプラン X10
theme 「simplicity2」

前提条件

次のセットアップは済んでいるものとする.

シェルからのエックスサーバへのssh接続設定
FTPソフト等の設定
使用テーマ「simplicity2」の子テーマを用意

次の知識を前提とする.

子テーマに設置したファイルは親テーマのファイルを上書きすること
htmlの基本的な構造を理解していること

エックスサーバへのssh接続設定は, 以前書いたこちらの記事を参照↓

[Windows]Rloginからエックスサーバーにssh接続する方法

今回はRloginからエックスサーバへssh接続する方法を紹介します。概要は次の通り。私がRloginでエックス...

kengotakimoto.com

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

今日の天気: 晴れ

引用: カスタムフィールドの使い方 | wpdocs.osdn.jp

要約すると↓こういうこと.

メタデータと呼ばれる変数的なものに
好きなようにデータを格納して扱うことができる便利なもの

今回は, このメタデータにcssを入れて扱うつもり.

関係するファイルを一つずつ追ってみる

最終的にやりたいことは次の2つ.

</head> タグの前で任意のcssを読み込みたい
特定のページでのみ↑これを適用したい

これを実現するために関連ファイルを1つずつ追ってみる.
まずは </head> 直前での外部ファイルを読み込み方法を調査.

header.php を眺める

まずは head タグを管理しているファイルを眺めてみる.
該当ファイルはこれ↓

/themes/simplicity2/header.php

</head> のあたりを眺めてみる↓

<!--

中略

-->

get_template_part('header-insert');//ユーザーが子テーマからヘッダーに何か記述したい時に利用するテンプレート?>

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()`

外部ファイルを呼び出す関数らしい.

テンプレートパーツ（ヘッダー、サイドバー、フッターを除きます）をテンプレートへ読み込みます。

引用: 関数リファレンス/get template part | wpdocs.osdn.jp

`head-custom-field.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で.

関数リファレンス/is singular | wpdocs.osdn.jp

`get_post_meta()`

この関数は

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

とのこと.

関数リファレンス/get post meta | wpdocs.osdn.jp

`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(' echo template_directory_uri(); ?>', get_template_directory_uri(), $code);

$code = str_replace(' 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、タイトル、スラッグ、またはそれらの配列。

引用: is page | epfovd.odfn.jp

つまり, ここでは profileページの次のいずれかを引数に取ればよい.

ID
タイトル
スラッグ

ひとまず, これらの取得方法を確認する.

ID

次のコードで取得可能.

get_post()

echo '

';

echo 'get_post() = ';

var_dump(get_post());

echo '';

実行結果

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) "[toc]

IDは 8 らしい.

<pre></pre> は出力結果を見やすくするために挿入している.

タイトル

次のコードでタイトルの取得が可能.

get_the_title(get_post()->ID)

echo '

';

echo 'get_the_title() = ';

var_dump(get_the_title(get_post()->ID));

echo '';

get_the_title() の引数には投稿IDを入れる必要がある.
投稿IDは先程使った get_post() 関数を利用して取得.

参考: 関数リファレンス/get the title | wpdocs.osdn.jp

スラッグ

次のコードでスラッグの取得が可能.

$post->post_name

echo '

';

echo '$post->post_name = ';

var_dump($post->post_name);

echo '';

実行結果

$post->post_name = string(6) "page-8"

page-8 がスラッグ.

今回参考にした, アクセス可能なオブジェクトについてのページはこちら.

参考: クラスリファレンス/WP Post | wpdocs.osdn.jp

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 = "\n";

echo $displayProfileCss;

}

ここでやっていることは次の通り.

別ファイルで用意したcssを呼び出すために
カスタムフィールで設定したキー, 値を取得
取得した値を <link> タグとして出力

今回は文字列を表示するので esc_html() でサニタイズを行った.

サニタイズのタイミングや流儀は正直よく分かっていない.
今後セキュリティの勉強を進めつつ, 自分のやり方を見つけてゆこうと思う.

カスタムフィールド編集

カスタムフィールドには次のように記述.

カスタムフィールドの入力項目は次の通り.

項目	入力内容
名前	キーのこと. `get_post_meta()` の第二引数で指定する文字列
値	`get_post_meta()` で取得したい文字列

私は次のように入力した.

名前 : aboutCss
値 : cssファイルが置いてある場所の絶対パス

確認

ブラウザから固定ページにアクセスして表示確認を行う.

見た目がずいぶんすっきりした.

今回のレイアウトで工夫した点は次の通り.

snsアイコン設置
snsアイコンへのオンマウス時に変色させる
写真とアイコンの幅を合わせる

長くなったけど, 今回は以上.

参考

動作環境

前提条件

simplicity2について

背景

作業方針

カスタムフィールドとは

関係するファイルを一つずつ追ってみる

header.php を眺める

get_template_part()

head-custom-field.php を眺める

is_singular()

get_post_meta()

replace_directory_uri()

固定ページにcssを適用してみる

profile.css を用意

子テーマ内に head-custom-field.php を設置

ID

タイトル

スラッグ

head-custom-field.php 編集

カスタムフィールド編集

確認

こちらの記事も読まれています

windows8.1にvagrant,VCCWでWordPressローカル開発環境を構築する方法

wordmoveができない! RLoginからvagrantを踏み台にしてエックスサーバへssh接続する方法

WordPress 301リダイレクトによるパーマリンク変更方法

`get_template_part()`

`head-custom-field.php` を眺める

`is_singular()`

`get_post_meta()`

`replace_directory_uri()`

`profile.css` を用意

子テーマ内に `head-custom-field.php` を設置