Hur man visar en författarlista med avatarer pÄ WordPress-bidragsgivarsidan

Hur man visar en författarlista med avatarer pÄ WordPress-bidragsgivarsidan

Under arbetet med en klients webbplats insÄg vi att den inbyggda funktionen för att lista författare inte var tillrÀcklig. Vi visade hur du visar alla författare frÄn din webbplats, men den metoden var bara bra om du vill att en enkel lista ska visas i sidofÀltet. Om du vill skapa en mer innehÄllsrik och anvÀndbar sida med bidragsgivare Àr den funktionen vÀrdelös.

I den hÀr artikeln visar vi dig hur du kan skapa en sida med bidragsgivare som visar en lista över författare med avatarer eller anvÀndarfoto och all annan information du gillar. Denna handledning Àr en mellannivÄ handledning.

Det första du behöver göra Àr att skapa en anpassad sida med den hÀr mallen.

DÄ mÄste du öppna filen i din temamapp och lÀgga till följande kod:


function contributors() {
global $wpdb;

$authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users ORDER BY display_name");

foreach($authors as $author) {
echo "<li>";
echo "<a href="".get_bloginfo('url')."/?author=";
echo $author->ID;
echo "">";
echo get_avatar($author->ID);
echo "</a>";
echo '<div>';
echo "<a href="".get_bloginfo('url')."/?author=";
echo $author->ID;
echo "">";
the_author_meta('display_name', $author->ID);
echo "</a>";
echo "</div>";
echo "</li>";
}
}

Genom att lÀgga till den hÀr funktionen ber du WordPress att skapa en funktion som visar författarens namn och författarens avatar. Du kan Àndra instÀllningen av avatar till anvÀndarfoto-plugin genom att helt enkelt Àndra följande rad:

echo get_avatar($author->ID);

och ersÀtter den med:

echo userphoto($author->ID);

Du kan lÀgga till fler funktioner i den hÀr funktionen som att visa författar-URL och annan information frÄn profilen genom att följa strukturen som anvÀnds.

Du mÄste ocksÄ lÀgga till följande rader i din CSS-fil:


#authorlist li {
clear: left;
float: left;
margin: 0 0 5px 0;
}

#authorlist img.photo {
width: 40px;
height: 40px;
float: left;
}

#authorlist div.authname {
margin: 20px 0 0 10px;
float: left;
}

NĂ€r du Ă€r klar med att lĂ€gga till funktionen mĂ„ste du nu ringa den i din sidmall. Öppna filen contributors.php eller vad du Ă€n heter. Följ samma sidmall som din page.php och i slingan, lĂ€gg bara till den hĂ€r funktionen istĂ€llet för att visa innehĂ„llet:

<div id="authorlist"><ul><?php contributors(); ?></ul></div>

Detta ger dig en mer innehÄllsrik sida med bidragsgivare. Det hÀr tricket Àr utmÀrkt för Multi-Author-bloggar.

HÀr Àr ett exempel pÄ hur vi anvÀnde det:

Om du vill ha en bidragsgivare med information som visas i exemplet ovan mÄste du göra nÄgra Àndringar i den ursprungliga funktionen. Vi har en exempelkod som ger dig exakt allt som visas i bilden ovan.

function contributors() {
global $wpdb;

$authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users WHERE display_name <> 'admin' ORDER BY display_name");

foreach ($authors as $author ) {

echo "<li>";
echo "<a href="".get_bloginfo('url')."/author/";
the_author_meta('user_nicename', $author->ID);
echo "/">";
echo get_avatar($author->ID);
echo "</a>";
echo '<div>';
echo "<a href="".get_bloginfo('url')."/author/";
the_author_meta('user_nicename', $author->ID);
echo "/">";
the_author_meta('display_name', $author->ID);
echo "</a>";
echo "<br />";
echo "Website: <a href="";
the_author_meta('user_url', $author->ID);
echo "/" target="_blank">";
the_author_meta('user_url', $author->ID);
echo "</a>";
echo "<br />";
echo "Twitter: <a href="http://twitter.com/";
the_author_meta('twitter', $author->ID);
echo "" target="_blank">";
the_author_meta('twitter', $author->ID);
echo "</a>";
echo "<br />";
echo "<a href="".get_bloginfo('url')."/author/";
the_author_meta('user_nicename', $author->ID);
echo "/">Visit&nbsp;";
the_author_meta('display_name', $author->ID);
echo "'s Profile Page";
echo "</a>";
echo "</div>";
echo "</li>";
}
}

Den hÀr koden anvÀnder plugin för anvÀndarfoto. Twitter-fÀltet visas med det trick vi nÀmnde i artikeln Hur man visar författarens Twitter och Facebook pÄ profilsidan.

CSS till exempel skulle se ut:

#authorlist ul{
list-style: none;
width: 600px;
margin: 0;
padding: 0;
}
#authorlist li {
margin: 0 0 5px 0;
list-style: none;
height: 90px;
padding: 15px 0 15px 0;
border-bottom: 1px solid #ececec;
}

#authorlist img.photo {
width: 80px;
height: 80px;
float: left;
margin: 0 15px 0 0;
padding: 3px;
border: 1px solid #ececec;
}

#authorlist div.authname {
margin: 20px 0 0 10px;
}

Du kan visa mer information om du vill genom att anvÀnda den avancerade koden som din guide.

KĂ€lla till denna funktion