So implementieren Sie die Reader Wall in WordPress

藏色散人
Freigeben: 2020-01-03 09:45:56
Original
2938 Leute haben es durchsucht

So implementieren Sie die Reader Wall in WordPress

Wie implementiert man eine Reader Wall in WordPress?

Das Beispiel in diesem Artikel beschreibt, wie WordPress eine Reader Wall implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode ist wie folgt:

Empfohlen: „WordPress-Tutorial

1 Kopieren Sie die Seite PAGE.php und benennen Sie sie um readwall.php, und fügen Sie dann oben den folgenden Code hinzu:

Der Code lautet wie folgt:

<?php 
/* 
Template Name: Reader wall 
*/ 
?>
Nach dem Login kopieren

Tipp: Sie können einen Teil des Codes ändern, bevor Sie ihn ausführen.

2. Fügen Sie den folgenden Code an der Stelle hinzu, an der Sie eine Lesewand hinzufügen müssen:

Der Code lautet wie folgt:

<!-- 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";//
?>
Nach dem Login kopieren

Alle, ändern Sie die E-Mail-Adresse des Administrators in Ihre Der letzte ist 39. Wie viele Avatare werden ausgewählt? Sie können ihn entsprechend Ihrem eigenen Thema an die Themenbreite anpassen. Der Code lautet wie folgt:

<?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 读者墙 -->
Nach dem Login kopieren

Tipp: Sie können einen Teil des Codes ändern, bevor Sie ihn ausführen.

3. Fügen Sie den folgenden Stil zu style.css im Theme-Verzeichnis hinzu:

Der Code lautet wie folgt:

.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}
Nach dem Login kopieren

Tipp: Sie können einen Teil des Codes vorher ändern Ausführen.

Ich hoffe, dass die Beschreibung in diesem Artikel für alle beim Erstellen einer WordPress-Website hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Reader Wall in WordPress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage