IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / Joomla! / Joomla!(14)テンプレートを自作する -Bootstrapテンプレートを移植する5-

Joomla!(14)テンプレートを自作する -Bootstrapテンプレートを移植する5-

2015/12/07 Joomla!

これまでのところ、全てのページに表示するヘッダーとボトム+フッター、そしてインデックスページだけに表示する slider, feature, testimonial が完成しています。

あるモジュールをどのページに表示するか、あるいは表示しないかは、それぞれのモジュールのメニューの割り当てで指定します。slider や feature がインデックスページにしか表示されないのその設定があるからです。

  • タイトル、パンくず
  • パンくずモジュールの html 出力を変更する
  • メインコンテンツ
  • インデックスページのメニューの設定

タイトル、パンくず

さて、今回はメインコンテンツブロックと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; ?>

パンくずモジュールの 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>

メインコンテンツ

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 もテンプレート内で上書きする必要があります。

インデックスページのメニューの設定

これで、インデックスページは一通り出来上がりましたので設定を確認しましょう。

  • テンプレートを自作する -Bootstrapテンプレートを移植する1- で記事として保存しておいた #recent-works の子要素 div.container の注目をはいにする
  • メニュー→ホームのアイテムを注目記事にする
  • オプション > タイトルの表示を非表示にする
    (注)各記事の設定でタイトルを非表示にしてもここで表示になっていると表示されます
  • ページ表示 > ページ見出しの表示をいいえにする

これでインデックスページと各単一ページが移植されたはずです。残るは、メニューアイテムに注目記事やカテゴリブログ(デモサイトの「ブログ」)などを指定した場合に表示されるパジネーションとその他のファイルの説明で、次回には完成しそうです。

Joomla!(13)テンプレートを自作する -システムが出力するレイアウトを上書きする方法-
OCN モバイル ONE =(成功)MicroSIM を NanoSIM にハサミでカットしてみる
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

2022/06/06

WordPress Popular Posts 表示されないを解決する

2022/06/03

WordPress Popular Posts 表示されない(解決だが…)

2022/05/29

WordPress:テーマをゼロから作ってみる(2)

最新記事を一覧で見る

よく読まれている記事

カテゴリー

  • はてなブログ211
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress34
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php18
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • cms-style10
  • Chrome10
  • iPhone9
  • Git入門6
  • genesis6
  • Android4
  • Python4
  • ConoHa WING4
  • 静的サイトジェネレーター3
  • Firefox3
  • Blankslate3
  • Docker3
  • SSD3
  • Facebook3
  • スマートフォン3
  • GitHub2
  • Mactype2
  • 映画1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com