Скрипт для вёрстки статей из Google Docs в чистый HTML c картинками для WordPress

• Описание
• Документация

В Google Docs экспорт в HTML через меню «Файл» → «Сохранить как» → «Веб-страница (HTML, ZIP-архив)» — вообще не работает. Точнее работает, но через жопу. Результат импорта практически использовать нельзя. На выходе будет архив, в котором кривой html-файл с десятичным кодом в unicode для всего текста, куча мусорных тегов <span> с инлайн-атрибутами и рандомными CSS-классами, странные общие глобальные стили, и, что самое удивительное, хронологический порядок картинок и их именование будет совершенно случайным.

В июле 2024 в Google Docs добавили экспорт в Markdown и в md-формате хронология и имена картинок — правильные! При этом картинки собираются в этом же файле в base64, что использовать сложно и рождает череду промежуточных этапов при простой казалось бы задаче «сверстать пост в блог на WordPress».

С ростом редакции и блогов захотелось нормальный инструмент для простого экспорта максимально чистого HTML и удобной работы с графикой в документе.

Все доступные найденные инструменты — не работали. Надежда была только на прямую конвертацию средствами Apps Script. Вариант через проект в Apps Script где-то внутри уже Google Drive меня не устраивал: создание, его настройка, раздача прав доступа под каждый документ на исполнение и сложности с правами на расшаренные документы напугали объёмом и передачей знаний по проекту. Инструкцию из двух десятков шагов не каждый пройдёт до финала.

Найден был более простой вариант: запустить отдельный сценарий в Apps Script на одном конкретном документе. Этот сценарий никуда ничего не передаёт и работает только с аккаунтом активного юзера. Минусы сценария: каждый запуск нужно проходить через череду модалок разрешений самого гугла.

Чего хотелось от скрипта и почему ¶

Чистая и семантичная вёрстка ¶

Если документ в самом Google Docs разметили правильно (что редакторы делают чаще всего), то его экспорт в HTML будет чистым по структуре: заголовки всех уровней будут заголовками, абзацы — абзацами, нумерованные и маркированные списки — списками. Если ссылка внешняя — взять и сразу добавить ей атрибут rel="nofollow". Ну и поисковые роботы всё это уважают, что для контент-проектов важно.

Работа с графикой и работа с медиафайлами в WordPress ¶

Как процесс вёрстки поста для WordPress устроен в целом упрощённо без деталей про «а как» для каждого этапа: отдельно верстается разметка, отдельно загружается пачка файлов для этого поста и используется в разметке.

И вот эти промежуточные шаги, особенно если в посте картинок так с десятка два, чтобы каждую правильно именовать, например, добавив префикс после имени, которое повторяет slug поста, занимали кучу фокуса и времени. И это всё с учётом в разметке того, что WordPress будет хранить файлы по пути типа /wp-content/uploads/2025/08/

Ожидаемый результат: при запуске скрипта задаётся базовый набор параметров среди которых slug поста, например, ya-metrika. Алгоритм перебора картинок возьмёт его, добавит суффикс с порядковым номером типа ya-metrika_24 и сложит все картинки в архив.

Из архива все картинки загружаются в медиа библиотеку при создании нового поста в WordPress и все пути правильно работают.

Результат работы в едином артефакте ¶

На выходе — один zip-архив с файлом разметки и всеми картинками из документа с правильным именованием. И поскольку мы в пределах Google Docs и Apps Script, то результат выполнения можно отправить на почту, с которой и ведётся работа с документом.

Автоматическое оглавление документа ¶

Скорее бонусный, но приятный пункт. В самих Google Docs в панели слева есть структура документа. Почему бы её не вытащить также в кастомную разметку? Вместе с этой задачей добавляется новая задача: всем заголовкам надо добавить id, а чтобы его добавить нужна какая-то штука для транслитерации в slug-формат, чтобы из текста заголовка «Как создать и настроить счетчик посещений» получился id kak-sozdat-i-nastroit-schetchik-poseshchenij. Приставкой можно ещё id поста добавить, например, для уникальности.

Кому всё это надо ¶

Контент-менеджерам, редакциям, верстальщикам — упростить рутину, автоматизировать самое нудное, ускорить процесс вёрстки и выпуска контента.

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

1. Открыть документ в Google Docs;
2. В меню «Расширения» → выбрать пункт «Apps Script»:
3. В открывшийся редактор скопировать всё содержимое скрипта и настроить параметры;
4. Нажать на иконку сохранения и после → «Выполнить»:
5. Пройти все этапы подтверждения;
6. Получить письмо на почту с ZIP-архивом.

Смотрите документацию с пошаговой инструкций прохождения этапа подтверждения.

Реальные результаты ¶

Этот скрипт — настоящая находка для контент-команд, редакторов и верстальщиков! Он значительно ускоряет процесс подготовки статей, автоматизируя рутинные задачи и минимизируя ошибки при переносе текста из Google Docs в HTML.

Этот инструмент серьезно упрощает жизнь контент-специалистам. Если раньше верстка статьи занимала 20-30 минут, то теперь — буквально пару кликов. Рекомендую всем, кто работает с большими объемами текстов и хочет оптимизировать процесс публикации.

Фичи и заморочки ¶