wordpressi

آموزش ساخت باکس نویسنده بدون افزونه

آموزش ساخت باکس نویسنده بدون افزونه

همانطور که ممکن است در برخی از وب سایت ها و مطالب آن وب سایت ها دیده باشید در اکثر آن ها وقتی که مطالب آموزشی به انتها میرسد یک باکس وجوددارد که در ان اطلاعات نویسنده آن مطلب و آن سری مطالب درج شده است که خب این اطلاعات میتواند متفاوت باشد و هر نویسنده ای اطلاعات خاص خود را در ان بنویسد.دوستان در همین ابتدا و قبل از شروع اموزش قابل ذکر است که باکس درباره نویسنده در صفحه داخلی مطالب در وب سایت وردپرسی نمایش داده خواهد شد. پس باید کدهای مربوط به ان را در وب سایت وردپرسی و در قالب وردپرس در داخل فایل single.php قرار دهیم پس به این نکته در ابتدای کار توجه نمائید.

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

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

آموزش نمایش تعداد کاربران در وردپرس
آموزش تغییر سطوح دسترسی کاربران در وردپرس

خب دوستان در ابتدا فایل single.php تم وردپرس خود را در حالت ادیت باز کنید.البته قبل از این کار و اصلا قبل از شروع به کار در این قسمت حتما از وبسایت وردپرسی خود نسخه پشتیبان را دریافت کنید تا بتوانید به خوبی از اطلاعات و وب سایت وردپرسی خود محافظت نمائید دوستان چون نسخه پشتیبان میتواند شما را در صورت بروز اشتباه در این کد نویسی ها از مشکلات بسیار جدی و مهم مصون نگه دارد.خب حالا که نسخه پشتیبان را گرفتید ادامه دهید. بعد از کد زیر یک div با کلاس author-box ایجاد کنید. خب حالا باید نام نویسنده و تصویر آواتار و همچنین توضیحاتی درباره نویسنده داخل آن قرار دهیم.

1
<?php endif; ?>

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

1
get_the_author_meta( 'ID' )

پس کد زیر را داخل div قرار میدهیم:

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

دوستان در قسمت بالا توجه کنید که عددی هم که قرار گرفته است اندازه تصویر آواتار است و میتوان ان را به خوبی و سادگی تغییر داد.حالا در این قسمت باید نام نویسنده را تغییر دهیم.خب برای این منظور تابع the_author() را داریم که خب این تابع هم نام نویسنده را برمیگیرداند.خب حالا کد زیر را در ادامه کد بالا قرار دهید دوستان:

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

خب دوستان پس از قرار دادن کد قوق در وب سایت حالا نوبت به نمایش توضیحاتی است که شما به عنوان یک نویسنده وب سایت در این قسمت باید قرار دهید.خب دوستان در این قسمت باید با استفاده از the_author_meta() توضیحات را دریافت کنیم پس برای این مظنور باید کد زیر را در ادامه کد بالا قرار دهیم:

1
2
3
4
5
<div class="clearfix"></div>
<?php the_author_meta('description'); ?>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*********** 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;
}

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