Shortcody Umarły w 2026: Jak Migrować do Bloków Gutenberg

W 2010 roku [shortcody] były rewolucyjne. Pozwalały użytkownikom dodawać skomplikowaną funkcjonalność (formularze, przyciski, kolumny) za pomocą prostego tagu. W 2026 roku shortcody to Koszmar User Experience.

• Są niewidoczne w edytorze (widzisz tylko kod).
• Są podatne na błędy składniowe (literówki w atrybutach).
• Nie wspierają nowoczesnych paradygmatów “Full Site Editing” (FSE).

Jeśli nadal tworzysz nowe shortcody dzisiaj, przestań. Czas budować Bloki.

Dlaczego Bloki Wygrywają (Czynnik “WYSIWYG”)

Wyobraź sobie przycisk “Call to Action”.

Shortcode: [cta link="https://google.com" color="blue"]Kliknij Mnie[/cta] Użytkownik musi zgadywać, jak wygląda “blue”.

Blok: Użytkownik widzi dosłownie niebieski przycisk. klika go, by zmienić tekst. Przeciąga próbnik kolorów, by zmienić niebieski na lazurowy. To Co Widzisz Jest Tym Co Dostajesz.

Strategia Migracji 1: “Leniwy” Blok (ServerSideRender)

Nie musisz uczyć się Reacta, by zbudować blok. Możesz owinąć swoją istniejącą logikę PHP shortcodu w blok używając ServerSideRender.

Krok 1: zarejestruj block.json

{
  "name": "wppoland/my-shortcode-block",
  "title": "Legacy Shortcode Block",
  "render": "file:./render.php"
}

Krok 2: render.php

<?php
// Po prostu wywołaj swoją istniejącą funkcję shortcodu!
echo do_shortcode( '[my_legacy_shortcode attributes...]' );
?>

To wprowadza Cię do Edytora Bloków (Gutenberg) bez przepisywania bazy kodu.

Strategia Migracji 2: Natywny Blok React

Aby naprawdę odblokować moc WordPressa, przepisz UI w React.

edit.js (Interfejs Edytora):

export default function Edit({ attributes, setAttributes }) {
    return (
        <div { ...useBlockProps() }>
            <RichText
                tagName="button"
                value={ attributes.text }
                onChange={ ( text ) => setAttributes( { text } ) }
                style={ { backgroundColor: attributes.color } }
            />
        </div>
    );
}

save.js (HTML Frontendu):

export default function Save({ attributes }) {
    return (
        <button style={ { backgroundColor: attributes.color } }>
            { attributes.text }
        </button>
    );
}

To zapisuje statyczny HTML do bazy danych. 0% narzutu PHP na frontendzie. Strona ładuje się szybciej, ponieważ WordPress nie musi parsować [shortcodów] przy każdym ładowaniu strony.

Obsługa Treści Legacy

Co z 5 000 wpisów, które już mają w sobie [shortcody]?

1. Zostaw je w spokoju: Nadal będą działać. WordPress wspiera shortcody legalnie dla kompatybilności wstecznej.
2. Konwertuj Programowo: Użyj “Transformacji Bloków”. Możesz zdefiniować regułę, która mówi Gutenbergowi: “Gdy widzisz [cta], zamień to na blok wppoland/cta.”

transforms: {
    from: [
        {
            type: 'shortcode',
            tag: 'cta',
            attributes: {
                link: {
                    type: 'string',
                    shortcode: ( attributes ) => attributes.named.link,
                },
            },
        },
    ],
},

Podsumowanie

Shortcody służyły nam dobrze przez 15 lat. Ale sieć jest wizualna.

• Migruj: Użyj ServerSideRender dla szybkich zwycięstw.
• Przepisz: specyficzne elementy UI w React dla szybkości.
• Wycofaj: Nie buduj nowych shortcodów.

Twoi użytkownicy zasługują na lepsze doświadczenie edycji.