Top/スキン/技術資料/1.4.4

以下の情報は PukiWiki-1.4.4の情報です。

Category:Design

PukiWikiのスキン†

PukiWikiは、XHTML1.1orXHTML1.0のHTMLコードを生成いたします。画面デザインは、CSSファイルとそれを使用したPHPファイルにて行います。

ファイルは、skin directory 以下に置かれている以下のファイルです。

画面の基本構成は、スキン生成スクリプト側で行い、CSS側でそのデザインを行います。

ここでは、まず、スキン生成スクリプトの解説を行い、次にCSSファイルの設定について解説をいたします。

↑

PukiWikiで生成されるHTMLの構成†

PukiWikiで生成されるHTMLは以下のような構成を持っています。

  1. 生のHTTPヘッダの送信
  2. XML定義送信
  3. !DOCTYPE 送信
  4. ヘッダ送信
    1. ロボット対策(閲覧のみ読めるようにする)
    2. ページタイトル送信
    3. スタイルシート読み込み
    4. トラックバック用 JAVA SCRIPT ON
    5. 追加HEADタグの送信
  5. HTML BODY 送信
    1. [HEADER部]
      1. ロゴイメージ送信
      2. ページタイトル送信
      3. ページURL送信
    2. [NAVIGATOR部]:送信
    3. 横線表示
    4. [MENUBAR部]/[BODY部]
    5. 横線表示
    6. [NOTE部]
    7. [ATTACH部]
    8. 横線表示
    9. [TOOLBAR部]
    10. [BOTTOM部]
      1. [[LASTMODIFIED部]
      2. [RELATED部]
      3. [FOOTER部]
  6. HTML BODY 終了
  7. 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†

  1. ファイルコメント - cvs管理されているので IDなどが入っている 
    <?php
/////////////////////////////////////////////////
// PukiWiki - Yet another WikiWikiWeb clone.
//
// $Id: pukiwiki.skin.ja.php,v 1.34 2004/08/08 05:33:43 henoheno Exp $
//
  2. エラー処理 (データの有無) 
    if (!defined('DATA_DIR')) { exit; }
  3. 生のHTTPヘッダの送信 
    header('Cache-control: no-cache');
header('Pragma: no-cache');
header('Content-Type: text/html; charset=EUC-JP');
  4. XML定義送信 (XHTML 対応) 
    echo '<?xml version="1.0" encoding="EUC-JP"?>';
?>
  5. !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 } ?>
  6. ヘッダ送信 
    <head>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=EUC-JP" />
 <meta http-equiv="content-style-type" content="text/css" />
    1. ロボット対策(閲覧のみ読めるようにする) 
      <?php if (!$is_read) { ?>
 <meta name="robots" content="NOINDEX,NOFOLLOW" />
<?php } ?>
    2. ページタイトル送信 
       <title><?php echo "$title - $page_title" ?></title>
    3. スタイルシート読み込み 
       <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" />
    4. トラックバック用 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 } ?>
    5. 追加HEADタグの送信
      lib/init.php (51行:1.4.4)以降で定義する。デフォルトでは未設定
      <?php echo $head_tag ?>
</head>
  7. HTML BODY 送信 
    <body>
    1. [HEADER部]
      1. ロゴイメージ送信 
         <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>
      2. ページタイトル送信 
          <h1 class="title"><?php echo $page ?></h1>
      3. ページURL送信 
         <?php if ($is_page) { ?>
  <a href="<?php echo "$script?$r_page" ?>"><span class="small"><?php echo "$script?$r_page" ?></span></a>
 <?php } ?>
 
 </div>
    2. [NAVIGATOR部]:送信
      メニューのみを変える場合には、この部分を変更する。 
      <div id="navigator">

<?php if ($is_page) { ?>
 [ <a href="<?php echo "$script?$r_page" ?>">リロード</a> ]
 &nbsp;
 [ <a href="<?php echo "$script?plugin=newpage&amp;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   } ?>

 ]
 &nbsp;
<?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);
?>
 &nbsp;
 [ <a href="<?php echo "$script?plugin=tb&amp;__mode=view&amp;tb_id=$tb_id" ?>">TrackBack(<?php echo tb_count($_page) ?>)</a> ]
<?php } ?>

<?php
  if ($referer) {
?>
 [ <a href="<?php echo "$script?plugin=referer&amp;page=$r_page" ?>">リンク元</a> ]

<?php } ?>

</div>
    3. 横線表示 
      <?php echo $hr ?>
    4. [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 } ?>
  1. [NOTE部] 脚注部表示送信 
    <?php if ($notes) { ?>
<div id="note">
<?php echo $notes ?>
</div>
<?php } ?>
  1. [ATTACH部] 添付ファイル表示送信 
    <?php if ($attaches) { ?>
<div id="attach">
<?php echo $hr ?>
<?php echo $attaches ?>
</div>
<?php } ?>
  2. 横線表示 
    <?php echo $hr ?>
  1. [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>
 &nbsp;
 <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>
 &nbsp;
<?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 } ?>

 &nbsp;
 <a href="<?php echo $link_help ?>"><img src="<?php echo IMAGE_DIR ?>help.png" width="20" height="20" alt="ヘルプ" title="ヘルプ" /></a>
 &nbsp;
 <a href="<?php echo $link_rss ?>"><img src="<?php echo IMAGE_DIR ?>rss.png" width="36" height="14" alt="最終更新のRSS" title="最終更新のRSS" /></a>
</div>
  2. [BOTTOM部]
    1. [[LASTMODIFIED部] 最終更新時間情報の送信
      pukiwiki.ini.php (214:1.4.4)の $lastmod により ON/OFF設定 
      <?php if ($lastmodified) { ?>
<div id="lastmodified">
 Last-modified: <?php echo $lastmodified ?>
</div>
<?php } ?>
    2. [RELATED部] 関連ページ情報の送信 ページ内への #norelatedの表記により抑制される。 
      <?php if ($related) { ?>
<div id="related">
 Link: <?php echo $related ?>
</div>
<?php } ?>
    3. [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>
  1. HTML BODY 終了 
    </body>
  2. HTML 終了 
    </html>
トップ   編集 凍結 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2007-01-27 (土) 11:27:04
Site admin: PukiWiki Development Team

PukiWiki 1.5.4+ © 2001-2022 PukiWiki Development Team. Powered by PHP 8.2.12. HTML convert time: 0.296 sec.

SourceForge