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

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

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

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

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

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

自作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の読み込みが階層によって変わらないようにするためにドキュメントルートを指定して読み込むと良いでしょう。

便利な関数をたくさん作っておく

今回のbody_classは一例に過ぎませんが、こんなことできたらサイト制作の効率があがるなという地味に便利な関数はたくさん作っておくことをオススメします。

フレームワーク使ってしまえば良いんですけど、それができない状況も結構ありますからね。

正社員という奴隷制度に中指を立てるWebエンジニアです。PHPが得意。繋がれた鎖を断ち切るために、自由を取り戻すために、プログラミングスキルを磨く日々です。プログラミングと個人でもできるビジネスについて、情報発信しています。

詳しくはこちら