Dokuwiki標準テンプレートのカスタマイズ

DokuWiki標準のテンプレートは、PCで閲覧したらPC用のレイアウトになり、スマホで閲覧したらスマホ用のレイアウトになり、タブレットで見たらタブレット用のレイアウトになるレスポンシブWebデザインです。

サイドバーを追加したり、なくしたり、サイトの幅を変更したり、自由自在テンプレートです。

テンプレートを変えると編集系のプラグインが使えなくなったりすることもあるので、やっぱ標準テンプレートが一番だと思います。

• ja:template:dokuwiki
• ja:devel:css CSS スタイルシート

「管理」-「テンプレートのスタイル設定」から色やサイトの幅が変更できます。

自分の好きなように細かい所まで変更が可能です。

「管理」-「テンプレートのスタイル設定」

CSS設定

サイトの全体は、コンテンツによって違いますが、参考情報をメモしておきます。

• モニターサイズは、「1024×768px」、「1280×800px」も多い。
• スマホは、320～640PX

サイト幅の設定は、conf/tpl/dokuwiki/style.iniファイルに保存され、バージョンアップ時にも影響を受けません。
conf/tpl/dokuwiki/style.iniファイル、この設定をするまで作られません。
バージョンアップ時に影響を受けるdokuwiki/lib/tpl/dokuwiki/style.iniファイルではないです。

lib/tpl/dokuwiki/images/favicon.ico の favicon.ico を置き換える。

lib/tpl/dokuwiki/style.ini

自分専用のスタイルリストを設定する。
「my_style.css = screen」を追記する。

（略）
css/_edit.css             = screen
css/_modal.css            = screen
css/_forms.css            = screen
css/_admin.css            = screen
css/structure.less        = screen
css/design.less           = screen
css/pagetools.less        = screen
css/content.less          = screen
css/my_style.css      = screen

lib/tpl/dokuwiki/css/my_style.css

• リッキドレイアウトCSSの最小幅を設定
• ヘッダーの書き方を指定
• メモ

  padding［上］［左右］［下］ 
  padding ［上］［右］［下］［左］ 

/**
 * css/basic.less
 **/
 
body {
    min-width: 1150px;
}
 
h1 {
    color: #666;
    font-size: 1.8em;
    margin: 0 0 0.444em;
}
h2 {
    color: white;
    font-size: 1.6em;
    margin: 0 0 0.5em;
    font-weight: normal;
    background-color: #557697;
    padding: 14px 0px 12px 10px;
}
h3 {
    color: #666;
    font-size: 1.4em;
    margin: 0 0 0.888em;
    font-weight: normal;
    padding: 10px 0px 10px 10px;
    background-color: #f2f2f2;
    border-left: solid 10px #557697;
    border-top: none;
    border-bottom: none;
    border-right: none;
}
h4 {
    color: #666;
    font-size: 1.4em;
    margin: 0 0 1.0em;
    padding: 6px 6px 0px 6px;
    font-weight: normal;
    border-left: none;
    border-top: 3px solid #557697;
    border-bottom: 3px solid #557697;
}
h5 {
    font-size: 1.4em;
    margin: 0 0 1.1428em;
    padding: 6px 6px 6px 6px;
    /*border-bottom: 3px solid #557697;*/
    border-bottom: none;
    border-left: 8px solid #557697;
    font-weight: normal;
}
h6 {
    font-size: .75em;
    margin: 0 0 1.333em;
    border-bottom: dotted 1px #cacaca;
    font-weight: normal;
}
 
/**
 * css/_links.less
 **/
 
/* any link to current page */
.dokuwiki span.curid a {
    /*font-weight: bold;*/
    font-weight: normal;
}
 
/**
 * css/design.less
 **/
 
#dokuwiki__header {
    padding: 2em 0 1.5em;
 
    .headings,
    .tools {
        margin-bottom: 0em;
        width: 49%;
    }
}
 
li {
    margin-bottom: 5px;
}
 
/* Fonts */
body {
    font: normal 90.0%/1.8 Arial, Meiryo, Chicago, sans-serif;
    overflow: hidden;
}
 
/*Plugin Indexmenu*/
.dtree {
    font-family: Arial, Meiryo, Chicago, sans-serif;
    font-size: 95%;
}

出力例

= h6テストabcABC =

#dokuwiki__aside {
    width: @ini_sidebar_width;
    float: right;
    position: relative;
    display: block;
 
    > .pad {
        margin: 0 0 0 1.5em;
    }
}

#dokuwiki__aside {
    width: @ini_sidebar_width;
    float: left;
    position: relative;
    display: block;
 
    > .pad {
        margin: 0 1.5em 0 0;
    }
}

tpl_action('login', true, 'li', true)を「//」でコメントにする。

                        tpl_toolsevent('usertools', array(
                            //tpl_action('admin', true, 'li', true),
                            tpl_action('profile', true, 'li', true),
                            tpl_action('register', true, 'li', true),
                            //tpl_action('login', true, 'li', true)
                        ));

'<img src=“'.$logo.'” '.$logoSize[3].' alt=“” /> '.$conf['title'].'',を「//」でコメントにする。
''.$conf['title'].'', を追加する

        <h1><?php
            // get logo either out of the template images folder or data/media folder
            $logoSize = array();
            $logo = tpl_getMediaFile(array(':wiki:logo.png', ':logo.png', 'images/logo.png'), false, $logoSize);
 
            // display logo and wiki title in a link to the home page
            tpl_link(
                wl(),
                // 以下をコメント★
                //'<img src="'.$logo.'" '.$logoSize[3].' alt="" /> <span>'.$conf['title'].'</span>',
                '<span>'.$conf['title'].'</span>',
                'accesskey="h" title="[H]"'
            );
        ?></h1>

tpl_action('media', true, 'li', true),を「//」でコメントにする。

                <?php
                    tpl_toolsevent('sitetools', array(
                        tpl_action('recent', true, 'li', true),
                        //tpl_action('media', true, 'li', true),
                        tpl_action('index', true, 'li', true)
                    ));
                ?>

以下のようにコメントにする

<!--
            <div class="mobileTools">
                <?php tpl_actiondropdown($lang['tools']); ?>
            </div>
-->

このサイトのこんな感じにタイトルの下にリンクを追加できます。
menu.phpに書かないで、直接tpl_header.phpに書いてもいいですが、
僕は複数サイトを持っていて、tpl_header.phpは同一のを利用しないためわざと別ファイルに分けています。
参考：https://www.inmotionhosting.com/support/edu/dokuwiki/working-with-menus/custom-css-menu

    <hr class="a11y" />
</div></div><!-- /header -->
 
//以下を追加
<!-- Begin Custom Menu -->
<?php include('menu.php'); ?>
<!-- End Custom Menu -->

ヘッダーメニューを横幅いっぱいにしたい場合は以下のようにしましょう。

<style type="text/css">
        #custom_menu {
            clear:both;
            margin-left: -500%;
            margin-right: -500%;
            padding-left: 500%;
            padding-right: 500%;
        }
        #custom_menu a:link { color: #fff; font-size: 110%;}
        #custom_menu a:visited { color: #fff; font-size: 110%;}
        #custom_menu a:hover{ color: #fff; font-size: 110%;}
        #custom_menu a:active{ color: #fff;  font-size: 110%;}
        #custom_menu {background-color: #557697; font-size: 110%;}
        #custom_menu ul {padding:10px;}
        #custom_menu ul li {display:inline; margin:5px 10px 5px 10px;}
</style>
<div id="custom_menu">
        <ul>
                <li><a href="<?php echo DOKU_BASE ?>">Top</a></li>
                <li><a href="<?php echo DOKU_BASE ?>sitemap.html">SiteMap</a></li>
        </ul>
</div>

ヘッダーメニューを横いっぱいにしない場合

<style type="text/css">
        #custom_menu {clear:both;}
        #custom_menu a:link { color: #fff; font-size: 110%;}
        #custom_menu a:visited { color: #fff; font-size: 110%;}
        #custom_menu a:hover{ color: #fff; font-size: 110%;}
        #custom_menu a:active{ color: #fff;  font-size: 110%;}
        #custom_menu {background-color: #557697; font-size: 110%;}
        #custom_menu ul {padding:3px;}
        #custom_menu ul li {display:inline; margin:5px 10px 5px 10px;}
</style>

• フッターの右側に、トップページなどのリンクを表示

<!-- ********** FOOTER ********** -->
<div id="dokuwiki__footer"><div class="pad">
<p style="text-align:right">
<a href="<?php echo DOKU_BASE ?>">Top</a> &nbsp; &nbsp;
<a href="<?php echo DOKU_URL ?>about/">About</a> &nbsp; &nbsp;
<a href="<?php echo DOKU_URL ?>contact/">Contact</a>
</p>

• タイトルを表示
• ライセンスを削除

<p>Copyright (c) 2014 - <?php $year = date('Y');  echo $year;  ?> <?php echo $conf['title'] ?> All Rights Reserved.</p>
<!--
    <?php tpl_license(''); // license text ?>
        （略）
    </div>
-->

<?php
/**
 * Template footer, included in the main and detail files
 */
 
// must be run from within DokuWiki
if (!defined('DOKU_INC')) die();
?>
 
<!-- ********** FOOTER ********** -->
<div id="dokuwiki__footer"><div class="pad">
 
</div></div><!-- /footer -->
<?php include('footer.php'); ?>
 
<?php
tpl_includeFile('footer.html');

footer.php

<style type="text/css">
.fwrapper{
   margin-left: -500%;
   margin-right: -500%;
   padding-left: 500%;
   padding-right: 500%;
   background-color: #557697;
}

.footer{
  color: #ffffff;
  max-width: 100%;
  padding: 2px;
}
.footer a { color: #ffffff ; }
</style>

<div class="fwrapper">
<div class="footer">
<p style="text-align:right">
<br>
<a href="<?php echo DOKU_BASE ?>" >Top</a> &nbsp; &nbsp;
<a href="<?php echo DOKU_URL ?>about/" >About</a> &nbsp; &nbsp;
<a href="<?php echo DOKU_URL ?>contact/" >Contact</a>
</p>
<center>
<p>Copyright (c) <?php $year = date('Y');  echo $year;  ?> <?php echo $conf['title'] ?> All Rights Reserved.</p>
</center>
</div>
</div>

footer.html

<!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxx"></script>

DokuWikiで、画面サイズに合わせてカラム数を変えるフッター を参照

            <!-- PAGE ACTIONS -->
            <div id="dokuwiki__pagetools">
                <h3 class="a11y"><?php echo $lang['page_tools']; ?></h3>
                <div class="tools">
                    <ul>
                        <?php echo (new \dokuwiki\Menu\PageMenu())->getListItems(); ?>
                    </ul>
                </div>
            </div>

            <!-- PAGE ACTIONS -->
            <div id="dokuwiki__pagetools">
                <h3 class="a11y"><?php echo $lang['page_tools']; ?></h3>
                <div class="tools">
                    <ul>
                        <?php
                        //if ($INFO['isadmin']) {
                        if (!empty($USERINFO['name'])) {
                            echo (new \dokuwiki\Menu\PageMenu())->getListItems();
                        }
                        ?>
                    </ul>
                </div>
            </div>

            <!-- ********** CONTENT ********** -->
            <div id="dokuwiki__content"><div class="pad group">
                <?php html_msgarea() ?>

                <div class="pageId"><span><?php echo hsc($ID) ?></span></div>

            <!-- ********** CONTENT ********** -->
            <div id="dokuwiki__content"><div class="pad group">
                <?php html_msgarea() ?>

                <!-- <div class="pageId"><span><?php echo hsc($ID) ?></span></div> -->
                <div class="pageId"><span><?php echo preg_replace("/(.*)txt/", "", tpl_pageinfo(true)) ?></span></div>

                <div class="docInfo"><?php tpl_pageinfo() ?></div>

                <!-- <div class="docInfo"><?php tpl_pageinfo() ?></div> -->
                <div class="docInfo"><?php echo preg_replace("/(.*)txt/", "", tpl_pageinfo(true)) ?></div>

「テンプレート」に戻る