ارزدیجیتال
حراجی دامنه های ویژهمشاهده





پلتفرم رپورتاژ آگهی و بک لینک تسمینو
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

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

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

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

 

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

 

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

 

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

برای ایجاد پاورقی شناور در وردپرس خود، ابتدا یک فایل پشتیبان از وب سایتتان تهیه نمایید و سپس به هاست خود رفته و در مسیر نصب وردپرس به آدرس 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' );

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

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

موفق باشید

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 وردپرس , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=48899
کلمات کلیدی پست :
مطالب مرتبط
3,248روش های هایلایت کردن یک منو در وردپرس تاریخ : 2023/06/18
8,976محدود کردن نویسنده در مشاهده مطالب دیگر نویسندگان در وردپرس تاریخ : 2019/06/2
11,819محدود کردن نویسندگان به دسته بندی خاص با افزونه Restrict Author Posting تاریخ : 2017/07/4
35,585ساخت انواع فرم در سایت وردپرسی با Gravity Forms فارسی تاریخ : 2015/07/17
7,868حذف ادرس وبسایت از نظرات در وردپرس تاریخ : 2013/10/27
12,374نصب افزونه‌ های مفید وردپرس با یک افزونه وردپرس تاریخ : 2015/02/20
9,771نمایش آخرین مطالب ویرایش شده وردپرس تاریخ : 2015/07/31
15,443ساخت سایت چندزبانه با افزونه وردپرس Polylang تاریخ : 2016/09/27
9,844زیر نظر داشتن نویسندگان در وردپرس با افزونه Simple History تاریخ : 2018/01/4
8,056نمایش اعلان سفارشی در پیشخوان وردپرس تاریخ : 2019/11/25
8,724پوسته فروشگاهی و چندمنظوره UpStore برای ووکامرس تاریخ : 2019/02/7
17,544تغییر ظاهر بخش مدیریت وردپرس با افزونه WP Admin Theme CD تاریخ : 2021/08/19
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file