04月28日
concrete5 ページごとのCSSを適用する一案
今回もconcrete5ネタです。
日本語の資料が無いので英語を漁る日々ですわ。導入コストは依然として高いなぁ。。。
さてさて、ページごとに独自のページごとにCSSを切り替えたい、という要望は多々あるはず（少なくとも自分には必須項目）。ページごとにページタイプを作ってテンプレートを作る、なんてナンセンスなので、何とかお手軽に導入できないものか…
そこで利用するのが「ページ属性」。デフォルトでも「Metaタグタイトル」「Metaタグ説明」「Metaタグキーワード」など、“ページごと“に独自の値を設定できるように用意されたオプションですね。管理画面の「ページとテーマ」メニューから、「ページタイプ」の下に設定があります。
ここの「ページ属性情報を追加」でCSS用のページ属性を作りたいと思います。
識別子となる“ハンドル“には、分かりやすく「CSS」とでもしましょう（たぶんここは半角英字が良いかと思います。）。“タイプ“には「テキストボックス」を。”検索可能”は必要ないでしょう。“名前“は適当に「CSS」でいいでしょうか？自分が見て分かりやすいもので良いと思います。
こんな感じでテキスト入力で任意の値を入力できるページ属性が追加できます。
次。
今度はページタイプごとに、先ほど追加したページ属性を使用できるように設定します。ページ属性を追加しても、ページタイプごとに使用可否を指定する必要があるのです。
ページタイプの一覧から「編集」で「使用可能なMETA属性」内に“CSS”というチェックボックスが追加されてるかと思います。これにチェックを入れることで、そのページタイプでCSSのページ属性を使用することが出来るようになります。
うむ。2段階体制。
さて、実際に各ページごとに追加した「CSSページ属性」の値に情報を入力してみます。
サイトマップから「ホーム」の編集画面を表示させて、上部タブメニューの「カスタム項目」を表示させると、最下部に“CSS”のテキスト入力欄が追加されてるかと思います。とりあえずここにCSSファイルの名前だけ入力しておきましょう。例えば「home.css」みたいな。
しかし、この「ページ属性」をどう引っ張ってきたらいいのか、資料を探すのに苦労しました…
今回はCSSファイルの指定なので、<head>～</head>内に記述することになりますね。ページ属性の値を読み出すには、ページ属性で指定した「ハンドル」を使用します。今回は“CSS“としたので、その値を読み出すには
-
$c->getCollectionAttributeValue('CSS');
とすればページごとに設定したCSSのファイル名を取得することが出来るようになります。とりあえず自分の要求としては複数のCSSを取得する必要は無いので、単一行的な扱いにしてますが、区切り文字を指定しておいてsplitで分けてもいいでしょう。さらに404をログに残したくなければfile_existsで存在確認してもいいでしょう。
ま、そんな事は省いちゃうとすると、ヘッダー部に記述するのは
-
<link rel="stylesheet" type="text/css" href="<?php echo $this->getThemePath(); ?>/css/<?php echo $c->getCollectionAttributeValue('CSS'); ?>" />
な感じで良いかと思います。
値の存在確認なんかを入れた方がスマートでしょうけど…
とりあえずはこれで「ページごとにCSSを指定する」という目標は達成です。今回利用した「ページ属性」にはテキスト入力の他にも「選択メニュー」や「ファイル/画像」「評価」などを指定することが出来るので、他にも有効な使いどころは多いのかと思います。PHPをカジったことがある人だとあまり苦労はしなさそうですが。。。また有効な使いどころがあれば、その都度ご紹介できればと思います。
コメント & トラックバック
コメントフィード
コメント