دانلود وردپرس
رفتن به نوشته

اضافه کردن باکس نویسنده به قالب وردپرس

باکس نویسنده

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

باکس نویسنده

برای اضافه کردن این باکس که تصویرش در بالا آمده است، دو راه دارید: استفاده از افزونه ویا کدنویسی

چرا از افزونه استفاده کنم؟

با یک کلیک باکس به صفحات نوشته شما اضافه خواهد شد و نیازی به کدنویسی و وارد شدن به بحث های تخصصی وجود ندارد.

چرا از افزونه استفاده نکنم؟

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

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

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

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

افزونه اضافه کردن باکس نویسنده به قالب وردپرس

Simple Author Box توصیه ما است. هم قابلیت پشتیبانی از RTL دارد و هم ریسپانسیو می باشد.

افزونه را از داشبورد وردپرس با جستجوی نام افزونه نصب کنید ویا از لینک دانلود زیر دانلود کرده و به پوشه wp-plugins انتقال داده و از داشبورد -> افزونه ها فعال کنید.

آواتار شما در باکس، آواتار ثبت شده در گراواتار با ایمیلتان می باشد.

باکس نویسنده

افزودن باکس نویسنده با کدنویسی

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

در اکثر قالب های استاندارد content-post.php می باشد.

کد زیر را در فایل قرار دهید:

<div class="author-info">
	<div class="author-inner">
		<div class="author-avatar">
			<?php if ( $author_avatar ) { ?>
					<div class="avatar-inner">
							<a href="<?php echo esc_url( $author_url ); ?>" rel="author">
									<?php echo $author_avatar; ?>
							</a>
					</div>
			<?php } ?>
		</div>
		<div class="author-link">
			<h4><span><a href="<?php echo esc_url( $author_url ); ?>"><?php printf( esc_html__( 'نویسنده:  %s', 'wpvar' ), esc_html( $author ) ); ?></span></a></h4>


		</div>
		<div class="author-desc">
			<p><?php echo wp_kses_post( $author_description ); ?></p>

		</div>
	</div>
</div>

برای استایل دهی کد های CSS زیر را در فایل style.css قالب قرار دهید:

.author-info {
  background: #fff;
  width: 100%;
  padding: 20px;
  border-radius: 5px;
  display: grid;
  border: 1px solid #dadada;
  margin-top: 50px;
  margin-bottom: 100px;
  transition: all 0.5s ease;
}

.author-info:hover {
  box-shadow: 0px 0px 10px 0px rgba(100, 100, 100, 0.58);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(100, 100, 100, 0.58);
  -moz-box-shadow: 0px 0px 10px 0px rgba(100, 100, 100, 0.58);
  transition: all 0.5s ease;
}

.author-avatar {
  width: 20%;
  display: block;
  float: right;
}

.author-link {
  width: 80%;
  display: block;
  float: left;
  padding-top: 15px;
}

.author-desc {
  width: 80%;
  display: block;
  float: left;
}

.author-link a {
  color: #23a455 !important;
  font-size: 20px;
  font-weight: bold;
}

.avatar-inner {
  margin: 0 auto;
  margin-right: 25%;
}

@media screen and (max-width:800px) {
  .author-avatar {
    display: none;
  }

  .author-link {
    width: 100%;
  }

  .author-desc {
    width: 100%;
  }
}

.avatar-inner img {
  border-radius: 50%;
  padding: 0;
}

.author-inner {
  padding-top: 15px;
  padding-bottom: 10px;
}

این استایلی است که ما در wpvar.com استفاده می کنیم که نمونه آن را در زیر این صفحه می توانید ببینید.

متناسب با نیاز خود استایل تغییر دهید.

سوالات خود را در بخش دیدگاه ها مطرح کنید.

اولین دیدگاه را شما ثبت کنید

ایمیل شما در دیدگاه نمایش داده نخواهد شد.

خبرنامه وردپرس فارسی

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

 

با موفقیت مشترک شدید!