Archiv der Kategorie: WordPress

WordPress

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.

WordPress

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

Unsplash (Unspalsh Licence)

Wikimedia. Idealerweise in CC0 (= public domain) – die Suche muss über Google Bilder-Suche laufen, die eigene Suche ist schlecht.

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:

Bilder durch künstliche Intelligenz

Ideogram

„User Input and User Output. As part of your use of the Services, you may be able to input, post, upload and submit information (“User Input”) to the Services, and you may direct the Services to generate and output new content based on your User Input (“User Output”). We do not claim any ownership rights in your User Input or User Output, and we do not restrict your ability to use User Output for your own purposes (including for commercial purposes). (…) (Quelle)

craiyon (Gemälde)

„Except as otherwise provided herein, you may not modify, publish, transmit, reverse engineer, participate in the transfer or sale, create derivative works, or in any way exploit any of the content, in whole or in part, found on the Site. “ (Terms of use) Das ist eine Formulierung, die man auf vielen Websites findet.

„Images are not for resale.“ (Terms of use)

„Free Commercial License: (…) If you are an individual or an entity with less than 1 million United States dollars in annual revenue, you are permitted to use Images generated by the Service for the purpose of pursuing financial gain, provided that (1) a royalty of 20% is due on any revenues attributable to any blockchain transaction (such as selling NFT’s), and (2) we may revoke your right to use the Site or the Images at any time.“

„Free commercial use requires you to attribute images to Craiyon.“

Stable Diffusion

kostenls & ohne Anmeldung: https://stablediffusionweb.com/

„Images created through Stable Diffusion Online are fully open source, explicitly falling under the CC0 1.0 Universal Public Domain Dedication.“ (Quelle)

stockimg.ai (Fotos, Logo)

startet bei $19

https://stockimg.ai/

Illustroke (svg illustration)

ab $5

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

WordPress

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.