افزودن CSS سفارشی به تصویر نویسنده و نظرات در پست های وردپرس

افزودن CSS سفارشی به تصویر نویسنده و نظرات در پست های وردپرس

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

تصویر نویسنده در سایت های وردپرسی را عکس گراواتار می نامند و اگر که شما هم می خواهید یک گراواتار مناسب در سایت خود داشته باشید می توانید کلمه گراواتار را در میهن آکادمی جستجو کنید و آموزش استفاده از گراواتار در وردپرس را صفر تا صد یاد بگیرید و حالا با این آموزش می توانید تغییری بر روی استایل نمایش تصویر خود در سایت دهید و این گراواتار همان تصویر پروفایل شما در زیر مقالات سایت می باشد

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

برخی مواقعه مدیران سایت از افزونه های پنل کاربری استفاده می کنند و زمانی که سایت شما دارای پنل کاربری باشد نیازی نیست که در سایت گراواتار ثبت نام کرده باشند و می توانند از طریق پنل کاربری که آن افزونه به آن ها می دهد تصویر کاربری خود را آپلود کنند و در سایت نمایش دهند ، ولی سایت گراواتار چون یک سایت جهانی است زمانی که شما با آن ایمیل که در سایت گراواتار ثبت نام کرده اید در هر سایت وردپرسی ، نظر دهید عکس شما در آن سایت نمایش داده می شود

این مقاله در مورد اینکه چطور یک تصویر یا عکس گراواتار بسازیم نیست ! این آموزش برای این است که بتوانیم استایل تصویر پروفایل خود را کمی شخصی سازی کنیم

چرا تصویر باید استایل تصویر نویسنده را تغییر دهیم :

اگر که تماشا کرده باشید تمامی سایت های وردپرسی از یک طرح و یا یک استایل برای نمایش تصویر نویسنده خود استفاده می کنند و حالا ما می خواهیم کمی تغییر بر روی استایل تصویر نویسنده خود داشته باشیم که زمانی کاربران از طریق گوگل وارد سایت ما می شوند متوجه تغییر ظاهری سایت ما با سایت های دیگران شوند ، پس بریم تو دلش که این بخش تصویر نویسنده را کمی تغییر دهیم

استایل دهی به تصویر نویسنده هم در نظرات و هم در پست با استفاده کد نویسی :

ما اینجا می خواهیم با کمی تغییر و کد نویسی CSS برای گراواتار های خود یا همان تصویر نویسنده ها از یک عکس دایره شکل استفاده کنیم و برای این کار طبق معمول باید بریم که کد نویسی انجام دهیم و همانطور که می دانید ما باید وارد پنل مدیریت سایت وردپرسی خود شویم

بعد از وارد شدن به پنل مدیریت سایت وردپرس باید وارد بخش نمایش و بعد از آن ویرایشگر پرونده پوسته کلیک کرده و در فایل Style.css قالب خود وارد شویم و از آنجا کد زیر در این فایل قرار دهیم و بعضی سایت ها ممکن است که فایل rtl.css هم داشته باشد پس می توان کد زیر را در این فایل هم گذاشت :

.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

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

باید وارد یکی از مقاله های سایت خود شوید و بر روی تصویر نویسنده کلیک چپ کرده و بر روی دکمه inspect کلیک کرده و بعد از آن یک کادر مانند تصویر بالا برای شما نمایش داده می شود که باید ببنید این بخش نویسنده شما با کد Avatar نوشته شده است یا نه ، اگر که مانند تصویر بالا از Avatar نوشته شده بود که داره از گراواتار تصویر را دریافت میکنه در غیر این صورت یک افزونه نصب شده است یا کلاس تصویر شما با یک کلاس دیگر در قالب کد نویسی شده است و باید کلاس avatar را به جای کلاس خود تغییر دهید

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