Блог о WordPress от Тараса

Обещали WordPress 2.4 в январе, а получим WordPress 2.5 в конце марта. Придётся ждать, хотя пока не сильно понятно чего именно.

Ах, вспомнил. Одной из главных “фич” очередного релиза объявлена переделанная Admin Panel, где вроде как всё стало “лучше, удобнее, просто сказка”… Ну не знаю, не знаю, любой желающий может протестировать рабочую бета-версию админки на предмет вкусностей, для тех же, кому лень, сделаю небольшой обзорчик. Он, конечно, не тянет на эпичность, потому что, по словам разработчиков, пока что готово только 20-30% от конечного функционала админ панели, но общее представление сложить можно.

Список нововведений в администраторской панели Wordpress 2.5

1. Новая цветовая гамма

Первое что бросается в глаза - новые цвета: “Прощай надоевший синий, да здравствуют более благородный голубой и агрессивный оранжевый!” Ну что тут скажешь? Довольно мило, не напрягает, но учитывая, что все кому было нужно уже сто лет назад переделали свою админку, то одной лишь обёрткой нас - пользователей - не купить.

2. Панель Right Now и стартовая страница


Похоже, разработчики решили сменить акцент на стартовой странице с новостей (которые редко кто читает, но зато все от них бесятся) на действительно актуальную для блоггера информацию, а так же предоставить быстрый доступ к наиболее используемым функциям.
Статистика выведена по постам/страницам и рубрикам, так же указано количество задействованных виджетов.
В саму же панельку впихнули кнопки для быстрого перехода к созданию страницы или поста, ну и сразу можно перейти к смене темы (ну вот это уже конечно несколько сомнительная возможность, чтобы выводить её в быстрый доступ).
Ниже под “Right Now” панелью расположили списки последних комментариев, входящих ссылок и последних постов. В общем, из узенького и незаметного блока в нынешнем Dashboard, эти списки развернулись во всём своём величии.

Что же мы потеряли по сравнению с тем, что есть сейчас на стартовой странице?
Ссылку на редактирование профиля (зачем оно там вообще, если в правом верхнем углу всегда есть линк на “My profile”), ссылку на переход в управление блогроллом (ответьте, только честно, часто вы на неё нажимали? да и вообще часто ли редактируете свой blogroll?) и конечно же 70% объёма страницы с новостями о WordPress (дружно похлопаем в ладоши, теперь этот блок в самом низу и не так мозолит глаза).

Больше всего конечно интригуют кнопки “Edit” рядом с каждым блоком, но пока что доступа к редактированию не дали (во всяком случае, в тестовом блоге), если можно будет настроить отображение/скрытие каждого из них, то мы получим “админку мечты”.

3. “Пузырь” в комментариях.

Вы, должно быть, заметили “комиксовый бабл” над ссылкой “Comments” c цифрой 0? Я сперва подумал, что там отображается количество оставленных пользователями комментариев, но не тут то было - после небольшого изучения выяснилось, что “пузырь” показывает количество комментариев, ожидающих модерации. И, знаете, мне очень нравится эта ненавязчивая напоминалка, которая сразу бросается в глаза, в отличие от того, как это реализовано сейчас.
У меня это вообще постоянная проблема - Акисмет помечает как спам некоторые нормальные комментарии, я их оттуда, при помощи Spam Viewer, вытаскиваю, а вот отмодерировать порой забываю, и висят они пару дней неприкаянные.

4. Создание и редактирования постов

Тут всё ещё явно сыро и недоделано, во всяком случае мне показалось несколько неудобным, что совсем все разделы выстроены в список, друг за другом, но думаю это временно.
Зато понравилась работа с тэгами, которые теперь представляют собой не просто слова через запятую, а действительно интерактивные элементы, что упрощает и ускоряет работу с ними. Но вот сможет ли это заменить Simple Tags - сложный вопрос, особенно, если не будет возможности выбирать из списка уже использованных тэгов.
Визуальным редактором я не пользуюсь, но выглядит он не в пример приятнее, хотя и не работает пока что вообще) А вот HTML-редактор посмотреть нельзя, а жаль.

Со страницами всё почти то же самое, только в другом порядке - видимо по убыванию важности пунктов, хотя я не особо это прочувствовал. Так же в раздел “Write” поместили добавление ссылок в блогролл.

В разделе “Manage” особо изменений я не заметил. Поэтому перейду к тому, что мне очень понравилось.

5. Управление виджетами


Во-первых, добавили возможность фильтровать виджеты, чтобы скрыть уже использованные.
Во-вторых, теперь можно добавлять любое количество одинаковых плагинов, если они сами это поддерживают, просто нажав “Add”, например, RSS-виджет.
В-третьих, наконец-то сделали действительно удобное и функциональное редактирование виджетов, потому как существующий ныне вариант, меня несколько бесит, а тут всё наглядно и можно просматривать одновременно настройки всех добавленных в сайдбар виджетов. В общем зачОт.

Ну вот собственно и всё, что нового мне удалось разглядеть в довольно сырой, но между тем многообещающей бетке админ-панели.

Какие выводы и ощущения?
Ждать определенно стоит, а так же стоит почаще заходить и проверять - не добавилось ли на этой тестовой страничке что-нибудь нового? Пока что нельзя оценить заявленную возможность настраивать Dashboard widget-style, т.е. подключать сторонние виджеты и самому выбирать, что и как показывать на стартовой странице, да и вообще, пока что админка выглядит скорее как “рыба”, которую надо хорошо обработать напильником, подкрасить там и тут CSS-ками и навешать побольше AJAX-интерактивности, ну а тогда уж “Wordpress ещё всем покажет!”

Приехал в офис и меня обрадовали - какие-то проблемы с почтой.
Полез читать логи MDaemon’а - уходит почта 100%, а вот забирается - шиш. Хостимся у masterhost’а и почту забираем с их сервака по pop.masterhost.ru, но в логах почтового-сервера чёрном по белому - “Winsock Error 10060 - Timeout”, хотя пинги чётко уходят без потерь.

Решил позвонить в тех.поддержку, где автоответчик сообщил - “бла-бла-бла, все заняты, в работе некоторых ресурсов возможны неполадки, ждите - всё починим”. Вот и сижу - жду.

И что самое интересное, так это что сайты на вирт.хостингах (например, мой блог) видимо работают, а тот же сайт первого канала - нет.

Если хочется присоединиться к общественным дебатам и матюганиям в сторону мастерхоста, то поршу на Сёрч, там уже 27 страниц накатали.

Эх, подняли бы главное почту, а то поди объясни целому офису - что такое хостер и почему НАША почта находится у НЕГО)

И, раз уж зашла такая тема, то кто каким хостингом пользуется и что посоветует? А то есть кое-какие нарекания к мастерхосту и подумываю потестить другую площадку.

Давненько я не выкладывал никаких плагинов, хотя испробовать успел довольно много.

Так о чём это я? Ах да, наверное найдётся несколько человек, которые скачали и установили мою версию Ajax Comment, но не это главное, а то, что у меня в блоге с определенной периодичностью, при отправке комментария, выдавалась ошибка о “Время истекло. Сервер не ответил вовремя.”.

Полез я искать новую версию этого плагина и был обрадован сообщением о “Заплатите $1″. И не денег мне было жалко, чтобы ещё пару месяцев назад его купить, просто возможность оплаты была только через PayPal, который было лень регистрировать.

Тут на днях как раз прошёл регистрацию и купил-таки новую (2.09) версию и очень она мне понравилась, перечислю фичи от автора, а самое интересное выделю красным:

• Не надо ничего изменять в коде шаблонов. Работает сразу после активации.
• Применяет WordPress Plugin API, поэтому отлично работает с другими плагинами.
• Проверка капч и валидация форм происходит на стороне сервера, без обновления страницы.
• Сообщения об ошибке появляются в красном прямоугольнике над формой комментариев.
• Картинка отправки комментария отлично смотрится с любым дизайном.
• В архиве содержится подробная документация для любителей покопаться в исходниках.
• Работает с комментариями на любом языке, благодаря поддержки локализаций и unicode-символов.
• jQuery fade-эффект, делающий читателей счастливее.
• 60 сек таймайт на сервере не даст подвиснуть читателям.
• Протестирован на текущих версиях Firefox, Internet Explorer 6/7, Opera, Netscape, и Safari.

Плагин теперь отлично работает с WP AJAX Edit Comments, который раньше приходилось отключать. Мне даже не пришлось вносить никаких изменений, чтобы плагин начал адекватно работать с капчей, так что всё что я сделал - это перевёл пару строчек ошибок на русский.

И главное, на мой взгляд, что теперь вместо ява-скрипт библиотеки Prototype+Scriptaculous используется более легкий (по размерам) jQuery.

Ну а вот вам и ссылочка на сам плагин Ajax-Comments 2.09 (90 kb), думаю автор не будет сильно плакать, что я его раздаю на халяву, ведь “какой русский не любит халявы”, к тому же GNU GPL v2 позволяет мне это делать, я же внёс изменения в исходные коды)))

Сразу оговорюсь - плагин тестировал мало, поэтому прошу в комментах хорошенько его “помучить” и оставить отзывы по работе.

ПыЦ: Плагин работает с WP 2.1 - 2.3.x и WP MU.

За последнее время сразу несколько человек поинтересовались у меня, а не в курсе ли я, как делать выпадающие меню в WordPress? Я честно отвечал “Нет”, потому что с содроганием вспоминал, как когда-то, на заре изучения web-кодинга, пытался сделать более-менее нормальное выпадающее меню. Триста раз проклял я тогда и java-script, и html, и, конечно же, все браузеры.

Но раз люди спрашивают, то появляется жгучее желание им помочь, вот и полез раскапывать, как дела обстоят сейчас и что новенького умные дядьки намутили, и даже, знаете ли, нашёл. Причём нашёл и очень сильно удивился тому, как это было сделано - вот что значит мало практиковать вёрстку и работать с CSS, потому что, по сути, для того, чтобы намудрить ОТЛИЧНОЕ выпадающее меню, достаточно знать:
а) как делать ненумерованные списки в html (<ul></ul>)
б) уметь копипастить файл-стилей

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

Шаг 1. Готовим список пунктов меню руками

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

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

//Внешний список
<ul class="nav" id="nav-one">
<li>
//Текст ссылки первого элемента
<a href="#item1">item 1</a>
//Внутренний список для первого элемента
<ul>
//Первый под-элемент
  <li><a href="#item1.1">item 1.1</a></li>
//Второй под-элемент
    <li><a href="#item1.2">item 1.2</a></li>
    <li><a href="#item1.3">item 1.3</a></li>
    <li><a href="#item1.4">item 1.4</a></li>
</ul>
</li>
<li>
//Текст ссылки второго элемента
<a href="#item2">item 2</a>
//Внутренний список для второго элемента
    <ul>....</ul>
</li>
//Ну и так далее
</ul>

Всё просто и, я думаю, дополнительные разъяснения не требуются, главное не забыть указать у внешнего меню class=”nav” и id=”nav-one”.

Шаг 2. Стилизуем списки

Сам файл стилей не слишком большой, но между тем целиком код в блоге я приводить не хочу, поэтому советую для дальнейшей беседы скачать файл стилей, а я буду просто рассказывать про принцип работы, ссылаясь на него.
Берём файл sfstyle.css и открываем блокнотом или любым другим редактором (если кому интересно, то я использую Zend Development Environment или, проще говоря, ZDE).
Ну что же, приступим.

Первым делом уберём у всевозможных списков все отступы и прочие списочные атрибуты, это делается в .nav, .nav ul. После чего выводим их в строчку, а не как обычно, за это у нас отвечает float:left; в .nav li. Сразу обращу внимание на то, что мы везде применяем относительное (relative) позиционирование (position), чтобы элементы появлялись в строго заданных им местах, относительно родительских элементов.

Теперь нам необходимо спрятать внутренние списки с глаз долой и отображать их только при наведении. Тут мне попалось два способа:
1) Найденый на A List Apart - для вложенных ul элементов устанавливаем атрибут display:none;, а при наведении (li :hover ul) возвращаем в нормальное значение block.
2) Попавшийся на одном Ajax-ориентированном сайте - прятать список за экран (top:-999em;), а потом устанавливать позицию при наведении.

Так как я взял CSS из второго варианта (почему станет ясно позже), то с первым предлагаю поэкспериментировать самостоятельно.

В принципе на этом можно было бы и закончить, если бы не всеми любимый Internet Explorer (будь он неладен), который плохо обрабатывает псевдо-класс :hover, поэтому переходим к следующему шагу.

Шаг 3. Немного java-script и jQuery

Как это не прискорбно, но java-script придётся применять в любом случае, но я имею вам предложить целых два варианта (ну на самом деле их, наверное, больше), а вы уж сами решайте каким воспользоваться. Объяснять как именно ЭТО работает, не буду, скажу только, что всё сводится к прицеплению обработчкиков при наведении для всех li внешнего списка.
Способ 1 - Чистый java-script

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav-one");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() { this.className+=" sfHover";}
node.onmouseout=function() {
            this.className=this.className.replace(" sfHover", "");
  }
}}}}
window.onload=startList;

Способ 2 - C применением jQuery

$(document).ready(function(){
 if (document.all) {$("#nav-two li").hoverClass("sfHover");});
$.fn.hoverClass = function(c) {
  return this.each(function(){
    $(this).hover(
      function() { $(this).addClass(c);  },
      function() { $(this).removeClass(c); }
    );
  });
};

Кому как, а мне визуально больше нравится второй вариант, к сожалению, тут есть одно “НО” - необходимость подключения библиотеки jQuery. Не скажу, что это огромный минус, потому что: а) она идёт в комплекте с WordPress, так что ничего дополнительно скачивать не придётся; б) возможно какой-то из установленных у вас плагинов уже ею пользуется. Сама библиотека весит 20-30кб, поэтому особо не обременит пользователя, к тому же грузится она только первый раз, а потом подгружается из кэша. И не стоит забывать, что она позволяет делать многие интересные вещи, о чём ниже, в пункте 4.

Сейчас я объясню как её подключить:
1. Проверьте, не подключена ли она уже каким-нибудь плагином, для этого откройте любой пост в своём блоге и в html коде поищите слово “jQuery”.
2. Если его нет, то лезем в файл темы header.php и где-нибудь перед </head> вставьте
<script type=”text/javascript” src=”http://ваш_домен/wp-includes/js/jquery/jquery.js”></script>

Кстати, если кто не знает, то приведенные выше java-script листинги нужно тоже вставить в хэдер до </head>, обрамив с обоих сторон <script type=”text/javascript”>…</script>

Шаг 4. jQuery-бонус - плавное меню

Раз уж мы вынудили пользователя скачать лишних целых 25кб, то надо его за это как-то наградить:)
Как вы смотрите на то, чтобы сделать появление меню плавным? Думаете сложно? А как вам вот такой код?

$(document).ready(function(){
$("#nav-two li ul").fadeOut("fast");
$("#nav-two li").hover(
  function(){ $("ul", this).fadeIn("fast"); },
  function(){ $("ul", this).fadeOut("fast"); }
);});

Помоему просто отлично, а главное понятно) Добавлю лишь, что вместо “fast” можно добавить “slow” или любое число в миллисекундах.

Тем, кто всё это прочёл думаю стоит посетить эту страничку с примером, где теперь должно быть всё понятно, а если остались какие-то вопросы или я что-то не точно написал - прошу в комменты.

Теперь думаю при помощи этой методики не составит труда делать различные меню - при помощи всяких там wp_list_categories и иже с ним.

ПыЦ: Только не спрашивайте меня, почему SuckerFish. Как я понимаю - это означает рыбу прилипалу или я ошибаюсь? Есть среди читателей знатоки ангельского языка?

Хм… Как говорит один не безызвестный дядечка, буду краток. И вовсе не потому, что сказать нечего, а потому что Новый год уже на носу, а ведь столько всего ещё нужно успеть сделать.

Что же, когда то я, пожалуй, верил в Деда Мороза и ждал ночи с 31 на первое с трепетом и воодушевлением, теперь же что-то с каждым годом всё меньше и меньше ощущение праздника, и веселье всё больше создаётся искусственно.
Так и подмывает написать “Старею, наверное…”, но не дождётесь) Просто НГ перестал быть чем то особенным, теперь он не более чем очередной check-point, чтобы подвести итоги, оглянуться назад, кивнуть себе, улыбнуться и шагнуть в следующий успешный день.

Да, многое сделано за этот год, но всегда (у меня, во всяком случае) остаётся ещё больше не сделанного, хоть и запланированного. Но я не унываю, любой путь знаний - сложен и тернист, поэтому главное, что нужно - это целеустремленность… в борьбе с ленью)

Дорогие мои читатели, для меня уже то, что вас больше ста человек, является огромной радостью, показывающей, что я пишу что-то интересное не только себе, но и полезное другим. А желание приносить другим пользу (порой даже во вред своим интересам) у меня что-то никак не искоренится.

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

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

Желаю всем в будущем году свершения всех планов, роста всех показателей, каких только захотите, а главное, чтобы на всё это хватило здоровья. И побольше проводите времени в офф-лайн, там много всего интересного.

C Наступающей на нас мохнатой крысячей лапкой. Пусть крыска будет в этом году к вам благосклонна.

По ссылке небольшой комикс с котиками и крысками.