Искате ли да създадете a WordPress плъгин прост блок на Гутенберг?
Не обичаме ли всички WordPress? Платформата постига огромен успех от самото си създаване, като разработчиците непрекъснато добавят нови функции. Една от открояващите се функции в последно време е редакторът на блокове на WordPress, кодово име Гутенберг.
Gutenberg предлага на потребителите на WordPress вълнуващ нов начин за публикуване на съдържание и персонализиране на уебсайта си. Той е невероятно лесен за използване, което е страхотна новина както за начинаещи, така и за разработчици. Ако използвате най-новата версия на WordPress, вече сте запознати с редактора на блокове и концепцията за блокове.
По подразбиране редакторът на блокове на WordPress идва с някои блокове, които ви позволяват да включвате текст, изображения, цитати, аудио, видео, вграждане и т.н. Освен това има много добавки на Gutenberg, които ви позволяват да разширите редактора, без да нарушавате изпотяване.
Въпреки това, може да имате конкретна нужда, която ви подканва да създадете свои собствени персонализирани блокове. В тази статия ще ви покажем в няколко параграфа как да създадете персонализирани блокове на Gutenberg, за да отговарят на вашите специфични нужди.
Без повече приказки, нека да започнем, защото има много за учене.
Но преди, ако никога не сте инсталирали WordPress открийте Как да инсталирате WordPress Блог в 7 Стъпки et Как да се намери, инсталиране и активиране на WordPress тема на вашия блог
След това обратно към защо сме тук.
Какво са все пак блоковете?
Блоковете третират абзаците, заглавията, медиите и вгражданията като компоненти, които, когато са нанизани заедно, съставляват съдържанието, съхранявано в базата данни на WordPress, заменяйки традиционната концепция за текст с вградени къси кодове за медия и вградени кодове.
В миналото потребителите на WordPress разчитаха на текст и кратки кодове, за да добавят съдържание. Гутенберг използва блокове. Новият редактор ви позволява да използвате блокови единици за създаване на богати и гъвкави оформления, които са лесни за управление. Понастоящем можете да използвате редактора на блокове за публикации и страници, но има активни планове поддържа пълно редактиране на сайтове в бъдеще.
Работата с блокове прави създаването на съдържание в WordPress доста освежаващо. Освен това много съществуващи плъгини поддържат новия редактор и идват с готови за използване блокове, които улесняват добавянето на съдържание от споменатите плъгини. Редакторът ви позволява да плъзгате и пускате блокове на страница, за да можете да натиснете бутона за публикуване по-бързо.
Точно като конструктор на страници, интегриран директно в WordPress.
Ако сте запознати с конструктори на страници като Elementor, вероятно сте запознати с концепцията за изграждане на страници с плъзгане и пускане. Gutenberg е опит за пълно интегриране на изграждане на уебсайтове с плъзгане и пускане в ядрото на WordPress.
Така че нека да стигнем до най-добрата част от днешната статия. Нека се научим как да създадем прост блок. Можете да направите това ръчно или с помощта на плъгини като Персонализирани блокове Genesis (бивш BlockLab), Мързеливи блокове ou ACF. Създаването на персонализирани блокове е малко техническо, така че за целите на днешната статия ще използваме плъгин.
Как да създадете персонализиран блок (използвайки genesis Custom Blocks)
По-лесно е да преминете по пътя на приставката, защото създаването на персонализирани блокове на Gutenberg от нулата изисква добро разбиране на HTML, CSS, PHP и най-важното - javaScript. Вие също ще трябва да разберете React.
За следващия раздел ще използваме Genesis Custom Blocks. Безплатната му версия е налична в официалното хранилище на WordPress, което означава, че можем да го инсталираме в таблото за управление на WordPress.
Инсталирайте персонализирани блокове Genesis
Влезте в таблото си за управление на WordPress и отидете до Разширения> Добавяне, както е показано по-долу.
След това въведете " Персонализирани блокове Genesis в полето за търсене по ключови думи и кликване сюр ле бутон инсталиране на предприятието
След това, активирате плъгинът, за да започнете
След това нека създадем нов персонализиран блок. За целите на илюстрацията, нека създадем персонализиран призив за действие (CTA), който ще добавим в края на всяка статия, която публикуваме. Най-хубавото е, че можете да използвате повторно блоковете, за да ви спести от създаването на едни и същи блокове отново и отново.
В менюто за администратор на WordPress отидете до Персонализирани блокове > Добавяне на ново, както подчертаваме по-долу.
Това ще ви отведе до следващата страница, където ще намерите всички опции за създаване на персонализиран блок (в нашия случай CTA):
Ето няколко думи, за да обясните какво виждате на екранната снимка по-горе. Започвайки отгоре, имате го.
Основна област за редактиране:
- Строител – Вероятно ще прекарате много време тук в проектирането на вашия персонализиран блок. на Строител ви позволява да добавяте заглавие, полета, охлюв, ключови думи, категория и да визуализирате вашия персонализиран блок. Ще научите как да добавяте полета.
- Редактор на шаблони – След проектирането на вашия персонализиран блок (т.е. добавяне на различни полета), ще трябва да създадете шаблон за блок (прочетете, добавете някакъв код) в редактора на модела. Ще научим повече, когато проектираме CTA.
- Предварителен преглед на редактора – Позволява ви да визуализирате персонализирания блок в редактора на блокове на WordPress.
- Предварителен преглед – Тук можете да прегледате как ще изглежда персонализираният блок на вашия уебсайт.
- EditorField – Ще показва полета в основната област за редактиране на публикация или страница (знаете, точно както виждате редовните си публикации в редактора на WordPress)
- ИнспекторПоле – Показва полето в дясната странична лента под Инспектора на блокове.
Опции за страничната лента
- Слъг – Попълва се автоматично въз основа на заглавието, което давате на вашия персонализиран блок. Това е важно при създаването на блоков модел.
- Икона – Тази опция ви позволява да добавите икона към вашия персонализиран блок.
- категория – Позволява ви да присвоите категория на вашия персонализиран блок. Можете да категоризирате своя персонализиран блок, като използвате една от вградените категории, или можете да създадете изцяло нова категория.
- Ключови думи – Добавете до три свързани ключови думи към вашия персонализиран блок, за да могат хората лесно да го намерят в инструмента за избор на блокове.
- Отворете блокови полета в модален, вместо изобразяване на място – Активирайте, ако искате да отваряте полета в модален. Това е полезно, ако имате персонализиран блок с много полета.
- Публикувайте Видове – Поставете отметка в квадратчетата, за да позволите на вашия персонализиран блок да се показва на всеки тип публикация. Например, ако премахнете отметката от Публикации, блокът няма да се показва в нито една публикация.
Създайте персонализиран блок
Сега, когато имате по-добро разбиране на потребителския интерфейс и какво прави всяка част, нека се захващаме за работа.
В Строител - Строител -, дайте на вашия персонализиран блок подходящо заглавие. Ще изберем CTA за това, както е показано по-долу.
Преди да добавим нови полета, нека добавим икона, ключови думи и изберем категория за персонализирания блок, както е показано по-долу.
Към това нека добавим някои полета към нашия персонализиран блок. За нашия примерен CTA блок ще добавим само три полета в следния ред: изображение, малко текст и поле за файл, което позволява на хората да изтеглят електронна книга.
Прочетете още: 5 WooCommerce плъгини за редактиране на вашите продукти в насипно състояние
Добавяне на блокови полета
В секцията Редакторни полетакликнете върху иконата плюс (+). за да добавите първото поле, както е показано по-долу.
След това нека добавим поле за изображение. В страничната лента задайте Типът на полето е включен Изображение и задайте другите опции. Също така, помислете за плуга, тъй като ще го използваме, когато създаваме блоков модел.
След това добавете текстовите и файловите полета по същия начин.
Преминат към Редактор на шаблони > Маркиране.
Тук ще проектираме как нашият персонализиран блок ще изглежда на вашия уебсайт. Редакторът на модела приема HTML, CSS и полета (които трябва да поставите между 2 квадратни скоби). Ако трябва да използвате PHP език, можете да създадете шаблона с помощта на PHP метод за моделиране
Не се притеснявайте, лесно е.
категория редактора на модела, под раздел за маркиране, добавете следния код:
<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>Докато пишете кода си, ще забележите това редактора на модела Автоматично попълване на полета (напр. {{image-field}}) за вас.
След това отидете на секцията CSS за да добавите прости стилове със следния код:
.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}
.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;
}
Можете да персонализирате тези стилове, както желаете,
Кликнете върху публикувам :
За да видите новия си персонализиран блок в действие, върнете се към таблото си за управление на WordPress и създайте публикация, както обикновено, щракнете върху Плюс (+) за да добавите нов блок и изберете своя нов персонализиран блок, както подчертаваме по-долу.
След това попълнете своя персонализиран блок по желание и публикувайте съобщението си:
Сега, ако проверим нашия нов персонализиран CTA блок в предния край, това виждаме.
Нашият персонализиран CTA е точно там! Моля, не се притеснявайте за нашите дизайнерски възможности – разбира се, в реален сценарий ще отделите малко повече време за персонализиране на вашия блок. Но се надяваме, че сте научили нещо тук.
Други препоръчани ресурси
Също така ви каним да се консултирате с грабене на ресурси по-долу, за да навлезете по-дълбоко в първите стъпки и контролирането на вашия уебсайт и блог.
- 10 партньорски приставки за WordPress за създаване на програма
- Как да добавите няколко колони в WordPress
- Как да добавите няколко колони в WordPress
- Как да използвате различни фон в WordPress
- Elementor: Как да създадете анимация при задържане
Заключение
Изграждането на персонализирани блокове не е лесна задача. Но със WordPress плъгини като Genesis Custom Blocks и Lazy Blocks, между другото, независимо дали сте начинаещ или не, ще успеете да ги създадете. От най-основните до сложни в зависимост от вашите нужди.
Това е всичко за тази статия, която ви показва как да добавите персонализирани шрифтове към уебсайт на WordPress. Каним ви да опитате. Ако имате някакви притеснения или предложения, моля, уведомете ни в рамките на това Връзка.
Ще можете обаче да се консултирате с нас грабене на ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Междувременно, споделете тази статия във вашите различни социални мрежи.
...