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

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

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

شما به ۲ تا کد نیاز دارید ، یکی استایل و دیگری کد های 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;}

۲-کدهای 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="https://doctorwp.com/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'); ?>

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

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

مشاهده پیش نمایش

لینک دانلود

امتیاز شما برای این مقاله
7 نظرات
  1. زهرا می گوید

    سلام ارش . واقعا راهنمایی هایی که میکنی عالیه ولی در بعضی از مطالب یه کوچولو واضح تر توضیح بده. ممنون

  2. مهسا می گوید

    ممنون
    جالب بود

  3. Behzad می گوید

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

    1. آرش حیدری می گوید

      سلام
      نه دوست عزیز چرا ناراحت باشم ؟!
      باشه مشکلی نداره ، الان برات اکانتتون رو باز می کنم : )

  4. javad می گوید

    سلام چرا سایت دیر ابدیت می کنی هر روز یه پست بزاری کافیه مع راضی هستیم D :

    1. آرش حیدری می گوید

      سلام
      یک کمی درگیر هستم ، اما دنبال نویسنده هستم و سعی می کنیم که زود به زود آپدیت کنیم
      با تشکر از دیدگاه شما

  5. Dr می گوید

    بسیار عالی
    موفق و موید باشید

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.