テーマ制作で陥りやすい落とし穴

concrete5のテーマ開発で陥りやすいハマりポイントについてご紹介します。

影響範囲の広いスタイルシート

HTMLテンプレートで、特定の影響範囲の広いスタイルシートの書き方（例えば、pタグ全体に行間を適用していたり、liタグ全体にスタイルを適用していたり）をしている場合、concrete5のユーザーインターフェースのスタイルを上書きしてしまう場合があります。すべてのconcrete5のスタイルは .ccm-ui クラスを継承して書かれていますので、次のように修正すれば干渉を回避することができます。

.ccm-page p
.ccm-page ul li

ccm-page クラスは getPageWrapperClass() メソッドによって自動的に追加されます。このクラスがテーマによるコンテンツを囲んでいますので、このクラスを継承してCSSを記述すれば、concrete5のインターフェースと干渉せずにスタイルを指定することができます。

JavaScriptの干渉

concrete5自身がバージョン1系のjQueryを読み込んでいます。テーマの元にしたHTMLでもjQueryを読み込んでいると、concrete5自身が読み込むjQueryと干渉して問題になる場合があります。Javascriptライブラリを多数使用する際は、concrete5のコアとの干渉に注意してください。concrete5ではjQueryはヘッダーで読み込まれますが、その他のライブラリはフッターで読み込まれます。もしあなたのJavascriptがこれらのライブラリに依存している場合は、フッターで読み込ませるのが良い方法でしょう。

Javascriptをconcrete5のアセットシステムを使って登録するのは、より良い方法です。パッケージやコアで読み込まれているライブラリと干渉するのを防げるほか、圧縮して配信できるなどのメリットがあります。

開発中はキャッシュをオフに

concrete5のテーマの開発中は、［管理画面 > システムと設定 > 最適化 > キャッシュとスピード設定］からすべてのキャッシュをオフにしておきましょう。特にオーバーライドキャッシュを無効にすることは重要です。これをオフにしないと、concrete5はapplicationフォルダを読みに行きません。このことで余計なエラーが出たりして、時間の無駄になります。

404ページの表示は遅い

concrete5では、ファイルが見つからない場合、404ページの表示はconcrete5を通して出力されます。これは通常良いことです。なぜなら、404ページのデザインをサイトの他のページとあわせることができるからです。ただし、画像やJavascriptのリンク切れが多数ある場合も、それぞれのリンクに404ページを返すためにconcrete5が動作しますので、結果としてページの表示が遅くなる原因になります。開発中のサイトでは特に404が多く発生しがちですし、しかもキャッシュをオフにしていますので、問題はより大きくなります。先にリンク切れを解消してしまいましょう。そうでないと、開発中にずっと遅いconcrete5を使い続けなくてはいけなくなります。

jQuery UI は改変しない方が良い

カスタマイズした jQuery UI を使用しなければならない時はどうしてもあるかもしれませんが、これはおすすめしません。concrete5に同梱されている jQuery UIのスタイルシートは、concrete5のインターフェース用にカスタマイズされているため、jqueryui.com から生成した違うスタイルシートを読み込ませると、concrete5のダイアログなどのスタイルが崩れる可能性があります。

原文：Common Pitfalls

ここからは、英語の原文にない気付いたポイントを追加して行きます。

PageThemeには、空のメソッドを残さない

使用しないからと言って、空のままのメソッドを残しておかないようにしてください。

    public function getThemeEditorClasses()
    {
/* 使用しないのでコメントアウト〜
        return array(
            array('title' => t('Title Thin'), 'menuClass' => 'title-thin', 'spanClass' => 'title-thin'),
            array('title' => t('Title Caps Bold'), 'menuClass' => 'title-caps-bold', 'spanClass' => 'title-caps-bold')
        );
*/
    }

記事ブロックの編集でJavascriptエラーの原因になることを確認しています。

指定した箇所以外でテーマ関連のファイルを追加しない

テーマファイルのカスタマイズを行う際は、必ず、関連するファイルを

/application/themes/[テーマハンドル]/

以下のフォルダに追加するよう心がけてください。

パッケージをカスタマイズ or ファイルを追加する場合

また、既存のパッケージを編集する際は、一度、テーマファイルを application フォルダに引越しをしてから作業をされることを推奨します。

/packages/[パッケージハンドル]/themes/[テーマハンドル]/

以下のファイルを

/application/themes/[テーマハンドル]/

にコピーし、page_theme.php がファイルが存在している場合は、application/themes/[テーマハンドル]/ にコピーした先の page_theme.php をテキストエディタで開いて

namespace Concrete\Package\[パッケージハンドル]\Theme\[テーマハンドル];

を

namespace Application\Theme\[テーマハンドル];

のように、「Concrete\Package」の部分を「Application」に。そして、「[パッケージハンドル]」部分を削除してアップロードしなおしてください。でないと「Cannot declare class ....」エラーが発生します。

この操作がわからないという方は Elemental テーマのカスタマイズをするためにリリースされている Cloneamental (後述) が利用できます。

/application/files/ フォルダ内のファイルは触らない

application/files/ 以下のフォルダは concrete5 が管理するもです。絶対に移動・削除・修正を行わないでください。

例えば concrete5 のテーマでは、LESS ファイルを生成すると、/application/files/cache フォルダ内に、CSS ファイルを生成します。そのファイルを上書きすることによって、CSSを修正したいかもしれませんが、これらのファイルは、 concrete5 が自動的にキャッシュをクリアするときに削除されてしまいます。

かならず、別の CSS ファイルを使い、CSS クラスなどを !important 指定するなどでの方法をお使いください。

Elemental テーマをカスタマイズされたい方へおすすめパッケージ

concrete5 にデフォルトで同梱されている Elemental テーマを追加でカスタマイズした場合、前述の方法で application/themes/elemental フォルダーへコピーする必要がありますが、その煩わしさを解消するために作られたのが Cloneamental です。Elemental テーマを Clone (クローン) したという造語で名付けられています。

http://www.concrete5.org/marketplace/themes/cloneamental

インストールすると

/packages/cloneamental/themes/cloneamental

ディレクトリーに Elemental のそのままのコピーを作成します。

管理画面のページとテーマより、Cloneamental を有効化し、FTP などで、上記フォルダ配下のファイルをそのままカスタマイズするように作られています。

※ 他のパッケージテーマをお使いの方で /package/[パッケージハンドル]/themes/[テーマハンドル] 内のファイルに修正を加えている方は、テーマの新バージョンがリリースしアップグレードすると今までの作業ファイルが全部消えてしまう可能性があるので Cloneamental 以外のパッケージテーマでは、必ず前述の方法で「application/themes/[テーマハンドル]/」以下にファイルをコピーしてからカスタマイズを行ってください。