MediaWiki - HowTo Mobile Theme von Wikipedia
Wer auf der Suche nach dem Mobilen Theme von wikipedia.org ist, der ist hier richtig. Bei der Mobilen Version von Wikipedia handelt es sich um die Mediawiki Extension MobileFrontend. Dieser wird hier verwendet:
Ist diese Extension aktiviert, hat man die Möglichkeit auf Mobilen Geräten zwischen der Desktop und der Mobilen Version im Footer hin und her zu schalten.
Installation
Da ich hier schon MW 1.20 verwende, hole ich mir die aktuellste Version aus dem Git Repository:
cd /path/to/mediawiki/installation/extensions
git clone https://gerrit.wikimedia.org/r/p/mediawiki/extensions/MobileFrontend.git
zusätzlich benötigt man die Extension OpenSearchXML
git clone https://gerrit.wikimedia.org/r/p/mediawiki/extensions/OpenSearchXml.git
Nun können beide Extensions in der LocalSettings.php aktiviert werden:
# Mobile Frontend
require_once("$IP/extensions/MobileFrontend/MobileFrontend.php");
require_once("$IP/extensions/OpenSearchXml/OpenSearchXml.php");
Nun sollte auf den Mobilen Geräten im Footer der Switch zur Mobilen Seite vorhanden sein. Will man das Ganze in einem Desktop Browser Testen, so muss man lediglich ?useformat=mobile der URL anhängen. Zum Beispiel:
Konfiguration
Einrichten der Startseite
Beim ersten Aufruf der Mobilen Startseiteseite, wird man darauf hingewiesen diese zu konfigurieren. Wie das genau geht, kann man hier nachlesen. Ich beschränke mich darauf zu erklären wie man einfach die ganze standard Startseite als Mobile Seite verfügbar macht. Hierfür editiert man die Hauptseite und fügt am Anfang der Seite ein
<div id="mf-home">
ein. Ganz am Ende der Seite muss dann noch ein
</div>
eingefügt werden. Und schon wird der gesamte Inhalt der standard Startseite auch im MobileFrontend angezeigt.
Man kann damit auch nur einzelne Dinge der Startseite verfügbar machen in dem man diese einfach mit der Funktion umschließt.
Automatisch die Mobile Seite aufrufen
Leider scheint es mit der Extension nicht möglich zu sein, automatisch auf die Mobile Seite umzuschalten, siehe auch hier:
Die Wikimedia Foundation nutzt für das Automatische umswitchen der Mobilen Seite einen Varnish Proxy, der die Mobile Database WURFL verwendet, siehe hier:
Noch dazu verwenden sie eigene Subdomains für den Umleitung (de.m.wikipedia.org)
Apache Webserver Konfiguration
Für die Mobile Detection nutze ich die Rewrite Conditions von der folgenden Webseite:
Es gibt zwei Möglichkeiten die Mobile Seite zu nutzen:
- Ohne eigene Mobile Domain, URLs bleiben gleich (wiki.domain.de)
- Mit eigener Mobile Subdomain (zum Beispiel wiki.m.domain.de), dies wäre auch die Art, die Wikipedia nutzt
ohne eigene Mobile Domain
Die folgenden Rewrite Rules sorgen dafür das Ein Automatisches Umleiten auf den Mobile Skin erfolgt, die RewriteCond Regeln sind von der oben genannten Webseite kopiert und können von hier auch immer aktuell kopiert werden. Ich gehe außerdem bei den Rules von einer Short URL Konfiguration des Wikis aus. (Siehe hier). Fügt diese Rewrite Rules einfach dem Wiki Vhost an, oder erstellt eine .htaccess Datei.
# Enables The Vary HTTP Header User-Agent for better Google Crwaling
Header append Vary User-Agent env=!dont-vary
RewriteEngine On
# Normale Desktop Short URL Umleitung
RewriteRule ^/index.php/(.*) /wiki/$1 [QSA,R=permanent]
RewriteRule ^/?wiki(/.*)?$ %{DOCUMENT_ROOT}/index.php
# Sticks the format
RewriteCond %{HTTP_COOKIE} stopMobileRedirect=true
RewriteRule ^/(.*) - [L]
# RewriteCond Regeln von detectmobilebrowsers.com
RewriteCond %{HTTP_USER_AGENT} (android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge\ |maemo|midp|mmp|netfront|opera\ m(ob|in)i|palm(\ os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows\ (ce|phone)|xda|xiino [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a\ wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r\ |s\ )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1\ u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(\ i|ip)|hs\-c|ht(c(\-|\ |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(\ |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(\ |\/)|klon|kpt\ |kwc\-|kyo(c|k)|le(no|xi)|lg(\ g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-|\ |o|v)|zz)|mt(50|p1|v\ )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v\ )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|\ )|webc|whit|wi(g\ |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-) [NC]
RewriteRule ^/(.*) /$1?useformat=mobile [QSA,L]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-f
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-d
RewriteRule ^/?images/thumb/[0-9a-f]/[0-9a-f][0-9a-f]/([^/]+)/([0-9]+)px-.*$ %{DOCUMENT_ROOT}/thumb.php?f=$1&width=$2 [L,QSA,B]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-f
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-d
RewriteRule ^/?images/thumb/archive/[0-9a-f]/[0-9a-f][0-9a-f]/([^/]+)/([0-9]+)px-.*$ %{DOCUMENT_ROOT}/thumb.php?f=$1&width=$2&archived=1 [L,QSA,B]
mit Mobile Domain
Um das Umswitchen auf die Mobile Vserion und zurück via Link im Footer zu ermöglichen muss als erstes folgendes in der LocalSettings.php eingefügt werden. Ich gehe hier von folgendem URL Konstrukt aus:
- http://wiki.laub-home.de --> Default Webrowser Seite
- http://wiki.m.laub-home.de --> Mobile Webbrowser Seite
LocalSettings.php
$wgMobileUrlTemplate='%h0.m.%h1.%h2';
Zusätzlich sollte der bestehende vhost als Mobile vhost kopiert werden, damit beide URLs erreichbar sind.
Ich werde hier nicht weiter darauf eingehen, da meine Lange Recherche nach der besten Methode ergab, das es sinnvoller ist beiden Content unter der selben URL zur Verfügung zu stellen. Mehr Infos dazu sind zum Beispiel in diesem Post zu finden: