کد ساخت باکس بیوگرافی نویسنده در وردپرس
باسلام . طی این آموزش هدف ما ایجاد باکس بیوگرافی برای نویسنده سایت وردپرسی هست که احتمالا در برخی از وبسایت ها اون رو مشاهده کردید (منظور همون کادری هست که معمولا انتهای هر مطلب درونش مشخصات نویسنده اون مطلب درج میشه ) . خب برخی از وبسایت ها اینکار رو با کمک افزونه های بسیاری که موجود هست روی سایتشون اجرا میکنند اما ما استفاده از افزونه را برای اینگونه کار های پیش پا افتاده هرگز توصیه نمیکنیم ، زیرا که استفاده از افزونه می تواند باعث کندی سایتتان و همچنین پایین آمدن امنیت سایت نیز شود .
باکس نویسنده سایت :
ابتدا باید برید سراغ فایل single.php قالب وبسابتتون و اون رو ادیت (باز کنید) یا همون ویرایش کنید و کد زیر رو در جایی که مد نظر دارید باکس معرفی نویسنده در سایت نمایش داده شود قرار بدید و فایل مربوطه را ذخیر کنید .
کد PHP:
<div class="author-box">
<?php echo get_avatar( get_the_author_meta( 'ID' ), 80 ); ?>
<div class="clearfix"></div>
<div class="author-name"><?php the_author() ?></div>
<div class="clearfix"></div>
<?php the_author_meta('description'); ?>
</div>
که اگر بخواهیم توضیحی پیرامون این کد بدیم باید گفت : در خط دوم از کد فوق ID مربوط به همان شماره آی دی مربوط به نویسنده است و عدد 80 هم مربوط به سایز تصویر آواتار نویسنده می باشد . خط یکی مونده به آخر هم که معلوم است ، description مربوط به توضیحات نویسنده است .
کار تمام شد ، اما فقط تنها کاری که مونده اینکه باید یک استایل هم به این باکس بدیم که ظاهری بهتر داشته باشه ، خب ما یک سری کد هم برای استایل این باکس قرار داده ایم که میتونید این کد های استایل رو به فایل CSS.STYLE قالب وردپرسی خود اضافه کنید .
کد PHP:
/*********** Author Box ************/
.author-box {
background-color: #fff;
padding: 20px 100px 50px;
position: relative;
text-align: center;
line-height: 30px;
font-size: 15px;
}
.author-box img {
border-radius: 50%;
width: 80px;
height: 80px;
margin: auto;
}
.author-name {
color: #313035;
font-family: 'Lato';
font-size: 35px;
font-weight: bold;
padding: 30px 0;
}
توجه :
1- قبل از انجام هر تغییراتی و شروع کار حتما از فایل های مربوطه بکاپ گیری نمایید تا در صورت نیاز از آنها استفاده کنید .
2- کد های مربوط به استایل را در انتهای فایل CSS قالبتون میتونید وارد و ذخیره کنید .
3- اگر سوالی در این زمینه داشتید میتونید از قسمت نظرات این مطلب با ما در میان بگذارید .
پایان آموزش .
