#norelated #topicpath ---- #contents 以下の情報は PukiWiki-1.4.4の情報です。 RIGHT:&size(12){Category:[[Design>:Design]]}; *PukiWikiのスキン [#d01151b0] PukiWikiは、XHTML1.1orXHTML1.0のHTMLコードを生成いたします。画面デザインは、CSSファイルとそれを使用したPHPファイルにて行います。 ~ファイルは、skin directory 以下に置かれている以下のファイルです。 -default.en.css : 英語画面用 CSS 定義デフォルトファイル -default.jp.css : 日本語画面用 CSS 定義デフォルトファイル -pukiwiki.skin.en.php : 英語画面スキン 生成スクリプト -pukiwiki.skin.ja.php : 日本語画面スキン 生成スクリプト -keitai.skin.ja.php : 携帯用画面スキン 生成スクリプト 画面の基本構成は、スキン生成スクリプト側で行い、CSS側でそのデザインを行います。 ここでは、まず、スキン生成スクリプトの解説を行い、次にCSSファイルの設定について解説をいたします。 **PukiWikiで生成されるHTMLの構成 [#m1e4594f] PukiWikiで生成されるHTMLは以下のような構成を持っています。 + 生のHTTPヘッダの送信 + XML定義送信 + !DOCTYPE 送信 + ヘッダ送信 ++ ロボット対策(閲覧のみ読めるようにする) ++ ページタイトル送信 ++ スタイルシート読み込み ++ トラックバック用 JAVA SCRIPT ON ++ 追加HEADタグの送信~ + HTML BODY 送信 ++ [HEADER部] +++ ロゴイメージ送信 +++ ページタイトル送信 +++ ページURL送信 ++[NAVIGATOR部]:送信 ~ ++ 横線表示 ++ [MENUBAR部]/[BODY部] ++ 横線表示 ++[NOTE部] ++[ATTACH部] ++ 横線表示 ++[TOOLBAR部] ++ [BOTTOM部] +++ [[LASTMODIFIED部] +++ [RELATED部] +++ [FOOTER部] + HTML BODY 終了 + HTML 終了 この構成は、skin/pukiwiki.skin.##.phpにて生成されています。以下で、pukiwiki.skin.ja.phpの解説を行います。 また、HTMLのBODYにおいて[]にて括られた部分のデザインは、[[CSS]]にて定義されています。CSSは、SKIN_DIR/default.##.cssにて定義されています。 SKIN_DIR を直接指定している部分は、DATA_HONE変更時にスキンがロードできなくなる事に対する暫定処置です ** pukiwiki.skin.ja.php [#i93e8739] + ファイルコメント - cvs管理されているので IDなどが入っている <?php ///////////////////////////////////////////////// // PukiWiki - Yet another WikiWikiWeb clone. // // $Id: pukiwiki.skin.ja.php,v 1.34 2004/08/08 05:33:43 henoheno Exp $ // + エラー処理 (データの有無) if (!defined('DATA_DIR')) { exit; } + 生のHTTPヘッダの送信 header('Cache-control: no-cache'); header('Pragma: no-cache'); header('Content-Type: text/html; charset=EUC-JP'); +XML定義送信 (XHTML 対応) echo '<?xml version="1.0" encoding="EUC-JP"?>'; ?> + !DOCTYPE 送信 (TRANSITIONAL(XHTML1.0)/STRICT(XHTML1.1)切替え) lib/init.php (341行:1.4.4)で定義されている。 <?php if ($html_transitional) { ?> <!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="ja" lang="ja"> <?php } else { ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <?php } ?> + ヘッダ送信 <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=EUC-JP" /> <meta http-equiv="content-style-type" content="text/css" /> ++ ロボット対策(閲覧のみ読めるようにする) <?php if (!$is_read) { ?> <meta name="robots" content="NOINDEX,NOFOLLOW" /> <?php } ?> ++ ページタイトル送信 <title><?php echo "$title - $page_title" ?></title> ++ スタイルシート読み込み <link rel="stylesheet" href="skin/default.ja.css" type="text/css" media="screen" charset="Shift_JIS" /> <link rel="stylesheet" href="skin/print.ja.css" type="text/css" media="print" charset="Shift_JIS" /> ++ トラックバック用 JAVA SCRIPT ON <?php global $trackback, $referer; if ($trackback) { ?> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="skin/trackback.js"></script> <?php } ?> ++ 追加HEADタグの送信~ lib/init.php (51行:1.4.4)以降で定義する。デフォルトでは未設定~ <?php echo $head_tag ?> </head> + HTML BODY 送信 <body> ++ [HEADER部] +++ ロゴイメージ送信 <div id="header"> <a href="<?php echo $modifierlink ?>"><img id="logo" src="<?php echo IMAGE_DIR ?>pukiwiki.png" width="80" height="80" alt="[PukiWiki]" title="[PukiWiki]" /></a> +++ ページタイトル送信 <h1 class="title"><?php echo $page ?></h1> +++ ページURL送信 <?php if ($is_page) { ?> <a href="<?php echo "$script?$r_page" ?>"><span class="small"><?php echo "$script?$r_page" ?></span></a> <?php } ?> </div> ++[NAVIGATOR部]:送信 ~ メニューのみを変える場合には、この部分を変更する。 <div id="navigator"> <?php if ($is_page) { ?> [ <a href="<?php echo "$script?$r_page" ?>">リロード</a> ] [ <a href="<?php echo "$script?plugin=newpage&refer=$r_page" ?>">新規</a> | <a href="<?php echo $link_edit ?>">編集</a> <?php if ($is_read and $function_freeze) { ?> <?php if ($is_freeze) { ?> | <a href="<?php echo $link_unfreeze ?>">凍結解除</a> <?php } else { ?> | <a href="<?php echo $link_freeze ?>">凍結</a> <?php } ?> <?php } ?> | <a href="<?php echo $link_diff ?>">差分</a> <?php if ((bool)ini_get('file_uploads')) { ?> | <a href="<?php echo $link_upload ?>">添付</a> <?php } ?> ] <?php } ?> [ <a href="<?php echo $link_top ?>">トップ</a> | <a href="<?php echo $link_list ?>">一覧</a> <?php if (arg_check('list')) { ?> | <a href="<?php echo $link_filelist ?>">ファイル名一覧</a> <?php } ?> | <a href="<?php echo $link_search ?>">単語検索</a> | <a href="<?php echo $link_whatsnew ?>">最終更新</a> <?php if ($do_backup) { ?> | <a href="<?php echo $link_backup ?>">バックアップ</a> <?php } ?> | <a href="<?php echo $link_help ?>">ヘルプ</a> ] <?php if ($trackback) { $tb_id = tb_get_id($_page); ?> [ <a href="<?php echo "$script?plugin=tb&__mode=view&tb_id=$tb_id" ?>">TrackBack(<?php echo tb_count($_page) ?>)</a> ] <?php } ?> <?php if ($referer) { ?> [ <a href="<?php echo "$script?plugin=referer&page=$r_page" ?>">リンク元</a> ] <?php } ?> </div> ++ 横線表示 <?php echo $hr ?> ++ [MENUBAR部]/[BODY部]:MENUBAR部およびBODY部のレイアウトおよび送信(表形式による)~ 閲覧の場合のみMENU部を送信~ <?php if (arg_check('read') and exist_plugin_convert('menu')) { ?> <table border="0" style="width:100%"> <tr> <td class="menubar"> <div id="menubar"> <?php echo do_plugin_convert('menu') ?> </div> </td> <td valign="top"> <div id="body"><?php echo $body ?></div> </td> </tr> </table> <?php } else { ?> <div id="body"><?php echo $body ?></div> <?php } ?> ++[NOTE部] 脚注部表示送信 <?php if ($notes) { ?> <div id="note"> <?php echo $notes ?> </div> <?php } ?> ++[ATTACH部] 添付ファイル表示送信 <?php if ($attaches) { ?> <div id="attach"> <?php echo $hr ?> <?php echo $attaches ?> </div> <?php } ?> ++ 横線表示 <?php echo $hr ?> ++[TOOLBAR部] ツールバー送信~ メニューのみを変える場合には、この部分も変更する。 <div id="toolbar"> <?php if ($is_page) { ?> <a href="<?php echo "$script?$r_page" ?>"><img src="<?php echo IMAGE_DIR ?>reload.png" width="20" height="20" alt="リロード" title="リロード" /></a> <a href="<?php echo $script ?>?plugin=newpage"><img src="<?php echo IMAGE_DIR ?>new.png" width="20" height="20" alt="新規" title="新規" /></a> <a href="<?php echo $link_edit ?>"><img src="<?php echo IMAGE_DIR ?>edit.png" width="20" height="20" alt="編集" title="編集" /></a> <?php if ($is_read and $function_freeze) { ?> <?php if ($is_freeze) { ?> <a href="<?php echo $link_unfreeze ?>"><img src="<?php echo IMAGE_DIR ?>unfreeze.png" width="20" height="20" alt="凍結解除" title="凍結解除" /></a> <?php } else { ?> <a href="<?php echo $link_freeze ?>"><img src="<?php echo IMAGE_DIR ?>freeze.png" width="20" height="20" alt="凍結" title="凍結" /></a> <?php } ?> <?php } ?> <a href="<?php echo $link_diff ?>"><img src="<?php echo IMAGE_DIR ?>diff.png" width="20" height="20" alt="差分" title="差分" /></a> <?php if ((bool)ini_get('file_uploads')) { ?> <a href="<?php echo $link_upload ?>"><img src="<?php echo IMAGE_DIR ?>file.png" width="20" height="20" alt="添付" title="添付" /></a> <?php } ?> <a href="<?php echo $link_template ?>"><img src="<?php echo IMAGE_DIR ?>copy.png" width="20" height="20" alt="複製" title="複製" /></a> <a href="<?php echo $link_rename ?>"><img src="<?php echo IMAGE_DIR ?>rename.png" width="20" height="20" alt="改名" title="改名" /></a> <?php } ?> <a href="<?php echo $link_top ?>"><img src="<?php echo IMAGE_DIR ?>top.png" width="20" height="20" alt="トップ" title="トップ" /></a> <a href="<?php echo $link_list ?>"><img src="<?php echo IMAGE_DIR ?>list.png" width="20" height="20" alt="一覧" title="一覧" /></a> <a href="<?php echo $link_search ?>"><img src="<?php echo IMAGE_DIR ?>search.png" width="20" height="20" alt="検索" title="検索" /></a> <a href="<?php echo $link_whatsnew ?>"><img src="<?php echo IMAGE_DIR ?>recentchanges.png" width="20" height="20" alt="最終更新" title="最終更新" /></a> <?php if ($do_backup) { ?> <a href="<?php echo $link_backup ?>"><img src="<?php echo IMAGE_DIR ?>backup.png" width="20" height="20" alt="バックアップ" title="バックアップ" /></a> <?php } ?> <a href="<?php echo $link_help ?>"><img src="<?php echo IMAGE_DIR ?>help.png" width="20" height="20" alt="ヘルプ" title="ヘルプ" /></a> <a href="<?php echo $link_rss ?>"><img src="<?php echo IMAGE_DIR ?>rss.png" width="36" height="14" alt="最終更新のRSS" title="最終更新のRSS" /></a> </div> ++ [BOTTOM部] +++ [[LASTMODIFIED部] 最終更新時間情報の送信~ pukiwiki.ini.php (214:1.4.4)の $lastmod により ON/OFF設定 <?php if ($lastmodified) { ?> <div id="lastmodified"> Last-modified: <?php echo $lastmodified ?> </div> <?php } ?> +++ [RELATED部] 関連ページ情報の送信 ページ内への #norelatedの表記により抑制される。 <?php if ($related) { ?> <div id="related"> Link: <?php echo $related ?> </div> <?php } ?> +++ [FOOTER部] 著作権情報などの送信 ~ $modifier-サイトの持ち主 : pukiwiki.ini.php 内で設定~ S_COPYRIHT - PukiWikiプログラム著作権情報 : lib/init.php (32:1.4.4)で定義~ S_VERSION - PukiWikiバージョン情報 : lib/init.php (31:1.4.4)で定義~ <div id="footer"> Modified by <a href="<?php echo $modifierlink ?>"><?php echo $modifier ?></a> <br /><br /> <?php echo S_COPYRIGHT ?> <br /> Powered by PHP <?php echo PHP_VERSION ?> <br /><br /> HTML convert time to <?php echo $taketime ?> sec. </div> + HTML BODY 終了 </body> + HTML 終了 </html>