Anleitung für die PVE-Musterwebsite
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Anleitung für die PVE- Musterwebsite © 2020 Deloitte Development LLC. All rights reserved.
Das vorliegende Dokument wurde im Rahmen der Gründungsinitiative für die Primärversorgung durch die Deloitte Consulting GmbH erstellt. Die Gründungsinitiative für die Primärversorgung wird vom Bundesministerium für Soziales, Gesundheit, Pflege und Konsumentenschutz gemeinsam mit den Bundesländern, der Sozialversicherung und der Europäischen Kommission durchgeführt.
Inhaltsverzeichnis
1. Ihre eigene PVE Website ....................................................................................................... 8
1.1. Was benötige ich für eine eigene Website?........................................................ 9
1.2. Was wird nicht durch die Beispielseite abgedeckt ............................................ 9
1.3. Webspace und Domain für Ihre Website anmelden ....................................... 10
2. Ein Content Management system (CMS) aufsetzen ........................................................ 12
2.1. Was ist WordPress? ............................................................................................. 12
2.2. Schritt-für-Schritt Installation Ihrer Website .................................................... 13
2.3. Der erste Login .................................................................................................... 13
2.4. Wie lade ich die Beispielseite in WordPress hoch? ......................................... 16
3. Personalisierung der Website ............................................................................................ 23
3.1. Was kann die Website? ....................................................................................... 23
3.1.1. Der Visuelle Builder ...................................................................................... 23
3.1.2. Aufbau der Website ...................................................................................... 25
3.1.3. Informationen in Form von Text / Bilder verwalten ................................. 28
3.1.4. Änderung des Titels der Website ................................................................ 29
3.1.5. Logo ändern .................................................................................................. 31
3.1.6. Neue Unterseiten hinzufügen ..................................................................... 33
3.1.7. Unterseiten in die Navigationsleiste hinzufügen oder löschen .............. 34
3.1.8. Blog hinzufügen ............................................................................................ 36
3.1.9. Kontaktformular ........................................................................................... 39
3.1.10. Cookie-Banner ändern ............................................................................. 40
3.1.11. Google-Maps einbinden ........................................................................... 42
3.1.12 Individuelle Farbgestaltung und Typographie .......................................... 45
3.2 Wie Sie Ihre Website barrierefrei gestalten .................................................. 46
4 Verwaltung und betreiben der Website................................................................................. 47
4.1 Wie Sie Ihre Website veröffentlichen ................................................................ 47
4.2 Userrollen & neue Benutzer............................................................................... 47
4.3 Sicherheitsaspekte .............................................................................................. 49
Abbildungsverzeichnis
Abbildung 1 Beispielwebsite für Primärversorgungseinheiten ..................................... 8
Abbildung 2: Willkommens-Bildschirm........................................................................... 14
Abbildung 3: Login-Maske von WordPress .................................................................... 15
Abbildung 4: WordPress Dashboard............................................................................... 16
Abbildung 5 Installieren von plugins .............................................................................. 17
Abbildung 6: Installation des All-in-One WP Migration plugin ..................................... 18
Abbildung 7: Aktivieren eines Plugins ............................................................................. 18
Abbildung 8: Importieren eines Backups ....................................................................... 19
Abbildung 9: Drag & Drop Funktionalität des Plugins .................................................. 20
Abbildung 10 Fertigstellung des Imports ....................................................................... 20
Abbildung 11: Beenden des Importierungsvorgangs ................................................... 21
Abbildung 12: Anmeldemaske WOrdpress nach dem IMport ..................................... 22
Abbildung 13: Visuellen Builder aktivieren .................................................................... 24
Abbildung 14 Visuellen Builder über Seiten aufrufen .................................................. 24
Abbildung 15: Übersicht der Sektionen, Zeilen, Module .............................................. 26
Abbildung 16: Einfügen eines Moduls ............................................................................ 26
Abbildung 17: Übersicht Modulauswahl ........................................................................ 27
Abbildung 18: Aufruf des Bearbeitungsmenüs innerhalb eines Abschnittes ............ 28
Abbildung 19: Bearbeitungsmenü anhand eines Beispiels ......................................... 29
Abbildung 20: Theme Customizer aufrufen ................................................................... 30
5
Abbildung 21 Allgemeine Einstellungen der Website ................................................... 31
Abbildung 22 Einstellungen für die Website-Identität .................................................. 31
Abbildung 23 : Titel und Bild der Website ändern ........................................................ 31
Abbildung 24: Position des Logos ................................................................................... 31
Abbildung 25: Theme Optionen aufrufen ...................................................................... 32
Abbildung 26: Logo hochladen ........................................................................................ 32
Abbildung 27: Erstellen einer Unterseite ....................................................................... 33
Abbildung 28: Auswahl des Divi Builder ......................................................................... 34
Abbildung 29: Navigationsbar ......................................................................................... 34
Abbildung 30: Einstellungen für das Navigationsmenü ............................................... 35
Abbildung 31: Auswahl des Hauptmenüs ...................................................................... 35
Abbildung 32: Hinzufügen oder Löschen einer Unterseiten ....................................... 36
Abbildung 33: Erstellen eines Blogs ................................................................................ 37
Abbildung 34: Standard Editor auswählen..................................................................... 37
Abbildung 35: Titel, Text und Sonstige Optionen eingeben ......................................... 38
Abbildung 36: Veröffentlichen eines Blogs .................................................................... 38
Abbildung 37: Kontaktformular Modul ........................................................................... 39
Abbildung 38: E-Mail Adresse im Kontaktformular anpassen ..................................... 40
Abbildung 39: Theme Customizer aufrufen ................................................................... 41
Abbildung 40: Divi Cookie Consent - Menü .................................................................... 41
6
Abbildung 41: Cookie Text Bearbeiten ........................................................................... 42
Abbildung 42: Adresseingabe in Google Maps .............................................................. 43
Abbildung 43: Karte für die Website vorbereiten .......................................................... 43
Abbildung 44: Code Modul hinzüfugen .......................................................................... 44
Abbildung 45: Google Maps HTML Code einfügen ....................................................... 44
Abbildung 46: Theme Customizer aufrufen ................................................................... 45
Abbildung 47: Allgemeine Einstellungen der Website .................................................. 46
Abbildung 48: Einstellungen für die Typrographie der Website.................................. 46
Abbildung 49: Schrift und Farbeinstellugen ................................................................... 46
Abbildung 50: Benutzermenü .......................................................................................... 48
Abbildung 51: Benutzer Anlegen und Verwalten .......................................................... 48
Abbildung 52: Benutzerrolle ändern............................................................................... 49
7
1. IHRE EIGENE PVE WEBSITE
In Zeiten der Digitalisierung zählt vor allem ein professioneller Webauftritt zum
Standardrepertoire eines jeden Produkts oder einer Dienstleistung. Speziell die
jüngere Generation holt Informationen fast ausschließlich online auf
verschiedensten Geräten wie Notebooks oder Smartphones ein. Deswegen ist es
auch für den medizinischen Sektor erforderlich, auf die geänderten Umstände
einzugehen. Die folgende Anleitung soll dabei helfen,
Primärversorgungseinheiten mit Hilfe einer Beispielseite („Beispielwebsite“)
einen Webauftritt zu ermöglichen. Die vorbereitete Beispielwebsite ermöglicht es
PatientInnen, alle relevanten Informationen auf der Website möglichst schnell
und einfach zu finden, unabhängig vom verwendeten Gerät.
ABBILDUNG 1 BEISPIELWEBSITE FÜR PRIMÄRVERSORGUNGSEINHEITEN
8
1.1. Was benötige ich für eine eigene Website?
Um im Internet präsent zu sein, ist es wichtig eine passende Domain zu sichern, unter
welcher Ihre Website erreichbar ist. Im Normalfall wird als Domain der
Unternehmensname eingesetzt, wie beispielsweise www.akhwien.at. Hierfür ist es
notwendig zu kontrollieren, ob die gewünschte Domain noch verfügbar ist. Die
notwendigen Schritte und Domain-Anbieter sind im nächsten Unterkapitel zu finden.
Damit eine Website im Internet verfügbar ist, benötigt es zusätzlich einen
Speicherplatz, der über das Internet erreichbar ist; auch genannt Webspace. Den
Wartungsaufwand kann man verringern, indem man Domain und Speicherplatz
gemeinsam bei einem Anbieter kauft. Die Wartung wird von einem sogenannten
Webhoster übernommen.
Es ist außerdem wichtig, dass Sie sich Gedanken zum inhaltlichen Aufbau der Seite
und des Designs machen. Die Beispielwebsite stellt ein Muster dar, welche jedoch
inhaltlich und optisch an die jeweiligen Gegebenheiten ihrer
Primärversorgungseinheit angepasst werden muss. Im Anhang finden Sie eine
Checkliste mit allen wichtigen Punkten.
1.2. Was wird nicht durch die Beispielseite abgedeckt
Die Beispielwebsite hilft Primärversorgungseinheiten, ein Grundgerüst für eine
Website aufzusetzen. Die finalen Inhalte müssen an das Angebot und die
Anforderung jeder Primärversorgungseinheiten separat angepasst werden.
Außerdem sind die Bildmaterialien nur Beispielbilder, die nicht für den Einsatz auf
der finalen Website gedacht sind. Um alle rechtlichen Anforderungen wie
9
Impressum, Datenschutz und Cookie-Richtlinien zu erfüllen, ist es nötig eine
rechtskundige Person zur Hilfe zu ziehen bzw. sich an eine Auskunftsstelle wie die
WKÖ zu wenden.
1.3. Webspace und Domain für Ihre Website anmelden
Wie bereits erwähnt, ist es eine Notwendigkeit für die Website eine Domain und ein
Webspace zu kaufen. Eine Domain wird im Normalfall für ein Jahr gekauft und
verrechnet. Die Kosten für die Domain sind abhängig von der gewählten
Domainendung (z.B.: .at oder .com). Das zusätzlich benötigte Webhosting gibt es in
unterschiedlichen Paketen und erfolgt per monatlicher Abrechnung. Eine
beispielhafte Aufzählung von Anbietern, die die folgenden Kriterien erfüllen, finden
Sie untenstehend:
• Serverstandort Österreich
• Möglichkeit Webspace und Domain gemeinsam zu kaufen
• Server und Webspace erfüllt technische Vorrausetzungen für ein CMS
• Installation von einem CMS ohne technische Kenntnisse möglich
• Technischer Support ist im Preis inkludiert
• Verschlüsselung der Website (https) inkludiert
• Möglichkeit Emailadressen für die gekaufte Domain anzulegen
10Webhosting Paket-
Anbieter name Website
https://www.domaintechnik.at/wordpres
domaintechnik.at Blog Host ENTRY
s-blog-hosting.html
easyname.at Medium https://www.easyname.at/ de/hosting
Domainserver
Basic https://www.world4you.com/de/webhos
world4you.at
ting.html
Die Anbieter sind eine beispielhafte Aufzählung und diese Auswahl impliziert nicht,
dass nicht-genannte Betreiber diesen Anforderungen nicht entsprechen. Daher
bitten wir Sie selber Zeit in die Recherche zu investieren.
Bei den zwei erstgenannten muss in einem ersten Schritt ein Account angelegt und
eine freie Domain bestellt werden. Erst im zweiten Schritt wird ein Webhosting mit
demselben Account dazu gebucht. Bei world4you erfolgen beide Schritte zusammen.
Alle drei Anbieter bieten im günstigsten Paket alle technischen Voraussetzungen, um
eine Website zu betreiben. Die größeren Pakete werden fällig, sobald mehrere
Webseiten betrieben werden sollen, mehr Speicherplatz nötig wird oder ein größerer
Mailserver mit mehr Speicherplatz von Nöten ist. Ein Upgrade ist grundsätzlich
jederzeit möglich. Die Bestellprozesse sind selbsterklärend und innerhalb weniger
Minuten sollten Sie Zugriff auf ihr Konto inklusive Domain und Webspace haben. Mit
dem Konto können sie das Setup ihrer Website starten.
Die technischen Kosten für das Betreiben einer Website wird im Normalfall 100€ pro
Jahr nicht übersteigen.
112. EIN CONTENT MANAGEMENT SYSTEM (CMS)
AUFSETZEN
2.1. Was ist WordPress?
Die Beispielseite für ihre Primärversorgungseinheit wurde mit WordPress erstellt.
WordPress ist eine Software, mit welcher eine Website erstellt und verwaltet werden
kann. Das Besondere daran ist, dass dabei eine innovative Oberfläche zur Verfügung
steht mit der eine Website gesteuert werden kann ohne das dabei besondere
technische Kenntnisse erforderlich sind. WordPress kann dementsprechend ganz
bequem mit dem Browser bedient werden. Außerdem ist es egal, welches
Betriebssystem Sie verwenden. Alles was Sie benötigen, ist ein Speicherplatz im
Internet, eine Domain und einen PC oder Laptop mit einem Browser.
Falls bereits ein Webhoster vorhanden ist, kann folgender Text kopiert und an den
Webhoster geschickt werden, um eine Bestätigung über die Kompatibilität des
Webspace einzuholen:
Ich bin interessiert daran eine Website mit WordPress aufzusetzen und würde
gerne wissen ob Sie folgende Anforderungen erfüllen:
- PHP Version 7.3 oder höher
- MySQL Datenbank Version 5.6 oder höher
- Nginx oder Apache mit mod_rewrite Modul
- HTTPS Support
Vielen Dank!
122.2. Schritt-für-Schritt Installation Ihrer Website
Nach der Bestellung einer Domain und eines Webspaces, werden vom Anbieter die
Zugangsdaten für ein Control Panel bzw. Administratorenseite zugeschickt. Über
solch einen Bereich ist bei einem Webhoster eine Installation von WordPress als CMS
möglich. Die aufgelisteten Anbieter ermöglichen es, WordPress mit einem eigenen
„Installer“ zu installieren ohne, dass der VerwenderIn technische Kenntnisse
benötigt. Eine detaillierte Schritt für Schritt Anleitung der jeweiligen – beispielhaft
angeführten – Anbieter ist hier zu finden:
• Domaintechnik:
https://www.domaintechnik.at/wordpress-installieren.html
• Easyname:
https://www.easyname.at/de/support/hosting/191-wie-installiere-ich-
wordpress
• World4you:
https://www.world4you.com/faq/de/easy-install.html#article-was-genau-
macht-easyinstall
Sollte ein alternativer Webhoster ausgewählt werden wird empfohlen, nach einer
Anleitung zu suchen oder den technischen Support (wenn inkludiert) um die
Installation zu bitten.
2.3. Der erste Login
Nach der Installation von WordPress bestätigt ihnen ihr Webhoster innerhalb von
wenigen Minuten die Installation. Sie können nun ihre Seite unter ihrer Domain
aufrufen und bekommen als erstes das Setup angezeigt, in dem sie ihre
Zugangsdaten anlegen und Grundeinstellungen für die Website vornehmen können
13(siehe Abbildung 2: Willkommens-Bildschirm). Der erste Zugang ist nur für sie
gedacht und sollte auch nicht mit Mitarbeitern geteilt werden. Die Erstellung von
neuen Benutzern für WordPress wird in Kapitel 4.2 beschrieben. Mit der Installation
von WordPress und der entwickelten Beispielseite ist die Website bereits
veröffentlicht (online), da für die Bearbeitung die Seite im Internet verfügbar sein
muss. Jedoch wird – solange keine Person die Internetadresse kennt – auch keine
Person die Seite aufrufen. Es gibt Möglichkeiten in der Bearbeitungsphase den
Zugriff mit einem Passwortschutz einzuschränken. Dafür müsste zum Beispiel
folgendes Plug-In installiert werden https://wordpress.org/plugins/password-
protected/. Sobald die Seite fertiggestellt ist, kann das Plug-In wieder entfernt und
die Internetadresse frei kommuniziert werden.
Userrollen & neue Benutzererklärt.
ABBILDUNG 2: WILLKOMMENS-BILDSCHIRM
14Um sich das erste Mal einzuloggen, rufe sie www.ihredomain.at/wp-admin auf und
geben die von ihnen definierten Zugangsdaten ein. Sie sollten folgende Login-maske
bekommen.
ABBILDUNG 3: LOGIN-MASKE VON WORDPRESS
Wenn sie die korrekten Login-Daten angegeben haben, sehen sie nach dem Login
das Dashboard von WordPress mit einem Menü auf der linken Seite (siehe Abbildung
4: WordPress Dashboard).
15ABBILDUNG 4: WORDPRESS DASHBOARD
2.4. Wie lade ich die Beispielseite in WordPress hoch?
Die bereitgestellte Beispielseite dient dazu, dass eine Website möglichst einfach und
ohne technischem Wissen aufgesetzt werden kann. Sie bietet ein voreingestelltes
Design und Beispielinhalte, die Ihnen helfen sollen, die Seite an ihre Bedürfnisse und
Wünsche anzupassen. Nach dem korrekten Einloggen muss das dafür notwendige
Plug-In installiert werden, das die Beispielseite laden kann. Hierfür muss in der linken
Menüleiste auf Plug-Ins und dann auf installieren geklickt werden (siehe Abbildung
5).
16ABBILDUNG 5 INSTALLIEREN VON PLUGINS
Anschließend erscheint ein Bildschirm mit einer Suchleiste in der rechten oberen
Ecke (siehe Abbildung 6). Im Textfeld der Suchmaske muss nach „All-in-One WP
Migration“ gesucht werden. Im Suchergebnis erscheinen die Plug-Ins und über den
„Jetzt installieren“- Button kann das benötigte Plug-In installiert werden.
17ABBILDUNG 6: INSTALLATION DES ALL-IN-ONE WP MIGRATION PLUGIN
Im nächsten Schritt muss das Plug-In aktiviert werden (siehe Abbildung 7).
ABBILDUNG 7: AKTIVIEREN EINES PLUGINS
18Wählen Sie nun das Menü des Plug-Ins in der linken Leiste auswählen und wählen
sie die „Importieren“ – Option aus.
ABBILDUNG 8: IMPORTIEREN EINES BACKUPS
19Nun können Sie die Datei der Beispielseite per Drag & Drop in den markierten
Bereich ziehen, um sie zu laden (siehe Abbildung 9).
ABBILDUNG 9: DRAG & DROP FUNKTIONALITÄT DES PLUGINS
Nach Abschluss des Imports kommt folgendes Dialogfenster (siehe Abbildung 10).
Klicken Sie auf „Fortfahren“.
ABBILDUNG 10 FERTIGSTELLUNG DES IMPORTS
Der Import ist nun vollständig abgeschlossen. Klicken sie auf „Beenden“.
20ABBILDUNG 11: BEENDEN DES IMPORTIERUNGSVORGANGS
Mit dem Import wird die Beispielseite eingespielt und alle Einstellungen
überschrieben. Wenn WordPress erst installiert wurde, kann der Schritt bedenkenlos
durchgeführt werden. Sollte aber in WordPress bereits eine Seite aufgesetzt sein
(z.B., wenn sie in der Vergangenheit bereits eine WordPress Seite hatten), sollte der
Import der Beispielseite nur durchgeführt werden, wenn die derzeitige Seite unter
keinen Umständen noch gebraucht wird. Sie kann ohne viel Aufwand nicht mehr
wiederhergestellt werden.
Nach dem erfolgreichen Import wurde auch der Benutzername und das Passwort
überschrieben. Mit folgenden Zugangsdaten können sie sich erneut anmelden unter
www.ihredomain.at/wp-admin:
Benutzername: PVE-Admin
21Passwort: Dasistmeinpasswort
ABBILDUNG 12: ANMELDEMASKE WORDPRESS NACH DEM IMPORT
Benutzernamen und das Passwort müssen nach dem ersten Login sofort geändert
werden. Die Anleitung hierfür befindet sich in Kapitel 4.2. Mit der Installation von
WordPress und der entwickelten Beispielseite ist die Website bereits veröffentlicht
(online), da für die Bearbeitung die Seite im Internet verfügbar sein muss. Jedoch
wird – solange keine Person die Internetadresse kennt – auch keine Person die Seite
aufrufen. Es gibt Möglichkeiten in der Bearbeitungsphase den Zugriff mit einem
Passwortschutz einzuschränken. Dafür müsste zum Beispiel folgendes Plug-In
installiert werden https://wordpress.org/plugins/password-protected/. Sobald die
Seite fertiggestellt ist, kann das Plug-In wieder entfernt und die Internetadresse frei
kommuniziert werden.
Userrollen & neue Benutzer. Wenn sie www.ihredomain.at aufrufen, sehen sie
bereits die Beispielseite.
223. PERSONALISIERUNG DER WEBSITE
3.1. Was kann die Website?
Die Beispielwebsite bietet folgende Funktionen:
• Eine Startseite, auf welcher alle relevanten Informationen dargestellt
werden können
• Übersicht von Leistungen und Angeboten
• Teamseite mit Vorstellung des gesamten Teams
• Eine Kontaktseite mit Anschrift, Ordinationszeiten, Telefonnummer und
Kontaktformular sowie einer Google Maps Ansicht
• Eine Blogfunktion für die neuesten Beiträge
Das Website-Template muss an die eigenen Bedürfnisse angepasst werden. Dies
erfolgt mit dem im Template integrierten Visuellen Builders.
3.1.1. Der Visuelle Builder
Die Beispielwebsite bietet dank des Visuellen Builders zahlreiche Funktionen, welche
das Anpassen der einzelnen Seiten erleichtert. Der Visuelle Builder ermöglicht es,
mithilfe von „Drag & Drop“ schnell und einfach Inhalte auf der Website zu verwalten.
Wenn Inhalte hinzufügt oder Designeinstellungen angepasst werden, werden diese
Änderungen für den Bearbeiter sofort sichtbar. Durch das Klicken auf „Visuellen
Builder aktivieren“ in der schwarzen Leiste oben (siehe Abbildung 13: Visuellen
Builder aktivieren) kann einfach mit der Bearbeitung begonnen werden. Der Visuelle
Builder kann alternativ auch über das Menü in der Auflistung der einzelnen Seiten
aufgerufen werden (siehe Abbildung 14 Visuellen Builder über Seiten aufrufen).
23ABBILDUNG 13: VISUELLEN BUILDER AKTIVIEREN
ABBILDUNG 14 VISUELLEN BUILDER ÜBER SEITEN AUFRUFEN
Zusätzlich zu dieser Anleitung findet sich eine detaillierte Übersicht der einzelnen
Funktionen unter folgendem Link (in Englisch):
https://www.elegantthemes.com/documentation/divi/basics/.
243.1.2. Aufbau der Website
Der Builder verwendet drei Hauptbausteine: Abschnitte (Sektionen), Zeilen und
Module. Durch die gleichzeitige Verwendung dieser Bausteine können eine Vielzahl
von Seitenlayouts erstellt werden. Sektionen sind die größten Bausteine. Innerhalb
von Sektionen können Gruppen von Zeilen erstellt werden. Die Kernfunktionen der
Website werden durch die einzelnen Module eingefügt, welche innerhalb der Zeilen
hinzuzufügen sind.
Sektionen
Die grundlegendsten und größten Bausteine, die beim Entwurf von Layouts
verwendet werden, sind Sektionen. Diese werden verwendet, um große Gruppen
von Inhalten zu erstellen. Es gibt drei Arten von Sektionen:
• Regulär: Diese Abschnitte bestehen aus Spaltenreihen mit fixer Größe
• Volle Breite: Diese Abschnitte bestehen aus Spaltenreihen, welche über die
gesamte Breite des Bildschirms reichen.
• Spezialgebiet: Diese Abschnitte ermöglichen fortgeschrittene Layouts der
Seitenleisten. Von dieser Option ist abzuraten, da diese in ihrer Verwendung
sehr kompliziert sind.
Zeilen
Die Zeilen befinden sich innerhalb von Sektionen. Es können beliebig viele Zeilen
innerhalb von Sektionen platziert werden. Es gibt viele verschiedene Spaltentypen,
aus denen gewählt werden kann. Sobald eine Spaltenstruktur für die Zeile definiert
wurde, kann man Module in einer gewünschten Spalte platzieren. Die Anzahl der
25Module, die innerhalb einer Spalte platzieren können, ist nicht begrenzt.
Sektion Zeile (mit 3 Spalten) Modul
ABBILDUNG 15: ÜBERSICHT DER SEKTIONEN, ZEILEN, MODULE
Module
Module sind die Inhaltselemente der Seite. Hier stehen über 40 verschiedene
Elemente zur Auswahl, mit denen die Website aufgebaut werden kann. Es können
grundlegende Module wie Text, Bilder und Buttons oder fortgeschrittene Module wie
Schieberegler und Portfoliogalerien hinzufügt werden.
Um ein Modul hinzuzufügen, muss man auf die graue (+) Schaltfläche klicken (siehe
Abbildung 16: Einfügen eines Moduls), welche innerhalb einer leeren Zeile
vorhanden ist. Nachdem auf die Schaltfläche geklickt wurde, wird eine Liste von
Modulen vorgeschlagen. (siehe Abbildung 17: Übersicht Modulauswahl)
ABBILDUNG 16: EINFÜGEN EINES MODULS
26Wurde die Sektion samt Zeilenanzahl definiert, kann nun aus mehreren Modulen
gewählt werden.
ABBILDUNG 17: ÜBERSICHT MODULAUSWAHL
273.1.3. Informationen in Form von Text / Bilder verwalten
Beim Klicken auf ein bereits vorhandenes Element, beispielsweise auf den Text im
Bild, erscheint ein kleines Kontextmenü.
ABBILDUNG 18: AUFRUF DES BEARBEITUNGSMENÜS INNERHALB EINES ABSCHNITTES
Die angezeigten Icons oben in der linken Ecke haben folgende Funktionen:
erlaubt es das Textelement auf der Website in der Position zu verschieben.
ruft das Bearbeitungsmenü auf (nächstes Bild).
dupliziert das ausgewählte Element.
speichert das aktuelle Element in einer Bibliothek, so dass das Element zu auf
einer anderen Seite ebenfalls eingefügt werden kann.
löscht das ausgewählte Element.
schließt das Menü.
gibt einer Übersicht der Funktionen in Textform.
28Das zweite Icon im Bearbeitungsmenü ( ) ist vermutlich das am meisten
verwendete. Hier lassen sich die Inhalte nach Belieben anpassen. Bei Aufruf
erscheint ein Textfeld, in dem sie Texte anpassen können (siehe Abbildung 19).
ABBILDUNG 19: BEARBEITUNGSMENÜ ANHAND EINES BEISPIELS
3.1.4. Änderung des Titels der Website
Der Titel der Website ist im Tab des jeweiligen Browsers zu sehen und wird unter
anderem auch in Google angezeigt. Um ihn zu ändern, muss der Theme Customizer
ausgewählt werden (siehe Abbildung 20).
29ABBILDUNG 20: THEME CUSTOMIZER AUFRUFEN
Anschließend sind unter „Allgemeine Einstellungen“ > „Website Identität“ die
Einstellungen zum Titel zu finden. Hier kann neben dem Text auch ein Icon für die
Website hochgeladen werden. Werden Änderungen vorgenommen, so wird der
„Veröffentlichen“ Button aktiv. Dieser speichert die Änderungen und macht diese
wirksam. Siehe Abbildungen 21 bis 23.
30ABBILDUNG 23 : TITEL UND BILD DER
ABBILDUNG 21 ALLGEMEINE ABBILDUNG 22 EINSTELLUNGEN FÜR
WEBSITE ÄNDERN
EINSTELLUNGEN DER WEBSITE DIE WEBSITE-IDENTITÄT
3.1.5. Logo ändern
Das Logo ihrer Primärversorgungseinheit wird auf jeder Seite innerhalb des Headers
platziert (siehe Abbildung 24).
ABBILDUNG 24: POSITION DES LOGOS
31Sie können Ihr eigenes Logobild auf der Seite „Divi Theme Options“ in Ihrem
WordPress Dashboard definieren. Um die Divi-Theme-Optionen zu finden, klicken
Sie auf den Link „Divi“ > „Theme-Optionen“ in Ihrem WordPress-Dashboard (siehe
Abbildung 25).
ABBILDUNG 25: THEME OPTIONEN AUFRUFEN
Suchen Sie in den Themenoptionen unter der Registerkarte „Allgemeines“ > „Logo“.
Sie können die Schaltfläche „Bild hochladen“ unter dem Feld verwenden, um Ihr
Logobild hochzuladen. Die empfohlene Größe liegt hierbei bei 93x43 Pixel. Sollte das
Bild diese Größe überschreiten, wird es automatisch angepasst. Zwecks
Kompatibilität sollte das Logo zudem als .png–Datei hochgeladen werden. Nach dem
Hochladen kopieren Sie die URL zu der Datei in das Feld und klicken Sie auf
„Speichern“, um Ihre Einstellungen zu speichern.
ABBILDUNG 26: LOGO HOCHLADEN
323.1.6. Neue Unterseiten hinzufügen
Neue Unterseiten werden in WordPress selbst hinzugefügt. Unter dem Reiter
„Seiten“ werden alle Seiten angezeigt. Hier kann eine Seite z.B. dupliziert und
anschließend geändert, oder eine neue Seite erstellt werden.
ABBILDUNG 27: ERSTELLEN EINER UNTERSEITE
Nun kann nach dem Klick auf „Erstellen“ zwischen dem Divi Builder oder dem
Standardeditor ausgewählt werden. An dieser Stelle ist ersteres zu wählen.
33ABBILDUNG 28: AUSWAHL DES DIVI BUILDER
Anschließend kann die Seite individuell nach oben beschriebenem Schema (Sektion,
Zeilen, Module) aufgebaut werden.
3.1.7. Unterseiten in die Navigationsleiste hinzufügen oder löschen
Haben Sie eine neue Unterseite erstellt, können Sie diese in die Navigationsleiste
aufnehmen.
ABBILDUNG 29: NAVIGATIONSBAR
Wollen Sie Ihre neue Unterseite hier hinzufügen, so wählen Sie im WordPress
Dashboard unter dem Punkt „Design“ das „Menü“ Feld aus.
34ABBILDUNG 30: EINSTELLUNGEN FÜR DAS NAVIGATIONSMENÜ
Im Anschluss kann zwischen dem Hauptmenü und dem Footer-Menü (das Menü am
Ende jeder Seite) ausgewählt werden. Hier ist nun das Hauptmenü zu wählen.
ABBILDUNG 31: AUSWAHL DES HAUPTMENÜS
Auf der linken Seite sind nun alle verfügbaren Unterseiten sichtbar. Auf der rechten
Seite sind alle Unterseiten sichtbar, die sich bereits im Menü befinden. Durch den
Klick auf den Button „Zum Menü hinzufügen“, kann nun eine gewünschte Seite
hinzugefügt werden. Die Unterseiten können ebenfalls hierarchisch geordnet
werden, so dass eine hinzugefügte Seite im Menü ein Unterpunkt einer anderen Seite
ist (z.B. Vorsorge ist ein Unterpunkt von Leistungen). Auf der rechte Seite kann eine
Unterseite aus dem Menü gelöscht werden. Hierzu ist die gewünschte Seite
anzuklicken und anschließend über den Button „Entfernen“ zu entfernen.
35ABBILDUNG 32: HINZUFÜGEN ODER LÖSCHEN EINER UNTERSEITEN
3.1.8. Blog hinzufügen
Blogbeiträge werden in WordPress Beiträge genannt. Diese können über das
Wordpress-Menü verwaltet werden (siehe Abbildung 33).
36ABBILDUNG 33: ERSTELLEN EINES BLOGS
Nach dem Klick auf „Erstellen“ kann zwischen dem Standardeditor oder dem Divi
Builder ausgewählt werden. Zum Erstellen von Beiträgen empfiehlt sich der
Standard-Editor.
ABBILDUNG 34: STANDARD EDITOR AUSWÄHLEN
Nun kann der Beitrag einerseits geschrieben, andererseits auch mit anderen
Informationen versehen werden. Diese Punkte sind in der rechten Seitenleiste
sichtbar. So können Schlagwörter, ein Beitragsbild oder ein Textauszug angegeben
werden.
37ABBILDUNG 35: TITEL, TEXT UND SONSTIGE OPTIONEN EINGEBEN
Ein Klick auf Veröffentlichen, lässt den Beitrag direkt auf der zugeordneten Seite
erscheinen. Auf der Beispielseite sehen sie ihre Blogbeiträge unter Blog im Menü.
ABBILDUNG 36: VERÖFFENTLICHEN EINES BLOGS
383.1.9. Kontaktformular
Die Beispielswebsite bietet ein Formular an, welches PatientInnen benutzen können,
um Fragen an die PVE zu stellen. Das Kontaktformular bietet mehrere Änderungs-
möglichkeiten. Nachdem der Visuelle Builder aktiviert wurde, muss das
Kontaktmodul ausgewählt werden:
ABBILDUNG 37: KONTAKTFORMULAR MODUL
Neben den Eigenschaften der einzelnen Felder kann hier auch die E-Mail-Adresse
festgelegt werden, an welche die eingehenden Anfragen gesendet werden sollen. Die
Verarbeitung von personenbezogenen Daten muss mit einer rechtskundigen Person
abgeklärt werden.
39ABBILDUNG 38: E-MAIL ADRESSE IM KONTAKTFORMULAR ANPASSEN
3.1.10. Cookie-Banner ändern
Das Cookie-Banner Plug-In ist dafür zuständig, jeden neuen Besucher auf die
geltenden Bestimmungen aufmerksam zu machen und diese zu akzeptieren. Dieser
Text muss durch eine rechtskundige Person verfasst und anschließend eingefügt
werden. Um den Text zu ändern muss wie folgt vorgegangen werden:
Zu Beginn muss der Theme Customizer aufgerufen werden. Dieser ist oben auf der
Menüleiste unter „PVE Musterstadt“ zu finden.
40ABBILDUNG 39: THEME CUSTOMIZER AUFRUFEN
Im nächsten Menü muss das „Divi Cookie Consent“ – Menü aufgerufen werden. Unter
dem Menü „Content“ können Anpassungen vorgenommen werden (siehe Abbildung
40).
ABBILDUNG 40: DIVI COOKIE CONSENT – MENÜ
41Im letzten Schritt kann einerseits der angezeigte Text, als auch der Text für den
Button, welcher zum Akzeptieren verwendet wird, angepasst werden.
ABBILDUNG 41: COOKIE TEXT BEARBEITEN
3.1.11. Google-Maps einbinden
Der einfachste Weg die Kontaktdaten der PVE auf der Website zu visualisieren, stellt
Google Maps dar. Dazu muss im ersten Schritt die Adresse der Praxis auf
https://www.google.at/maps gesucht werden. Wird in die Suche eine korrekte
Adresse eingegeben, erscheint der „Teilen“ Button.
42ABBILDUNG 42: ADRESSEINGABE IN GOOGLE MAPS
Bei einem Klick auf den Button und der Auswahl von „Karte einbetten“ im
Dialogmenü kann der HTML Code kopiert werden.
ABBILDUNG 43: KARTE FÜR DIE WEBSITE VORBEREITEN
In Divi muss nun im gewünschten Abschnitt das Modul „Code“ ausgewählt werden.
43ABBILDUNG 44: CODE MODUL HINZÜFUGEN
Nun muss der zuvor kopierte HTML-Code in das Textfeld eingefügt werden.
Anschließend speichern nicht vergessen.
ABBILDUNG 45: GOOGLE MAPS HTML CODE EINFÜGEN
443.1.12 Individuelle Farbgestaltung und Typographie
Die Beispielwebsite besitzt eine Grundfarbe, die sich auf alle Elemente ausbreitet.
Diese kann jedoch auch geändert werden. Hierzu ist der Theme Customizer
aufzurufen
ABBILDUNG 46: THEME CUSTOMIZER AUFRUFEN
Anschließend sind unter „Allgemeine Einstellungen“ à „Typographie“ die
Einstellungen zu Farben und Schriften sichtbar. Änderungen zu den Schriftgrößen
werden hierbei jedoch nicht empfohlen. Werden Änderungen vorgenommen, so
wird der „Veröffentlichen“ Button aktiv. Dieser speichert die Änderungen und macht
diese wirksam.
45ABBILDUNG 48: EINSTELLUNGEN
FÜR DIE TYPROGRAPHIE DER
WEBSITE
ABBILDUNG 47: ALLGEMEINE
EINSTELLUNGEN DER WEBSITE
ABBILDUNG 49: SCHRIFT UND
FARBEINSTELLUGEN
3.2 Wie Sie Ihre Website barrierefrei gestalten
Grundsätzlich kann die Einhaltung der Barrierefreiheit auf https://wave.webaim.org/
überprüft werden. Diese Website analysiert, wertet auftretende Fehler aus und
beschreibt, wie diese zu lösen sind. Jedoch können vor allem drei häufige
Fehlerquellen ausgemacht werden. Dazu zählen neben der Farbe einzelner
Elemente auf der Website, welche immer einen geeigneten Kontrast bieten sollten
auch Beschriftungen und Überschriften. Alle beschreibenden Elemente wie z.B.:
Bilder, Icons oder Buttons müssen eine Beschriftung enthalten. Überschriften
gliedern die Website und ermöglichen sehbeschränkten Menschen einen Lesefluss.
Deswegen sollte auch der Hierarchie des Website-Aufbaus Beachtung geschenkt
werden. (auf 1 folgt z.B.1.1 und nicht 1.1.1)
464 VERWALTUNG UND BETREIBEN DER WEBSITE
4.1 Wie Sie Ihre Website veröffentlichen
Mit der Installation von WordPress und der entwickelten Beispielseite ist die Website
bereits veröffentlicht (online), da für die Bearbeitung die Seite im Internet verfügbar
sein muss. Jedoch wird – solange keine Person die Internetadresse kennt – auch
keine Person die Seite aufrufen. Es gibt Möglichkeiten in der Bearbeitungsphase den
Zugriff mit einem Passwortschutz einzuschränken. Dafür müsste zum Beispiel
folgendes Plug-In installiert werden https://wordpress.org/plugins/password-
protected/. Sobald die Seite fertiggestellt ist, kann das Plug-In wieder entfernt und
die Internetadresse frei kommuniziert werden.
4.2 Userrollen & neue Benutzer
Userrollen werden vergeben, um gewisse Handlungen auf der Website für nicht-
Administratoren einzuschränken. Wir empfehlen für eine Website nur die Rollen
Administrator und Redakteur zu vergeben. Neue Benutzer werden über den
Administratorenzugang angelegt.
Administrator
Ein Administrator hält das volle, uneingeschränkte Eigentum an der Website. Diese
Person hat die volle Kontrolle über Seiten/Beiträge, Kommentare, Einstellungen,
Wahl des Themes, Import, Benutzer etc. Nichts ist tabu, auch nicht das Löschen der
gesamten Website.
47Redakteur
Ein Redakteur kann jede(n) Beitrag/Seite ansehen, bearbeiten, veröffentlichen und
löschen. Er kann Kommentare moderieren, Kategorien verwalten, Schlagwörter
(Tags) verwalten, Links verwalten sowie Dateien/Bilder hochladen.
Die Benutzereinstellungen finden im Dashboard von WordPress statt. Hier ist der
Menüpunkt „Benutzer“ --> „Alle Benutzer“ auszuwählen.
ABBILDUNG 50: BENUTZERMENÜ
Hier kann einerseits ein neuer Benutzer hinzugefügt werden, oder die Rechte von
Vorhanden geändert werden.
ABBILDUNG 51: BENUTZER ANLEGEN UND VERWALTEN
48Bei Klick auf den Button „Bearbeiten“ kann dem User eine neue Rolle zugewiesen
werden. Speichern anschließend nicht vergessen!
ABBILDUNG 52: BENUTZERROLLE ÄNDERN
4.3 Sicherheitsaspekte
WordPress wird auf 35% aller Websites im Internet verwendet und hat eine große
Community, um sicherzustellen, dass wenn eine Schwachstelle entdeckt wird, sie so
schnell wie möglich geschlossen wird. Sicherheitsupdates werden in WordPress
automatisch durchgeführt. In regelmäßigen Abständen wird nach dem Login in
WordPress dennoch ein Aufruf zum Update aufscheinen. Diese Updates beinhalten
49nicht kritische Updates wie Funktionserweiterungen oder die Beseitigung von Bugs.
Es wird empfohlen, sie dennoch regelmäßig durchzuführen. Die größte
Schwachstelle in WordPress sind jedoch die Zugangsdaten, die von Benutzern
definiert werden. Die beste Möglichkeit, die Sicherheit zu verbessern, ist daher die
Verwendung cleverer Benutzernamen und Passwörter. Es sollte unter allen
Umständen auf Passwörter wie 123456, password oder simple Wörter wie Doktor1
verzichtet werden.
Ein starkes Passwort kann eines sein, das gut zu merken ist, sich von anderen aber
kaum erraten lässt. Folgende Punkte machen ein gutes Passwort aus:
• Einmalige Passwörter erstellen
Erstellen Sie für alle Ihre wichtigen Konten, beispielsweise für E-Mail- und
Website-Zugang, jeweils ein anderes Passwort.
• Längere und einprägsamere Passwörter verwenden
Lange Passwörter sind stärker. Legen Sie daher ein Passwort mit mindestens
acht Zeichen fest.
• Keine personenbezogenen Daten und gängige Wörter verwenden
Erstellen Sie keine Passwörter auf Grundlage von Informationen, die andere
eventuell kennen oder leicht finden können.
50Anhang: Checkliste
Aufgaben Erledigt
Überlegen Sie sich einen Domainnamen. ☐
Wählen Sie einen Webhoster aus. ☐
Kaufen sie ihre Domain gemeinsam mit dem Webspace bei einem Webspace Provider. ☐
Installieren Sie WordPress als Content Management System für ihre Website. ☐
Legen Sie in WordPress ein Passwort und einen Username für den Login Bereich fest . ☐
Rufen sie ihre eigene Domain auf um die WordPress Testseite zu sehen. ☐
Spielen Sie die Beispielseite als Vorlage ein. ☐
Lassen Sie die Datenschutzerklärungen, den Cookie Banner, die
Datenschutzbestimmungen und das Impressum auf Richtigkeit von einer ☐
rechtkundigen Person überprüfen und bearbeiten Sie diese bei Bedarf.
Ändern Sie das Logo auf ihr persönliches PVE-Logo. ☐
Ändern Sie den Titel der Website. ☐
Tauschen Sie die Beispielbilder und Texte innerhalb der kompletten Website aus. ☐
Ändern Sie die Ordinationszeiten auf folgenden Seiten: Startseite, Termine, Kontakt,
☐
Team, Fußbereich.
Ändern Sie die Team-Mitglieder auf der Teamseite. ☐
Ändern Sie den Google Maps – Standort auf der Startseite und der Kontaktseite. ☐
Ändern Sie die Adresse auf folgenden Seiten: Startseite, Termine, Kontakt. ☐
Ändern Sie die Telefonnummer auf folgenden Seiten: Kopfbereich, Startseite, Termine,
☐
Kontakt.
Ändern Sie die E-Mail Adresse auf folgenden Seiten: Kopfbereich, Startseite, Termine,
☐
Kontakt.
Ändern Sie die hinterlegte E-Mail Adresse bei allen Kontaktformularen . ☐
Ändern oder löschen Sie die Beispiel - Blog Artikel. ☐
Passen Sie die Leistungen an ihre PVE an. ☐
Ändern Sie sonstigen Inhalte auf der Website oder entfernen Sie diese. ☐
51Sie können auch lesen
