Joomla! 1.0.x -> 1.5.x テンプレート変更ポイント - Eitaroh's HomePAGE Powered by Joomla!

Details: Category: Uncategorised; Created: 02 April 2010 Fri 00:00; Hits: 52730

Joomla! 1.0.xとJoomla! 1.5.xではテンプレートの構造が変更になった。

Joomla! 1.5.x では下位互換のためにレガシーモードを搭載し、Joomla! 1.0.xで使用していたテンプレートがそのまま使えるが、標準状態ではレガシーモードが作動していないので気持ちのよいものではない。

rhuk_solarflare_iiをJooma! 1.5.x用に変更してみよう。参考資料は、Joomla! Documentationにある、Upgrading your template index file - Joomla! Documentationが有効な情報だ。

Upgrading your index.php file

Replace _VALID_MOS with _JEXEC
Replace $mosConfig_absolute_path with $this->baseUrl
Replace $mosConfig_live_site with JURI::base()
Replace fixed strings with translatable strings. For example, replace echo 'Hello' with echo JText::_( 'Hello' )
Replace calls to mosGetParam with calls to JRequest::getVar. For example, replace $id = mosGetParam( $_REQUEST, 'id', 0 ); with $id = JRequest::getVar( 'id', 0 );
Replace mosShowHead(); with <jdoc:include type="head" />
Replace mosMainBody() with <jdoc:include type="component" />
Replace mosCountModules( $position_name ); with $this->countModules( $position_name );

Module Chrome/Style Conversion Chart

Joomla! 1.0	Joomla! 1.5
-3	rounded
-2	xhtml
-1	raw
0 or empty	table

http://docs.joomla.org/Upgrading_your_template_index_file より抜粋

まずはヘッダーの前置き部分である文書型宣言、言語コード、国コードの部分だが、

<?php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

Joomla 1.0.x rhuk_solarflare_ii より抜粋

Joomla 1.5.xの付属のテンプレートを見てみると

<?php
/**
* @copyright Copyright (C) 2005 - 2010 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>

Joomla! 1.5.x rhuk_milkyway より抜粋

<?php
/**
* @copyright Copyright (C) 2005 - 2010 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );

include_once (dirname(__FILE__).DS.'/ja_vars.php');

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">

<head>

Joomla! 1.5.x ja_purity より抜粋

<?php
/**
* @copyright Copyright (C) 2005 - 2010 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/

defined('_JEXEC') or die('Restricted access');

$url = clone(JURI::getInstance());
$showRightColumn = $this->countModules('user1 or user2 or right or top');
$showRightColumn &= JRequest::getCmd('layout') != 'form';
$showRightColumn &= JRequest::getCmd('task') != 'edit'
?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>

Joomla! 1.5.x beez より抜粋

三者三様の書き方ですが、_VALID_MOSを_JEXECと書き換えをすればよいので、Joomla 1.5.xのrhuk_milkywayのものと同じにします。
マルチリンガル対応のためJoomla 1.0.xのrhuk_solarflare_iiではなかった、xml:lang="<?php echo $this->language;と、lang="<?php echo $this->language;が書き加えられています。
さらにJoomla 1.0.xのrhuk_solarflare_iiとJoomla 1.5.xのbeezで書かれているxml versionの一行も書き加えて、

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>

としました。

ヘッダー部分ですが、まずjoomlaの規定の読み込みから、

<?php mosShowHead(); ?>

Joomla 1.0.x rhuk_solarflare_ii より抜粋

これは指定通り

<jdoc:include type="head" />

です。

さて、次からは条件節で難解な部分ですが、

<?php
if ( $my->id ) {
initEditor();
}

Joomla 1.0.x rhuk_solarflare_ii より抜粋

$my->id is a script variable that is non-zero if a user is logged in to your site. If a user is logged in then the nominated WYSIWYG editor is pre-loaded. You may, if you wish, always pre-load the editor, but generally an anonymous visitor will not have the need to add content. This saves a little script overhead for normal browsing of your site. （Joomla! JAPAN 日本語翻訳）

ユーザログインの判定をしてWYSIWYGエディタのロードを指定している部分ですが、Joomla 1.5.xのテンプレートでは該当の部分がないようです。

$collspan_offset = ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) ) ? 2 : 1;
//script to determine which div setup for layout to use based on module configuration
$user1 = 0;
$user2 = 0;
$colspan = 0;
$right = 0;
// banner combos

//user1 combos
if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) == 2) {
$user1 = 2;
$user2 = 2;
$colspan = 3;
} elseif ( mosCountModules( 'user1' ) == 1 ) {
$user1 = 1;
$colspan = 1;
} elseif ( mosCountModules( 'user2' ) == 1 ) {
$user2 = 1;
$colspan = 1;
}

//right based combos
if ( mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
$right = 1;
}
?>

Joomla 1.0.x rhuk_solarflare_ii より抜粋

right、user1、user2のそれぞれの表示の有無でcolspanの値を変化させます。
Joomla 1.0.x rhuk_solarflare_iiはtableで表示させているために可変システムを実装しています。

ここは、mosCountModules( $position_name );を$this->countModules( $position_name );と書き換えをすればよいので、

<?php
$collspan_offset = ( $this->countModules( 'right' ) + $this->countModules( 'user2' ) ) ? 2 : 1;
//script to determine which div setup for layout to use based on module configuration
$user1 = 0;
$user2 = 0;
$colspan = 0;
$right = 0;
// banner combos

//user1 combos
if ( $this->countModules( 'user1' ) + $this->countModules( 'user2' ) == 2) {
$user1 = 2;
$user2 = 2;
$colspan = 3;
} elseif ( $this->countModules( 'user1' ) == 1 ) {
$user1 = 1;
$colspan = 1;
} elseif ( $this->countModules( 'user2' ) == 1 ) {
$user2 = 1;
$colspan = 1;
}

//right based combos
if ( $this->countModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
$right = 1;
}
?>

で良いと思います。

ヘッダーの残りの部分ですが、

Joomla 1.0.x rhuk_solarflare_ii より抜粋

metaタグのContent-Typeは、Joomla 1.5.xでは、<jdoc:include type="head" />に含まれているので、記述は不要です。

スタイルシートの読み込みですが、<?php echo $mosConfig_live_site;?>を<?php echo $this->baseurl ?>に変更します。
さらに、/templates/rhuk_solarflare_ii/についても/templates/<?php echo $this->template ?>/とすればフォルダ名を変更しても正しく動作します。

いよいよbody部分で、冒頭のトップメニューと検索窓の部分について、

<body>

Joomla 1.0.x rhuk_solarflare_ii より抜粋

Upgrading your template index file - Joomla! DocumentationではmosCountModules( $position_name );は$this->countModules( $position_name );と書き換えとありますが、Joomla! 1.5.x rhuk_milkywayでは、<jdoc:include type="modules" name="position_name"　style="style_name" />という表記がありますので、

<body>

とします。
ウェブレイアウトをtable構造で組むのはすでに古いのですが、この説明では省力化させてもらいました。（Joomla 1.5.xでもtable構造がまだ残っていますが...）

※jodcについて詳しい説明は、Jdoc - Joomla! Documentationに掲載されています。

次に、ヘッダー画像の行ですが、左にheader（画像）、右にtopモジュールが入っています。topモジュールがない場合にテキストが表示されるようになっています。

<div id="header_outer">
<div id="header">
 
</div>
<div id="top_outer">
<div id="top_inner">
<?php
if ( mosCountModules( 'top' ) ) {
mosLoadModules ( 'top', -2 );
} else {
?>
<span>Top Module Empty</span>
<?php
}
?>
</div>
</div>
</div>

Joomla 1.0.x rhuk_solarflare_ii より抜粋

Joomla 1.0.x rhuk_solarflare_iiのヘッダー画像は背景ではいっていますが、個人的にはインターネットエクスプローラーがデフォルト状態で背景を印刷してくれないので、イメージを読み込む方がよいかと。

Joomlaのバージョンアップに起因するところではありませんが、Joomla! 1.5.x rhuk_milkywayでは条件説が、<?php if($this->countModules('position_name')) : ?>条件節<?php else: ?>条件節<?php endif; ?>とありますので、

<div id="header_outer">
<div id="header">
<a href="/<?php echo JURI::base(); ?>"><img src="/<?php echo JURI::base(); ?>/templates/<?php echo $this->template ?>/images/header_short.jpg" alt="" /></a>
</div>
<div id="top_outer">
<div id="top_inner">
<?php
if ( $this->countModules('top') ) : ?>
<jdoc:include type="modules" name="top" style="xhtml" />
<?php else: ?>
<span>Top Module Empty</span>
<?php endif; ?>
</div>
</div>
</div>

とすれば問題ないでしょう。

左メニュー（ナビゲーション）の表示部分について

Joomla 1.0.x rhuk_solarflare_ii より抜粋

定型的にjodcに置き換えで

です。

本文部分のヘッダー広告部分で、

<div id="content_outer">
<div id="content_inner">
<?php
if ( mosCountModules ('banner') ) {
?>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<div id="banner_inner">
<img src="/<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/advertisement.png" alt="advertisement.png, 0 kB" title="advertisement" border="0" height="8" width="468" /><br />
<?php mosLoadModules( 'banner', -1 ); ?><br />
</div>
<div id="poweredby_inner">
<img src="/<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/powered_by.png" alt="powered_by.png, 1 kB" title="powered_by" border="0" height="68" width="165" /><br />
</div>
</td>
</tr>
</table>
<?php
}
?>

Joomla 1.0.x rhuk_solarflare_ii より抜粋

同様に定型的にjodcに置き換えで、

<div id="content_outer">
<div id="content_inner">
<?php
if ( $this->countModules('banner') ) : ?>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<div id="banner_inner">
<img src="http://<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/advertisement.png" alt="advertisement.png, 0 kB" title="advertisement" border="0" height="8" width="468" /><br />
<jdoc:include type="modules" name="banner" style="raw" /><br />
</div>
<div id="poweredby_inner">
<img src="http://<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/powered_by.png" alt="powered_by.png, 1 kB" title="powered_by" border="0" height="68" width="165" /><br />
</div>
</td>
</tr>
</table>
<?php endif; ?>

本題の本文部分ですが、本文の上部にLatest NewsとPopularの表示枠があります。

<?php
if ($colspan > 0) {
?>
<tr valign="top">
<?php
if ( $user1 > 0 ) {
?>
<td width="50%">
<div>
<?php mosLoadModules ( 'user1', -2 ); ?>
</div>
</td>
<?php
}
if ( $colspan == 3) {
?>
<td width="2">
<img src="/<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/spacer.png" alt="" title="spacer" border="0" height="10" width="2" />
</td>
<?php
}
if ( $user2 > 0 ) {
?>
<td width="50%">
<div>
<?php mosLoadModules ( 'user2', -2 ); ?>
</div>
</td>
<?php
}
?>
</tr>
<tr>
<td colspan="<?php echo $colspan; ?>">
<img src="/<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/spacer.png" alt="" title="spacer" border="0" height="2" width="100" /><br />
</td>
</tr>
<?php
}
?>
<tr>
<td colspan="<?php echo $colspan; ?>">
<div id="pathway_text">
<?php mosPathWay(); ?>
</div>
</td>
</tr>
<tr>
<td colspan="<?php echo $colspan; ?>">
<?php mosMainBody(); ?>
</td>
</tr>
</table>

</td>
<?php
if ( $right > 0 ) {
?>
<td>
<div id="right_outer">
<div id="right_inner">
<?php mosLoadModules ( 'right', -2 ); ?>
</div>
</div>
</td>
<?php
}
?>

</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div>

Joomla 1.0.x rhuk_solarflare_ii より抜粋

mosPathWay()はJoomla 1.5.xではモジュールとしてていきょうされているので、<jdoc:include type="modules" name="breadcrumb" style="none" />となります。

<?php
if ($colspan > 0) {
?>
<tr valign="top">
<?php
if ( $user1 > 0 ) {
?>
<td width="50%">
<div>
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
</td>
<?php
}
if ( $colspan == 3) {
?>
<td width="2">
<img src="//<?php echo JURI::base();
?>/templates/<?php echo $this->template ?>/images/spacer.png" alt="" title="spacer" border="0" height="10" width="2" />
</td>
<?php
}
if ( $user2 > 0 ) {
?>
<td width="50%">
<div>
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
</td>
<?php
}
?>
</tr>
<tr>
<td colspan="<?php echo $colspan; ?>">
<img src="//<?php echo JURI::base();
?>/templates/<?php echo $this->template ?>/images/spacer.png" alt="" title="spacer" border="0" height="2" width="100" /><br />
</td>
</tr>
<?php
}
?>
<tr>
<td colspan="<?php echo $colspan; ?>">
<div id="pathway_text">
<jdoc:include type="modules" name="breadcrumb" style="none" />
</div>
</td>
</tr>
<tr>
<td colspan="<?php echo $colspan; ?>">
<jdoc:include type="component" />
</td>
</tr>
</table>

</td>
<?php
if ( $right > 0 ) {
?>
<td>
<div id="right_outer">
<div id="right_inner">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
</td>
<?php
}
?>

</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div>

本文部分は以上です。

最後にフッター要素について

<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
<?php mosLoadModules( 'debug', -1 );?>
</body>
</html>

Joomla 1.0.x rhuk_solarflare_ii より抜粋

フッターについてもモジュール化されたため、

となります。

以上が、テンプレートの骨格であるindex.phpの加工方法となります。