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

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

今回はこれを実現するためのカスタムフィールドについてまとめる.
結論だけ知りたい場合は 固定ページにcssを適用してみる を見るといい.
概要は次の通り.

  1. 参考
  2. 動作環境
    1. 前提条件
    2. simplicity2について
  3. 背景
  4. 作業方針
  5. カスタムフィールドとは
  6. 関係するファイルを一つずつ追ってみる
    1. header.php を眺める
    2. head-custom-field.php を眺める
  7. 固定ページにcssを適用してみる
    1. profile.css を用意
    2. 子テーマ内に head-custom-field.php を設置
    3. カスタムフィールド編集
    4. 確認

参考

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

動作環境

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

前提条件

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

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

次の知識を前提とする.

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

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

[Windows]Rloginからエックスサーバーにssh接続する方法
今回はWindows環境でRloginからエックスサーバーへssh接続する方法を紹介します。
kengotakimoto.com
2016.09.04

simplicity2について

今回はwordpressテーマ 「simplicity2」 を例に作業を進める.
simplicityは作者の @わいひら さんがユーザフレンドリなファイルをいくつか用意してくれている.

ディレクトリ構造やファイルの種類だけを見ると, 他テーマユーザは応用できないかもしれない.
だから, 本記事では他テーマでも応用できるように次の点を意識して作業を進める.

  • htmlの基本構造
  • wordpress組み込み関数 使用方法

背景

私の プロフィールページ は固定ページで作成しているが…
ダサい.
特に写真周りが.

現状では次のように table を用いて表示している.

about1707

画像から分かる通り, 次の点が気に入らない.

  • 写真とsnsリンクまでの距離が遠い
  • table にムダな空白がある
  • リストが画像の下にあるのが嫌だ

そんなわけで, cssの勉強も兼ねてこれらを解消したい.

作業方針

今回は次の方針で固定ページに特定のcssを適用する.

  • 固定ページで使いたい css ファイルを用意
  • 特定の固定ページでのみこのcssを読み込むためにカスタムフィールドを編集

考え方は通常のhtmlと一緒.

ただ, 何も考えずに <head></head> 内にコードを埋め込むと全ページに cssが適用されてしまう.
これは, レイアウト崩れの原因になる.
だから, 特定のページだけでこの css を読み込みたい.

特定のページにcssを適用するには, カスタムフィールドを利用するのが楽.

カスタムフィールドとは

ここで, カスタムフィールドについておさらいする.
私の認識は次の通り.

  • 記事ごとに
  • 自由なデータを入力可能な
  • 管理画面上から操作可能な入力フォームのこと

管理画面でみるとこんな感じ.

custum_css_01

記事編集エリアの下側に出てくるフィールドのこと.
デフォルトでは非表示なので, 次の手順で表示する.

  1. 管理画面へログイン
  2. 所望の記事の編集画面へ
  3. 画面右上-> 表示オプション -> カスタムフィールド にチェック

公式wikiには次のように書いてある.

WordPress には、投稿者が投稿に「カスタムフィールド」を追加できる機能があります。
この任意の情報は「メタデータ」と呼ばれており、たとえば以下のような情報を含めることができます。

  • 現在のムード: 幸せいっぱい
  • 今読んでいる本: 星の王子様
  • BGM: Rock Around the Clock
  • 今日の天気: 晴れ

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

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

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

今回は, このメタデータに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()

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

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

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

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で.

関数リファレンス/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('<?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を
  • 美しく整列する

手順は次の通り.

  1. profile.css を用意
  2. 子テーマ内に head-custom-field.php を設置
  3. カスタムフィールド編集
  4. 確認

以下, 詳細.

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()
<?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) "
  

    

    
  1. 参考
  2. 動作環境
    1. 前提条件
    2. simplicity2について
  3. 背景
  4. 作業方針
  5. カスタムフィールドとは
  6. 関係するファイルを一つずつ追ってみる
    1. header.php を眺める
    2. head-custom-field.php を眺める
  7. 固定ページにcssを適用してみる
    1. profile.css を用意
    2. 子テーマ内に head-custom-field.php を設置
    3. カスタムフィールド編集
    4. 確認

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() 関数を利用して取得.

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

スラッグ

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

  • $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 がスラッグ.

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

参考: クラスリファレンス/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 = "<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アイコンへのオンマウス時に変色させる
  • 写真とアイコンの幅を合わせる

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

この記事を書いた人
たきもと

1985年生まれ 東京都在住 フリーランスWEBエンジニア.
30歳からWEBプログラミングを独学で習得. その後エンジニアとして某企業にコミット.
現在は週3日稼働のフリーランスエンジニアとして活躍.
学んだことを中心に web 界隈の人達に向けた情報を発信.

たきもとをフォローする
CODE
wordpress
＼ share ／
たきもと
たきもと.com

コメント

Secured By miniOrange