Substitutionen Kommentar Kommentar hinzufügen. Feinabstimmung des Kommentarformulars

Ich habe in letzter Zeit meine Akten durchwühlt. WordPress-Themen, nämlich die Regeln für die Kommentaranzeigevorlage, nebenbei das Verständnis ihrer Struktur und verschiedener Funktionen, die für die Anzeige von Kommentaren zu Blogbeiträgen verantwortlich sind. Infolgedessen habe ich die Standardausgabe geändert, eine eigene Datei comments.php erstellt und eingebunden. Ich habe mich entschieden, das Ergebnis in Form eines Artikels herauszugeben, da ich dieses Thema gut verstanden habe und es ziemlich viel Material gab.

Ich hoffe, dass dieser Artikel für Besitzer von WordPress-Blogs nützlich ist, die mit HTML, CSS und PHP vertraut sind.

***

In WordPress wird zum Verbinden einer Kommentarvorlage mit einem Beitrag oder einer Seite die Funktion comments_template() verwendet, die zwei Parameter benötigt:

  • Der erste ist der Pfad zur Vorlagendatei, standardmäßig ist dies comments.php im Ordner mit dem aktuellen Design
  • Der zweite wird verwendet, um Kommentare nach Typ zu trennen (normal, Trackbacks und Pingbacks), standardmäßig falsch

Lassen Sie uns comments_template() nach der Post-Ausgabe in die Single.php-Post-Vorlage oder die Page.php-Seitenvorlage einfügen.

Eine Beschreibung und akzeptierte Argumente für die comments_template()-Funktion und andere im Artikel erwähnte Funktionen finden Sie im WordPress-Codex.

Vorlagenvorbereitung

Versuchen wir, die WP-Kommentarvorlagen zu verstehen und eine Datei zum Anzeigen von Kommentaren zu Blogbeiträgen und -seiten mit unseren eigenen Händen zu erstellen. Als Referenzbeispiele können Sie Vorlagen aus Standard-WordPress-Themes nehmen. Lassen Sie uns erstellen neues Dokument auf jeden Texteditor, nennen wir es comments.php und beginnen mit der Bearbeitung.

  • Im Prinzip kann man die Datei beliebig benennen und dann den Pfad zu dieser Datei in comments_template() schreiben, aber man bleibt besser beim Standardnamen
  • Sie können die Datei übrigens im WP-Admin-Panel bearbeiten
  • Es ist natürlich am besten, Code zu schreiben und seine Aktion sofort in Ihrem Blog oder auf einem lokalen Server zu überprüfen.

In WordPress ist es möglich, Kommentare für einzelne Beiträge zu deaktivieren, daher müssen Sie vor der Anzeige auf „Offenheit“ prüfen:

Dies ist der Wrapper-Code für unsere nächsten Schritte. Bereiten wir nun den Container für den Kommentarblock vor

mit semantisch korrekter Klasse oder Bezeichner (eine Klasse ist natürlich vorzuziehen):

Innen

Schreiben Sie den Titel so, dass Ihre Leser verstehen, dass es sich um Kommentare und sonst nichts handelt, Tag

wird genau das Richtige dafür sein:

"

Hier haben wir eine der WordPress-Funktionen angegeben - the_title() , das Ergebnis der Ausführung dieser Funktion ist der Titel des aktuellen Beitrags oder der aktuellen Seite. Wenn Sie den Titel nicht anzeigen möchten, können Sie einfach "Leserkommentare" schreiben.

Außerdem müssen Sie vor dem Anzeigen von Kommentaren sicherstellen, dass sie verfügbar sind, d. h. überprüfen, ob es - Ausgabe gibt volle Liste, wenn nicht, dann können Sie dem Benutzer so etwas wie "" zeigen. So wird dem Besucher deines Posts / deiner Seite klar, dass noch niemand etwas geschrieben hat, und der motivierende Satz „Du kannst der Erste sein“ erhöht die Wahrscheinlichkeit, dass er dir schneller etwas schreibt.

Nach einer solchen Problemstellung wird also klar, dass wir zur Implementierung if/else-Konstrukte und eine Funktion zur Anzeige der Anzahl der Kommentare get_comments_number() benötigen. Wenn die Funktion 0 (Null) zurückgibt, zeigen wir "Noch keine Kommentare ..." an, andernfalls "Leserkommentare ...":

Es gibt noch keine Kommentare, aber Sie können der Erste sein

Leserkommentare zum Artikel ""

Diskussionen für diese Seite sind geschlossen

Ausgabe von Kommentaren

Toll, wir haben die Titel je nach Vorhandensein oder Fehlen von Kommentaren angezeigt, jetzt ist es logisch, die Kommentare selbst anzuzeigen - dafür ist die Funktion wp_list_comments() zuständig. Die Standardfunktion umschließt alle Kommentare in Tags

  • , also sollten Sie einen Wrapper hinzufügen
      mit Klassenzuordnung.Kommentarliste:

      wp_list_comments() akzeptiert ein Array von Argumenten, mit denen Sie die Ausgabe von Kommentaren flexibel anpassen können. Sie können beispielsweise die Avatargröße, den Kommentarantworttext und andere Einstellungen durch Passieren ändern Stichwort und Bedeutung:

      $args = array("avatar_size" => 64, // Avatargröße ist 64*64px, Standard ist 32 Kommentartyp)

      Besondere Aufmerksamkeit verdient der Callback-Parameter, der den Wert des Namens der benutzerdefinierten Kommentarausgabefunktion annimmt. Es ermöglicht Ihnen eine flexible Anpassung Aussehen jeden Kommentar. So sieht es aus Standardfunktion Ausgabe aus der Datei comment-template.php:

    1. id="li-kommentar-">
      "); ?> %S sagt:"), get_comment_author_link()) ?>
      comment_approved == "0") : ?>
      $Tiefe, "max_Tiefe" => $args["max_Tiefe"]))) ?>

      Der einfachste Weg ist, diese Funktion zu nehmen und sie selbst zu bearbeiten und sie dann als benutzerdefinierte Funktion aufzurufen, indem Sie sie in die Datei comments.php oder functions.php schreiben.

      Nachdem Sie Kommentare aufgelistet haben, können Sie ihr Aussehen über CSS-Stile ändern. Einige wp_list_comments()-Optionen werden in der WP-Administration, Registerkarte Optionen → Diskussion dupliziert, insbesondere das Vorhandensein von Baumkommentaren, die Sortierung nach Datum usw.

      Formular zum Einreichen von Kommentaren

      Verwenden Sie zum Hinzufügen eines Kommentarformulars die Funktion comment_form(). Fügen wir es unterhalb der Liste der Kommentare hinzu:

      Es gibt noch keine Kommentare, aber Sie können der Erste sein

      Leserkommentare zum Artikel ""

      1. 64, "reply_text" => "Antwort", "callback" => "my_comments"); wp_list_comments($args); ?>

      Diskussionen für diese Seite sind geschlossen

      Mit diesem Aufruf lädt comment_form() den Standardcode aus der WordPress-Datei comment-template.php. Die Funktion benötigt zwei Parameter:

      Comment_form($args, $post_id);

      • $args - Array von Formularausgabeeinstellungen
      • $post_id - ID des Beitrags, auf den die Funktion angewendet wird, standardmäßig der aktuelle Beitrag

      Lassen Sie uns zum Beispiel HTML5-Formularfelder validieren und Texthinweise hinzufügen. Lassen Sie uns ein Array $args erstellen, um die gewünschten Einstellungen einzugeben:

      $args = array(); comment_form($args);

      In das Array müssen Sie die Einstellungsschlüssel schreiben:

      $args = array("fields" => apply_filters("comment_form_default_fields", $fields));

      Jetzt müssen wir die Array-Variable $fields ausfüllen, die die Formularfelder enthält. Am einfachsten ist es, den Standard-WordPress-Code aus der comment-template.php zu nehmen und ihn ein wenig zu modifizieren:

      "

      " . ($req ? " *" : "") . "

      ", "E-Mail" => " ", "URL" => "

      " . "

      "); $args = array("fields" => apply_filters("comment_form_default_fields", $fields)); comment_form($args); ?>

      Hier sind die Werte der Parameter author , email und url jeweils der HTML-Code der Felder Name, Mail und Website. Diese Werte müssen bearbeitet werden.

      Für die Felder müssen wir die folgenden Attribute hinzufügen:

      • erforderlich - macht die Felder obligatorisch, fügen Sie es für die Felder "Name" und "Site" hinzu
      • Platzhalter - fügt dem Feld einen Texthinweis hinzu
      • pattern="(3,)" für das Feld "Name" - geben Sie den Namen in den Buchstaben des lateinischen oder russischen Alphabets und einer Länge von mindestens 3 Zeichen an
      • type="email" für das Feld "Mail" - dies fügt eine HTML5-E-Mail-Validierung hinzu
      • autocomplete - aktiviert die automatische Vervollständigung für Felder
      • type="url" für das Feld "Site".

      Beachten Sie, dass die neuen HTML5-Attribute in älteren Browsern nicht funktionieren. Diejenigen Browser, die die neuen Feldtypen nicht verstehen, zeigen sie einfach als Text an, d.h. .

      Außerdem habe ich für meinen Blog an einigen Stellen Tags getauscht, Klassen zum Stylen hinzugefügt, als Ergebnis habe ich folgenden $fields-Array-Code erhalten:

      "

      ", "E-Mail" => " ", "URL" => "

      "); ?>

      Wir haben die Dateneingabefelder geändert. Lassen Sie uns nun das Kommentarformular selbst bearbeiten

      " ?>

      Dies ist der Standard-WordPress-Code, ich habe ihn nur ein wenig modifiziert – ich habe einen Texthinweis hinzugefügt und eine zusätzliche Klasse für das Styling hinzugefügt.

      Hier ist, was ich mit CSS-Styling erreicht habe:

      WordPress-Kommentarformular mit HTML5-Attributen

      Ergebnis

      Abschließend werfe ich meinen resultierenden comments.php-Code ab:

      Artikelleser ""

      • Seien Sie der Erste, der kommentiert - der Autor hat es versucht
      1. id="li-kommentar-">
        "); ?> %S schreibt:"), get_comment_author_link()) ?>
        comment_approved == "0") : ?>
        $Tiefe, "max_Tiefe" => $args["max_Tiefe"]))) ?>
        "Antwort", "Rückruf" => "verstaka_comment"); wp_list_comments($args); ?>
      "

      ", "E-Mail" => " ", "URL" => "

      "); $args = array("comment_notes_after" => "", "comment_field" => "

      ", "label_submit" => "Senden", "fields" => apply_filters("comment_form_default_fields", $fields)); comment_form($args); ?>

      Diskussionen für diese Seite sind geschlossen

      FAQ zu Kommentaren

      Wie werden Autoren- und Benutzerkommentare hervorgehoben?

      Manchmal ist es sehr praktisch, ein separates Erscheinungsbild für Autorenkommentare einzustellen, dafür gibt es sogar spezielle Plugins. Sie können jedoch auf Plugins verzichten, indem Sie einfach Stile für die Klasse .bypostauthor in die CSS-Datei schreiben. Ebenso können Sie Stile für Benutzerkommentare festlegen - .bypostuser:

      Wie gestaltet man Baumkommentare?

      Um Baumkommentare zu aktivieren, müssen Sie zur WP-Administration gehen, Einstellungen → Diskussion → Baumkommentare zulassen. Jetzt haben die untergeordneten Kommentare eine Baumstruktur, sie können mit separaten Stilen versehen werden, z. B. eingerückt. Sie müssen lediglich die CSS-Regeln für die Liste mit der Klasse .children festlegen:

      Commentlist .children ( padding: 0 0 0 40px; /* linke Padding für untergeordnete Kommentare */ )

      Stile für gerade und ungerade Kommentare

      WordPress gibt ungeraden Kommentaren standardmäßig die class.even , even comments.odd . Durch diese Klassen ist es einfach, Ihre eigenen Stile festzulegen:

      Commentlist .even ( /* Stile für ungerade Kommentare */ ) .commentlist .odd ( /* Stile für gerade Kommentare */ )

      Wie schließe ich Kommentare zu einem einzelnen Beitrag?

      Ganz einfach - gehen Sie auf die Seite zum Schreiben eines Beitrags, Bildschirmeinstellungen → Diskussionen, ein Diskussionsblock erscheint unter dem Beitragsfeld, deaktivieren Sie den Punkt Kommentare zulassen.

      • Wenn Sie Ihre eigene Kommentarvorlage zusammenstellen, können Sie die comments.php-Dateien aus Standard- und anderen kostenpflichtigen und kostenlosen WordPress-Designs verwenden
      • Eine Alternative zu Standardkommentaren sind Plugins für Kommentarformulare von Drittanbietern, wie z. B. das beliebte DISQUS
      • Es ist durchaus möglich, den Code direkt in der Datei comment-template.php selbst zu bearbeiten, jedoch wird im Falle eines WordPress-Updates der gesamte Code überschrieben – Sie müssen ihn erneut bearbeiten
      • Denken Sie daran – es gibt keine perfekte Kommentarvorlage

      Helfen Sie dem Projekt

      65 Stimmen, Durchschnitt: 4,46 von 5)

      Es ist an der Zeit, sich ernsthaft mit dem Stylen von WordPress-Kommentaren zu befassen. In fast allen Themes werden sie über Systemdateien konfiguriert, was wiederum die Bearbeitung einzelner Funktionen einschränkt. Ich denke, viele Leute sind darauf gestoßen, als sie Änderungen an den Kommentaren vornehmen mussten, aber nicht genau finden konnten, wo es sich befindet. Daher ist es besser, die gesamte Funktionalität auf das aktuelle Thema zu übertragen, was uns die vollständige Kontrollfreiheit gibt.

      In diesem Artikel habe ich einige coole Funktionen zusammengestellt, die helfen werden, Kommentare zu verbessern. Dennoch ermöglichen sie Ihnen, Dialoge sowohl mit dem Site-Administrator als auch zwischen Benutzern zu führen. Beantworten Sie Fragen, starten Sie verschiedene Diskussionen, führen Sie im Allgemeinen eine vollwertige virtuelle Kommunikation ein. Daher ist es notwendig, ihnen Aufmerksamkeit zu schenken und sie in die richtige Form zu bringen.

      Folgendes werden wir tun:

      • Vollständige Anpassung
      • Erscheinungsstil
      • Kommentarnummerierung
      • Beitragsanzahl pro Benutzer
      • Weisen Sie jedem Benutzer einen Status zu
      • Und andere Kleinigkeiten

      Wir werden jeden Artikel separat analysieren und am Ende des Artikels werden alle Funktionen vollständig zu einem vorgefertigten Code zusammengefügt.

      Anpassen von Kommentaren

      In WordPress werden Kommentare mit der Funktion wp_list_comments angezeigt, normalerweise in der Datei comments.php. Und die Bildung einzelner Funktionen wird, genau wie die Schleife selbst, aus dem Template der Systemdatei comment-template.php verwendet. In seltenen Fällen kommt es jedoch vor, dass sich die Einstellung im WordPress-Theme, in der Datei functions.php oder in der Datei comments.php befindet.

      Wenn Ihr Thema also nicht in einen seltenen Fall fällt und Sie Ihre eigenen Einstellungen vornehmen müssen, öffnen Sie die Datei functions.php und fügen Sie den folgenden Code vor dem Zeichen ?> ein:

      If (! function_exists("my_comment")) : function my_comments($comment, $args, $depth) ( global $commentnumber; $GLOBALS["comment"] = $comment; switch ($comment->comment_type) : case " pingback" : case "trackback" : ?>

    2. ", ""); ?>
    3. id="li-kommentar-">
      comment_parent) $avatar_size = 39; echo get_avatar($comment, $avatar_size); /* Übersetzer: 1: Autor des Kommentars, 2: Datum und Uhrzeit */ printf(__("%1$s %2$s", "my_press"), sprintf(" %S", get_comment_author_link()), sprintf(" ", esc_url(get_comment_link($comment->comment_ID)), get_comment_time("c"), /* Übersetzer: 1: Datum, 2: Zeit */ sprintf(__("%1$s %2$s", " my_press"), get_comment_date(), get_comment_time())))); ?>
      comment_approved == "0") : ?>
      __("Antwort", "meine_Presse"), "Tiefe" => $Tiefe, "max_Tiefe" => $args["max_Tiefe"]))); ?>
      ", ""); ?>

      Fügen Sie dann in der Datei comments.php eine Anruffunktion hinzu:

        "meine Kommentare")); $kommentarnummer = 0; ?>

      Nach diesen Manipulationen werden Ihre Kommentare gemäß der Vorlagenfunktion aus der Datei functions.php des aktuellen Designs generiert.

      Zählen der Kommentare jedes Benutzers

      Mit der unten stehenden Funktion können wir die Gesamtzahl der hinterlassenen Beiträge neben dem Kommentator anzeigen. So können Sie beobachten, wie aktiv der Nutzer ist, und selbst dann sind Statistiken gerade in dieser Hinsicht nicht überflüssig.

      Wir öffnen die uns bereits bekannte Datei functions.php und schreiben am Ende vor dem Zeichen?> folgenden Code:

      // Benutzerbeiträge zählen Funktion bac_comment_count_per_user() ( global $wpdb; $comment_count = $wpdb->get_var("SELECT COUNT(comment_ID) FROM ". $wpdb->comments. " WHERE comment_author_email = "" . get_comment_author_email() ." " AND comment_approved = "1" AND comment_type NOT IN ("pingback", "trackback")"); if ($comment_count == 1) ( echo " 1 Post"; ) else ( echo " " . $comment_count . " Beiträge "; ) )

      Jetzt müssen Sie die Anruffunktion an der gewünschten Stelle hinzufügen:

      Nachrichten werden basierend auf der E-Mail des Benutzers gezählt, sowohl registrierte als auch nicht. Kommentare werden nur vom Site-Administrator bestätigt, nicht aber im Standby-Modus berücksichtigt und gelöscht.

      Abhängig von der Anzahl der Kommentare weisen wir jedem Benutzer einen Status zu

      Genau hier spielt die Statistik durchaus eine wichtige Rolle. Da die Funktion auf der Grundlage der Anzahl der Nachrichten aufgebaut ist, gibt die erreichte Anzahl dem Benutzer den richtigen Status. Dies wird theoretisch in jedem Forum verwendet, um die Autorität des Benutzers auf dieser Ressource zu zeigen.

      Öffnen Sie die Datei functions.php erneut und fügen Sie den folgenden Code vor dem Zeichen ?> ein:

      //Benutzerstatusfunktion get_author_class($comment_author_email,$user_id)( global $wpdb; $adminEmail = get_option("admin_email"); $author_count = count($wpdb->get_results("SELECT comment_ID as author_count FROM $wpdb->AdminUseR "; if($autor_zahl>=1 && $autor_zahl<50 && $comment_author_email !==$adminEmail) echo "Прохожий"; else if($author_count>=50 && $autorenzahl<100 && $comment_author_email !==$adminEmail) echo "Новичок"; else if($author_count>=100 && $autorenzahl<250 && $comment_author_email !==$adminEmail) echo "Знающий"; else if($author_count>=250 && $autorenzahl<400 && $comment_author_email !==$adminEmail) echo "Опытный"; else if($author_count>=400 &&$autorenzahl<800 && $comment_author_email !==$adminEmail) echo "Бывалый"; else if($author_count>=800 && $autorenzahl<1200 && $comment_author_email !==$adminEmail) echo "СуперПупер"; else if($author_count>Professor"; )

      Und an der gewünschten Stelle geben wir die Call-Funktion aus:

      comment_author_email,$comment->user_id)?>

      Erläuterung: Die Funktion ist wie die vorherige mit der E-Mail des Benutzers verknüpft. Nur ist hier die Hauptaufgabe nicht einfach das Zählen von Nachrichten, sondern die Anzahl von und bis abhängig von der eingestellten Anzahl. Und sobald der Nutzer diese erreicht, bekommt er eine bestimmte Position. Es gibt insgesamt 7 Status, plus einen Admin und ein Abzeichen für registrierte Teilnehmer.

      Komplett fertiger Kommentarcode

      Hier sind wir am Ende dieses Artikels angelangt. Hier war ich nicht zu faul und sammelte alle Funktionen, einschließlich der Einrichtung von Kommentaren, in einem vorgefertigten Code. Ich fügte meine eigenen Erscheinungsstile hinzu und das Ergebnis war so etwas wie ein Mini-Forum.

      Öffnen Sie die Datei functions.php und fügen Sie am Ende vor dem Zeichen?> folgenden Code hinzu:

      // Benutzerbeiträge zählen Funktion bac_comment_count_per_user() ( global $wpdb; $comment_count = $wpdb->get_var("SELECT COUNT(comment_ID) FROM ". $wpdb->comments. " WHERE comment_author_email = "" . get_comment_author_email() ." " AND comment_approved = "1" AND comment_type NOT IN ("pingback", "trackback")"); if ($comment_count == 1) ( echo " 1 Post"; ) else ( echo " " . $comment_count . " Beiträge "; ) ) //Benutzerstatusfunktion get_author_class($comment_author_email,$user_id)( global $wpdb; $adminEmail = get_option("admin_email"); $author_count = count($wpdb->get_results("SELECT comment_ID as author_count FROM $ wpdb->comments WHERE comment_author_email = "$comment_author_email" ")); if($comment_author_email ==$adminEmail) echo "Admin"; if($user_id!=0 && $comment_author_email !=$adminEmail) echo "UseR"; if ($autor_zahl>=1 && $autor_zahl<50 && $comment_author_email !==$adminEmail) echo "Прохожий"; else if($author_count>=50 && $autorenzahl<100 && $comment_author_email !==$adminEmail) echo "Новичок"; else if($author_count>=100 && $autorenzahl<250 && $comment_author_email !==$adminEmail) echo "Знающий"; else if($author_count>=250 && $autorenzahl<400 && $comment_author_email !==$adminEmail) echo "Опытный"; else if($author_count>=400 &&$autorenzahl<800 && $comment_author_email !==$adminEmail) echo "Бывалый"; else if($author_count>=800 && $autorenzahl<1200 && $comment_author_email !==$adminEmail) echo "СуперПупер"; else if($author_count>=1200 && $comment_author_email !==$adminEmail) echo "Professor"; ) // Kommentare anpassen if (! function_exists("wordsmall_comment")) : function wordsmall_comment($comment, $args, $depth) ( global $commentnumber; $GLOBALS["comment"] = $comment; switch ($comment- > comment_type) : case "pingback" : case "trackback" : ?>

    4. id="li-kommentar-">
      %S", get_comment_author_link()); ?> comment_parent)( $comment_parent_href = htmlspecialchars(get_comment_link($comment->comment_parent)); $comment_parent = get_comment($comment->comment_parent); ?> @ Antwort für:Kommentar_Autor;?>
      comment_parent) $avatar_size = 60; echo get_avatar($comment, $avatar_size); ?> comment_author_email,$comment->user_id)?>
      comment_approved == "0") : ?>
      ", ""); ?> __("Antwort", "wallpress"), "Tiefe" => $Tiefe, "max_Tiefe" => $args["max_Tiefe"]))); ?>

      Öffnen Sie nun die Datei comments.php, darin finden wir die Funktion zum Aufrufen von Kommentaren. Sieht aus wie das:

      Wechseln Sie zu diesem:

        "wordsmall_comment")); ?>

      Letzter Schritt. Öffnen Sie die Datei style.css und fügen Sie am Ende die folgenden Stile hinzu:

      Meine_Kommentarliste( Rand-oben:keine; ) .meine_Kommentarliste .Kommentar ( Polsterung:0 0 15px 0; Rand:keine; ) .meine_Kommentarliste .pingback( Polsterung:0 0 15px 0; Rand:keine; ) .meine_Kommentarliste .Kommentar .Kinder ( list-style-type: none; padding:0px; margin-left:0px;/*if you need padding for tree com.set it to 15px*/ ) .my_commentlist .comment .children .comment( margin:15px 0 0 0 ; Rahmen: keine; Auffüllung: 0; ) #Kommentare ( Hintergrund: #fff; ) #Kommentare .meine_Kommentarliste ( Rand: 10px 0; Auffüllung: 0; Listenstil: keine; Hintergrund: #ebf0f3; Auffüllung: 5px; ) # Kommentare .meine_Kommentarliste .Kommentar ( Rand: 0; Polsterung: 0 0 10px; Hintergrund: #fff; ) #Kommentare .meine_Kommentarliste .mein_Kommentarautor ( Anzeige: inline; Rand rechts: 1px solide #e0e0e0; Breite: 100px; Float: left; margin: 0px 15px 10px 0; ) #comments .my_commentlist .commentmetadata ( float:left; ) #comments .my_commentlist p ( clear:none; color: #555; font: 14px arial; line-height: 23px; ) # Kommentare .meine_Kommentarliste .Kommentarinhalt nt(Rand links: 116px; Polsterung rechts: 10px; ). : #515456; Anzeige: Inline-Block; Schriftgröße: 13px; Schriftstärke: normal; Zeilenhöhe: 30px; Rand rechts: 15px; Mindesthöhe: 30px; Polsterung: 0 12px; Textausrichtung: zentriert ; text-decoration: none; ) .my_commentlist .avatar( border: medium none; border-radius: 50%; float: none; margin: 5px auto; padding: 0px; display: table; ) .my_commentlist .comment-header( Höhe: 30 Pixel; Hintergrund: #DEE5EB; Rand unten: 15 Pixel; ) .meine_Kommentarliste zitieren.fn (Farbe: #444; Schriftart: fett 13 Pixel/30 Pixel Arial; Polsterung links: 10 Pixel; ) .meine_Kommentarliste .com_date (Farbe: # 8ca0b5; Schriftart: normal 13px/30px arial; float: rechts; padding-right: 15px; ) .my_commentlist .comment-body ( overflow: hidden; position: relativ; Hintergrund:#fff; ) .my_commentlist .rep-authorcom ( Farbe: #25394e; Schriftgröße: 13px; Zeilenhöhe: 30px; ) .my_commentlist .edit-link a ( Hintergrund: keiner !wichtig; Rahmen: keiner !wichtig; Rahmenradius: 0 !wichtig; Farbe: #999!wichtig; Anzeige: Inline-Block; Schriftgröße: 11px !wichtig; Schriftstärke: normal; Zeilenhöhe: 30px; Rand rechts: 5px !wichtig; Mindesthöhe: 30px ; padding: 0 !wichtig; Textausrichtung: zentriert; Textdekoration: keine; ) .com_per ( Rahmen: mittel keine; Farbe: #666; Anzeige: Block; Schriftgröße: 11px; Textausrichtung: zentriert; ) .vip1, .vip, .vp, .vip2, .vip3, .vip4, .vip5, .vip6, .vip7 (Rand: mittel ohne; Schriftart: fett 13px Arial; Anzeige: Block; Textausrichtung: Mitte; Rand- unten: 5px; Textdekoration: keine; ) .vp (Farbe: #e82e24;) .vip1 (Farbe: #348be8;) .vip2 (Farbe: #BE005E;) .vip3 (Farbe: #2e517e;) .vip4 ( Farbe: #658a18;) .vip5 (Farbe: #00A56D;) .vip6 (Farbe: #e35d28;) .vip7 (Farbe: #99A400;) .vip (Farbe: #4c5176; Schriftgröße: 11px; Rand: 0 ;)

      Der Code funktioniert vollständig und verursacht keine Fehler, aber geringfügige Änderungen an CSS-Stilen können erforderlich sein.

      Hallo Freunde! Vladimir Savelyev ist in Kontakt. Heute zeige ich Ihnen, wie Sie ein WordPress-Kommentarformular erstellen, anpassen und schön gestalten, mit und ohne Plugins... Und wir werden eine sehr wichtige Frage analysieren: Beeinflussen Kommentare das Blog-Ranking in Suchmaschinen? Aber der Reihe nach...

      In diesem Artikel gehe ich auf folgende Fragen ein:

      • So passen Sie das WordPress-Kommentarformular an die Bedürfnisse des Publikums an;
      • Wie man Kommentare schön mit CSS gestaltet;
      • Wie man Kommentare von Blog-Autoren ohne Plugin hervorhebt;
      • Wie man sich selbst einen Gravatar macht, um sein Foto anzuzeigen, wenn man eigene und andere Blogs kommentiert;
      • Welche wichtigen Plugins müssen installiert werden, damit das Kommentarmodul Funktionen hinzufügt;
      • Wie man Emoticons in das Kommentarformular einfügt und durch originellere ersetzt;

      Tatsache ist, dass ich selbst in letzter Zeit in meinem Blog an die Form von WordPress-Kommentaren erinnert habe und auf der Suche nach den notwendigen und richtigen Informationen viel Zeit in Anspruch genommen habe. Wenn ich jetzt auf einen solchen Artikel stoßen würde, in dem fast alle Informationen gesammelt sind, würde ich viel Zeit sparen und diese Zeit wichtigeren Themen widmen, nicht technischen!

      Übrigens Glückwunsch zum ersten Schnee! Ich weiß nicht, wie es euch geht, aber in unserer Stadt schneit es heute den ganzen Tag, in Erwartung des bevorstehenden neuen Jahres und des Geruchs von Mandarinen =) Ich hatte keine Zeit, den vergangenen Sommer zu genießen, ich war die ganze Zeit im Geschäft und Arbeit, ich habe nicht gemerkt, wie Sommer ist und verging = (Nun, okay, ich werde immer noch Zeit haben, mich zu entspannen und auszuruhen. Wie meine geliebte Frau sagt, werde ich mich im Ruhestand ausruhen!

      Okay, jetzt kommen wir zurück zum Thema!

      Beginnen wir damit, wie WordPress-Kommentare die Blog-Rankings in Suchmaschinen beeinflussen?! Die Antwort liegt auf der Hand - das ist der Einfluss von PF, also Verhaltensfaktoren!

      Betrachten Sie ein Beispiel: Es gibt zwei Blogs, einer hat ein WordPress-Kommentarformular, der andere nicht! Der Besucher ist zum Blog gegangen, wo er einen interessanten Artikel gelesen hat, und das war's, er wird wahrscheinlich nicht wieder auf die Seite des Materials zurückkehren, stimmen Sie mir zu?

      Und auf dem Blog, in dem es Kommentare gibt, liest der Besucher nach dem Lesen des Artikels auch die Kommentare. Ich frage mich, was andere Leute zu diesem Thema schreiben! Und wenn sich der Besucher auch an der Diskussion beteiligt, dann wird es im Allgemeinen großartig =) Wie oft wird er auf diese Seite gehen, um zu überprüfen, ob ihm jemand geantwortet hat?!

      Übrigens bin ich auf eine Ressource gestoßen, bei der ein Experiment mit zwei Blogs eingerichtet wurde, auf einem Blog gab es Kommentare und auf dem anderen nicht. Der Blog, der kommentiert wurde, entwickelte sich also erfolgreich weiter und die Besucherzahlen wuchsen im Vergleich zu einem anderen Blog!

      Dank Kommentaren erhöht sich die im Blog verbrachte Zeit sowie die Anzahl der direkten Besuche, wodurch die Leistung der Website oder des Blogs verbessert wird, und das sind noch nicht alle Pluspunkte!

      Genug Theorie, weiter geht's mit der Praxis!

      So passen Sie das WordPress-Kommentarformular an

      Tatsächlich ist die Einrichtung des Kommentarmoduls sehr einfach und wird nicht viel Zeit in Anspruch nehmen. Alles, was Sie tun müssen, ist, die Kästchen anzukreuzen, wo ich es getan habe! Befolgen Sie die Anweisungen und Sie werden auf die bestmögliche Weise erfolgreich sein!

      So gestalten Sie das Kommentarformular schön

      Zu diesem Zeitpunkt benötigen Sie zumindest Grundkenntnisse in CSS und HTML. Wenn Sie sie nicht haben, tun Sie dies auf eigene Gefahr und vergessen Sie nicht, den Originalcode vor der Bearbeitung zu speichern.

      Um das Design von Kommentaren zu ändern, müssen Sie es in den Einstellungen finden, Aussehen - Editor - Stylesheet (style.css), etwa so wie dieser Code:

      Kommentarliste div.comment(background:#f6f6f6;margin-bottom:15px;padding:10px 10px 10px 80px;position:relative;border: 1px solid #bbb; border-radius: 8px;)

      Kurz gesagt, wir suchen alle Stilrichtungen, die mit beginnen Kommentar, und ändern Sie ihren Wert nach Ihrem Geschmack und Ihrer Farbe. Experimentieren!

      So markieren Sie Autorenkommentare ohne Plugin

      Warum ist das nötig?! Nun, zunächst einmal gibt es dem Besucher eine Vorstellung davon, wer neben anderen Kommentatoren der Autor des Blogs ist! Es erleichtert auch dem Blog-Autor die Navigation!

      Das Plugin wird helfen, dieses Problem zu lösen - Hervorheben von Autorenkommentaren, aber ich bin kein Befürworter von Plugins, da eine große Anzahl von ihnen den Blog negativ beeinflusst! Daher versuche ich, wann immer möglich, alles im Code zu machen, wozu ich Ihnen rate!

      Um dieses Feature mit Code ohne Plugin zu implementieren, müssen Sie eine neue Style-Klasse mit dem Blog-Administrator-Login in den Einstellungen hinzufügen: Darstellung - Editor - Stylesheet (style.css).

      Bei mir sieht der Code so aus:

      Kommentarliste div.Kommentar-Autor- Ihr Login am Eingang zum Admin-Panel(Hintergrundfarbe:#f5f5e1!wichtig;Rand unten:15px;Auffüllung:10px 10px 10px 80px;Position:relativ;Rand: 1px durchgehend #bbb; Randradius: 8px;)

      Und ändern Sie das Design, anders als bei anderen Kommentaren! Alles ist einfach!

      Um zu verhindern, dass ein Angreifer Ihr echtes Login kennt, schreiben Sie den Code in die functions.php

      Funktion del_login_css($css) (
      foreach ($css as $key => $class) (
      if (strstr ($class, "YOUR REAL LOGIN")) (
      $css[$key] = "KOMM MIT EINER FIKTION"; ) )
      gib $css zurück;
      }
      add_filter("comment_class", "del_login_css");

      So erstellen Sie Ihren eigenen Gravatar (Foto in den Kommentaren)

      Wenn Sie möchten, dass Ihr Foto beim Kommentieren Ihres eigenen oder anderer Blogs angezeigt wird und kein leeres Bild, dann müssen Sie Folgendes tun. Registrieren Sie sich auf https://ru.gravatar.com

      Wir füllen alle Pflichtfelder aus und fertig! Jetzt ist Ihr Foto immer bei Ihnen, wobei Sie die E-Mail angeben, an die das Bild angehängt ist! Es ist wichtig, dass Sie sich mit der E-Mail-Adresse registrieren, die Sie normalerweise beim Kommentieren eingeben.

      Wichtige WordPress-Kommentar-Plugins

      Ich werde die drei wichtigsten Kommentar-Plugins auflisten, die ich in meinem Blog habe. Ich empfehle Ihnen, sie zu installieren!

      • Kommentarumleitung von Yoast - First Comment Thanks Plugin! Zuerst müssen Sie eine Dankesseite erstellen und ihren Pfad in den Plugin-Einstellungen eingeben!
      • WordPress Zero Spam ist ein unsichtbares Captcha, das zum Schutz vor Spam entwickelt wurde, es stört Kommentatoren nicht, Rechenbeispiele zu lösen, sie sehen es nur nicht ...
      • - Abonnement von Kommentaren. Funktionsprinzip: Der Besucher, der einen Kommentar geschrieben hat, kann seine Updates abonnieren und Abonnements verwalten.

      Emoticons in WordPress-Kommentarform

      Lesen Sie den Artikel zum Erstellen und Ersetzen von Standard-Emoticons durch andere.

      Das ist alles! Ich hoffe, Sie haben es geschafft, alles einzurichten. Wenn Sie Ihre Frage zum WordPress-Kommentarformular nicht gefunden haben, können Sie gerne einen Kommentar schreiben, und ich werde ihn gerne beantworten! Wenn Ihnen der Artikel gefallen hat, abonnieren Sie Blog-Updates und empfehlen Sie ihn Ihren Freunden, indem Sie unten auf die Schaltflächen für soziale Netzwerke klicken! Ich werde sehr dankbar sein! Bis bald in einem neuen Artikel!


      Mit freundlichen Grüßen Vladimir Saveliev

      Premium-Lektionen vom webformyself-Club

      Dies ist ein neues revolutionäres Produkt im Bereich der Website-Erstellung! Die besten Video-Tutorials werden an einem Ort gesammelt und in Kategorien unterteilt: WordPress, Joomla, PHP, HTML, CSS und JavaScript... Die Datenbank wird ständig aktualisiert und enthält jetzt mehr als 200 Lektionen! In nur einem Jahr werden Sie „von der Pike auf“ zum erfahrenen Webmaster!

      Mehr

      Es ist schon eine Weile her, dass ich etwas über WordPress geschrieben habe. Deshalb werde ich heute mit Ihnen teilen, wie Sie das Kommentarformular in WordPress manuell ändern können. Ich denke, dass dieses Wissen für jeden unerfahrenen Blogger nützlich sein kann, da das Kommentarformular manchmal das einzige Kommunikationsmittel zwischen Besuchern und dem Autor ist. Geh nicht vorbei :)

      Bevor wir irgendwelche Manipulationen mit dem Code beginnen, möchte ich Sie im Voraus warnen, dass wir die Dateien von WordPress selbst bearbeiten werden und nicht die Theme-Dateien. Ja, es mag für jemanden gefährlich erscheinen, für jemanden sinnlos, jemand wird es einfach nicht mögen :) Aber ich habe es genau so gemacht und hatte keine Probleme. Ich rate Ihnen, vor dem Start eine Sicherungskopie der bearbeiteten Datei zu erstellen.
      Ich habe Sie vor der Sicherheit gewarnt, jetzt möchte ich das Ergebnis zeigen, zu dem ich gekommen bin.


      Wie wir sehen können, wird die Zeile „Ihre E-Mail wird nicht veröffentlicht. Erforderliche Felder sind markiert *". Besucher müssen nicht als hirnlose Idioten betrachtet werden. Sie verstehen, was getan werden muss und was nicht. Ich habe auch die Feldnamen in den Feldern selbst versteckt. Was sind das für fette Beiträge? Die Mehrzahl der Besucher, die bereits ohne Flurnamen sind, können „mit dem Auge“ erkennen, welcher zu welchem ​​gehört. Aber interne Hinweise sollten noch vorhanden sein. Nun, die Beschriftung zum Kommentarfeld hat ihre unnötige Kühnheit verloren. Meiner Meinung nach ist es viel besser und freier geworden.

      Also lasst uns bald etwas ändern! ;)
      Wir gehen in den Ordner unserer Website und finden darin die Datei wp-includes/comment-template.php. Wir suchen darin die Zeile 1522, ja, ja, genau die. Wie ich es selbst gefunden habe, ist eine ganze Geschichte, davon erzähle ich euch etwas später :)
      Öffnen Sie also die Datei zum Bearbeiten und gehen Sie zu Zeile 1522. Jetzt sind sie und die folgenden (bis 1529) ungefähr so:

      $fields = array("Autor" => "

      " . "" . ($req ? " *" : "") . "

      ", "E-Mail" => " ", "URL" => "

      " . "

      ",);

      Wie einfach und klar alles ist. Es reicht aus, einfach alles Überflüssige herauszuschneiden und etwas hinzuzufügen. Der Parameter wird angehängt

      Placeholder="Hinweistext" !}

      Mit dieser Option können Sie beliebigen Text in den Feldern anzeigen. Wir verwenden es, um Hinweise anzuzeigen:

      "

      " "

      " "

      "

      Löschen wir die Zeilen:

      "

      " . "" . ($req ? " *" : "") "

      "

      Sie sind dafür verantwortlich, die Beschriftungen über den Feldern anzuzeigen.
      Als Ergebnis ALLER dieser Manipulationen erhalten wir Folgendes:

      $fields = array("Autor" => "

      ", "E-Mail" => "

      ", "URL" => "

      ",);

      Bleibt nur noch der blöde Hinweis „Ihre E-Mail wird nicht veröffentlicht. Erforderliche Felder sind markiert *". Löschen Sie dazu die Zeile (ca. 1537):

      "comment_notes_before" => "

      " .__("Ihre E-Mail-Adresse wird nicht veröffentlicht.") .($req ? $required_text: "") . "

      ",

      Das scheint alles zu sein, jetzt ist unsere Form etwas attraktiver geworden. Ich hoffe, diese Informationen sind für jemanden nützlich :)

      Abonnieren, kommentieren, ich freue mich über jeden adäquaten Kommentar. Vielleicht weiß ich etwas selbst nicht und du kannst es anders machen, teile deine Gedanken.

      WordPress hat verschiedene Arten von Inhalten wie Beiträge, Seiten, Kommentare. WordPress ist eine sehr flexible Plattform, mit der Sie die wichtigsten Arten von Inhalten an Ihre Website anpassen können. Sie können das Erscheinungsbild ändern. In diesem Tutorial zeigen wir Ihnen, wie Sie das Verhalten und die Darstellung von Kommentaren auf einer WordPress-Site ändern können.

      Schritt 1. Die Funktion verstehen comment_form und seine Argumente

      Betrachten Sie die WordPress-Funktion comment_form. Es ist verantwortlich für die Anzeige des Kommentarformulars, das auf der Seite oder im Beitrag angezeigt wird. Der Aufruf dieser Funktion ist hauptsächlich in der Datei zu finden kommentare.php im Themenordner. Diese Datei ist an verschiedenen Stellen enthalten, zB in Dateien single.php Und seite.php, direkt oder über einen Aufruf der comments_template-Funktion.

      Eine Beschreibung des Features finden Sie im WordPress-Codex.

      Wenn Sie die Funktion comment_form zum Rendern eines Formulars verwenden, wird es mit den Standardparametern gerendert und enthält Felder wie Name, E-Mail (beide Felder sind erforderlich), Website und Kommentarinhalt. Im Standardthema Twenty Eleven sieht das Formular so aus.

      Einige wichtige Argumente für die Funktion comment_form:

      • Felder - mit ihrer Hilfe können Sie die Ausgabe von Feldern im Kommentarformular steuern.
      • comment_notes_before und comment_notes_after werden verwendet, um Informationen vor und nach dem Formular anzuzeigen.
      • title_reply – wird verwendet, um den Titel der Antwort zu ändern, der standardmäßig „Eine Antwort hinterlassen“ lautet.
      • label_submit - wird verwendet, um den Text auf der Kommentar-Senden-Schaltfläche zu ändern.

      Schritt 2. Passen Sie das Kommentarformular mit der Funktion an Kommentarformular

      Lassen Sie uns nun unser Kommentarformular anpassen, indem wir Argumente an die Funktion comment_form übergeben.

      Falls wir die Felder im Kommentarformular anpassen müssen, müssen wir eine Liste davon an die Funktion comment_form übergeben. Standardmäßig verwendet die Funktion die folgende Liste von Feldern:

      $fields = array("Autor" => "

      " . "" . ($req ? " *" : "") . "

      ", "E-Mail" => " ", "URL" => "

      " . "

      ",);

      Wenn wir ein Feld entfernen müssen, sagen wir website , müssen wir es nur aus dem Array ausschließen und das Array an die Funktion comment_form übergeben.

      $commenter = wp_get_current_commenter(); $req = get_option("require_name_email"); $aria_req = ($req ? " aria-required="true"" : ""); $fields = array("Autor" => "

      " . "" . ($req ? " *" : "") . "

      ", "E-Mail" => " ",); $comments_args = array("fields" => $fields); comment_form($comments_args);

      Darüber hinaus ändern wir auch den Namen des Formulars in „Bitte geben Sie uns Ihren wertvollen Kommentar“ und die Bezeichnung auf der Schaltfläche in „Sende meinen Kommentar“.

      Um die Aufgabe abzuschließen, übergeben wir die folgenden Argumente an die Funktion comment_form:

      $commenter = wp_get_current_commenter(); $req = get_option("require_name_email"); $aria_req = ($req ? " aria-required="true"" : ""); $fields = array("Autor" => "

      " . "" . ($req ? " *" : "") . "

      ", "E-Mail" => " ",); $comments_args = array("fields" => $fields, "title_reply"=>"Bitte geben Sie uns Ihren wertvollen Kommentar", "label_submit" => "Send My Comment"); comment_form($comments_args);

      Das Kommentarformular sieht nun so aus:

      Schritt 3 Entfernen von Feldern aus einem Formular mit einem Haken

      Auch das WordPress-Kommentarformular kann mit Hooks und Filtern modifiziert werden. Dieses Setup kann besonders nützlich sein, wenn Sie mit einem Plugin arbeiten, wenn Sie einige Elemente optimieren, aber die Designdateien nicht ändern müssen. Filter zum Hinzufügen oder Entfernen von Formularfeldern - ' comment_form_default_fields '

      Lassen Sie uns das URL-Adressfeld mit einem Filter entfernen. Der obige Code kann in einem Plugin oder in einer Datei verwendet werden Funktionen.php aktives Thema.

      Funktion remove_comment_fields($fields) ( unset($fields["url"]); $fields zurückgeben; ) add_filter("comment_form_default_fields","remove_comment_fields");

      Schritt 4: Hinzufügen von Daten zum Kommentarformular mit einem Hook

      Mit dem Filter „comment_form_default_fields“ können wir Felder zum Formular hinzufügen. Lassen Sie uns das Altersfeld des Autors mit einem Filter hinzufügen und dieses Feld mit zusätzlichen Daten speichern und in den Kommentaren anzeigen.

      Fügen Sie ein Feld wie dieses hinzu:

      Funktion add_comment_fields($fields) ( $fields["age"] = "

      " . "

      "; $Felder zurückgeben; ) add_filter("comment_form_default_fields","add_comment_fields");

      #respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-age label, #respond .comment-form-comment label ( Hintergrund: #eee; -webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8); -moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8); box-shadow: 1px 2px 2px rgba(204,204,204, 0.8); Farbe: #555; Anzeige: Inline-Block; Schriftgröße: 13px; Links: 4px; Mindestbreite: 60px; Polsterung: 4px 10px; Position: Relativ; Oben: 40px; Z-Index: 1; )

      Jetzt sieht unser Kommentarformular so aus:

      Das Alter wird nun als zusätzliche Information gespeichert. Sie müssen einen Hook in ' comment_post ' verwenden:

      Funktion add_comment_meta_values($comment_id) ( if(isset($_POST["age"])) ( $age = wp_filter_nohtml_kses($_POST["age"]); add_comment_meta($comment_id, "age", $age, false); ) ) add_action("comment_post", "add_comment_meta_values", 1);

      Sobald die Daten gespeichert sind, können sie in einem Kommentar wie diesem angezeigt werden:

      Kommentar_ID, "Alter", wahr); ?>

      Schritt 5 Kommentare für bestimmte Beitragstypen festlegen

      Manchmal möchten Sie Felder in Kommentaren nur für bestimmte Arten von Beiträgen verwenden. Ändern wir den Code so, dass das Altersfeld nur für den Datensatztyp book angezeigt wird:

      Funktion add_comment_fields($fields) ( if(is_singular("books")) ( $fields["age"] = "

      " . "

      "; ) $fields zurückgeben; ) add_filter("comment_form_default_fields","add_comment_fields");

      Schritt 6. Erstellen Sie eine Rückgabefunktion zum Anzeigen von Kommentaren

      Die Funktion wp_list_comments wird verwendet, um Kommentare in Beiträgen anzuzeigen. Der WordPress-Codex beschreibt das Feature im Detail.

      wp_list_comments hat ein 'Callback'-Argument, das verwendet werden kann, um eine Funktion zu definieren, die aufgerufen wird, wenn ein Kommentar angezeigt wird.

      Im Thema Twenty Eleven in der Datei kommentare.php Sie können die Zeile finden:

      wp_list_comments(array("callback" => "twentyelf_comment"));

      Ändern wir es zu:

      wp_list_comments(array("callback" => "my_comments_callback"));

      Die Funktion my_comments_callback wird für jeden Beitrag aufgerufen.

      Schritt 7 Styling der Kommentare

      Jetzt werden wir den Stil des Kommentars ein wenig ändern. Wir zeigen einfach den Inhalt des Beitrags und das Altersfeld an, das wir zuvor hinzugefügt haben. Wir werden auch die Hintergrundfarbe für Kommentare ändern.

      Funktionscode „ my_comments_callback “:

      Funktion my_comments_callback($Kommentar, $Argumente, $Tiefe) ( $GLOBALS["Kommentar"] = $Kommentar; ?>

    5. id="li-kommentar-">

      Kommentar_ID, "Alter", wahr); ?>

      __("Antwort ↓", "zwanzig"), "Tiefe" => $Tiefe, "max_Tiefe" => $args["max_Tiefe"]))); ?>
    6. Ändern Sie die Hintergrundfarbe wie folgt:

      Kommentarliste > li.comment ( background: #99ccff; border: 3px solid #ddd; -moz-border-radius: 3px; border-radius: 3px; margin: 0 0 1.625em; padding: 1.625em; position: relative; )



  • Wird geladen...
    Spitze