استایل قاب عکس نویسندگان سایت

با عرض سلام و خسته نباشید ، در خدمت شما هستیم با یک استایل قاب عکس نویسندگان سایت ، امیدوارم که ازش خوشتون بیاد و استفاده کنید.شما به ۲ تا کد نیاز دارید ، یکی استایل و دیگری کد های html برای نمایش قاب عکس.

۱-استایل قاب عکس نویسندگان سایت

شما ابتدا باید کد های زیر رو به انتهای فایل استایل (style.css) قالب خودتون اضافه کنید.

[style]{max-width:100%}
#mainAuthorGravatar>li .Author{float:right;width:260px;margin-left:20px;position:relative;padding:15px;}
#mainAuthorGravatar>li .Author span , .Author a{display:inline-block;}
#mainAuthorGravatar>li .Author .authorGravatar{width:210px;height:210px;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;padding:5px 5px 7px 8px;-moz-box-shadow:0px 0px 7px #9d9d9d;-webkit-box-shadow:0px 0px 7px #9d9d9d;box-shadow:0px 0px 7px #9d9d9d;position:relative;}
#mainAuthorGravatar>li .Author .authorGravatar>img{width:210px;height:210px;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;border:1px solid #A6A6A6;position:relative;z-index:-1px;}
#mainAuthorGravatar>li .Author .authorGravatar>.shadow{position:absolute;z-index:100;width:212px;height:212px;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;-moz-box-shadow:inset 0px -10px 0px #067bbe;-webkit-box-shadow:inset 0px -10px 0px #067bbe;box-shadow:inset 0px -10px 0px #067bbe;}
#mainAuthorGravatar>ul, li{list-style:none outside none;padding:0px;margin:0px;}

2-کدهای html برای نمایش عکس نویسندگان

سپس باید با استفاده از کدهای زیر در قسمت مورد نظر از قالب سایت خودتون تصویر نویسنده سایت رو قرار بدید.

<ul id="mainAuthorGravatar" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; width: 5500px; height: 315px; z-index: auto; opacity: 1;">
<li>
<div class="Author">
<span class="authorGravatar">
<span class="shadow"></span>
<img src="http://picor.ir/wp-content/uploads/2014/01/gravatar.png" alt="" title="" width="176" height="180">
</span>
</div>
</li>
</ul>

دقت کنید که در کد بالا باید آدرس عکس خودتونو وارد کنید ، همینطور نیازی نیست عکستون گرد باشه ، خوده استایل عکس رو به اون صورت نشون میده .

کد php گراواتار نویسنده در وردپرس

تا اینجا کار ما تموم شد ، حالا اگر می خواهید بجای وارد کردن دستی آدرس عکس از کد php در قالب استفاده کنید تا خودکار خودش گراواتار نویسنده رو نشون بده ، می تونید از کد زیر بجای عکس استفاده کنید .

<?php echo get_avatar (get_the_author_email(), '100'); ?>

اون ۱۰۰ اندازه تصویر هست که باید با توجه به کد و اندازه تصویر استایل بالا خودتون تنظیم کنید ، این کد بالا رو از مطالب قدیم سایت ، جعبه درباره نویسنده در وردپرس ذکر کردم ، تو اون نوشته کدهای نمایش نام و توضیحات بیوگرافی نویسنده رو به همراه استایل یک جعبه برای نمایش اطلاعات نوشته بودیم .

منبع پیکور