WordPress + Markdown = ❤

Свои посты пишу с использованием Markdown: использовать тупой WYSIWYG несолидно, а ковыряться вручную с HTML-тегами утомительно.
Соответствующий плагин для WordPress называется «Markdown On Site Improved». В админку ничего нового он не добавляет, поэтому, например, вставить картинки в пост становится муторной задачей.

При вставке картинок хочется ссылки на них и на их превью размещать в конце поста отдельной секцией. Markdown позволяет такое, чтобы избавиться от мешанины в тексте и оставить его более человекочитаемым.
Когда мы добавляем картинку в текст стандартной кнопкой «Добавить медиафайл», добавляется HTML-код вида <a href="xxx"><img src="yyy"/></a>, где xxx — адрес оригинальной картинки, а yyy — адрес превьюшки.
Наша же задача — сконвертировать вышеуказанный код в нечто вроде:

[![figure][photo1-preview]][photo1]

[photo1]: xxx
[photo1-preview]: yyy

Слово «figure» здесь чисто произвольное, оно отправится в атрибут alt тега img. Я использую его для поиска и стилизации картинок средствами CSS.

Конечно, можно каждый раз при написании ручками перегонять один синтаксис в другой. Но путь истинного программиста — потратить десять минут, чтобы сэкономить в будущем часы. Поручим конвертацию машине, придумываем следующий скрипт:

function fixImages() {
    var i = 1;
    var links = [];
    var replaced = $$("#content")[0].value.replace(
        /<a href="(.+)"><img src="(.+)" alt="" width="\d+" height="\d+" class="alignnone size-\w+ wp-image-\d+" \/><\/a>/g, 
        function(source, original, preview) {
            var result = '[![figure][photo' + i + '-preview]][photo' + i + ']';
            links.push('[photo' + i + ']: ' + original + '\n[photo' + i + '-preview]: ' + preview);
            i += 1;
            return result;
        }
    );
    $$("#content")[0].value = replaced + '\n' + links.join('\n');
}
fixImages();

Будучи выполненным в консоли браузера (в Chrome открывается по F12), он найдёт все места внедрения картинок в текстовом поле и заменит их на Markdown-аналоги.

Кстати, как гласит страница плагина, сам плагин устарел и более не поддерживается разработчиком, который отвернулся от него в пользу Jetpack-версии.
Насколько я успел разобраться, Jetpack — это сумасшедше раздутый комбайн для как бы улучшения WordPress путём интеграции его с кучей современных сервисов вроде фото- и видеохостингов, соцсетей, рекламных площадок, CDN’ов и т.д.
Мне не нравится подобная идея. Ставить ради пары плагинов очередное bloatware, которое будет жить своей непонятной жизнью на хостинге? Спасибо, будем пользоваться чем-то более гранулярным.

Добавить комментарий

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

Поставьте галочки правильно (как бы защита от спама):

Я бот

Я не бот