MediaWiki - HowTo Mobile Theme von Wikipedia

Aus Laub-Home.de Wiki
Zur Navigation springen Zur Suche springen
Mobile screenshot.png

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:

  1. Ohne eigene Mobile Domain, URLs bleiben gleich (wiki.domain.de)
  2. 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:

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:

Quellen