Redisign. Переделал тему WordPress.

Владимир | | WordPress, Разное.

Старый дизайн (миниатюра)

Наконец-то, доделал новую тему для этого блога!

Главные изменения, коснулись сайдбара. Теперь он стал практически в два раза шире, что позволило добавить в него несколько новых блоков (например, «самое читаемое»).

Кроме того, теперь можно создавать цепочки комментариев (похожий принцип используют службы вроде habrahabr.ru). На мой взгляд, это гораздо удобнее стандартного способа добавления комментариев.

В общем, надеюсь, новый дизайн сделает чтение блога приятнее.

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

P.S. На скриншоте показан предыдущий вариант дизайна (щелкните по картинке чтобы увеличить).

P.P.S. Также хочется выразить благодарность Максиму за сборку и Slaff’у за руководство. А также отдельное спасибо Scratch’у за совет о доступности форм.

Интересно почитать

Какие стрижки сейчас в моде

  • Хорошо, да. Нужно будет у себя тоже сделать нормальную форму 🙂
    Кстати, куда-то OneFace отвалился (говорит, movie not loaded). Но это, я так понимаю, на сервере проблемы… 🙁

    Насчет цепочки комментариев — их нужно смотреть на вложенности в 20 штук, когда начнут вылазить проблемы.
    Хотя да, «ветки обсуждения» — это классическая схема, и не только Хабр их использует (на самом деле, это применялось еще в тыща девятьсот надцатом году, в USENET конференциях (когда такие вот обсуждения вообще появились).

    • Просто тест комментария.
      2Владимир: Если все пройдет нормально (или даже пройдет ненормально), всю ветку вложенных комментариев можно удалить.

      • Судя по всему, это не тот модуль, который я видел, например, у Татьяны Вукс

        • Да плагин другой. Я использую Yet another threaded Comments plugin.
          А у нее — Brians Threaded Comments (судя по внешнему виду).
          Принципиальной разницы, конечно, нет. Но у YATCP в документации очень подробно описано как его подстроить под свою тему.

    • 20 штук это, конечно, хорошо, только я ограничил уровень вложенности шестью. После этого выводится сообщение «достигнут максимальный уровень вложенности» и все дальнейшие комментарии добавляются ниже (на том же уровне).
      Кроме того, при двадцати отступ справа будет большим и комментарии сильно увеличатся по высоте.
      Да и, по-моему, для этого блога такой уровень потребуется очень не скоро.

      • Да и, по-моему, для этого блога такой уровень потребуется очень не скоро.

        Уровни ответов имеют свойство плодиться и размножаться. Так как любое более-менее живое обсуждение не ограничивается 10 ответами с каждой стороны.

  • Хорошо, да. Нужно будет у себя тоже сделать нормальную форму 🙂
    Кстати, куда-то OneFace отвалился (говорит, movie not loaded). Но это, я так понимаю, на сервере проблемы… 🙁

    Насчет цепочки комментариев — их нужно смотреть на вложенности в 20 штук, когда начнут вылазить проблемы.
    Хотя да, «ветки обсуждения» — это классическая схема, и не только Хабр их использует (на самом деле, это применялось еще в тыща девятьсот надцатом году, в USENET конференциях (когда такие вот обсуждения вообще появились).

    • Просто тест комментария.
      2Владимир: Если все пройдет нормально (или даже пройдет ненормально), всю ветку вложенных комментариев можно удалить.

      • Судя по всему, это не тот модуль, который я видел, например, у Татьяны Вукс

        • Да плагин другой. Я использую Yet another threaded Comments plugin.
          А у нее — Brians Threaded Comments (судя по внешнему виду).
          Принципиальной разницы, конечно, нет. Но у YATCP в документации очень подробно описано как его подстроить под свою тему.

    • 20 штук это, конечно, хорошо, только я ограничил уровень вложенности шестью. После этого выводится сообщение «достигнут максимальный уровень вложенности» и все дальнейшие комментарии добавляются ниже (на том же уровне).
      Кроме того, при двадцати отступ справа будет большим и комментарии сильно увеличатся по высоте.
      Да и, по-моему, для этого блога такой уровень потребуется очень не скоро.

      • Да и, по-моему, для этого блога такой уровень потребуется очень не скоро.

        Уровни ответов имеют свойство плодиться и размножаться. Так как любое более-менее живое обсуждение не ограничивается 10 ответами с каждой стороны.

  • К слову о «юзабельности форм» 🙂
    Я думаю, можно навесить маленький скриптик на форму отправки комментария, который бы не давал отправить форму, если поле «Сколько будет дважды два четыре» не заполнено.
    Потому что уже столько, как я подозреваю, хороших комментариев пропало из-за того, что по нажатию Back со страницы с ошибкой комментарий не восстанавливался…

    • Спасибо, учту. Я просто использовал готовый плагин и не учел этот момент.

      • Вот, опять.
        Только что хотел написать большой комментарий, почему мне Brians Threaded Comments нравится больше, забыл ввести «зеленая дудочка», и — все. Комментарий утерян.
        А там две текстарии набралось 🙁

        • Доделал! 🙂
          Теперь должно выводится сообщение обо всех незаполненных полях (кроме названия сайта, это поле необязательное).

          Кстати, у меня при переходе со страницы с сообщением о незаполненном поле сохраняются все введенные значения (переход выполняется кнопкой «Назад», браузер — FF 2.0.0.11).

        • Ну, я преимущественно смотрю через IE (6 версия), потому что, увы, FF c выходом 2 ветки начал притормаживать (по сравнению с 1.5).

          И иногда, при нажатии back, значение поля комментария просто не сохраняется.
          Ну, теперь-то будет уже нормально (хотя такая раскраска — это слегка чересчур).
          А именно:
          1) При сабмите нужно подсвечивать _все_ неверные поля. А не по одному, в порядке незаполненности
          2) Достаточно простой подсветки неправильного поля при помощи красной рамки. Делать кастомный бэкграунд — совершенно необязательно. Как пример подсветки полей могу посоветовать валидатор поля, встроенный в ExtJS.
          (если я соберусь прикрутить такой валидатор к своему блогу — то я обязательно поделюсь кодом) 🙂

        • Да я, честно говоря, использовал готовый плагин (Comment Fileds JavaScript Validation).
          Только добавил проверку поля с суммой, т.к. в стандартном варианте он проверяет только имя, eMail и комментарий.
          А подсветка такая там по-умолчанию. Исправить ее не сложно, просто я еще не решил какой цвет для рамок выбрать. Бэкграунд уберу обязательно.
          По-поводу подсветки всех полей. В целом я согласен, что нужно выводить все ошибки. Но в общем-то это довольно редкая ситуация, когда посетитель пропускает два поля из четырех (комментарий вряд ли кто-то не заполнит). Поэтому еще подумаю ❓ .

        • я, честно говоря, использовал готовый плагин

          Читер 🙂

          Но в общем-то это довольно редкая ситуация, когда посетитель пропускает два поля из четырех

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

        • Тут есть один нюанс.
          Если не сделать разметку под текстридер, посетитель может не понять как заполнить форму.
          А сообщения об ошибках в форму будут выведены в любом случае. Разница только в том все вместе или по-отдельности. Кроме того, редко кто читает длинные сообщения об ошибках 🙂 .

        • Хм.
          Я просто вспоминаю, как ходил получать кредит.
          И сначала у меня взяли все документы, посмотрели, и сказали что нужно принести идентификационный код. 🙂
          Когда я принес код, мне сказали, что нужно принести справку с места работы. Когда я получил эту справку, мне сказали, что она «неправильно оформлена» (правда, я так и не добился от них, как _правильно_ это оформлять — мне только намекнули, что подписи директора недостаточно, а нужна еще и подпись главбуха)…

          Вот, показывать пользователю _по одной_ ошибке — равносильно этому 🙂

          А насчет «читать длинные сообщения» — если поле просто подсвечено красным, это не так уже и длинно 🙂
          И читать это не обязательно :))

        • Пример с кредитом хороший 🙂
          Посмотрим. Переделать в общем-то несложно. Скрипт и проверки довольно простые.

        • Переделал.
          Не сказать, чтобы стало значительно удобнее, но что-то в этом есть 🙂 .

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

          В общем, я в понедельник сделаю валидатор на своем блоге (для ввода комментариев) и покажу, что именно я имею ввиду.

        • >> делать всплывающим окошком (алертом) как раз необязательно

          Тут есть одна проблема. eMail может быть не заполнен, а может иметь неправильный формат. И то, и другое ошибки, но сообщения разные.

        • Ну, я не зря указывал именно на Ext-овский способ.
          Там это сделано вообще красиво — сообщени об ошибке показывается в виде всплывающего окошка (при наведении).
          И уже в нем показывается характер ошибки.

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

  • К слову о «юзабельности форм» 🙂
    Я думаю, можно навесить маленький скриптик на форму отправки комментария, который бы не давал отправить форму, если поле «Сколько будет дважды два четыре» не заполнено.
    Потому что уже столько, как я подозреваю, хороших комментариев пропало из-за того, что по нажатию Back со страницы с ошибкой комментарий не восстанавливался…

    • Спасибо, учту. Я просто использовал готовый плагин и не учел этот момент.

      • Вот, опять.
        Только что хотел написать большой комментарий, почему мне Brians Threaded Comments нравится больше, забыл ввести «зеленая дудочка», и — все. Комментарий утерян.
        А там две текстарии набралось 🙁

        • Доделал! 🙂
          Теперь должно выводится сообщение обо всех незаполненных полях (кроме названия сайта, это поле необязательное).

          Кстати, у меня при переходе со страницы с сообщением о незаполненном поле сохраняются все введенные значения (переход выполняется кнопкой «Назад», браузер — FF 2.0.0.11).

        • Ну, я преимущественно смотрю через IE (6 версия), потому что, увы, FF c выходом 2 ветки начал притормаживать (по сравнению с 1.5).

          И иногда, при нажатии back, значение поля комментария просто не сохраняется.
          Ну, теперь-то будет уже нормально (хотя такая раскраска — это слегка чересчур).
          А именно:
          1) При сабмите нужно подсвечивать _все_ неверные поля. А не по одному, в порядке незаполненности
          2) Достаточно простой подсветки неправильного поля при помощи красной рамки. Делать кастомный бэкграунд — совершенно необязательно. Как пример подсветки полей могу посоветовать валидатор поля, встроенный в ExtJS.
          (если я соберусь прикрутить такой валидатор к своему блогу — то я обязательно поделюсь кодом) 🙂

        • Да я, честно говоря, использовал готовый плагин (Comment Fileds JavaScript Validation).
          Только добавил проверку поля с суммой, т.к. в стандартном варианте он проверяет только имя, eMail и комментарий.
          А подсветка такая там по-умолчанию. Исправить ее не сложно, просто я еще не решил какой цвет для рамок выбрать. Бэкграунд уберу обязательно.
          По-поводу подсветки всех полей. В целом я согласен, что нужно выводить все ошибки. Но в общем-то это довольно редкая ситуация, когда посетитель пропускает два поля из четырех (комментарий вряд ли кто-то не заполнит). Поэтому еще подумаю ❓ .

        • я, честно говоря, использовал готовый плагин

          Читер 🙂

          Но в общем-то это довольно редкая ситуация, когда посетитель пропускает два поля из четырех

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

        • Тут есть один нюанс.
          Если не сделать разметку под текстридер, посетитель может не понять как заполнить форму.
          А сообщения об ошибках в форму будут выведены в любом случае. Разница только в том все вместе или по-отдельности. Кроме того, редко кто читает длинные сообщения об ошибках 🙂 .

        • Хм.
          Я просто вспоминаю, как ходил получать кредит.
          И сначала у меня взяли все документы, посмотрели, и сказали что нужно принести идентификационный код. 🙂
          Когда я принес код, мне сказали, что нужно принести справку с места работы. Когда я получил эту справку, мне сказали, что она «неправильно оформлена» (правда, я так и не добился от них, как _правильно_ это оформлять — мне только намекнули, что подписи директора недостаточно, а нужна еще и подпись главбуха)…

          Вот, показывать пользователю _по одной_ ошибке — равносильно этому 🙂

          А насчет «читать длинные сообщения» — если поле просто подсвечено красным, это не так уже и длинно 🙂
          И читать это не обязательно :))

        • Пример с кредитом хороший 🙂
          Посмотрим. Переделать в общем-то несложно. Скрипт и проверки довольно простые.

        • Переделал.
          Не сказать, чтобы стало значительно удобнее, но что-то в этом есть 🙂 .

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

          В общем, я в понедельник сделаю валидатор на своем блоге (для ввода комментариев) и покажу, что именно я имею ввиду.

        • >> делать всплывающим окошком (алертом) как раз необязательно

          Тут есть одна проблема. eMail может быть не заполнен, а может иметь неправильный формат. И то, и другое ошибки, но сообщения разные.

        • Ну, я не зря указывал именно на Ext-овский способ.
          Там это сделано вообще красиво — сообщени об ошибке показывается в виде всплывающего окошка (при наведении).
          И уже в нем показывается характер ошибки.

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

  • Всю ветку комментариев прочитать не осилил 🙂
    Дизайн этот мне больше нравится, чем тот что был.
    У себя в блоге я поставил Brians Threaded Comments. Селект бокс нижний, по моему, лишний.
    Кстати ругается на мой имейл, пришлось точку из него убрать…

    • Нижний селект бокс показывает к какому именно комментарию отправляется комментарий 🙂 В отличие от BTC, в котором форма перемещается под комментируемый текст, тут — форма всегда внизу, и иногда полезно знать, куда же твой текст отправится…
      Ругаться на точку в мыле — это очень частая проблема со многими валидаторами. Они считают что мыло — это только (w), хотя в некоторых случаях там может быть практически что угодно (хоть чучело). Вот, пример валидатора, в котором описываются некоторые особенности этих вот email адресов.
      Да и RFC 822 говорит, что local-part (это то, что перед собакой) может содержать что угодно, если оно заключено в кавычки.

      • Да, кстати, горе мне горе.
        Ссылку на RFC 822 стоит заменить на сылку на RFC 2822, как замещающий документ.
        Это я прогнал, сознаюсь.

    • Я пробовал использовать Brians Threaded Comments. Но оказалось, что он хорошо вписывается в стандартную тему (или похожую). Естественно, переделать его можно как угодно… Но нормального описания я не нашел, а копаться в исходниках было лень 🙂 .

      Кроме того, Brians Threaded Comments не сможет вставить форму под комментарий, если отключен JavaScript.
      В моем случае, нужный комментарий можно выбрать в нижнем селект боксе.

      P.S. Скрипт проверки email я обязательно исправлю. Честно говоря, забыл его протестировать 🙂 .

      • Brians Threaded Comments не сможет вставить форму под комментарий, если отключен JavaScript.

        Да-да-да. Все тот же самый accessibility.
        Только в случае отключенного JS не работает бОльшая часть сайтов. Так что JavaScript уже прочно вошел в нашу жизнь.

        В случае же Brians Threaded Comments, да и здесь — может, стоит вставлять этот дропдаун только при отключенных скриптах? Тэг «noscript» вроде бы еще никто не отменял…

        • Да, все время одна и таже проблема… выбора 🙂

          Несколько решений, несколько компромиссных вариантов. У каждого свои достоинства и недостатки…

          Но, думаю, со временем по экспериментирую и выберу.
          Хотя, я уже столько раз менял свои решения 🙂

  • Всю ветку комментариев прочитать не осилил 🙂
    Дизайн этот мне больше нравится, чем тот что был.
    У себя в блоге я поставил Brians Threaded Comments. Селект бокс нижний, по моему, лишний.
    Кстати ругается на мой имейл, пришлось точку из него убрать…

    • Нижний селект бокс показывает к какому именно комментарию отправляется комментарий 🙂 В отличие от BTC, в котором форма перемещается под комментируемый текст, тут — форма всегда внизу, и иногда полезно знать, куда же твой текст отправится…
      Ругаться на точку в мыле — это очень частая проблема со многими валидаторами. Они считают что мыло — это только (\w), хотя в некоторых случаях там может быть практически что угодно (хоть чучело). Вот, пример валидатора, в котором описываются некоторые особенности этих вот email адресов.
      Да и RFC 822 говорит, что local-part (это то, что перед собакой) может содержать что угодно, если оно заключено в кавычки.

      • Да, кстати, горе мне горе.
        Ссылку на RFC 822 стоит заменить на сылку на RFC 2822, как замещающий документ.
        Это я прогнал, сознаюсь.

    • Я пробовал использовать Brians Threaded Comments. Но оказалось, что он хорошо вписывается в стандартную тему (или похожую). Естественно, переделать его можно как угодно… Но нормального описания я не нашел, а копаться в исходниках было лень 🙂 .

      Кроме того, Brians Threaded Comments не сможет вставить форму под комментарий, если отключен JavaScript.
      В моем случае, нужный комментарий можно выбрать в нижнем селект боксе.

      P.S. Скрипт проверки email я обязательно исправлю. Честно говоря, забыл его протестировать 🙂 .

      • Brians Threaded Comments не сможет вставить форму под комментарий, если отключен JavaScript.

        Да-да-да. Все тот же самый accessibility.
        Только в случае отключенного JS не работает бОльшая часть сайтов. Так что JavaScript уже прочно вошел в нашу жизнь.

        В случае же Brians Threaded Comments, да и здесь — может, стоит вставлять этот дропдаун только при отключенных скриптах? Тэг «noscript» вроде бы еще никто не отменял…

        • Да, все время одна и таже проблема… выбора 🙂

          Несколько решений, несколько компромиссных вариантов. У каждого свои достоинства и недостатки…

          Но, думаю, со временем по экспериментирую и выберу.
          Хотя, я уже столько раз менял свои решения 🙂

  • Если вы интересуетесь знать все о Москве, то предлагаю вашем вниманию сайт
    Новости МО!

    На нашем сайте только самые последнии новости из жизни самого большого города в России =)

  • Если вы интересуетесь знать все о Москве, то предлагаю вашем вниманию сайт
    Новости МО!

    На нашем сайте только самые последнии новости из жизни самого большого города в России =)