ასეთი ფუნქცია, როგორიცაა საიტის "up" ღილაკი, ინტერნეტ რესურსს უფრო კომფორტულს ხდის მისი ვიზიტორებისთვის. ის დაგეხმარებათ მარტივად გადაიტანოთ გვერდის ნებისმიერი ადგილიდან გვერდის ზედა ნაწილში. ეს აუცილებელია ონლაინ მაღაზიებისთვის და საიტებისთვის დიდი სტატიებით, რომლებიც საჭიროებენ ხანგრძლივ გადახვევას ქვემოთ.
რისთვის არის ეს
ამჟამად საიტების უმეტესობას არ აქვს ისეთი ფუნქცია, როგორიცაა "up" ღილაკი და ამაში კრიტიკული არაფერია. მაგრამ მის გამოყენებას შეუძლია მრავალი უპირატესობა მოიტანოს როგორც ინტერნეტ რესურსისთვის, ასევე მისი ვიზიტორებისთვის.
სარგებელი ვიზიტორებისთვის
ეს ხშირად ხდება, როდესაც ინტერნეტ რესურსის გვერდი ძლიერ არის დატვირთული ინფორმაციით, როდესაც საინფორმაციო სტატია დიდ ადგილს იკავებს და თქვენ უნდა გადახვიდეთ გვერდის მაუსის ბორბლით. ამას გარდა, სტატიის ბოლოს შეიძლება მასზე ბევრი კომენტარი იყოს.
როდესაც სტუმარი კითხულობს სტატიას, არაფერია მოსაბეზრებელი გვერდის ქვემოთ გადახვევაში, მაგრამ როცა ტექსტი მთავრდება და ზევით უნდა ახვიდე, ის ცოტათი დამღლელი ხდება. ადამიანების უმეტესობას უბრალოდ ძალიან ეზარება გადახვევა დიდი ხნის განმავლობაში და ისინი უბრალოდ დახურავენ საიტს, იმის ნაცვლად, რომ კიდევ ერთხელ გაისეირნონ მის ტერიტორიებზე.
ღილაკის გამოყენებამყისიერად გადაადგილება გვერდის ზედა ნაწილში უფრო მოსახერხებელია დროის გატარება საიტზე.
სარგებელი ინტერნეტ რესურსისთვის
პოზიტივი თავად რესურსზე მოდის წარსული ფაქტორებიდან, რადგან საიტის მარტივი ნავიგაცია აუმჯობესებს ქცევის ფაქტორებს, რადგან ყველა სტუმარი უფრო აქტიური იქნება თავის ქმედებებში და გადავა სხვა გვერდებზე.
ამგვარად, ეს ქცევითი ფაქტორები გავლენას ახდენს ყველა საძიებო სისტემის დამოკიდებულებაზე საიტის მიმართ და იწვევს პოზიციის გაუმჯობესებას ძიების შედეგებში.
როგორ გააკეთოთ ღილაკი "up" საიტზე საკუთარ თავს
გარიგება შემდგომი. თქვენ ყოველთვის შეგიძლიათ შექმნათ გადახვევის ღილაკი საიტისთვის ნებისმიერ CMS-ზე, მხოლოდ რამდენიმე ძალიან მარტივი ნაბიჯის შემდეგ:
- სურათის შექმნა;
- სკრიპტის შექმნა;
- ღილაკის სტილის შექმნა;
- დამატება საიტზე.
ღილაკის სურათი
საიტზე "up" ღილაკის დასამატებლად ჯერ თავად უნდა გააკეთოთ ხატულა, დაწკაპუნებისას მომხმარებელი გადავა გვერდის ზედა ნაწილში. ამისათვის შეგიძლიათ გამოიყენოთ მზა ვარიანტები, რომელთა შორის ყოველთვის შეგიძლიათ აირჩიოთ ყველაზე შესაფერისი.
ღილაკის გარეგნობის გასაუმჯობესებლად, ჩვენ გვჭირდება გარკვეული გაუმჯობესება, კერძოდ, შევქმნათ სპრაიტი, რომელიც საშუალებას მოგვცემს გავაერთიანოთ ფონის სურათები CSS-ზე დაყრდნობით და ამით შევქმნათ მათგან ანიმაცია.
გრაფიკული ნამუშევრებისთვის შეგიძლიათ გამოიყენოთ ნებისმიერი რედაქტორი. მაგრამ ყველაზე მოსახერხებელი ვარიანტი იქნება ონლაინ სერვისი. PIXLR, რადგან აქ ჩამოსატვირთი არაფერია და შეგიძლიათ გამოიყენოთ იგი პირდაპირ თქვენს ბრაუზერში.
დასაწყებად, რედაქტორის ფანჯარაში, რომელიც გამოჩნდება, აირჩიეთ ველი "სურათის ატვირთვა კომპიუტერიდან". მაგალითად ავიღოთ რაკეტის სურათი.
თუ არჩეული ხატის ზომები ძალიან დიდია, მაშინ მოგიწევთ მცირე ზომის კორექტირება. ამისათვის გადადით ზედა მენიუში და აირჩიეთ ველი "რედაქტირება", ხოლო "უფასო ტრანსფორმაციის" შემდეგ
შემდეგ, ნახატის გვერდით ჩნდება სპეციალური მარკერები, რომელთა გადაადგილებაც შეგიძლიათ შეცვალოთ სურათის ზომა. პროპორციების შესანარჩუნებლად შეგიძლიათ გამოიყენოთ Shift კლავიატურა, რომლის დაჭერით თქვენ უნდა გადაიტანოთ ლურჯი მარკერები. ამ ნაბიჯების ბოლოს მიიღება რაკეტის გამოსახულება.
შემდეგი ნაბიჯი არის ფენის ასლის შექმნა.
ახლა თქვენ უნდა გადაიტანოთ რაკეტის სურათი ახალი ფენიდან ოდნავ ზემოთ. ამისათვის მოსახერხებელი იქნება გადაადგილების ინსტრუმენტის გამოყენება, რომელიც მდებარეობს მარცხენა მენიუს მეორე სვეტში და კლავიატურაზე ზემოთ ისარი.
ახლა ჩვენ უნდა გავხადოთ ზედა სურათი შავ-თეთრი. ეს შეიძლება გაკეთდეს ზედა მენიუში პუნქტის "Corection" - "Hue / Saturation" გამოყენებით. სრული დესატურაციისთვის, Saturation slider უნდა დაყენდეს -100-ზე. ეს მოქმედება საშუალებას მოგცემთ შექმნათ ეფექტი, რომლის დროსაც ღილაკი "Up" გადაიქცევა შავ-თეთრიდან ფერად, როცა მასზე გადახვალთ.
ბოლო შეხება არის ზედმეტი სივრცის მოცილება ორი სურათის გარშემო. ამისათვის აირჩიეთ "Crop" ელემენტი მარცხენა მენიუდან დაჩვენ ვირჩევთ მხოლოდ ორ რაკეტას მართკუთხედში. ჭრის შესასრულებლად დააჭირეთ Enter ღილაკს.
შედეგი არის სურათი, რომელშიც ზედმეტი თავისუფალი ადგილი არ არის. თქვენ უნდა ჩაწეროთ მიღებული სურათის სიგანე და სიმაღლე, რადგან ეს მონაცემები სასარგებლო იქნება შემდეგ ეტაპზე.
შესანახად, თქვენ უნდა დააჭიროთ "ფაილი" - "შენახვა", სადაც მარცხენა აბზაცში "ჩემი კომპიუტერი" ვწერთ სურათის სახელს (მხოლოდ ინგლისური განლაგება), აირჩიეთ ფორმატი (ამაში case, PNG) და დააჭირეთ ღილაკს "დიახ".
ფაილი "up" ღილაკის სკრიპტით
ამ შემთხვევაში არ გჭირდებათ სკრიპტის დაწერა. შესაძლებელი იქნება საჯარო ვერსიის გამოყენება დასრულებულ კოდში გარკვეული ცვლილებების შეტანით.
ამისთვის, თქვენ უნდა ჩამოტვირთოთ ნებისმიერი კოდის რედაქტორი. ყველაზე პოპულარული და ასევე უფასო ვარიანტია Notepad++. ინსტალაციის შემდეგ, თქვენ უნდა დააკოპიროთ და ჩასვათ მასში მთელი ეს კოდი:
| $(დოკუმენტი).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}});$('scroller'). დააწკაპუნეთ(ფუნქცია () {$('body, html').animate({scrollTop: 0}, 400); დაბრუნება ყალბი;}); }); |
შემდეგი, დააწკაპუნეთ ზედა მენიუში "ფაილი" - "შენახვა როგორც …", რის შემდეგაც ჩვენ ვინახავთ კოდს.js ფორმატში. ამის შემდეგ, თქვენ შეგიძლიათ გამოიყენოთ ეს კოდი თქვენს საიტზე სკრიპტის ფაილების და სურათების ატვირთვით მასში FTP კავშირის გამოყენებით.
დაინსტალირება საიტზე
საიტისთვის გადახვევის ღილაკის დასაყენებლად, თქვენ უნდა მოათავსოთსაჭირო ადგილის კოდი. თქვენ უნდა შეიყვანოთ იგი ტეგამდე.
ღილაკების სტილის შექმნა CSS-ით
ყველაზე ხშირად, საიტის "up" ღილაკი მდებარეობს ბოლოში ("ძირი").
შემდეგი კოდი უნდა დაემატოს საიტის style.css ფაილს:
|
/აღმა ღილაკი/ .scrollTop{ background:url('images/up.png') 0 0 გამეორების გარეშე;/სურათის საწყისი გზა/ width:39px;/ ღილაკი სიგანე/ სიმაღლე:96px;/50% ღილაკის სიმაღლე/ ქვედა:5პიქს;/ქვედა ბალიშები ფიქსირებულ პოზიციაზე/ მარცხნივ:89%;/shift მარცხნივ/ }.scrollTop:hover{ background-position:0 -108px; } /ფონის გადანაცვლება/" |
ამ შემთხვევაში, საჭირო იქნება სურათის სიგანისა და სიმაღლის მონაცემები. რჩება მხოლოდ მიღებული მონაცემების კოდში შეყვანა და საიტის ღილაკი "up" მზად იქნება! კიდევ რა?
Up ღილაკი Wordpress საიტისთვის
ამ CMS-ისთვის ღილაკი "Up" შეიძლება გაკეთდეს დანამატების გამოყენებით, ასევე დამოუკიდებლად.
მოდულების მეთოდი არის ყველაზე მოსახერხებელი და მარტივი ინსტალაცია, რადგან ის მოითხოვს მხოლოდ დააწკაპუნოთ ინსტალაციის ღილაკზე და დააკონფიგურიროთ ყველა ფუნქცია დანამატის მენიუში.
ამ უკანასკნელის არჩევანს სიფრთხილით უნდა მივუდგეთ, რადგან ამით ადვილი იქნება საიტზე ვირუსის მოპოვება. ყველაზე პოპულარული და დადასტურებული ვარიანტია მოდული სახელწოდებით Scroll Back To Top. მისი ჩამოტვირთვა შეგიძლიათ Wordpress დანამატების სტანდარტული ძიების გამოყენებით.
ამ გაფართოებას აქვსმრავალჯერადი ფუნქციონირება და ძალიან ადვილი იქნება Wordpress საიტისთვის ღილაკის „up“მორგება. საერთოდ არ არის აუცილებელი ყველა მნიშვნელობის შეცვლა, საჭიროა მხოლოდ საიტის გვერდზე ღილაკის გარეგნობისა და მდებარეობის კონფიგურაცია.
როგორც ხედავთ, ღილაკის დაყენება დანამატებით ძალიან მარტივია. მაგრამ არის ერთი მნიშვნელოვანი ნიუანსი, რომელიც არის ის, რომ თითოეული დაინსტალირებული მოდული იტვირთება CMS. ამან შეიძლება გავლენა მოახდინოს ინტერნეტ რესურსის სიჩქარეზე. სწორედ ამიტომ, საიტის მფლობელების უმეტესობა ცდილობს ყველა ცვლილება შეიტანოს პირდაპირ კოდში და არა მესამე მხარის გაფართოებების დახმარებით. თქვენ შეგიძლიათ გააკეთოთ ღილაკი "up" HTML საიტისთვის, რაც მინიმუმამდე შეამცირებს მოხმარებულ რესურსებს.
Wordpress სისტემის ყველა ფაილის შეცვლამდე, თქვენ უნდა შექმნათ მათი სარეზერვო ასლი. შემდეგ თქვენ შეგიძლიათ მიჰყვეთ ყველა ნაბიჯს, რათა შექმნათ თქვენი საკუთარი ღილაკი, რომელიც აღწერილია ზემოთ.
ღილაკი "up" Joomla-სთვის
CMS Joomla ასევე მხარს უჭერს დანამატების დაყენებას, როგორიცაა Wordpress. Joomla 3-ზე საიტის "up" ღილაკის ყველაზე წარმატებული ვერსია არის გაფართოება სახელწოდებით Top of Page.
ამ CMS-ში ნებისმიერი მოდული შეიძლება დაინსტალირდეს "გაფართოების მენეჯერის" მეშვეობით. ამისთვის გჭირდებათ:
- ჩამოტვირთეთ მოდული ინტერნეტში;
- დააწკაპუნეთ ღილაკზე "Browse" გაფართოების მენეჯერში;
- აირჩიეთ გადმოწერილი არქივი;
- დააწკაპუნეთ "ჩამოტვირთვა" და დააინსტალირეთ.
ახლა თქვენ უნდა გაააქტიუროთ ის "Plugin Manager"-ში. Ამისთვისთქვენ უნდა შეხვიდეთ ამ განყოფილებაში, იპოვოთ დანამატი და გადართოთ მისი სტატუსი "ჩართულია".
შემდეგი ნაბიჯი არის გაფართოების ყველა პარამეტრის კონფიგურაცია იმავე განყოფილების გამოყენებით, სადაც თქვენ უნდა იპოვოთ ამ მოდულის "ძირითადი პარამეტრები" მარჯვენა მხარეს.
გვერდის ზედა ნაწილს აქვს შემდეგი ფუნქცია:
- გაშვება/ადმინისტრატორი - ჩართეთ ოფცია არა მხოლოდ ინტერნეტ რესურსზე, არამედ თავად Joomla CMS პანელშიც.
- ღილაკის გამოვლენის პოზიცია - რამდენი პიქსელი უნდა გადააბრუნოს მომხმარებელმა, რომ გამოჩნდეს ზემოთ ღილაკი.
- ღილაკის ტექსტის გამოტოვება - ღილაკზე ტექსტის არსებობა.
- ყოველთვის ზევით - საიტის გვერდი ყოველთვის გამოჩნდება ზემოდან. როდესაც იყენებთ წამყვანებს გვერდზე კონკრეტულ მდებარეობაზე გადასასვლელად, ამ პარამეტრის ჩართვა არ არის საჭირო.
- Smooth Scroll - ხდის გვერდის გადახვევას უფრო გლუვს.
- გადახვევის ხანგრძლივობა - დრო, რომლის შემდეგაც გვერდი მთლიანად გადავა დასაწყისში.
- Scroll Transition - ამატებს მეტ ვიზუალურ ეფექტებს გადახვევას.
- ტრანზიციის შემსუბუქება - გადაადგილების „შეასუსტება“გვერდის ზემოთ.
- ბმულის მდებარეობა - ხატის მდებარეობა. ნაგულისხმევად, ღილაკი მდებარეობს ქვედა მარჯვენა კუთხეში.
- გამოიყენე სტილი – ღილაკის ინდივიდუალური სტილი, რომელიც შეიძლება დაყენდეს ქვემოთ მოცემულ ველში. თუ გადართეთ უარყოფით მნიშვნელობაზე, მაშინ სტილის ყველა პარამეტრი იქნება აღებული საიტის აქტიური თემიდან.
- ბმულის სტილი - ველი თქვენი ღილაკის სტილის პარამეტრების შესაყვანად.
ღილაკის "up" სტილის მოსარგებად, თქვენ უნდა გქონდეთ მინიმუმ მინიმალურიCCS ცოდნა. წინააღმდეგ შემთხვევაში, თქვენ უნდა გადართოთ ბოლო პარამეტრის მნიშვნელობა "არა".
კიდევ ერთი მნიშვნელოვანი ნიუანსი არის ის, რომ ჩვეულებრივი წარწერა ხატზე შეიცავს ინგლისურ ტექსტს: Return to Top. ასეთი ტექსტი არ შეიძლება იყოს რუსულენოვან საიტზე, ამიტომ უბრალოდ უნდა გამორთოთ ის დანამატის პარამეტრებში ან შეცვალოთ რუსულზე.
ამ წარწერის შესაცვლელად, თქვენ უნდა შეხვიდეთ საიტის სერვერზე FTP-ის ან ჰოსტინგში ჩაშენებული ფაილების მენეჯერის გამოყენებით. შემდეგი, დირექტორიაში "/administrator/language/en-GB/" თქვენ უნდა იპოვოთ ფაილი სახელწოდებით "en-GB.plg_system_topofthepage.ini".
ტექსტის შეცვლამდე, თქვენ უნდა შეცვალოთ ამ დოკუმენტის კოდირება UTF-8-ით. ეს გახდის რუსული ასოების ნორმალურ ჩვენებას.
შემდეგი ვპოულობთ შემდეგ ხაზს:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP=" დაბრუნება"" |
და შეცვალეთ ფრაზა ბრჭყალებში რუსულად. შეგიძლიათ გამოიყენოთ ფრაზები, როგორიცაა "ზემოთ!", "ზევით!" ან „მაღლა!“.
დასასრულს, თქვენ უნდა შეინახოთ შეცვლილი ფაილი და შეამოწმოთ ღილაკი "up" საიტისთვის Joomla-ზე.
აღმა ღილაკი Ucoz-ისთვის
ღილაკი "up" საიტისთვის Ucoz-ზე უნდა გაკეთდეს კოდის ინექციის გამოყენებით, რადგან შეუძლებელია ამ CMS-ის დანამატების დაკავშირება. თუმცა, ეს არ საჭიროებს სისტემური ფაილების ხანგრძლივ შესწავლას და საჭირო ხაზების ძიებას, თქვენ უბრალოდ უნდა ჩასვათ პატარა კოდი სწორ ადგილას.
ჩვენთვის დასაყენებლადსაჭიროა:
- გადადით "საკონტროლო პანელზე -> დიზაინი -> დიზაინის მენეჯმენტი (თარგები) -> საიტის ბოლოში;
- ჩადეთ სკრიპტი (შეგიძლიათ იხილოთ პროექტის ოფიციალურ ვებსაიტზე და მესამე მხარის რესურსებზე).
დასკვნა
ამის შემდეგ, ქვედა მარჯვენა კუთხეში გამოჩნდება ხატი, რომელიც მომხმარებელს გადააქვს გვერდის ზედა ნაწილში.
როგორც ხედავთ, უკანა ღილაკის დაყენება ნებისმიერი CMS-ისთვის არ იყო განსაკუთრებით რთული. შეგიძლიათ გამოიყენოთ როგორც ავტომატური ინსტალაციის მეთოდი (პლაგინები) ასევე მექანიკური. თუმცა, ეს უკანასკნელი ვარიანტი რჩება ყველაზე შესაფერისად, რადგან ის უარყოფითად არ მოქმედებს საიტის მუშაობაზე.
შეგიძლიათ გამოიყენოთ ღილაკი "უკან ზევით" HTML საიტისთვის, რათა მინიმუმამდე დაიყვანოთ საიტის რესურსების მოხმარება, რადგან გაფართოებების დიდმა რაოდენობამ შეიძლება უარყოფითი გავლენა მოახდინოს რესურსის მუშაობაზე. ერთი "up" ღილაკის დანამატი ვერ იმოქმედებს საიტის გვერდების ჩატვირთვის დროზე, მაგრამ უმეტეს შემთხვევაში მომხმარებელს აქვს მინიმუმ ათეული დანამატი დაინსტალირებული CMS-ზე. ამ შემთხვევაში, ნებისმიერმა დანამატმა შეიძლება უარყოფითად იმოქმედოს საიტის გვერდების მუშაობაზე.
