جستجو برای:
سبد خرید 0
  • دوره ها
    • دوره های حضوری برنامه نویسی در تبریز
      • آموزش وردپرس در تبریز
      • آموزش html css در تبریز
    • دوره های غیر حضوری برنامه نویسی
      • آموزش وردپرس
      • آموزش html css
      • آموزش کانفیگ سرور مجازی
      • آموزش جامع هاست دایرکت ادمین
    • آموزش گرافیک در تبریز
      • آموزش فتوشاپ در تبریز
  • دیگر خدماتجدید
    • طراحی سایت
      • طراحی سایت دندان پزشکی
    • دیگر خدمات
      • خدمات whmcs
      • پشتیبانی VIP وردپرس
      • پاکسازی و کانفیگ امنیتی سایت الوده
      • خرید هاست پر سرعت
      • خرید سرور مجازی
      • خدمات تغییر دامنه در وردپرس
      • خرید ssl
      • گواهی پایان دوره
        • درخواست صدور گواهی
        • پیگیری صدور گواهی
  • وبلاگ
    • آموزش رایگان وردپرس
    • آموزش رایگان امنیت وردپرس
    • آموزش رفع مشکلات رایج وردپرس
    • آموزش رایگان html css
    • آموزش رایگان بوت استرپ
    • آموزش رایگان جاوا اسکریپت
    • آموزش رایگان php
    • آموزش رایگان لینوکس
    • آموزش رایگان هاست دایرکت ادمین
    • آموزش رایگان هاست سی پنل
  • ارتباط با ما
    • تماس با ما
    • قوانین سایت
    • پشتیبانی
      • ارسال تیکت
      • مشاهده ی تیکت ها
  • پورتابل هاستینگجدید
شروع ثبت نام دوره vip وردپرسی شو در شهر تبریز
فرصت تکرار نشدنی ثبت نام در دوره های حضوری با 20% تخفیف!
ساعت
دقیقه
ثانیه
استفاده از تخفیف
میلاد علیزاده
ورود
گذرواژه خود را فراموش کرده اید؟
عضویت

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

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

ارسال مجدد کد یکبار مصرف (00:60)
  • 09338776735
  • miladalizadehe.education@gmail.com
  • خدمات Whmcs
  • المنتور pro
  • لیست علاقه‌مندی‌ها
میلاد علیزاده
  • دوره ها
    • دوره های حضوری برنامه نویسی در تبریز
      • آموزش وردپرس در تبریز
      • آموزش html css در تبریز
    • دوره های غیر حضوری برنامه نویسی
      • آموزش وردپرس
      • آموزش html css
      • آموزش کانفیگ سرور مجازی
      • آموزش جامع هاست دایرکت ادمین
    • آموزش گرافیک در تبریز
      • آموزش فتوشاپ در تبریز
  • دیگر خدماتجدید
    • طراحی سایت
      • طراحی سایت دندان پزشکی
    • دیگر خدمات
      • خدمات whmcs
      • پشتیبانی VIP وردپرس
      • پاکسازی و کانفیگ امنیتی سایت الوده
      • خرید هاست پر سرعت
      • خرید سرور مجازی
      • خدمات تغییر دامنه در وردپرس
      • خرید ssl
      • گواهی پایان دوره
        • درخواست صدور گواهی
        • پیگیری صدور گواهی
  • وبلاگ
    • آموزش رایگان وردپرس
    • آموزش رایگان امنیت وردپرس
    • آموزش رفع مشکلات رایج وردپرس
    • آموزش رایگان html css
    • آموزش رایگان بوت استرپ
    • آموزش رایگان جاوا اسکریپت
    • آموزش رایگان php
    • آموزش رایگان لینوکس
    • آموزش رایگان هاست دایرکت ادمین
    • آموزش رایگان هاست سی پنل
  • ارتباط با ما
    • تماس با ما
    • قوانین سایت
    • پشتیبانی
      • ارسال تیکت
      • مشاهده ی تیکت ها
  • پورتابل هاستینگجدید
ثبت نام | ورود
آخرین اطلاعیه ها
لطفا برای نمایش اطلاعیه ها وارد شوید
0

وبلاگ

میلاد علیزاده > آموزش های رایگان آکادمی میلاد علیزاده > آموزش رایگان طراحی سایت > آموزش رفع مشکلات رایج وردپرس > اضافه کردن دکمه ی برو به بالا در وردپرس

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

29 آبان 1402
ارسال شده توسط امیرحسین بابالوئی
آموزش رفع مشکلات رایج وردپرس
3
(2)

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. امیرحسین بابالوئی هستم در خدمت شما با یکی دیگر از آموزش رایگان وردپرس تحت عنوان آموزش اضافه کردن دکمه ی برو به بالا در وردپرس

مقدمه

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

افزودن دکمه بازگشت به بالا با استفاده از افزونه

همان طور که عرض کردم یکی از ورش های اضافه کردن دکمه بازگشت به بالا، استفاده از افزونه وردپرسی هست که شما میتوانید به صورت رایگان در مخزن وردپرس آن را نصب و فعال کنید. برای این کار ابتدا شما از پیشخوان وردپرس > افزونه ها > افزودن ، کلمه WPFront Scroll Top سرچ کنید.

تنظیمات کلی افزونه WPFront Scroll Top

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

اضافه کردن دکمه ی برو به بالا در وردپرس
اضافه کردن دکمه ی برو به بالا
  • فعال: این گزینه دکمه بازگشت به بالا رو فعال میکند.
  • JavaScript Async: با زدن این گزینه برای شما امکان اسکرول دکمه با جاوا اسکریپت را فراهم میکند و باعث عمل کرد بهتر میشود.
  • مقدار جابجایی اسکرول: این گزینه مقدار پیکسل هایی رو که باید اسکرول بشه تا دکمه بازگشت به بالا ظاهر بشه.
  • ابعاد دکمه: شما میتوانید ابعاد دکمه را بر حسب پیکسل تعریف کنید و اگر میخواهید به صورت استاندارد باقی بمونه روی 0 در نظر بگیرید.
  • مدت زمان مخفی شدن دکمه: مدت زمان مخفی شدن دکمه اسکرول را بعد از رسیدن به بالای صفحه مشخص می کند.
  • مدت زمان اسکرول: مدت زمانی که اسکرول صفحه طول می کشد را تعیین کنید.
  • مخفی شدن خودکار: شما میتوانید با زدن این دکمه اسکرول را به صورت خودکار مخفی می کند.

  • عدم نمایش در دستگاه های کوچک: اگر تیک این را فعال کنید، در دستگاه های موبایل که عرض کم تری دارد نمایش داده نمیشود.
  • عدم نمایش در پنجره های کوچک: در صورتی که مرورگر را تغییر سایز دهید برای سایز مشخص دکمه بازگشت به بالا را نمایش نمی دهد. این سایز را در گزینه “حداکثر عرض پنجره های کوچک” مشخص خواهید کرد.
  • عدم نمایش در WP-ADMIN: دکمه را در حالت لاگین wp-admin مخفی می کند.
  • استایل دکمه:  استایل دکمه را تعیین می کنید که تصویر، متن و Fontawesome باشد.
  • Button Action:  دکمه بازگشت به بالا چه اکشن و عملی انجام شود که پیش فرض آن اسکرول به بالا است.
  • محل: محل قرار گیری دکمه در را مشخص میکند.
  • فیلتر: در قسمت فیلتر شما میتوانید مشخص کنید که این دکمه در کدام صفحات نمایش داده شود.

Image Button: اگر شما از تصاویر و آیکون هایی که به صورت پیشفرض وجود دارد استفاده نمیکنید میتوانید در بخش URL آدرس تصویر خود را وارد کنید.

مقدار Alt تصویر: در مقدار alt تصویر میتوانید عنوانی انتخاب کنید که از نظر سئو میتواند به شما کمک کند.

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

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

ما با توجه به اینکه با نصب افزونه زیاد در وردپرس موافق نیستیم، همکاران ما با دانش برنامه نویسی کدی را برای شما آماده کرده ایم تا شما با قرار دادن این کد ها میتوانید کار کرد این افزونه را فراهم کنید. برای این کار لازم است در دایرکت ادمین و یا سی پنل وارد File manager شوید. و از مسیر زیر Public-html > wp-content > themes وارد پوشه تم شوید. در داخل یک فایل متنی کدهای زیر را کپی کرده و آن را با نام scroll.js ذخیره کرده و سپس پوشه js را باز کرده و این فایل را داخل آن آپلود کنید.

نکته:

در برخی از قالب ها شما امکان ویرایش فایل فانکشن رو ندارید و کد گذاری هستند. امکان دارد پشتیبان قالب یک فایل function2.php ایجاد کرده باشد. که میتوانید کد های زیر را در آنجا قرار دهید. اگر هم فایل function2.php وجود نداشت میتوانید تیکت بزنید تا پشتیبان قالب ایجاد کند.

jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() < 200) {
$('#smoothup') .fadeOut();
} else {
$('#smoothup') .fadeIn();
}
});
$('#smoothup').on('click', function(){
$('html, body').animate({scrollTop:۰}, 'fast');
return false;
});
});

سپس فایل function.php را edit بزنید، و کد زیر را قبل از <? قرار دهید. با کد زیر به وردپرس فرمان می دهید تا اسکریپت با همین نام را بارگزاری کند.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/scroll.js', array( 'jquery' ), '', true );

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

<a href="#top" id="smoothup" title="Back to top"></a>

خوب بعد از وارد کردن کد بالا الان دکمه اسکرول در سایت شما نمایش داده میشود و چون آیکون و یا تصویری ندارد نمتوانید آن را مشاهده کنید برای اینکه تصویر را اضافه کنید، کدی که در پایین گذاشته شده در ویرایشگر پوسته و فایل style.css و یا rtl.css کد زیر را وارد کنید.

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}
#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

 

در تصویر پایین قسمتی را که میبینید ، میتوانید با تغییر دادن URL ، عکس مورد نظر را آپلود کنید. و اگر کد ها را به درستی اعمال کرده باشید باید دکمه ی برو به بالا برای شما نمایش داده شود.

نتیجه گیری : اضافه کردن دکمه بازگشت به بالا با دیگر افزونه ها امکان پذیر هست که یکی از آنها با استفاده از افزونه elementor هست که در مقالات بعدی به شما اضافه کردن این امکان توسط المنتور هم آموزش میدهیم.

چقدر این پست برات مفید بود؟

روی یک ستاره کلیک کنید تا به آن امتیاز دهید!

میانگین امتیاز 3 / 5. تعداد نظر 2

تا الان نظری ثبت نشده است ! اولین نفری باشید که به این پست امتیاز می دهید.

ممنون بابت همکاریتون

جهت افزایش درامد وبسایتتون پیج مارو در اینستاگرام دنبال کنید

باکس دانلود افزونه های مرتبط با این مقاله

Password

ندارد
افزونه WPFront Scroll Topدانلود افزونه
برچسب ها: آموزش اضافه کردن دکمه بازگشت به بالای صفحه در وردپرسآموزش افزودن دکمه بازگشت به بالا وردپرسآموزش افزودن دکمه بازگشت به بالای صفحه وردپرسآموزش قرار دادن دکمه بازگشت به بالا در سایتاضافه کردن دکمه بازگشت به بالا در وردپرسافزودن دکمه اسکرول به بالا در وردپرس با افزونه WPFront Scroll Top
درباره امیرحسین بابالوئی

امیر حسین بابالوئی هستم دیپلم رشته کامپیوتر ، حدود یک سالی هست که طراحی سایت رو شروع کردم و علاقه مند به فرانت اند(Front End) سایت هستم.و دوست دارم همیشه تو دنیای وب خودمو بروز نگه دارم.

نوشته‌های بیشتر از امیرحسین بابالوئی
قبلی آموزش نصب وردپرس در هاست دایرکت ادمین
بعدی آموزش ساخت تصاویر 360 درجه در ووکامرس

دیدگاهتان را بنویسید لغو پاسخ

پیج اینستاگرام میلاد علیزاده
کانفیگ امنیتی وردپرس
خرید هاست پر سرعت
پاکسازی سایت هک شده
خرید سرور مجازی ایران
خدمات whmcs
دسته‌ها
  • آموزش افزونه های وردپرس
  • آموزش رایگان html css
  • آموزش رایگان php
  • آموزش رایگان امنیت وردپرس
  • آموزش رایگان دیجیتال مارکتینگ
  • آموزش رایگان سئو
  • آموزش رایگان طراحی سایت
  • آموزش رایگان کانفیگ سرور مجازی
  • آموزش رایگان هاست دایرکت ادمین
  • آموزش رایگان وردپرس
  • آموزش رایگان ووکامرس
  • آموزش رفع مشکلات رایج وردپرس

 

 

میلاد علیزاده هستم مدرس دوره های آموزش طراحی سایت در تبریز که فعالیت خودم رو از سال 95 در زمینه ی طراحی و میزبانی وبسایت شروع کردم. هدف من از راه اندازی این وبسایت ارائه ی آموزشی متفاوت همچنین اشتغال محور و پروژه محور هستش که هنرجو بعد از آموزش بتواند با دانش و تجربه ای کافی مستقیما وارد بازار کار شده و در زمینه ی برنامه نویسی کسب درامد کند.
© 1401. طراحی شده با عشق و یک فنجان قهوه - طراحی شده توسط میلاد علیزاده وکیلی
اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://miladalizadeh.ir/?p=16802
ورود
استفاده از شماره تلفن
آیا هنوز عضو نشده اید؟ ثبت نام کنید
ثبت نام
قبلا عضو شده اید؟ ورود به سیستم
محافظت توسط   
مرورگر شما از HTML5 پشتیبانی نمی کند.
مهارت آموزی حرفه ای با گواهینامه بین المللی

آموزش پروژه محور وردپرس در وردپرس

شرکت در دوره