*

MediaWiki:WPtouchを導入して表示をスマートフォン対応

公開日: : 最終更新日:2014/10/23 web(システム開発)


mediawikiを使用してサイトを作った際に、標準のままだとスマートフォンからアクセスしても表示がPCと同じになります。PCサイトをスマホで表示すると、文字が小さかったり、ボタンが小さかったりと使いにくいのでWPtouchをつかってスマートフォン対応をします。

 

必要ファイルをダウンロード

こちらのサイトからskinをダウンロードします。

WPtouch

 

ファイルの配置

ダウンロードしたファイルを解凍し、解凍されたWPtouch.phpとwptouchフォルダをmediawikiのskinsディレクトリに配置します。

 

 

LocalSettings.phpの編集

PCとスマートフォンでskinを切り替えるようにLocalSettings.phpを編集します。

if (preg_match("/(mobile|webos|opera mini)/i", $_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'wptouch';
} else {
    $wgDefaultSkin = 'vector';
}

HTTP_USER_AGENTを判定してskinを切り替えてます。

 

以上で完了です。コンテンツの作り方によっては上手く表示されない部分があったりするので、上手く表示されるように工夫をしましょう。

ad_right_top

関連記事

blog_logo_small

簡単 Vagrant

巷で噂のVagrant ローカル環境でをインストールし、CentOSを起動するまで &n

記事を読む

blog_logo_small

Android:インストール済みアプリのapkファイルを取得する方法

Android端末にインストール済みのアプリケーションのバックアップ等のために、apkファイルを取得

記事を読む

blog_logo_small

さくらレンタルサーバーへのsubversionのセットアップ

今回はさくらレンタルサーバーへのsubversionのセットアップについて掲載します。 ko-

記事を読む

blog_logo_small

Android:エミュレータでのhostsファイルの書き換え

ローカルネットワーク内のサーバーにサーバー名称でアクセスする場合にhostsファイルを書き換えて対応

記事を読む

google以外広告

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

ad_right_top

linux-pen
【cron】秒間隔で定期実行する為の設定方法

コマンドを定期実行させたい場合に利用するcronですが、普通に利用する

blog_logo_small
【Apache】 ReverseProxy(リバースプロキシ)を設定してサブディレクトで別サーバーの内容を表示

今回はApacheのリバースプロキシ設定について紹介したいと思います。

blog_logo_small
【Apache】 Aliasを設定してサブディレクトでDocumentRoot以外を参照する

今回はApacheのAlias設定について紹介したいと思います。この方

no image
2015:新年のご挨拶

明けましておめでとうございます。 昨年はたくさんの方々に当ブログ

blog_logo_small
MySQL:外部ホストからのDBアクセス方法

MySQLではデフォルトで外部ホストからのアクセスを許可していないので

→もっと見る

  • アクセスカウンター
PAGE TOP ↑