تبلیغات در پورتال

دکمه بالا برای وردپرس - به سرعت به بالای صفحه بپرید. دکمه بازگشت به بالا برای وردپرس

(آخرین به روز رسانی: 03.05.2019)

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

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

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

امروز به شما معرفی خواهم کرد بهترین افزونه هایی که با آن می توانید دکمه بازگشت به بالا (Scroll To Top) را در وب سایت یا وبلاگ خود نصب کنید. بر اساس بیشترین بارگیری ماژول ها توسط کاربران پلت فرم WP انتخاب شده است. به شما یادآوری می کنم که همه افزونه ها قابل نصب هستند به صورت استاندارد، از پنل مدیریت، از طریق جستجو و بارگذاری افزونه. نیازی به دانلود چیزی نیست. نصب شد، فعال شد، پیکربندی شد و تمام.

نحوه ساخت دکمه up در وب سایت افزونه ها - دکمه بالا برای وردپرس

ابتدا به سراغ یک پلاگین ساده جی کوئری Smooth Scroll می رویم.

پلاگین jQuery Smooth Scroll

این افزونه پس از نصب و فعال سازی ماژول به صورت خودکار یک دکمه up اضافه می کند. دکمه up در گوشه سمت راست پایین سایت ظاهر می شود. همانطور که می گویند، آن را تنظیم کنید و آن را فراموش کنید. این افزونه تاکنون بیش از 50700 بار نصب شده است. و این همان چیزی است که دکمه ما به نظر می رسد:

دکمه بالا در سایت WP

پلاگین Smooth Scroll Up - پیمایش صافبالا

پلاگین Smooth Scroll Up سبک وزن

Smooth Scroll Up یک افزونه سبک وزن است که قابلیت شخصی سازی اسکرول به بالا را در سایت وردپرس شما ایجاد می کند. افزونه Smooth Scroll Up دارای حداقل تنظیمات است. انتخاب کنید انواع مختلفعناصر را به بالا ببرید - تصویر، نماد، پیوند متن و غیره.

گزینه هایی برای پیکربندی افزونه Smooth Scroll Up

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

افزونه WPFront Scroll Top

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

ماژول WPFront Scroll Top به بازدید کننده اجازه می دهد تا به راحتی به بالای صفحه با گزینه ها و تصویر کاملاً قابل تنظیم برگردد. این افزونه تنظیمات بیشتری دارد و از همه مهمتر انتخاب بسیار زیادی از آیکون ها (تصاویر) خود دکمه است. شما همچنین می توانید بدون تصویر انجام دهید:

راه اندازی افزونه WPFront Scroll Top

و تصاویر دکمه ها خود گزینه های زیادی برای انتخاب دارند. حتی اگر هیچ یک از تصاویر دکمه در بالا مناسب شما نیست، می توانید پیوندی به تصویر دکمه خود ارائه دهید:

انتخاب دکمه بالا

موافقم، این مجموعه بسیار مناسبی از تصاویر برای یک دکمه جادویی است. درست است، افزونه است انگلیسی، اما گوگل ترجمه خواهد کرد. در اینجا یک مثال است دکمه نصب شدهدر وب سایت:

دکمه بالا

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

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

ماژول Scroll Back To Top همچنین دارای تعدادی تنظیمات و گزینه‌ها برای نحوه ظاهر دکمه بالا است:

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

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

(function(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId: "R-A -292864-4"، renderTo: "yandex_rtb_R-A-292864-4"، async: true )))؛ t = d.getElementsByTagName("script")؛ s = d.createElement("script")؛ s .type = "text/javascript" s.src = "//an.yandex.ru/system/context.js";

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

دکمه بازگشت به بالا برای چیست؟

به عنوان مثال، شما یک مقاله طولانی نوشتید، کاربر آن را تا آخر خواند و اکنون می خواهد به ابتدا برگردد. من فکر می کنم این یک موقعیت آشنا است. این درست نیست؟ اما چرخاندن چرخ ماوس و "کشیدن" لغزنده خیلی راحت نیست و زمان زیادی می برد.

به همین دلیل ایجاد شد این تابع- بالا بردن صفحه به بالا. و همچنین، اگر دکمه را به زیبایی طراحی کنید، پس این یک مزیت برای طراحی است! و اگر آن را تغییر دهید، پس از فشار دادن آن، می توانید صفحه را به پایین رها کنید، یعنی. برعکس همینطور.

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

نصب دکمه با افزونه

اولین کاری که باید انجام دهید این است که آن را فعال کنید. پس از آن دکمه شروع به کار می کند. اما تصویر دکمه استاندارد خواهد بود. من به شما توصیه می کنم آن را به خودتان تغییر دهید. برای این:

  • به تب "گزینه ها" بروید
  • —> به بالا بروید
  • و ظاهر دکمه را از بین موارد پیشنهادی انتخاب کنید یا خودتان آپلود کنید
  • روی دکمه "به روز رسانی گزینه ها" کلیک کنید
  • آماده! دکمه بازگشت به بالا برای وردپرس ظاهر جدیدی دارد.

    • مثل این. شما همچنین می توانید آن را پیکربندی کنید، یعنی:

    • مکان
    • تورفتگی ها
    • سرعت
    • و بیشتر
    دکمه "بازگشت به بالا" بدون افزونه

    اکنون به نحوه انجام آن خواهیم پرداخت دکمه بازگشت به بالا برای وردپرسبدون استفاده از پلاگین های شخص ثالث چرا پلاگین نداره؟ اما چون پلاگین ها سایت را کند می کنند. من قبلاً این را بیش از یک بار گفته ام (در مقاله - افزودن ویدیو به وردپرس) و بارها و بارها خواهم گفت.

    برای ساخت یک دکمه دستورالعمل زیر را دنبال کنید:

    1. فایل footer.php را که در پوشه حاوی قالب قرار دارد باز کنید و کد را در جلو قرار دهید:

    فقط کافی است تغییراتی ایجاد کنید، یعنی:

    • جایی که نوشته your_site.ru - آدرس سایت خود را بنویسید
    • مسیر تصویر کجاست - مسیر تصویری که دکمه خواهد بود را وارد کنید
    • جایی که عکس عنوان عکس است. اگر jpg نیست، آن را به فرمتی که در تصویر تنظیم شده است تغییر دهید.

    2. فایل style.css را که در پوشه template نیز قرار دارد باز کنید و در آخر کد زیر را قرار دهید:

    #toTop (عرض: 100 پیکسل؛ تراز نوشتاری: مرکز؛ پد: 5 پیکسل؛ موقعیت: ثابت؛ پایین: 10 پیکسل؛ سمت راست: 10 پیکسل؛ مکان نما: نشانگر؛ رنگ: #666666؛ تزئین متن: هیچکدام؛)

    3. دانلود و استخراج کنید. این شامل فایل verx.js است که باید آن را به ریشه سایت خود اضافه کنید.

    4. فایل functions.php واقع در پوشه قالب را باز کنید و کد را در آنجا وارد کنید:

    // گنجاندن هوشمند جی کوئری if (!is_admin()) ( wp_deregister_script("jquery"); wp_register_script("jquery", ("//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ), false wp_enqueue_script("jquery");

    5. خب، همین! من می توانم به شما تبریک بگویم، اکنون سایت شما یک دکمه بازگشت به بالا برای وردپرس دارد.

    شما به تازگی مقاله “دکمه بازگشت به بالا برای وردپرس” را مطالعه کرده و آن را برای خود نصب کرده اید. برداشت شما چیست؟ در نظرات بنویسید! فعلاً همین است، همه.

    با احترام، کنستانتین بلان.

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

    افزودن آن به سایت وردپرس خود بدون افزونه با استفاده از یک تابع جاوا اسکریپت بسیار ساده است. برای این کار باید 4 مرحله را طی کنید.

    1. فایل goTop.js را با محتوای زیر در دایرکتوری js تم خود قرار دهید. اگر چنین دایرکتوری وجود ندارد، می توانید آن را ایجاد کنید یا از هر دایرکتوری دیگری استفاده کنید، اما در مرحله دوم باید مسیر اسکریپت goTop.js را تغییر دهید.

    $(function())($.fn.scrollToTop=function())($(this).hide().removeAttr("href");if($(window).scrollTop()!="0") ($ (this).fadeIn("slow"))var scrollDiv=$(this);$(window).scroll(function())(if($(window).scrollTop()=="0")( $(scrollDiv ).fadeOut("slow"))else($(scrollDiv).fadeIn("slow"))));$(this). کلیک کنید(function())($("html, body"). animate((scrollTop :0)،"slow"))))));

    $ (تابع () ($. fn. scrollToTop = تابع () ($ (this) . hide () . removeAttr ("href") ؛ if ($ (پنجره) . scrollTop () != "0" ) ($ (this) fadeIn ("slow") ) var scrollDiv = $ ( این ) ; ) fadeOut ( "آهسته" ) else ($ (scrollDiv) . 0 ) , "آهسته" ) ) ) ) ) ) ;

    2. کد زیر را قبل از تگ بسته شدن در فایل footer.php تم خود قرار دهید

    /js/goTop.js" type="text/javascript"> $(function() ($("#goTop").scrollToTop(); ));

    < a href = "#" id = "goTop" alt = "بالا" title = "بالا" > < img src = " /images/goUp.png" border = "0" align = "absmiddle" / > < / a >