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

Category:Design

PukiWikiのスキン

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の構成

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.2+ © 2001-2019 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u7. HTML convert time: 0.193 sec.

OSDN