wordpressのbody_classを静的なサイトでも使えるようにする

wordpressのテーマを作る時、body_classの関数をよく利用しますよね。

bodyにclassが自動で付いてくれるので、ページ毎にstyleを変更できるようになります。

そんな便利な関数を自作してみようというのが今回の内容テーマとなります。

静的なサイトでもbody_classに似た機能を実装することができるのです。

こういった地味に便利な関数を自作してまとめておくと、htmlファイルを使うのがバカバカ敷くなってくるくらい作業効率が上がるのでおすすめです。

[business_backbone]

自作body_classの仕様を考える

自作body_classの仕様を考える

wordpressのbody_classほど多機能にする必要はないので、必要最低限の機能にします。

ディレクトリ名とファイル名を使ってclassを付与
ページ毎に絶対にかぶらないclassを付与
ディレクトリが下層になっても動く

こんな感じで作ってみます。

classの元となるURLを取得する

まず、URLを取得しないと始まりません。

$_SERVER[‘SCRIPT_NAME’]を使ってURLのドメインから後ろを取得します。

パラメーターについて今回は考えませんので、$_SERVER[‘SCRIPT_NAME’]が最適です。

http://example.com/ → /index.php
http://example.com/test.php → /test.php
http://example.com/test/test.php → /test/test.php
http://example.com/test/test.php?test=1 → /test/test.php

このようなパターンで現在のURLからパラメーターを除外したドメインから後ろが文字列として取得できます。

取得した文字列をclassで使いやすくする

$_SERVER[‘SCRIPT_NAME’]で取得した文字列はこのままだと使いにくいので、使いやすい形に整形していきます。

/と.phpが邪魔ですよね。

これを取り除くために2つの関数を利用します。

str_replace → 文字を置き換える
ltrim → 最初の一文字を取り除く

まず、str_replace(変更したい文字, 置き換える文字, 元の文字)で置き換えます。

変更したい文字と置き換える文字は配列を設定すると複数の文字列を一気に処理できるので、このように設定します。

$class = str_replace(array('/','.php'), array('-',''), $_SERVER['SCRIPT_NAME']);

スラッシュ → ハイフンに変更
拡張子(.php) → 削除

/test/test.phpとなっていたものは-test-testと整形されます。

次にltrimを使って先頭のハイフンを削除すれば完成です。

$class = ltrim($class, '-');

出来上がった文字列はこのようになります。

http://example.com/ → index
http://example.com/test.php → test
http://example.com/test/test.php → test-test
http://example.com/test/test.php?test=1 → test-test

関数にして使いやすくする

wordpressのbody_classのように実行させるなら、関数にしないとだめなので、このよう作っておくと良いでしょう。

//bodyのクラス
 function body_class()
 {
    $class = str_replace(array('/','.php'), array('-',''), $_SERVER['SCRIPT_NAME']);
    $class = ltrim($class, '-');
    print ' class="' . $class . '"';
 }

functions.phpのように別ファイルに関数を記述しておき、実行させたい場所で読み込み、関数の記述をします。

<?php require_once $_SERVER['DOCUMENT_ROOT'] . 'functions.php'; ?>
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body <?php body_class(); ?>>
  
</body>
</html>

functions.phpの読み込みが階層によって変わらないようにするためにドキュメントルートを指定して読み込むと良いでしょう。