Manual:Skinning/ja

From MediaWiki.org

< Manual:Skinning

Current revision (unreviewed)

Jump to: navigation, search

このページはMediaWikiのスキン作成のための手引きです。

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

Note: Meta上に一般的な手引きが存在します。

[edit] ファイルの位置

すべてのスキンファイルはMediaWikiがインストールされているディレクトリのskinsサブフォルダに設置されます。

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

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

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

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

[edit] コードの構造と要素

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

それぞれのコード部分はMediaWikiのMonoBookスキンから抽出したものです。全体の完全なPHPコードはManual:Skinning/Exampleを参照して下さい。

[edit] メタデータ

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

/**
 * [FooBar] skin
 *
 * @version [#].[#].[#]
 * @author [name] ([URL] / [E-Mail])
 * @license [URL] [name]
 *
 */

[edit] 初期化

必要とされるPHPクラスの定義です。[FooBar]と[foobar]のインスタンスはスキン名に置き換える必要があります。

// 初期化する
if( !defined('MEDIAWIKI') )
	die("This Skin file is not a valid Entry Point.");
require_once('includes/SkinTemplate.php');
 
// SkinTemplateからメインコードを継承し、CSSとテンプレートフィルタを設定する
class Skin[FooBar] extends SkinTemplate {
	function initPage(&$out) {
		SkinTemplate::initPage($out);
		$this->skinname  = '[foobar]';
		$this->stylename = '[foobar]';
		$this->template  = '[FooBar]Template';
	}
}
 
class [FooBar]Template extends QuickTemplate {

[edit] カテゴリリストの修正

これは(デフォルトの振る舞いである、多くがソートされていない文字列を返す代わりに)適切な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;
	}

[edit] 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') ?>">

[edit] ヘッド

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>

[edit] ボディ (ページ要素)

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') ?>">

[edit] サイト名

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

[edit] ロゴイメージ

	<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 -->

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

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

[edit] サイトのお知らせ

[conditional]

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

[edit] ユーザメッセージの通知

[conditional]

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

[edit] ユーザのツールバー

[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>

[edit] リンクへのジャンプ

(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>

[edit] サイドバーナビゲーション

[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 } ?>

[edit] ツールボックス

	<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>

[edit] 言語リンク

<?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 } ?>

[edit] ページ名

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

[edit] ページのサブタイトル

(e.g. redirect notice)

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

[edit] 復元の警告

[conditional]

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

[edit] ページの内容

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

[edit] カテゴリリンク

[conditional]

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

[edit] ページツールバー

[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>

[edit] フッター

[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>

[edit] 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
?>

[edit] 関連項目

Manual:Skins 一般的なMediaWikiスキンの内容

言語:

English • 日本語 • Русский • 中文

Manual:Skinning/ja

From MediaWiki.org

Contents

[edit] ファイルの位置

[edit] コードの構造と要素

[edit] メタデータ

[edit] 初期化

[edit] カテゴリリストの修正

[edit] XHTMLの出力

[edit] ヘッド

[edit] ボディ (ページ要素)

[edit] サイト名

[edit] ロゴイメージ

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

[edit] サイトのお知らせ

[edit] ユーザメッセージの通知

[edit] ユーザのツールバー

[edit] リンクへのジャンプ

[edit] サイドバーナビゲーション

[edit] ツールボックス

[edit] 言語リンク

[edit] ページ名

[edit] ページのサブタイトル

[edit] 復元の警告

[edit] ページの内容

[edit] カテゴリリンク

[edit] ページツールバー

[edit] フッター

[edit] Closing Trail

[edit] 関連項目

Views

Personal tools

Site

Search

Support

Download

Development

Communication

Toolbox