WordPress plugins - Getwid блокове за Gutenberg
Съдържание
Gutenberg - плъгини, добавки и разширения
Gutenberg е актуалният редактор на съдържание в WordPress и възможностите за добавяне на допълнителни разширения и плъгини го превръщат в много сериозен конкурент на популярните програми за създаване на сайтове.
В различни публикации може да срещнете термините plugins, add-ons and extensions (плъгини, добавки и разширения), но те всички означават едно и също нещо - интегриране на допълнителни функционалности в интерфейса на Gutenberg и може да се използват на заменяем принцип.
Важно е да се отбележи, че различните Gutenberg плъгини предлагат в голяма степен идентични блокове (напр. Заглавия, Изображения...) и реалната разлика е в опциите, които съответния плъгин поддържа. Затова може да се каже, че най-полезни са плъгините, които предлагат най-голям брой блокове за създаване на персонализирано съдържание в WordPress.
В статията ще ви представим един от най-популярните плъгини за Gutenberg - Getwid. Getwid е създаден от разработчиците на Motopress (https://motopress.com/
), компания с доказано присъствие в елита на WordPress общността. Плъгинът предоставя достъп до впечатляваща колекция от блокове (40+), които предлагат интуитивен контрол при създаване и форматиране на съдържание, лесни и адаптивни настройки.
Потребителите могат да избират между богат набор от съдържателни блокове като плъзгачи (carousel, slider) за медии, текст и изображения, икони, бутони, секции, банери, галерии, панели за ценови списъци, свидетелства на клиенти, блокове за Instagram, MailChimp, Google Maps, броячи, идентификатори за процеси, ценови таблици, времеви линии, персонализирани типове съдържание и много други, които ще опишем накратко в статията.
Getwid Base - безплатна многофункционална WordPress Gutenberg тема
За да бъде пълно удовлетворението на WordPress феновете, разработчиците от Motopress предоставят и безплатната многофункционална WordPress Gutenberg тема Getwid Base за лични и бизнес уебсайтове от всякакъв мащаб.
Това е официалната стартова тема за плъгина Getwid, в която с кликане на няколко бутона можете да инсталирате професионално създадените Gutenberg блокове.
Благодарение на комбинацията от Gutenberg блокове и библиотека от шаблони (Template Library), която се активира през плъгинa Getwid, може да се създават и персонализират страници, богати на съдържание, без необходимост от умения за работа с код.
Ако нямате специални изисквания към дизайна, структурата и функциите на сайта, само със замяна на графиката, цветовата гама и текста може да бъде публикуван на наш собствен сайт (персонален, бизнес, start-up, landing page, портфолио, блог...) на базата на Getwid в рамките не на седмици и дни, а на часове.
Инсталиране на тема Getwid Base
Инсталирането на темата Getwid Base се извършва чрез въвеждане на getwid в полето за търсене в Dashboard > Appearance > Themes > Add New, след което е нужно да се последват бутоните *Install* и същия бутон, вече с етикет Activate:
или изтеглете архив на темата безплатно от https://wordpress.org/themes/getwid-base/ и инсталирайте темата през бутона Upload Theme:
Импортиране на Getwid и примерно съдържание
След успешната инсталация ще откриете съобщение за препоръчително инсталиране на два плъгина - Getwid и One Click Demo Import, затова кликнете на линка Begin installing plugins:
Натиснете на линка Begin activating plugins или Activate в полето на всеки плъгин, за да се активират инсталираните плъгини:
По време на импортирането съществуващо съдържание - публикации, страници, категории, изображения, персонализирани типове публикации или други данни няма да бъде изтрито или модифицирано. Ще бъдат импортирани допълнително само публикации, страници, изображения, джаджи, менюта и други настройки на темата.
След импортиране на съдържанието трябва да се конфигурира ръчно формуляра за контакти и API ключовете за свързване с приложения като Google Maps, Instagram, MailChimp, YouTube...
За стартиране на импортирането отидете на Appearance > Import Demo Data:
и в следващия екран кликаме на бутона Import Demo Data:
Необходимо е изчакване на завършване на процесът без да се затварят екрана и без да се клика на линкове в менюто. След получаване на потвърждение, че процесът на импортиране е завършен с грешка:
Всъщност това не е типична грешка, а от съображения за сигурност WordPress не позволява импортиране на оригиналното лого в SVG формат:
Ако желаете да имаме оригиналното лого в нашата инсталация на Getwid Base може да запазите файла на компютъра си от URL https://getwid.getmotopress.com/wp-content/uploads/2019/04/logo1.svg
:
:
и да ползвате безплатен онлайн конвертор https://svgtopng.com/
, за да го конвертирате в PNG формат, след което го качвате в Media Library:
През Customizer > Site Identity > Logo избирате файла и кликате бутона Publish. Вече имате пълната инсталация на темата Getwid Base заедно с всички Getwid Gutenberg блокове, които може да разгледате през линковете Blocks 01, Blocks 02 и Blocks 03 в хоризонталното меню:
Getwid – безплатни блокове за Gutenberg
Разширението за Gutenberg блокове Getwid може да бъде разглеждано като приложение две в едно: пакет от многофункционални WordPress блокове за Gutenberg и библиотека за шаблони (Template Library).
Плъгинът дава достъп до много опции за персонализиране за всеки блок: контролиране на оформлението, типографията, цветовете, иконографията, медиите, анимацията и други, за да се създадат лесно персонализирани уеб сайтове от всякакъв мащаб.
Поддържайки най-добрите практики за кодиране, Getwid постига оптимизирана структура и бързина на зареждане дори на сайтове с множество персонализирани блокове.
Кратко описание на Getwid блокове за Gutenberg
За да достъпите Getwid Blocks отворете страница или публикация в WordPress и натиснете иконата със символ знак плюс +
и в панела изберете Getwid Blocks:
В тази част от статията ще ви покажем наличните Getwid блокове към момента на публикуване (34 без Template Library) с кратко описание на всеки един блок, следвайки подреждането в Gutenberg.
Първият блок е библиотеката за шаблони Template Library, която може да достъпите директно и през линк със същото име в хоризонталната лента с инструменти:
В новия панел натиснете бутона Insert Template, за да се отвори библиотеката с шаблоните:
За да откриете по-лесно подходящ шаблон (общия брой шаблони е 100+
) може да ползвате падащото меню All Categories или да ползвате полето за търсене:
При посочване на шаблон се активира бутон Insert Template, който при кликане импортира шаблона в съответната страница или публикация:
Section (секция, основен структурен елемент в страница или публикация) - изграждане на персонализирани оформления от всякакъв тип (задаване на колони и подравнения; видео презентации и фон, плъзгащи блокове с текст и изображения; промяна на фон, прилагане на анимация, управление на карти с текстове, цветове и изображения...).
Media & Text Slider (плъзгащи текстове и медийни файлове) - привличане вниманието на посетителите с плъзгащи се текстове, задаване на персонализирана ширина и подравняване на съдържание, прилагане на текстови и цветни слоеве (overlays), прилагане на слайд ефекти и анимация на текст.
Image Slider (плъзгащи се изображения) - блок за създаване на плъзгащи се изображения с пълен контрол върху навигационните стилове, размерите на изображенията и анимационните ефекти.
Icon (икони) - създаване на ефектни и ясни потребителски интерфейси с колекция от персонализирани икони.
Icon Box (области с икони) - създаване на адаптивни полета за услуги с икони, заглавия и текст, с използване на предварително изработени стилове, промяна на цветове, размери и ефекти при посочване с мишката (hover effects).
Banner (банери) - рекламни блокове с напълно адаптивни банери, за които дефинираме шрифтове, размери, подравнявания, цветове, анимационни ефекти и бутони за по-добро представяне на нашите продукти, услуги и проекти.
Tabs (раздели) - хоризонтални раздели с множество предварително зададени стилове и персонализирани заглавия.
Accordion (акордеон) - секция за показване на скрито съдържание при кликане на заглавие, функционален акордеон с персонализирани икони и типове заглавия, перфектния блок за създаване на секции с често задавани въпроси.
Toggle (превключване) - наподобява много работата на блок Акордеон, но позволява на потребителите да разширяват и скриват съдържанието на отделен панел независимо от другите панели в блока, докато при Акордеон отварянето на нов панел затваря предишния отворен панел.
Image Stack Gallery (застъпване на изображения в галерия) - разчупено и адаптивно подреждане на изображения в галерии със седем различни стила, дава възможност за бягство от традиционната решетъчна структура на галериите и създаване на ефектен дизайн.
Google Maps (google карти) - блок за вграждане на опростени карти Google Maps с неограничени персонализирани маркери [1].
Recent Posts (последни публикации) - може да представите най-новите си публикации с персонализирани мета данни, оформени като списък или решетка.
Advanced Heading (разширени настройки на заглавие) - богат контролен панел за типография за създаване на заглавия - пълен достъп до Google Fonts и настройките за шрифтове, стилове и размер на текста, преобразуване на текстови букви с едно кликане, дефиниране на разстояния и цветове.
Image Box (настройки на изображение) - предоставя достъп до настройки за по-атрактивно представяне на изображения - може да добавите анимационни ефекти, да приложите динамично оразмеряване и промяна на разстоянията около изображенията.
Advanced Spacer (настройване на разстояние) - позволява да добавите интервал между блоковете с динамично регулируеми настройки - по желание може да бъде скрит или да следва адаптивни настройки на мобилни устройства, таблети или десктоп компютри.
Social Links (социални връзки) - улеснява добавянето на различни социални икони, може да се персонализира подравняването за различни устройства, като се следва предварително създадени оформления, възможна промяна на техния размер и разстоянията около тях.
Button Group (група бутони) - дава възможност за добавяне на няколко стилизирани бутона с подкана за действие (call-to-action), като може да се настроят ширината, подравняването и посоката за целия набор от бутони едновременно.
Testimonial (свидетелства на клиенти) - блок за свидетелства на клиенти с аватар (анимирано или реално изображение) на автора, име, длъжност и текст.
Person (профил на личност) - за създаване на впечатляващо представяне на всяка личност от колектива в отделен панел с изображение, връзки към акаунти в социални мрежи, име, позиция и кратко представяне.
Instagram - свързване на WordPress със собствен акаунт в Instagram и създаване на персонализирана галерия [1].
Progress Bar (хоризонтална лента за развитие на процес) - анимирана хоризонтална лента за развитие на процес с настройки за стойност и цветове.
Circular Progress Bar (кръгла лента за развитие на процес) - анимирана кръгла лента за развитие на процес с настройки за ширина, стойност и цветове.
*Counter* (брояч) - показва цифрови данни за нашия бизнес като брои от нула до определената стойност за определено от нас време в секунди.
Price Box (таблици за цени) - подходящ блок за визуализиране на данни; може да се създават различни таблици за параметри и цени (например сравнение на хостинг планове).
Contact Form (формуляр за контакт) - формуляр за контакт с традиционен набор от полета за въвеждане на данни, персонализирани етикети и поддръжка на reCAPTCHA.
Post Carousel (последователно показване на публикации) - имате достъп до опции за персонализиране, за да покажете публикации, страници или персонализирани типове съдържание чрез кликане върху индикатори или през определен интервал от време.
Post Slider (плъзгане на публикации) - помага да визуализираме съществуващите публикации, продукти или други персонализирани типове публикации в настройващ се slider с няколко предварително подготвени оформления.
Custom Post Type (персонализиран тип съдържание) - блокът предоставя множество настройки за избор между оформление в стил решетка, списък или персонализиран изглед на всички custom post type публикации.
Price List (списък с цени) - перфектен блок за представяне на цени от меню на ресторант или съдържание с регулируеми заглавия, пунктирани линии, цветове и изображения.
Mailchimp - лесна интеграция с API на MailChimp за добавяне на формуляри за абонамент [1].
Video Popup (изскачащ прозорец за видео) - показване на нашите Youtube, Vimeo или самостоятелно хоствани видео клипове в изскачащи прозорци; бутона за видео възпроизвеждане, персонализираните заместващи изображения, цветовете и размерите на контейнерите са напълно регулируеми [1].
Image Hotspot (горещи точки в изображение) - чрез поставяне на неограничени анимирани маркери с напълно адаптивни подсказки (tooltips) върху изображение придава на публикацията интерактивен и впечатляващ стил.
Countdown (блок за обратно броене) - динамичен таймер за обратно отброяване с настройващи се цифрови стойности и времеви етикети, за които можете да зададете шрифт, размери, цветове, интервал.
Content Timeline (времева линия на съдържанието) - блокът показва в хронологичен ред всички събития в стилна графика на времевата линия с регулируеми контейнери като заглавия, подзаглавия, изображения.
[1] За да свържете с акаунти на трети страни трябва да активирате достъпа в секцията Getwid Settings, която достъпвате като изберете в главното меню Settings > Writing и въведете в съответните полета API ключове за следните услуги: Instagram Access Token, Google Maps API Key, Recaptcha Site Key, Recaptcha Secret Key, Mailchimp API Key.
В отделни статии ще ви покажем как се настройват някои от най-полезните и впечатляващи блокове на плъгина Getwid за Gutenberg.