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

مطالب نمایش داده میشه. پس باید کدهای مربوط بهش رو داخل فایل single.php قرار بدیم

ساخت باکس درباره نویسنده

اول از همه قبل از شروع کد نویسی باید ببینم باکس درباره نویسنده چی هستش و از کجا میشه تغییرش داد. پس از پنل مدیریت وردپرس  به قسمت کاربران بروید و نام کاربریتونو انتخاب و دکمه ویرایش رو بزنید. یک سری تنظیمات خواهید دید. از قبیل نام شما ایمیل شما و….

یک قسمت دیگه ای هم هستش  با عنوان درباره خودتان

about

که در این قسمت هم توضیحاتی درباره نویسنده درج میشه ( همونطور که توی سایت خودم هستش ) بسیار خب حالا شروع می کنیم

فایل single.php تم رو در حالت ادیت باز کنید. بعد از کد

یک div با کلاس author-box ایجاد کنید. خب حالا باید نام نویسنده و تصویر آواتار و همچنین توضیحاتی درباره نویسنده داخل آن قرار بدیم

get_avatar()  = این تابع همونطور که از اسمش پیداست آواتار رو بر میگردونه. اما اگر این  تابع رو به تنهایی در فایل قرار بدیم و ذخیره کنیم تصویری بهمون نمایش نمیده. چرا که این تابع آرگومان هایی دارد که یکی از آنها id نویسنده هستش و از اونجایی که نویسنده ممکنه هر شخصی باشه و id مشخصی نداره پس با استفاده از

get_the_author_meta( 'ID' )

آی دی نویسنده رو هم بهش میدیم. پس کد زیر را داخل div قرار میدیم.

<?php echo get_avatar( get_the_author_meta( 'ID' ), 80 ); ?>

عدد 80 هم که گذاشتیم اندازه تصویر آواتار هستش و می تونیم تغییرش بدیم.

حالا باید نام نویسنده رو نمایش بدیم.

the_author(): این تابع هم نام نویسنده رو بر میگردونه. حالا کد زیر رو در ادامه کد بالا قرار بدهید:

<div class="clearfix"></div>
<div class="author-name"><?php the_author() ?></div>

حالا نوبت به نمایش توضیحاتی هستش که در قسمت “درباره خودتان” وارد می کنیم. این هم ساده س

باید با استفاده از the_author_meta() توضیحات رو بگیریم.  پس این کد رو هم در ادامه کد بالا قرار میدیم

<div class="clearfix"></div>
<p><?php the_author_meta('description'); ?></p>

در نهایت باید کد زیر رو داشته باشیم:

<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>
<p><?php the_author_meta('description'); ?></p>
</div>

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

author

بسیار خب حالا باید بهش استایل بدیم تا مرتب دیده بشه

فایل style.css رو هم باز کنید و کد زیر را قرار دهید

/*********** 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;
}

 

در نهایت باکسی که نمایش داده خواهد شد به شکل زیر خواهد بود

author-final

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

موفق باشید

6 دیدگاه برای “آموزش طراحی قالب وردپرس – ساخت باکس درباره نویسنده

  • سیروس
    - ۸ اسفند , ۱۳۹۴

    ممنون برای آموزش ها.

  • حسین
    - ۲۹ اسفند , ۱۳۹۴

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

  • پیمان
    - ۱۰ خرداد , ۱۳۹۵

    چطور میشه لینک شبکه های اجتماعی نویسنده رو اضافه کنیم؟؟
    بدون افزونه!

    • الناز
      - ۱۶ خرداد , ۱۳۹۵

      سلام. آموزشی برای این کار میزارم

  • sepideh
    - ۶ مرداد , ۱۳۹۷

    عالی . لطفا آموزش های بیشتری بذارید

    • الناز
      - ۶ مرداد , ۱۳۹۷

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

دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

-- بارگیری کد امنیتی --