ساخت اسلایدر مطالب وردپرس بدون نصب افزونه

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

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

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

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

چرا از اسلایدر مطالب وردپرس استفاده می‌کنیم

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

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

روش‌های مختلفی وجود دارد که باعث می‌شود بازدید سایت شما زیاد شود که یکی از این روش‌های پرکاربرد استفاده از اسلایدر است. با استفاده از این روش شما برای بالا بردن بازدید سایتتان نیاز به استفاده از افزونه‌های مختلف ندارید و می‌توانید با این روش این کار را به‌راحتی انجام دهید. این کار باعث می‌شود کاربر بتواند سریعاً به محتوایی که شما در این قسمت قرار می‌دهد دسترسی داشته باشد.

ساخت اسلایدر مطالب وردپرس

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

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

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

افزودن قابلیت تصویر شاخص در قالب وردپرس

شما زمانی که بخواهید یک اسلایدر در سایت خود قرار دهید مهم‌ترین قسمت آن این است که شما قادر باشید تصویر دلخواه خود را در آن قرار دهید. اما گاهی اوقات قالب شما از این موضوع پشتیبانی نمی‌کند.

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

اگر پس از بررسی مشخص شد که شما قادر نیستید تصویر شاخص قرار دهید؛ باید به هاست خود بروید و سپس فایل functions.php را در این قسمت پیدا کنید. پس‌ازاینکه این فایل را در هاست خود پیدا کردید باید قطعه کد زیر را درون آن قرار دهید. اما اگر شما این فایل را در هاست خود ندارید باید این فایل را بسازید.

<?php 
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 260, 220, true ); // مشخص کننده طول و عرض تصویر در اسلایدر
}
?>

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

ساخت ناحیه ابزارک در فایل functions.php

در قدم بعدی برای اینکه شما بتوانید اسلایدر خود را بسازید؛ باید تکه کدهای زیر را به فایل functions.php به‌صورت زیر اضافه کنید. با این کار شما ناحیه ابزارک خود را برای فایل فانکشن تعریف می‌کنید.

register_sidebar(array(
'name' => 'right',
'before_widget' => '<div class="blockr"><div class="pat1">',
'after_widget' => '</div>',
'before_title' => '<span>',
'after_title' => '</span></div><br/><br/><br/>',
));

نمایش اسلایدر در سایت

در قدم آخر شما امکان این را دارید که اسلایدر را به سایت خود اضافه کنید. به‌این‌ترتیب شما می‌توانید با قرار دادن قطعه کدی که در اینجا برای شما قرار داده‌ایم، اسلایدر را در سایت خود به نمایش دربیاورید. شما می‌توانید توسط این کد مشخص کنید که اسلایدر شما در کجا نمایش داده شود.

<div class="footer_box">
<div id='holder' style='display:none;'>
<ul id="text_ads">
<?php
$my_query = new WP_Query('showposts=10&cat=0'); // 10
while ($my_query->have_posts()):
$my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li class='objImgFrame' >
<a href="<?php the_permalink() ?>/" title="<?php the_title(); ?>" class="image" target="_blank">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( array(212,64) );
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/no.webp" />';
}
?></a>
<a href="<?php the_permalink() ?>/" title="<?php the_title(); ?>" class="title" target="_blank"><?php the_title(); ?></a>
 </li>
<?php endwhile; ?><?php wp_reset_query(); ?>
</ul>
<div class="srcoll_nav">
<a href"#" id="leftNav" >  </a>
<a href"#" id="rightNav" >  </a>
</div>
</div>
</div>

اکنون شما باید فایل را در سایت ذخیره کنید. اما مشاهده می‌کنید که اسلایدر در سایت نمایش داده می‌شود ولی شبیه به اسلایدری نیست که شما می‌خواهید. پس شما باید کدهای زیر را در قسمت هدر سایت خود قرار دهید.

ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-position: outside;
}

div.footer_box {
	width:980px;
	float:right;
margin-right:50px;

	position:relative
}
ul#text_ads {
	width:980px;
	float:right;
	margin:10px -5px 10px 0;
}
.objImgFrame {
	    float: right;
    width: 228px;
    height: 200px;
    margin: 0px 15px 0px 0px;
    border-radius: 5px;
    box-shadow: 0px 0px 8px #000;
}

.objImgFrame .image {

	width:227px;
	height:146px;
	float:right;
}
.objImgFrame .image img {

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px 5px 0 0;
	width:227px;
	height:146px;
	float:right;
}.objImgFrame .image img:hover {
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
.objImgFrame .title {
	margin-top:8px;
	text-align:center;
	width:215px;
	float:right;
	color:#000;
	font-weight:bold;
}
.objImgFrame .descript {
	width:210px;
	float:right;
	margin:5px 5px 0 0;
	color:#000;
	font-weight:normal;
}
.objImgFrame a {
	transition-property:color;
	transition-duration:1s;
	-moz-transition-property:color;
	-moz-transition-duration:1s;
	-webkit-transition-property:color;
	-webkit-transition-duration:1s;
	-o-transition-property:color;
	-o-transition-duration:1s;
}

.simple_slider_hover {
	cursor:pointer;
	cursor:hand
}
.simple_slider_disabled {
	opacity : 0.2;
	filter: alpha(opacity=20);
	zoom: 1;
}
#leftNav {
	width:23px;
	height:85px;
	background:url(images/text_ads_arrow.webp) no-repeat 0 0;
	position:absolute;
	top:65px;
	left:-40px;
}
#leftNav:hover {
	background-position:0 -85px;
}
#rightNav {
	width:23px;
	height:85px;
	background:url(images/text_ads_arrow.webp) no-repeat -23px 0;
	position:absolute;
	top:65px;ا
	right:-30px;
}
#rightNav:hover {
	background-position:-23px -85px;
}

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

<script type='text/javascript' src='آدرس فایل جاوا'></script>

آموزش امروز هم به‌پایان رسید. امیدواریم که مطلب امروز هم به شما کمک کرده باشد. 🙂

تیم تولید محتوا

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