DokuWikiをはじめたときにやるカスタマイズ

ちょっとwikiをつくりたいと思っていろいろ調べていたらDokuWikiにたどりついたのですが、最初に設定する項目が多いのでメモしておきます。無料のwikiサービスはいろいろあるんですが広告が貼れないので収益化ができない問題があるのでDokuWikiにきめました。

ここからはDokuWikiをはじめるときにやることやカスタマイズ方法を書いていきますが、細かいトラブル等の情報は一部省略している点に注意してください。以下の設定を行うことであらかたの土台は作成できますが、あとあと「ここがへん」とかいろいろな問題がでてくると思います。

DokuWikiをロリポップにインストールする

わたしが使用しているレンタルサーバーがロリポップ！なのでロリポップでDokuWikiを運用するにはどうしたらいいのかを書いていきます。

DokuWikiをダウンロードして展開し、FTPツールでロリポップにつないでDokuWikiの公開アップロードフォルダに解凍したファイルをすべて貼り付けます。わたしの場合はFTPツールはwinscpを使用しました。FTPツールを使うときはロリポップのFTPアクセス制限にひっかかるのでロリポップのほうでそれを回避する必要があります。

ロリポップにインストールする際に参考にしたサイト
Dokuwikiをロリポップ！にインストールしてみた。 – つまさぽ（妻のサポート）

FTPツールでDokuWikiファイル一式をアップロードしたあとはinstall.phpにアクセス

DokuWikiのファイル一式をサーバーにアップロードしたら以下のURLにアクセスしてインストール作業を行います。

DokuWikiのインストールが終わったあとにやる設定

インストールがおわったら初期設定をする

DokuWikiをインストールしたあとに行う初期設定は以下のサイトを参考にしました↓
DokuWikiをインストールしたらすぐに行う設定 [DokuWikiで情報発信]

設定項目

この設定項目はDokuWikiのサイト設定管理画面で設定します。

DokuWikiのURLを短くする（URLの正規化）

DokuWikiのURLは初期状態だと長くわかりづらくなっているので短くする。具体的にはDokuWikiのフォルダにある.htaccess.distをコピーして.htaccessを作る。.htaccessファイルのコメントアウトの一部を外す。.htaccessの例↓

RewriteEngine on
 
RewriteBase /dokuwiki
 
RewriteRule ^_media/(.*)              lib/exe/fetch.php?media=$1  [QSA,L]
RewriteRule ^_detail/(.*)             lib/exe/detail.php?media=$1  [QSA,L]
RewriteRule ^_export/([^/]+)/(.*)     doku.php?do=export_$1&id=$2  [QSA,L]
RewriteRule ^$                        doku.php  [L]
RewriteCond %{REQUEST_FILENAME}       !-f
RewriteCond %{REQUEST_FILENAME}       !-d
RewriteRule (.*)                      doku.php?id=$1  [QSA,L]
RewriteRule ^index.php$               doku.php

DokuWikiのURLを短くするときに参考にしたサイトは以下です

• Apacheの.htaccessで、DokuWikiのURLを短く単純にする [DokuWikiで情報発信]
• 【DokuWiki】URLをスッキリさせる（URLの書き換え） | The modern stone age.
  

.htaccessファイルの内容を読み込むようにDokuWikiのサイト設定

.htaccessファイルを作ってもサイトの設定で.htaccessファイルを有効にするように設定しないと有効になりませんのでサイト設定管理画面の設定項目で「URLの書き換え」という項目で.htaccessを読み込むように設定します。以下に具体的な手順を記述します↓

1. 管理者メニューを開けます。
2. サイト設定管理画面を開けます。
3. 「URLの書き換え」を .htaccess に変更します。（下の方にあるので検索して下さい）
4. その下にある「URL上の名前空間の区切りにスラッシュを使用」を有効にして下さい。「保存」して下さい。

プラグインのインストール

indexmenuをインストール

plugin:indexmenu [DokuWiki]

DokuWikiで新規ページを作成する場合は存在しないページのリンクを記述する必要があり、慣れていないとなにをやっていいかわからないのでindexmenuでコンテンツをツリー構造にして右クリックで新規ページを作成できるようにします。 indexmenuについて参考にしたサイトは以下です。
DokuWikiプラグイン : Indexmenuでサイドバーにツリービュー。エクスプローラー風操作 [DokuWikiで情報発信]

chages plugin と pagelistplugin をインストール

plugin:changes [DokuWiki]

ja:plugin:pagelist [DokuWiki]

DokuWikiのテンプレートでは初期状態では「最近の更新」が実装されてないので「changes plugin」と「pagelistplugin」をつかって「最近の更新」を表示できるようにします。 「changes plugin」の使い方などで参考にしたサイトは以下です。プラグインは検索からインストールできますが、検索ではみつからないことがあるので、プラグインの公式サイトにいってダウンロードのURLをコピーして、DokuWikiのほうで手動でインストールという項目があるのでそこにURLを貼り付けてからインストールしました。
DokuWikiプラグイン : Changes Pluginで編集履歴を表示 [DokuWikiで情報発信]

Markdowku

plugin:markdowku [DokuWiki]

筆者はwiki記法を知らないのでMarkDownでかけるようにするために Markdowku というプラグインをインストールしました。

オリジナルのCSSを使うには

DokuWikiの見た目をかえるためにオリジナルのCSSをつかいたいことがあります。やり方は2つあってテンプレートのstyle.iniを編集して自分のcssを読み込むようにする方法と、confディレクトリの配下にuserstyle.cssを作成する方法です。後者のほうが一般的かと思います。

参考にしたサイトは以下です。
[dokuwiki] 独自CSSを追加するには – Bluebear I/O

userstyle.cssを使う方法は公式サイトでも紹介されています。
devel:css [DokuWiki]

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

テンプレート関係のファイルがおいてあるパスは dokuwiki/lib/tpl/dokuwiki になるのでそこから任意のファイルをえらんで編集します。

ロゴの画像を削除する

編集するファイル: tpl_header.php

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

imgタグの部分をコメントアウトしてspanタグの部分だけ新たにコピーして下に貼り付け

検索欄の位置を変更する

編集するファイル: tpl_header.php

<!-- SITE TOOLS -->
        <div id="dokuwiki__sitetools">
            <h3 class="a11y"><?php echo $lang['site_tools']; ?></h3>
            <?php tpl_searchform(); ?>
            <div class="mobileTools">
                <?php echo (new \dokuwiki\Menu\MobileMenu())->getDropdown($lang['tools']); ?>
            </div>
            <ul>
                <?php echo (new \dokuwiki\Menu\SiteMenu())->getListItems('action ', false); ?>
            </ul>
        </div>

tpl_searchform()が書かれているphpタグを任意の場所に移動

ログインボタンを表示しないようにする

編集するファイル: tpl_header.php

変更前↓

if (!empty($_SERVER['REMOTE_USER'])) {
    echo '<li class="user">';
    tpl_userinfo(); /* 'Logged in as ...' */
    echo '</li>';
}
echo (new \dokuwiki\Menu\UserMenu())->getListItems('action ');

変更後↓

if (!empty($_SERVER['REMOTE_USER'])) {
    echo '<li class="user">';
    tpl_userinfo(); /* 'Logged in as ...' */
    echo '</li>';
    echo (new \dokuwiki\Menu\UserMenu())->getListItems('action ');
}

モバイル対応

編集するファイル: tpl_header.php

変更前↓

<?php echo (new \dokuwiki\Menu\MobileMenu())->getDropdown($lang['tools']); ?>

変更後↓

<?php if (isset($_SERVER['REMOTE_USER']))
    echo (new \dokuwiki\Menu\MobileMenu())->getDropdown($lang['tools']); ?>

フッターのいらないリンクを消す

編集するファイル: tpl_footer.php

変更前↓

 <div class="buttons">
        <?php
            tpl_license('button', true, false, false); // license button, no wrapper
            $target = ($conf['target']['extern']) ? 'target="'.$conf['target']['extern'].'"' : '';
        ?>
        <a href="https://www.dokuwiki.org/donate" title="Donate" <?php echo $target?>><img
            src="<?php echo tpl_basedir(); ?>images/button-donate.gif" width="80" height="15" alt="Donate" /></a>
        <a href="https://php.net" title="Powered by PHP" <?php echo $target?>><img
            src="<?php echo tpl_basedir(); ?>images/button-php.gif" width="80" height="15" alt="Powered by PHP" /></a>
        <a href="//validator.w3.org/check/referer" title="Valid HTML5" <?php echo $target?>><img
            src="<?php echo tpl_basedir(); ?>images/button-html5.png" width="80" height="15" alt="Valid HTML5" /></a>
        <a href="//jigsaw.w3.org/css-validator/check/referer?profile=css3" title="Valid CSS" <?php echo $target?>><img
            src="<?php echo tpl_basedir(); ?>images/button-css.png" width="80" height="15" alt="Valid CSS" /></a>
        <a href="https://dokuwiki.org/" title="Driven by DokuWiki" <?php echo $target?>><img
            src="<?php echo tpl_basedir(); ?>images/button-dw.png" width="80" height="15"
            alt="Driven by DokuWiki" /></a>
    </div>

変更後↓

    <div class="buttons">
        <?php
            tpl_license('button', true, false, false); // license button, no wrapper
            $target = ($conf['target']['extern']) ? 'target="'.$conf['target']['extern'].'"' : '';
        ?>
    </div>