Wikipedia:Technik/Skin/GUI

Benutzeroberfläche

---

Diese Seite stellt Möglichkeiten vor, sich seine Benutzeroberfläche mit aktiven Bedienelementen (Knöpfchen, Menüpunkte) selbst zu programmieren und zu gestalten.

Aufbau einer Wiki-Seite

Grundsätzlich kann man seine eigenen Schaltflächen überall auf der Standard-Seite zwischen den vorhandenen Bedienelementen einfügen oder auch uninteressante Menüfelder entfernen, mindestens unsichtbar machen.

Eine klassische Wiki-Seite („Desktop“, also stationärer PC) ist aufgeteilt in drei Bereiche:

1. Inhalt: #content
2. Portal-Rahmen:
   • Kopfbereich; meist oben horizontal: #mw-head
   • Panel; meist links vertikal: #mw-panel
3. Fußbereich: #footer

Die Skins sind jedoch frei darin, die Seite optisch anders aufzuteilen und die Elemente den Bereichen zuzuweisen.

Auf einem Mobilgerät kann kein solches Portal angezeigt werden; hier werden die Strukturen völlig anders organisiert und teilweise auf gesonderte Seiten ausgelagert.

Die wesentlichen Klassen (.class) und Identifikatoren (#id) einer Wiki-Seite auf dem Desktop, die mit Schaltflächen in Verbindung stehen, sind:

Selektor		Deutsch	Englisch
p-			portlet
n-			navigation
	#p-personal	Angemeldeter Benutzer	personal toolbar
	#pt-userpage	Benutzer
	#pt-notifications	Echo-Zählerfeld
	#pt-mytalk	Eigene Diskussion
	#pt-preferences	Einstellungen
	#pt-betafeatures	Beta
	#pt-watchlist	Beobachtungsliste
	#pt-mycontris	Eigene Beiträge
	#pt-logout	Abmelden
	#p-cactions	Seitenbezogene Aktionen⁠	content action
	#ca-nstab-main -project, -template	Artikel, Seite etc.
	#ca-talk	Seiten-Diskussion
	#ca-ve-edit	Bearbeiten mit VisualEditor
	#ca-edit #ca-view	Quelltext bearbeiten/ansehen
	#ca-history	Versionsgeschichte
	#ca-move	Verschieben
	#ca-watch #ca-unwatch	Beobachten Nicht beobachten
	#p-search	Suche
	#searchform	Suchformular
	#p-navigation	Navigation
	#n-mainpage-description	Hauptseite
	#n-aboutsite	Über Wikipedia
	#n-topics	Themenportale
	#n-alphindex	Von A bis Z
	#n-randompage	Zufälliger Artikel
	#p-Mitmachen	Mitmachen
	#n-help	Hilfe
	#n-portal	Autorenportal
	#n-recentchanges	Letzte Änderungen
	#n-contact	Kontakt
	#n-sitesupport	Spenden
	#p-coll-print_export	Drucken / Exportieren (#collectionPortletList)
	#coll-create_a_book	Buch erstellen (nur Artikel)
	#coll-download-as-rl	PDF-Version (nur Artikel)
	#t-print	Druckansicht
	#p-tb	Werkzeuge; auch Seitentyp-bezogene Möglichkeiten, etwa auf Benutzerseiten	toolbar
	#t-whatlinkshere	Links auf diese Seite
	#t-recentchangeslinked	Änderungen an verlinkten Seiten
	#t-contributions	Benutzerbeiträge (nur auf Benutzer-bezogenen Seiten)
	#t-upload	Hochladen
	#t-specialpages	Spezialseiten
	#t-permalink	Permanenter Link
	#t-info	Seiteninformationen
	#p-sisterprojects	Schwesterprojekte (z. B.: Wikipedia:Fragen zur Wikipedia)
	#p-lang	Interlanguages	languages
	.interwiki-ar, .interwiki-bar, …	Die einzelnen Sprachlinks haben Klassen, die den jeweiligen Sprachcode enthalten
div#bodyContent u. a.		Artikelansicht / Bearbeitungsfeld (“content”)

Zu einer anderen Liste siehe meta:Help:User style/de #Referenz und deren englischsprachige Version. Diese vereinfachte Darstellung soll nur einen Überblick zur ersten groben Orientierung geben.

Anmerkungen:

^(*) 

Im Vector-Skin wird der Bereich p-cactions je nach der aktuellen Breite des Browserfensters aufgeteilt. Die horizontale Leiste #p-views enthält so viele Tabs wie momentan sichtbar sein können; ein Element bleibt in der dropdown-Liste. Alle anderen Elemente sind als #p-cactions unter Mehr ▼ auszuklappen. Siehe auch unten: Vector-Leiste

Skins

Desktop

Vector-Skin (klassisch [2010, „Legacy“])^(*)

	pt-   Benutzer und benutzerspezifisch
nav	ca- (Seitenbezogene Aktionen)	Suchfeld
Mit	Seitentitel #firstHeading
tb	Artikelansicht / Bearbeitungsfeld div#bodyContent Textarea
IL

Monobook-Skin

pt-   Benutzer und benutzerspezifisch
	ca- (Seitenbezogene Aktionen)
Suche	Seitentitel #firstHeading
nav	Artikelansicht / Bearbeitungsfeld div#bodyContent Textarea
Mit
tb
IL

Die Selektoren galten auch für MySkin (April 2013 abgeschaltet).

Timeless

WikipediA	Suche
Navigation   Wikiwerkzeuge   Seitenwerkzeuge   Weitere Projekte
Seitentitel .mw-first-heading
Artikelansicht / Bearbeitungsfeld div#bodyContent Textarea

Modern-Skin

Seitentitel #firstHeading
pt-   Benutzer und benutzerspezifisch
Suche	ca- (Seitenbezogene Aktionen)
nav	#contentSub
Mit	Artikelansicht / Bearbeitungsfeld div#mw_contentholder Textarea
tb
IL

Kölnisch Blau (cologneblue)

Wikipedia		nav
Suche	Interlanguages
Mit	Seitentitel
Drucken	Artikelansicht / Bearbeitungsfeld div Textarea
ca-
pt-

Mobil

Mobil

.header Suche
.pre-content .heading-holder Seitentitel .subpages		#page-actions #ca-watch #ca-edit
#mw-content-text Artikelansicht / Bearbeitungsfeld Textarea
#page-secondary-actions Diskussion Versionsgeschichte
footer

Vector-Leiste

 Info: 2020 wird zur Ablösung des „klassischen Vector“ von 2010 („Legacy“) ein Nachfolger entwickelt.

Bei Vector ist die horizontale Navigation oben wie folgt gegliedert:

• #left-navigation
  • #p-namespaces .vectorTabs
    • #ca-nstab-main
    • #ca-talk
• #right-navigation
  • #p-views .vectorTabs
    • #ca-view
    • #ca-edit
    • #ca-history
    • #ca-watch (Stern)
    • #ca-move
  • #p-cactions .vectorMenu Ausklappen Mehr ▼
  • #p-search

Mindestens ein Element von #p-views (das auch benutzerdefiniert hinzugefügt sein kann) ist zum Ausklappen in #p-cactions enthalten; auch alle außer #ca-watch aus der horizontalen Leiste #p-views, die dort nicht mehr hinpassen. Die anderen Elemente von #p-views werden rechtsbündig dargestellt.

Gesamtseite

Weitgehend einheitlich für Desktop und Mobil haben Wiki-Seiten folgenden Aufbau:

• <body>
  • Desktop: #content class="mw-body" role="main"
    • #top
    • Mobil: Banner-Bereich
    • Mobil: <form> – Kopfbereich
    • #mw-body
      • Desktop: Banner-Bereich #siteNotice
      • Seitentitel
        • Desktop: #firstHeading
        • Mobil: #section_0
      • #mw-content-text wesentlicher Inhaltsbereich
        • .mw-parser-output – nur wenn aus Wikitext generiert
        • (ggf. eingebettet) Inhaltsverzeichnis
          • Desktop: #toc
          • Mobil: .toc-mobile
        • Desktop: #catlinks – Kategorien
  • Desktop: #mw-navigation
    • #mw-head – Kopfbereich; meist oben horizontal
    • #mw-panel – Sidebar; meist links vertikal
  • Fußbereich
    • Desktop: #footer .mw-footer
    • Mobil: <footer> .mw-footer

Die bisher nur in der Mobildarstellung verwendeten semantischen HTML5-Elemente <header>, <main>, <nav> und <footer> werden ab 2020 zunehmend auch in die Desktop-Skins eingearbeitet. Die Selektoren sollen dabei ungestört weiter funktionieren, sollten jedoch nicht überspezifisch mittels vorangestelltes div sein.

Randbereich

Der „linke Rand“ der Desktop-Oberflächen wird durch MediaWiki:Sidebar konfiguriert.

Auf Endgeräten mit kleinem Display (Mobil) kann er unterschiedlich angeordnet sein.

Siehe dazu auch: Wikipedia:WikiProjekt Benutzerfreundlichkeit/Sidebar.

Inhaltsbereich

Die „Nutzfläche“ innerhalb der Portalseite enthält etwa den Artikelinhalt; auch den Bearbeitungsbereich oder eine Auflistung der Benutzerbeiträge.

Der Selektor ist bei verschiedenen Skins sehr unterschiedlich. Die Eigenschaft mw.util.$content des Objektes mediaWiki (keine Funktion, deshalb keine Klammern) enthält ein jQuery-Objekt, das diesen Inhaltsbereich repräsentiert. Von dort aus sind die weiteren Selektoren weitgehend gleich. $content ist erst dann nutzbar, wenn das Dokument geladen wurde (document ready). Im Übrigen lässt sich eine Tausendstelsekunde sparen, wenn mit .find() Elemente des Inhaltsbereichs in $content gesucht werden und nicht im gesamten document.

Bearbeitungsbereich

Wenn eine Seite zur Bearbeitung geöffnet wird, entstehen weitere Schaltflächen und Werkzeugleisten:

Standard-Bearbeitungswerkzeugleiste (inklusive Extra-Editbuttons, falls aktiviert)

ggf. wikEd-Werkzeugleiste (Anpassung)

Bearbeitungsfeld: Seitentext textarea#wpTextbox1

„Edittools“ (Sonderzeichenleiste)

Auch die Sonderzeichenleiste kann durch benutzerdefinierte Listenelemente und Links ergänzt werden; beispielsweise zum Einfügen von Vorlagen.

HTML-Formular

Der Bearbeitungsbereich ist HTML-technisch Teile eines Formulars <form>. Folgende Identifizierer sind dort vorhanden:

• form#editform
  • textarea#wpTextbox1
  • div.editOptions
    • input#wpSummary
    • div.editCheckboxes
      • input#wpMinoredit
      • input#wpWatchthis
  • div.editButtons
    • input#wpSave
    • input#wpPreview
    • input#wpDiff
  • versteckte Elemente:
    • input#wpEditToken
    • input#baseRevId
    • input#undidRev
    • input#wpStarttime
    • input#wpEdittime
    • input#oldid
    • input#wpSection
    • input#wpAutoSummary

Aktive Bedienelemente verändern

Grundsätzlich benötigt man für jedes Bedienelement

• ein Link href zur Angabe der Aktion
• einen Titel, also Linktext

Außerdem können Stileigenschaften definiert werden (CSS).

Vor allen Manipulationen an der Portalseite muss sichergestellt sein, dass die Seite bereits aufgebaut wurde. Wenn man interaktiv tätig wird, kann man sie sehen und das ist immer der Fall. Anders verhält es sich, wenn man Skripte schreibt, die beim Laden der Seite automatisch tätig werden; vor allem wenn aus common.js heraus Funktionen aufgerufen werden, existieren die Elemente wahrscheinlich noch gar nicht und das Skript könnte abstürzen, zumindest nicht wirksam werden. Besser ist es, eine Funktion MeineFunktion erstmal nur zu definieren, aber noch nicht auszuführen. Dies erfolgt erst anschließend im richtigen Moment durch den jQuery-Aufruf

    jQuery(document).ready(MeineFunktion);

und in MeineFunktion stehen alle wirksamen Aktivitäten.

Grundsätzlich ist es eine gute Idee, zunächst den Aufbau der für Anwender sichtbaren Seitenelemente abzuwarten und erst danach, wenn der Mensch eine halbwegs sortierte Seite präsentiert bekam, diskret im Hintergrund Kleinigkeiten zu verbessern, unsichtbare Details an unsichtbaren Untermenüs zu justieren. Besonderes Know-How ist allerdings erforderlich, wenn man das Layout der Skin-Seite völlig umschmeißen möchte, weil beim Betrachten zunächst das Standard-Layout angezeigt wird, dann ein Weilchen blockiert ist und dann auf das umgemodelte Layout springt.

Ausblenden mit CSS

Wer der Meinung ist, nun genug Arbeitskraft und Nerven beigetragen zu haben, und nicht auch noch Schecks hinterherschmeißen möchte, kann in seine common.css einfügen:

#n-sitesupport {
   display: none;
}

blendet die „Spenden“ aus.

Mehr Anregungen.

addPortletLink()

Den komfortabelsten Zugang zur Gestaltung eigener Bedienelemente bietet diese Standardfunktion, die ein neues Bedienelement hinzufügt:

mw.util.addPortletLink()

addPortletLink(Container, Aktion, Titel, ID, Tooltip, Hotkey, Vor)
Container portlet	Elementgruppe, zu der hinzugefügt werden soll. p-cactions oder p-tb oder andere (ohne # des CSS-Selektors)
Aktion href	Meist URL; beginnend also etwa mit http:// oder auch nur beginnend mit / der relative Pfad auf dem Server oder aber mit javascript:
Titel text	Linktitel
ID id	Eindeutiger Bezeichner des neuen Elements auf der Seite. Sollte mit dem passenden "ca-", "pt-", "n-", "t-" beginnen, um die Übersicht zu behalten. Darf keine Leerzeichen enthalten.
Tooltip tooltip	Kurzer Hilfe-Text; wird angezeigt, wenn mit der Maus über dem Element schwebend.
Hotkey accesskey	Möglichst eindeutiger einzelner Buchstabe (oder anderes Zeichen) zur Bildung einer Tastenkombination. "g" erlaubt etwa Alt+g – Großbuchstaben weniger sinnvoll. Konflikte mit Standard-Tastaturkombinationen beachten!
Vor nextnode	Bezeichner eines anderen Elements im selben Container, vor dem das neue Element eingefügt werden soll. Kann auch ein jQuery-Objekt sein. Anders als bei den anderen Bezeichnern dieser Parameterliste muss hier ein "#" dem Bezeichner vorangestellt werden, wenn kein jQuery-Objekt übergeben wird.
Alle Parameter sind vom Typ string (Zeichenkette). Die ersten 3 Parameter sind Pflichtparameter; es empfiehlt sich, möglichst alle anzugeben.
Rückgabe	DOM node des neuen Elements LI Element, bei veralteten Skins ein A, oder null.

Die Funktion prüft nicht von sich aus, ob die Seite bereits aufgebaut wurde. Die Benutzung muss also in einen Aufruf von ready() eingebettet werden. Außerdem sollte sichergestellt werden, dass die Komponente mw.util bereit ist; Näheres dazu.

Veraltet ist der Aufruf von addPortletLink() ohne vorangestelltes mw.util. Dies stammt aus wikibits und wird seit April 2017 nicht mehr unterstützt.

Beispiel für einzelnen Aufruf:

mw.util.addPortletLink(
	'p-tb',
	mw.util.getUrl( 'Spezial:Präfixindex' ),
	'Präfix-Suche',
	't-search-prefix',
	'Alle Seiten (mit Präfix)',
	'g',
	null
);

Anmerkungen:

• mw.util.getUrl() stellt sicher, dass die URL nicht nur bei http, sondern auch bei https und verschiedenen Server-Konfigurationen richtig ist.
• Gebildet wird dabei nur ein relativer Pfad auf demselben Server, der mit / beginnt.
• null ist eine weitere Möglichkeit, um ausdrücklich zu signalisieren, dass man keine Zeichenkette anzugeben wünscht.

Im Anschluss wird intern updateTooltipAccessKeys() automatisch aufgerufen.

Beispiel für eine komplexe Einbindung mit Abwarten der Vorbedingungen:

jQuery( document ).ready( function () {
	mw.loader.using( [ 'mediawiki.util' ], function () {
		mw.util.addPortletLink(
			'p-tb',
			mw.util.getUrl( 'Spezial:Präfixindex' ),
			'Präfix-Suche',
			't-search-prefix',
			'Alle Seiten (mit Präfix)',
			'q',
			null
		);
	} ); // .using()
} ); // .ready()

Testen

Bei der Bearbeitung des Skriptes werden die Definitionen bereits wirksam, wenn man „Vorschau“ oder „Änderungen“ anklickt. Damit lassen sie sich an den auf der Portalumgebung sichtbaren Elementen testen, ohne die Versionsgeschichte belasten zu müssen. →JS

WikiEditor

WikiEditor, die neuere Bearbeiten-Werkzeugleiste, besitzt eine API zum Einfügen und Entfernen von Elementen. Eine knappe Dokumentation auf Englisch ist vorhanden unter mw:Extension:WikiEditor/Toolbar customization. Modul: wikiEditor-ui-toolbar

HTML, DOM und jQuery

Wenn die in HTML geschriebene Seite dargestellt ist, wurde auch ein Document Object Model (DOM) aufgebaut. Es kann in seiner Struktur beliebig manipuliert werden; addPortletLink ist ein Beispiel dafür. Eine nachträgliche Veränderung am DOM zieht eine Änderung der dargestellten Seite nach sich.

Weiterführend:

• SELFHTML (deutschsprachig)
  • document
  • node

jQuery

Das Arbeiten kann unterstützt werden durch die Skript-Bibliothek jQuery. Sie enthält viele Hilfsfunktionen; darunter auch solche, die Veränderungen des DOM erleichtern. Die dazu erforderlichen Basis-Funktionen sind im Allgemeinen von vornherein in WMF-Projekten geladen; nur weitergehende Module müssten durch Benutzer abgefordert werden.

Einzelheiten unter JS/jQuery.

document ready

Eine der meistbenutzten Funktionen ist

    jQuery(document).ready( MeineFunktion );

oder kurz, aber leicht zu übersehen

    $( MeineFunktion );

Sie bewirkt, dass MeineFunktion erst dann ausgeführt wird, wenn das document grundsätzlich geladen wurde und die Elemente der Basis-Seite bekannt sind. (Siehe dazu Warten, bis die Seite geladen ist)

Bookmarklet

Ein alternativer und für manche Benutzer vielleicht einfacherer Weg ist die Verwendung von Bookmarklets. Hier wird einer Bookmark („Favoriten“) ein JavaScript-Code zugewiesen, so dass die Verwaltung und Darstellung der Schaltflächen vom Browser übernommen wird. Siehe hierzu Technik/Browser/Bookmarklet.

Weitere Informationen

• CSS: Seinen eigenen Stil finden
• Hilfe:Symbolleisten
• Tutorial – Einstieg in die Programmierung der Oberflächengestaltung
• mw:Manual:Gallery of user styles – Komplexe benutzerdefinierte Skins (englisch)
• en:Wikipedia:Catalogue of CSS classes in der englischsprachigen Wikipedia