Manual:Skinning/Archive/ja

このページはMediaWikiの外装作成のための手引きです。

注: FooBarという用語は新しく作成された外装の名前に対するプレイスホルダ(仮の名前)として使われます。 (大文字のFooBarと小文字のfoobarが異なる文脈で使用されることに注意します)

注: There is also a more general walkthrough here.

ファイルの位置

All skin files are located in the skins subfolder of the MediaWiki installation directory (see $wgStylePath/ja and $wgStyleDirectory/ja for actual location.)

そのフォルダにはそれぞれの外装に対して2つの外装が存在します:

FooBar.php: メインファイルで、ページのレイアウトを定義します
FooBar.deps.php: PHP5のAPCオペレーションコードキャッシュに存在するバグに対する次善策です

他のすべてのファイルのために、外装名を持つサブディレクトリを設置しなければなりません - 例:

skins/foobar/main.css: FooBar外装のメインのスタイルシート
skins/foobar/IE60Fixes.css: ブラウザ特有のスタイルシートの修正

コードの構造と要素

このセクションでは典型的なMediaWiki外装のコード機能の概要を説明します。

それぞれのコード部分はMediaWikiのMonoBook外装から抽出したものです。 For the full PHP code in its entirety, see Manual:Skinning/Archive/Vector/Example.

Dependencies

This section contains the dependency information about the skin to work around a caching bug in PHP 5.

<?php
/**
 * [FooBar] skin dependencies
 */

if ( ! defined( 'MEDIAWIKI' ) )
        die( 1 );

require_once( dirname( dirname( __FILE__ ) ) . '/includes/SkinTemplate.php');

メタデータ

このセクションでは外装についてのメタ情報を含む。

<?php
/**
 * [FooBar] skin
 *
 * @file
 * @ingroup Skins
 * @version [#].[#].[#]
 * @author [name] ([URL] / [E-Mail])
 * @license [URL] [name]
 */

初期化

This section sets up your skin to inherit from the main skin template class and shows the beginning of the template callback class. Here the required classes are defined.[FooBar]と[foobar]のインスタンスは外装名に置き換える必要があります。

// 初期化する
if( !defined( 'MEDIAWIKI' ) ){
	die( "This is a skins file for mediawiki and should not be viewed directly.\n" );
}

// SkinTemplateからメインコードを継承し、CSSとテンプレートフィルタを設定する
class Skin[FooBar] extends SkinTemplate {
	var $useHeadElement = true;

	function initPage( OutputPage $out ) {
		parent::initPage( $out );
		$this->skinname  = '[foobar]';
		$this->stylename = '[foobar]';
		$this->template  = '[FooBar]Template';
	}
	function setupSkinUserCss( OutputPage $out ) {
		parent::setupSkinUserCss( $out );
		// Append to the default screen common & print styles...
		$out->addStyle( '[foobar]/main.css', 'screen' );
	}
}

class [FooBar]Template extends QuickTemplate {
	/**
	 * Template filter callback for this skin.
	 * Takes an associative array of data set from a SkinTemplate-based
	 * class, and a wrapper for MediaWiki's localization database, and
	 * outputs a formatted page.
	 */
	public function execute() {
		global $wgRequest;

		$skin = $this->data['skin'];

		// suppress warnings to prevent notices about missing indexes in $this->data
		wfSuppressWarnings();

		$this->html( 'headelement' );

カテゴリリストの修正

これは(デフォルトの振る舞いである、多くがソートされていない文字列を返す代わりに)適切なUL要素としてカテゴリリストを返すための修正ノートです。

	/* 適切なリストを作成するカテゴリ機能を乗っ取る */

	function getCategories() {
		$catlinks=$this->getCategoryLinks();
		if(!empty($catlinks)) {
			return "<ul id='catlinks'>{$catlinks}</ul>";
		}
	}

	function getCategoryLinks() {
		global $wgOut, $wgUser, $wgTitle, $wgUseCategoryBrowser;
		global $wgContLang;

		if(count($wgOut->mCategoryLinks) == 0)
			return '';

		$skin = $wgUser->getSkin();

		# separator
		$sep = "";

		// 醜い状態でリンクがそれぞれ大破しないように文字列を上書きするUnicode bidi埋め込みを使用する
		$dir = $wgContLang->isRTL() ? 'rtl' : 'ltr';
		$embed = "<li dir='$dir'>";
		$pop = '</li>';
		$t = $embed . implode ( "{$pop} {$sep} {$embed}" , $wgOut->mCategoryLinks ) . $pop;

		$msg = wfMsgExt('pagecategories', array('parsemag', 'escape'), count($wgOut->mCategoryLinks));
		$s = $skin->makeLinkObj(Title::newFromText(wfMsgForContent('pagecategorieslink')), $msg)
			. $t;

		# オプションの'dmozのような'カテゴリブラウザ - 記事が所属するカテゴリのリストの元で表示される
		if($wgUseCategoryBrowser) {
			$s .= '<br /><hr />';

			# 親ツリーの大きな配列を取得する
			$parenttree = $wgTitle->getParentCategoryTree();
			# Skinオブジェクトは参照で渡される
			# サブ機能であるdrawCategoryBrowserメソッドの元でアクセスできないからである
			$tempout = explode("\n", Skin::drawCategoryBrowser($parenttree, $this));
			# 偽物の最初のエントリを一掃してソートする
			unset($tempout[0]);
			asort($tempout);
			# 行ごとに出力する
			$s .= implode("<br />\n", $tempout);
		}

		return $s;
	}

XHTMLの出力

開始部分で、通常は変える必要はありません。

	/**
	 * この外装のためのテンプレートフィルタのコールバック
	 * SkinTemplate-basedクラスからデータセットの連想配列、
	 * MediaWikiのローカライゼーションデータベースのためのラッパーを取得し
	 * フォーマットされたページを出力する。
	 *
	 * @access private
	 */
	function execute() {
		global $wgUser, $wgSitename;
		$skin = $wgUser->getSkin();
		
		// サイト名を取得する
		$this->set('sitename', $wgSitename);
		
		// $this->dataにあるインデックスが見つからないことへの警告を抑制する
		wfSuppressWarnings();

		/* XHTML出力を作成する */

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="<?php $this->text('xhtmldefaultnamespace') ?>" <?php 
	foreach($this->data['xhtmlnamespaces'] as $tag => $ns) {
		?>xmlns:<?php echo "{$tag}=\"{$ns}\" ";
	} ?>xml:lang="<?php $this->text('lang') ?>" lang="<?php $this->text('lang') ?>" dir="<?php $this->text('dir') ?>">

ヘッド

HTMLヘッドにはメタデータ、スタイルシートとスクリプトが含まれます。スタイルシートは望むように変えることができますが、通常はこのセクションの調整は必要ありません。

	<head>
		<meta http-equiv="Content-Type" content="<?php $this->text('mimetype') ?>; charset=<?php $this->text('charset') ?>" />
		<?php $this->html('headlinks') ?>
		<title><?php $this->text('pagetitle') ?></title>
		<?php /***一般的なスタイルシート ***/ ?>
		<style type="text/css" media="screen,projection">/*<![CDATA[*/
			@import "<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/main.css?<?php echo $GLOBALS['wgStyleVersion'] ?>";
			@import "<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/contents.css?<?php echo $GLOBALS['wgStyleVersion'] ?>";
		/*]]>*/</style>
		<?php /*** メタデータ特有のスタイルシート ***/ ?>
		<link rel="stylesheet" type="text/css" <?php if(empty($this->data['printable']) ) { ?>media="print"<?php } ?> href="<?php $this->text('stylepath') ?>/common/commonPrint.css?<?php echo $GLOBALS['wgStyleVersion'] ?>" />
		<link rel="stylesheet" type="text/css" media="handheld" href="<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/handheld.css?<?php echo $GLOBALS['wgStyleVersion'] ?>" />
		<?php /*** ブラウザ特有のスタイルシート ***/ ?>
		<!--[if lt IE 5.5000]><style type="text/css">@import "<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/IE50Fixes.css?<?php echo $GLOBALS['wgStyleVersion'] ?>";</style><![endif]-->
		<!--[if IE 5.5000]><style type="text/css">@import "<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/IE55Fixes.css?<?php echo $GLOBALS['wgStyleVersion'] ?>";</style><![endif]-->
		<!--[if IE 6]><style type="text/css">@import "<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/IE60Fixes.css?<?php echo $GLOBALS['wgStyleVersion'] ?>";</style><![endif]-->
		<!--[if IE 7]><style type="text/css">@import "<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/IE70Fixes.css?<?php echo $GLOBALS['wgStyleVersion'] ?>";</style><![endif]-->
		<?php /*** general IE fixes ***/ ?>
		<!--[if lt IE 7]>
		<script type="<?php $this->text('jsmimetype') ?>" src="<?php $this->text('stylepath') ?>/common/IEFixes.js?<?php echo $GLOBALS['wgStyleVersion'] ?>"></script>
		<meta http-equiv="imagetoolbar" content="no" />
		<![endif]-->

		<?php print Skin::makeGlobalVariablesScript($this->data); ?>

		<?php /*** 様々なMediaWikiに関連したスクリプトとスタイル ***/ ?>
		<script type="<?php $this->text('jsmimetype') ?>" src="<?php $this->text('stylepath') ?>/common/wikibits.js?<?php echo $GLOBALS['wgStyleVersion'] ?>"><!-- wikibits js --></script>
<?php	if($this->data['jsvarurl']) { ?>
		<script type="<?php $this->text('jsmimetype') ?>" src="<?php $this->text('jsvarurl') ?>"><!-- site js --></script>
<?php	} ?>
<?php	if($this->data['pagecss']) { ?>
		<style type="text/css"><?php $this->html('pagecss') ?></style>
<?php	}
		if($this->data['usercss']) { ?>
		<style type="text/css"><?php $this->html('usercss') ?></style>
<?php	}
		if($this->data['userjs']) { ?>
		<script type="<?php $this->text('jsmimetype') ?>" src="<?php $this->text('userjs' ) ?>"></script>
<?php	}
		if($this->data['userjsprev']) { ?>
		<script type="<?php $this->text('jsmimetype') ?>"><?php $this->html('userjsprev') ?></script>
<?php	}
		if($this->data['trackbackhtml']) print $this->data['trackbackhtml']; ?>
		<!-- Head Scripts -->
		<?php $this->html('headscripts') ?>
	</head>

ボディ (ページ要素)

HTMLボディは基本的なページ構造で構成されます。

初期のBODYタグの属性は通常は調整する必要はありません。

<!-- Body -->
<body <?php if($this->data['body_ondblclick']) { ?>ondblclick="<?php $this->text('body_ondblclick') ?>"<?php } ?>
	<?php if($this->data['body_onload']) { ?>onload="<?php $this->text('body_onload') ?>"<?php } ?>
	class="mediawiki <?php $this->text('nsclass') ?> <?php $this->text('dir') ?> <?php $this->text('pageclass') ?>">

サイト名

<?php echo $this->text('sitename') ?>

ロゴイメージ

	<div class="portlet" id="p-logo">
		<a style="background-image: url(<?php $this->text('logopath') ?>);" <?php
			?>href="<?php echo htmlspecialchars($this->data['nav_urls']['mainpage']['href'])?>"<?php
			echo $skin->tooltipAndAccesskey('n-mainpage') ?>></a>
	</div>
	<script type="<?php $this->text('jsmimetype') ?>"> if (window.isMSIE55) fixalpha(); </script> <!-- IE alpha-transparency fix -->

タグライン (サイトのサブタイトル)

<h3 id="siteSub"><?php $this->msg('tagline') ?></h3>

サイトのお知らせ

[conditional]

<?php if($this->data['sitenotice']) { ?><div id="siteNotice"><?php $this->html('sitenotice') ?></div><?php } ?>

ユーザメッセージの通知

[conditional]

<?php if($this->data['newtalk']) { ?><div class="usermessage"><?php $this->html('newtalk') ?></div><?php } ?>

ユーザのツールバー

[iterative]

	<div class="portlet" id="p-personal">
		<h5><?php $this->msg('personaltools') ?></h5> <!-- User Toolbar Label/Caption [optional] -->
		<div class="pBody">
			<ul>
<?php 			foreach($this->data['personal_urls'] as $key => $item) { ?>
				<li id="pt-<?php echo Sanitizer::escapeId($key) ?>"<?php
					if ($item['active']) { ?> class="active"<?php } ?>><a href="<?php
				echo htmlspecialchars($item['href']) ?>"<?php echo $skin->tooltipAndAccesskey('pt-'.$key) ?><?php
				if(!empty($item['class'])) { ?> class="<?php
				echo htmlspecialchars($item['class']) ?>"<?php } ?>><?php
				echo htmlspecialchars($item['text']) ?></a></li>
<?php			} ?>
			</ul>
		</div>
	</div>

リンクへのジャンプ

(intra-page navigation) [conditional], [optional]

<?php if($this->data['showjumplinks']) { ?><div id="jump-to-nav"><?php $this->msg('jumpto') ?> <a href="#column-one"><?php $this->msg('jumptonavigation') ?></a>, <a href="#searchInput"><?php $this->msg('jumptosearch') ?></a></div><?php } ?>

<!-- Search Box -->
	<div id="p-search" class="portlet">
		<h5><label for="searchInput"><?php $this->msg('search') ?></label></h5>
		<div id="searchBody" class="pBody">
			<form action="<?php $this->text('searchaction') ?>" id="searchform"><div>
				<input id="searchInput" name="search" type="text"<?php echo $skin->tooltipAndAccesskey('search');
					if( isset( $this->data['search'] ) ) {
						?> value="<?php $this->text('search') ?>"<?php } ?> />
				<input type='submit' name="go" class="searchButton" id="searchGoButton"	value="<?php $this->msg('searcharticle') ?>" />&nbsp;
				<input type='submit' name="fulltext" class="searchButton" id="mw-searchButton" value="<?php $this->msg('searchbutton') ?>" />
			</div></form>
		</div>
	</div>

サイドバーナビゲーション

[iterative]

	<?php foreach ($this->data['sidebar'] as $bar => $cont) { ?>
	<div class='portlet' id='p-<?php echo Sanitizer::escapeId($bar) ?>'<?php echo $skin->tooltip('p-'.$bar) ?>>
		<h5><?php $out = wfMsg( $bar ); if (wfEmptyMsg($bar, $out)) echo $bar; else echo $out; ?></h5>
		<div class='pBody'>
			<ul>
<?php 			foreach($cont as $key => $val) { ?>
				<li id="<?php echo Sanitizer::escapeId($val['id']) ?>"<?php
					if ( $val['active'] ) { ?> class="active" <?php }
				?>><a href="<?php echo htmlspecialchars($val['href']) ?>"<?php echo $skin->tooltipAndAccesskey($val['id']) ?>><?php echo htmlspecialchars($val['text']) ?></a></li>
<?php			} ?>
			</ul>
		</div>
	</div>
	<?php } ?>

ツールボックス

	<div class="portlet" id="p-tb">
		<h5><?php $this->msg('toolbox') ?></h5>
		<div class="pBody">
			<ul>
<?php
		if($this->data['notspecialpage']) { ?>
				<li id="t-whatlinkshere"><a href="<?php
				echo htmlspecialchars($this->data['nav_urls']['whatlinkshere']['href'])
				?>"<?php echo $skin->tooltipAndAccesskey('t-whatlinkshere') ?>><?php $this->msg('whatlinkshere') ?></a></li>
<?php
			if( $this->data['nav_urls']['recentchangeslinked'] ) { ?>
				<li id="t-recentchangeslinked"><a href="<?php
				echo htmlspecialchars($this->data['nav_urls']['recentchangeslinked']['href'])
				?>"<?php echo $skin->tooltipAndAccesskey('t-recentchangeslinked') ?>><?php $this->msg('recentchangeslinked') ?></a></li>
<?php 		}
		}
		if(isset($this->data['nav_urls']['trackbacklink'])) { ?>
			<li id="t-trackbacklink"><a href="<?php
				echo htmlspecialchars($this->data['nav_urls']['trackbacklink']['href'])
				?>"<?php echo $skin->tooltipAndAccesskey('t-trackbacklink') ?>><?php $this->msg('trackbacklink') ?></a></li>
<?php 	}
		if($this->data['feeds']) { ?>
			<li id="feedlinks"><?php foreach($this->data['feeds'] as $key => $feed) {
					?><span id="feed-<?php echo Sanitizer::escapeId($key) ?>"><a href="<?php
					echo htmlspecialchars($feed['href']) ?>"<?php echo $skin->tooltipAndAccesskey('feed-'.$key) ?>><?php echo htmlspecialchars($feed['text'])?></a>&nbsp;</span>
					<?php } ?></li><?php
		}

		foreach( array('contributions', 'blockip', 'emailuser', 'upload', 'specialpages') as $special ) {

			if($this->data['nav_urls'][$special]) {
				?><li id="t-<?php echo $special ?>"><a href="<?php echo htmlspecialchars($this->data['nav_urls'][$special]['href'])
				?>"<?php echo $skin->tooltipAndAccesskey('t-'.$special) ?>><?php $this->msg($special) ?></a></li>
<?php		}
		}

		if(!empty($this->data['nav_urls']['print']['href'])) { ?>
				<li id="t-print"><a href="<?php echo htmlspecialchars($this->data['nav_urls']['print']['href'])
				?>"<?php echo $skin->tooltipAndAccesskey('t-print') ?>><?php $this->msg('printableversion') ?></a></li><?php
		}

		if(!empty($this->data['nav_urls']['permalink']['href'])) { ?>
				<li id="t-permalink"><a href="<?php echo htmlspecialchars($this->data['nav_urls']['permalink']['href'])
				?>"<?php echo $skin->tooltipAndAccesskey('t-permalink') ?>><?php $this->msg('permalink') ?></a></li><?php
		} elseif ($this->data['nav_urls']['permalink']['href'] === '') { ?>
				<li id="t-ispermalink"<?php echo $skin->tooltip('t-ispermalink') ?>><?php $this->msg('permalink') ?></li><?php
		}

		wfRunHooks( 'MonoBookTemplateToolboxEnd', array( &$this ) );
?>
			</ul>
		</div>
	</div>

言語リンク

<?php if( $this->data['language_urls'] ) { ?>
	<div id="p-lang" class="portlet">
		<h5><?php $this->msg('otherlanguages') ?></h5>
		<div class="pBody">
			<ul>
<?php		foreach($this->data['language_urls'] as $langlink) { ?>
				<li class="<?php echo htmlspecialchars($langlink['class'])?>"><?php
				?><a href="<?php echo htmlspecialchars($langlink['href']) ?>"><?php echo $langlink['text'] ?></a></li>
<?php		} ?>
			</ul>
		</div>
	</div>
<?php } ?>

ページ名

<h1 class="firstHeading"><?php $this->data['displaytitle']!=""?$this->html('title'):$this->text('title') ?></h1>

ページのサブタイトル

(e.g. redirect notice)

<div id="contentSub"><?php $this->html('subtitle') ?></div>

復元の警告

[conditional]

<?php if($this->data['undelete']) { ?><div id="contentSub2"><?php $this->html('undelete') ?></div><?php } ?>

ページの内容

<?php $this->html('bodytext') ?>

カテゴリリンク

[conditional]

<?php if($this->data['catlinks']) { ?><div id="catlinks"><?php $this->html('catlinks') ?></div><?php } ?>

ページツールバー

[iterative]

	<div id="p-cactions" class="portlet">
		<h5><?php $this->msg('views') ?></h5> <!-- Page Toolbar Label/Caption [optional] -->
		<div class="pBody">
			<ul>
	<?php			foreach($this->data['content_actions'] as $key => $tab) { ?>
				 <li id="ca-<?php echo Sanitizer::escapeId($key) ?>"<?php
					 	if($tab['class']) { ?> class="<?php echo htmlspecialchars($tab['class']) ?>"<?php }
					 ?>><a href="<?php echo htmlspecialchars($tab['href']) ?>"<?php echo $skin->tooltipAndAccesskey('ca-'.$key) ?>><?php
					 echo htmlspecialchars($tab['text']) ?></a></li>
	<?php			 } ?>
			</ul>
		</div>
	</div>

フッター

[iterative]

			<div id="footer">
<?php
		if($this->data['poweredbyico']) { ?>
				<div id="f-poweredbyico"><?php $this->html('poweredbyico') ?></div>
<?php 	}
		if($this->data['copyrightico']) { ?>
				<div id="f-copyrightico"><?php $this->html('copyrightico') ?></div>
<?php	}

		// generate additional footer links
?>
			<ul id="f-list">
<?php
		$footerlinks = array(
			'lastmod', 'viewcount', 'numberofwatchingusers', 'credits', 'copyright',
			'privacy', 'about', 'disclaimer', 'tagline',
		);
		foreach( $footerlinks as $aLink ) {
			if( isset( $this->data[$aLink] ) && $this->data[$aLink] ) {
?>				<li id="<?php echo$aLink?>"><?php $this->html($aLink) ?></li>
<?php 		}
		}
?>
			</ul>
		</div>

Closing Trail

これは上記からの部分を閉じる最後のセクションで通常は変える必要がありません。

<!-- scripts and debugging information -->
<?php $this->html('bottomscripts'); /* JS call to runBodyOnloadHook */ ?>
<?php $this->html('reporttime') ?>
<?php if ( $this->data['debug'] ): ?>
<!-- Debug output:
<?php $this->text( 'debug' ); ?>

-->
<?php endif; ?>
</body>

</html>
<?php
	wfRestoreWarnings();
	} // end of execute() method
} // end of class
?>

Manual:Skinning/Archive/ja

Contents

ファイルの位置

コードの構造と要素

Dependencies

メタデータ

初期化

カテゴリリストの修正

XHTMLの出力

ヘッド

ボディ (ページ要素)

サイト名

ロゴイメージ

タグライン (サイトのサブタイトル)

サイトのお知らせ

ユーザメッセージの通知

ユーザのツールバー

リンクへのジャンプ

サイドバーナビゲーション

ツールボックス

言語リンク

ページ名

ページのサブタイトル

復元の警告

ページの内容

カテゴリリンク

ページツールバー

フッター

Closing Trail

関連項目