Встраивание Gist из GitHub в WordPress: подробный гайд

Как встроить Gist из GitHub в WordPress

Хотите, чтобы ссылка на ваш Gist автоматически превращалась в код? Это похоже на то, как WordPress преобразует ссылку на видео из YouTube в проигрыватель. Давайте разберемся, как это сделать.

Пример встраивания Gist

Как это работает

Этот метод будет работать как в визуальном редакторе, так и в редакторе блоков WordPress. Для начала вам нужно добавить специальный код в файл functions.php вашей темы или создать собственного плагина.

Шаги для встраивания Gist

  1. Откройте файл functions.php вашей темы. Это можно сделать через админку WordPress (Внешний вид -> Редактор тем).

  2. Добавьте следующий код в конец файла:

add_action( 'init', 'register_gist_oembed_provider' );

function register_gist_oembed_provider() {
    wp_embed_register_handler(
        'gist',
        '~https://gist.github.com/[a-z0-9]+/[a-z0-9]+~im',
        'callback_gist_oembed_provider'
    );
}

function callback_gist_oembed_provider( $matches ) {
    return sprintf( '', $matches[0] );
}

Что делает этот код?

  • add_action( 'init', 'register_gist_oembed_provider' );: Это добавляет ваш обработчик Gist при инициализации WordPress.

  • wp_embed_register_handler: Эта функция позволяет WordPress обрабатывать ссылки. В данном случае мы регистрируем "gist" как новый тип встраивания.

  • callback_gist_oembed_provider: Эта функция генерирует HTML-код для встраивания Gist. Она заменяет ссылку на Gist на <script> тег, который загружает ваш код.

Замечания

  • Метод выше не создает запросов к серверу, поэтому нет необходимости в кэшировании результата. Это делает его более быстродействующим.

Теперь, когда вы вставите ссылку на Gist в свой пост, WordPress автоматически преобразует ее в соответствующий код. Это очень удобно для разработки и демонстрации кода.

Применяйте этот метод, чтобы улучшить ваши публикации и сделать их более информативными для читателей!

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *