この 作品 は クリエイティブ・コモンズ 表示 2.1 日本 ライセンス の下に提供されています。
ただし、掲載されているコードは XOOPS Cube Legacy に準じて GPL 2 となります。
この投稿はXOOPS Themes and Templates Advent Calendar 2012の7日目の記事です。
⇒ アドベントカレンダーの参加者リスト
⇒ 6日目の投稿 テーマでアバターとログインIDを表示する by nouphet
⇒ 8日目の投稿 内容未定〜 by argon
XOOPS Cube Legacy 2.2 ではデザイナ・サイト管理者向けの機能が幾つか追加されています。
ここではそれら新機能をご紹介いたします。
jQuery と jQuery UI の読み込み
最近はたくさんのウェブサイトが jQuery ライブラリを使っていますが、XCL でも 2.2 以降、jQuery および jQuery UI を読み込むようになりました。
デフォルトでは、Google Hosted Libraries(Google Ajax Feed API) を使って、jQuery と jQuery UI の最新版を読み込みます。
読み込まれるバージョン
インストールしたままの状態では、Google Hosted Libraries の最新バージョンを読み込みます。
特定のバージョンを読み込みたい場合
管理画面＞互換レンダーシステム＞一般設定
- jQueryコアライブラリ
- jQuery UIライブラリ
にバージョン番号を指定します。デフォルトでは "1" が指定されており、1.x の最新版が読み込まれます。もし "1.3" を指定すると、1.3.x の最新版が読み込まれます。
ローカルなどの自分で用意したファイルを読み込みたい場合
管理画面＞互換レンダーシステム＞一般設定
- jQueryコアライブラリ
- jQuery UIライブラリ
に jQuery, jQuery UI ライブラリファイルの URL を指定します。
インターネット（Google）につながらないサーバ（デモ用のパソコンなど）の場合は、Google Hosted Libraries が利用できませんので、必ず指定します。
JavaScript と CSS の追加
また、モジュール開発者は、Legacy_HeaderScript を使って JavaScript ライブラリ, スクリプト, CSS を <{$xoops_module_header}> に書き出すことができます。
サイト管理者の場合は、プリロードファイルを使って同様のことが可能です。
特に addScript() で追加したスクリプトは、サイト読み込み後に実行されます（jQuery の $(document).ready()内に書くのと同等）。
<?php
if (!defined('XOOPS_ROOT_PATH')) exit();
class Sample extends XCube_ActionFilter
{
public function preBlockFilter()
{
$this->mRoot->mDelegateManager->add('Site.JQuery.AddFunction',array(&$this, 'addScript'));
}
public function addScript(&$jQuery)
{
$script = XCube_Root::getSingleton->mContext->getAttribute('headerScript');
$script->addLibrary('/library/myscript.js');
$script->addLibrary('http://mysite.example.com/myscript.js', true);
$script->addStylesheet('/library/mystyle.css');
$script->addStylesheet('http://mysite.example.com/mystyle.css', true);
$script->addScript('$(".datepicker").each(function(){$(this).datepicker({dateFormat: "'._JSDATEPICKSTRING.'"});});';');
}
}
?>
<{xoops_user}> modifier
Smarty の xoops_user に、"user_name" というオプション指定が加わりました。
<{$uid|xoops_user:"user_name"}>
この特殊な指定を行うと、デリゲートの 'Legacy_User.GetUserName' の結果が呼ばれます。
XOOPS のユーザ名には、uname（ログインの時に一般に使われるユーザ名）, name（本名など）があります。ユーザが目にする場合は、name の方が分かりやすいのですが、この項目は通常必須ではなく、入力している人としていない人が居ます。
プリロードファイルとともにこのオプションを指定すると、name が入力されているときは name の値が表示され、name が入っていない場合は uname を表示するなどの処理が可能です。
デリゲートに何も指定していない状態（＝インストールしてそのままの状態）では、単純に uname の値が表示されます（<{$uid|xoops_user:"uname}> と <{$uid|xoops_user:"user_name"}>は同じになります）。
サンプルが以下にあります。
<?php
if (!defined('XOOPS_ROOT_PATH')) exit();
class UserName extends XCube_ActionFilter
{
public function preBlockFilter()
{
$this->mRoot->mDelegateManager->add('Legacy_User.GetUserName',array(&$this, 'get'));
}
public function get(/*** string ***/ &$userName, /*** int ***/ $uid)
{
$handler = xoops_gethandler('member');
$user = $handler->getUser($uid);
$name = $user->getShow('name');
$userName = $name ? $name : $user->getShow('uname');
}
}
?>
meta 設定を追加する
<head> のメタ情報の幾つかを、headerScript を通じて設定することができます。
以下のようなプリロードファイルを作成します。
<?php
if (!defined('XOOPS_ROOT_PATH')) exit();
class Mymeta extends XCube_ActionFilter
{
public function preBlockFilter()
{
$this->mRoot->mDelegateManager->add('Site.JQuery.AddFunction',array(&$this, 'addMeta'));
}
public function addMeta(&$jQuery)
{
$context = XCube_Root::getSingleton()->mContext;
if($context->mModule != null) { // The process of module
$dirname = $context->xoopsModule->getVar('dirname');
}
$script = $context->getAttribute('headerScript');
if($dirname=="news") {
$script->addMeta('keyword', 'news, info');
$script->addMeta('description', 'This module is for news and announcement');
}
if($dirname=="schedule"){
$script->addMeta('robots', 'noindex,nofollow');
}
if($dirname=="adult") {
$script->addMeta('rating', 'adult');
}
$script->addMeta('author', 'me');
$script->addMeta('copyright', 'me');
}
}
?>
おまけ：言語定義の追加
XCL2.1 でも利用できますが、テーマ内で日本語などを使いたい場合、以下のようなファイル（"ThemeLang" の部分は任意）を作成し、言語定義を追加します。
<?php
define('THEME_LANG_SAMPLE_1', 'これはサンプルです。');
define('THEME_LANG_NEWS', 'サイトニュース');
define('THEME_LANG_USERNAME', 'お名前');
?>
テーマファイル内に以下のようなタグを書くと、これらの定義を表示できます。
<div><{$smarty.const.THEME_LANG_SAMPLE_1}></div>
<div><{$smarty.const.THEME_LANG_NEWS}></div>
<div><{$smarty.const.THEME_LANG_USERNAME}></div>
以上です。ぜひ使ってみてください。