(モダン)デザイナー&開発者向けデザインカスタマイズconcrete5のテーマの作成HTMLテンプレートをconcrete5テーマに変換するツイートするHTMLテンプレートをconcrete5テーマに変換するこのページは、下記の動画の解説をもとにしています。動画は英語です(日本語字幕をつけるか日本語で採録するかは検討中です)。要約まず最初に、管理画面からすべてのキャッシュをオフにしてください。自分で作っても構いません。(追記:テーマのディレクトリ名は半角英小文字か数字のみを使用してください。大文字を使用するとエラーになります。管理画面で表示されるテーマのサムネイル画像です。ファイルを作成してください。最初の行にテーマの名前を、次の行に説明を書きます。テーマ]にアクセスすると、いま作成したテーマがインストール待ちで表示されています。テーマをインストールしましょう。ページテンプレートを作成する必要があります。管理画面のテーマのページから、作成したテーマを有効化します。別ウィンドウでサイトにアクセスしてみてください。何も表示されませんね。これは、まだ何のテンプレートも作成していないからです。このテンプレートファイルは、管理画面から設定されたページテンプレートのハンドルと名前が一致するファイルがない場合に使われるものです。HTMLファイルを作成しているテーマのディレクトリ内にコピーし、名前をdefault.phpに変更して、何が起こるか見てみましょう。サイトを再読み込みしてみましょう。HTMLと同じコンテンツが表示されるようになりましたが、画像やCSSは読み込まれていません。これは、まだそれらを読み込んでいないからです。すべてのJavascript、CSS、フォント、画像をテーマのディレクトリにコピーしてください。$view->getThemePath()?>/js/file.js"のように変更します。次に、ページのヘッダーとフッターに必須のPHPコードを追加します。Loader::element('header_required')?>headタグ内に追加します(そして、titleやmetaタグはconcrete5自身がこの位置に出力するので、headタグ内から削除してください)。Loader::element('footer_required')?>bodyの閉じタグの直前に追加します。ページを再読み込みしてみましょう。concrete5のツールバーが表示されるようになりましたね。次に、ページ全体を囲むdivタグを追加します。これは、concrete5の編集モードで正しくパネルが開閉するために必要になります。ページのコンテンツを囲むようにdivタグを追加してください(bodyの開始タグとfooter_requiredの間に入れるのが良いでしょう)。divのclassには次のPHPコードを挿入します。$c->getPageWrapperClass()?>">その他に、テーマに使用するHTMLで使用しているCSSが、concrete5のインターフェースとコンフリクトする場合がありますので、その際はCSSを修正する必要があります。次にエリアを設定して行きましょう。default.phpのなかから編集可能にしたいコンテンツを削除し、代わりに以下のPHPコードを挿入します。$a->display($c);?>これだけで、コードを挿入した領域に、編集モードでブロックが追加可能になります。エリア名は通常英語でしていします。MainやSidebarなど、よく使われる名前についてはデフォルトでインストールされているElementalテーマを参考にしてください。concrete5導入とサイト制作の教科書」が発売されました。対象は、ブログ型CMSだけでなく、ブロック型CMSの構築知識を身につけたいWebデザイナーやWordPressによるWebサイトの受託制作を行っていて,他社と差別化を図りたいWebサイト制作会社の方たちです。MITライセンスで配布されているオープンソースCMSです。Inc.と株式会社マカルーデジタルの登録商標です。名称とロゴの使用について。サイト内の情報の著作権は放棄しておりません。