Бог в мелочах, или Как изменить ширину визуального редактора WordPress

Ну что же, господа и дамы… Не знаю, может, кому-то и помогает периодический уход в оффлайн из блогинга — якобы можно вернуться с нечеловеческим приливом сил и кучей идей, но это не про меня, увы. Мегаидеи обошли мой пушистый мозг стороной, потому продолжим по наезженной колее.

Итак, поскольку на компьютере, который я раздобыла во временное пользование (и уже успела: сломать, разобрать системник, собрать системник, убедиться, что все заработало, отформатировать диск, три раза попытаться установить ХР — да, мне с первого раза белым по синему написали, что установочный диск поврежден, но я ж упрямая, затем умудриться установить семерку на комп, где в два раза меньше оперативки, чем семерке нужно по минимуму для работы — да-да, я не сидела сложа лапы), ужасно неудобная и непривычная клавиатура, то пост будет короткий. Но кому-то полезный, надеюсь.

Речь пойдет о том, как изменить ширину окна визуального редактора WordPress. Собственно, зачем это нужно, спросите вы, и по-своему будете правы. Рассказываю.

Зачем изменять ширину визуального редактора WordPress

Когда я пишу новую статью прямо в редакторе (или вставляю ее из Word — неважно), особенно если в ней много картинок, заголовков и т.д., то вид статьи в редакторе может очень здорово отличаться от конечного результата. Все потому, что окно редактора и область контента в шаблоне имеют разную ширину.

То есть при редактировании записи приходится постоянно просматривать, как она будет выглядеть на сайте, чтобы избежать некрасивых обтеканий картинок текстом, съехавших списков и заголовков, пустых мест… А это все-таки ужасно неудобно. Даже использование Inline Preview не спасает ситуацию.

Вот наглядная демонстрация (скрин не мой) — здесь редактор в полтора раза шире, чем собственно область контента на сайте — ну неудобно же и не наглядно, правильно?

То есть идея проста: очень классно было бы иметь окно редактора той же ширины, что и статьи в уже опубликованном виде, чтобы сразу при редактировании можно было оценить конечный результат.

Решение

А решение просто до безобразия — пять строк кода, не считая комментариев к нему. Но прежде всего вы должны узнать, а какая ширина окна редактора вам нужна. То есть нужно просто определить, сколько пикселей в ширину занимает статья на сайте в уже опубликованном виде.

Для этого достаточно открыть любую статью у себя на блоге, и пользуясь то ли FireBug, то ли встроенным инструментом «Исследовать элемент» (речь про Огнелиса, но и в других браузерах есть инструменты-аналоги), посмотреть в Инспекторе ее ширину. Ну вот так примерно:

Теперь, определившись с нужной шириной, открываем на редактирование файл functions.php (бэкап — ваше все, помните об этом 🙂 ) и перед ?> вставляем нижеследующий код:

// --------------------------------------------------------------------------
// Start Modify Editor Width
// --------------------------------------------------------------------------
    function fb_change_mce_buttons( $initArray ) {
    $initArray['width'] = '662px';
    return $initArray;
    }
    add_filter('tiny_mce_before_init', 'fb_change_mce_buttons');
// --------------------------------------------------------------------------
// End Modify Editor Width
// --------------------------------------------------------------------------

Обратите внимание на пятую строку: там и нужно заменить мое значение «662 px» на свою, определенную чуть ранее, ширину.

Ну вот и все. И вот скрин результата:

Наглядно, удобно, экономит время при редактировании. В общем, мелочь, конечно, но бог в мелочах. Правда, и дьявол в деталях :). На том и распрощаемся, друзья мои.

P.S. Ну вот вроде бы уже и привыкла к клавиатуре, жаль, написать больше пока не о чем :D. Но это очень кратковременное состояние…

P.P.S. Кто на первой фотографии?