目次

「テンプレート」に戻る

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




標準テンプレート

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

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

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

参考


変更方法

方法1:ブラウザで管理から変更する

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

方法2:HTMLやCSSを直接変更する

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


ブラウザで管理からの変更

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

設定項目 デフォルト 案1(リキッド) 案2(PC専用)
通常のリンク色 #2b73b7 #2b73b7 #2b73b7
既存ページへのリンク色 #2b73b7 #2b73b7
サイトの全体 75em 1200px 1440px
サイドバーがある場合、サイドバーの幅 16em 310px 320px
タブレットモードにサイトを切替える、画面幅 800px 1100px 1300px
携帯電話モードにサイトを切替える、画面幅 400px 400px 1000px

CSS設定

設定項目 デフォルト 案1(リキッド) 案2(PC専用)
body { min-width: xxxpx; } なし なし 1150px


「サイトの全体」幅

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

Tips

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


favicon.ico の変更

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


CSS

style.ini

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


my_style.css

lib/tpl/dokuwiki/css/my_style.css

/**
 * 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%;
}



出力例

h2テストabcABC

h3テストabcABC

h4テストabcABC

h5テストabcABC

= h6テストabcABC =




less

structure.less

サイドバーを右側にする

変更後
#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

tpl_header.php

右上のログインボタンなどをなくす

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>


tpl_footer.php

方法1 tpl_footer.phpを修正する方法

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

方法2 tpl_footer.phpから別ファイルを読み込む方法

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

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

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


main.php

ページツールをログインしている時のみ表示

変更前
            <!-- 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>










「テンプレート」に戻る