ایجاد پاورقی شناور در وردپرس

نویسنده : محمد جواد فرکاریان ۲۱ مهر ۱۳۹۵

ایجاد پاورقی شناور در وردپرس

 

سلام

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

پاورقی شناور چیست؟

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

برخی استفاده ها از نوار شناور:

  • نمایش پست مورد نظر در نوار شناور
  • عضویت در خبرنامه
  • پیشنهادات ویژه

ساخت پاورقی شناور

جهت ایجاد پاورقی شناور شما باید ابتدا کد زیر را به فایل footer.php اضافه کنید(موقعیت این فایل : wp-content>theme>theme name)

توجه:theme name نام پوسته ای که بر روی وردپرس فعال میباشد.



<div class="fixedBar">


<div class="boxfloat">


<ul id="tips">


<li><a href="https://www.skaarp.com/">اسکارپ</a></li>




<li><a href="http://www.wordpress.org/">مخزن وردپرس</a></li>


</ul>


</div>


</div>


در مرحله بعد باید شما بر روی کد های بالا استایل هایی نیز اعمال کنید برای اینکار تنها کافیست کد زیر را به فایل style.css اضافه کنید:


/*skaarp Footer Bar*/
.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;
}

حالا برای اینکه پاورقی شناور به کاربران نمایش داده شود و هم متن ها به صورت تصادفی به کاربران نمایش داده شود باید یک فایل با نام floatingbar.js ایجاد کنید و کد زیر را به این فایل اضافه کنید:

(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 );

توجه:فایل بالا را در مسیر wp-content>theme>theme name>js بارگذاری کنید.
حالا برای اینکه فایل را را فعال کنید میبایست کد زیر را به فایل functions.php اضافه کنید:

function wpb_floating_bar() {
    wp_enqueue_script( 'wpb-footerbar', get_stylesheet_directory_uri() . '/js/floatingbar.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpb_floating_bar' );

create-footer-floating-in-wordpress

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

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

محمد جواد فرکاریان

علاقه مند به سیستم مدیریت محتوای وردپرس هستم و اموزش ها ی در رابطه با سیستم مدیریت محتوای وردپرس را با شما عزیزان به اشتراک میگذارم . لبخند را هیچ وقت فراموش نکنید ;-)

0 دیدگاه

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