Недолго думая смастерил я png-файлик, дал ему немудреное имя “фыва.png” (конечно без кавычек), и попросил WordPress загрузить этот файл. WordPress сообщил об успешной загрузке, но вот имя файла изменилось. От него осталось только разрешение — “.png”. То есть, русские буквы испарились в процессе загрузки. Но, при помощи плагина Organizer, файл удалось переименовать обратно. Что, как оказалось, было роковой ошибкой, хотя и не смертельной (сказка имеет счастливый конец).

Файл переименовался, ссылка на картинку, будучи вставленной на страницу, прекрасно работала, все выглядело ОК. Я закрыл страницу, и не заглядывал в блог несколько дней. А заглянув обнаружил, что картинки в прежних записях блога исчезли. Вместо них только alt-текст показывался. После некоторых изысканий обнаружилось, что проблема касается только png-файлов, и, что хотя сами файлы целы-невредимы, но код ссылок на картинки в записях сменились со, скажем, “foo.png” на “fooфыва.png”.

Видимо, Organizer, когда его попросили переименовать файл, нашел в базе все упоминания букв “.png” , и заменил их на “фыва.png”. Не учитывая, что эти буквы встречаются и в именах других файлов. Изменился не только сам файл, не только ссылка на него, но и, во все ссылки на png-файлы, были добавлены четыре лишние русские буквы.

Принялся я править текст во всех испорченных записях и удалять файл “фыва.png”. Не тут-то было! Organizer каким то образом обнаружил упоминание о злополучном файл в новой черновой записи — в этой записи, — и отказался удалять файл. (Полезная функциональность, между прочим, препятствует потере нужных картинок.) Пришлось удалять слово “фыва”. из текста, потом удалять файл, и снова

Похоже, мне нужно было просто переименовать файл обратно в “.png”, предоставив Organizer-у самому подчищать за собой. Но это я понял только в процессе написания заметки, когда уже все сделал вручную. Это и называется: “дурная голова рукам покоя не дает”. В общем, неплохо развлекся :-)

Я конечно сам виноват (а что поделаешь — эксперимент), но тем не менее глюк (не знаю чей: браузера, сервера, WordPress-a), убивший кириллические буквы в имени файла при загрузке, в сочетании с глюком Organizer-а дает прекрасный эффект. На этом, я эксперименты с кириллицей в именах файлов, закончил. До лучших времен. Хотя кириллица тут по большому счету и не при чем…

А Organizer — отличный плагин. Буду и дальше им пользоваться.

Tags: wordpress, organizer, плагин, глюк

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

Сначала нам понадобится картинка для иконки RSS-потока. Возьмем изображение, принятое в качестве стандарта де-факто, отрисованное добрыми людьми, и выложенное для всеобщего использования в форматах PSD и AI.

Слегка модифицируем картинку и получаем следующее: в одном файле два изображения разной цветовой насыщенности (для rollover-эфффекта). Файл сохраняем в формате PNG с прозрачностью, в результате чего, этот файл можно использовать на любом фоне: черном, белом, цветном, пестром — любом. Это благодаря тому, что мы сразу отказались от поддержки устаревших браузеров, не полностью поддерживающих PNG.

Загружаем картинку на сервер и начинаем писать CSS. Главное тут — правильный селектор, который гарантирует, что стилевое правило будет применено к определенной ссылке, без использования классов или id.

a[href="..."]

В селекторе, между кавычками пишем точный полный адрес нашего RSS-потока. Он же — адрес ссылки. Его можно скопировать прямо с страницы в окне браузера.

Копи-пейстить нужно внимательно — достаточно забыть конечный слеш, например, и селектор не заработает.

В моем случае получается следующее:

a[href="http://uggallery.audiopeace.ru/feed/"]

Это селектор для ссылки на RSS-поток “Статьи”. Для выделения ссылки “Комментарии” , нужно лишь заменить адрес.

Дальше все совсем просто. прописываем картинку в качестве фона ссылки, выравниваем ее по правому краю (или по левому, как больше нравится). Задаем padding, чтобы текст ссылки не перекрывал фон и картинка полностью была видна. Для этого же использовано правило line-height. Добавляем margin, который, в общем, не обязателен — зависит от дизайна страницы.

a[href="http://uggallery.audiopeace.ru/feed/"],
a[href="http://uggallery.audiopeace.ru/comments/feed/"] {
    margin-right: 1px; 
    padding: 1px 19px 5px 0; 
    background: url(/wp-content/feedicon16.png) no-repeat 100% 0; 
    line-height: 2; 
}

Ссылка готова. Еще немного кода для создания rollover-эффекта:

a:hover[href="http://uggallery.audiopeace.ru/feed/"],
a:hover[href="http://uggallery.audiopeace.ru/comments/feed/"] {
    background-position: 100% -100px; 
}

Вот и все.

В принципе, то же самое нетрудно реализовать для IE. Но кому он, такой устаревший, нынче нужен? :-) Я не хочу принизить пользователей IE, однако пришла пора осваивать новые технологии дизайна, а для этого нужно ориентироваться на новые браузеры. Благодаря чему, нам не понадобилась модификация кода страницы, что, в случае с WordPress, может потребовать некоторых навыков работы с PHP. А так, это решение годится для любого сайта, независимо от платформы. Элементарно просто