Den ultimata guiden för kommentarer i WordPress
comments

För att göra en blogg levande behöver vi människor som läser den, och personer som kommenterar. Det är genom dessa kommentarer vi skapar en dialog med våra besökare och det är här du får reda på vad dina besökare vill och tycker om din blogg och dina tankar.

Så varför inte låta kommentarerna vara ett rent nöje för besökaren, så att denne verkligen vill lämna ett avtryck? Den här guiden kommer att gå igenom allting från att sätta in kommentering, till att tråda dem och slutligen förändra dem precis som du själv önskar.

Lokalisera kommentarerna

Den mesta koden till kommentarerna är placerade i templet-filen comments.php, om du inte har en sådan i ditt tema redan, så skapar du en nu. Vi kommer sedan också att använda oss av functions.php för att få våra kommentarer att visas på det vis vi själva vill.

Men vi börjar med en helt annan fil, nämligen single.php och page.php. Öppna dessa och lokalisera platsen där du vill att dina kommentarer ska synas (om du vill ha kommentarer förståss, jag själv har inte tillåtit kommentarer på sidor, och alltså ingen kod där). Denna plats bör vara direkt efter ditt inlägg, kanske efter att du har redovisat relaterade inlägg, och troligtvis precis innan en </div>.

Här placerar du följande rad:

<?php comments_template(); ?>

Ok nu var det klart. Spara dessa filer och stäng dem.

Comments.php

Nu öppna comments.php och börja sidan med följande:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
/**
 * @package Ditt_Paket
 * @subpackage Ditt_Tema
 */
 
// Do not delete these lines
	if (isset($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');
 
	if ( post_password_required() ) { ?>
		<p class="nocomments">Detta inlägg är lösenordsskyddat. Vänligen skriv in lösenordet för att visa kommentarerna.</p> 
	<?php
		return;
	}
?>
 
<!-- Du kan börja ändra här. -->

Dessa rader startar alla kommenteringssidor, de startar med lite kontroll av paketet ditt tema ingår i, fortsätter med att se till så att man inte försöker komma åt ”comments.php” direkt, och avslutas med att undersöka ifall kommenteringen är lösenordsskyddad eller inte.

Fortsätt sedan med följande:

1
2
<?php if ( have_comments() ) : ?>
   <h3 id="comments"><?php comments_number('Inga Kommentarer', 'En Kommentar', '% Kommentarer' );?> till '<?php the_title(); ?>'</h3>

På rad ett undersöker vi ifall vi har kommentarer eller inte. Och på rad två skriver vi ut en rubrik med antalet kommentarer följt av titeln på inlägget. Byt gärna ut texten ifall du vill ha någonting annat. Nu kan det exempel vis stå:

24 Kommentarer till ‘Den ultimata guiden för kommentarer i WordPress’

Genom att byta plats på dessa två rader kommer den här rubriken att synas oavsett ifall det finns kommentarer eller inte.

Från version 2.7 har det tillkommit en funktion som heter wp_list_comments() som jag starkt rekommenderar er att ni använder, den ser dessutom automatiskt till att dina kommentarer blir trådade, ifall du har accepterat det.

Skriv följande:

1
2
3
<ul class="commentlist">
    <?php wp_list_comments();?>
</ul>

Det här är allt som behövs för att skriva ut dina kommentarer. För att ändra hur dina kommentarer skrivs ut, se mer information om wp_list_comments() nedan.

Om du har mycket kommentarer har man sedan version 2.7 också lagt till så att kommentarerna delas upp i flera sidor, för att kunna navigera mellan sidorna måste du lägga till navigations kanppar:

1
2
3
4
<div class="navigation">
    <div class="alignleft"><?php previous_comments_link() ?></div>
    <div class="alignright"><?php next_comments_link() ?></div>
</div>

När du är färdig här måste du sätta in lite mer WordPress rader:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php else : // this is displayed if there are no comments so far ?>
 
	<?php if ( comments_open() ) : ?>
		<!-- Om kommentarerna är öppna, men ingen har kommenterat än. -->
 
	 <?php else : // comments are closed ?>
		<!-- Om kommenteringen är stängd. -->
		<p class="nocomments">Kommenteringen är stängd</p>
 
	<?php endif; ?>
<?php endif; ?>
 
<?php if ( comments_open() ) : ?>

Här kan du göra förändringar ifall du vill att någonting speciellt ska ske ifall det inte har kommit några kommentarer eller ifall kommenteringen är stängd. Sista raden undersöker ifall kommenteringen är öppen, för i så fall vill vi placera in formuläret besökaren ska kunna skriva sin kommentar i.

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
<div id="respond"> <!-- Viktig ifall du vill att "svara" ska fungera bra -->
 
<h3><?php comment_form_title('Lämna en kommentar', 'Skriv ett svar till %s'); ?></h3> <!-- Formulär titel beroende på ifall du vill svara någon eller inte. -->
 
<div id="cancel-comment-reply"> <!-- Om någon har klickat på svara, kan man avbryta det här -->
	<small><?php cancel_comment_reply_link() ?></small>
</div> 
 
<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p>Du måste vara <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">inloggad</a> för att kunna skriva en kommentar.</p>
<?php else : ?>
 
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
 
<?php if ( is_user_logged_in() ) : ?>
 
<p>Du är inloggad som <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e('Logga ut från denna session') ?>">Logga ut &raquo;</a></p>
 
<?php else : ?>
 
<p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small>Namn <?php if ($req) _e("(obligatoriskt)"); ?></small></label></p>
 
<p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email"><small>Mail (kommer inte att visas) <?php if ($req) _e("(obligatoriskt)"); ?></small></label></p>
 
<p><input type="text" name="url" id="url" value="<?php echo  esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
<label for="url"><small>Hemsida (frivilligt)</small></label></p>
 
<?php endif; ?>
 
<!-- Ta bort kommentering ifall du vill visa tillåtna taggar -->
<!--<p><small><strong>XHTML:</strong> Du kan använda dessa taggar: <code><?php allowed_tags(); ?></code></small></p>--> 
 
<p><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea></p>
 
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Skicka kommentar" />
<?php comment_id_fields(); ?> 
</p>
<?php do_action('comment_form', $post->ID); ?>
 
</form>
 
<?php endif; // Avsluta ifall registrering krävs och du inte är inloggad ?>
</div> <!-- Avsluta id="respond" -->
 
<?php endif; // Om du tar bort denna kommer himlen att falla ner ?>

Allright, vi har precis gått igenom allt som behövs skrivas i comments.php. Grattis. För att ”svara” ska fungera också måste du lägga till en liten kodsnutt i header.php.

Så öppna header.php och leta upp <?php wp_head(); ?>
Precis innan placerar du denna kod:

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

Vilket inkluderar all javascript som behövs för att ”svara” ska fungera.

Så allt klart. Testa att öppna din blogg att se att allting fungerar.

wp_list_comments();

För att få dina kommentarer att synas så tar wp_list_comments() hand om hela proceduren. Genom att ange lite värden till den här funktionen kan vi förändra delar av denna listning, eller alltihop. Som standard ser funktionen ut så här:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php $args = array(
    'walker'            => null,
    'max_depth'         => ,
    'style'             => 'ul',
    'callback'          => null,
    'end-callback'      => null,
    'type'              => 'all',
    'page'              => ,
    'per_page'          => ,
    'avatar_size'       => 32,
    'reverse_top_level' => null,
    'reverse_children'  =>  ); ?> 
 
 <?php wp_list_comments( $args ); ?>

Värdena ‘max_depth’, ‘per_page’ och ‘reverse_top_level’ sätts lättast i administrationspanelen under ”Inställningar > Diskussion”, men om temat så önskar, kan bli åsidosatta här.

‘avatar_size’ är storleken på den avatar som används. För mer information om avatarer, läs Skaffa avatarer med Gravatar. Avatarerna i mina kommentarer är 80 px stora.

‘style’ kan ha värdena ‘ul’, ‘ol’ eller ‘div’, och värdet du använder måste överensstämma med de taggar du skrev runt wp list comments() i filen comments.php. Koden ska alltså vara någon av dessa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul class="commentlist">
    <?php wp_list_comments(); ?>
</ul>
 
<!-- ELLER -->
 
<ol class="commentlist">
    <?php wp_list_comments(array('style' => 'ol')); ?>
</ol>
 
<!-- ELLER -->
 
<div class="commentlist">
    <?php wp_list_comments(array('style' => 'div')); ?>
</div>

‘type’ kan ha värdena ‘all’, ‘comment’, ‘trackback’, ‘pingback’ eller ‘pings’, och avgör vilka sorts kommentarer som ska visas. Om du sätter pings så visas både trackbacks och pingbacks.

‘callback’ är den mest intressanta variabeln här, eftersom den kan se till att vi kan förändra hur kommentarerna ska visas, helt och hållet. Se nästa stycke.

För resterande värden och vad du kan göra med dem, ta en titt på wp_list_comments i WordPress.org’s Codex

Bestäm själv hur kommentarerna ska se ut

Genom att använda sig av en callback funktion kan du utforma dina kommentarer precis som du vill. För att göra det, gå in i comments.php Och ändra koden så att det står:

1
2
3
<ul class="commentlist">
    <?php wp_list_comments('callback=mina_kommentarer');?>
</ul>

Öppna sedan functions.php och skapa en ny funktion som heter samma sak du skrev i comments.php:

1
2
function mina_kommentarer($comment, $args, $depth) {
}

I den här funktionen skriver du sedan precis hur du vill att varje kommentar ska visas, här är ett exempel:

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
<?php
function mytheme_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>">
      <div class="comment-author vcard">
         <?php echo get_avatar($comment,$size='48',$default=get_bloginfo('stylesheet_directory').'/images/noAvatar.php' ); ?>
 
         <?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
      </div>
      <?php if ($comment->comment_approved == '0') : ?>
         <em><?php _e('Your comment is awaiting moderation.') ?></em>
         <br />
      <?php endif; ?>
 
      <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s klockan %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>
 
      <?php comment_text() ?>
 
      <div class="reply">
         <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
      </div>
     </div>
<?php
}
?>

Ok det som är viktigt här är den första rande: $GLOBALS['comment'] = $comment; som ser till att den aktuella kommentaren verkligen är aktuell, så att vi kan utnyttja alla standard funktioner och nå kommentarens värden.

comment_class(); ser till att placera massa olika klasser på din <li>-tagg så att du kan ändra style’s beroende på ifall det är en admin som har kommenterat eller exempelvis alterera färger mellan kommentarerna.

get_avatar(); hämtar och skriver ut avataren. I exemplet i storlek 48px och om användaren inte har en avatar använder han bilden som ligger i ditt tema under /images/noAvatar.png.

comment_reply_link(); genererar svara-knappen och fungerar bara om du gjort resterande saker jag skrivit den här guiden.

Övriga saker i exemplet är nog ganska självförklarliga, comment_text(); är kommenterarens text till exempel.

Sist får du inte heller glömma att det inte ska vara någon avslutande </li>-tag då WordPress sköter detta automatiskt. Det beror på att man ska kunna få nästade, trådade inlägg att fungera.

Styla dina kommentarer

Ok över till style.css och börja styla dina kommentarer.

Jag kan gå över detta lite övergripande bara eftersom egen experimenterade är det bästa sättet att lära sig på.

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
ul.commentlist{
  /*Detta ringar in alla dina kommentarer*/
}
li.comment{
  /*Om kommentaren är en kommentar (annars trackback, eller pingback)*/
}
li.even{
  /*Ändra här om du vill alterera bakgrunden på dina kommentarer*/
  background: #FFFFFF;
}
li.odd{
  background: #E7E7E7;
}
li.byuser{
  /*Om inlägget har gjort av en inloggad användare*/
}
li.bypostauthor{
  /*Om kommentaren är gjord av inläggsskribenten*/
  background: #EEEEFF;
}
li.depth-1{
  /*Kommenteringsdjup, nivå 1*/
}
li.depth-2{
  /*Kommenteringsdjup, nivå 2*/
}
ul.children{
  /*För varje ny nivå skapas denna, sätt margin för att förskjuta kommentarerna*/
  margin-left: 15px;
}
.vcard{
  /*Här är avataren och 'personen säger'*/
}
.comment-meta{
  /*Är datum och tid för kommentaren*/
}
.replay{
  /*Är svars knappen*/
}

Ok det där är väl framförallt de viktigaste klasserna. För mer exakta områden i kommentaren, rekommenderar jag att använda tillägget Firebug till Firefox och inspektera dina kommentarer, eller så lämnar du en kommentar, så kan jag säkert hjälpa dig.

Dela upp dina Kommentarer och Pingar

Om du vill separera dina kommentarer och pingar, tex så som jag har gjort, så kan du lätt fixa det.
Byt ut:

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
<?php if ( have_comments() ) : ?>
    <h3 id="comments"><?php comments_number('Inga Kommentarer', 'En Kommentar', '% Kommentarer' );?> till '<?php the_title(); ?>'</h3>
 
    <div class="navigation">
        <div class="alignleft"><?php previous_comments_link() ?></div>
        <div class="alignright"><?php next_comments_link() ?></div>
    </div>
 
    <ul class="commentlist">
        <?php wp_list_comments('callback=mina_kommentarer');?>
    </ul>
 
    <div class="navigation">
        <div class="alignleft"><?php previous_comments_link() ?></div>
        <div class="alignright"><?php next_comments_link() ?></div>
    </div>
 
	<?php else : // this is displayed if there are no comments so far ?>
 
    <?php if ( comments_open() ) : ?>
            <!-- Om kommentarerna är öppna, men ingen har kommenterat än. -->
 
    <?php else : // comments are closed ?>
            <!-- Om kommenteringen är stängd. -->
            <p class="nocomments">Kommenteringen är stängd</p>
 
    <?php endif; ?>
<?php endif; ?>

Mot

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
52
53
54
55
<h3 id="comments"><?php comments_number('Inga Kommentarer', 'En Kommentar', '% Kommentarer' );?> till '<?php the_title(); ?>'</h3>
<?php if ( have_comments() ) : ?>
 
    <div class="navigation">
        <div class="alignleft"><?php previous_comments_link() ?></div>
        <div class="alignright"><?php next_comments_link() ?></div>
    </div>
 
    <ul class="commentlist">
        <?php wp_list_comments('type=comment'callback=mina_kommentarer');?>
    </ul>
 
    <div class="navigation">
        <div class="alignleft"><?php previous_comments_link() ?></div>
        <div class="alignright"><?php next_comments_link() ?></div>
    </div>
 
	<?php else : // this is displayed if there are no comments so far ?>
 
    <?php if ( comments_open() ) : ?>
            <!-- Om kommentarerna är öppna, men ingen har kommenterat än. -->
 
    <?php else : // comments are closed ?>
            <!-- Om kommenteringen är stängd. -->
            <p class="nocomments">Kommenteringen är stängd</p>
 
    <?php endif; ?>
<?php endif; ?>
<?php if ( have_comments() ) : ?>
 
    <div class="navigation">
        <div class="alignleft"><?php previous_comments_link() ?></div>
        <div class="alignright"><?php next_comments_link() ?></div>
    </div>
 
    <ul class="commentlist">
        <?php wp_list_comments('type=pings&callback=mina_kommentarer');?>
    </ul>
 
    <div class="navigation">
        <div class="alignleft"><?php previous_comments_link() ?></div>
        <div class="alignright"><?php next_comments_link() ?></div>
    </div>
 
	<?php else : // this is displayed if there are no comments so far ?>
 
    <?php if ( comments_open() ) : ?>
            <!-- Om kommentarerna är öppna, men ingen har kommenterat än. -->
 
    <?php else : // comments are closed ?>
            <!-- Om kommenteringen är stängd. -->
            <p class="nocomments">Kommenteringen är stängd</p>
 
    <?php endif; ?>
<?php endif; ?>

Så det jag har gjort nu är egentligen bara att loopa igenom alla kommentarer två gånger, en gång med kommentarer som argument och en gång med pings som argument.

Avslutning och Exempelfiler

Nu borde allting vara upplagt för att du ska kunna experimentera och snygga till dina kommentarer så att de kan bli precis som du vill ha dem.

Om du har frågor eller inte får någonting att fungera, läng iväg en kommentar så kan vi säkert reda ut vad det är för fel.

Här kommer i alla fall filerna så att ni kan ledda ner och testa själva.

Download: Ladda ner exempelfilerna: comments.rar (2.8 kB) senast uppdaterad 17 February 2011

18 kommentarer till 'Den ultimata guiden för kommentarer i WordPress' »»

  • Välskrivet som vanligt. Man tackar för den djupa infon.


  • Haha, ja tack vare dig =) Dock är det bra att ha det så här. Jag har do bookmarkat din sida, ska lägga till dig i mina länkar med. Det är rejäla tips du har som är rätt härliga att följa. Håller precis på följa din twitter guide :D


    • Jag gör så gott jag kan :) Tråkigt att sitta inne med all information man har lyckats samla på sig. Fråga om det skulle vara någonting.


  • 5. Monica skriver: |

    Hej
    Är nybörjare och undrar vad textrutan längst ner på varje inlägg där det står Läs mer betyder. Borde det inte vara nån text som inspirerar till KOMMENTARER.
    Ska detta in där? n r:
    Detektiven


  • Hej Monica.

    Nu är jag inte riktigt med på vilken text det är du menar. Är det när alla inläggen listas och man får en länk till hela inlägget? Eller är det när endast ett inlägg visas och du får den text länken ovan för kommenterings formuläret? Skriv in länken till din sida så är det lättare att felsöka.


  • Hej!
    Jag har problem då texten på min ”Submit Comment” inte visas efter byte av teman. Är detta något du kan hjälpa mig med?


    • I filen comments.php, så har du text som står mellan formulär taggar (<form> och </form>). Där emellan ska du hitta en tag som ser ut ungefär så här:

      <input name="submit" type="submit" id="submit" tabindex="5" value="Skicka kommentar" />

      Det som står som värde till attributet "value" är texten som ska stå på knappen. Vad står det där för dig?


      • 9. Olle P skriver: |

        Hej!
        Betyder det att jag kan lägga till och dra bort knappar också på detta sätt? Var kan man läsa mer?

        Hälsningar Olle


        • Vad exakt menar du med ”knappar” är det i formuläret till dem som postar inlägg som du menar?

          Använd google och sök på följande ord:
          codex wordpress comments
          så kommer du hitta wordpress egen dokumentation i området. Annars genom google kommer du också kunna hitta väldigt mycket bra information överallt.


  • Hej! Jo, den delen vet jag om. Hittade sedan felet i style.css under #commentform textarea eller om det var under #commentform input. Lade i alla fall till

    background: url(images/gray-opaque.png) repeat;
    color: #fff;

    Och därmed fick knappen ett nytt utseende. Han ville inte visa texten i knappen men nu ser den bra ut!


  • 13. helena skriver: |

    Hejsan!
    Jag har en liten fundering…hur får jag länken ”reply” till svenska?

    mvh
    Helena


    • Om du använder ett vanligt tema så är det troligt att de använder wordpress översättnings filer för att få koden ”Replay”. Det enklaste och bästa är att ladda ner svenska översättningsfiler till WordPress, så kommer hela WordPress bli på svenska. Även dina menyer och sånt. Dessa kan du ladda ner på http://wp-support.se/

      Om du inte har ett sådant tema, eller du redan har allting på svenska förutom Replay-knappen, så kan den finnas placerad på lite olika ställen. Leta efter ordet Replay i comments.php alternativt function.php. Det bör dyka upp någonstans där, och då är det bara att byta ut och spara.

      Filerna kan du redigera genom att gå in under ”Utseende > Redigerare”.

      Lycka till


      • Ang. detta med Replay knappen kan det vara så att den är placerad i comment-template.php som finns under wp-includes.

        Detta gör att du Helena måste använda dig av en ftp-server så att du kan nå alla filer. Gå då in på wp-includes mappen och lokalisera comment-template.php filen. Sen trycker du på Ctrl-F och skriver get_comment_reply_link.

        Nu bör du få fram en kod-snutt där det står lite grejer. Lokalisera då fram order Replay som står inom en parentes. Byt ut denna till vad du vill, exempelvis Besvara.

        Och som WpGuru har skrivit i inlägget så kan du styla denna knapp hur du vill genom att ange .replay

        Hoppas allt löser sig, och jag ber om ursäkt att jag besvarar detta inlägg så sent!

        Mvh
        htmltips admin


        • Tack för tipset, dock skulle jag inte rekommendera att man gör på detta vis. Om dina ändringar sker i standardfiler kommer dessa ändringar att gå tillbaka till originalet igen när en ny uppdatering kommer. Istället (efter att ha läst lite i filerna du hänvisade till) skulle jag leta efter stället där denna funktion används;

          Någonstans i din comments.php/functions.php borde du kunna hitta en text som lyder get_comment_reply_link();

          Ändra denna till:

          get_comment_reply_link( array( 'reply_text' => 'Svara' ) );

          så borde det lösa hela problemet, och underlätta när du vill uppdatera WordPress.


  • Hur kan jag missat din sida? Helt galet pedagogiskt och välskrivet för min tröga ologiska hjärna. TACK!


Lämna en kommentar

XHTML: Du kan använda dessa taggar:
<a href="">, <em>, <strong>, <img src="">,
<pre lang="php">, <code>, <blockquote>