تبلیغات
حراجی دامنه های ویژهمشاهده
آخرین ارسال های تالار مشاهده انجمن
کمک در گریویتی 1 پاسخ 302 بازدید قالب سون مگ 16 پاسخ 1144 بازدید سفارش نصب اسکریپت xfilesharing 1 پاسخ 20 بازدید تغییر وضعیت خودکار سفارش ها از انجام شده به درحال پردازش 0 پاسخ 54 بازدید All In One SEO Pack Pro 5 پاسخ 521 بازدید طراحی سایت با وردپرس 0 پاسخ 1724 بازدید طراحی سایت ریسپانسیو 1 پاسخ 460 بازدید خرید ارز ترون در بیت مهر 0 پاسخ 169 بازدید ووچر پرفکت مانی چیست 0 پاسخ 181 بازدید سایت شرط بندی فوتبال تاینی بت 0 پاسخ 199 بازدید

تبلیغات
تبلیغات تبلیغات

ایجاد پاورقی شناور در وردپرس بدون استفاده از افزونه

مقالات,آموزش,ترفند , وردپرس

پاورقی شناور در وردپرس به شما کمک می کند که مطالب مهم و دلخواه، باکس های عضویت در خبرنامه و یا پیشنهاد ویژه خود را به صورت شناور و درپایین وب سایت خود نمایش دهید.

 

ایجاد پاورقی شناور در وردپرس بدون استفاده از افزونه

 

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

 

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

برای ایجاد پاورقی شناور در وردپرس خود، ابتدا یک فایل پشتیبان از وب سایتتان تهیه نمایید و سپس به هاست خود رفته و در مسیر نصب وردپرس به آدرس wp-content/themes رفته و پوشه هم نام قالب نصبی خود را باز کنید.

 

در این پوشه به دنبال فایل footer.php بگردید، آن را ویرایش کرده و قطعه کد زیر را در جای مناسبی از آن قرار دهید.

<div class="fixedBar">

<div class="boxfloat">

<ul id="tips">

<li><a href="https://www.20script.ir/">بیست اسکریپت</a></li>

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

</ul>

</div>

</div>

برای زیباتر شدن پاورقی شناور در وردپرس، می توانید کدهای استایل دهی زیر را نیز به فایل style.css خود اضافه کنید. این فایل درست در همین مسیر قرار دارد.

.fixedBar {

background: #f9a11b;

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 اضافه کنید.

 

برای این منظور در هاست خود به مسیر wp-content/themes رفته و در پوشه قالب نصبی خود پوشه ای با عنوان js را باز کنید. فایلی با عنوان 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/themes و پوشه قالب نصبی خود، فایل function.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' );

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

ایجاد پاورقی شناور در وردپرس بدون استفاده از افزونه

موفق باشید

دانلود


هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=48899
کلمات کلیدی پست :
مطالب مرتبط
8,973دانلود قالب وردپرس دیزاینر نسخه 0.4 تاریخ : 2014/10/9
7,367حذف یکجا مطالب ، نظرات و کاربران در وردپرس با افزونه WP Bulk Delete تاریخ : 2017/06/29
2,072نمایش اعلان سفارشی در پیشخوان وردپرس تاریخ : 2019/11/25
13,126دانلود قالب وردپرس و چندمنظوره ایمپرزا Impreza نسخه 2.7 تاریخ : 2016/01/10
23,852قالب خبری و زیبای بیتوته برای وردپرس تاریخ : 2014/04/26
3,396نحوه ی نمایش خلاصه مطالب در وردپرس تاریخ : 2018/10/31
3,300روش‌های درست و نادرست ایجاد لینک داخلی در سایت وردپرسی تاریخ : 2018/09/15
33,141کد ورود و عضویت کاربران در وردپرس تاریخ : 2015/02/8
1,816حذف فاصله در نام کاربری وردپرس بدون استفاده از افزونه تاریخ : 2020/01/24
5,063افزونه اسلایدر واکنش گرا برای وردپرس Image Slider تاریخ : 2017/10/25
9,536افزونه وردپرس اسکرول سفارشی با Custom scrollbar نسخه 1.3 تاریخ : 2015/05/3
2,969آموزش نمایش انیمیشن های gif در وردپرس تاریخ : 2018/02/21
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
شرکت سئو سایت
تبلیغات
تبلیغات
تبلیغات