ایجاد نوار تبلیغات به صورت شناور در سایت وردپرسی

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

تعریفی از نوار های تبلیغاتی شناور

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

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

البته با انجام این کار bounce rate یا به اصطلاح نرخ پرش سایت شما کاهش می یابد. زیرا این نوار کاربر را تحریک می کند تا از یک بخش یا صفحه با بخش یا صفحه دیگری برود و از صفحه های سایت تان بازدید کنند.

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

1. به فروش رساندن محصولات سایت
2. به دست آوردن و دریافت یک ایمیل و اطلاعات تماس از کاربران سایت
3. افزایش کلیک بر روی پیوند های موجود و مشاهده بقیه صفحات سایت

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

در این قسمت از مقاله می خواهیم به شما عزیزان بگوییم که چگونه یک نوار شناور به سایت تان اضافه کنید. برای انجام این کار نیاز به هیچ افزونه ای ندارید.  تنها کافیست با قرار دادن قطعه کد زیر در فایل footer.php سایت تان و ذخیره آن این بخش را به راحتی اضافه کنید. برای انجام این کار ابتدا به قسمت نمایش و سپس ویرایشگر بروید و فایل footer.php را باز کنید و قطعه کد زیر را در آخر کد ها قبل از بسته شدن برچسب </body> قرار دهید.

<div class="fixedBar">
<div class="boxfloat">
<ul id="tips">
<li><a href="https://bankwp.com/">بانک وردپرس</a></li>
<li><a href="https://bankwp.com/userpro">بانک وردپرس 2</a></li>
</ul>

</div>
</div>

سپس فایل استایل ها یعنی  style.css که در قالب سایت تان است را باز کرده و قطعه کد زیر را در آن قرار دهید.

.fixedbar {
background: #000; 
bottom: 0px; 
color:#fff; 
font-family: Arial, Helvetica, sans-serif; 
left:0; 
padding: 0px 0; 
position:fixed; 
font-size:16px; 
width:100%; 
z-index:99999; 
float:left; 
vertical-align:middle; 
margin: 0px 0 0; 
opacity: 0.95; 
font-weight: bold;
}
.boxfloat {
text-align:center; 
width:920px; 
margin:0 auto;
}

#tips, #tips li {
margin:0; 
padding:0; 
list-style:none
}
#tips {
width:920px; 
font-size:20px; 
line-height:120%;
}
#tips li {
padding: 15px 0; 
display:none;
}
#tips li a{
color: #fff;
}
#tips li a:hover {
text-decoration: none;
}

پس از انجام مراحل بالا سپس قطعه کد زیر را به فایل header.php پوسته سایت تان اضافه کنید.(قبل از بسته شدن برچسب </head>)

<script>
(function($) {
this.randomtip = function(){
	var length = $("#tips li").length;
	var ran = Math.floor(Math.random()*length) + 1;
	$("#tips li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){	
	randomtip();
});
})( jQuery );
</script>

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

شما عزیزان می توانید با تغییر دادن متن موجود در فایل footer.php و قرار دادن لینک سایت خودتان به جای https://bankwp.com نوار شناورتان را سفارشی سازی کنید.

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