Comment implémenter un mur de lecteurs dans WordPress

Comment implémenter un mur de lecteurs dans wordpress ?

L'exemple de cet article décrit comment WordPress implémente un mur de lecteurs. Partagez-le avec tout le monde pour votre référence. La méthode d'implémentation spécifique est la suivante :

Recommandé : "tutoriel wordpress"

1 Copiez la page PAGE.php, renommez-la en. readerwall.php, puis Ajoutez le code suivant en haut de celui-ci :

Le code est le suivant :

<?php 
/* 
Template Name: Reader wall 
*/ 
?>

Astuce : Vous pouvez modifier une partie du code avant de l'exécuter.

2. Ajoutez le code suivant là où vous devez ajouter un mur de lecteurs :

Le code est le suivant :

<!-- start 读者墙 Edited By iSayme--> 
<?php 
$query="SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email FROM (SELECT * FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->posts.ID=$wpdb->comments.comment_post_ID) WHERE comment_date > date_sub( NOW(), INTERVAL 24 MONTH ) AND user_id=&#39;0&#39; AND comment_author_email != &#39;改成你的邮箱账号&#39; AND post_password=&#39;&#39; AND comment_approved=&#39;1&#39; AND comment_type=&#39;&#39;) AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 39";//
?>

Tout le monde, remplacez l'e-mail de l'administrateur par le vôtre, le le dernier est 39. Combien d'avatars sont sélectionnés ? Vous pouvez le modifier en fonction de votre propre thème en fonction de la largeur du thème. Le code est le suivant :

Le code est le suivant :

<?php 
$wall = $wpdb->get_results($query); 
$maxNum = $wall[0]->cnt; 
foreach ($wall as $comment) 
{ 
$width = round(40 / ($maxNum / $comment->cnt),2);//此处是对应的血条的宽度 
if( $comment->comment_author_url ) 
$url = $comment->comment_author_url; 
else $url="#"; 
$avatar = get_avatar( $comment->comment_author_email, $size = &#39;36&#39;, $default = get_bloginfo(&#39;wpurl&#39;).&#39;/avatar/default.jpg&#39; ); 
$tmp = "<li><a target="_blank" href="".$comment->comment_author_url."">".$avatar."<em>".$comment->comment_author."</em> <strong>+".$comment->cnt."</strong></br>".$comment->comment_author_url."</a></li>"; 
$output .= $tmp; 
} 
$output = "<ul class="readers-list">".$output."</ul>"; 
echo $output ; 
?> 
<!-- end 读者墙 -->

. Astuce : Vous pouvez modifier une partie du code avant de l'exécuter.

3. Ajoutez le style suivant à style.css dans le répertoire du thème :

Le code est le suivant :

.readers-list{line-height:18px;text-align:left;overflow:hidden;_zoom:1} 
.readers-list li{width:200px;float:left;*margin-right:-1px} 
.readers-list a,.readers-list a:hover strong{background-color:#f2f2f2;background-image:-webkit-linear-gradient(#f8f8f8,#f2f2f2);background-image:-moz-linear-gradient(#f8f8f8,#f2f2f2);background-image:linear-gradient(#f8f8f8,#f2f2f2)} 
.readers-list a{position:relative;display:block;height:36px;margin:4px;padding:4px 4px 4px 44px;color:#999;overflow:hidden;border:#ccc 1px solid;border-radius:2px;box-shadow:#eee 0 0 2px} 
.readers-list img,.readers-list em,.readers-list strong{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out} 
.readers-list img{width:36px;height:36px;float:left;margin:0 8px 0 -40px;border-radius:2px} 
.readers-list em{color:#666;font-style:normal;margin-right:10px} 
.readers-list strong{color:#ddd;width:40px;text-align:right;position:absolute;right:6px;top:4px;font:bold 14px/16px microsoft yahei} 
.readers-list a:hover{border-color:#bbb;box-shadow:#ccc 0 0 2px;background-color:#fff;background-image:none} 
.readers-list a:hover img{opacity:.6;margin-left:0} 
.readers-list a:hover em{color:#EE8B17;font:bold 12px/36px microsoft yahei} 
.readers-list a:hover strong{color:#EE8B17;right:150px;top:0;text-align:center;border-right:#ccc 1px solid;height:44px;line-height:40px}

Astuce : Vous pouvez modifier une partie du code avant l'exécuter.

J'espère que cet article sera utile à tout le monde dans la création d'un site Web WordPress.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!