Chcete vytvořit a WordPress Plugin jednoduchý Gutenbergův blok?
Nemáme všichni rádi WordPress? Platforma zaznamenala od svého vzniku obrovský úspěch a vývojáři neustále přidávali nové funkce. Jednou z výjimečných funkcí poslední doby je WordPress Block Editor, kódové označení Gutenberg.
Gutenberg nabízí uživatelům WordPress vzrušující nový způsob, jak publikovat obsah a přizpůsobovat své webové stránky. Jeho použití je neuvěřitelně snadné, což je skvělá zpráva pro začátečníky i vývojáře. Pokud používáte nejnovější verzi WordPressu, již znáte editor bloků a koncept bloků.
Ve výchozím nastavení je editor bloků WordPress dodáván s některými bloky, které vám umožňují zahrnout text, obrázky, citace, zvuk, video, vložení atd. Kromě toho existuje spousta doplňků Gutenberg, které vám umožní rozšířit editor bez porušení pot.
Můžete však mít specifickou potřebu, která vás vyzve k vytvoření vlastních vlastních bloků. V tomto článku vám v několika odstavcích ukážeme, jak vytvořit vlastní Gutenbergovy bloky, aby vyhovovaly vašim specifickým potřebám.
Bez dalších okolků začněme, protože se máme hodně co učit.
Ale dříve, pokud jste nikdy nenainstalovali WordPress objevit Jak nainstalovat 7 kroků WordPress blogu et Jak najít, nainstalovat a aktivovat WordPress téma na svém blogu
Pak zpět k tomu, proč jsme tady.
Co jsou vlastně bloky?
Bloky zacházejí s odstavci, nadpisy, médii a vloženými prvky jako s komponentami, které, když jsou spojeny dohromady, tvoří obsah uložený v databázi WordPress a nahrazují tradiční pojetí textu médii a vloženými vestavěnými krátkými kódy.
V minulosti se uživatelé WordPressu při přidávání obsahu spoléhali na text a krátké kódy. Gutenberg používá bloky. Nový editor umožňuje používat blokové jednotky k vytváření bohatých a flexibilních rozvržení, která se snadno spravují. V současné době můžete použít editor bloků pro příspěvky a stránky, ale existují aktivní plány v budoucnu podporovat úplné úpravy webu.
Díky práci s bloky je tvorba obsahu ve WordPressu docela osvěžující. Mnoho existujících pluginů navíc podporuje nový editor a přichází s připravenými bloky, které usnadňují přidávání obsahu z uvedených pluginů. Editor vám umožňuje přetahovat bloky na stránku, takže můžete rychleji stisknout tlačítko Publikovat.
Stejně jako tvůrce stránek integrovaný přímo do WordPressu.
Pokud jste obeznámeni s tvůrci stránek, jako je Elementor, pravděpodobně znáte koncept vytváření stránek přetažením. Gutenberg je pokusem plně integrovat vytváření webových stránek přetahováním do jádra WordPress.
Pojďme tedy k nejlepší části dnešního článku. Pojďme se naučit, jak vytvořit jednoduchý blok. Můžete to udělat ručně nebo pomocí pluginů jako např Vlastní bloky Genesis (dříve BlockLab), Líné bloky ou ACF. Vytváření vlastních bloků je trochu technické, takže pro účely dnešního článku budeme používat plugin.
Jak vytvořit vlastní blok (pomocí vlastních bloků genesis)
Je snazší jít cestou pluginu, protože vytváření vlastních Gutenbergových bloků od začátku vyžaduje dobrou znalost HTML, CSS, PHP a co je nejdůležitější, JavaScriptu. Budete také muset pochopit React.
V další části budeme používat vlastní bloky Genesis. Jeho bezplatná verze je k dispozici v oficiálním úložišti WordPress, což znamená, že jej můžeme nainstalovat do administračního panelu WordPress.
Nainstalujte vlastní bloky Genesis
Přihlaste se do svého administračního panelu WordPress a přejděte na Rozšíření> Přidat, Jak je ukázáno níže.
Poté zadejte " Vlastní bloky Genesis do pole pro vyhledávání klíčových slov a cvaknutí na tlačítku nainstalovat nyní
Potom, aktivovat plugin, který vám pomůže začít
Dále vytvoříme nový vlastní blok. Pro ilustraci si vytvořte vlastní výzvu k akci (CTA), kterou přidáme na konec každého článku, který publikujeme. Nejlepší na tom je, že bloky můžete znovu použít, abyste si ušetřili vytváření stejných bloků znovu a znovu.
V nabídce administrátora WordPress přejděte na Vlastní bloky > Přidat nový, jak zdůrazňujeme níže.
Tím se dostanete na následující stránku, kde najdete všechny možnosti vytvoření vlastního bloku (v našem případě CTA):
Zde je několik slov pro vysvětlení toho, co vidíte na výše uvedeném snímku obrazovky. Začněte odshora, máte to.
Hlavní editační oblast:
- Stavitel – Zde pravděpodobně strávíte spoustu času navrhováním vlastního bloku. a CONSTRUCTEUR umožňuje přidat název, pole, slimák, klíčová slova, kategorii a náhled vlastního bloku. Naučíte se přidávat pole.
- Editor šablon – Po navržení vlastního bloku (tj. přidání různých polí) budete muset vytvořit šablonu bloku (přečíst, přidat nějaký kód) v editor modelu. Více se dozvíme, když navrhneme CTA.
- Náhled editoru – Umožňuje vám zobrazit náhled vlastního bloku v editoru bloků WordPress.
- Náhled frontendu – Zde si můžete prohlédnout, jak bude vlastní blok vypadat na vašem webu.
- EditorField – Zobrazí pole v hlavní oblasti úprav příspěvku nebo stránky (znáte to, stejně jako vidíte své běžné příspěvky v editoru WordPress)
- InspektorField – Zobrazí pole v pravém postranním panelu pod inspektorem bloků.
Možnosti postranního panelu
- Slimák – Vyplní se automaticky na základě názvu, který svému vlastnímu bloku dáte. To je důležité při vytváření modelu bloku.
- Ikona – Tato možnost vám umožňuje přidat ikonu do vlastního bloku.
- Kategorie – Umožňuje vám přiřadit kategorii vašemu vlastnímu bloku. Svůj vlastní blok můžete kategorizovat pomocí jedné z vestavěných kategorií, nebo můžete vytvořit zcela novou kategorii.
- Klíčová slova – Přidejte do svého vlastního bloku až tři související klíčová slova, aby je lidé mohli snadno najít ve výběru bloku.
- Otevření blokových polí v modálním provedení namísto vykreslení na místě – Povolte, pokud chcete otevírat pole v modálním režimu. To je užitečné, pokud máte vlastní blok s mnoha poli.
- Post Druhy – Zaškrtnutím políček umožníte zobrazení vašeho vlastního bloku u každého typu příspěvku. Pokud například zrušíte zaškrtnutí Příspěvky, blokování se nezobrazí u žádného příspěvku.
Vytvořte vlastní blok
Nyní, když lépe rozumíte uživatelskému rozhraní a tomu, co jednotlivé části dělají, pojďme se pustit do práce.
V Stavitel - Stavitel -, dejte svému vlastnímu bloku vhodný název. Vybereme CTA pro tento, jak je uvedeno níže.
Před přidáním nových polí přidejte ikonu, klíčová slova a vyberte kategorii pro vlastní blok, jak je uvedeno níže.
K tomu přidejte některá pole do našeho vlastního bloku. Pro náš ukázkový blok CTA přidáme pouze tři pole v následujícím pořadí: obrázek, nějaký text a pole souboru, které lidem umožní stáhnout si e-knihu.
Čtěte také: Zásuvné moduly 5 WooCommerce pro hromadné úpravy svých produktů
Přidání blokových polí
V sekci Pole editoruKliknutím na ikonu plus (+). přidejte první pole, jak je znázorněno níže.
Dále přidáme pole obrázku. V postranním panelu nastavte Typ pole zapnutý Obraz a nastavte další možnosti. Zvažte také slimák, jak jej budeme používat při vytváření modelu bloku.
Poté stejným způsobem přidejte textová a souborová pole.
Přepnout na Editor šablon > Označení.
Zde navrhneme, jak bude náš vlastní blok vypadat na vašem webu. Editor modelu přijímá HTML, CSS a pole slugs (které musíte umístit mezi 2 hranaté závorky). Pokud potřebujete použít jazyk PHP, můžete šablonu vytvořit pomocí Metoda PHP modelování
Nebojte se, je to snadné.
Dans editor modelu, pod záložka označení, přidejte následující kód:
<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>Při psaní kódu si toho všimnete editor modelu Automaticky doplňujte pole slimáků (např. {{image-field}}) za vás.
Poté přejděte do sekce CSS přidat jednoduché styly pomocí následujícího kódu:
.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;
}
Tyto styly si můžete přizpůsobit, jak chcete,
Klepněte na tlačítko publikovat :
Chcete-li vidět svůj nový vlastní blok v akci, vraťte se na svůj administrační panel WordPress a vytvořte příspěvek jako obvykle, klikněte na Více (+) přidat nový blok a vybrat svůj nový vlastní blok, jak zdůrazňujeme níže.
Dále vyplňte svůj vlastní blok podle potřeby a odešlete zprávu:
Nyní, když zkontrolujeme náš nový vlastní blok CTA na front-endu, vidíme toto.
Naše vlastní CTA je tady! Nebojte se prosím o naše možnosti návrhu – v reálném scénáři samozřejmě strávíte trochu více času přizpůsobením svého bloku. Ale doufáme, že jste se zde něco naučili.
Další doporučené zdroje
Zveme vás také ke konzultaci ressources níže, abyste získali větší vlastnictví a kontrolu nad svými webovými stránkami a blogem.
- 10 affiliate pluginů WordPress pro vytvoření programu
- Jak přidat více sloupců do WordPress
- Jak přidat více sloupců do WordPress
- Za použití různých pozadí WordPress
- Elementor: Jak vytvořit animaci při najetí myší
Proč investovat do čističky vzduchu?
Sestavení vlastních bloků není snadný úkol. Ale s WordPress pluginy jako jsou mimo jiné Genesis Custom Blocks a Lazy Blocks, ať už jste začátečník nebo ne, podaří se vám je vytvořit. Od těch nejzákladnějších po komplexní v závislosti na vašich potřebách.
To je vše pro tento článek, který vám ukáže, jak přidat vlastní písma na web WordPress. Zveme vás k vyzkoušení. Máte-li jakékoli obavy nebo návrhy, dejte nám vědět commentaires.
Budete však také moci konzultovat naše ressources, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
