Wordpress Reader Wall implementation program code

1: copy the PAGE. php PAGE and change it to readerwall. php. Then add the code at the top of the PAGE:

The code is as follows:	Copy code
<? Php /* Template Name: Reader wall */ ?>

Tip: you can modify some code before running it.

2. Add the following code to the location where you want to add a reader Wall:

The code is as follows:

Copy code

<! -- Start reader Wall 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 = '0' AND comment_author_email! = 'Change to your email account' AND post_password = ''AND comment_approved = '1' AND comment_type ='') AS tempcmt group by comment_author_email order by cnt desc limit 39 ";//

Change the administrator's email address to yours. The last 39 pictures are the number of pictures selected. You can modify them according to your own themes to fit the theme width.

The code is as follows:

Copy code

$ Wall = $ wpdb-> get_results ($ query ); $ MaxNum = $ wall [0]-> cnt; Foreach ($ wall as $ comment)     { $ Width = round (40/($ maxNum/$ comment-> cnt), 2); // The width of the corresponding blood bar If ($ comment-> comment_author_url) $ Url = $ comment-> comment_author_url; Else $ url = "#"; $ Avatar = get_avatar ($ comment-> comment_author_email, $ size = '36', $ default = get_bloginfo ('wpurl'). '/avatar/default.jpg '); $ 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 reader wall -->

Tip: you can modify some code before running it.

3.add the following style.css style to the topic directory:

The code is as follows:

Copy code

. Readers-list {line-height: 18px; text-align: left; overflow: hidden; _ zoom: 1} . Readers-list li {width: 200px; float: left; * margin-right:-1px} . Readers-list ,. 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 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. 2 s bytes-out;-moz-transition: all. 2 s bytes-out; transition: all. 2 s timed-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}

 

Tip: you can modify some code before running it.