როგორ გავაუმჯობესოთ სურათები WordPress- ში

როგორ გავაუმჯობესოთ სურათები WordPress- ში


უკვე დიდი ხანია გავიდა, რადგან სურათები ინტერნეტში გადატვირთვისთვის ძალიან დიდი რამ იყო. დღეს ვებსაიტი ვერ იარსებებს მათ გარეშე. მიუხედავად იმისა, რომ წლების განმავლობაში მკვეთრად გაიზარდა ინტერნეტის სიჩქარე, სასიცოცხლოდ მნიშვნელოვანია, რომ თქვენს ბლოგზე ფოტოებზე იზრუნოთ.

მხოლოდ იმიტომ, რომ ადვილია სურათების ატვირთვა თქვენს საიტზე, ეს არ ნიშნავს რომ თქვენ უნდა გააკეთოთ ეს ყოველგვარი მომზადების გარეშე. დაუსაბუთებელ სურათებს, ფაქტობრივად, შეუძლია ზიანი მიაყენოს თქვენს საიტს მრავალი გზით; ვიზიტორების გავლენისგან თქვენს ვებ – გვერდისა და SEO– ის რეიტინგების სიჩქარეზე გავლენის მოხდენისგან. თუ თქვენ ჯერ არ გიფიქრიათ ამის შესახებ, ჩვენ აქ გაჩვენებთ WordPress- ში გამოსახულების გაუმჯობესების რამდენიმე გზას.

ამ სახელმძღვანელოში ჩვენ გაჩვენებთ:

  • როგორ ოპტიმიზაცია მოვახდინოთ WordPress- ისთვის სურათების ოპტიმიზაციისთვის თქვენი საიტის დააჩქაროს და SEO– ის გასაუმჯობესებლად
  • შეცვალეთ WordPress შეკუმშვის JPEG სურათები
  • WordPress- ის გამოსახულების ოპტიმიზაციის ყველაზე პოპულარული მოდული
  • დაამატეთ ზარმაცი დატვირთვა თქვენი ვიდეოებისა და სურათებისთვის
  • გამოსახულების მიღებასა და მის შემდეგ მიმზიდველ ფორმაში
  • როგორ შევქმნათ ინტერაქტიული სურათები – დახაზეთ, დაამატეთ აღწერილობები და ბმულები
  • როგორ აღვადგინოთ გამოსახულების დამატებითი ზომები
  • ამოიღეთ სიგანე და სიმაღლე გამოსახულების ატრიბუტები jQuery- ით
  • როგორ შევქმნათ პერსონალური სურათის ზომები Media Uploader- ში
  • შექმენით ნებისმიერი ვებსაიტის ავტომატური ეკრანის ანაბეჭდი და გამოაქვეყნეთ იგი, როგორც სურათი თქვენს პოსტში

Contents

როგორ ოპტიმიზაცია მოვახდინოთ WordPress- ის სურათებისთვის, ასე რომ თქვენ დააჩქარებთ თქვენს საიტს და გააუმჯობესებთ SEO

რატომ უნდა აირჩიოთ WordPress- ის სურათების ოპტიმიზაცია? თუ ძალისხმევას ცდილობ, შემდეგი მოსალოდნელია:

  • უფრო სწრაფად საიტი
  • უკეთესი SEO
  • მცირე ზომის სარეზერვო საშუალებები
  • გამტარუნარიანობის ნაკლები გამოყენება
  • ბედნიერი მომხმარებლები

თქვენ ასევე უნდა იცოდეთ, რომ არსებობს სხვადასხვა ეტაპი, რომლის დროსაც შეგიძლიათ გამოსახულების ოპტიმიზაცია. სურათებზე ზრუნვა შეგიძლიათ, სანამ ბლოგში ატვირთავთ, ან ატვირთვის შემდეგ შეგიძლიათ გააკეთოთ ეს.

სწრაფად შეამოწმოთ სურათები თქვენს საიტზე

სანამ დაიწყებთ ოპტიმიზაციაზე მუშაობას, შეგიძლიათ სწრაფად შეამოწმოთ თქვენი საიტი სიჩქარისა და შესრულებისთვის. ჩამოთვლილთაგან ნებისმიერი ინსტრუმენტის გამოყენებით, თქვენ სწრაფად გაეცანით რა ფორმით არის განთავსებული სურათები თქვენს საიტზე.

მოგვწონს გამოყენება GTmetrix რაც კი გაჩვენებთ ზუსტ სურათებს, რომლებიც თქვენს საიტს უფრო ნელა იტვირთავს.

ატვირთვის წინ WordPress- ის ოპტიმიზაცია

ბლოგირების დროს, ადამიანების უმრავლესობამ არ გადალახა ყველა საჭირო ნაბიჯი მათი გამოსახულების ოპტიმიზაციის მიზნით. ჩვეულებრივ, ხალხი უბრალოდ იღებდა ფოტოაპარატს ფოტოაპარატიდან ან სმარტფონიდან, ჩამოტვირთავდა ინტერნეტიდან ან შექმნიდა კომპიუტერულ პროგრამულ უზრუნველყოფას.

ისინი არ ფიქრობენ ფორმატებზე, გამოსახულების ზომებზე და არც ფაილების სახელებზე. თუ სურათი კარგად გამოიყურება, ისინი მხოლოდ ვარაუდობენ, რომ ის ინტერნეტისთვის მზად არის. თუ არ ამოწმებთ თქვენს სურათებს, შენ აშენებთ კატასტროფისკენ.

სურათების ზომის შეცვლა

სურათების ზომის შეცვლა

ნუ ატვირთავთ სურათებს თქვენს WordPress ვებსაიტზე, სანამ შეამოწმებთ თითოეული სურათის სიგანეს და სიმაღლეს. მაგალითად, თუ სურათებს აჩვენებთ მაქსიმუმ 700 ცალი წამით, უფრო დიდი სურათის ატვირთვა ნამდვილად არ არის საჭირო. თუ ასე მოიქცევით, უფრო დიდი ფაილი გექნებათ, რაც თქვენს საიტს შენელებას გახდის, ხოლო გამომავალი იგივე იქნება. WordPress შექმნის დამატებით ზომას, მაგრამ ეს არ არის საბაბი, რომ არ მოამზადოთ სურათები ატვირთვის წინ.

სურათების ზომის შეცვლა სწრაფი და მარტივია. არსებობს მრავალი უფასო ინსტრუმენტი, როგორიცაა Microsoft Paint, რომელიც დაგეხმარებათ ამაში. თქვენ შეგიძლიათ იპოვოთ უფასო ონლაინ ინსტრუმენტებიც კი, სურათების ზომის შეცვლისთვის მარტივი ზომის შეცვლა.

სურათის ზომები განსხვავდება თემადან თემამდე. თუ არ ხართ დარწმუნებული, რომელი გამოიყენოთ, გამოიყენეთ უფრო მეტი ინფორმაცია თქვენი WordPress თემის შესახებ და დაათვალიერეთ სურათები, მოძებნეთ დოკუმენტაცია ან სთხოვეთ დახმარების მხარდაჭერა.

ხარისხის შეცვლა

ზომები შეცვლის შემდეგ, თქვენ უნდა გაითვალისწინოთ სურათების ხარისხის შეცვლა. პროგრამული უზრუნველყოფიდან გამომდინარე, სურათების ხარისხის შეცვლის სხვადასხვა გზა არსებობს. მაგალითად, ყოველთვის პოპულარული Photoshop საშუალებას გაძლევთ შეინახოთ ინტერნეტი. ეს ვარიანტი საშუალებას მოგცემთ შეინახოთ სურათები უფრო დაბალი ხარისხით, მაგრამ ისინი ოპტიმიზირებულია თქვენი საიტისთვის.

ასევე, თუ გსურთ JPEG– ს სურათის შენახვა, Photoshop მოგთხოვთ აირჩიოთ ხარისხის დონე. ამ შემთხვევაში, ხარისხის 12 – დან 8 – მდე დაქვეითება მკვეთრად შეამცირებს გამოსახულების ზომას, ხოლო ხარისხის განსხვავება არ იქნება ასეთი დიდი.

თუ თქვენ ჯერ კიდევ არ იყენებთ პროგრამულ უზრუნველყოფას თქვენი სურათების ხარისხის შესაცვლელად, შეგიძლიათ უფასო სცადოთ ინტერნეტით პატარა PNG ინსტრუმენტი. უბრალოდ ატვირთეთ სურათი და ნახეთ რა განსხვავებაა მასში.

აირჩიეთ სწორი ფორმატი

ზომისა და ხარისხის ცვლილების შემდეგ, თქვენ უნდა გაითვალისწინოთ ფორმატის შეცვლა. დამწყებთათვის, მხოლოდ სწორი ფორმატის არჩევით, შეგიძლიათ ამოიღოთ სურათიდან რამდენიმე კილოვატი, თუ მეტი არა.

სურათის ფორმატები

ზოგადი წესი ძალიან მარტივია. თუ ფოტოსურათი გაქვთ, გააკეთეთ JPEG. თუ თქვენ გაქვთ ლოგო, ვექტორული სურათი ან ძალიან მარტივი კომპიუტერის გენერირებული გრაფიკა, გადადით PNG– ით. თუ თქვენ გაქვთ ძალიან მცირე სურათი გრადიენტის გარეშე, ან გსურთ ნახოთ მარტივი ანიმაცია, როგორც ეს ზემოთ ნაჩვენებია, შეგიძლიათ გამოიყენოთ GIF. საერთოდ, PNG სურათები საკმაოდ დიდი იქნება, ვიდრე JPEG, და შეგიძლიათ ისარგებლოთ ფორმატის შეცვლით.

ხშირ შემთხვევაში, სურათების რეფორმირება არ მიიღებს მნიშვნელოვან ხარისხის განსხვავებებს, ხოლო ზომაში განსხვავების მოლოდინი შეგიძლიათ. შემდეგ ჯერზე, სანამ ატვირთავთ PNG ფოტოსურათს, მიეცით ეს კადრი და შეეცადეთ შეინახოთ იგი, როგორც JPEG, რომ ნახოთ განსხვავება. უფრო დეტალური ახსნისთვის, გთხოვთ, ნახოთ PNG, JPEG, GIF და SVG შორის სხვაობა.

იზრუნეთ ფაილების სახელებზე

მიუხედავად იმისა, რომ ფაილის სახელი შეიძლება მნიშვნელოვანი არ იყოს, ეს არის სინამდვილეში ის, რაც ძალიან უნდა იცოდეთ. თქვენი ფაილის სახელი შეიცავს მნიშვნელოვან ინფორმაციას SEO- სთვის. თუ გსურთ, რომ სხვებმა შეძლონ თქვენი გამოსახულების პოვნა Google- ში და სხვა საძიებო სისტემებში, უნდა მიუთითოთ ეს სახელი.

გთავაზობთ, რომ დაასახელოთ სურათები სივრცეების გამოყენების გარეშე. ნუ დაივიწყებთ საკვანძო სიტყვების ჩასატარებლად, თუ გინდათ გვერდი და სურათი დალაგდეს. მაგალითად, თუ ატვირთავთ Ferrari California- ს სურათს, ფაილის სახელი უნდა იყოს “ferrari-california.jpg”. თუ იყენებთ SEO plugin- ს WordPress- სთვის, თქვენ უკვე იცით, რომ ის ამოწმებს თქვენს Alt tags საკვანძო სიტყვებისთვის. დიახ, ნამდვილად მნიშვნელოვანია ის, რომ სათანადო სურათის სახელი გვქონდეს.

ატვირთვის შემდეგ WordPress- ის ოპტიმიზაცია

თქვენს კომპიუტერში სურათების მომზადების შემდეგ, შეგიძლიათ განაგრძოთ ატვირთვა. იმედია, თქვენი სურათები მხოლოდ სწორი ზომისა და ხარისხისაა. თქვენ დარწმუნდით, რომ ფორმატი და ფაილის სახელი სწორია. ატვირთვის შემდეგ, WordPress მოგთხოვთ დამატებით ინფორმაციას. არ გამოტოვოთ მეტა ინფორმაცია; შეავსეთ დეტალები თქვენი სურათების შესახებ, რათა მათ მარტივად ააწყოთ ისინი და მოემზადოთ SEO.

სათაური, აღწერა, alt ტექსტი და წარწერა

ტექნიკურ საკითხებზე ზრუნვისას არ უნდა დაგვავიწყდეს SEO. ყოველთვის დაამატეთ სათაური და აღწერა თქვენს მედიას. ეს დაგეხმარებათ WordPress მედიის მენეჯმენტში და ასევე იმუშავებს უკეთეს SEOზე. ასევე, არ უნდა დაგვავიწყდეს alt tag, რომელიც ნაჩვენები იქნება იმ ვიზიტორებისთვის, რომელთაც არ შეუძლიათ თქვენი სურათის სწორად ნახვა. არა მხოლოდ ეს სასარგებლო იქნება თქვენი მომხმარებლებისთვის, არამედ ის დაგეხმარებათ SEO- შიც. თქვენი გვერდი უკეთესად დაჯდება და მომხმარებლებს შეეძლებათ უფრო მარტივი იპოვონ თქვენი ახალი სურათები.

მიუხედავად იმისა, რომ თქვენ აღარ დაგჭირდებათ სათაური, დარწმუნდით, რომ დაამატეთ ის სურათები, რომელთაც დამატებითი ახსნა სჭირდებათ (მაგალითად, ეკრანის სურათები).

სურათების რედაქტირება WordPress- ით

თუ გააცნობიერებთ, რომ სურათს კიდევ სჭირდება შემდგომი რედაქტირება, უნდა იცოდეთ, რომ WordPress საშუალებას გაძლევთ ამის გაკეთება თუნდაც ფაილის ატვირთვის შემდეგ.. შეცვალეთ ბრუნვის, მოსავლის და მასშტაბის სურათები თქვენ უკვე ატვირთეთ. თქვენ შეგიძლიათ შეცვალოთ მხოლოდ მინიატურა ან ყველა სხვა ზომა. WordPress- ის მშობლიური რედაქტორი ძალიან მარტივია, მაგრამ დროდადრო შეგიძლიათ დაზოგოთ.

აღადგინეთ ყველა მინიატურა

წინა ტექნიკის უმეტესი ნაწილი დაგეხმარებათ ახალი სურათის ფაილების შესახებ, რომელთა ატვირთვას ჯერ კიდევ აპირებთ. რა მოხდება, თუ ასობით, თუ არა ათასობით ფაილი, რომელიც უკვე ატვირთულია თქვენს WordPress საიტზე? ნუ ინერვიულებ; კვლავ შეგიძლიათ ამ სურათების ოპტიმიზაცია და მათი ზომის შეცვლა.

სწრაფი დაფიქსირებისთვის, თქვენ შეიძლება დაინტერესებული იყოთ უფასო რეგენერატორული მინიატურების მოდულით, რომელსაც იყენებენ მილიონზე მეტი მომხმარებელი. თუ გსურთ მეტი კონტროლი გამოსახულებებზე, უნდა შეამოწმოთ WordPress- ის საუკეთესო საუკეთესო plugins სურათის ოპტიმიზაციისთვის, რომელსაც ჩვენ ამ სტატიის შემდეგ სტრიქონებს გაჩვენებთ..

როგორ აღვადგინოთ გამოსახულების დამატებითი ზომები

გამოიყენეთ WordPress დანამატები

რა თქმა უნდა, არსებობს ათობით WordPress მოდული, რომლებიც დაგეხმარებათ თქვენს საიტზე გამოსახულების ოპტიმიზაციაში. გადადით ქვემოთ, რომ ნახოთ საუკეთესო WordPress დანამატები სურათების ოპტიმიზაციისთვის.

აუცილებლობის შემთხვევაში Lazy დატვირთვის სურათები

ზოგჯერ, სურათების ხარისხი ბევრად უფრო მნიშვნელოვანი იქნება, ვიდრე მათი ზომა. ეს ძირითადად ეხება ფოტოგრაფებს, რომლებსაც სურთ, რომ მათი ფოტოები იყოს ყველაზე მაღალი დონის. მათ არ შეუძლიათ გარისკონ ფაილების ზომა და ხარისხი. და მაინც, ეს არ ნიშნავს, რომ უნდა დაივიწყოთ ოპტიმიზაცია. ამ შემთხვევაში WordPress- ის სურათების ოპტიმიზაციისთვის, უნდა გაითვალისწინოთ ზარმაცი დატვირთვა.

ზარმაცი დატვირთვა არის ტექნიკა, რომელიც იტვირთებს სურათებს მხოლოდ მაშინ, როდესაც მომხმარებლებს სჭირდებათ ისინი (გადაახვიეთ მათ). მაგალითად, თუ თქვენ ატვირთეთ ოცი მაღალი ხარისხის ფოტო ერთ სტატიაში, ისინი მნიშვნელოვნად შეანელებს თქვენს საიტს. თუ თქვენ ზარმაცი დატვირთეთ სურათები, სტატია ელვისებურად სწრაფად იქნებოდა და ფოტოების ჩატვირთვა მხოლოდ საჭიროების შემთხვევაში – იმ მომენტში, როდესაც მომხმარებელი მიიღებს მათ.

აქვს საპასუხო სურათები

მიუხედავად იმისა, რომ WordPress თემების უმეტესობა საპასუხოა, ეს არ ნიშნავს რომ თქვენი გამოსახულებები ასევე რეაგირებს. იმის გამო, რომ არ გსურთ დიდი გამოსახულების დატვირთვა მცირე ეკრანზე, თქვენ უნდა დაარეგისტრიროთ გამოსახულების დამატებითი ზომები თქვენი საიტისთვის. თუ თქვენი თემა არ იყენებს საპასუხო სურათებს, განიხილეთ პროფესიონალის დაქირავება სამუშაოსთვის – ეს არც ისე ადვილია, როგორც ეს ჟღერს.

სურათების ოპტიმიზაცია სოციალური მედიისთვის

თუ გსურთ დარწმუნდეთ, რომ თქვენი სურათები სოციალურ მედიაში კარგად გამოიყურება, მოგიწევთ დამატებითი ნაბიჯის გადადგმა და მეტა თეგების და სქემის მარკირების ოპტიმიზაცია..

თუ იყენებთ SEO დანამატს, როგორიცაა Yoast, არ უნდა დაგვავიწყდეს, რომ შეამოწმოთ პარამეტრები. მაგალითად, Yoast საშუალებას გაძლევთ შექმნათ რამდენიმე საკითხი, რომლებიც დაკავშირებულია სოციალურ მედიასთან. ასე რომ, გადადით ნავიგაციაზე SEO -> Social და შეიყვანეთ ინფორმაცია Facebook- ზე, Twitter- ზე, Google+- სა და Pinterest- ში.

თუ გსურთ მეტი და გსურთ სურათების ოპტიმიზაცია დამატებითი სოციალური მედიის ვებსაიტებისთვის, შეამოწმეთ WPSSO – ზუსტი Meta წარწერები + სქემის მარკირება სოციალური გაზიარების ოპტიმიზაციისა და SEO მოდული.

შეცვალეთ WordPress შეკუმშვის JPEG სურათები

თუ ატვირთავთ JPEG სურათების მრავალ სურათს თქვენს WordPress ვებსაიტზე, ალბათ შეამჩნიეთ, რომ კარგავენ თავდაპირველ ხარისხს. თუ გაინტერესებთ WordPress არის დამნაშავე, ახლა თქვენ გექნებათ თქვენი პასუხი – დიახ, ეს ასეა!

მას შემდეგ, რაც ატვირთეთ სურათი JPEG ფორმატში, WordPress ავტომატურად ცვლის შეკუმშვას და გადაწყვეტს, რომ გინდა სურათი დაკარგოს ხარისხზე. უფრო კონკრეტულად რომ ვთქვათ, WP იყენებს 90% შეკუმშვას თქვენს JPGE- ზე. ეს მშვენიერია იმ შემთხვევაში, თუ თქვენი სურათები მხოლოდ ნახატების სახით გამოიყენებთ ან პოსტზე იქნება ნაჩვენები, მაგრამ თუ თქვენს ფოტოებს ატვირთავთ, გინდათ რომ ისინი მაქსიმალურად იყვნენ მაქსიმალურად, სწორად?

საბედნიეროდ, თქვენ გჭირდებათ მხოლოდ ერთი სტრიქონის კოდი, რომ შეცვალოთ ეს.

შეაჩერე JPEG გამოსახულების შეკუმშვა:

თუ არ გსურთ თქვენი JPEG სურათების შეკუმშვა, უბრალოდ დააკოპირეთ და ჩასვით შემდეგი კოდი თქვენს ფუნქციებში.php ფაილში:

add_filter ('jpeg_quality', ფუნქცია ($ arg) {დაბრუნება 100;});

ნუ დაივიწყებთ ცვლილებების შენახვას და თქვენ მზად ხართ ატვირთოთ ახალი სურათები.

მეორეს მხრივ, გამოსახულებები შეიძლება არ იყოს თქვენთვის მნიშვნელოვანი. ასე რომ, თქვენ შეიძლება მოგინდეთ, რომ ისინი კიდევ უფრო შეკუმშულიყვნენ და თქვენი საიტის დატვირთვის დროს დაზოგოთ. თუ შეცვლით ბოლო ნომერს ამ ხაზის კოდში, თქვენ შეცვლით ახლად ატვირთული სურათების ხარისხს.

შეკუმშეთ JPEG სურათები კიდევ უფრო:

რაც უფრო დაბალია რაოდენობა, მით მეტი სურათი შეკუმშული იქნება. მაგალითად, ამ JPEG– ების კიდევ უფრო შეკუმშვის მიზნით, დაგჭირდებათ ეს კოდი:

add_filter ('jpeg_quality', ფუნქცია ($ arg) {დაბრუნება 80;});

არ დაგავიწყდეს; შეკუმშვის ნაგულისხმევი დონეა 90.

Მნიშვნელოვანი: ეს იმოქმედებს მხოლოდ იმ სურათებზე, რომლებიც ატვირთავთ მას შემდეგ, რაც კოდი ჩასვით ფუნქციებში.php. თქვენ უკვე გაქვთ ბიბლიოთეკაში არსებული სურათების ზომა და ხარისხი, დაგჭირდებათ მოდული. იხილეთ, თუ როგორ უნდა აღადგინოთ გამოსახულების დამატებითი ზომები.

WordPress- ის გამოსახულების ოპტიმიზაციის ყველაზე პოპულარული მოდული

ამ სტატიის დასაწყისში ვისაუბრეთ იმაზე, თუ როგორ უნდა ოპტიმიზაცია მოახდინოთ WordPress- ისთვის სურათების ოპტიმიზაცია, ასე რომ თქვენ დააჩქარებთ თქვენს საიტს და გააუმჯობესებთ SEO- ს. როგორც ხედავდით, არსებობს რამდენიმე განსხვავებული მეთოდი, რომელთა გამოყენებაც შეგიძლიათ. მნიშვნელოვანია, რომ იზრუნოთ სურათებზე, სანამ მათ ბლოგში ატვირთავთ. მაგრამ, როდესაც სურათები უკვე ადგილზეა, შესაძლოა შეუძლებელი გახდეს თითოეული სურათის ცალ-ცალკე ხელახლა გამოსახვა და შემდეგ კიდევ ერთხელ ატვირთვა.

ნუ ინერვიულებ; არავინ მოელით, რომ პირველ რიგში ასე მოიქცეთ. დარჩით ჩვენთან შემდეგ წუთებში, როდესაც ჩვენ ვაპირებთ გაჩვენოთ ყველაზე პოპულარული გამოსახულების ოპტიმიზაციის დანამატები WordPress- ისთვის.

სურათების ოპტიმიზაციისთვის, თქვენ უბრალოდ უნდა აირჩიოთ მოდული სიიდან. თქვენ მოგიწევთ კონფიგურაცია და შეარჩიოთ ის, რაც მოდული გააკეთებს თქვენთვის. ამის შემდეგ, თქვენ შეძლებთ სამუშაოს მოდუნებას და დელეგირებას თქვენი არჩევანის მოდულით, მაშინ როდესაც თქვენ შეგიძლიათ დაიწყოთ თქვენი მედია ფაილების ორგანიზება.

შემდეგი დანამატები დაგეხმარებათ შეკუმშოთ სურათები თქვენს WordPress საიტზე. ისინი გახდის საიტის დატვირთვას უფრო სწრაფად და საბოლოოდ დაგეხმარებათ SEO– ს გაუმჯობესებაში.

WP Smush

ფასი: უფასო

700 მილიონზე მეტი აქტიური ინსტალაციით, WP Smush უნდა იყოს WordPress- ისთვის გამოსახულების ოპტიმიზაციის ერთ-ერთი საუკეთესო მოდული. მას შეუძლია სურათების ოპტიმიზაცია სწრაფად შეკუმშვის სხვადასხვა ტექნიკის გამოყენებით. WP Smush- ის სურათების შეკუმშვის შესანიშნავი რამ არის ის, რომ სურათები არ კარგავს ხარისხს. არ გჯერათ? შეამოწმეთ მოდული.

როდესაც ვისაუბრეთ WordPress- ისთვის სურათების მომზადებაზე, აღვნიშნეთ, რომ ზომის შეცვლა ოპტიმიზაციის პროცესის გადამწყვეტი ნაწილია. ამ მოდულით, თქვენ არ უნდა ფიქრი იმაზე, რომ WP Smush საშუალებას გაძლევთ მაქსიმალური ზომები დააყენოთ. ამის შემდეგ, ყველა უფრო დიდი სურათი ავტომატურად დაიშლება, სანამ ბიბლიოთეკაში დაამატებთ.

ამ ფანტასტიკურ დანამატს შეუძლია JPEG, GIF და PNG ფაილებთან მუშაობა. ის მუშაობს თქვენს ყველა დირექტორიასთან, ავტომატურად ზრუნავს დანართებზე და კიდევ მუშაობს მულტიზზე. შეგიძლიათ ხელით იმოქმედოთ თითოეულ სურათზე, ან შეცვალოთ ორმოცდაათი მათგანი ნაყარი. თუ გსურთ კიდევ უკეთესი შედეგები და მეტი პარამეტრები, შეამოწმეთ WP Smush PRO.

EWWW გამოსახულების ოპტიმიზატორი

ფასი: უფასო

მხიარული სახელის მიღმა, WordPress- ისთვის გამოსახულების ოპტიმიზაციის ერთ-ერთი ყველაზე პოპულარული დანამატია. ისევე, როგორც ადრე აღვნიშნეთ, EWWW გამოსახულების ოპტიმიზატორს შეუძლია შეკუმშოს თქვენი სურათები გარეშე გავლენა მოახდინოს მათ ხარისხზე. როდესაც ფიქრობთ იმაზე, რომ მოდელმა შეიძლება დააჩქაროს თქვენი საიტი წამში, თქვენ უკვე იყავით მის ჩამოტვირთვაზე. ამის გაკეთების შემდეგ, თქვენ მიიღებთ ნაყარი სურათების ოპტიმიზაციას, ხოლო GRAND FlaGallery, NextCellent და NextGEN მიიღებთ ისეთი გალერეებს, რომლებსაც თავიანთი ნაყარი ოპტიმიზაცია მოახდენთ.

ყველა სურათი, რომელიც იყენებს WP_Image_Editor კლასს WordPress- ში, იქნება ავტომატურად ოპტიმიზაცია, ხოლო შეგიძლიათ ხელით იმუშაოთ ყველაფერზე. ჩვენ მოგვწონს, რომ შეგიძლიათ აირჩიოთ საქაღალდეები, რომელთა ოპტიმიზაცია გსურთ. დამატებითი ინფორმაციისთვის ამის შესახებ და რომელი მოდელები იყენებენ კლასს, გთხოვთ გახსნათ ოფიციალური პირი EWWW გამოსახულების ოპტიმიზატორი გვერდი WordPress საცავზე.

შეკუმშეთ JPEG & PNG სურათები

ფასი: უფასო

მცირე კომპრესული სურათები

თუ WordPress- ის ლოგოს მქონე პატარა პანდა არ გინდათ რომ უფრო მეტი შეიტყოთ ამ მოდულის შესახებ, ჩვენ არ ვიცით რა. და თუ პანდა ნაცნობი ჩანს, ეს იმიტომ, რომ ეს იგივეა, რაც დაგეხმარებათ სურათების შეკუმშვაში TinyPNG ვებსაიტზე. ჰო, როგორც ჩანს, ცხოველი უფრო მრავალფეროვანია, ვიდრე თავდაპირველად ვფიქრობდით. მოდით ფოკუსირება გავაკეთოთ მოდელზე.

თუ ამ მოდულით მიდიხარ, პანდა ავტომატურად ოპტიმიზირებს თქვენს სურათებს. ყოველ ჯერზე, როდესაც ატვირთავთ ახალს, მოდული აიღებს თავის სამუშაოს. და მაინც, შეგიძლიათ ინდივიდუალური სურათების ოპტიმიზაცია ან ამის გაკეთება ნაყარი, მხოლოდ მედიის ბიბლიოთეკაში გადასვლის გზით.

შეკუმშოს JPEG & PNG სურათებიც კი ანიმაციურ PNG- ებსაც კი უჭერს მხარს, მშვენივრად მუშაობს მულტიმეტირებაზე, ის WooComerce თავსებადია და WP Offload S3- ს პრობლემა არ ექნება..

მოდულის შესანიშნავ რამ არის ის, რომ ეს საშუალებას გაძლევთ დააყენოთ მაქსიმალური სიგანე და სიმაღლე ატრიბუტები ყველა სურათისთვის. თუ თქვენ აწუხებთ იმაზე, თუ რას გააკეთებს მეტამონაცემები, არ ინერვიულოთ; პანდა შეინარჩუნებს ყველა ინფორმაციას ხელუხლებელი.

ფაილის ზომების შეზღუდვა არ არსებობს, თქვენ უნდა დააყენოთ დაფის ვიჯეტის ელემენტი და ის WordPress- ის მობილური აპლიკაციითაც მუშაობს. ყოველივე ამის გამო, შეკუმშეთ JPEG & PNG სურათები 100 000 – ზე მეტ აქტიურ ინსტალაციას და იმსახურებს ადგილს სიაში საუკეთესო WordPress- ის საუკეთესო ოპტიმიზაციის მოდულების სიაში..

იმსახურება

ფასი: უფასო

იმსახურება

მიუხედავად იმისა, რომ ამ მოდულის ყდა შეიძლება შეგაშინოთ, წამი წადით და გადახედეთ Immsanity- ის ყველა მახასიათებელს. ოჰ, მოდელის სახელიც კი უცნაურად ჟღერს, არა? მას შემდეგ რაც კარგად არკვევთ მოდულის დასახელებას, ნახავთ, რომ მას შესთავაზება ბევრი აქვს.

Imsanity– ს შეუძლია ავტომატურად შეაფასოს სურათები, საშუალებას გაძლევთ შექმნათ მაქსიმალური ზომები, და მასში ასევე გამოსახულია ნაყარი ზომის შეცვლის ვარიანტი. ეს მნიშვნელოვანია, თუ თქვენს ბლოგზე უკვე გაქვთ ასობით სურათი, რომელსაც ოპტიმიზაცია სჭირდება.

ეს უფასო მოდული შესანიშნავი ვარიანტია, თუ არ გსურთ ბევრი რამის დამატება ამ მოდულის პარამეტრებთან. ყველაფრის გაკეთება სჭირდება Imsanity- ის დაყენებას და გააქტიურებას, რამდენიმე ვარიანტის დაყენება და ამის შესახებ შეგიძლიათ დაივიწყოთ; ის მოახერხებს საკუთარი გზა გამოსახულების ოპტიმიზაციისკენ.

ჩვენ გვიყვარს ვარიანტი, რომელიც საშუალებას გაძლევთ გარდაქმნათ BMP სურათები JPG. იმ შემთხვევაში, თუ თქვენ გაქვთ ბევრი BMP ფაილი, რომლებიც შეცდომით ატვირთეთ რამდენიმე ხნის წინ, ეს იქნება სიცოცხლის ხანგრძლივობა.

ShortPixel გამოსახულების ოპტიმიზატორი

ფასი: უფასო

ShortPixel გამოსახულების ოპტიმიზატორი

30,000-ზე მეტი აქტიური ინსტალაციით, ShortPixel Image კვლავ არის WordPress- ის გამოსახულების ოპტიმიზაციის ერთ-ერთი ყველაზე პოპულარული დანამატი. მოდული შეფუთულია ფუნქციებით და ეს აუცილებელი იქნება საიტებისთვის, რომლებსაც უამრავი სურათი აქვთ ოპტიმიზაციისთვის.

ShortPixel გამოსახულების ოპტიმიზატორი არა მხოლოდ JPG, PNG, GIF და PDF დოკუმენტების ოპტიმიზაციას მოახდენს, არამედ ის ასევე მოგცემთ გადააკეთეთ ნებისმიერი JPEG, PNG ან GIF სურათი WebP. მოდული კარგად მუშაობს სხვა გალერეების დანამატებთან და არ აქვს მნიშვნელობა, თუ თქვენი საიტი იყენებს HTTP ან HTTPS. ეს საშუალებას გაძლევთ ამოიღოთ EXIF ​​მონაცემები სურათებისგან (რამე ფოტოგრაფებს უყვართ).

მოდული აღიარებს სურათებს, რომ ის უკვე ოპტიმიზებულია, ამიტომ საჭიროების შემთხვევაში გამოტოვებს მათ. თქვენ მიიღებთ საშუალებას დაუშვოთ ავტომატური ოპტიმიზაცია და ბევრად მეტი გააკეთოთ ამ ფანტასტიკური მოდულით. შეამოწმეთ ოფიციალური გვერდი საცავში, რომ ნახოთ ყველა მახასიათებელი.

Optimus – WordPress გამოსახულების ოპტიმიზატორი

ფასი: უფასო

ოპტიმიუსი

ისევე როგორც ადრე ნახსენები მოდული, ოპტიმიუსი ოპტიმიზაციას უკეთებს თქვენს სურათებს WordPress- სთვის, და ეს გააკეთებს ამას თქვენი სურათების ხარისხზე გავლენის გარეშე. თქვენ შეგიძლიათ დაამატოთ მოდული, რომ ავტომატურად შეიმუშაოს ყველაფერი, ან შეგიძლიათ გამორთოთ ეს ვარიანტი და მხოლოდ საჭიროების შემთხვევაში სურათების ოპტიმიზაცია.

Optimus მუშაობს მრავალმხრივ, WordPress– ის ელექტრონული კომერციის საიტებისთვის უცხო არ არის და იგი მთლიანად ოპტიმიზირებულია WordPress მობილური პროგრამებისთვის და Windows Live Writer- ისთვის. ეს დააჩქარებს თქვენს საიტს, თუ არ შეეხოთ კოდის ხაზს. მოდული გთავაზობთ ბევრად მეტს, მაგრამ პრემიუმ ვერსიაზე უნდა აირჩიოთ. მეტი ინფორმაციის მისაღებად, გადადით WordPress დანამატების საცავში, ოფიციალურ გვერდზე.

დაამატეთ ზარმაცი დატვირთვა თქვენი ვიდეოებისა და სურათების შესახებ WordPress- ში

თქვენს ვებ – გვერდზე უამრავი ვიდეოსა და გამოსახულების მასალების დამატებას დაიწყებთ, აშკარაა, რომ იგი ნელ – ნელა დაიწყებს დატვირთვას. არ აქვს მნიშვნელობა საიდან მოდის, ვიდეო და დიდი სურათები იმოქმედებს როგორც მძიმე წონა თქვენს საიტზე და გახდის თქვენს ვიზიტორებს ლოდინიზე მეტხანს, ვიდრე საჭიროა ყველა შინაარსის ჩატვირთვა. WordPress- ის საშუალებით ეს არ უნდა იყოს დიდი საქმე და აქ მოცემულია, თუ როგორ შეგიძლიათ მარტივად მოაგვაროთ სიტუაცია.

თუ იცით თქვენი PHP- ის გარშემო, არსებობს შესანიშნავი სტატია სურათების მიმართ ზარმაცი დატვირთვის დამატებისა და ჩვენი კოლეგების მიერ დაწერილი უსასრულო გადახვევის შესახებ. ელეგანტური თემები.

თუ არა, მომდევნო რამდენიმე სტრიქონში აღვნიშნავთ ზოგიერთ პოპულარულ ზარმაცი დატვირთვის მოდულს, რომელიც თქვენი საიტის დატვირთვა უფრო სწრაფი გახადეთ. თქვენ არც კი გჭირდებათ ბევრი რამის გაკეთება, მაგრამ დანამატის დაყენება და რამდენიმე სწრაფი ნაბიჯის დაყენება.

Lazy დატვირთვა ვიდეოებისთვის

ფასი: უფასო

Lazy დატვირთვა ვიდეოებისთვის

თუ თქვენ გაქვთ ბევრი Youtube და Vimeo ვიდეო, უნდა გაითვალისწინოთ ამ მოდულის ინსტალაცია. მას შემდეგ რაც დააყენებთ, მოდული განათავსებს სურათს თქვენს ვიდეოზე და ამის გამო, თქვენი ვებ – გვერდი ატვირთავს ბევრად უფრო სწრაფად. მას შემდეგ, რაც ვიზიტორი გადადის ვიდეოს, ამ სურათზე ნაჩვენები იქნება “პიესის” ღილაკი. დაჭერის შემდეგ, ვიდეო დაიწყებს დატვირთვას და დაკვრას. მარტივი დემო ნახვა შეგიძლიათ ნახოთ დეველოპერის საიტზე.

WP YouTube Lyte

ფასი: უფასო

WP YouTube Lyte

ეს მოდული სწრაფად და მარტივად გააკეთებს თავის საქმეს. მისი ინსტალაციის შემდეგ, უბრალოდ დაამატეთ ბმული თქვენს Youtube ვიდეოს ან გამოიყენეთ მოკლე კოდი, რომ დაამატოთ ერთი. შეგიძლიათ აირჩიოთ ჩვეულებრივი ვიდეო, დასაკრავი სიის დამატება ან მხოლოდ აუდიო არჩეული ვიდეოს დამატება. ამის შემდეგ, თქვენი Youtube ვიდეოები მიიღებს მასზე გამოსახულებას, რაც საშუალებას მისცემს ზარმაცი დატვირთვას. უბრალოდ დააჭირეთ სურათს, რომ თქვენი ვიდეო ან აუდიო დაიწყოს.
იხილეთ დემო ვერსია დეველოპერის საიტზე.

a3 ლაზური დატვირთვა

ფასი: უფასო
დემო 1
დემო 2

a3 ლაზური დატვირთვა

ეს ერთი ეძღვნება თქვენს მობილურ საიტს. თუ თქვენ გაქვთ უამრავი სურათი და / ან ვიდეო, რომელსაც გსურთ უყუროთ თქვენს ვიზიტორებს მობილური მოწყობილობებით, უნდა გადახედოთ a3 Lazy Load- ს. ეს საშუალებას მოგცემთ დაამატოთ ზარმაცი დატვირთვა თქვენს სურათებსა და ვიდეოებში და მოდული საშუალებას მოგცემთ აირჩიოთ გარდამავალი ეფექტები, რომლებიც გამოჩნდება მომხმარებლებს, როდესაც ისინი გადაადგილდებიან შინაარსზე, რომელიც იტვირთება..

ადმინისტრატორი, თქვენ მარტივად შეგიძლიათ ჩართოთ და გამორთოთ ის შინაარსი, რომელსაც გსურთ ზარმაცი დატვირთვა. ჩართვისთვის, შინაარსი იტვირთება მხოლოდ იმ დროს, როდესაც სტუმარი გადადის შინაარსის ამ ნაწილზე.
არსებობს ლამაზად ნაჩვენები დემო, რომელშიც გამოსახულია 1000 სურათი – თითოეული დატვირთულია მხოლოდ მასზე გადასვლის შემდეგ. როგორც ამ მოდულის ზარმაცი დატვირთვის ვიდეოებს, ასევე არსებობს ვიდეოს დემო დემონსტრირება, რომელსაც ნახავთ, დააჭირეთ ზემოთ მოცემულ ბმულს.

BJ Lazy დატვირთვა

ფასი: უფასო

BJ Lazy დატვირთვა

თუ არ გჭირდებათ ვიდეოს მხარდაჭერა და მხოლოდ გინდათ რომ თქვენს სურათებს ზარმაცი დატვირთვა ჰქონდეთ, უნდა ნახოთ ეს WP მოდული. ინსტალაციის და დაყენების შემდეგ, იგი შეცვლის თქვენს სურათებს, მინიატურებს, გრავიატრის სურათებს და თუნდაც iframes- ს ადგილსამყოფელთან. ადრე ნახსენები დანამატის მსგავსად, იგი შინაარსს დატვირთავს მხოლოდ მას შემდეგ, რაც მომხმარებელი მოვა მასზე.

იქნება ეს სურათები ან ვიდეო, რომლითაც გსურთ ზარმაცი დატვირთვა, ზემოთ ჩამოთვლილი დანამატებიდან მეორეში დაგეხმარებათ. ყველა მათგანი უფასოა, ამიტომ არ არსებობს საბაბი, რომ არ სცადოთ მინიმუმ ერთი დანამატი და ნახოთ თქვენი მხრების რამდენ წონას დასჭირდება. რა თქმა უნდა, არსებობს მრავალი სხვა მოდული, რომელზეც იგივე ფუნქციაა და თქვენ თავისუფლად შეგიძლიათ დაათვალიეროთ და სცადოთ ყველა მათგანი.

გამოსახულების მიღებასა და მის შემდეგ მიმზიდველ ფორმაში

დარწმუნებული ვართ, რომ თქვენ უკვე გინახავთ სურათების წინ / შემდეგ სურათების მრავალი მაგალითი. თქვენ არ იცით თქვენს შესახებ, მაგრამ პირველი რაც ჩვენ გაითვალისწინეთ, როდესაც ვხვდებით ფრაზას “ადრე და შემდეგ” არის ფიტნესის სასწავლო პროგრამა, სადაც ადამიანები აჩვენებენ თავიანთ სხეულს ვარჯიშის პროგრამის დაწყებამდე და შემდეგ..

თუ ამაზე ფიქრობთ, ვებგვერდების უმეტესობა განსხვავებულობის გამოსახატავად იყენებს მარტივ მიდგომას – ისინი იღებენ ორივე სურათს და ათავსებენ მათ ერთმანეთის გვერდით, ან თუნდაც ერთი მაღლა. თუ გსურთ იგივე შედეგი, არ წაიკითხავთ ამ სტატიას, რადგან თქვენ უკვე იცით როგორ გააკეთოთ ეს.

რა მოხდება, თუ ჩვენ გითხარით, რომ არსებობს ვიზუალურად განსაცვიფრებელი გზა, რომ გადავწყვიტოთ ეს პრობლემის მოგვარებამდე / შემდეგ და ეს მხოლოდ თქვენი ხელით არის შესაძლებელი? კარგი, არსებობს და დაყენების შემდეგ, თქვენ შეაქებთ დეველოპერებს, რადგან საბოლოო შედეგი ნამდვილად, ძალიან მაგარია.

ოცდაორი

ფასი: უფასო

ოცდაორი

ოცი ოცი არის ამ გასაოცარი დანამატის სახელი, რომელსაც უფასო ჩამოტვირთვა შეგიძლიათ WordPress plugin- ის საცავში.

მოდული საშუალებას გაძლევთ განათავსოთ ერთი სურათი მეორეზე და მოგცემთ თამაშს სლაიდერით, რათა გამოსახულების დამალვა / გამოვლენა შეძლოთ. გთხოვთ, ნახოთ დემო და ნახავთ რას ვსაუბრობთ.

კარგი, ახლა, როდესაც ამ პატარა მოდელზე ხართ ჩართული, ვნახოთ, როგორ შექმნათ ეს განსაცვიფრებელი ეფექტი. მიუხედავად იმისა, რომ დემო ეფექტის ხელახლა გაკეთება შედარებით ადვილია, თქვენ მაინც უნდა იცოდეთ თქვენი HTML ძირითადი HTML– ის შესახებ. Წავედით:

  1. შექმენით ახალი შეტყობინება ან გახსენით არსებული
  2. ჩადეთ ორი სურათი პოსტში. თუ ვიზუალურ რედაქტორში მუშაობთ, სურათი უნდა ნახოთ ერთი ზემოთ, მეორეზე. თუ ტექსტურ რედაქტორში მუშაობთ, უნდა ნახოთ მსგავსი კოდი:
  3. 
    
    
    
  4. შეიყვანეთ [ოცდამეორე] წარწერა პირველი გამოსახულების წინ
  5. მეორე შემდეგ შეიყვანეთ [/ twentytwenty] tag
  6. თქვენ უნდა დასრულდეთ მსგავსი რამ თქვენს ტექსტურ რედაქტორში:

    [ოცდამეორე]
    
    
    
    [/ ოცდამეორე]
    
  7. დარწმუნდით, რომ თქვენი სურათები იგივე ზომისაა საუკეთესო შედეგის მისაღწევად
  8. გადახედეთ ან გამოაქვეყნეთ თქვენი პოსტი და ისიამოვნეთ თქვენი ვიზუალურად განსაცვიფრებელი სურათებით ადრე და შემდეგ

როგორ შევქმნათ ინტერაქტიული სურათები – დახაზეთ, დაამატეთ აღწერილობები და ბმულები

დღეს რთულია ვებსაიტის შექმნა მულტიმედიის გარეშე. სურათები, ვიდეო და მუსიკა პრაქტიკულად ყველა ვებსაიტის ნაწილია. საშუალო ინტერნეტის მომხმარებელი დიდად არის დამოკიდებული ვიზუალურ სტიმულებზე, ასე რომ თქვენ უნდა იზრუნოთ თქვენი საიტის ვიზუალურ და ინტერაქტიულ ნაწილებზე. სტატიები სურათებით იღებს 94% მეტი ნახვა ვიდრე ერთის გარეშე. ასევე, ეს უკვე ცნობილი ფაქტია, რომ ვებსაიტებზე მულტიმედიამ შეიძლება გააძლიეროს შინაარსის მარკეტინგი ROI.

ვიმედოვნებთ, რომ არ დაგჭირდებათ საჭიროება, რომ თქვენს საიტზე იზრუნოთ თქვენს საიტზე. მაშინაც კი, თუ არ იყენებთ სურათებს სტატიებში (რაც უნდა), იყენებთ გამოსახულებებს, არა? საკმაოდ ბევრი გალერეის მოდული გაქვთ, რომელთა საშუალებით შეგიძლიათ მართოთ სურათები თქვენს WordPress საიტზე, შეგიძლიათ ფოტოგრაფიასთან დაკავშირებული თემები, Instagram- ზე დაურთოთ თქვენს WordPress საიტზე და გააკეთოთ ბევრი სხვა რამ. მაგრამ რა გინდა, რომ უფრო ინტერაქტიული შინაარსის შექმნა გინდა?

დამწყებთათვის, თქვენ შეიძლება დაგინიშნოთ იმ სურათის ეფექტის დამატება, რომელსაც თქვენს მომხმარებლებს უყვართ. ნუ დაივიწყებთ WordPress- ში ვირტუალური რეალობის შესახებ, რომელიც სულ უფრო პოპულარული ხდება მას შემდეგ, რაც Automattic– მა VP WordPress.com– ს შემოიღო. მაინც რაღაც აკლია. შესაძლებელია ინტერაქტიული სურათების გაკეთება დაჭერით ნაწილებით? დიახ, ეს შესაძლებელია და ჩვენ ვაპირებთ გაჩვენოთ, თუ რამდენად სახალისო და მარტივია ეს.

მიიპყრო ყურადღება

ფასი: უფასო
დემო

პირველი რაც ამ მოდულის შესახებ მოგეწონებათ არის ის, რომ ის სრულიად უფასოა! ისევე, როგორც WordPress- ის საცავიდან ნებისმიერი სხვა მოდულის საშუალებით, რამდენიმე წუთში შეგიძლიათ ჩამოტვირთოთ, დააინსტალიროთ და გააქტიუროთ. უფასო ვერსია საშუალებას მოგცემთ იმუშაოთ ერთი ინტერაქტიული გამოსახულებით. თუ მეტი გსურთ, მოგიწევთ აირჩიოთ PRO ვერსია, მაგრამ ამაზე მოგვიანებით ვისაუბრებთ.

მოდული პასუხობს და თქვენ არ უნდა ინერვიულოთ, რომ ინტერაქტიული სურათები სწორად არის ნაჩვენები ნებისმიერი მოწყობილობით. არა მხოლოდ ის, რომ სურათი მასშტაბური იქნება ეკრანის ზომის მიხედვით, არამედ ის იმუშავებს უმეტეს თანამედროვე და ძველ ბრაუზერებში (დესკტოპის და მობილური). ყურადღების დახატვა იყენებს ტილოს ელემენტებს ახალ ბრაუზერებში ნაჩვენების დროს, როდესაც ის დაუბრუნდება სურათების რუქებს, თუ მასში ატვირთავთ.

მახასიათებლები

სანამ მივიღებთ მაგალითს, რომელიც გაჩვენებთ თუ რამდენად ძლიერია ეს მარტივი მოდული, ვნახოთ რას უნდა ველოდოთ Draw ყურადღება:

  • ხატვა – სურათის ატვირთვის შემდეგ, თქვენ მიიღებთ შანსს, რომ მასზე ფორმები დახატოთ. შეარჩიეთ თქვენი სურათის ნებისმიერი ნაწილი, რომელიც გახდება შერჩევითი / დაჭერით
  • Ფერები – შეარჩიეთ ფერები ისე, რომ გახდეთ ცხელი წერტილები თქვენი საიტის დიზაინთან
  • მონიშნეთ hover – აჩვენეთ გამოსახულების სხვა ნაწილი, თუ მომხმარებელი გადაურჩება არჩეულ ნაწილს
  • მეტი ინფორმაციის ნახვა – აჩვენეთ მეტი ინფორმაცია სურათის არჩეული ნაწილის შესახებ
  • გადადით URL- ზე – მომხმარებლების გადამისამართება ნებისმიერ URL- ზე, თუ ისინი დააჭირეთ არჩევანს

ყურადღება მიაქციეთ პარამეტრების მითითებას

მაგალითი – ჰავაის ინტერაქტიული რუკა

ჩვენ მაგალითს დემო საიტიდან გამოვიყენებთ, რათა გაჩვენოთ, რა შეგიძლიათ გააკეთოთ ყურადღების მიქცევა. მოდით, ვნახოთ, როგორ გამოიყურება ჰავაიის ინტერაქტიული რუკა, როდესაც შექმნა მოდული.

პირველი რაც თქვენ მოგიწევთ, არის ჰავაიის კუნძულების იმიჯის პოვნა. ნავიგაციის შემდეგ ყურადღება მიიპყრო -> სურათის რედაქტირება, თქვენ უნდა ატვირთოთ სურათი მარჯვენა მხარეს. სურათის დატვირთვის შემდეგ, გართობა შეიძლება დაიწყოს.

აქ თქვენ შეგიძლიათ აირჩიოთ ფერები მონიშნული წერტილებისთვის (ფერი, საზღვარი, სიბრტყე და ა.შ.), დაასახელეთ “მეტი ინფორმაცია” (სურათი, სათაური, ტექსტის ფერი და ა.შ.). თუ არ გსურთ სურათის ხელით შეარჩიოთ თითოეული ფერი, შეგიძლიათ სწრაფად აირჩიოთ ფერადი სქემა მარჯვენა მხრიდან,.

ყურადღება მიიპყრო - როგორ შექმნათ ინტერაქტიული სურათები WordPress– ში

ყველაზე ჯადოსნური ნაწილი ხდება ცხელ წერტილების უბნები პარამეტრების ეკრანი. აქ თქვენ მიიღებთ თქვენს სურათს დატვირთული სრული ზომით. თქვენ ახლა უნდა გააკეთოთ ნახაზების შედგენა და ახალი ცხელ წერტილის შექმნა. თქვენ შეგიძლიათ დაამატოთ იმდენი რაოდენობა, რაც გსურთ, რაც იმას ნიშნავს, რომ თქვენ შეგიძლიათ შექმნათ ყოვლისმომცველი არჩევანი, როგორც გსურთ. თქვენ შეგიძლიათ შექმნათ რაც შეიძლება მეტი ცხელი წერტილი და თითოეულს აქვს საკუთარი პარამეტრები.

ასე რომ, ამ მაგალითში უნდა აირჩიოთ ერთ – ერთი კუნძული. შეარჩიეთ სათაური კუნძულისთვის, დაამატეთ აღწერილობა და დამატებითი სურათი, რომელიც აჩვენებს მას შემდეგ, რაც მომხმარებელი გადაიტანს ცხელ წერტილს (ზემოთ მოცემულია GIF გამოსახულების მარჯვენა ნაწილი).

თქვენ უნდა გაიმეოროთ პროცესი თითოეული კუნძულისთვის, რომელზეც გსურთ ინტერაქტიული. მას შემდეგ რაც თქვენი ცხელი წერტილები მზად იქნება, უბრალოდ დააკოპირეთ შტრიხ კოდი მარჯვენა მხრიდან. ჩასვით მოკლე კოდი თქვენს პოსტში, გვერდზე, ვიჯეტზე ან სადაც გსურთ ნახოთ თქვენი ახალი ინტერაქტიული რუკა და თქვენ გააკეთეთ! თუ გსურთ შეცვალოთ მომხმარებლები სხვა გვერდზე, როდესაც ისინი დააჭირეს არჩევანს, თქვენ უბრალოდ უნდა აირჩიოთ URL– ს ნაცვლად აღწერილობისა. როგორც მარტივია!

პროფ ვერსია

უფასო ვერსია სრულყოფილი იქნება, თუ მხოლოდ ერთი სურათი გჭირდებათ პროფ ვერსია საშუალებას მოგცემთ რაც შეიძლება მეტი ინტერაქტიული სურათი განთავსდეს თქვენს საიტზე. მიუხედავად იმისა, რომ ეს ყველაზე მნიშვნელოვანი საკითხი იქნება გასათვალისწინებელი, PRO ვერსია კიდევ ბევრ სურათს მიიღებთ.

განლაგების პარამეტრების ფუნქცია საშუალებას გაძლევთ უფრო მეტი ინფორმაცია ნახოთ სურათის არჩეულ ნაწილებზე. მაგალითად, თქვენ ნახავთ ინფორმაციას მსუბუქ ყუთში ან უბრალო ინსტრუმენტთა პანელში, რომელიც გამოჩნდება მას შემდეგ, რაც მომხმარებელი გადაურჩება გამოსახულების არჩეულ ნაწილს.

ასევე არსებობს ოცი წინასწარ განსაზღვრული ფერის პლატა, ასე რომ თქვენ არ გჭირდებათ ყოველი ფერის ხელით მორგება. პროფილის ვერსია ერთი საიტის ლიცენზიისთვის 74 დოლარი დაგიჯდებათ, მაგრამ თუ ერთზე მეტი ინტერაქტიული სურათი გჭირდებათ, ეს იქნება არაგონივრული.

როგორ აღვადგინოთ გამოსახულების დამატებითი ზომები

შედარებით ადვილია თქვენი WordPress თემაში გამოსახულების ახალი ზომების რეგისტრაცია. მას შემდეგ რაც თქვენ მოუყვეთ თქვენს სისტემას, რამდენად დიდი უნდა იყოს თქვენი სურათები, დაასახელეთ ისინი და გადაწყვიტეთ თუ როგორ უნდა ამოიღოთ ისინი, თქვენ თავისუფლდებით გადაანაწილოთ სურათები სადაც გსურთ. რაც შეეხება ძველ სურათებს?

თუ თქვენ გამოიყენეთ ერთ-ერთი ტექნიკა, რომელიც ჩვენ გაჩვენეთ, თქვენ მოამზადეთ ტურფა ახალი სურათებისთვის. იყენებთ თუ არა ახლად რეგისტრირებულ სურათის ზომებს საფოსტო მინიატურა, ან საშუალებას აძლევთ ავტორებს გამოიყენონ ისინი პოსტებში, ახალი წესები მოქმედებს მხოლოდ იმ სურათებისთვის, რომლებიც ატვირთავთ ცვლილებას ფუნქციების.php ფაილში. ძველი სურათების შესაცვლელად, ჩვენ გირჩევთ გამოიყენოთ Regenerate Thumbnails მოდული.

აღმდგენი მინიატურა:

ფასი: უფასო
  1. Წადი მოდელები -> ახალი დამატება
  2. მოძებნეთ “რეგენერაცია მინიატურების”
  3. მოდელის ინსტალაცია და გააქტიურება
  4. ნავიგაცია ინსტრუმენტები-> Regen.Tumbnails

თუ გსურთ თქვენი ყველა სურათის ზომის შეცვლა, უბრალოდ დააჭირეთ ღილაკს “Regenerate All Thumbnails” და დაელოდეთ მოდული, რომ შეასრულოს რთული სამუშაო.

როგორ აღვადგინოთ გამოსახულების დამატებითი ზომები

თუ გსურთ ნახოთ ზომის შეცვლა, ან მხოლოდ სურათების ზომის შეცვლა გსურთ, გადადით თქვენს მედია ბიბლიოთეკაში, სადაც ნახავთ ახალ ვარიანტს “ნაყარი მოქმედებების” ქვეშ და თითოეული სურათის გვერდით. გალერეა.

დანამატის კარგია ის, რომ იგი არ წაშლის თქვენს თავდაპირველ სურათებს. ის შექმნის მხოლოდ სურათის ახალ ზომებს, რომელთა გამოყენებაც შეგიძლიათ თქვენს თემაში, ხოლო ორიგინალი დარჩება თქვენთვის, რომ მოგვიანებით გამოიყენოთ ისინი ან ხელით წაშალოთ, თუ გადაწყვეტთ, რომ ისინი არ გჭირდებათ..

Ის არის. ისიამოვნეთ თქვენი ახალი სურათებით ან შეამოწმეთ მარტივი გამოსახულების ზომები მოდული, რომელსაც შეუძლია იგივე გააკეთოს.

ამოიღეთ სიგანე და სიმაღლე გამოსახულების ატრიბუტები jQuery- ით

WordPress- ის პოსტს სურათების დამატებისას, სისტემა ავტომატურად დაამატებს სურათს მის სიმაღლესა და სიგანეს. ეს ჩვეულებრივ კარგია, მაგრამ არის დრო, როდესაც არ მოგწონთ ის ფაქტი, რომ ყველა სურათი იღებს ამ ატრიბუტებს.

თუ ატვირთვის დროს ატრიბუტები გსურთ ჩამოართვათ, ამის გაკეთება შეგიძლიათ მარტივი ფუნქციის საშუალებით, რომელიც ჩვენ ბოლო დროს გაჩვენეთ.

თუ სტატია წაიკითხეთ ან თავად შეეცადეთ ფუნქცია, შეამჩნიეთ, რომ ეს მოქმედებს მხოლოდ თქვენს WP სისტემაში ფუნქციის დატვირთვის შემდეგ ატვირთულ სურათებზე. თუ თქვენ უკვე გაქვთ მონაცემთა ბაზებით სავსე მონაცემთა ბაზა ჩასმული გამოსახულებებით, ზემოხსენებული ფუნქცია თქვენი ძველი გამოსახულების ატრიბუტებში ბევრად დაგეხმარებათ..

იმის გამო, რომ თქვენ ვერ შეძლებთ თითოეული სურათის ხელით გავლა და წაშლა სიგანე და სიმაღლე სათითაოდ, თქვენ გჭირდებათ სხვა ფუნქციის საჭიროება, რომელიც ამ ატრიბუტებს ჩამოაშორებს თქვენს პოსტებში ჩასმული ყველა არსებული სურათისთვის. ამ შემთხვევაში, თქვენ სწორ ადგილზე ხართ, რადგან ჩვენ ვაპირებთ გაჩვენოთ მარტივი გზა სიგანისა და სიმაღლის გამოსახულების ატრიბუტების ავტომატურად მოხსნისთვის jQuery კოდი რამდენიმე ხაზით. არ შეგეშინდეთ წინა ფრაზა – თქვენ არც კი უნდა იცოდეთ რა არის jQuery, უბრალოდ მიჰყევით შემდეგ სამ ნაბიჯს და გააკეთებთ ჯიფში.

ამოიღეთ სიგანე და სიმაღლე გამოსახულების ატრიბუტები:

  1. გახსენით header.php ფაილი თქვენი თემის საქაღალდედან
  2. დააკოპირეთ და ჩასვით ეს კოდი არსად და წარწერები:
  3.  
  4. Ცვლილებების შენახვა

და თქვენ გააკეთეთ! კოდი გააკეთებს თავის ჯადოქრობას მას შემდეგ, რაც თქვენ გახსნით პოსტს, რომელიც შეიცავს გამოსახულებას და ამოიღებს მას და სიგანე ტეგებს.

როგორ შევქმნათ პერსონალური სურათის ზომები Media Uploader- ში

თუ იყენებთ Media Uploader- ს WordPress- ის სურათების გამოსახატავად, ალბათ ნახავთ მრავალრიცხოვან ვარიანტს სურათებისთვის. ბევრს შორის, თქვენ შეგიძლიათ აირჩიოთ გამოსახულების ზომა, რომელსაც შეგიძლიათ გაგზავნოთ თქვენს სტატიაში.

აქ შეგიძლიათ აირჩიოთ მინიატურა, საშუალო, დიდი და სრულმასშტაბიანი პარამეტრები, მაგრამ ყველა ამ ვარიანტს აქვს წინასწარ განსაზღვრული მნიშვნელობები. ასე რომ, თუ თქვენ იყენებთ საბაჟო თემას, უფრო ხშირად არ ხუჭავთ თავს და შეცვლის თითოეული სურათის სიგანე და სიმაღლე.

სინამდვილეში, თქვენ არ გჭირდებათ ამის გაკეთება. არსებობს სისუფთავე პატარა ფუნქცია, სახელწოდებით add_image_size (), რომელიც შესანიშნავი ინსტრუმენტია დეველოპერებისთვის. ამ სტატიის შემდეგ, ასევე ნახავთ, რომ სასარგებლო იქნება.

მოდით ვთქვათ, რომ თქვენს თემას აქვს ჩვეულებრივი სიგანე და გსურთ სურათების მარტივად ჩართვა, რომ იქ იდეალურად მოთავსდეს. ვთქვათ, რომ სიგანე 666px (ჩვენ არ ჩავთვლით, თუ რატომ დააწესეთ სიგანე ამ რიცხვზე, ეს თქვენი არჩევანია). ამისათვის თქვენ უნდა დაამატოთ დამატებითი რადიო ღილაკი Media Uploader- ზე. ქვემოთ მოცემულ კოდთან ერთად, დაამატებთ კიდევ ერთ ზომას, რაც ორიგინალის ნახევრის ზომაა.

  1. გახსენით თქვენი ფუნქციები.php ფაილი
  2. დააკოპირეთ და ჩასვით ეს კოდი:
  3. ფუნქცია custom_image_size ()
    add_image_size ('ერთი ზომა', 333, 333, მართალია);
    add_image_size ('other-size', 666, 666, true);
    }
    
    add_action ('init', 'custom_image_size');
    
    ფუნქცია show_image_size ($ ზომები) {
    $ size ['one-size'] = __ ('Custom Size 1', 'isitwp');
    $ size ['other-size'] = __ ('Custom Size 2', 'isitwp');
    $ ზომების დაბრუნება;
    }
    
    add_filter ('image_size_names_choose', 'show_image_size');
  4. Ცვლილებების შენახვა
  5. სცადეთ დაამატოთ სურათი თქვენი Media Uploader- დან, სადაც უნდა ნახოთ თქვენი ახალი ზომის პარამეტრები “დანართის ჩვენების პარამეტრების” ქვეშ.

შექმენით ნებისმიერი ვებსაიტის ავტომატური ეკრანის ანაბეჭდი და გამოაქვეყნეთ იგი, როგორც სურათი თქვენს პოსტში

თუ გსურთ ვებგვერდის მინიატურების ჩვენება, თქვენ უნდა წახვიდეთ ვებგვერდზე, ეკრანზე დაბეჭდოთ ეს ან გადაიღოთ ეკრანის ანაბეჭდი პროგრამით ან ბრაუზერის დამატება. შემდეგ დაგჭირდებათ გამოსახულების შეცვლა, მოჭრა მას სწორ ზომით და ატვირთეთ იგი თქვენს WordPress- ში, რათა გამოიყენოთ პოსტი.

თუ ამ ყველაფრის გადაღება აღარ გჭირდებათ, ეს არ იქნება პრობლემა, მაგრამ თუ უფრო ხშირად იყენებთ სხვადასხვა ვებსაიტების ეკრანის სურათებს, სიამოვნებით გისმენთ, რომ არსებობს გასაოცარი ფუნქცია, რომელიც დაზოგე დრო და ნერვები.

სახელმძღვანელოს ამ ნაწილში ჩვენ ვაჩვენებთ სრულ ფუნქციას, რომელიც ქმნის მოკლე კოდს, რომლის საშუალებითაც შეგიძლიათ გამოიყენოთ ნებისმიერი ვებ – გვერდი, რომელიც გსურთ..

ავტომატური ეკრანის შექმნა:

  1. ღია ფუნქციები.php
  2. დააკოპირეთ და ჩასვით შემდეგი კოდი:
  3. ფუნქცია wp_webscreen ($ atts, $ შინაარსი = NULL)
    ამონაწერი (მალსახმობი)
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => 'wploop',
    "w" => '600 ", // სიგანე
    "თ" => '450' // სიმაღლე
    ), $ ატ));
    
    $ img = '”. $ alt. '';
    დაბრუნება $ img;
    }
    add_shortcode ("ეკრანი", "wp_webscreen");
  4. შეცვალეთ ნაგულისხმევი ცვლადები მასივში
  5. Ცვლილებების შენახვა

ეს ფუნქცია ქმნის დეკლარაციას, რომლის საშუალებით შეგიძლიათ მარტივად გამოიყენოთ თქვენი WordPress ვებსაიტზე. გსურთ გამოიყენოთ ვებგვერდის ეკრანის ანაბეჭდი პოსტში, გვერდითი ხაზის ვიჯეტზე ან თქვენს ქვედა გვერდზე, მაგალითად, უბრალოდ დააკოპიროთ მოკლე ნომერი სწორ ადგილზე:

[ეკრანის url = ”http://www.firstsiteguide.com” alt = ”fsg” w = ”600 ″ სთ =” 450]

ამ ფუნქციის შესანიშნავ საკითხს წარმოადგენს ის, რომ ის ინახავს სურათს, როგორც დინამიურ URL- ს, რაც იმას ნიშნავს, რომ თუ თქვენ შექმნით ვიდეოს მოკლე კოდთან ერთად, ის მომავალში ავტომატურად განახლდება თავის თავს და ყოველთვის აჩვენებს მოკლე კოდში მითითებულ ვებსაიტის მიმდინარე სახეს..

გაითვალისწინეთ, რომ თქვენ შეგიძლიათ შეცვალოთ მალსახმობის პარამეტრი პირდაპირ მისგან. თქვენ არ გჭირდებათ შეცვალოთ კოდი ფუნქციებში.php ფაილში, თუ გსურთ სხვა URL- ს ფოტოების გადაღება ან სხვა განზომილების გადაღება..

მაგალითი:

ვთქვათ, რომ გინდათ Google- ის ეკრანის ანაბეჭდის გადაღება და 200 × 400 პიქსელი დიდი:

[ეკრანის url = ”http://www.google.com” alt = ”Google” w = ”200 ″ თ =” 400 ″]

თქვენ შეგიძლიათ ყველაფერი გაადვილოთ, რომ კოქსის კოდი ღილაკით შეინახოთ, ასე რომ ღილაკის ერთი დაჭერით შეგიძლიათ ჩასვათ იგი პოსტში..

დასკვნა

თქვენ არ გჭირდებათ დააყენოთ ყველა დანამატი და ფუნქცია, რომელიც ჩვენ ვახსენეთ, რათა გაუმჯობესდეს სურათები თქვენს WordPress საიტზე. მაგრამ ჩვენ ვიმედოვნებთ, რომ თქვენ იპოვნეთ რამდენიმე რჩევა, რომელიც დაგეხმარებათ გამოსახულების ოპტიმიზაციაში ან რაიმე ფორმით უკეთესობისკენ.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map