Hur man skapar nästlande kommentarer till ditt WordPress tema

Innan versionen 2.7 av WordPress var man tvungen att använda Brian’s Threaded Comments för att komma åt konversationer i kommentarerna.

En av dom fantastiska egenskaperna med nya versionen 2.7 och uppåt är just att den här funktionen med nästlade kommentarer och sidor navigering för kommentarer om man har hundra kommentarer kan det vara jobbigt och skrolla långt. Om man har ett äldre tema så fattas det ett par rader kod för komma åt denna funktion och jag ska visa vad du behöver göra för att komma igång med funktionen.

Aktivera nya funktionen

Första vi behöver göra är att aktivera funktionen och det gör du genom Settings – Discussion – där ska du se lite nya funktioner. Under Other comment settings så bockar du av Enable threaded (nested) comments. Du kan välja hur djupt konversationerna ska gå men jag rekommenderar att ha max 5 – annars blir det för djupt.

Nya koden i comments.php

Alla kod här är bara exempel kod. Jag kommer inte lära ut hur du designar upp dina kommentarer i detta fall. Okej då kör vi, den nya koden i comments.php är förenklad jämför med den äldre varianten. Vi börjar med en liten kod snutt som ska vara i toppen i comments.php.

<?php

// Do not delete these lines
if (!empty($_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">This post is password protected. Enter the password to view comments.</p>
<?php
return;
}
?>

Sedan har vi den nya kommentar loopen som ser ut så här:

<!-- You can start editing here. -->

<?php if ( have_comments() ) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>

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

<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>

<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 ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->

<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments">Comments are closed.</p>

<?php endif; ?>
<?php endif; ?>

Aktivera Javaskripten

För att stödja den nya nästlade kommentar funktionen behöver vi aktivera den nya inbyggda Javaskripten. Öppna header.php och leta efter linjen < ?php wp_head(); ?> – direkt före den så lägger du in följande kod:

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

Designa dina kommentarer

Som det är uppsatt nu är allt standard men du kanske vill designa dina kommentarer själv. I comments.php så ser du följande:

<ol class="commentlist">
< ?php wp_list_comments(); ?>
</ol>

Ersätt det med:

<ol class="commentlist">
	<?php wp_list_comments('type=comment&callback=mytheme_comment'); ?>
</ol>

Nu kanske du tänker vart är mina kommentarer nånstans. Vi vill ju se HTML koden för att designa. Öppna functions.php eller skapa en i din tema mapp.

Lägga till följande kod i botten på dokumentet:

<?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='36',$default='<path_to_url>' ); ?>

<?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 at %2$s'), get_comment_date(),get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>

<?php comment_text() ?>
<?php if($args['max_depth']!=$depth) { ?>
<div class="reply">
<?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
<?php } ?>
</div>
<?php
}
?>

Också så MÅSTE din kommentar formulär i comments.php ha < div id="respond"> runtom sig. Javascripten kommer ha fokus på den när användare svarar på andra kommentarer.

Även Cancel knappen kan du styra som ser ut så här:

<div id="cancel-comment-reply">
	<small>< ?php cancel_comment_reply_link() ?></small></div>
</div>

I nya funktionen så finns det mängder med nya klasser och ID’s som du kan använda dig av. Här kommer en ganska lång lista på vad du kan använda:

ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-4 {}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-5 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

Sammanfattning

Den här genomgången gick bara igenom hur man får nästlade kommentar funktionen att funka med äldre teman. Sen kan du designa upp den efter dina behov och krav. Har du frågor eller kommentarer så var inte rädd att hojta till.