第九回「実際のカスタマイズ作業」
ちょっと間があきましたが、これから実際のサイトを練習台に、テンプレートのカスタマイズの方法を記事にしてみたいと思います。手始めにお手軽なところで、無料のテンプレートを使って実際のデザイン適用作業を行っていきましょう。
その前にテンプレートの構成を書いておきます。圧縮されたテンプレートをダウンロードして解凍したところを想像して見てください。
CSS：CSSファイルが入っています。Joomla!側とテンプレート側が標準ですが、スライドショーなどテンプレートで使われているものがあれば、別に入っています。
HTML:テンプレート用のコンポーネント、モジュールが利用するphpファイルが入っています。
Images:テンプレートなどで使われるイメージファイルが入っています。
その他：スクリプトなどのプログラム関連のファイルが入っています。
CMSのTOPページにあたるindex.phpファイルは、基本的にphpファイルを呼び出したり、モジュール、コンポーネントを呼び出したりしているようです。
カスタマイズ概要
カスタマイズといっても、元のテンプレートのすべてを変更するわけではありませんので、画像、メニューなどを置き換える感じでいいと思います。この場合、変更するのは画像フォルダーの画像の色と、サイズ、CSSファイルの内部などです。
画像フォルダーをよく観察しておきましょう。ロゴファイルはもちろんですが、メニュー周り、バックグランドなどを変更するだけで、かなりイメージは変わる物です。使用しているパソコンの画像のプレビュー機能を使って、ざっと確認しておきましょう。
画像を確認できたら、変更箇所の画像ファイル名でCSSを検索してみましょう。一発で記述されているところがわかりますので、これを変更していきます。
ファイル関係は必ず戻すことを前提に、オリジナルをファイル名だけ変更して残しておく癖をつけておきましょう。ダウンロードしたテンプレートは初期状態を再現しておきましょう。テンプレートの設定ファイルは、インストールすると情報で出てきたり、テンプレートの内部にテキストファイルで記述されていたりします。これがない場合で、数時間設定を確認しても再現できない場合は、あきらめて別の物にしましょう。
一般的なテンプレートのディレクトリー構造
│ component.php
│ favicon.ico
│ ie6warning.php
│ index.html
│ index.php
│ params.ini
│ params.php
│ templateDetails.xml
│ template_thumbnail.png
│
├─css
│ joomla.css
│ slideshow.css
│ template.css
│
├─html
│ ├─com_content
│ │ │ index.html
│ │ │
│ │ ├─archive
│ │ │ default.php
│ │ │ default.xml
│ │ │ default_items.php
│ │ │ index.html
│ │ │
│ │ ├─article
│ │ │ default.php
│ │ │ default.xml
│ │ │ index.html
│ │ │
│ │ ├─categories
│ │ │ default.php
│ │ │ default.xml
│ │ │ default_items.php
│ │ │ index.html
│ │ │
│ │ ├─category
│ │ │ blog.php
│ │ │ blog.xml
│ │ │ blog_children.php
│ │ │ blog_item.php
│ │ │ blog_links.php
│ │ │ default.php
│ │ │ default.xml
│ │ │ default_articles.php
│ │ │ default_children.php
│ │ │ index.html
│ │ │
│ │ ├─featured
│ │ │ default.php
│ │ │ default.xml
│ │ │ default_item.php
│ │ │ default_links.php
│ │ │ index.html
│ │ │
│ │ └─form
│ │ edit.php
│ │ edit.xml
│ │ index.html
│ │
│ ├─com_search
│ │ └─search
│ │ default.php
│ │ default_error.php
│ │ default_form.php
│ │ default_results.php
│ │ index.html
│ │
│ ├─com_users
│ │ ├─login
│ │ │ default.php
│ │ │ default.xml
│ │ │ default_login.php
│ │ │ default_logout.php
│ │ │ index.html
│ │ │
│ │ ├─profile
│ │ │ default.php
│ │ │ default.xml
│ │ │ default_core.php
│ │ │ default_custom.php
│ │ │ default_params.php
│ │ │ edit.php
│ │ │ edit.xml
│ │ │ index.html
│ │ │
│ │ ├─registration
│ │ │ complete.php
│ │ │ default.php
│ │ │ default.xml
│ │ │ index.html
│ │ │
│ │ ├─remind
│ │ │ default.php
│ │ │ default.xml
│ │ │ index.html
│ │ │
│ │ └─reset
│ │ complete.php
│ │ confirm.php
│ │ default.php
│ │ default.xml
│ │ index.html
│ │
│ ├─com_weblinks
│ │ ├─categories
│ │ │ default.php
│ │ │ default.xml
│ │ │ default_items.php
│ │ │ index.html
│ │ │
│ │ ├─category
│ │ │ default.php
│ │ │ default.xml
│ │ │ default_children.php
│ │ │ default_items.php
│ │ │ index.html
│ │ │
│ │ └─form
│ │ edit.php
│ │ edit.xml
│ │ index.html
│ │
│ ├─mod_breadcrumbs
│ │ default.php
│ │ index.html
│ │
│ ├─mod_search
│ │ default.php
│ │ index.html
│ │
│ └─mod_whosonline
│ default.php
│ index.html
│ mod_whosonline.xml
│
├─images
│ │ asdesigning_of.png
│ │ asdesigning_on.png
│ │ btnoff_colmain.png
│ │ btnoff_readmore.png
│ │ btnof_mainmenu.png
│ │ btnon_colmain.png
│ │ btnon_mainmenu.png
│ │ btnon_readmore.png
│ │ companyname.png
│ │ companyname_slider.png
│ │ header_bg.png
│ │ header_bgleft.png
│ │ htop1.png
│ │ htop2.png
│ │ htop3.png
│ │ input_bg.png
│ │ mark.png
│ │ search.png
│ │ sep_hor.png
│ │ sep_ver.png
│ │ spacer.png
│ │
│ ├─contacts
│ │ con_address.png
│ │ con_info.png
│ │ con_mobile.png
│ │ con_tel.png
│ │
│ ├─sliderimages
│ │ slide1.jpg
│ │ slide2.jpg
│ │ slide3.jpg
│ │
│ └─system
│ arrow.png
│ edit.png
│ emailButton.png
│ pdf_button.png
│ printButton.png
│
├─lib
│ │ index.html
│ │
│ └─header
│ header.php
│ index.html
│
└─scripts
│ fading.js
│ general.js
│ jquery.js
│
└─ie6
background_browser.gif
browser_chrome.gif
browser_firefox.gif
browser_ie.gif
browser_opera.gif
browser_safari.gif
warning.js
