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.

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:

Intelligente WordPress Newsletter-Popups

Für mein Magazin für IT Freelancer suchte ich nach einem passenden WordPress Newsletter-Popup.

Anforderungen:
* modernes Design
* intelligentes Timing:
1.) nicht stumpf bei jedem Aufruf der Seite – so nervt und vergrault man Stammleser.
2.) nicht öffnen vor dem Lesen des Artikels – da weiß der Leser noch gar nicht, ob ihn der Newsletter Deiner Seite überhaupt interessieren könnte.
3.) Am besten erscheint das Popup, wenn der Leser die Seite wieder verlassen möchte, sog. Exit intent popups

Ich habe drei Stunden vergeblich nach einem passenden kostenlosen Popup-Plugin gesucht:
* Pop Up Extension vom Newsletter Plugin: kostet (gebündelt mit anderen Features) 39€ jährlich und ist lt. einem Kollegen sehr unflexibel.
* WordPress Calls to action: soweit ich das verstehe ist das Popup-Erweiterung kostenpflichtig. Insgesamt finde ich das Tool nicht sehr übersichtlich.
* Popup Builder: in der kostenlosen Version kann man ein Popup erzeugen, welches man mittels eines solchen Codes in die Seite einbauen kann: [sg_popup id=1]. Wenn man eine Seite aufruft, poppt das Popup gleich zu Beginn auf und auch wenn der User ein zweites Mal auf die Seite kommt, wird er mit dem Popup genervt. Ein sinnvoller Einsatz ist eben nur mit der kostenpflichtigen Version möglich.
* Huzzle: hat mir meine WordPress-Installation zerschossen.
* PopupAlly: funktioniert gut auf den ersten Blick – ich kann es jedoch nicht mit dem Newsletter-Plugin von WordPress kombinieren, da es einen externen Newsletter-Anbieter erfordert.
* I.T.RO. Popup Plugin: Default-Design ist arg unmodern – es gibt auch keine Templates. Das Popup erscheint, bevor der Besucher den Artikel überhaupt gelesen hat.

Nach drei Stunden erfolgloser Suche nach einem kostenlosen Plugin, habe ich auf den Ratschlag eines Kollegen gehört und https://codecanyon.net/item/ninja-popups-for-wordpress/3476479 für ca. $35 (bei CodeCanyon wird der Nettopreis angezeigt) geholt. Die Designvorlagen sind sehr modern, die Bedienung ist nicht ganz einfach – da ist einiges an Fuddelei von Nöten. So muss man die Popups generell enablen und konfigurieren und dann nochmal für’s Plugin selbst. Der Editor des Plugins funktioniert noch nicht ganz intuitiv und manche Popup-Templates scheinen noch buggy zu sein. Alles in allem lohnte sich der Kauf und bis dato kenne ich kein empfehlenswerteres Plugin für diesen Zweck.

Man achte darauf, dass man beim Popup selbst bei den Cookie-Einstellungen jeweils 60 Tage einstellt, also sowohl bei ‚Cookie Time on Conversion‘ als auch bei ‚Cookie Time on Close‘. Wenn die Werte bei 0 bleiben, wird der User bei jeder neuen Session neu vom Popup genervt. Leider erscheint das Popup auch zwei Mal, wenn man sowohl Welcome popup als auch Exit popup aktiviert hat, obwohl man das Welcome popup schon deaktiviert hat. Also habe ich das Welcome popup global deaktiviert, damit das Popup nur einmal erscheint und nicht beim zweiten Mal schon nervt. Auch habe ich beim Popup selbst die Weiterleitung zu einer anderen URL deaktiviert, wenn er auf’s Overlay klickt. Weil mir das selbst auch schon öfter aus Versehen passiert ist und es irgendwie genervt hat plötzlich die Kontrolle zu verlieren. Man muss aber darauf achten, dass der Newsletter selbst beim speichern nicht kaputt geht. Das ist mir auch schon mal passiert. Da scheint der Editor doch ziemlich buggy zu sein. Am besten man macht einen Screenshot, bevor man etwas an den Einstellungen ändert, damit man den Newsletter wieder reproduzieren kann.