One of the best things about wordpress is the built-in social aspect provided by comments. Getting your comment section right can be very important to any website, including ours. Over the years we’ve experimented with various comment plugins including Disqus and more recently Jetpack. However, we’ve always ended up bring things back in house for management, performance and privacy reasons. When I moved back from Jetpack comments I really missed some of the slick features provided by Jetpack, both the social-network logins and the general slick styling. Anyway, to cut a long story short I finally had time today to take a good look at how wordpress “does” comments and figure out a way to build an in-house system which looks nice and slick like the comment interface provided by jetpack. Best of all its surprisingly simple and does things the “proper” way…
First — to deal with the “social” aspect, I’ve resorted to a plugin called WordPress Social Login by Miled. There are several “social login” plugins, but this version (unlike the others) keeps everything totally in-house. It is a bit more work to configure, but for the benefit to our visitors privacy alone this is well worth it.
Next up was figuring out how to change the built-in wordpress comment form function (funnily enough called comment_form()). I’ll provide more detail later if anyone requests it, for now just find the relevant code below…
comments.php (in theme folder)
[پی ایچ پی]
<!– You can start editing here. –>
<?php if ( comments_open() ) : ?>
<section id=“respond” class=“respond-form”>
<?php comment_form(); ?>
<سکرپٹ>
document.getElementById(‘hidden-form-area’).style.display = ‘none’;
function myFunction()
{
document.getElementById(‘hidden-form-area’).style.display = ‘block’;
}
</سکرپٹ>
</سیکشن>
<?php endif; // if you delete this the sky will fall on your head?>
[/پی ایچ پی]
functions.php کے (in theme folder)
[پی ایچ پی]
function my_fields($fields)
{
$fields[‘author’] = ‘<p class=“comment-form-author”><input type=“text” name=“author” id=“author” size=“22” tabindex=“1” placeholder=“Name (required)” /></P>’;
$fields[’email’] = ‘<p class=“comment-form-email”><input type=“text” name=“email” id=“email” size=“22” tabindex=“2” placeholder=“E‑mail (required — never shared with anyone)” /></P>’;
$fields[‘url’] = ‘<p class=“comment-form-url”><input type=“text” name=“url” id=“url” size=“22” tabindex=“2” placeholder=“Website” /></P>’;
return $fields;
}
add_filter(‘comment_form_default_fields’,‘my_fields’);
function remove_notice($defaults)
{
$defaults[‘comment_notes_before’] = ”;
$defaults[‘comment_notes_after’] = ”;
return $defaults;
}
add_filter( ‘comment_form_defaults’, ‘remove_notice’ );
function remove_textarea($defaults)
{
$defaults[‘comment_field’] = ”;
return $defaults;
}
add_filter( ‘comment_form_defaults’, ‘remove_textarea’ );
function add_textarea()
{
echo ‘<p class=“comment-form-comment”><textarea id=“comment” name=“comment” placeholder=“Enter your comment here…” onfocus=“myFunction()"></textarea></P><div id=“hidden-form-area”>’;
}
ADD_ACTION( ‘comment_form_top’, ‘add_textarea’, 1 );
function add_hideend()
{
echo ‘</div کے>’;
}
ADD_ACTION( ‘comment_form_after’, ‘add_hideend’ );
[/پی ایچ پی]
کوڈ کے لئے شکریہ, they are useful…