Danke Pop-Up bei Kommentaren – HTML Tipps

Du willst deinen aktiven Lesern gerne Danken, wenn sie kommentiert haben? Kein Problem, ich zeige dir in diesem Tutorial wie du ein Danke Popup erstellst, dass automatisch nach dem kommentieren erscheint!

[row] [column md=“6″]

Das Danke Pop-Up

 

Nachdem ich schon viele Tipps Beiträge wie Low Budget Foto Tipps, Erfolgreich Bloggen und Mehr Seitenaufrufe geschrieben habe, bekomme ich oft die Frage, wie sich das eine oder andere technisch auf dem Blog realisieren lässt. So wurde ich auch schon oft gefragt, wie man ein „Danke-Pop-Up“ erstellt, dass nach dem kommentieren automatisch erscheint. Daher habe ich mich entschlossen dies als unseren ersten HTML Tipp zu verraten. Hierbei müssen wir zwar mit Code arbeiten, aber ich werde Zeile für Zeile erklären, sodass jeder unabhängig vom Vorwissen, mitkommt.

[icon type=“fa fa-warning“] Dieses Tutorial konzentriert sich auf WordPress. Mit anderen Blog-Systemen sollte die Realisierung auch möglich sein, allerdings unterscheiden diese sich in einigen Punkten etwas von der Erklärung.

[/column] [column md=“6″]

 

 

[/column] [/row]

Werbung

[do_widget id=text-39] [row] [column md=“12″]

[/column] [/row] [row] [column md=“12″]

[icon type=“glyphicon glyphicon-star“] Der Editor

Zum Bearbeiten braucht Ihr dann noch einen Text Editor. Rein theoretisch reicht hier schon das bei Windows mitinstallierte Programm „Editor“ engl. „Notepad“ aus. Rein Theoretisch deshalb, weil dieser Editor kein Text-Highlighting durchführt.  Dies bedeutet: der Editor stellt einfach nur den Text dar, ohne Farblich zu kennzeichnen, dadurch ist es wesentlich schwerer zu lesen und zu erkennen. Daher empfehle ich euch das kostenlose Programm Notepad++, dieses Programm findet ihr für den Download im Internet unter diesem Link: Notepad++. Ich persönlich benutze am liebsten Dreamweaver. Aufgrund vom Preis lohnt sich dieses Programm aber erst, wenn man viel mit Code Arbeitet.

[/column] [/row] [row] [column md=“6″]

Editor

<button id=“btn“>Open Box</button>
<div id=“myBox“ class=“box“>
   <div class=“box-content“>
      <span class=“schliesen“>&times;</span>
      <p>Ganz Normaler Text…</p>
   </div>
</div>
[newDesign top=-250 left=500 width=1200]

[/newDesign] [/column] [column md=“6″]

Notepad++

<button id=„btn“>Open Box</button>
<div id=„myBox“ class=„box“>
   <div class=„box-content“>
      <span class=„schliesen“>&times;</span>
      <p>Ganz Normaler Text…</p>
   </div>
</div>
[newDesign top=-250 left=450 width=1200]

[/newDesign] [/column] [/row] [row] [column md=“12″]

[icon type=“glyphicon glyphicon-star“] Die Dateien

Nachdem wir uns um den Editor gekümmert haben müssen wir uns jetzt die Dateien vom Server holen, die wir bearbeiten müssen. Dazu nutzt Ihr am besten den von Eurem Hoster angebotenen FileBrowser in eurem Kontrollpanel. Alternativ könnt ihr euch die Daten über ein FTP Programm runterladen (Ich nutze hier die Freeware FileZilla. Dazu benötigt Ihr eure FTP Zugangsdaten, die Ihr auch im Kontrollpanel bei eurem Hoster findet.

Folgende Dateien brauchen wir:

/wp-content/themes/DerNameVonEurenTheme/single.php
/wp-content/themes/DerNameVonEurenTheme/functions.php

[notification type=“alert-danger“ close=“false“ ][icon type=“glyphicon glyphicon-warning-sign“] MACHT AUF JEDENFALL EINE KOPIE DER DATEIEN, BEVOR IHR SIE VERÄNDERT. DADURCH KÖNNT IHR SPÄTER ALLES ZURÜCKSETZEN! ICH ÜBERNEHME KEINE HAFTUNG FALLS EUER THEME WEGEN EINEM FEHLER NICHT MEHR FUNKTIONIERT.[/notification] [/column] [/row] [row] [column md=“6″]

[/column] [column md=“6″]

[/column] [/row] [row] [column md=“12″]

[icon type=“glyphicon glyphicon-star“] Das Popup

Jetzt wird es ernst, wir öffnen die Datei single.php mit Notepad++ (oder jeder andere Texteditor). Lasst euch von dem vielen Code nicht abschrecken und scrollt ganz unten zur Datei. Den nachfolgenden Code gibt Ihr dann vor

<?php get_footer();

oder vor

<?php get_footer(); ?>

ein. Dabei ist wichtig, dass ihr den Code nicht in den PHP-Bereich reinschreibt. Dieser beginnt immer mit <?php und endet immer mit ?>. Den Code müsst Ihr unbedingt außerhalb dieses Bereiches eintragen.

[/column] [/row] [row] [column md=“12″]

Der Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

 <?php
   if($_GET[ 'kommentar' ] == 'ja'){
?>

<style>
   .Pup{
       display: block;
      position: fixed; /* Stay in place */
       z-index: 1; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
  }

  .Pup-content {
       background-color: #fefefe;
      margin: 15% auto; /* 15% from the top and centered */
      padding: 20px;
      border: 1px solid #888;
      width: 80%; /* Could be more or less, depending on screen size */
  }

  .PupClose {
       color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
  }

  .PupClose:hover,
  .PupClose:focus {
       color: black;
      text-decoration: none;
      cursor: pointer;
  }
</style>

<div class="Pup" id="DankePup">
  <div class="Pup-content" >
    <span class="PupClose" onclick="document.getElementById('DankePup').style.display ='none';">&times;</span>
    Hier kannst du deinen HTML CODE einfügen!
  </div>
</div>

<?php
   }
?>
[/column] [/row] [row] [column md=“12″]

Erklärung

1. Neuen PHP Bereich öffnen.
2. Überprüfen ob durch die GET Methode kommentar gleich ja ist ( { = hier fängt der Bereich an, falls das stimmt.
3. PHP Bereich endet Hier.

5. Hier fängt CSS code an.
6. Formartierung für Hintergrund. (.Pup) ( mit { fängt der Bereich an)
7. Zeige das Popup als Block an
8. Das Popup soll immer an der gleichen Position vom Display fixiert sein.
9. Z-Index: Zeige das Objekt über allen anderen an.
10. & 11. Positionierung an eigentlicher Position.
12. & 13. Volle Breite und Länge.
14. Scrollleiste aktivieren, falls nötig.
15. & 16 Hintergrund soll etwas dunkler werden.
17. Ende für  (Formartierung für Hintergrund) mit }.

18. Formartierung für das Popup. (.Pup) ( mit { fängt der Bereich an).
19. Hintergrundfarbe festlegen.
20. Abstand nach Oben und unten 15% und automatische horizontale Zentrierung
21. Abstand vom Inhalt zum Rand
22. Rahmen ist 1px breit durchgängig und hat die Farbe #888 (Mittelgrau).
23. Die Breite vom Popup soll 80% sein.
24. Ende für (Formartierung für das Popup) mit }.

26. Formatierung für das Close Symbol.
27. Farbe für das Symbol #aaa (hellgrau)
28. Das Symbol soll sich rechts von Inhalt befinden.
29. Größe vom Symbol
30. Das Symbol soll Fett sein.
31. Ende für (Formatierung für das Close Symbol) mit }.

32. Was soll passieren, wenn man mit der Maus über das Schließen Symbol fährt (:hover) und wenn es mit der Tastatur ausgewählt wird (:focus).
34. Es soll Schwarz werden.
35. Es soll nicht unterstrichen sein.
36. Der Mauszeiger soll der Zeigefinger sein.
37. Ende für (Was soll passieren, wenn) mit }.

38. CSS Code Ende.

39. Box (div) die den Hintergrund erstellen soll.
40. Box (div die das Popup sein soll.
41. Schließen Symbol
42. Hier kannst du deinen HTML Text einfügen. (Du Kannst auch einfach etwas mit deinem Editor auf deinem Blog erstellen und dann bei Text (oder Quellcode) den ganzen HTML Code kopieren und hier einfügen.
43. Ende Der Popup Box.
44. Ende Der Hintergrund Box.

46. Anfang von einem Neuen PHP Bereich.
47. Ende von Dem was passieren soll, wenn die Überprüfung oben ja ergibt.
48. Ende vom PHP Bereich.
[/column] [/row] [row] [column md=“9″]

Das Schwierigste ist geschafft!

Wenn ihr bis hier hin gekommen seid und dabei noch nicht den Computer aus dem Fenster geworfen habt oder verrückt geworden seid, gratuliere ich schon mal. Ihr habt das schwierigste geschafft. Jetzt müssen wir nur noch eine Funktion schreiben, dass automatisch eine Information gesendet wird, sobald jemand Kommentiert hat.

Dazu gehen wir in die functions.php.

Hier gehen wir fast ganz an den Anfang von der Datei, sodass nur noch <?php davor steht. Hier fügen wir noch folgenden Code ein:

[/column] [column md=“3″]

[/column] [/row] [row] [column md=“6″]

Der Code

1
2
3
4
5
6
7

 function redirect_after_comment($location){
   $newurl = substr($location, 0, strpos($location, "#comment"));
   return $newurl . '?kommentar=ja';
}

add_filter('comment_post_redirect', 'redirect_after_comment');

 

[/column] [column md=“6″]

Erklärung

1. Wir erstellen eine neue Funktion und holen uns mit $loaction, die URL.
2. Wir holen uns den Teil der URL die wir brauchen und speichern sie unter $newurl.
4. Hier senden wir die neue URL und fügen hinten dran: ?kommentar=ja.
5. Ende der Funktion
7. Hier sagen wir WordPress er soll mit der neuen URL weiterleiten, sobald jemand kommentiert hat.
[/column] [/row]

Werbung

[do_widget id=text-39] [row] [column md=“12″] [/column] [row]

Zuletzt müssen wir die beiden Dateien noch hochladen und die Daumen drücken, dass jetzt alles funktioniert. Sollten Fehler auftreten könnt ihr mir gerne in den Kommentaren schreiben und ich werde versuchen euch zu Helfen. 🙂

Und fertig ist das Danke Popup [icon type=“fa fa-thumbs-o-up“]

Wie hat euch das Tutorial gefallen? Welche HTML/Wordpress Tutorials würdet ihr noch gerne lesen?

[xoxo]

 

 

Meine Kaufempfehlungen: (Affiliate Links)

[row] [column md=“3″ ]

[/column] [column md=“3″ ]

[/column] [column md=“3″ ]

[/column] [column md=“3″ ]

[/column] [/row] [row] [column md=“3″ ]

[/column] [column md=“3″ ]

[/column] [column md=“3″ ]

[/column] [column md=“3″ ]

[/column] [/row]

 

Anzeige

[do_widget id=text-39]

 

 

 
[row] [column md=“12″]

Kennst du schon?

[/column] [/row] [row] [column md=“6″]

SEO Tipps für Blogger

[/column] [column md=“6″]

Foto Equipment für Blogger

[/column] [/row] [row] [column md=“12″]

Kennst du schon?

[/column] [/row] [row] [column md=“6″]

Blogger Fragen & Antworten

[/column] [column md=“6″]

So wird Dein Blog zum Erfolg

[/column] [/row] [row] [column md=“12″]

Kennst du schon?

[/column] [/row] [row] [column md=“6″]

Blog vs Instagram

[/column] [column md=“6″]

Mehr Blog Traffic

[/column] [/row]

Ein Gedanke zu „Danke Pop-Up bei Kommentaren – HTML Tipps“

  1. Vielen, vielen Dank für dieses ausführliche Tutorial. Mit meinem neuen Blogdesign habe auch ich jetzt endlich ein wunderbares Danke Pop-Up 🙂
    Hab einen wundervollen Tag
    Liebste Grüße
    Sassi

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

* Die DSGVO-Checkbox ist ein Pflichtfeld

*

Ich habe die Datenschutzerklärung gelesen und stimme der Speicherung meiner Daten zu.

Die mobile Version verlassen