Joomla!, Microsoft Word, etc.

Joomla!

Child Template - Cassiopeia_extendedへ移行

Detail
Written by: fuku-chang
Category: Joomla!
Joomla! Child Template Cassiopeia_extended
Joomla! Child Template Cassiopeia_extended

当サイトのTemplateを現行のCassiopeia of Child TemplateからJoomla! 6.0より新規に同梱されたChild TemplateであるCassiopeia_extendedへ移行しました。

概要

  • 当サイトはJoomla!の標準TemplateであるCassiopeia templateを使用しています
  • メジャーアップグレードであるJoomla! 6.0に新たなTemplate Cassiopeia_extendedが同梱されました
    • 赤実線枠: Joomla! 6.0に同梱のCassiopeia_Extended Template
    • 赤点線枠: Joomla! 5.4まで使用してきたCassiopeia_child Template
  • Cassiopeia_Extended TemplatetとペアでCassiopeia Extended - Default Styleが用意されます

    • 赤実線枠: Joomla! 6.0に同梱のCassiopeia Extended - Default Style
    • 赤点線枠: Joomla! 5.4まで使用してきたCassiopeia_child, copy of Cassiopeia - f-labs.jp Style
  • Cassiopeia_extendedのStyleにはColour SettingsとFont Settingsを細かに指定できる機能が拡張されています
  • Cassiopeia_extendedはParent Templateではなく、Child Templateです
  • Joomla! 6.0以降もCassiopeia Templateを使用し続ける当サイトは、現行のCassiopeia of Child TemplateからCassiopeia_extendedへ移行することとしました
  • 結果、次の構成になります(理由は後述します)
    1. Parent Template: Cassiopeia
    2. Child Template: Cassiopeia child
      • これまでカスタマイズしてきたindex.phpをCassiopeia_extendedのindex.phpから呼び出します
    3. Child Template: Cassiopeia_extended
      • Cassiopeia_extended StyleをDefaultに指定します
      • user.cssを新規作成してBのuser.cssの内容をコピーします
  • 本Articleでは、TemplateとStyleを行ったり来たりしますので、ご注意ください

操作手順

  1. オリジナルのCassiopeia_extended - Default Styleを複製し、Cassiopeia_extended - f-labs.jpと名前を変更します
  2. 使用するStyleとしてCassiopeia_extended - f-labs.jp StyleをDefault指定します
    • この時点でCassiopeia_extended TemplateはParent TemplateのCassiopeia Templateのindex.phpを呼び出しています
  3. Cassiopeia_extended - f-labs.jp Styleを編集します
    • サイト名やロゴ等の基本設定を編集します
    • 新機能Colour SettingsとFont Settingsを編集します
  4. Cassiopeia_extended Templateのindex.phpを編集します
    • Cassiopeia_extended Templateが呼び出すindex.phpをParent TemplateのCassiopeia TemplateのそれからChild TemplateのCassiopeia childのそれへ変更します
  5. Cassiopeia_extended Templateにuser.cssを新規作成します
    • 空のuser.cssにこれまで使用してきたChild TemplateのCassiopeia childのuser.cssをコピーして貼り付けます
  6. サイトの表示に問題ないか確認します

手順1: "Cassiopeia_extended" Styleの複製

  • オリジナルのCassiopeia_extended - Dfault Styleを保持するため、カスタマイズするStyleを複製します
  1. System > Templates > Site Template Styles
  2. Cassiopeia_extended - Dfault チェックします
  3. Duplicateをクリックします
    Cassiopeia_extended - Default Styleを複製

手順2: "Cassiopeia_extended - f-labs.jp" StyleをDefault Styleに指定

  • 複製したStyleの名称を修正し、当該Styleを使用するDefault指定をします
  1. Style Name: Cassiopeia_extended - Dfault (2)  Cassiopeia_extended - f-labs.jp
    複製直後のStyle NameはCassiopeia_extended - Default(2)
  2. Default: No Yes
  3. Save & Closeをクリックします
    Style NameをCassiopeia_extended - f-labs.jpへ修正し、Default Styleに指定
  4. Cassiopeia_extended - f-labs.jpがDefault Styleに指定されていることを確認します
    Cassiopeia_extended - f-labs.jpがDefault Styleに指定されている

手順3: "Cassiopeia_extended - f-labs.jp" Styleの編集

Adbanced tab

  • ロゴやサイトタイトル等の基本設定を指定します
  1. Style Name: Cassiopeia_extended - Dfault Cassiopeia_extended - f-labs.jp
  2. Adbanced tab > Adbanced blk
    Adbanced tabにてロゴやサイトタイトル等の基本設定を指定
  3. Brand: Yes
    • Default: Yesで次のLogo, Title, Taglineオプションが表示されます
  4. Logo: ロゴ画像を指定します
  5. Title: サイト名を指定します
  6. Tagline: タグラインを指定します
  7. Sticky Header: Yes 
    • 下方スクロール時、ヘッダーを固定します
  8. Back-to-top Link: Yes
    • 下方スクロール時、ページトップへジャンプするボタンを表示します
  9. Saveをクリックします

Colour Settings tab

  • Header Background ColourやLink Colour等、各色を指定します
  1. Style Name: Cassiopeia_extended - Dfault Cassiopeia_extended - f-labs.jp
  2. Colour Settings tab > Colour Settings blk
    Colour SettingにてHeader Background ColourやLink Colour等を指定
    • それぞれの色を指定します
    • Defaultの色はあまり好みではなかったため、Header Background Colourは新規に指定し、その他旧来のCassiopeia Standardカラーに変更しています
    • 色の組み合わせを旧来のCassiopeia StyleのStandard(ダークブルー)とAlternative(マロン)の様にColour Themeを設定できればいいのですが、その機能はないようです
      • Colour Theme毎にStyleを複製することになりますが、その場合、Styleのカスタマイズを完了させてから、別のColour Theme構築のためにStyleを複製しなければなりません
  3. Saveをクリックします

Font Settings tab

  • 使用するGrobal Fontを指定します
  1. Style Name: Cassiopeia_extended - Dfault Cassiopeia_extended - f-labs.jp
  2. Font Settings tab > Font Settings blk
    Font Setting tabにて使用するGrobal Fontを指定
  3. Fonts Scheme: None
  4. Saveをクリックします

手順4: "Cassiopeia_extended" Templateのindex.phpでOverride

  • Cassiopeia_extended Templateはextendedの名のとおり、Parent TemplateのCassiopeia Templateを拡張するためのChild Templateです
  • そのため、Parent TemplateのCassiopeia Templateのindex.phpを呼び出し、Step 3で記したColour SettingsとFont Settingを付加しているにすぎません
  • 当サイトでは、Parent TemplateのCassiopeia TemplateのChild TemplateであるCassiopeia_child Templateのindex.phpでOverrideさせているため、呼び出し先をこちらに修正します
  1. System > Templates > Site Templates > Cassiopeia_extended Details and Files
    Cassiopeia_extended Details and Fileをクリック
  2. Editor > /templates/cassiopeia_extended/index.php
    /templates/cassiopeia_extended/index.phpを編集
  3. 15L: index.phpのパスを修正します
    index.phpのパスを修正
    require JPATH_THEMES . '/cassiopeia/index.php';
↓
require JPATH_THEMES . '/cassiopeia_child/index.php';
  4. Save & Closeをクリックします

手順5: "Cassiopeia_extended" Templateにuser.cssを作成

  • これまで、サイトの修飾はCassiopeia_child Templateのuser.cssに指定してきましたが、今後はCassiopeia_extended Templateに新規作成するuser.cssに移行する方針としました
  • そこで、Cassiopeia_extended Templateにuser.cssを作成し、Cassiopeia_child Templateのuser.cssの内容をコピーします
  1. System > Templates > Site Templates > Cassiopeia_child Details and Files
    Cassiopeia_child Details and Filesをクリック
  2. Editor > /media/templates/site/cassiopeia_child/css/user.css
    /media/templates/site/cassiopeia_child/css/user.cssのスクリプトをコピー
    • ディレクトリツリーを操作し、これまで編集してきたuser.cssを開きます
  3. ソースコードを全選択してコピーします
  4. Closeをクリック
    Closeをクリック
  5. Closeをクリック
    Closeをクリック
  6. Site Templates > Cassiopeia_extended Details and Files
    Cassiopeia_extended Details and Filesをクリック
  7. New Fileをクリックします
    New Fileをクリック
  8. Create or Upload a new file dlgが開きます
    Create or Upload a new file dlgが開く
  9. ディレクトリツリーを操作し、保存ディレクトリ/media/templates/site/cassiopeia_child/css/ディレクトリをクリックします
  10. File Name: user
  11. File Type: .css
  12. Createをクリックし、空のuser.cssが作成されます
  13. ソースコードテキストボックス内で手順3でコピーしたソースコードを貼付けます
    ソースコードを貼付け
  14. Save & Closeをクリックします
    貼付け後、Save ＆ Closeをクリック

手順6: サイトの確認

  • Step 5までの作業で移行は完了しました
  • サイトの表示に問題ないかどうか確認します
    Cassiopeia_extendedへの移行完了を確認

現在のJoomla!運用管理

  • 今回の作業により、当サイトの現在の運用管理は次のようになりました
  • Parent Template: Cassiopeia
  • Child Template: Cassiopeia_child
    • Cassiopeia_extended Templateのindex.phpからCassiopeia TemplateのOverrideとなるCassiopeia_child Templateのindex.phpを呼び出します
    • 今後サイトのカスタマイズでindex.phpを編集する場合はCassiopeia_childのindex.phpを編集します
  • Child Template: Cassiopeia_extended
    • Cassiopeia_extended Templateのuser.cssがサイトの修飾をカスタマイズするcssファイルになります
    • 今後サイトのカスタマイズでuser.cssを編集する場合はCassiopeia_extendedのuser.cssを編集します
  • Style: Cassiopeia Extended - f-labs.jp
    • サイトの基本設定、色設定、フォント設定をCassiopeia Extended - f-labs.jpで管理します