استایل قاب عکس نویسندگان سایت
با عرض سلام و خسته نباشید ، در خدمت شما هستیم با یک استایل قاب عکس نویسندگان سایت ، امیدوارم که ازش خوشتون بیاد و استفاده کنید.شما به ۲ تا کد نیاز دارید ، یکی استایل و دیگری کد های 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'); ?>
اون ۱۰۰ اندازه تصویر هست که باید با توجه به کد و اندازه تصویر استایل بالا خودتون تنظیم کنید ، این کد بالا رو از مطالب قدیم سایت ، جعبه درباره نویسنده در وردپرس ذکر کردم ، تو اون نوشته کدهای نمایش نام و توضیحات بیوگرافی نویسنده رو به همراه استایل یک جعبه برای نمایش اطلاعات نوشته بودیم .
مطالب زیر را حتما بخوانید:
قوانین ارسال دیدگاه در سایت
- چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
- چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
- چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
- چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
- چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.
نظرات کاربران