04 октомври 2010

Как да добавим Author Info Box

Съжалявам, че използвам английското наименование в заглавието, но така и не можах да се сетя за български аналог на Author Info Box, когато става въпрос за добавяне на "каре за автора" във всяка статия на Wordpress блог. Първоначално търсих из българските сайтове и блогове, след това минах през плъгините, но не съм любител на добавянето на такива, въпреки, че използвам към момента 13 такива.

В края след известно мотаене, докато открия най-подходящите думи за търсене, успях да открия как и да добавя Author Box Info в блога за здравословни и безопасни условия на труд, която кутийка в момента изгледа така - разбора се, когато аз съм автора.



Как да го направим без да използваме плъгини. Оказа се лесно, само трябваше някой друг да ми каже как става :)

И така първо добавяме още нещичко в style.css файла на темата. Ето това:

#authorarea{

background: #f0f0f0;

border: 1px solid #d2d2d2;

padding: 10px;

width:500px;

overflow:hidden;

color: #333;

}

#authorarea h3{

font-size: 18px;

color:#333;

margin:0;

padding:10px 10px 5px 10px;

}

#authorarea h3 a{

text-decoration:none;

color: #333;

font-weight: bold;

}

#authorarea img{

margin:0;

padding:10px;

float:left;

border: 1px solid #ddd;

width: 100px;

height: 100px;

}

#authorarea p{

color:#333;

margin:0;

padding:0px 10px 10px 10px;

}

#authorarea p a{

color:#333;

}

.authorinfo{

padding-left:120px;

}


След това отваряме single.php и добавяме следното в loop-а.

<div id="authorarea">

<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '100' ); }?>

<div class="authorinfo">

<h3>About <?php the_author_posts_link(); ?></h3>

<p><?php the_author_description(); ?></p>

</div>

</div>


За да има снимка, трябва авторът да е качил такава в Gravatar.com.

Ако пък не искате карето да е със снимка, можете да ползвате ето този урок.

Ами това беше. Аз пипнах малко от това, което добавих в style.css файла, честно казано на принципа на пробата и грешката.

Няма коментари:

Related Posts Plugin for WordPress, Blogger...