WordPress: Slider Revolution

Verwendung von Slidern allgemein

Seit dem Siegeszug von mobilen Endgeräten sind Slider problematisch geworden. Wenn der Text zu lang ist, wird er einfach abgeschnitten. Gut verwenden kann man sie noch bei reinen Bildgalerien oder bei Artikelserien. Hier ist ein Artikel gegen die Verwendung von Slidern: https://yoast.com/opinion-on-sliders/

Hier ist ein weiterer Artikel gegen die Verwendung von Slidern: https://thrivethemes.com/why-sliders-suck/

Installation

Die Kosten von $25 sind nicht ohne, aber ich sehe gerade keine manuelle Alternative, nachdem mein Versuch den Bootstrap-Slider in WordPress zu integrieren vorläufig eher gescheitert ist. Hier geht’s zum bezahlten Download. Unheimlich ist mir die schiere Größe des Downloads: 208 MB. Aber da sind viele Beispiele mit drin. Die zip muss entpackt werden. Hochgeladen und aktiviert wird dann nur das 7,5 MB große revslider.zip.

Plugins -> Installieren -> Plugin hochladen -> .zip von meinem Computer auswählen -> Jetzt installieren -> Aktiveren

Um z.B. Templates nutzen zu können musst Du slider revolution noch registrieren. Hier findest Du den Lizenzschlüssel. Gehe unter Download und wähle hier den Lizenzschlüssel als Text. Den gibst Du dann in wordpress ein: http://www.it-freelancer-magazin.de/wp-admin/admin.php?page=revslider&view=sliders Register this code.

Template: Team Carousel

Man muss die Templates benutzen, denn sonst wird slider revolution aufgrund der richtig vielen Konfigurationsmöglichkeiten einer manuellen Slidererstellung richtig kompliziert. Ein alternatives Layout für Teamdarstellung ist das x-Spaltenlayout: http://www.fitnessstudio-bodyfit.de/fitnessstudio/

Template: Team carousel. Die Thumbnails in der Gallerie oben befinden sich in Static/Global layers. Die Thumbnails müssen so zugeschnitten sein, dass die Motive nicht verzerrt werden. Man muss, wenn man noch ein paar Thumbnails zusätzlich hinzugefügt hat auch noch deren Verlinkung anpassen: das geht über Aktionen. Dazu muss man noch vorher die Slide-Titel anpassen.

Slider Einstellungen

hier finden sich die generellen Slidereinstellungen

Slide Editor

Im Slide-Editor werden die einzelnen Bilder des Sliders einzeln bearbeitet. Die Tabs unter der Bilderreihe beziehen sich auf das aktuell selektierte Bild. Mit dem Button Diskette auf grünem Hintergrund werden die Änderungen am einzelnen Bild gespeichert.

 

Umzug WordPress auf Host Europe WebServer

Hier findet sich der Umzug nach WebGo beschrieben. Und hier (sehr ausführlich) der Umzug einer WP-Instanz nach Host Europe: Quelle

E-Mail-Addy umziehen: Mach einen Forward auf meine andere Email-Addresse, damit ankommende Emails nicht verloren gehen.

Ich muss auf dem WebServer das Passwort setzen für die vorgeschlagenen SSH-Zugänge (KIS -> WEBSERVER -> Sicherheit & SSL -> SSH Zugang konfigurieren), dann bis zu 15 min warten! Der SSH-User ist nur der Teil vor dem @ – der Teil dahinter bezeichnet den Server.

Dann mit Kitty (Putty war irgendwie buggy) zum WebServer verbinden. Nach wenigen Minuten geht meine Verbindung futsch, weil mein Internet daheim aktuell brüchig ist.

Per FTP auf altem Server anmelden: ncftp -u web11 s96.goserver.host

TBC …

WordPress: PageBuilder (Visual Composer)

Allgemein

Soll die Optik einer Webpage weg vom Blogstyle und hin zu einer strukturierten Seite, bieten sich Pagebuilder an. Beim letzten WordPress-Meetup wurde mir von Visual Composer (das mir eigentlich ein Kollege empfohlen hatte) abgeraten. Wegen der verwendeten Shortcodes führe dieses Plugin, wie viele anderen Pagebuilder-Plugins, zu einem Vendor-Lockin. Zwei erfahrene WordPress-Meetupler rieten mir daher zu Elementor.

Elementor

Zumindest mit WordPress-Version 4.7.5 (und 4.8.) in Kombination mit Elementor-Version 1.5.2, hat der Editor beim Beitrag-Erstellen nicht geladen, wenn man über das Beiträge/Seite-Menü kam (möglicherweise lag es daran, dass mein Theme nicht aktuell war). Erst als man die Seite in der Vorschau angeschaut hat und von dort dann Mit Elementor bearbeiten geklickt hat, hat’s funktioniert. Die Auswahl an Templates ist dort jedoch sehr begrenzt – ein guter Designer wird trotzdem mit dem zügigen Zusammenklicken seine Freude haben.

Visual Composer

Kostet $34.

Das erste gedownloadete .zip hat WordPress nicht als gülitges Plugin identifizert und die Installation abgebrochen. Erst beim zweiten Download hat die Plugin-Installation funktioniert. Und erst beim Update der aktiven WordPress-Templates hat Visual Composer auch geladen. Danach Visual Composer aktivieren: /wp-admin/admin.php?page=vc-updater

Die Templates in der Template Library sind alle für sehr schlanke content-arme Webseiten ausgelegt. Vielleicht verhält es sich dabei wie mit der Haute-Couture-Kleidung, die nur an einem superschlanken Model gut aussieht. Einige Layout-Anregungen fand ich jedoch beim gemütlichen Durchstöbern der Templates, so dass die Vorstellung zum Layout meiner content-reichen Webseite dadurch reifte.

So fügt man ein Template ein

Zeile – das am häufigsten verwendete Element

Diese unterteilt die Webseite vertikal. Innerhalb der Zeile wird dann häufig noch ein x-Spalten-Layout implementiert. Die Ausdehnung einer Zeile erkennt man an der gestrichelten Linie, wenn man mit der Maus über die Zeile geht. Das blaue Zeilenmenü ist etwas kontraintuitiv, denn es erscheint auch über einer Spalte, obwohl alle darin vorgenommenen Aktionen die gesamte Zeile betreffen (kann man mit dem Papierkorb-Icon mal versuchen).

Den Sinn von Spalte hinzufügen habe ich nicht verstanden, wenn man das gleiche doch im Layout-Menüpunkt machen kann?!

Best practices

Achte darauf, dass jede inhaltliche Zeile (selbst wenn es nur ein Separator ist) auch wirklich in eine neue technische Zeile bekommt – sonst entsteht Chaos. Eine neue Zeile baut man, indem man auf das allgemeine + Zeichen klickt:

 

Nach jedem erfolgreichen Arbeitsschritt Aktualisieren klicken und nach einem Fehler einfach die Seite neu laden – so kommt man dann wieder zur letzten korrekten Seitenversion.

Wenn man aus Versehen einen kaputten Stand aktualisiert hat, kann man mit dem herkömmlichen WP-Revisionssystem zur älteren korrekten Version zurückkehren.

Layout-Änderungen an der Seite lassen sich am besten im Backend-Modus durchführen. Sowieso sollte man so oft wie möglich im Backend-Modus arbeiten, weil der auch schneller funktioniert.

Formulare

Die Log-Funktionality hatte einen Bug (Stand: 23.7.): Obwohl ich mehrfach in Variationen eine E-Mail-Addy in eine simple form abschickte, lieferten mir die entries: No entries found. Wenn man jedoch ein SMTP-Mail-Plugin für WP installiert hat, geht die Benachrichtigung per Email jedoch wenigstens.

$17: easy-form (Synonym: dhvc)
uploadbare .zip befindet sich innerhalb des downgeloadeden .zips.
Eine eigene Vorschau gibt es nicht – man muss die in der einbettenden Seite benutzen.

Vielversprechend sah auch WP Forms aus, das jedoch in der Pro-Version $200/Jahr kostet.

Bilder im Internet veröffentlichen

Disclaimer: Der folgende Beitrag ist keine juristische Beratung zu rechtlichen Belangen bei der Veröffentlichung von Bildern im Internet. Wer rechtliche Fragen hat, sollte im Zweifelsfall einen Anwalt konsultieren.

Kostenlose Bilddatenbanken

Pixabay

Wikimedia. Diese sind häufig mit CC BY (Attribution) lizensiert. Es gibt eine Funktion namens „Use this file on the web„. Dort findet sich sowohl der HTML-Code für das Bild, als auch nach dem entsprechenden Anhaken auch der lizenzkonforme HTML-Code für den Untertitel.

Es muss also immer noch ein Bilduntertitel hinzugefügt werden. Hier ist die Idealform beschrieben, wobei ich das nochmal ein bisschen abkürzen würde:

Weitere Bilderquellen

  • Selbst Fotos schießen
  • Beim Hersteller nachfragen
  • Amazon Produktlink-Bilder komplett einbauen
  • Ausweichmotive (z.B. bei Werkzeugkasten das Werkzeug nehmen)
  • in Bilddatenbanken nach dem englischen Begriff oder Synonymen suchen

Online Bildbearbeitungstools

https://www.welt.de/wirtschaft/webwelt/article163024919/Diese-Online-Tools-erledigen-Photoshop-Aufgaben.html

Tendenziell gescheitert: Bootstrap-Slider manuell in WordPress einbauen

Inzwischen nutze ich das WordPress Plugin Slider Revolution.

JSSOR sah für mich erstmal vielversprechend aus. Dort kann man einen Slider online konfigurieren und hosten. Ich habe ihn ausprobiert und bin beim Importieren eines Bildes leider schon gegen einen Fehler gelaufen. Außerdem handhabt sich der Konfigurator doch ziemlich umständlich.

Zuerstmal muss man die Bilder selbst für den Slider vorbereiten. Erstmal alle auf die gleiche Höhe zuschneiden (weil sonst der Slider von Bild zu Bild in der Höhe springt und das nicht gut aussieht) – die minimale Breite für meine WordPress-Seite sollte 750px – sonst füllt das Bild den Slider-Rahmen nicht aus. Das geht am schnellsten mit Paint. Und dann noch mal die Bilder für’s Web komprimieren.

Diese Anleitung beschreibt also den Weg mit bootstrap carousel. Mit w3schools kann man den Code gleich online editieren, sieht die Änderungen sofort im Fenster rechts. Da das Editieren dort so komfortabel ist, macht man so lange, bis der Slider aussieht wie gewünscht. Die Bilder lädt man dazu in die WordPress-Mediathek und trägt die entsprechenden URLs dann in den HTML-Code ein.

Damit Bootstrap auf Deiner WordPress-Instanz laufen kann, musst Du es einmalig in der functions.php (Sidebar -> Design -> Editor) einbinden, und zwar ganz am Ende der Datei:


wp_register_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_style('bootstrap_css');
wp_register_script( 'jQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', null, null, true );
wp_enqueue_script('jQuery');
wp_register_script( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', null, null, true );
wp_enqueue_script('bootstrap');

Zu guter letzt copy den kompletten äußersten div-Block vom w3schools-Editor und paste ihn an die gewünschte Stelle Deines WordPress-Post (natürlich im Text-Modus).

CSS-Gefummel

Irgendwie scheint das unvermeidlich – dieses CSS-Gefummel, obwohl doch eigentlich in der Theorie schon alles passen sollte. Bei WordPress muss man den äußersten div noch von container in container-fluid umwandeln, damit er sich in sein umgebendes div einfügt. Auch hat WordPress die dumme Angewohnheit aus Linebreaks im Text-Editor ein br zu machen und aus zwei Linebreaks ein p. Dies führt natürlich zu unerwarteten Layout-Ergebnissen und zu noch mehr CSS-Gefummel. Abstellen kann man die sog. wpautop-Funktion für jede Seite/Post separat mit dem Plugin: toggle-wpautop. Dann noch bei jedem einfügen:
style="display: block; margin: 0 auto;"
damit die Bilder auch schön zentriert sind.

Ergebnis

Das manuelle Integrieren von Bootstrap in WordPress war irgendwie ein Gefummel. Die einzelnen Sliderelemente waren am Ende ungleich hoch, sodass beim sliden der Rahmen gesprungen ist. Bei der mobilen Version hat ein zusätzlich eingefügtes Zitat das komplette Bild verdeckt – an sich hätte ich erwartet, dass bei der mobilen Version aus Platzgründen der Text automatisch nicht angezeigt wird. Beim letzten WordPress oder template-update war meine Einbindung von bootstraß in meine WordPress-Instanz verschwunden, ohne dass ich es tagelang gemerkt habe. Alles in allem kein sauberes Ergebnis.