آموزش افزودن متن شناور(چسبنده ) در پایین سایت

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

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

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

ویژگی های مورد استفاده از نوار شناور:

• کلیک بیشتر به پست های دیگر وبلاگ
• توجه به پیشنهاد ویژه / فروش
• ساختن لیست ایمیل برای خود

در این آموزش، ما دو روش برای اضافه کردن نوار حاشیه شناور چسبنده در سایت وردپرسی شما را نشان می دهیم:

1. استفاده از افزونه ها
2. استفاده از روش کدی که ما در WPnovin استفاده می کنیم.

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

روش ۱ – ایجاد نوار شناور در پاورقی وردپرس به صورت دستی

در این روش شما باید برخی کد ها را در فایل های وردپرس خود اضافه کنید.

در ابتدا شما باید با استفاده از یک سرویس گیرنده FTP یا مدیر فایل در cPanel به سایت وردپرس خود وصل شوید.

در FTP client شما باید فایل footer.php را در پوشه تم وردپرس خود قرار دهید و آن را به دسکتاپ خود بفرستید. این می تواند در مسیری مانند این قرار گیرد:

/wp-content/themes/your-theme-folder/

بعد شما باید فایل footer.php را در یک ویرایشگر متن ساده مانند Notepad باز کنید و قبل از برچسب </ body> کد زیر را اضافه کنید.

<div class="fixedbar">


<div class="boxfloat">
 


<ul id="tips">


<li><a href="http://www.wpbeginner.com/">WPBeginner Link is the First Item</a></li>




<li><a href="http://www.wordpress.org/">WordPress.org is the Second Item</a></li>


</ul>


 
</div>


</div>


<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>

شما میتوانید آیتم هایی راکه میخواهید به آن اضافه کنید .

گام بعدی اضافه کردن استایل های CSS است. شما می توانید CSS را به استایل style.css تم وردپرس خود اضافه کنید یا از افزونه Simple CSS سفارشی استفاده کنید.

/*WPBeginner 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;
}

بعد از اضافه کردن CSS شما ممکن است قادر به مشاهده تغییرات که ایجاد کرده اید نباشید به دلیل این که ما هیچ یک از آیتم ها را برای نمایش در صفحه نمایش تعیین نکرده ایم.

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

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

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

اکنون سرویس گیرنده FTP خود را باز کرده و به سرور وب خود متصل شوید. به پوشه تم خود بروید و پوشه js را پیدا کنید. در مسیری مثل این خواهد بود:

/wp-content/themes/your-theme-folder/js

اگر هیچ پوشه js در پوشه موضوعی شما وجود نداشته باشد، باید آن را ایجاد کنید. در این قسمت شما باید فایل floatingbar.js در پوشه js آپلود نمایید.

گام بعدی این است که شما باید فایل جاوا اسکریپت در تم وردپرس خود (load) نمایید.

این کد را در فایل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' );
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>

هم اکنون شما می توانید برای مشاهده نوار شناور به وب سایت خود مراجعه کنید. با بارگذاری صفحه خود برای چندین بار شما می توانید تمام آیتم ها را در نوار شناور به صورت تصادفی مشاهده کنید .

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

روش ۲ – اضافه کردن نوار شناور در پایین وب سایت وردپرس با استفاده از OptinMontser

افزونه OptinMontser یکی از محبوب ترین افزونه ها میباشد که در بیشتر وب سایت ها از آن استفاده میکنند این به شما کمک می کند تا بازدید کنندگان وب سایت را به مشترکین و مشتریان تبدیل کنید.
یکی از ویزگی های این افزونه این است این افزونه یک سربرگ و نوار پنهان شناور است که می توانید از آن برای نمایش یک فرم ایمیل و همچنین تبلیغ لینک ها / پیشنهادات استفاده کنید.

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

• راه اندازی آسان (بدون کد)
• شما می توانید میله های شناور سفارشی را در صفحات / دسته های مختلف وب سایت خود نشان دهید.
• شما می توانید از آن برای ساخت لیست ایمیل خود و همچنین ارتقاء پیشنهادات استفاده کنید.

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

در این بخش از شما خواسته می شود نام کاربری و کلید OptinMonster API خود را ارائه دهید. شما می توانید این کلید ها را از حساب OptinMonster خود دریافت کنید.

کلید را در تنظیمات افزونه کپی و اضافه کنیذ و سپس روی دکمه ‘Connect to OptinMonster’ کلیک کنید. افزونه سایت وردپرسی شما را به حساب OptinMonster شما متصل خواهد کرد.

سپس شما باید بر روی دکمه Create New Optin کلیک کنید.

این شما را به صفحه ‘Create New Optin’  در OptinMonster وب سایت شما راهنمایی می کند.

در ابتدا شما باید یک عنوان برای کمپین خود ارائه دهید سپس وب سایتی را که می خواهید این کمپین را ارائه دهید انتخاب کنید اگر سایت شما در لیست موجود نمی باشد شما می توانید بر روی گزینه ‘Add a new website’ کلیک کنید.

سپس شما می توانید بر روی نوار شناور در زیرگزینه ‘Select your optin type’ برای استفاده در قالب های در درسترس کلیک کنید. شما می توانید همه این قالب ها را به دلخواه خود سفارشی کنید. به محض این که شما یک قالب را انتخاب کنید OptinMonster از طراحی customizer شما راه اندازی خواهد شد. شما می توانید در این قسمت پیکر بندی های مورد نیاز خود را انجام دهید.

پس از اعمال تغییرات بر روی دکمه save کلیک کنید .

گاهی اوقات ممکن است این گزینه ها در دسترس نباشد بنابراین شما میتوانید از ویژگی Yes / No برای اضافه کردن دکمه برای مشاهده یک پست وبلاگ یا درخواست تخفیف ویژه استفاده کنید.

هنگامی که برای اولین بار بخواهید نوار شناور را ایجاد کنید ممکن است به صورت تعلیق در بیاید پس از اتمام پیکربندی آن به نوار وضعیت موجود در منوی بالا بروید و Start Campaign را انتخاب کنید نوار شناور شما اکنون آماده است تا به سایت وردپرس خود اضافه شود.
به بخش مدیریت سایت خود بازگردید و به OptinMonster » Optins مراجعه کنید در این قسمت لیستی را که انتخاب کرده بودید را مشاهده خواهید کرد.

اگر برای شما قابل مشاهده نیست بر روی دکمه Refresh Optins کلیک کنید.

در صفحه بعد بر روی گزینه Enable optin on site کلیک کرده و سپس برای ذخیره تغییرات بر روی دکمه save کلیک کنید.

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

پایان…!