文書の過去の版を表示しています。

DokuWikiの初期設定

DokuWikiインストール直後に設定すべき項目まとめ。

httpsを設定（サイトのSSL化）

certbotコマンドでSSL証明書を発行

certbotでSSL証明書を発行する方法

https用にnginxの.confを設定

vi /etc/nginx/conf.d/example.com.conf
example.com.conf
server {
    listen       80;
    server_name  example.com;

    return 301 https://example.com$request_uri;
}


server {
    listen       443 ssl http2;
    server_name  example.com;
    root         /home/user1/Dokuwiki/xxx;
    index        doku.php;

    ssl_certificate      /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key  /etc/letsencrypt/live/example.com/privkey.pem;

    location ~ \.php$ {
        include        fastcgi_params;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        fastcgi_param  REDIRECT_STATUS 200;
        fastcgi_param  HTTPS on;        
        fastcgi_pass   unix:/var/run/php-fpm/php-fpm.sock;
    }    
}

example.com.confに上記のような設定を追加。

最終的な.confはここを確認。

DokuWikiにログインする

サイトの右上にあるログインをクリック。

インストールするときに作成したスーパーユーザーのユーザー名とパスワードを入力し、ログインをクリック。
（メールアドレスではなくユーザー名なので注意）

URL正規化

http://example.com/doku.php?id=wiki:syntaxのようなURLを
http://example.com/wiki/syntaxのようなURLに変更。

大まかな流れは、以下の2ステップ

  • doku.phpをURLに表示しない
  • ?id=wiki:syntaxのようなパラメーターを、/wiki/syntaxのようなパスに変換

参考リンク
DokuWiki公式・URL の書き換え

URLの書き換え機能をオンにする

ブラウザで
http://example.com
を開く。

管理者アカウントでログイン。

管理　＞　サイト設定

高度な設定
userewrite
URLの書き換え 		.htaccess
useslash
URL上の名前空間の区切りにスラッシュを使用 		チェックする
canonical
canonical URL（正準URL）を使用 		チェックする

保存ボタンをクリック。

WebサーバーにApacheではなくnginxを使用する場合でも、URLの書き換えは.htaccessを選ぶ。

local.phpを確認

vi /home/user1/Dokuwiki/xxx/conf/local.php
local.php
$conf['userewrite'] = '1';
$conf['useslash'] = 1;
$conf['canonical'] = 1;

local.phpの中に上記のような設定があることを確認。

ブラウザの管理画面で項目を設定すると、実態としてはlocal.phpにパラメーターが書き込まれる。

nginxの.confを設定（location ~ \.php$ディレクティブを書き換え）

example.com.conf
location ~ \.php$ {
    include        fastcgi_params;
    fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
    fastcgi_param  REDIRECT_STATUS 200;
    fastcgi_param  HTTPS on;    
    fastcgi_pass   unix:/var/run/php-fpm/php-fpm.sock;
}

上記の部分を下記のように書き換え。

example.com.conf
location ~ \.php$ {
    if (!-f $request_filename) {
        return 404;
    }

    # http://example.com/doku.php?id=wiki:welcome のようなURLを
    # http://example.com/wiki/welcome のようなURLにリダイレクト
    if ($request_uri ~ ^/doku.php\?id=(?<query>.+)$) {
        rewrite .* /$query?;
        rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):(.+)$ $1/$2/$3/$4/$5/$6/$7/$8/$9;
        rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):(.+)$                                 $1/$2/$3/$4/$5;
        rewrite ^([^:]+):([^:]+):(.+)$                                                 $1/$2/$3;
        rewrite ^([^:]+):(.+)$                                                         $1/$2;
        rewrite .*                                                                     $uri permanent;
    }

    include        fastcgi_params;
    fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param  REDIRECT_STATUS 200;
    fastcgi_param  HTTPS on;
    fastcgi_pass   unix:/var/run/php-fpm/php-fpm.sock;
}

rewrite部分の解説

元のURLが
http://example.com/doku.php?id=1:2:3:4:5:6:7:8:9:10:11
だった場合、
rewrite .* /$query?;
の部分で
http://example.com/1:2:3:4:5:6:7:8:9:10:11
にリライトされ、

rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):(.+)$ $1/$2/$3/$4/$5/$6/$7/$8/$9;
の部分で
http://example.com/1/2/3/4/5/6/7/8/9:10:11
にリライトされ、

rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):(.+)$ $1/$2/$3/$4/$5;
の部分はマッチしないのでスキップされ、

rewrite ^([^:]+):([^:]+):(.+)$ $1/$2/$3;
の部分で
http://example.com/1/2/3/4/5/6/7/8/9/10/11
にリライトされ、

rewrite ^([^:]+):(.+)$ $1/$2;
の部分はマッチしないのでスキップされ、

rewrite .* $uri permanent;
の部分で301リダイレクトされる。
（ブラウザのアドレスバーに表示されるURLが変わる）

rewrite を連続して書けば、書き換え後のものを、更に書き換え、書き換え……ができる。

rewriteにpermanentをつけなければ、内部リダイレクト、
rewriteにpermanentをつければ、301リダイレクトされる。

上記のrewriteで
id=?1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16
16階層（:が15個）まで/に置換可能。

nginxの.confを設定（書き換えではなく追加する部分）

example.com.conf
location / {
    try_files $uri $uri/ @dokuwiki;
}

location @dokuwiki {
    rewrite ^/_media/(.*)          /lib/exe/fetch.php?media=$1  last;
    rewrite ^/_detail/(.*)         /lib/exe/detail.php?media=$1 last;
    rewrite ^/_export/([^/]+)/(.*) /doku.php?do=export_$1&id=$2 last;
    rewrite ^/(?!lib/)(.*)         /doku.php?id=$1&$args        last;
}

# http://example.com/wiki:welcome のようなURLを
# http://example.com/wiki/welcome のようなURLにリダイレクト
location ~ ^/.+:.+$ {
    rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):(.+)$ $1/$2/$3/$4/$5/$6/$7/$8/$9;
    rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):(.+)$                                 $1/$2/$3/$4/$5;
    rewrite ^([^:]+):([^:]+):(.+)$                                                 $1/$2/$3;
    rewrite ^([^:]+):(.+)$                                                         $1/$2;
    rewrite .*                                                                     $uri permanent;
}

example.com.confに上記のような設定を追加。

rewriteのところで:（コロン）15個まで/に置換可能。

:が16個以上の場合も、複数回301リダイレクトが発生するが最終的にすべて/に置き換わる。

URL書き換えの動作確認

ブラウザで以下の3つのURLへアクセス

  • http://example.com/doku.php?id=wiki:welcome
  • http://example.com/wiki:welcome
  • http://example.com/wiki/welcome

すべて以下のアドレスにリダイレクトされればOK

  • http://example.com/wiki/welcome

nginx、最終的な.confの中身

example.com.conf
server {
    listen       80;
    server_name  example.com;

    return 301 https://example.com$request_uri;
}


server {
    listen       443 ssl http2;
    server_name  example.com;
    root         /home/user1/Dokuwiki/xxx;
    index        doku.php;

    ssl_certificate      /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key  /etc/letsencrypt/live/example.com/privkey.pem;

    location / {
        try_files $uri $uri/ @dokuwiki;
    }

    location @dokuwiki {
        rewrite ^/_media/(.*)          /lib/exe/fetch.php?media=$1  last;
        rewrite ^/_detail/(.*)         /lib/exe/detail.php?media=$1 last;
        rewrite ^/_export/([^/]+)/(.*) /doku.php?do=export_$1&id=$2 last;
        rewrite ^/(?!lib/)(.*)         /doku.php?id=$1&$args        last;
    }

    # http://example.com/wiki:welcome のようなURLを
    # http://example.com/wiki/welcome のようなURLにリダイレクト
    location ~ ^/.+:.+$ {
        rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):(.+)$ $1/$2/$3/$4/$5/$6/$7/$8/$9;
        rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):(.+)$                                 $1/$2/$3/$4/$5;
        rewrite ^([^:]+):([^:]+):(.+)$                                                 $1/$2/$3;
        rewrite ^([^:]+):(.+)$                                                         $1/$2;
        rewrite .*                                                                     $uri permanent;
    }

    location ~ \.php$ {
        if (!-f $request_filename) {
            return 404;
        }

        # http://example.com/doku.php?id=wiki:welcome のようなURLを
        # http://example.com/wiki/welcome のようなURLにリダイレクト
        if ($request_uri ~ ^/doku.php\?id=(?<query>.+)$) {
            rewrite .* /$query?;
            rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):(.+)$ $1/$2/$3/$4/$5/$6/$7/$8/$9;
            rewrite ^([^:]+):([^:]+):([^:]+):([^:]+):(.+)$                                 $1/$2/$3/$4/$5;
            rewrite ^([^:]+):([^:]+):(.+)$                                                 $1/$2/$3;
            rewrite ^([^:]+):(.+)$                                                         $1/$2;
            rewrite .*                                                                     $uri permanent;
        }

        include        fastcgi_params;
        fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param  REDIRECT_STATUS 200;
        fastcgi_param  HTTPS on;
        fastcgi_pass   unix:/var/run/php-fpm/php-fpm.sock;
        #fastcgi_pass   127.0.0.1:9000;
    }

    location ^~ /bin/    { return 403; }
    location ^~ /conf/   { return 403; }
    location ^~ /data/   { return 403; }
    location ^~ /inc/    { return 403; }
    
    location ~* /\.well-known {
        allow all;
    }
    
    location = /sitemap.xml.gz {
        root /home/user1/Dokuwiki/xxx/data/cache;
    }    
}

SSL証明書発行前の段階でこの.confの内容を設定すると、
/etc/letsencrypt/live/example.com/fullchain.pemファイルが存在しないためエラーになるので注意。

URL正規化前にこの.confを適用すると、DokuWikiの管理画面にログインできなくなるので注意。

Bootstrap3テンプレートのインストールと設定

Bootstrap3 Template（作者： Giuseppe Di Terlizzi）をインストール。

DokuWikiのテンプレートを変更する方法

プラグインのインストールと設定

不要なプラグインをアンインストール

以下のプラグインをアンインストール。

  • Active Directory Auth Plugin
  • LDAP Auth Plugin
  • authpdo plugin
  • Popularity Feedback Plugin

不要なプラグインを削除する方法

定番のプラグインをインストール

以下のプラグインをインストール。

  • smtp plugin
  • EditTable plugin
  • socialcards plugin
  • Socialite plugin
  • Footer plugin
  • xbr Plugin

Dokuwikiにプラグインを導入する方法

DokuWikiセキュリティ関係の設定

DokuWiki公式・セキュリティ

dataディレクトリなどが非公開になっているか確認

ブラウザで
http://example.com/data/pages/wiki/dokuwiki.txt
にアクセス。

403になればOK。 

====== DokuWiki ======

[[doku>wiki:dokuwiki|{{wiki:dokuwiki-128.png }}]] DokuWiki is a simple to use and highly versatile Open Source [[wp>wiki]] software that doesn't require a database. It is loved by users for its clean and readable [[wiki:syntax]]. The ease of maintenance, backup and integration makes it an administrator's favorite. Built in [[doku>acl|access controls]] and [[doku>auth|authentication connectors]] make DokuWiki especially useful in the enterprise context and the large number of [[doku>plugins]] contributed by its vibrant community allow for a broad range of use cases beyond a traditional wiki.

Read the [[doku>manual|DokuWiki Manual]] to unleash the full power of DokuWiki.

上記のようなテキストが表示される場合は、セキュリティのリスクがある。

以下の4つのディレクトリはWebからアクセスできないようにしておく必要がある。

  • bin
  • conf
  • data
  • inc

dataディレクトリなどを非公開にするnginxの.confの設定

vi /etc/nginx/conf.d/example.com.conf
example.com.conf
location ^~ /bin/  { return 403; }
location ^~ /conf/ { return 403; }
location ^~ /data/ { return 403; }
location ^~ /inc/  { return 403; }

example.com.confに上記のような設定を追加。

最終的な.confはここを確認。

SMTP Pluginのインストールと設定

SMTP Pluginをインストールしないと、アカウント作成やパスワード再発行などができない。
（管理用のメールを送信できないので）

SMTP Pluginをインストール

ブラウザで自分のDokuWikiサイトを開く。

管理　＞　拡張機能管理　＞　検索とインストール

SMTP Pluginを検索

SMTP Pluginをインストール

SMTP Pluginを設定

管理　＞　サイト設定

outlookメールを使っている場合の設定例。

Smtp
plugin»smtp»smtp_host
送信 SMTP サーバー 		smtp-mail.outlook.com
plugin»smtp»smtp_port
SMTP サーバーのポート。通常は 25。SSL の場合は 465。 		587
plugin»smtp»smtp_ssl
SMTP サーバーと通信する時、使用される暗号化は？ 		TLS
plugin»smtp»auth_user
認証が必要な場合のユーザー名 		admin@outlook.jp
plugin»smtp»auth_pass
上記ユーザーのパスワード
plugin»smtp»localdomain
SMTP の HELO フェーズ中に使用される名前。
DokuWiki が稼働している Web サーバーの FQDN です。
自動検出させる場合、空のままにします。 		空欄
plugin»smtp»debug
送信が失敗した場合、完全なエラーログを印刷しますか？稼働確認後、無効にして下さい！ 		チェックしない
通知設定
mailfrom
メール自動送信時の送信元アドレス 		admin@outlook.jp
mailreturnpath
不届き通知を受け取るメールアドレス 		admin@outlook.jp

保存をクリック。

SMTPの動作確認

管理　＞　SMTP設定の確認

Toに適当なメールアドレスを入力、Send Email

Message was sent. SMTP seems to workと表示されればOK。

ロゴ・favicon・アイコンを変更

ロゴ・favicon・アイコンを作成

以下の3つのファイルを作成。

  • logo.png
  • favicon.ico
  • apple-touch-icon.png

logo.pngのサイズは135×135

favicon.icoのサイズは32×32

apple-touch-icon.pngのサイズは180×180

ロゴ・favicon・アイコンをアップロード

メディアマネージャーを開く。

名前空間を選択でwikiを選択。

アップロードタブを選択。

以下の3つのファイルをアップロード。

  • logo.png
  • favicon.ico
  • apple-touch-icon.png

wikiの名前空間に指定のファイル名でアップロードすれば

  • wiki:logo.png
  • wiki:favicon.ico
  • wiki:apple-touch-icon.png

というパスになる。

これにより自動的にロゴやfaviconとして認識される。

ブラウザで画像を確認する

  • https://example.com/_media/wiki/logo.png
  • https://example.com/_media/wiki/favicon.ico
  • https://example.com/_media/wiki/apple-touch-icon.png

メディアマネージャーからアップロードしたファイルは、上記のようなURLでアクセスできる。

画像の保存先パス

メディアマネージャーからアップロードしたファイルは、下記のようなディレクトリに保存されている。

/home/user1/Dokuwiki/xxx/data/media/wiki

（DokuWikiのインストールパスが/home/user1/Dokuwiki/xxxの場合）

タイムゾーンを設定

vi /home/user1/Dokuwiki/xxx/conf/local.protected.php

新規にlocal.protected.phpファイルを作成。

local.protected.php
<?php
date_default_timezone_set("Asia/Tokyo");

local.protected.phpに上記を設定。

local.phpに設定した内容は、DokuWikiアップデート時に上書きされてしまうが、
local.protected.phpに設定した内容は、DokuWikiアップデート時に上書きされない。

リンクを別ウィンドウで開く

管理　＞　サイト設定

リンク
target»wiki
内部リンクのtarget属性
target»interwiki
InterWikiリンクのtarget属性		_blank
target»extern
外部リンクのtarget属性		_blank
target»media
メディアリンクのtarget属性		_blank
target»windows
Windowsリンクのtarget属性		_blank

保存ボタンをクリック。

InterWikiとは、Wiki間のリンクのこと。
自分のWikiからWikipediaにリンクを貼ったりするようなケース。

メディアリンクとは、画像や動画へのリンク。

Windowsリンクとは、Windows共有フォルダのファイルへDokuWikiから直接アクセスさせるもの。

DokuWikiにサイトマップを設定する方法

DokuWikiのオプションを設定

管理　＞　サイト設定

配信設定（RSS）
sitemap
Googleサイトマップ作成頻度（日数。0で無効化します。） 		1
スパム対策
relnofollow
外部リンクにrel=“ugc nofollow”を付加 		チェックする
indexdelay
インデックスを許可（何秒後） 		0
（デフォルト値は 60*60*24*5）
高度な設定
send404
文書が存在しないページに“HTTP404/Page Not Found”を使用 		チェックする

保存ボタンをクリック。

/data/cacheディレクトリに、sitemap.xml.gzというファイルが作成される。

DokuWiki公式・Google サイトマップ

nginxの.confを設定

example.com.conf
location = /sitemap.xml.gz {
    root /home/user1/Dokuwiki/xxx/data/cache;
}

http://example.com/sitemap.xml.gzというURLが、
/home/user1/Dokuwiki/xxx/data/cache/sitemap.xml.gzというパスとリンクするように設定。

ブラウザでhttp://example.com/sitemap.xml.gzを開くと、sitemap.xml.gzというファイルのダウンロードが始まる。

sitemap.xml.gzは圧縮ファイル。
xmlの中身はブラウザから表示できないが問題ない。
このままでGoogleなどの検索エンジンからはサイトマップとして認識される。

sitemap.xml.gzをダウンロードし、ローカルでgzip解凍をすれば、sitemap.xmlの中身をテキストとして確認できる。

RSSを設定

RSSを表示

ブラウザで
http://example.com/feed.php
のようなURLへアクセスすると、RSSが表示される。

RSSのオプションを設定

デフォルトでは、RSSに表示されるURLが
<link>https://example.com/xxx?rev=1625216895&amp;do=diff</link>
のような形式になっている。

<link>https://example.com/xxx</link>
のような形式に変更する。

管理　＞　サイト設定

配信設定（RSS）
rss_linkto
XMLフィード内リンク先 		現在のページ
（デフォルトは、変更点のリスト）
rss_media
XMLフィードで、どんな種類の変更を記載するか 		ページ
（デフォルトは、両方）
rss_show_deleted
削除されたフィードを含める 		チェックを外す
（デフォルトでは、チェックあり）

保存ボタンをクリック。

デフォルトでは、ページを新規作成したときと、ページを削除した時にrssのフィードが作成される。
（ページを更新したときにはフィードは作成されない）

rss_show_deletedのチェックを外すと、ページを新規作成したときだけフィードが作成されるようになる。

DokuWiki公式・XML フィード

ファイル名を非表示にする方法

DokuWikiのデフォルト設定では、フッターにwiki/welcome.txtのようなファイル名が表示される。

これを非表示にする。

管理　＞　サイト設定

基本
template
テンプレート（Wikiのデザイン） 		bootstrap3
テンプレート
Bootstrap3
ページ
tpl»bootstrap3»pageInfo
ページのメタデータの各要素の表示・非表示 		filename チェックしない
extension チェックしない
date チェックする
editor チェックしない
locked チェックする

保存ボタンをクリック。

extensionのチェックを外すと、wiki/welcome.txtのような表示が、wiki/welcomeのような表示に変わる。
（拡張子が表示されなくなる）

filenameのチェックを外すと、wiki/welcome.txtのようなテキストが表示されなくなる。

dateは、最終更新日。

editorは、ページを編集したユーザーのユーザー名。

lockedは、ページがロックされているかどうか。

<title>タグに見出しを設定する方法

デフォルトの設定では、トップページのURLが
http://example.com/start
のようになっている。

また、タイトルタグは
<title>start</title>
のようにURLのパスがそのまま使用される。

Googleの検索結果にもstartと表示され、ページの内容を連想しづらくSEO的に不利となる。

タイトルタグを、ページの見出しで制御できるように変更する。

管理画面からタイトルタグを設定

<title>タグをパスから見出しに変更

管理　＞　サイト設定

表示
useheading
最初の見出しをページ名とする 		常に使用する
(デフォルトは　使用しない)

useheadingに常に使用するを設定することで、
<title>タグに、URLのパスではなく、ページの1つ目の<h1>や<h2>タグのテキストが入る。

DokuWiki公式・設定項目: useheading

サイト名をタイトルに含める

テンプレート
Bootstrap3
ブラウザタイトル
tpl»bootstrap3»browserTitle
ブラウザー上の DokuWiki の見出し
(@TITLE@ [@WIKI@] がデフォルトです。@TITLE@ は現在のページ見出しに置換え。@WIKI@ は Wiki タイトルに置換え。)
title の設定内容を参照して下さい。 		@TITLE@ [@WIKI@]

browserTitleに
@TITLE@と設定すると、<title>タグにサイト名を含まず、
@TITLE@ [@WIKI@]と設定すると、<title>タグにサイト名を含む。

パンくずリストを表示する方法

管理　＞　サイト設定

表示
breadcrumbs
トレース（パンくず）表示数（0で無効化します） 		0
（デフォルトは10）
youarehere
現在位置を表示（こちらをオンにする場合、恐らく、上のオプションをオフにしたいとも思うでしょう） 		チェックする
（デフォルトはチェックなし）

デフォルトのパンくずリストは、ページの表示履歴を10件分表示するというもので、サイト内での階層構造を示したものにはなっていない。

youarehereをオンにすると、階層構造型のパンくずリストになる。

breadcrumbsを0にして、ページの表示履歴の方の機能はオフにする。

DokuWiki公式・パンくずリスト

Dokuwikiでhtmlの埋め込みをできるようにする方法

設定

管理　＞　サイト設定

編集
htmlok
HTML埋め込みを許可する 		チェックする

保存ボタンをクリック。

使い方

ページ編集画面で、<html>タグで囲んだ部分はhtmlとして認識される。

DokuWikiにTwitterのツイートを埋め込むときに使える。

共有型のwikiでは、悪意のあるHTMLを埋め込むことでクロスサイトスクリプティングに利用されるリスクがあるので注意。

DokuWiki公式・設定項目: htmlok

CSSを設定

cd /home/user1/Dokuwiki/xxx
vi conf/userall.css

userall.cssというファイルを新規作成し、その中にCSSを書く。

userstyle.cssはブラウザ表示用のCSS、
userprint.cssは印刷時に適用されるCSSなど、モード毎に個別のCSSを設定できる。
userall.cssは、モードに関係なく適用される。

user***.cssはDokuWikiのアップデート時に上書きされない。

tableのヘッダーの色を変更

userall.css抜粋
th {
    background-color: black;
    color: white;
}

上記のように設定すると、テーブルのthタグの色を変更できる。

スマホで長い文字列が画面から飛び出る問題を解消

userall.css抜粋
code {
    word-break: break-word;
}

codeタグの中では、
http://example.com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
のような長い文字列も1単語として扱われる。

スマホなどの小さい画面では、文字が画面外に飛び出し、レイアウトが崩れる。

CSSでbreak-wordを設定してやると、単語の途中でも改行されるのでレイアウト崩れを防げる。

フッターを非表示に

  • Bootstrap template for DokuWiki
  • Powered by PHP
  • Valid HTML5
  • Valid CSS
  • Driven by DokuWiki

などの表示を消す。
（フッターを丸ごと消す）

userall.css抜粋
#dw__footer {
    display: none;
}

id="dw__footer"の要素（フッター）を非表示にする。

見出しタグを装飾

h1, h2, h3タグには余白と水平線が設定されているのに、
h4, h5タグには余白と水平線が設定されていない。

h1, h2, h3タグの違いは、文字の大きさだけなので、見た目で区別がつきにくい。
h4, h5タグの違いは、文字の大きさだけなので、見た目で区別がつきにくい。

h2～h5タグに、それぞれ異なる装飾をつけて、見た目の差異を作りだす。

userall.css抜粋
h2, h3, h4, h5 {
    margin-top: 2rem !important;
    margin-bottom: 0.5rem !important;
    padding: 1rem !important;
}
 
h2 {
    background-color: #1da1f2;
    color: white;
}
 
h3 {
    border-left: 3px solid #0095d9;
}
 
h4 {
    border-bottom: 2px solid #1da1f2;
}
 
h5 {
    border-left: 3px double #0095d9;
    margin-bottom: 1rem !important;
    padding: 0.5rem 1rem !important;
}

li要素のマージンを調整

userall.css抜粋
.linkli div.li {
    margin: 1em 0;
}

箇条書きの要素をリンクにしたときに、各要素間が狭くてクリックしにくい。
上下に1文字分のマージンを設定して行間を広くする。 

<html>
<div class='linkli'>
</html>
  * あ
  * い
  * う
<html>
</div>
</html>

行間を広げたい箇条書き要素の前後に、<html>タグで<div class='linkli'>と</div>を置く。

画像のサイズを調整するCSS

userall.css抜粋
@media screen and (max-width: 767px) {
    .img-responsive {
        max-width: 100%;
        max-height: 90vh;
    }
}

@media screen and (min-width: 768px) {
    .img-responsive {
        max-width: 75%;
        max-height: 40vh;
    }
}
@media screen and (min-width: 992px) {
    .img-responsive {
        max-width: 50%;
        max-height: 40vh;
    }
}

スマホでは画像を横幅いっぱいに表示。
デバイスの幅が767px以下（Bootstrapのxsとsmに相当）で、max-width: 100%;を設定。
縦のサイズも少しだけ制限、max-height: 90vh;を設定。

パソコンでは画像を画面の50～75%程度まで縮小して表示。
デバイスの幅が768px以上（Bootstrapのmdに相当）で、max-width: 75%;を設定。
デバイスの幅が992px以上（Bootstrapのlg以上に相当）で、max-width: 50%;を設定。
また、スマホで撮影された縦長の画像をパソコンでも見やすくするために、max-height: 40vh;を設定。

Google Mapの埋め込みサイズを調整するCSS

Google Map埋め込み用のiframeをレスポンシブ対応させる。

userall.css抜粋
@media screen and (max-width: 767px) {
    .gmap {
        position: relative;
        height: 0;
        overflow: hidden;
        width: 100%;
        padding-bottom: 75%;
    }
}
 
@media screen and (min-width: 768px) {
    .gmap {
        position: relative;
        height: 0;
        overflow: hidden;
        width: 100%;
        padding-bottom: 75%;
    }
}
 
@media screen and (min-width: 992px) {
    .gmap {
        position: relative;
        height: 0;
        overflow: hidden;
        width: 640px;
        padding-bottom: 480px;
    }
}
 
.gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

DokuWikiにGoogle Mapを埋め込む方法

Google Mapで以下のようなiframeが発行される。 

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12961.947584801825!2d139.6921007!3d35.6896342!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf1665c37f38661e8!2z5p2x5Lqs6YO95bqB!5e0!3m2!1sja!2sjp!4v1629781929454!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

これを下記のようにhtmlタグとdivタグを追加してDokuWikiの編集画面に貼り付ける。 

<html>
<div class='gmap'>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12961.947584801825!2d139.6921007!3d35.6896342!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf1665c37f38661e8!2z5p2x5Lqs6YO95bqB!5e0!3m2!1sja!2sjp!4v1629781929454!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</html>

divタグにgmapというクラスを追加することで、前述のcssによるサイズ調整が有効になる。

スマホでパディングを小さく

メインの表示エリアにはパディングが3重に設定されている。
スマホだとコンテンツの表示領域が狭くなりすぎる。
スマホの場合だけ、マージンやパティングを小さくする。

userall.css抜粋
@media screen and (max-width: 767px) {
    #dokuwiki__content {
        padding: 0 !important;
    }
 
    div[itemprop="articleBody"] {
        padding: 0 !important;
    }
 
    div[itemprop="articleBody"] div.panel-body {
        padding: 5px !important;
    }
}

Twitterのサイズ調整

DokuWikiにTwitterのツイートを埋め込んだ時のサイズ調整。

userall.css抜粋
.twitter-tweet {
    max-width: 400px !important;
}

デフォルトではmax-widthが500pxになっている。
画面の占有感が強く見づらいので、400pxに縮小。

キャプションの位置を調整

画像の下に表示するキャプションのマージンを調整。

デフォルトでは、キャプションの上下のマージンが同じサイズなので、
　画像

　キャプション1

　画像

　キャプション2
みたいな並びになったときに、キャプション1が上の画像に対してなのか、下の画像に対してなのかが分かりにくい。

userall.css抜粋
.caption {
    margin-top: 0 !important;
}

キャプションと画像の間の隙間を0にする。

　画像
　キャプション1

　画像
　キャプション2
のように画像とキャプションのワンセット感が強くなり見やすい。

socialiteのSNSシェアボタンのマージンを設定

userall.css抜粋
ul.socialite > li {
    margin: 5px;
}

socialiteのli要素（SNSシェアボタン）のデフォルトのmarginは.25emとなっている。
これだとボタンとボタンの間隔が狭すぎて、Google Search Consoleで

  • このページはモバイル フレンドリーではありません
  • テキストが小さすぎて読めません
  • クリック可能な要素同士が近すぎます

という警告が出る。

marginを5px程度に増やしてやると警告が出なくなる。

最終的なuserall.css

userall.css
th {
    background-color: black;
    color: white;
}
 
code {
    word-break: break-word;
}
 
#dw__footer {
    display: none;
}
 
h2, h3, h4, h5 {
    margin-top: 2rem !important;
    margin-bottom: 0.5rem !important;
    padding: 1rem !important;
}
 
h2 {
    background-color: #1da1f2;
    color: white;
}
 
h3 {
    border-left: 3px solid #0095d9;
}
 
h4 {
    border-bottom: 2px solid #1da1f2;
}
 
h5 {
    border-left: 3px double #0095d9;
    margin-bottom: 1rem !important;
    padding: 0.5rem 1rem !important;
}
 
div.li {
    margin: 1em 0;
}
 
@media screen and (max-width: 767px) {
    .img-responsive {
        max-width: 100%;
        max-height: 90vh;
    }
 
    .gmap {
        position: relative;
        height: 0;
        overflow: hidden;
        width: 100%;
        padding-bottom: 75%;
    }
 
    #dokuwiki__content {
        padding: 0 !important;
    }
 
    div[itemprop="articleBody"] {
        padding: 0 !important;
    }
 
    div[itemprop="articleBody"] div.panel-body {
        padding: 5px !important;
    }
}
 
@media screen and (min-width: 768px) {
    .img-responsive {
        max-width: 75%;
        max-height: 40vh;
    }
 
    .gmap {
        position: relative;
        height: 0;
        overflow: hidden;
        width: 100%;
        padding-bottom: 75%;
    }
}
 
@media screen and (min-width: 992px) {
    .img-responsive {
        max-width: 50%;
        max-height: 40vh;
    }
 
    .gmap {
        position: relative;
        height: 0;
        overflow: hidden;
        width: 640px;
        padding-bottom: 480px;
    }
}
 
.gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 
.twitter-tweet {
    max-width: 400px !important;
}
 
.caption {
    margin-top: 0 !important;
}
 
ul.socialite > li {
    margin: 5px;
}
 
 
main > div.row {
    display: flex;
}
 
.sidebar-sticky {
    position: sticky;
    top: 50px;
}

main > div.rowと
.sidebar-stickyは、サイドバーのスクロール追従ウィジェット用。

DokuWikiをバックアップする（フルバックアップ）

DokuWikiのドキュメントルートを丸ごとバックアップしておけば、
ファイルをリストアするだけで復旧が可能。

サーバーを移転するときも、新サーバーでバックアップデータを解凍するだけでインストール完了。
(nginxの設定や、SSL証明書の発行は別途必要)

バックアップ用のディレクトリを作成

cd /home/user1/Dokuwiki
mkdir -p Backup/Archives

DokuWikiのディレクトリへ移動。

複数のwiki運営を想定。
DokuWikiの下に複数ディレクトリがあり、各ディレクトリが1つのwikiサイトに相当する構成。

Backupディレクトリを作成。
Backupディレクトリの下に、Archivesディレクトリを作成。

Archivesにxxx_日付.tar.xzというファイルを日次で保存する。

バックアップ用のシェルスクリプトを作成

cd /home/user1/Dokuwiki
vi Backup/backup_xxx.sh

Backupディレクトリの下にbackup_xxx.shのようなファイルを新規作成、バックアップ用のシェルスクリプトを書く。
（サイトごとに別々のbackup_xxx.shを作成）

backup_xxx.sh
#!/bin/sh
 
# プロジェクト名
PROJECT=xxx
 
# バックアップファイルの保管期間
STORAGE_DAYS=14
 
# Dokuwikiディレクトリへ移動
cd $(dirname $0)/..
 
# バックアップの保存先ディレクトリ、バックアップ対象を設定
DIR_ARCHIVES=./Backup/Archives
DIR_TARGET1=./$PROJECT
 
# プロジェクト名と今日の日付をベースに.tar.xzのファイル名を設定
TODAY=$(date +%Y%m%d)
FNAME=${PROJECT}_$TODAY.tar.xz
FPATH=$DIR_ARCHIVES/$FNAME
 
# バックアップを取得
tar cJf $FPATH $DIR_TARGET1
echo "Created backup: $FNAME"
 
# 古いバックアップを削除
find $DIR_ARCHIVES -type f -mtime +$STORAGE_DAYS -exec rm -f {} +

tar cJf $FPATH $DIR_TARGET1コマンドでバックアップを作成。
プロジェクトルートのディレクトリを丸ごとバックアップして、xxx_日付.tar.xzというファイルを作成する。

find $DIR_ARCHIVES -type f -mtime +$STORAGE_DAYS -exec rm -f {} +コマンドで古いファイルを削除。
Archivesの14日経過した古いxxx_日付.tar.xzを削除する。

crontabでバックアップを定期実行

su
crontab -e
crontab
1 2 * * * sh /home/user1/Dokuwiki/Backup/backup_xxx.sh > /tmp/cron.backup_dokuwiki_xxx.log

backup_xxx.shを毎日2時1分に実行、ログをcron.backup_dokuwiki_xxx.logに保存。

jqueryをCDNから読み込み

CDNからjqueryを読み込む方式に設定。
（デフォルトではローカルからjqueryを読み込む）

ネットワーク
jquerycdn
コンテンツ・デリバリー・ネットワーク (CDN) の選択
（jQuery と jQuery UI スクリプトを CDN からロードさせる場合には、追加的な HTTP リクエストが発生しますが、
ブラウザキャッシュが使用されるため、表示速度の向上が期待できます。） 		CDN: code.jquery.com を使用
（デフォルトは、CDN を使用せず、ローカルデリバリーのみ使用する）

保存をクリック。

jqueryは、CDNから読み込んだ方がキャッシュが利用できるので、ページの表示速度が速くなる。

DokuWikiの画像をデフォルトでnokinkにする方法

ページ内に画像を貼り付けるとき
{{http://example.com/xxx.jpg?nolink}}
のように
?nolinkを毎回書くのは面倒。
デフォルトでnolinkにして、リンクしたいときだけオプションで指定できるように変更する。 

cd /home/user1/Dokuwiki/xxx
vi inc/parser/handler.php

handler.phpというファイルを開く。

handler.php抜粋
    //get linking command
    if(preg_match('/nolink/i',$param)){
        $linking = 'nolink';
    }else if(preg_match('/direct/i',$param)){
        $linking = 'direct';
    }else if(preg_match('/linkonly/i',$param)){
        $linking = 'linkonly';
    }else{
        $linking = 'details';
    }

handler.php内の、上記のような部分を、下記のように書き換え。

handler.php抜粋
    //get linking command
    if(preg_match('/nolink/i',$param)){
        $linking = 'nolink';
    }else if(preg_match('/direct/i',$param)){
        $linking = 'direct';
    }else if(preg_match('/linkonly/i',$param)){
        $linking = 'linkonly';
    }else if(preg_match('/details/i',$param)){
        $linking = 'details';
    }else{
        $linking = 'nolink';
    }

?detailsという指定ができるように、else ifを追加。

デフォルトでは、オプションの指定がない場合（else）は
detailsとして処理されていたのを
nolinkとして処理されるように変更。

画像のオプション
nolink 画像を表示
リンクしない
direct 画像を表示
リンクをクリックすると大きな画像を表示
linkonly 画像を表示しない
リンクをクリックすると画像を表示
details 画像を表示
リンクをクリックするとEXIFとIPTCのメタデータを表示

handler.phpへの変更は、DokuWiki本体のバージョンをアップデートするときに上書きされる可能性があるので注意。

DokuWiki公式・画像とメディアファイルの取り扱い

  • 最終更新: 2021/10/08 15:08