Home / وردپرس / کد وردپرس / ایجاد پاورقی شناور در وردپرس

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

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

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

شما در حال خواندن ایجاد پاورقی شناور در وردپرس هستید.

سلام

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

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

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

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

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

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

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

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



<div class="fixedBar">


<div class="boxfloat">


<ul id="tips">


<li><a href="http://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

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

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

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

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

نگاهی به این مطلب بندازید

hide-page-of-the-site-in-google-results

پنهان کردن صفحه ای از سایت در نتایج گوگل

سلام ایا میخواهید صفحه ای خاص را از نتایج جستجوی گوگل مخفی کنید؟ گاهی اوقات …

پاسخ دهید

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

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