これまでのところ、全てのページに表示するヘッダーとボトム＋フッター、そしてインデックスページだけに表示する slider, feature, testimonial が完成しています。
あるモジュールをどのページに表示するか、あるいは表示しないかは、それぞれのモジュールのメニューの割り当てで指定します。slider や feature がインデックスページにしか表示されないのその設定があるからです。
さて、今回はメインコンテンツブロックとBootstrapオリジナルテンプレートのタイトルブロックを作ります。
タイトルブロックと呼んでいるのはこれですね。
右のパンくずは、Joomla! の breadcrumb モジュールを多少変更（次項）すれば問題ないのですが、左のタイトルと説明文は少し説明を要します。
Joomla! では、コンテンツのタイトルとは別に「ページ見出し」というものがあり、メニュー管理 > ページ表示で表示非表示を指定します。その下のページ見出しにテキストを入力しなければメニュータイトルがページ見出しになります。
タイトルブロックにはこのページ見出しを使いますが、もうひとつ各記事のタイトルがあり、それは メニュー管理 > オプション > タイトルの表示で表示非表示を設定します。ちょっとややこしいですね。どちらも標準設定はグローバル設定のそれぞれ記事、メニュー管理で指定しておきます。
ページ見出し下の説明文は、各メニューアイテムの編集 > メタデータに入力したテキストが表示されるようにします。
ということで、タイトルブロックは、ページ見出しが表示か、またはパンくずモジュールがあるかで表示するようにします。index.php に次のコードを追加します。
// <?php ?>内に追加 $app = JFactory::getApplication(); $show_title = $app->getParams()->get('show_page_heading') != 0 ? true : false; $page_heading = $app->getParams()->get('page_heading'); $title = $page_heading === '' ? $page_heading : $this->title; // feature ブロックの後に追加 <?php if($this->countModules('breadcrumbs') || $show_title) : ?> <section id="title" class="emerald"> <div class="container"> <div class="row"> <div class="col-sm-6"> <?php if($show_title) : ?> <h1><?php echo $title; ?></h1> <p><?php echo $this->description; ?></p> <?php endif; ?> </div> <div class="col-sm-6"> <?php if($this->countModules('breadcrumbs')) : ?> <jdoc:include type="modules" name="breadcrumbs" style="block" /> <?php endif; ?> </div> </div> </div> </section><!--/#title--> <?php endif; ?>
01パンくずモジュールの html 出力を変更する
パンくずモジュールの区切り文字（アイコン）が Joomla! と Bootstrapテンプレートでは異なっており、そのままでは両方の区切り（divider）が表示されてしまいますので、モジュールが標準で出力する html 出力を変更（上書き）します。方法は、前回の システムが出力するレイアウトを上書きする方法 でやりましたように modules\mod_breadcrumbs\tmpl\default.php を templates\flat-theme\html\mod_breadcrumbs 内にコピーし、次のように変更します。
// 20～23行削除
<?php else : ?>
<li class="active">
<span class="divider icon-location"></span>
</li>
// ここまで
// 62～66行削除
<?php if (($key != $penult_item_key) || $show_last) : ?>
<span class="divider">
<?php echo $separator; ?>
</span>
<?php endif; ?>
// ここまで
templateDetails.xml にポジションを追加します。
<position>breadcrumbs</position>
02メインコンテンツ
Bootstrapテンプレートを移植する3 の <section id=”recent-works”> を次のコードに差し替えます。
<section id="main" class="container"> <div class="row"> <?php if($this->countModules('right')) : ?> <aside class="col-sm-4 col-sm-push-8"> <jdoc:include type="modules" name="right" style="xhtml" /> </aside> <div class="col-sm-8 col-sm-pull-4"> <?php endif; ?> <jdoc:include type="component" /> <?php if($this->countModules('right')) : ?> </div><!--/.col-md-8--> <?php endif; ?> </div><!--/.row--> </section><!--/#main-->
jdoc:include に type=”component” を指定してメインコンテンツを呼び出します。ただしシステムのデフォルトレイアウトですとタイトルで使用しているページ見出しが <h1> タグでここに出力されますので削除しておきましょう。
これも前回の システムが出力するレイアウトを上書きする方法 でやりましたように components\com_content\views\article\tmpl\default.php を templates\flat-theme\html\com_content\article 内にコピーし、次の25～29行を
<?php if ($this->params->get('show_page_heading')) : ?> <div class="page-header"> <h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1> </div> <?php endif;
php の開始タグだけにしてしまいます。
<?php
同様に、
components\com_content\views\featured\tmpl\default.php
components\com_content\views\category\tmpl\blog.php
components\com_content\views\archive\tmpl\default.php
も該当行を削除してテンプレート内にコピーしておきます。
その他のコンポーネント、たとえば今回の場合コンポーネント contact を使っていますので、components\com_content\views\article\tmpl\default.php もテンプレート内で上書きする必要があります。
03インデックスページのメニューの設定
これで、インデックスページは一通り出来上がりましたので設定を確認しましょう。
- テンプレートを自作する －Bootstrapテンプレートを移植する1－ で記事として保存しておいた #recent-works の子要素 div.container の注目をはいにする
- メニュー→ホームのアイテムを注目記事にする
- オプション > タイトルの表示を非表示にする
（注）各記事の設定でタイトルを非表示にしてもここで表示になっていると表示されます - ページ表示 > ページ見出しの表示をいいえにする
これでインデックスページと各単一ページが移植されたはずです。残るは、メニューアイテムに注目記事やカテゴリブログ（デモサイトの「ブログ」）などを指定した場合に表示されるパジネーションとその他のファイルの説明で、次回には完成しそうです。