Änderungen an den Themedateien

Ich gehe hier einfach mal davon aus, dass euer WordPress auf der aktuellen Version vorliegt. Auch bezieht sich diese Beschreibung auf Themes, die auf TwentyTen basieren. Dies betrifft hauptsächlich die Dateinamen. In eurem Theme kann es sein, das die entsprechende Datei eventuell anders heißt.

Es werden folgende Dateien modifiziert:

functions.php
Hier kommt – wie der Name der Datei schon sagt – die ganze Funktionalität rein. Also die Funktionen zum Erweitern des Formulars, zum Speichern der Daten und zur Ausgabe in den Kommentaren.

styles.css
Hier wird bekanntlich das Styling definiert. Sowohl für das überarbeitete Kommentarformular als auch für die Kommentare selbst, die ja nun die Icons enthalten sollen.

Anpassung der functions.php

Zunächst die Funktionen. In der functions.php werden einige neue Funktionen definiert, wodurch es möglich wird, das Kommentarformular zu erweitern und die eingegebenen Daten auch zu speichern und wieder auszulesen.

Als erstes wird festgelegt, welche Felder hinzugefügt werden sollen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * New fields in commentform.
 */

if(!function_exists('my_commentform_get_new_fields')) {
    function my_commentform_get_new_fields() {
        $array_NewCommentFields = array(
            // Twitter
            array(
                'name' => 'comment-twitter',
                'label' => __('Twittername <em>(without @)</em>', 'my-text-domain')
            ),
            // Facebook
            array(
                'name' => 'comment-facebook',
                'label' => __('Facebook <em>(complete URL)</em>', 'my-text-domain')
            )
        );

        return $array_NewCommentFields;
    }
}

Wie hier zu sehen ist, sind es im Beispiel erst einmal Twitter und Facebook, welche dem Kommentarformular hinzugefügt werden sollen. Diese Liste kann – dem Muster entsprechend – beliebig erweitert werden. Ich habe hierfür eine eigene Funktion gewählt, da diese Informationen in mehreren anderen Funktionen zu Verfügung stehen müssen.

Nun können die neuen Felder dem kommentarformular hinzugefügt werden. Dies bedarf auch wieder einer Funktion.

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
/**
 * Adding fields to the commentform..
 *
 * @uses my_commentform_get_new_fields();
 */
if(!function_exists('my_comment_meta')) {
    function my_comment_meta($fields) {
        $array_NewCommentFields = my_commentform_get_new_fields();

        if(!empty($array_NewCommentFields)) {
            foreach($array_NewCommentFields as $custom_field) {
                $custom_field_value = '';
                if(isset($_COOKIE['comment_author_' . $custom_field['name'] . '_'. COOKIEHASH])) {
                    $custom_field_value = $_COOKIE['comment_author_' . $custom_field['name'] . '_'. COOKIEHASH];
                }

                $custom_field_name = $custom_field['name'];
                $fields[$custom_field_name] = '<p class="comment-form-' . str_replace('comment-', '', $custom_field_name) . '">' . '<label for="' . $custom_field_name . '">' . $custom_field['label'] . '</label> ' . '<input id="' . $custom_field_name . '" name="' . $custom_field_name . '" type="text" value="' . esc_attr($custom_field_value) . '" size="30" /></p>';
            }
        }

        return $fields;
    }

    add_filter('comment_form_default_fields', 'my_comment_meta');
}

In dieser Funktion werden die Informationen aus der vorher definierten Funktion my_commentform_get_new_fields(); in Zeile 9 geholt und in einem Array abgelegt, welches dann der Reihe nach durchlaufen wird. Bei jedem Durchlauf wird geprüft, ob der Kommentator eventuell schon ein Cookie hat in dem auch schon entsprechende Daten stehen (Zeile 14 bis 16). Sollte dies der Fall sein, so werden diese Daten in einer Variable hinterlegt, welche später verarbeitet wird. In Zeile 19 wird das neue Feld erstellt und gegebenenfalls gefüllt.

Nun müssen natürlich auch noch die Daten in die Datenbank geschrieben werden. Dies erledigt die folgende Funktion.

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
/**
 * Writing new fields from commentform to database.
 *
 * @uses my_sanitize_twittername();
 * @uses my_commentform_get_new_fields();
 */
if(!function_exists('my_add_comment_meta')) {
    function my_add_comment_meta($comment_id) {
        $array_NewCommentFields = my_commentform_get_new_fields();

        foreach($array_NewCommentFields as $custom_field) {
            if(isset($_REQUEST[$custom_field['name']]) && $_REQUEST[$custom_field['name']] != '') {
                if($custom_field['name'] == 'comment-twitter') {
                    add_comment_meta($comment_id, $custom_field['name'], my_sanitize_twittername($_REQUEST[$custom_field['name']]), true);
                } else {
                    add_comment_meta($comment_id, $custom_field['name'], $_REQUEST[$custom_field['name']], true);
                }

                setcookie('comment_author_' . $custom_field['name'] . '_'. COOKIEHASH, $_REQUEST[$custom_field['name']], time() + 30000000, COOKIEPATH);
            } else {
                setcookie('comment_author_' . $custom_field['name'] . '_'. COOKIEHASH, '', time() + 30000000, COOKIEPATH);
            }
        }
    }

    add_action('comment_post', 'my_add_comment_meta');
}

Auch hier wird wieder die Information geholt, welche Felder hinzugefügt werden sollen, wie in Zeile 9 zu erkennen ist. Diese werden wieder in einem Array abgelegt und durchlaufen. Bei jedem Durchlauf wird hier geprüft, ob dieses Feld ausgefüllt ist. Das heißt, ob wirklich etwas drin steht (Zeile 12). In Zeile 13 fällt der Sonderfall Twitter auf, welcher hier abgefragt wird. Da in dem Feld wirklich nur der Twittername ohne @-Zeichen gefragt ist, muss das natürlich überprüft werden. Denn wie wir alle wissen, Nutzer lesen nicht immer und schreiben da auch gerne mal den kompletten Link zu ihren Twitterprofil rein. Also muss das hier bearbeitet werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * Patch:
 * Falls doch der komplette Link eingegeben wurde
 * oder ein @ vor dem Twitternamen, nur den Twitternamen
 * herausfiltern.
 */

if(!function_exists('my_sanitize_twittername')) {
    function my_sanitize_twittername($var_sTwittername) {
        if(strstr( $var_sTwittername, 'http') || strstr($var_sTwittername, '/') || strstr($var_sTwittername, '@')) {
            $array_TwitterParts = explode('/', $var_sTwittername);

            if(is_array($array_TwitterParts)) {
                $var_sTwittername = str_replace('@', '', array_pop($array_TwitterParts));
            }
        }

        return $var_sTwittername;
    }
}

Nun ist es an der zeit die Daten auch auszugeben. Dafür muss einfach die Kommentardarstellung etwas erweitert werden. Diese findet sich für gewöhnlich auch innerhalb der functions.php in einer Funktion comment();. Im TwentyTen-Theme nennt heißt sie twentyten_comment(); als Beispiel. Diese Funktion wird an der gewünschten Stelle erweitert.

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
$array_CommentMeta = get_comment_meta($comment->comment_ID, NULL);
$array_NewCommentFields = my_commentform_get_new_fields();

/**
  * Display twitter and facebook icons for a commenter.
  */
echo '<div id="comment-author-profiles">' . "\n";
echo '<ul class="comment-author-profile-services">' . "\n";

if($comment->user_id != '0') {
    $var_sCommentAuthorProfileLinkTwitter = my_sanitize_twittername(get_user_meta($comment->user_id, 'twitter', true));
    $var_sCommentAuthorProfileLinkFacebook = get_user_meta($comment->user_id, 'facebook', true);

    echo '<li><a class="comment-author-twitter" href="http://twitter.com/#!/' . $var_sCommentAuthorProfileLinkTwitter . '"></a></li>';
    echo '<li><a class="comment-author-facebook" href="' . $var_sCommentAuthorProfileLinkFacebook . '"></a></li>';
} else {
    if(is_array($array_CommentMeta) && count($array_CommentMeta) != '0') {
        foreach($array_NewCommentFields as $custom_field){
            switch($custom_field['name']) {
                // Twitter
                case 'comment-twitter':
                    $var_sCommentAuthorProfileLink = 'http://twitter.com/#!/' . my_sanitize_twittername($array_CommentMeta[$custom_field['name']]['0']);
                    echo '<li><a class="comment-author-' . str_replace('comment-', '', $custom_field['name']) . '" href="' . $var_sCommentAuthorProfileLink . '"></a></li>';
                    break;

                default:
                    $var_sCommentAuthorProfileLink = $array_CommentMeta[$custom_field['name']]['0'];
                    echo '<li><a class="comment-author-' . str_replace('comment-', '', $custom_field['name']) . '" href="' . $var_sCommentAuthorProfileLink . '"></a></li>';
                    break;
            }
        }
    }
}

echo '</ul>';
echo '</div>';

Auch hier werden erst wieder die Informationen über die neuen Felder in ein Array gepackt (Zeile 2), welches dann später (ab Zeile 17) durchlaufen wird. In Zeile 1 werden die Daten, welche zu diesem Kommentar gehören, aus der Datenbank geholt. Eine Prüfung, ob der Kommentator ein angemeldeter Nutzer war, oder ein Besucher des Blogs, findet in Zeile 10 statt. Der Sonderfall Twitter wird mit dem Block ab Zeile 21 berücksichtigt.

Ich habe diese Ausgabe bei mir direkt unter den Gravatar gesetzt, so dass ich nicht mehr zu viel im CSS herumspielen musste um die Icons an die angepeilte Position zu bekommen.

Anpassung des CSS

Da ich es schöner finde, wenn diese beiden zusätzlichen Felder im Kommentarformular nebeneinander stehen und nicht untereinander, habe ich das auch im CSS so umgesetzt.

1
2
3
4
/* Kommentarformular - zusätzliche Felder */
.comment-form-twitter {width:47%; float:left; margin-right:24px !important;}
.comment-form-facebook {width:47%; float:left;}
#commentfield-clear {clear:both; height:0px;}

Und hier nun der ganze Trick, wie die Profilicons unter das Gravatar des Kommentators kommen.

1
2
3
4
5
6
.comment-author-profile-services {margin:0; display:block; width:60px;}
.comment-author-profile-services {width:40px; left:2px; position:absolute; top:50px;}
.comment-author-profile-services li {list-style:none outside none; float:left; margin:0 4px 0 0;}
.comment-author-profile-services li a {background-image:url("images/social/author-profiles-sprite.png"); background-repeat:no-repeat; display:block; height:16px; margin:0 0 4px; width:16px;}
.comment-author-profile-services .comment-author-facebook {background-position: 0 0;}
.comment-author-profile-services .comment-author-twitter {background-position: 0 -16px;}

In diesem Beispiel wird ein Sprite verwendet, welches die beiden 16×16 Pixel großen Icons enthält. Natürlich können die Icons auch einzeln eingesetzt werden, dazu sollten dann aber die letzten drei Zeilen im CSS dementsprechend angepasst werden.

Ich wünsche euch viel Spaß damit :-)

Artikel / Seite weiterempfehlen

10 Meinungen zu “WordPress: Kommentarformular um Twitter und Facebook erweitern

  1. Danke für diese wirklich gut geschriebene Anleitung. Wir unterhalten mehere Blogs und wollten genau dieses Feature implementieren, dank deiner Anleitung hat es jetzt auch ohne Auftrag an einen externen Programmierer alles besten geklappt.

  2. Danke für die ausführliche Anleitung. Werd ich mich wohl am Wochenende gleich mal hinsetzen müssen und das bei mir mit einbauen. Allerdings fürchte ich, dass ich das dann bei einem Update vom Theme dann immer wieder machen muss…

  3. Hm, keine schlechte Idee.
    Vielleicht nehm‘ ich sowas auch mit auf.

    Warte allerdings noch immer darauf, dass Facebook-Kommetare (vom geposteten Artikel auf der Fanseite) mit den Blog-Kommentaren verschmelzen.

    Es gab da mal ein Plugin, das leider nicht mehr funktioniert, seitdem Facebook größeres verändert hat. :(

  4. Hallo Peter,
    bei einem Projekt wo ich deine modifikation einsetzen möchte, wird leider lediglich eine leere angezeigt.

    Wenn ich in das „else“ die Zeile

    1
    echo count($array_CommentMeta).":".is_array($array_CommentMeta);

    vor die if-Zeile schreibe, kommt raus, dass count auf 0 steht…

    Ich muss aber auch zugegben, dass ich leider den Code nicht so ganz nachvollziehen kann, ist nicht so mein Tag. Was mache ich falsch? Also was muss ich tun, damit $array_CommentMeta gefüllt wird?

    Über eine Rückmeldung würde ich mich sehr freuen :)

    • OK…

      1
      add_filter('comment_form_default_fields', 'my_comment_meta');

      soll dazu führen, dass die Textfelder beim Kommentieren angezeigt werden richtig? Dieser letzte Code, mit der Liste, kommt zu einem fertigen Kommentar richtig?
      Da bei mir beim Kommentierne keine Felder erscheinen, habe ich nämlich den Code beim kommentieren eingetragen. Daher wird wohl nichts angezeigt, weil $comment->comment_ID natürlich leer ist :P

      Ne Idee wie ich die action zum Laufen kriege?

Schreibe einen Kommentar

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>