Web

DokuWiki: Layout Switcher Plugin

投稿日:2018年11月20日 更新日:

DokuWiki用プラグイン「Layout Switcher Plugin」のページです。

1. 概要

概要 スマートフォンで閲覧した場合(1カラムレイアウト)に、PC用レイアウト(2カラムレイアウト)に切り替えられるようにします。
※ 基本的には、デフォルトのテンプレート (dokuwiki) の使用を前提としています。
※ デフォルト状態の DokuWiki は、この切り替えができません。
最終更新日 2018-11-20
Provides Action
Repository Source
PC用2カラムレイアウト
PC用2カラムレイアウト
スマートフォン用1カラムレイアウト
スマートフォン用1カラムレイアウト

2. インストールと設定

(1) プラグインファイルのダウンロード

Releases ページ から、ソースファイルをダウンロードし解凍します。

もしくは、laboradian/layoutswitchergit clone コマンドでクローンしてもよいです。

(2) プラグインをサーバーに配置

解凍してできた layoutswitcher ディレクトリを、サーバー上の lib/plugins/ 以下に配置します。

FTP クライアントアプリケーションを使ってアップロードするのが簡単です。

このプラグインがインストール済みの状態になります。

(3) テンプレートファイルから、viewport の記述を削除

現在使用中のテンプレートディレクトリ(デフォルトは、lib/tpl/dokuwiki)の中にあるファイルから、viewport の metaタグを削除します。

具体的には、<head> の中にある以下の記述を削除します。

<meta name="viewport" content="width=device-width,initial-scale=1" />

デフォルトテンプレートである lib/tpl/dokuwiki の場合は、detail.php, main.php, mediamanager.php の3ファイルになります。

(4) ボタンを設置

DokuWikiのページのどこかに、レイアウト変更用ボタンを記述します(トップページの一番下などがお勧めです)。

その際、クリックする要素の class 属性として、”elm-to-switch-layout” という値をセットしてください。

例えば、こんな記述です。クリックできる要素であれば、ボタンでなくても構いません。

<html>
    <button class="elm-to-switch-layout">レイアウト変更 for Mobile</button>
</html>

スマートフォンで DokuWiki にアクセスした時、このボタンを押してレイアウトを切り替えることになります。

3. 使い方

スマートフォンで DokuWiki サイトにアクセスし、用意したボタンをクリックするだけです。

用意したボタン
用意したボタン

ボタンをクリックすると画面がリロードされ、PC用のレイアウトでサイトが表示されます。
もう一度押すと元に戻ります。

4. メモ

個人的には便利なプラグインですが、完成度が低いのでDokuWiki公式サイトに置く予定はありません。

5. 更新履歴

  • 2018-11-20 初期リリース

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Google App Engine

Google App Engine にデプロイしてあるファイルをダウンロードする

Google App Engine にデプロイしてあるファイルをダウンロードする方法について説明します。

Google

Googleマップで調べた経路をホーム画面に追加する (Android)

Android版の Googleマップで調べた経路は、ホーム画面にアイコンとして追加することができます。 手順は以下となります。 Google マップで調べた経路をホーム画面に追加する手順 (1) G …

Firefox

Firefox の 強化型トラッキング防止機能

目次1. Firefox の強化型トラッキング防止機能2. 用語トラッカー (Trackers)ソーシャルメディアトラッカートラッキングコンテンツサードパーティのクッキー クロスサイトのトラッキングク …

Web

window.opener を使って元ウィンドウの情報が取得できるかどうかの実験

ウェブブラウザでウェブページを表示している場合、ブラウザのウィンドウを表す window というオブジェクトが存在しており、JavaScript から利用することができます。 window.opene …

Web

GitHub 上の Jupyter Notebooks を Binder で(実行可能な状態で)共有する

GitHub 上の Jupyter Notebooks を Binder で(実行可能な状態で)共有する方法について説明します。