テーマを作成する::エレメンタル(Elemental)カスタマイズの準備

Posted by admin at 20:57 日時 2015/09/26

Share:

（Ver.7）のテーマを作成する
エレメンタル(Elemental)カスタマイズの準備

教科書サイトは、以下を使用しています。
HTMLテンプレートをconcrete5テーマに変換する
https://concrete5-japan.org/help/5-7/developer/designing-for-concrete5/building-a-concrete5-theme/converting-an-html-template-to-a-concrete5-theme/

（重要）まず最初に、管理画面からすべてのキャッシュをオフにしてください。

こうしておかないと変更がわからなかったりしますので注意です。
※５．７系では、Bootstrap(ブートストラップ)のファイル拡張子 *.less のキャッシュ設定もありますね。５．７系では、キャッシュ設定が細かくできるようになっていますね。

『テーマ CSS キャッシュ』

無効 - LESS ファイルを使ったテーマを開発している場合に適しています。
有効 - ウェブサイトを高速化するのに役立ちます
『LESSの出力を圧縮』
無効 - 出力されたCSSをデバッグするのに適しています。
□生成されたCSSファイルのソースマップを有効にする
有効 - ウェブサイトを高速化するのに役立ちます

●基本全てを無効にしておきましょう。

※教科書サイトでは、記載ないですが、エラーも表示するようにしておきましょう。

管理画面 → システムと設定 → (サーバー設定一覧)デバッグ設定 → エラーを表示
■サイトユーザーにエラー情報を表示

一般的なエラーメッセージを表示するには無効化する
エラー詳細
エラーメッセージのみを表示
■エラーのデバッグ出力を表示

　重要で公開すべきでない情報を表示しかねないため、構築時のみに使用してください。

ドキュメントルート/application/themes

urbanic

と言うフォルダ名にしました。

テーマのディレクトリ (例. ドキュメントルート/application/themes/urbanic/)にthumbnail.png ファイル (120x90) を作成してください。管理画面で表示されるテーマのサムネイル画像です。
次に、description.txt ファイルを作成してください。最初の行にテーマの名前を、次の行に説明を書きます。
※ちなみに、エレメンタル(Elemental)のthumbnail.pngのサイズは、360x270です。
　(120x90)以上で、360x270サイズまででもいいということでしょうね。


エレメンタル(Elemental)テーマのカスタマイズの準備
(※elemental でフォルトのテーマのカスタマイズ。)

いきなり、エラーがでました。
が、エラーの内容から、おそらく、５．７で導入された、名前空間が影響しているのでしょうね。

Elemental テーマをコピーして改造する準備の方法
https://concrete5-japan.org/community/forums/design/post-10827/

katz515さんの記事の通り。

※ただし、フォルダ名も規則に則り変更する必要があります。
※が、しかし、

@import "../../../css/build/core/include/mixins.less";

を

@import "../../../../concrete/css/build/core/include/mixins.less";

Call to a member function hasPageThemeGridFrameworkOffsetClasses() on a non-object
のエラーが発生します。

※挙動をみるため、cssのフォルダ名を変えたり、権限を無効にしたりと、意地悪テストをしたためかと思われます。

★メンバー関数のオブジェクトがない。

　設定は合ってるけど。
　仕方ないので、一旦、テーマを既設のElemental テーマに戻し、カスタマイズ用を削除、再インストールすると、正常に機能しました。

ブートストラップ系の オブジェクトが認識しなくなったのだろうね。
ファイル止めたり、意地悪してたから。


★テーマの説明が変更した値になっていない。

参考までに、素のテーマを再度いれてみた。　例）xyz
ちゃんと、xyz　フォルダに、thumbnail.png ファイル (120x90)　と　description.txt
description.txt　の中身

１行目：xyz
２行目：xyz はテストのテーマです。この説明ちゃんと表示されるかな？ 2015/09/16 Theme

これで、最低限のテーマができる。
これはきちんと表示されているね。

ということは、？　エレメンタル

★Bootstrapの入ったDefaultテーマである『エレメンタル(Elemental)』は、主要な修正をしたければ、クラスを再構築するため、テーマの削除、インストールが必要です。

これで、きちんとファイルが変更されました。

※description.txtを使いたいなら、page_theme.php のクラスメソッドをコメントアウト削除します。
これはサイトに記載がありません。

（追記）2015/10/02
陥りやすい落とし穴
https://concrete5-japan.org/help/5-7/developer/designing-for-concrete5/building-a-concrete5-theme/common-pitfalls/

に以下の注意がありますので、コメントにせずファイルをバックアップして、
不要メソッドは削除したほうがいいですね。
カスタマイズするときに異常になる恐れがありますね。

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

page_theme.phpの変更箇所
--------------------------
protected $pThemeGridFrameworkHandle = 'bootstrap3';
/*
public function getThemeName()
{
return t('Elemental');
}
public function getThemeDescription()
{
return t('Elegant, spacious theme with support for blogs, portfolios, layouts and more.');
}
*/
--------------------------

page_theme.phpにてconcrete5の公式日本語サイトの検索窓で確認しますと、

5.7 オリジナルテーマについて
https://concrete5-japan.org/community/forums/5-7-x/post-9081/

Elementalに戻せなく成ってしまいました
https://concrete5-japan.org/community/forums/design/post-11161/

ということは、エレメンタル(Elemental)をベースとしたテーマのカスタマイズは、
初心者には、結構難易度が高いということなのでしょうか？

私もまだ、未確認ですが、構築予定のサイトは、やはりカスタマイズでしょうかね。

★方法として、ご提案できるのは、一度、簡単なBootstrapを利用したサイトを構築して、
(concrete5 5.7を利用しない)学習するのも案としては、いいかもです。

それで、できたサイトを、持ってくるのもありです。
エレメンタル(Elemental)だと、組み込まれたグリッドシステムを
使えるからいいのかな？
要検証です。（2015/09/16現在）

------------------------- 引用　ここから　-------------------------
こちらのスレッドは確認したのですが、状況が違うようで解決しませんでした。
前述のエラーが出た後は、applicationディレクトリ配下に作成したオリジナルのテーマフォルダを削除しても、解決しません。
また、application/themes　ディレクトリ自身をGitのローカルリポジトリにしていたので、
オリジナルテーマが動作していた頃のコミットに戻しても、事象が解決せず、
concrete5そのものを再インストールすると、（当然ですが）一旦、エラーが出なくなります。
再度、オリジナルテーマを「有効」にした直後、同じ事象が出てしまいます。
オリジナルテーマのディレクトリ配下になんらかの問題があると思うのですが、
過去に動作が確認できていたcommitログのバージョンに遡っても、事象が出てしまうので、困っております。
再度、一から、テーマを記述して、どこに原因があるのか冷静に調べてみたいと想います。
------------------------- 引用　ここまで　-------------------------