IMUZA.com

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

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

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

2015/12/1 Joomla!

Bootstrapテンプレートを移植する2 に続いて index.php を作っていきます。前回も書きましたように説明のためにボトムアップ的に書いていますが、実際に作成する場合は、まず全体の構成を考え、モジュール名などを決定したうえで作業にかかるべきだと思います。

前回でヘッダー部分ができましたのでスライダーからです。

  • $this->countModules を使ってブロック表示を条件指定
  • templateDetailes.xml にモジュール表示位置を追加
  • モジュールの表示位置を指定
  • デモサイト

$this->countModules を使ってブロック表示を条件指定

モジュールを呼び出すには、前回使った

<jdoc:include type="modules" name="モジュール表示位置" />

ですが、その表示位置にモジュールがあるかどうか分かりませんので、次のメソッドを使って条件指定します。

<?php if($this->countModules('モジュール表示位置')): ?>
    // コード
<?php endif; ?>

たとえばスライダーの場合は次のようになります。

    <?php if($this->countModules('slider')): ?>
    <section id="main-slider" class="no-margin">
        <jdoc:include type="modules" name="slider" />
    </section><!--/#main-slider-->
    <?php endif; ?>

モジュール位置 slider には後ほど前々回オリジナルテンプレートから抜き出してモジュール > カスタムHTML として保存したスライダーを指定します。

他のブロックにもモジュール指定した index.php は次のようになります。

<body>
<header class="navbar navbar-inverse navbar-fixed-top wet-asphalt" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo JURI::root(); ?>"><?php echo $logo; ?></a>
</div>
<div class="collapse navbar-collapse">
<jdoc:include type="modules" name="nav" />        
</div>
</div>
</header><!--/header-->
<?php if($this->countModules('slider')): ?>
<section id="main-slider" class="no-margin">
<jdoc:include type="modules" name="slider" />
</section><!--/#main-slider-->
<?php endif; ?>
<?php if($this->countModules('feature')): ?>
<section id="services" class="emerald">
<div class="container">
<div class="row">
<jdoc:include type="modules" name="feature" />
</div>
</div>
</section><!--/#services-->
<?php endif; ?>
<section id="recent-works">
</section><!--/#recent-works-->
<?php if($this->countModules('testimonial')): ?>
<section id="testimonial" class="alizarin">
<div class="container">
<div class="row">
<jdoc:include type="modules" name="testimonial" />
</div>
</div>
</section><!--/#testimonial-->
<?php endif; ?>
<?php if($this->countModules('bottom')): ?>
<section id="bottom" class="wet-asphalt">
<div class="container">
<div class="row">
<jdoc:include type="modules" name="bottom" />
</div>
</div>
</section><!--/#bottom-->
<?php endif; ?>
<footer id="footer" class="midnight-blue">
<div class="container">
<div class="row">
<div class="col-sm-6">
<jdoc:include type="modules" name="footer" />
</div>
<div class="col-sm-6">
<ul class="pull-right">
<li><a id="gototop" class="gototop" href="#"><i class="icon-chevron-up"></i></a></li><!--#gototop-->
                    </ul>
                </div>
            </div>
        </div>
    </footer><!--/#footer-->
</body>

templateDetailes.xml にモジュール表示位置を追加

以下を templateDetailes.xml に追加します。

 <positions>
<position>nav</position>
<position>slider</position>
<position>feature</position>
<position>testimonial</position>
<position>bottom</position>
<position>footer</position>
</positions>

モジュールの表示位置を指定

それぞれ保存してあるモジュールの表示位置を指定します。

slider, feature, testimonial を指定するモジュールは、メニューの割り当てタブでホームのみに割り当てます。

デモサイト

一度確認してみましょう。デモサイトを立ち上げましたのでそのリンクと画像です。スライダーの画像は Beautiful Free Images & Pictures | Unsplash の画像を使用しています。

デモサイト

ご覧のように feature, testimonial, bottom のグリッドが指定してありませんのでモジュールが縦に並んでいます。今回で完成予定でしたが長くなってきましたのでまた次回ということで。

Joomla!(10)テンプレートを自作する -Bootstrapテンプレートを移植する2-
Joomla!(12)テンプレートを自作する -Bootstrapテンプレートを移植する4-
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/02/1

WordPress:期間指定で人気記事を表示(プラグインなし)

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress60
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com