IMUZA.com

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

ホーム / Joomla! / Joomla!(16)モジュールを自作する(1)

Joomla!(16)モジュールを自作する(1)

2015/12/22 Joomla!

「Joomla! でサイト構築」6回にわたって「Bootstrapテンプレートを移植する」方法を手探りでやって来ましたが、自分自身もああこういうことかと気づく点も多かったです。

デモサイトはこちらです。Hostinger で立ち上げたのですが、このサーバー、反応が悪いですね。

さて、次はこのテンプレートのスライダー、Bootstrap のカルーセルなんですが、これを Joomla! のモジュールにしてみようと思います。

  • モジュールのファイル構成
  • モジュールジェネレーター
    • Main タブ
    • Author タブ
    • Copyright タブ
    • Folders & Files タブ
  • mod_bootstrap_carousel.xml の修正
  • モジュールインストール

モジュールのファイル構成

ドキュメントは、こちらにあります。
J3.x:Creating a simple module/Developing a Basic Module – Joomla! Documentation

最低限必要となるファイルは、モジュール名を HelloWord とした場合、

  • mod_helloworld.php
    最初に呼ばれるファイルで、script や css ファイルを設定し、helper.php からデータを受け取り、tmpl/default.php に送って出力します
  • mod_helloworld.xml
    テンプレートの xml ファイルと同じで、モジュール情報、インストールファイル、モジュール管理用のフォーム設定情報を書きます
  • helper.php
    データベースなどからデータを取り出したりするヘルパークラスです
  • tmpl/default.php
    mod_helloworld.php からデータを受け取り、html を出力するテンプレートです

その他、必要なら css, js, image, language フォルダーを作成します。

モジュールジェネレーター

上のドキュメントにサンプルファイルがありますが、一から作るのも大変と探してみましたら、オンラインでモジュールの構成ファイルを作成してくれるジェネレーターが公開されていました。

Joomla Module Generator

早速使わせていただきましょう。

Main タブ

  • Module name
  • Module filename
    Module name に、たとえば「Bootstrap Carousel」と入れればファイル名が自動的にセットされます
  • Module descriotion
    自由に
  • Module version
    0.0.1 とでも
  • Module languages
    en-GB
  • Your language
    ja-JP を選びますが、なぜか ru-RU になってしまいます
    ja-JP を自分で作れば問題ありません
  • Module fields
    +Add new fieldset をクリックしフォームフィールドを指定していきます

    • 上から3つは media, text, text とし、スライドの画像とテキスト×2をひとまとまりとした多次元配列にしますが、このジェネレーターではうまく指定できませんでしたので、手作業で修正しましょう
    • indicator, auto_start はチェックボックスにします
    • interval は右矢印をクリックしてデフォルト値を設定しておきます

Author タブ

mod_bootstrap_carousel.xml に反映されます。

Copyright タブ

License を変更したい場合はドロップダウンから選択します。

Folders & Files タブ

script や css が必要な場合はチェックを入れておけば、フォルダが作られ、mod_bootstrap_carousel.php に読み込みスクリプトが生成されます。今回は全てチェックを外しておきます。

Generate Code をクリックしますとモジュール構成ファイル一式が作成され、zip archive
のリンクが現れますのでクリックしてダウンロードします。

mod_bootstrap_carousel.xml の修正

mod_bootstrap_carousel.xml の configタグの fieldset を複数枚のスライドを指定できるように修正します。

(修正前)

<field type="media" label="MOD_IMAGE" name="image" description="MOD_IMAGE_DESCRIPTION" directory="" />
<field type="text" label="MOD_SUBJECT" name="subject" description="MOD_SUBJECT_DESCRIPTION" default="" class="" size="52" maxlength="50" filter="" />
<field type="text" label="MOD_DESCRIPTION" name="description" description="MOD_DESCRIPTION_DESCRIPTION" default="" class="" size="102" maxlength="100" filter="" />
(以下略)

必要なスライド枚数分に修正します。

<fields name="slide1">
<field type="media" label="MOD_IMAGE" name="image" description="MOD_IMAGE_DESCRIPTION" directory="" />
<field type="text" label="MOD_SUBJECT" name="subject" description="MOD_SUBJECT_DESCRIPTION" default="" class="" size="52" maxlength="50" filter="" />
<field type="text" label="MOD_DESCRIPTION" name="description" description="MOD_DESCRIPTION_DESCRIPTION" default="" class="" size="102" maxlength="100" filter="" />
</fields>
<fields name="slide2">
<field type="media" label="MOD_IMAGE" name="image" description="MOD_IMAGE_DESCRIPTION" directory="" />
<field type="text" label="MOD_SUBJECT" name="subject" description="MOD_SUBJECT_DESCRIPTION" default="" class="" size="52" maxlength="50" filter="" />
<field type="text" label="MOD_DESCRIPTION" name="description" description="MOD_DESCRIPTION_DESCRIPTION" default="" class="" size="102" maxlength="100" filter="" />
</fields>
(以下略)

この修正は、ダウンロードファイルを修正後再度圧縮してもいいですし、インストール後にインストールされたファイルを修正してもいいです。

モジュールインストール

一度、完成したmod_bootstrap_carousel.zip をインストールしてみましょう。

うまくインストールされましたでしょうか? 続きは次回ということで。

Joomla!(15)テンプレートを自作する -Bootstrapテンプレートを移植する6(最終回)-
Joomla!(17)モジュールを自作する(2)
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