Sicherheit/Support Seite 2. Anmeldung zum CMS, Login Seite 4

Transkript

1 Inhaltsverzeichnis Stand: Aktuellste Version herunterladen auf: Sicherheit/Support Seite 2 Anmeldung zum CMS, Login Seite 4 Inhalte ändern Seite 5 - Medien verwalten (Bilder, PDF, MP3, etc.) - Seiten erstellen - Texte bearbeiten - Texte im Visual Composer ändern. Seite 6 - Absätze und Zeilenumbrüche Seite 7 - Dateien hinzufügen (Bilder, PDF, MP3, etc.) Seite 8 - Inhalte speichern und veröffentlichen - Verlinkungen erstellen Seite 9 - Wie verlinke ich ein PDF - Navigation bearbeiten Seite 10 - Beiträge erfassen (für Blog oder Newsseiten) Seite 11 - Bilder hinzufügen Seite 12 - Bilder bearbeiten, skalieren oder zuschneiden Seite 13 - Galerien und Medien bearbeiten Seite 13 - NextGEN Galerie erstellen und bearbeiten Seite 14 - Tabellen bearbeiten Seite 17 - Videos und MP-3 Dateien einfügen Seite 18 - Videos manuell einbetten (Youtube, Vimeo, etc.) Seite 19 - Musik- und Sprachaufnahmen manuell einbetten (MP3) Seite 20 - Soundcloud - Widget manuell einbetten Seite 21 Mehrsprachige Website Seite 22 Weiterer Support/Hilfe Seite 24 1

2 Sicherheit / Support Support: Gerne bin ich auch in Zukunft Ihr direkter Ansprechpartner für den Support Ihrer Website. Ob per Telefon, Mail oder in einer 1zu1 Schulung. Ich verrechne diese Arbeiten jeweils im Stundentarif. Google/Links: Damit Ihre Website über Google gut gefunden wird, empfehle ich Ihnen, wenn möglich von mindestens fünf Websites auf Ihre eigene Website eine Verlinkung einzurichten oder einrichten zu lassen. Eine garantierte Verlinkung auf Ihre Website wird auch auf Webspatz.ch erstellt. Sicherheit: Ihre Wordpress-Seite ist mit einer Firewall geschützt. Zudem wird von Webspatz ein wöchentliches Backup auf Ihrem Serverkonto durchgeführt, welches jeweils die Daten der letzten 5 Wochen speichert. Diese sind wiederum durch ein regelmässiges Backup Seitens des Servers bei Metanet oder Ihrem Hostinganbieter gesichert. Im Notfall kann auf Seite des Servers ein Backup auf ein Datum der letzten sieben Tage eingespielt werden. Für Kontaktformulare sowie ausgeschriebene Mailadressen auf Ihrer Website ist ein Sicherheitstool installiert, welche das Scannen nach Mailadressen verhindert und Ihnen damit unnötigen Spam erspart. Zudem wurde die offizielle Login-Maske zum CMS von Wordpress umbenannt, womit Ihre Website deutlich vor Brutforce-Attaken schützt. Durch diese Vorkehrungen schliesst Webspatz sämtliche Haftung für Fälle der leichten Form von Fahrlässigkeit aus. HINWEIS wenn Sie die Seite selber betreuen: Updates: Es ist wichtig, dass Sie installierte Plugins regelmässig aktualisieren (Empfehlung: Alle zwei Monate), damit ihre Website auf aktuellem Stand und somit die Sicherheit gewährleistet ist. 1. Neue Updates werden im Reiter» Plugins «mit einer Zahl angezeigt. Um ein Update durchzuführen klicken Sie auf» Plugins «2. Markieren Sie nun die orange eingefärbten Plugins mit einem Haken. 3. Wählen Sie im Auswahlfeld» aktualisieren «4. Klicken Sie auf» übernehmen «2

3 5. Bevor das Update durchgeführt wird, ist es wichtig ein Backup zu erstellen. Dies geschieht bei den meisten Seiten automatisch. Setzen Sie in beiden Auswahlfelder einen Haken und klicken Sie auf» mit Aktualisierung weitermachen «6. Es wird nun ein Backup erstellt sowie die Updates der Plugins durchgeführt. Um manuell ein Backup durchzuführen, lesen Sie bitten den nächsten Abschnitt. Zu UpdraftPlus (Backup) Manuelles Backup erstellen: Sie können auch jederzeit manuell ein Backup ihrer Website erstellen oder diese auf einen früheren Stand zurücksetzen.. UpdraftPlus finden Sie unter Einstellungen UpdraftPlus Sicherungen Klicken Sie auf Jetzt sichern Bestätigen Sie im nächsten Fenster nochmals mit jetzt sichern 3

4 Anmeldung im CMS Die Open Source Lösung WordPress ist die am weitesten verbreiteste Software zur Verwaltung von Webseiten und ermöglicht dank der einfachen Benutzung einen schnellen Einstieg. Unter der Adresse» «finden Sie das Anmeldeformular für die Administrationsoberfläche der Website. Geben Sie hier die Benutzerdaten von Ihrem Datenblatt ein. Anmerkung: Je nach Hostinganbieter kann die Anmeldung auch über folgenden Link erfolgen:» «Nachdem Sie auf Anmelden geklickt haben, erscheint die Administrationsoberfläche Ihrer Webseite. 4

5 Inhalte ändern Medien verwalten: Im Menupunkt» Medien «können Sie sämtliche Inhalte wie Bilder, MP3 oder PDF hochladen sowie bearbeiten und verwalten. Seiten erstellen: Unter dem Menupunkt» Seiten «finden Sie eine Liste aller bisher angelegten Seiten. Über» Erstellen «können Sie neue Seiten hinzufügen. Mit einem Klick auf den Seitentitel kommen Sie in die Bearbeitungsansicht. Texte im Editor bearbeiten: Verwenden Sie den Editor und die Absatzvorlagen um den Inhalt zu bearbeiten und zu formatieren. Die Symbole sind hier ähnlich aufzufinden wie z.b. im Textbearbeitungsprogramm Word. Klicken Sie auf das Symbol» Werkzeugleiste umschalten «, um weitere Befehle zu sehen. Achten Sie dabei immer darauf, das im Editor auf der rechten Seite visuell angewählt ist. Im Modus Text finden Sie den programmierten Text in HTML. In der oberen Reihe finden Sie einen praktischen Befehl» select shortcode «, mit welchem Sie die Seite in verschieden breite unsichtbare Spalten teilen können. Setzen Sie hierzu Ihren Text oder Bilder jeweils zwischen die Befehle: [one_half]ihr Text[/one_half] 5

6 Texte im Visual Editor ändern. Falls du unterhalb des Seitentitels einen blauen Button mit dem Text Backend Editor findest, dann kannst du deine Inhalte auch über diesen Visual Composer bearbeiten. Klicke hierzu auf den Blauen Button. Jedes Textelement kann nun über den grünen Balken bearbeitet werden. Um die Änderungen zu speichern, bestätigst du zuerst mit Änderungen speichern, um Änderungen zu veröffentlichen, danach auf Aktualisieren. TIP: Hier findest du eine gut erklärte Videoanleitung zum Visual Composer (ab 3.50min): 6

7 Absätze und Zeilenumbrüche: Absätze und Zeilenumbrüche werden auf der publizierten Seite nicht immer richtig angezeigt, da diese für die Programmierung als ungenaue Formatierung angesehen werden und teilweise wieder gelöscht werden. Bei der Eingabe im Editor ist deshalb darauf zu achten das man diese richtig eingibt. Absätze: Im Editor erzeugt man einen Absatz durch das einmalige Betätigen der Enter-Taste ( ). Zeilenumbruch: Einen Zeilenumbruch, sprich einen erzwungenen Zeilenwechsel erreicht man im Editor über die Tastenkombination Shift+Enter ( + ). 7

8 Dateien hinzufügen: Mit einem Klick auf» Dateien hinzufügen «haben Sie die Möglichkeit Bilder und andere Medien einzubinden. Inhalte speichern und veröffentlichen: Wenn Sie Ihre Änderungen anschauen möchten, können Sie diese unter» Vorschau der Änderungen «anschauen. Haben Sie die Änderungen abgeschlossen, können Sie diese unter» Aktualisieren «schlussendlich speichern. Die Änderungen erscheinen dann sofort auf Ihrer Webseite. Haben Sie eine neue Seite erstellt, achten Sie bitte darauf, das unter» Attribute «dieselben Einstellungen wie bei den restlichen Seiten ausgewählt ist. Seite als Entwurf speichern: Möchten Sie die Änderungen noch nicht veröffentlichen, dann haben Sie die Möglichkeit, die Seite unter Status bearbeiten auf Entwurf zu setzen. Bestätigen Sie die Aktion mit OK sowie Aktualisieren 8

9 Verlinkungen erstellen: Sie können markierten Text wie auch Bilder oder Grafiken mit Hilfe des Link Icon auf externe Webseiten sowohl aber auch auf interne Seiten ihrer Website verlinken. Markieren Sie dazu den Text den Sie verlinken möchten und klicken Sie anschliessend auf das Link Icon Es öffnet sich nun ein Fenster. Hier haben Sie unter URL die Möglichkeit auf eine externe Seite zu verlinken. Unten finden Sie dann eine Auflistung all der interen Seiten Ihrer Website auf die Sie auch verlinken können. Bei einem Bild oder einer Grafik klicken sie auf das Element und fügen Sie bei URL einfach die Zieladresse ein. Wie verlinke ich ein PDF?: Jedes Bild oder Dokument das Sie über» Medien «hochladen, hat eine eigene URL, auf die Sie verlinken können. Bei einem PDF öffnen Sie diesbezüglich einfach das Dokument über den Reiter» Medien «. Auf der rechten Seite kopieren Sie nun die URL des Dokumentes. Fügen Sie diese dann auf der gewünschten Seite als Linkzieladresse ein. 9

10 Navigationsmenu bearbeiten: Seiten in der Navigation anzeigen: Die neu erstellte Seite können Sie anschliessend unter» Design Menue «auswählen und per Drag&Drop an die gewünschte Stelle verschieben. Kategorien als Seite in der Navigation anzeigen: Sie haben auch die Möglichkeit, Beitragskategorien in der Navigation als Seite anzuzeigen. Hierzu erstellen Sie unter» Beiträge Kategorien «eine neue Kategorie und speichern diese ab. Wenn Sie nun über» Beiträge Erstellen «einen Beitrag erstellen, haben sie auf der rechten Seite unter Kategorie die Möglichkeit, den Beitrag diversen Kategorien zuzuordnen. Unter» Design Menue Kategorien «werden sämtliche erstellte Kategorien im Dropdownfenster angezeigt. Um eine Kategorie nun in der Navigation anzuzeigen, markieren Sie die gewünschte Kategorie, klicken auf zum Menu hinzufügen und schieben die Seite dann an die gewünschte Stelle in der Navigation. 10

11 Externe Verlinkungen in der Navigation anzeigen: Sie haben ausserdem auch die Möglichkeit, über die Navigation auf eine externe Seite zu verlinken, wie im Beispiel zum SBB-Fahrplan. Klicken Sie dazu auf Das Dropdownfenster» Links «und fügen Sie unter URL die Zieladresse und unter Link Text den Titel ein, welcher in der Navigation angezeigt werden soll. Klicken Sie anschliessend auf Zum Menü hinzufügen und schieben das Feld an die gewünschte Stelle in der Navigation. Beiträge erfassen (für Blog oder Newsseiten): Benutzen Sie einen Blog oder eine Newsseite, in welcher immer die aktuellsten Beiträge zuoberst angezeigt werden, finden Sie unter» Beiträge «ihre letzten Beiträge oder können neue Beiträge erfassen. Beim Erfassen von Beiträgen lohnt es sich unten rechts noch ein Beitragsbild festzulegen, damit dieses in Ihrem Blog auch als Vorschaubild angezeigt werden kann. Klicken Sie auch hier zum veröffentlichen auf» Aktualisieren «. 11

12 Bilder hinzufügen Um auf Ihrer Seite oder Ihrem Beitrag Bilder einzufügen klicken Sie auf» Dateien hinzufügen «. Falls die Bilder schon hochgeladen sind, können Sie diese gleich hier auswählen. Bei neuen Bildern klicken Sie auf» Dateien hochladen «. Dabei können Sie diese per Drag & Drop in das Feld ziehen oder über» Dateien auswählen «importieren. Wählen Sie nun die Bilder aus welche Sie verwenden möchten. Aktivierte Bilder sind mit einem Haken versehen. Mit gedrückter CMD Taste können Sie gleich mehrer Bilder auswählen. Rechts unten haben Sie nun die Möglichkeit das Bild zu positionieren» Ausrichtung «sowie eine Grösse festzulegen» Grösse «. Klicken Sie anschliessend auf» In die Seite einfügen «. Nun wird das hochgeladene Bild in Ihrer Seite/Beitrag angezeigt. Falls Sie das Bild später nochmals bearbeiten oder löschen möchten, klicken Sie auf das Bild und wählen Sie das entsprechende Icon aus. 12

13 Bilder bearbeiten, skalieren oder zuschneiden: Um Bilder zu skalieren oder auf eine bestimmte Grösse zuzuschneiden, können Sie dies direkt im CMS vornehmen. Hier die nötigen Schritte dazu: 1. "Medien" 2. "Bild auswählen, welches Sie bearbeiten möchten" 3. klicken Sie auf "Weitere Details bearbeiten" 4. unterhalb des Bildes klicken Sie auf "Bild bearbeiten" Zum Skalieren: Auf der rechten Seite finden Sie ein Feld, um die gewünschte Grösse einzugeben. klicken Sie auf speichern Bild zuschneiden: 1. klicken Sie auf das kleine feld oben links "Ausschnitt auswählen" und wählen Sie den Bereich aus, welchen Sie gerne ausschneiden möchten. Im Feld "Bildausschnitt" auf der rechten Seite wird dann die Grösse des Ausschnitts angezeigt. 2. klicken Sie auf "Speichern" Falls Sie das bearbeitete Bild auch im Original noch einsetzen möchtest, müsstest Sie es einfach ein zweites Mal hochladen. Galerien und Medien bearbeiten: Wenn Sie auf einer Seite eine Galerie von Wordpress haben, können Sie diese durch Klick aktivieren und anschliessend bearbeiten. Wenn Sie eine neue Galerie erstellen möchten, können Sie diese über» Dateien hinzufügen Galerie erstellen «importieren. 13

14 NextGEN - Galerie Falls Sie in der Seitenleiste folgendes Galerielogo finden, dann wurde auf Ihrem CMS das Plugin NextGEN-Gallery installiert. Hier können Sie selber Alben erstellen sowie die Galerien bearbeiten. Galerie / Bilder hinzufügen Über diesen Befehl können sie eine neue Galerie erstellen, oder eine bestehende Galerie bearbeiten. Neue Galerie erstellen: 1. Wählen Sie Ein neue Galerie erstellen 2. Geben Sie der Galerie einen Namen 3. Laden Sie die gewünschten Bilder von Ihrem Computer hoch. (Optimal sind 2560px Bildbreite, max. 500kb Bildgrösse) 4. Upload beginnen Die Galerie befindet sich nun im unter Galerien verwalten Bilder zu einer bestehenden Galerie hochladen: 1. Wählen Sie die bestehende Galerie aus. 2. Laden Sie die gewünschten Bilder von Ihrem Computer hoch. (Optimal sind 2560px Bildbreite, max. 500kb Bildgrösse) 3. Upload beginnen Die Galerie befindet sich nun im unter Galerien verwalten 14

15 Galerien verwalten Über diesen Befehl können Sie die Bilder in einer bestehenden Galerie verwalten. 1. Geben Sie hier den Bildtitel ein. 2. Über diesen Befehl können Sie die Bilder neu sortieren. 3. Markieren Sie die gewünschten Bilder, welche Sie z.b löschen möchten und wählen Sie anschliessend Aktion Wählen löschen und klicken dann auf Übernehmen 4. Nachdem Sie die Änderungen abgeschlossen haben, klicken Sie auf i. Änderungen speichern. Um die erstellten Galerien nun auf einer Seite einzufügen oder zu bearbeiten, können Sie dies direkt in der geöffneten Seite mit Klick auf die Galerie oder das grüne Logo vornehmen. 15

16 Galerieeinstellugen 1. Wählen Sie zuerst unter Layout auswählen das gewünschte Layout aus 2. Wählen Sie dann unter Was möchtest Du gerne zeigen Ihre erstellte Galerie aus und bestätigen Sie anschliessend mit Save Auch in dieser Darstellung haben Sie die Möglichkeit unter den weiteren Reiter* Bilder hinzuzufügen oder eine bestehende Galerie zu verwalten. 3. Sobald Sie mit den Änderungen zufrieden sind, können Sie diese unter Vorschau der Änderungen anschauen und mit Aktualisieren auf der Website veröffentlichen. NextGEN ist ein sehr komplexes Galerieplugin mit diversen Darstellungsmöglichkeiten. Detaillierte Informationen dazu finden Sie hier: 16

17 Tabellen: Falls Sie auf Ihrer Website Tabellen benutzen, finden Sie diese im Dashboard unter» TablePress «. Dies ist ein Plugin, mit deren Hilfe Sie ganz einfach Tabelleninhalte aktualisieren können. TablePress gibt pro Tabelle einen Shortcode z.b. [table id=1 /] frei, welchen Sie dann in einer beliebigen Seite einfügen können. 8! Tabellen können nicht in einer Seite, sondern nur über TablePress aktualisiert werden. 17

18 Video und MP-3 Dateien einfügen Sie haben im Texteditor über den Button» Add Media «die Möglichkeit, von Ihnen hochgeladene Videos sowie MP-3 Dateien einzufügen. Wählen Sie dazu für MP3-Dateien» Create Audio Playlist «oder für Videos» Create Video Playlist «und fügen Sie die gewünschten Dateien dazu. Klicken Sie anschliessend auf den Button» Create a new playlist «Anschliessend haben Sie die Möglichkeit unter» Playlist Setting «die Anzeigeoptionen auszuwählen. Mit einem Klick auf die Datei, können Sie hier die nötigen Angaben zu Titel, Artist etc. ergänzen. Über den Button» Insert audio playlist «wird die Datei dann an markierter Stelle eingefügt. 18

19 Videos manuell einbetten (Youtube, Vimeo, etc.) Um Speicherplatz zu sparen, ist es ratsam, Ihr Video zuerst auf eine Videoplattform (Youtube, Vimeo, etc.) hochzuladen und dieses dann in die Website einzubetten. Selbstverständlich kann man dort die das Video auch als privat markieren, so das es über die Suchfunktion nicht gefunden werden kann. Mithilfe des Plugin» Advanced Responsive Video Embedder «lassen sich Videos mit wenigen Schritten in die Website einbetten. (Falls das Plugin noch nicht vorinstalliert ist, kann dieses im Dashboard unter» Plugin «über die Suchfunktion heruntergeladen werden. Nach erfolgreicher Installation erscheint oberhalb des Texteditior ein Button mit der Überschrift» Embed Video «. Darauf öffnet sich folgendes Feld, in welchem danach der Link zum Video (Youtube, Vimeo, etc.) eingegeben werden kann. Das Video kann jedoch auch über» Medien «hochgeladen und anschliessend der interne Link zum Video eingetragen werden. Damit sich die Grösse des Videos auch der Bildschirm grösse anpasst und responsive bleibt, empfehle ich Ihnen unter 2. zentriert zu wählen und unter einzugeben. Durch drücken des Buttons» Insert Shortcode «wird das Video an markierter Stelle als Shortcode eingebetten. 19

20 Musik- und Sprachaufnahmen manuell einbetten (MP3) Mithilfe des Plugin» Compact Audio Player «lassen sich MP3-Aufnahmen mit wenigen Schritten in die Website einbetten. (Falls das Plugin noch nicht vorinstalliert ist, kann dieses im Dashboard unter» Plugin «über die Suchfunktion heruntergeladen werden. Um die MP3-Datei einbetten zu können, kopieren Sie bitte folgenden Shortcode und setzen Sie diesen an gewünschter Stelle im Texteditor ein. SHORTCODE: [sc_embed_player_template1fileurl=" Laden Sie anschliessend die gewünschte Aufnahme über» Medien «hoch, öffnen Sie die Datei, kopieren Sie die URL der Datei und ersetzen Sie diese mit der gelb markierten URL im Shortcode. Klicken Sie anschliessend auf den Button Update um die Änderungen zu speichern. 20

21 Soundcloud - Widget manuell als iframe - Element einbetten Um eine Aufnahme von Soundcloud im Texteditor einzubetten, braucht man dazu den iframe Code des Titels von Soundcloud. Diesen findet man unterhalb des Titels über den Button» share «. Klicken Sie dann auf» Embed «und kopieren dann den Link unterhalb des Titels» Code & preview «. Fügen Sie diesen Code dann im Texteditor unter dem Reiter» Text «an der gewünschten Stelle ein. 21

22 Mehrsprachige Website Falls Sie eine mehrsprachige Website besitzen, können Sie die Inhalte zu allen Sprachen einerseits direkt im Reiter»Seiten«über die Symbole in der zweiten Spalte anpassen. Das schöne daran ist, das Sie nicht für jede Sprache eine neue Seite erstellen müssen, sondern innerhalb einer Seite einfach pro Sprache die Inhalte anpassen können. Inhalte können vom Plugin selber oder von Ihnen direkt übersetzt werden. eine Übersetzung hinzufügen eine Übersetzung editieren eine vorhandene Übersetzung aktualisieren Dieselben Befehle können Sie auch in einer geöffneten Seite jeweils ganz rechts vornehmen. Wenn Sie eine neue Seite erstellen und diese zur Navigation hinzufügen»designmenüs«(anleitung siehe oben), dann müssen Sie jeweils die Navigation für die zweite Sprache neu synchronieren. Befehl: Menüs zwischen Sprachen synchronisieren 22

23 Damit die Navigation der zweiten Sprache auch angepasst wird, müssen Sie rechts oben einfach die Sprache wechseln. Falls Sie daran interessiert sind, noch mehr Einstellungen an Ihrer mehrsprachigen Seite selber vorzunehmen, finden Sie hier weitere Erklärungen zum installierten Plugin WPML : 23

24 Externer Support / Hilfe Zusätzlicher Support: Wordpress ist ein weit abgestütztes CMS, welches stehts weiterentwickelt wird. Diesbezüglich finden Sie im Internet auch viele Supportforen sowie Anleitungen für diverse Probleme. Google hilft :-) Ausserdem empfehle ich Ihnen folgende Seiten: Wordpress Deutschland Wordpress Österreich (Videos) Woocommerce Shop Bei diesem Videotutorial beginnt der Autor nach der Installation und erläutert die ersten Schritte in Wordpress wie Artikel gestaltet werden. Diese Videos sind gut für eine erste Orientierung. Youtube Viele Wordpress-Tutorials finden Sie auf auch auf Youtube. Rufen Sie hierzu einfach youtube.com auf und suchen Sie nach "wordpress tutorial deutsch". Als Ergebnis erhalten Sie eine Fülle an Videos. Das Problem ist hierbei jedoch, dass Sie so viele Videos zu Wordpress angeboten bekommen, dass es schwierig ist gute von schlechten zu unterscheiden. Es lohnt sich auch auf das Erstellungsjahr der Videos zu achten. 24