ავტორი: Neil Lock

From the word itself, the word shortcode means exactly that: A short code; a shortcut code.

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

მაგალითად, ჩვეულებრივი კოდის ნაწყვეტი, სიგრძის თვალსაზრისით, სავარაუდოდ დაახლოებით ასე გამოიყურებოდა:

<html>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam id aliquam turpis. Vivamus quis arcu tincidunt, finibus urna eget, placerat risus.

Aliquam arcu massa, finibus et lacinia sed, scelerisque nec augue. Quisque eu viverra sapien, vel consequat lorem. Integer vel erat tortor.

Phasellus condimentum magna eget congue venenatis. Suspendisse blandit vehicula consectetur.

Nullam sodales eleifend massa, in bibendum purus fermentum id.

Morbi et turpis feugiat, malesuada ipsum sit amet, interdum nulla. In non ante nec nisl mattis gravida sit amet id lectus.

</html>​

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

Now, a shortcode with the same exact function as the code above will look something like this, in contrast:

[lorem ipsum dolor estat]Lorem Ipsum[/lorem]​

You can see how they’re miles different from each other in terms of length.

ახლა წარმოიდგინეთ, რომ კოდის ორივე ნაწილი – ორიგინალი, გრძელი ფრაგმენტი და მოკლე კოდი, რომელიც შეიცავს მხოლოდ სიტყვას „lorem“ – აკეთებს ზუსტად ერთსა და იმავეს: ამატებს Lorem Ipsum ტექსტს.

This is what shortcodes do. They make adding widgets, functions, and a bunch of other cool stuff easier for both ordinary WordPress users and developers alike.

Where can I find shortcodes?

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

Shortcodes Ultimate, for example, will let you choose from hundreds of shortcodes that you can use on Page Builder Sandwich (or anywhere, actually) by simply grabbing the shortcode of your choice from Shortcode Ultimate’s repository or documentation page.

Adding Custom Shortcodes on PBS

Page Builder Sandwich-ზე შეგიძლიათ დაამატოთ მოკლე კოდები პირდაპირ თქვენს გვერდზე, უბრალოდ აკრეფით ან თქვენს კონტენტის არეში ჩაკოპირებით.

ჩვენ ეს გავაკეთეთ ქვემოთ Shortcodes Ultimate-ის მოკლე კოდის გამოყენებით, რითაც დავამატეთ კონტენტის ბლოკი Page Builder Sandwich-ის დემო გვერდზე:

Another thing you’ll find handy when using Page Builder Sandwich is our Shortcode Mapping feature.

ჩვენი ერთ-ერთი წინა სტატიიდან მოკლე კოდების ასახვის (Shortcode Mapping) შესახებ, განმარტება ასეთია:

Shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

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

სანამ თქვენს WordPress საიტზე დაინსტალირებული გაქვთ მოდული, რომელიც მოიცავს მოკლე კოდს, ის მარტივად ხელმისაწვდომი იქნება გამოსაყენებლად Page Builder Sandwich-ზე.

So for example, if I wanted to add a WooCommerce shortcode on my page, all I have to do is make sure that it’s installed on my WordPress site, like so:

And then, to actually add the shortcode, I’ll just go to my page, and drag and drop the Shortcode Element:

Because we already have WooCommerce installed on our WordPress site, you can see that all of the shortcodes that are available on the WooCommerce plugin are already available on Page Builder Sandwich. This is what Shortcode Mapping is.

You can also see on the upper left corner that the ACF (Advanced Custom Fields) and MailChimp shortcodes are available– because we have those instlled on our WordPress site, too.

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

Here are some other helpful plugins that you can use to create your own custom shortcodes:

არსებობს ათობით და ათობით გვერდის მშენებელი და ალბათ საკუთარ თავს ეკითხებით: რა არის ასეთი განსაკუთრებული Page Builder Sandwich-ში? რატომ უნდა შეიწუხოთ თავი მისი გამოყენებით, თუ უკვე გაქვთ რომელიმე ხელთ?

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

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

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

Page Builder Sandwich-თან ერთად, მთელი რედაქტირება ხორციელდება თქვენი საიტის წინა მხარეს (front end) და თქვენ პირდაპირ არედაქტირებთ კონტენტს ნამდვილი „რასაც ხედავთ, იმას იღებთ“ გამოცდილებისთვის.

2. სწრაფი და მარტივი პირდაპირი რედაქტირება დამღლელი ამომხტარი დიალოგების გარეშე

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

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

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

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

3. WordPress-ის ხელახლა გამოყენებული ფუნქციონალი

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

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

საკუთარი ფერის ამომრჩევლის გამოყენების ნაცვლად, ჩვენ ვიყენებთ Iris color picker-ს. საკუთარი სურათების ამტვირთავის ნაცვლად, ვიყენებთ მედიამენეჯერს. ასევე არის backbonejs, underscorejs, wp.hooks და wp.shortcode, რომ დავასახელოთ კიდევ რამდენიმე მოსახერხებელი სკრიპტი. ჩვენ ვიყენებთ ყველა მათგანს, რამაც გაგვიმარტივა ცხოვრება და ამასთანავე უფრო სტაბილურ კოდის ბაზამდე მიგვიყვანა.

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

4. კლავიატურით ნავიგაცია და მალსახმობები

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

მაგალითად, ზოგიერთ მშენებელში თქვენ ვერ შეძლებთ მარტივად დაარედაქტიროთ ტექსტი ერთი აბზაცით/სექციით ზემოთ იქიდან, სადაც არედაქტირებთ, რადგან მოგიწევთ ამომხტარი დიალოგიდან გამოსვლა და ახალზე დაწკაპუნება. Page Builder Sandwich-ში კი შეგიძლიათ კლავიატურით ნავიგაცია. გამოიყენეთ ისრის ღილაკები თქვენს კონტენტს შორის გადასაადგილებლად — ეს მუშაობს მაშინაც კი, თუ თქვენი სხვა კონტენტი მოთავსებულია სხვა მწკრივში ან სვეტში.

კიდევ ერთი მნიშვნელოვანი ფუნქციაა undo და redo (გაუქმება და გამეორება) კლავიატურის მალსახმობები. თავიდან შეიძლება ბევრი არაფერი ჩანდეს, მაგრამ დაფიქრდით: რა მოხდება, თუ შემთხვევით არასწორ ადგილას გადაათრევთ და ჩააგდებთ თქვენს კონტენტს. ზოგიერთ გვერდის მშენებელში მოგიწევთ მისი უკან, თავდაპირველ პოზიციაზე გადათრევა. Page Builder Sandwich-ში კი მუშაობს როგორც undo, ასევე redo. ასე რომ, გსურთ აკრეფილი ტექსტის შეცვლა თუ გადათრეული კონტენტის (ან რამდენიმე გადათრეული კონტენტის) უკან დაბრუნება, უბრალოდ დააჭირეთ undo-ს ან redo-ს. Undo და redo მუშაობს გადათრეულ და ჩაშვებულ კონტენტზე და თვისებების ისეთ ცვლილებებზეც კი, როგორიცაა შრიფტის ზომები და მწკრივის დაშორებები (paddings). ეს მათ ძლიერ იარაღად აქცევს თქვენს სარედაქციო არსენალში.

5. ნამდვილი frontend გვერდის მშენებელი – რედაქტირების უფრო მშვიდი და უპრობლემო გამოცდილება

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

საბოლოო ჯამში, ჩემთვის Page Builder Sandwich-ის მთავარი განმასხვავებელი ნიშანი ის არის, რომ ჩვენ შევქმენით იგი მიზნით, ყოფილიყო „ნამდვილი“ frontend გვერდის მშენებელი — ახლებური ხედვა იმისა, თუ როგორი უნდა იყოს front end-ზე რედაქტირება.

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

თუ გსურთ გაიგოთ, რით განსხვავდება Page Builder Sandwich სხვა გვერდის ამგებებისგან, იხილეთ ჩვენი სტატია How Page Builder Sandwich Is Different from the Rest.

სად არის ის? და რისი რედაქტირება შემიძლია მისი საშუალებით?

სხვა მრავალი გვერდის ამგებისგან განსხვავებით, Page Builder Sandwich თქვენი ვებსაიტის ფრონტენდზე (front end) მუშაობს. თუ თქვენ ბექენდში (back end) იმყოფებით, კონტენტის რედაქტორის ღილაკების გვერდით განვათავსეთ ღილაკი „Frontend“, რომელიც თქვენი გვერდის ფრონტენდზე გადაგიყვანთ.

Page Builder Sandwich გაძლევთ საშუალებას დაარედაქტიროთ თქვენი ჩანაწერების (posts), გვერდების (pages) და მორგებული ჩანაწერების ტიპების (custom post types) კონტენტი. თუმცა, ის არ გაძლევთ საშუალებას პირდაპირ დაარედაქტიროთ მთავარ გვერდზე აგრეგირებული ბლოგპოსტები და თქვენი საიტის სხვა არა-ერთეული (non-single) არეები. უბრალოდ ასე შეხედეთ: თუ იმას, რისი რედაქტირებაც გსურთ, ბექენდში აქვს კონტენტის რედაქტორი (როგორიცაა „ახალი ჩანაწერი“ და „ახალი გვერდი“), მაშინ Page Builder Sandwich-ის გამოყენება შესაძლებელია. შეგიძლიათ დაარედაქტიროთ ცალკეული გვერდები და ბლოგპოსტები, ხოლო თუ, მაგალითად, გაქვთ მოდული, რომელიც რესტორნის მენიუს ან პორტფოლიოს ელემენტებს ამატებს, მათი რედაქტირებაც შეგიძლიათ.

ფრონტენდზე ყოფნისას, თქვენს ადმინისტრატორის ზოლში (adminbar) განთავსებულია ლურჯი ღილაკი „Edit with Page Builder Sandwich“. უბრალოდ დააწკაპუნეთ მასზე გვერდის რედაქტირების დასაწყებად.

კონტენტის პირდაპირი რედაქტირება

Page Builder Sandwich-ით ჩვენ კონტენტის რედაქტირება მაქსიმალურად მარტივი და უმტკივნეულო გავხადეთ. კონტენტის რედაქტირება პირდაპირი და მარტივია: უბრალოდ დააწკაპუნეთ და აკრიფეთ. ეს ასე მარტივია.

წარმოგიდგენთ ინსპექტორს

შევნიშნეთ, რომ გვერდის ბევრ ამგებს უამრავი ამომხტარი ფანჯარა (popup) აქვს. პირადად მე არ მიყვარს ამომხტარი ფანჯრები, რადგან ისინი ყურადღებას ფანტავს და არსებითად გეუბნებათ: „ჰეი, შეწყვიტე რასაც აკეთებ, სანამ ჯერ ამ ველებს არ შეავსებ“. ისინი არღვევს რედაქტირების სხვაგვარად შეუფერხებელ პროცესს. ამიტომ, ჩვენ მაქსიმალურად შევამცირეთ ამომხტარი ფანჯრების გამოყენება და მათ ნაცვლად შევქმენით ინსპექტორი.

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

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

ინტეგრაცია WordPress-ის თემებთან

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

ინტეგრაცია მოკლე კოდებთან (Shortcodes)

მოკლე კოდები (Shortcodes) WordPress-ის მნიშვნელოვანი ასპექტია და დიდი ალბათობით, თქვენს საიტზე რამდენიმე მოკლე კოდს გამოიყენებთ. Page Builder Sandwich მათ შესანიშნავად ამუშავებს — თქვენი მოკლე კოდები ფრონტენდზე ვიზუალიზებული გამოჩნდება. მოკლე კოდები ასევე რედაქტირებადი რჩება, და რაც მთავარია, მათი რედაქტირების შემდეგ, ისინი ხელახლა დარენდერდება თქვენს ცვლილებებთან ერთად.

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

რაც შეეხება ვებსაიტის გადატვირთვას?

ვის მოსწონს ნელი ვებსაიტები? არც ჩვენ და რა თქმა უნდა, არც თქვენ. ჩვენ ვიზრუნეთ იმაზე, რომ Page Builder Sandwich-ს თითქმის ნულოვანი გავლენა ჰქონდეს თქვენი ვებსაიტის წარმადობაზე. გამოსულ მდგომარეობაში (logged out), მინიმუმ, რიგში დგება მხოლოდ სტრიქონებისა და სვეტების CSS სტილები, აგრეთვე თქვენ მიერ გამოყენებული მოკლე კოდებისთვის საჭირო JS და CSS სკრიპტები.

დეველოპერებისთვის

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

თუ გსურთ შესაძლებლობების შემდგომი გაფართოება ან Page Builder Sandwich-ის გარკვეულ ნაწილებთან ინტეგრაცია, ჩვენ ასევე გვაქვს უამრავი სასარგებლო action და filter hook-ი, რომელთა გამოყენებაც შეგიძლიათ.