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

Slider in WordPress einbauen

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.

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.

Mein Kollege hat mir inzwischen ein kostenpflichtiges Plugin empfohlen, welche ich beim nächsten Mal ausprobieren werde, weil das mit bootstrap doch irgendwie ein Gefummel war.

Also bleibe ich beim 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.

Hier (unter Jury) kann man das Ergebnis begutachten

Related Posts in WordPress

Mit Related Posts (also der automatische Vorschlag von weiteren Artikeln, die der Leser noch lesen kann, wenn er mit dem aktuellen Artikel fertig ist) hält man den Leser länger auf der Website, bindet ihn stärker an diese, erhöht die Chance auf eine Conversion und erhöht auch schlicht den Traffic. Außerdem schafft man eine zusätzliche interne Verlinkung, die Google gefällt.
Hierfür finde ich das WordPress-Plugin ‚Contextual Related Posts‘ ideal – es ist in 10 Minuten installiert, aktiviert und konfiguriert (sehr intuitiv).
Besonders schön finde ich, dass das Plugin automatisch kleine Thumbnails erzeugt, die verlockender für den Leser sein dürften, als bloßer Text. Und so sieht das ganze dann in meinem Magazin für IT Freiberulfer aus:

Anleitung für genauere Konfiguration von ‚Contextual Related Posts‘.

Für’s Archiv: ‚Related Posts by Taxonomy‘ hat volle Punktzahl bei 49 Bewertungen, über 9000 aktive Installationen, verspricht leichtgewichtig zu sein und wurde vor 1 Monate zum letzten Mal aktualisiert. Daher probierte ich das zuerst aus.
Der Einbau geht über Shortcodes. Wer also die Related Posts hinter seinen Artikeln sehen möchte, muss [related_posts_by_tax] hinter jeden Artikeltext anfügen. Da ich die Related Posts hinter jedem Artikel sehen möchte, http://www.guru-20.info/post-signatur-ende-wordpress-beitrag-text-einfuegen/ -> das hat nicht auf Anhieb geklappt und daher hab ich ein anderes Plugin ausprobiert. Insgesamt ist die Config auch sehr codenah und daher sehr umständlich -> schnell mal eben geht dort nicht.

Adsense in WordPress einbinden

Wer in Adsense Reports über seine verschiedenen Domains vergleichen möchte, kann dies auch mit ein und derselben Anzeige tun: Leistungsberichte -> Häufig verwendete Berichte -> Websites

Das geeignete WordPress-Plugin hierfür ist Advanced Ads.

 

Initiale Konfiguration

Advanced Ads -> Einstellungen -> AdSense-ID eingeben (diese findet sich im Google AdSense-Konto -> Einstellungen -> Kontoinformationen)
Auf gleicher Seite anhaken „Auf maximal 3 AdSense-Anzeigen beschränken“.

 

Neue Anzeige im Google Adwordskonto anlegen

Dieser Schritt ist eigentlich nur einmal nötig, wenn man immer das gleiche Anzeigenformat und keine ausgefeilten statistischen Untersuchungen braucht. Nach dem Anlegen der Anzeige dauert es auch einige Zeit, bis die Anzeige nutzbar ist.

Sprechenden Namen für den Anzeigentyp aussuchen

Responsive & Text- und Displayanzeigen

 

Advanced Ads

Anzeigen -> Neue Anzeige
-> Namen wählen (idealerweise wie im Adsense-Konto)
-> „AdSense Anzeige“ auswählen
-> Anzeigen-ID einfügen (nicht verwechseln mit Publisher-ID) & Typ: Responsive
-> Position: zentral & anhaken „Aktiviere diese Funktion, wenn sich …“
-> 2 * keine Bedingung

Platzierungen: ich wähle erfahrungsgemäß als Idealplätze: nach zweitem Absatz & am Ende des Artikels

Header Image selbst erstellen

Eine Möglichkeit, ein modernes und hübsches Header Image zu erstellen, ist es, ein geeignetes Foto auszuwählen, zurecht zu schneiden und den Domainnamen und einen Slogan als Text über dieses Foto zu legen. Exemplarisch an meinem aktuellen Nischenseiten-Projekt für Waffenkoffer möchte ich das in diesem Artikel zeigen.

Natürlich sollte man gerade für das Header Image ein Foto wählen, welches keine Nennung des Urhebers erfordert, am besten verwendet man also ein Foto aus der Fotodatenbank Pixabay. Dieses sollte thematisch passen – man findet jedoch dort kaum Fotos mit den notwendigen Header-Abmessungen. Diese werden i.d.R. vom WordPress-Theme empfohlen und finden sich als Ratschlag dort, wo man auch das Header Image wählen kann. Also muss man ein Foto wählen, welches auch nach dem Zuschneiden noch ein interessantes Foto ergibt und davon die größte Auflösung downloaden (erfordert Anmeldung bei Pixabay).

Beispiel des Rohbildes:

Paint sollte man nicht benutzen, weil die Schrift nicht separat gespeichert und irgendwann wieder editiert werden kann, sondern mit dem Bild verschmilzt. Daher nimm für die Headerbild-Gestaltung das Online-Designtool canva.com. Wähle hier „Benutzerdefinierte Abmessungen verwenden“. Dann schau im WordPress-Theme nach (Appearance -> Customize -> Header-Image (o.Ä.)), wie groß das Bild sein sollte und gib diese Abmessungen bei canva.com ein. Lade das Rohbild hoch. Dann zieht man das Bild so lange in die passende Größe, bis der Bildausschnitt optisch ansprechend ist.

Beispiel nach dem Zuschneiden:

Jetzt braucht es noch die Schrift in der passenden Größe, Schriftart und Farbe. Ich wähle die Domain selbst und einen Slogan als Text. Die Farbe stimmt man mit den dominanten Elementen auf dem Bild ab – hier die Patronenhülse. Mit

Mit Just Color Picker kann man die Farbe der Patrone als Hexwert(!) bestimmen. Das muss man ein bisschen try&error-mäßig machen, weil sich selbst benachbarte Pixel in der Farbe unterscheiden. Danach gibt man den Farbwert in einen Online-Colormatcher ein, um die dazu passenden Farben herauszufinden.

In meinem Beispiel passt zu (8d6c36) am besten (DBA753)

Das Ergebnis kann sich sehen lassen: