CSSセレクタからページタイプとページテンプレートを判別する

Page::getPageWrapperClass() を body タグの直下の div タグに付けることは、concrete5のユーザーインターフェースを動作させるためには必須ですが、このメソッドは、オプションで、テーマ開発者がCSSを記述するのに便利な情報も出力してくれます。それでは、$c->getPageWrapperClass() が Elemental サンプルコンテンツのブログのトップページでどのようなクラスを出力するのか見てみましょう。

<div class="ccm-page page-type-blog page-template-full">
...
</div>

これらの３つのクラスは自動的に出力されます。最初のクラス（ccm-page）は、concrete5の編集モードの動作に必要なものです。その他のクラスは、ページタイプまたはページテンプレートに対応しています。ブログのトップページのページタイプは「ブログ（ハンドルは blog）」なので page-type-blog クラスが付けられます。また、ページテンプレートは「全幅（ハンドルは full）」を使用していますので、page-template-full クラスが付けられます。

他のページにアクセスすると、異なるクラスが生成されているのが分かると思います。たとえば、ポートフォリオプロジェクトページでは、次のクラスが生成されているはずです。

<div class="ccm-page page-type-portfolio-project page-template-left-sidebar">

注意：ハンドル内のアンダースコアは、ハイフンに変換されます（例：portfolio_project は page-type-portfolio-projectになります）。

この機能は、テーマ開発のうえでとても便利です。例えば、次のCSSで、ブログページでのみサイドバーを少し下げることができます。

div.ccm-page.page-type-blog-entry {
    div.col-sidebar {
      padding-top: 40px;
    }
 }

原文：Targeting Page Types and Page Templates with CSS Selectors