こんにちわ！concrete5 Japan Advent Calendar 20144日目は、東京ユーザー会のタケさんによる初心者勉強会についての記事に続き、最近コンクリを触り始めたばかりの90zbearがお送り致します。

今回は、5.7系がリリースされた直後くらいからconcrete5を本格的に触り始めた僕が、初めてオリジナルテーマを作った際にポイントになったことなどを簡単に並べてみます。

これからコンクリをはじめる人の参考になれば幸いです。

2日目のrriinnddoouuさんの記事とかぶってしまった気もしますが、僕なりにシングルページのウェブサイトをひとつ、bootstrapベースのウェブサイトをひとつ、あわせて2つのウェブサイトを作ってみた感想とハマったポイントをまとめてみました！

 

body直下にconcrete5で編集するためのwrapperを用意する

こいつがいないと、横からにょきっとナビゲーションが出てきた時にfixedなナビゲーションが残ってしまうのです。

<div class="<?php echo $c->getPageWrapperClass()?>">
</div>

body直下に上記を入れ、その中で作るとうまくいきました！

 

5.7系では名前空間が必須

テーマもブロックも名前空間の指定が必要になったようです。

多分ここが最初のハマりポイントなんじゃないかなあと思います。

ここがきちんと合わないと、延々エラーが出る羽目になってしまいます。とはいえ、親切なエラーメッセージを潰していけば良いのですが。

デフォルトで入っているElementalテーマを参考にすると、オリジナルテーマを配置する場所との違いもあり何も考えないでいるとエラーが出ると思います。

application/themes/テーマ名というディレクトリにテーマを作る場合は、page_theme.phpの先頭に

namespace Application\Theme\[テーマ名];

テーマ名は先頭大文字でこんな感じの記述が必要です。
このあたりは、namespaceとかautoloadとか、そのあたりの知識でカバーですね！

 

CSSでのfixedやabsoluteは要注意

Bootstrap3ベースでテーマを作る場合、CSSに少しだけ気を使わなくてはなりませんでした。

.navbar-fixed-topでページ上部固定のナビゲーションを作る場合、bootstrap.min.jsが.navbar-fixed-topを指定しているので、自分で作って上書くデザインファイルには

.navbar-fixed-top{
  top:auto;
}

こいつを指定しておきましょう。

headerをfixedにした場合はpaddingなりの設定をどこかに入れ直す必要があったりなかったり。

ちなみに、5.7.2では編集モード用の上部UIのz−indexは1000に指定されていましたので、基本的には自分で作るテーマ内ではz−indexを999以下にしておくと変な事故は防げるのではないでしょうか。

 

テーマとブロックを切り分けて考えることが重要

テーマ側には極力コードを書かない方がどう考えても見通しが良い＆汎用性が維持できるようです。

シングルページのサイトを作った時はjsでスムーズにスクロールさせるためのコードをjQueryで書いていたのですが、そのための設定をしなくてはいけませんでした。

ナビゲーション部分は・・・

<?php
foreach ($a->getAreaBlocksArray($c) as $block) {
  $bID = $block->instance->bID;
  $heading = $block->instance->heading;
  $content = $block->instance->content;
  if ($heading == NULL) {
    continue;
  }
?>

<li><a href="#<?php print $bID ?>"><?php print h($heading) ?></a></li>

<?php
  }
?>

こんな感じでブロックのIDとセクションのタイトルを出力させておいて、ブロックのviewでは

<div class="container" id="<?php print $bID; ?>">
  <section>
    <h1><?php print h($heading); ?></h1>
    <p>
    <?php print h($content); ?>
    </p>
  </section>
</div>

こんな感じで設定することで対応したのですが、最終的にはナビゲーションの部分を別にしないとなあというところです。

ページ内リンク用のブロックを作ればいいのかなあ。

でもすべてのブロックがIDを吐き出すとは限らないので、IDを吐き出すようにしているものをリストにするようにしたほうが良いかもしれない・・・。

getAreaBlocksArray()は、参照して結構面白い関数だったので、var_dumpしてみたネタで今度記事を書こうかな！

 

ある程度の縛りを持った選択肢は用意してあげたほうが良さそう

default.phpだけでどんなレイアウトでも組めるようにしてみた結果、入れ子でうまくレイアウトができず・・・。

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
?>
<?php Loader::element('header_required'); ?>
<?php
$a = new Area('Main');
$a->enableGridContainer();
$a->display($c);
?>
<?php Loader::element('footer_required'); ?>

こんな感じのシンプルなコードで、吐き出されるHTMLを確認したところ、

<div class="ccm-custom-style-main" >
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="row">
          <div class="col-sm-4">
            新しいレイアウト
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

うーん、.containerがすごく邪魔ですね。
困り果てて、しまいにはconcrete/srcの中身まで漁り始めたあたりで、この記事を発見。

notnil creation weblog

concrete5 5.7 ベータ1 プレビュー（１）

ここを参考に、enableGridContainerを$a->setAreaGridMaximumColumns(12)に変更。

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
?>
<?php Loader::element('header_required'); ?>
<?php
$a = new Area('Main');
$a->setAreaGridMaximumColumns(12);
$a->display($c);
?>
<?php Loader::element('footer_required'); ?>

なんということでしょう！思った通りに動く！

とはいえ、さらに入れ子でとかは難しそうなので、複雑なレイアウトはページテンプレート機能やブロックを駆使したほうがいい感じのテーマが作れそうですね。

そもそも、複雑なレイアウトを管理モード追加していくより、テンプレートの選択肢がある程度あったほうが、使う人も楽ですよね。複雑なレイアウトをするとユーザビリティも損ねることも多いと思います。

 

まとめ

まだ、僕自身も手探りで、迷ったり悩んだり、デフォルトで入っているもののコードを追いかけながら、実現したいことのためにテーマやブロックを作ってみたり、他の方が紹介しているコードから気になる関数の返り値をvar_dumpしてみたりしている段階です。

正直まだ理解できていない部分（page_theme.phpの関数群などなど）も多いのですが、日々勉強ですね！

コンクリ界隈の方は本当に優しい方が多く、インストールの不具合から相談すればすぐに原因究明にあたってくださるなど、使い始めて早くもコミュニティの暖かさを感じています。

色々なウェブサイトで使っていくこと、使っていく中で思ったことなどなど発信していくことで恩返しができればいいなあなんて思っています！

さて、アドベントカレンダー、次回はfujigoco2255さんによる「マーケッター視点で見たconcrete5」というテーマの記事です。

今回は制作サイドに振った話ですが、マーケッター的な話もできるのがconcrete5。

MTやWPをCMSツールとして受託していた経験を持つfujigoco2255さん。現在自社他社問わずマーケティングを中心としたお仕事をする中でのconcrete5というツールについてのあれこれです！

是非ご覧ください！