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





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

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

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

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

 

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

 

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

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

 

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

در این روش برای ساخت نوار شناور باید از قطعه کدهای وردپرس استفاده کنید.

مرحله اول : ابتدا از طریق FTP سرور و یا مدیریت فایل وارد هاست خود شوید. سپس به فایل footer.php که در پوشه قالب وردپرس تان قرار دارد بروید. در نهایت این فایل را در سیستم کامپیوتر خود ذخیره نمایید. برای دسترسی به فایل فوتر قالب باید مسیر زیر را دنبال کنید:

 

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

 

سپس فایل footer.php را با ویرایشگر متنی همانند نوت پد باز کنید. با باز کردن این فایل، قطعه کد زیر را در انتهای فایل و قبل از تگ </body>قرار دهید:

 

<div class="fixedBar">
<div class="boxfloat">
 
<ul id="tips">
<li><a href="http://www.20script.ir/">20script 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>

 

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

 

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

 

/*20script Footer Bar*/
 
.fixedbar {
background: #۰۰۰;
bottom: ۰px;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
left:۰;
padding: ۰px ۰;
position:fixed;
font-size:۱۶px;
width:۱۰۰%;
z-index:۹۹۹۹۹;
float:left;
vertical-align:middle;
margin: ۰px ۰ ۰;
opacity: ۰.۹۵;
font-weight: bold;
}
.boxfloat {
text-align:center;
width:۹۲۰px;
margin:۰ auto;
}
 
#tips, #tips li {
margin:۰;
padding:۰;
list-style:none
}
#tips {
width:۹۲۰px;
font-size:۲۰px;
line-height:۱۲۰%;
}
#tips li {
padding: ۱۵px ۰;
display:none;
}
#tips li a{
color: #fff;
}
#tips li a:hover {
text-decoration: none;
}

 

مرحله سوم: در مرحله بعد باید از jQuery برای نمایش تصادفی آیتم های لیست با هربار بارگذاری صفحه استفاده کنید. بدین منظور یک ویرایشگر متنی همانند نوت پد در سیستم کامپیوتر خود باز کنید و قطعه کد زیر را در آن کپی نمایید:

 

(function($) {
this.randomtip = function(){
    var length = $("#tips li").length;
    var ran = Math.floor(Math.random()*length) + ۱;
    $("#tips li:nth-child(" + ran + ")").show();
};
 
$(document).ready(function(){   
    randomtip();
});
})( jQuery );

 

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

  • پس از ایجاد فایل فوق، باید به هاست خود بروید. سپس در مسیر wp-content >> theme >> your-theme-folder ، به دنبال فولدر js باشید.
  • نکته!! در صورتی که فولدر js را در فایل قالب خود مشاهده نکردید، بایستی یک فولدر به این نام ایجاد کنید. حال باید فایل floatingbar.js را در این پوشه آپلود کنید.
  • مرحله آخر: قدم آخر مربوط به بارگذاری فایل JavaScript در قالب وبسایت است. برای این منظور کد زیر را در فایل functions.php یا در افزونه اختصاصی سایت (site-specific plugin) قرار دهید:

 

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

 

با مراجعه به وبسایت خود می توانید فوتر شناوری را که ایجاد کرده اید، مشاهده نمایید. دوستان عزیز برای تغییر استایل این نوار شناور لازم است به کد نویسی css تسلط داشته باشید.

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

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

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

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

دانلود

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

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=27635
کلمات کلیدی پست :
مطالب مرتبط
8,535حذف دکمه پیش نمایش نوشته در وردپرس تاریخ : 2017/12/7
10,549پلاگین افزودن امکانات فروشگاهی به ادیتور وردپرس WP Sales Code تاریخ : 2013/10/24
9,420افزونه محافظت از بخش عضویت وردپرس Block Double Logins تاریخ : 2018/05/2
7,112بهینه‌ سازی Cookie-Free Domains در وردپرس تاریخ : 2019/11/8
61,911بهترین افزونه های رایگان برای نمایش سایت وردپرس بر روی موبایل تاریخ : 2014/06/10
9,844افزونه وردپرس مدیریت ابزارک ها Widget Logic تاریخ : 2016/12/25
6,880آموزش ریدایرکت صفحات رسانه وردپرس به پست اصلی تاریخ : 2019/10/11
8,610محدود کردن دسترسی به وردپرس از طریق ip تاریخ : 2018/02/22
6,280آموزش حذف قالب وردپرس از سایت بصورت کامل تاریخ : 2020/04/3
11,420حذف اسلش از انتهای لینک های وردپرس با استفاده از فایل htaccess تاریخ : 2018/07/18
7,876حذف ادرس وبسایت از نظرات در وردپرس تاریخ : 2013/10/27
13,812ایجاد سطح دسترسی برای مطالب PrivateContent نسخه 3.21 تاریخ : 2014/03/11
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file