Category: it

Category was added automatically. Read all entries about "it".

Ищу хостинг

hosting[1]

Нужен виртуальный VDS под новостники и магазины. CentOS, англо/русскоязычный саппорт, настройка по ТЗ, партнёрка, мониторинг.

Старт: 2×2550, 4Гб ОЗУ, 500 Гб места. С прибавкой по мере надобности, по прозрачной тарифтной линейке.

Договор.

В жопу целовать не надо, но поводы для многолетнего сотрудничества видеть необходимо.

WordPress 3.0: форма комментирования

На основе статьи Отто «WordPress 3.0 Theme Tip: The Comment Form».

Было дело — поставил как-то на третий Вордпресс прикольную темку «min», выполненную в соответствии с моим любимым экстраминималом. Суперминималом. Минимал в себе прям. Да в таком, что автор решил — ну их на хуй, комментарии эти, минимал, так уж минимал. Вот реально: не было в теме комментирования. Пришлось вырубать их из стандартной «twentyeleven», поставляемой вместе с дистрибом, помогло. Заодно много узнал о новшествах третьей версии любимого CMS, в части упрощения работы с формами и деревом комментирования.

 

Что имеем в виду

Вот здоровый кусок кода, извлечённый мной из файла «comments.php» текущей темы. И цель у него одна — отобразить форму для написания комментария:

<?php if ('open' == $post->comment_status) : ?>
<div id="respond">
	<h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>
		<div class="cancel-comment-reply">
			<small><?php cancel_comment_reply_link(); ?></small>
		</div>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
	<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>

<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( $user_ID ) : ?>
	<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p>

<?php else : ?>

	<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
	<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
	<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
	<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
	<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
	<label for="url"><small>Website</small></label></p>

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
	<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<?php comment_id_fields(); ?>
	</p>
<?php do_action('comment_form', $post->ID); ?>
</form>

<?php endif; // If registration required and not logged in ?>
</div>
<?php endif; // if you delete this the sky will fall on your head ?>

Жуть, да? И это всё беспорядок в «if/else». Они обрабатывают кучу случаев: когда пользователя залогинен или нет, комментарии открыты или закрыты, нужна ли регистрация и так далее. Эта путаница приводит к трудностям при модификации и стилизации через CSS.

Поэтому я заменил весь код этой строкой:

<?php comment_form(); ?>

Посимпатичнее, да?

Функция «comment_form» является новшеством версии «3.0». Если в общем, то она стандартизирует формы комментариев. Что делает её привлекательной для разрабов плагинов. Теперь изменить форму комментирования легче благодаря захватам (hooks). Отто, например, уже изменил свои плагины «Simple Facebook Connect» и «Simple Twitter Connect». И если вы используете их в своей теме, то вам менять ничего не понадобится.

 

Настройка

Все блогеры любят настраивать. И «comments form» этому не препятствует. Однако можно немного запутаться.

Внутри функции «comments_form» находятся кое-какие полезные нам захваты-крючки (те самые hooks). Они-то и позволят поднастроить систему комментирования.

 

Первый захват — «comment_form_default_fields». Он позволяет изменять параметры трёх основных полей: «author», «email» и «website». Это фильтр и поэтому мы можем влиять на то, что через него пройдёт. Поля сохраняются в массив, который содержит html. Это на выходе. Выглядит так:

array(
	'author' => '<p class="comment-form-author">...',
	'email'  => '<p class="comment-form-email">...',
	'url'    => '<p class="comment-form-url">...'
);

Для простоты я сократил код. Он нам говорит о том, что можно изменить поля:

function my_fields($fields) {
$fields['new'] = '<p>Some new input field here</p>';
return $fields;
}
add_filter('comment_form_default_fields','my_fields');

Это позволяет нам добавить новое поле ввода, измененить уже существующие и так далее.

Но поля — не единственное из пригодного для модификаций. Так же, существует и фильтр «comment_form_defaults». Он получает массу того, что можно назвать окружением формы комментариев. Значения по умолчанию выглядят следующим образом:

$defaults = array(
	'fields'               => apply_filters( 'comment_form_default_fields', $fields ),
	'comment_field'        => '<p class="comment-form-comment">...',
	'must_log_in'          => '<p class="must-log-in">...',
	'logged_in_as'         => '<p class="logged-in-as">...',
	'comment_notes_before' => '<p class="comment-notes">...',
	'comment_notes_after'  => '<dl class="form-allowed-tags">...',
	'id_form'              => 'commentform',
	'id_submit'            => 'submit',
	'title_reply'          => __( 'Leave a Reply' ),
	'title_reply_to'       => __( 'Leave a Reply to %s' ),
	'cancel_reply_link'    => __( 'Cancel reply' ),
	'label_submit'         => __( 'Post Comment' ),
);

Здесь разные куски html, из которых состоит форма комментирования. Их значения можно менять по вкусу.

Но фильтры — это не единственный способ изменения. Функция «comment_form» может взять массив параметров в качестве первого параметра и они изменят форму. Так, если нам хочется баловства типа смены фразы «Leave a Reply», то можно сделать так:

<?php comment_form(array('title_reply'=>'Leave a Reply, Stupid')); ?>

Мы рассмотрели простой способ изменений без фильтров. Но есть и сложные операции, где фильтры станут очень полезными.

 

Расширение функционала

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

  • comment_form_before
  • comment_form_must_log_in_after
  • comment_form_top
  • comment_form_logged_in_after
  • comment_notes_before
  • comment_form_before_fields
  • comment_form_field_{$name} (фильтр в каждом поле, где {$name} — ключевое имя поля в массиве)
  • comment_form_after_fields
  • comment_form_field_comment (фильтр в настройках по умолчанию «comment_field», который содержит поле «textarea» для комментария)
  • comment_form (захват действия после «textarea», главным образом для обратной совместимости)
  • comment_form_after
  • comment_form_comments_closed

CSS и прочие возможности

Не забудем про стиль. У каждой части формы комментариев есть классы и идентификаторы. Взгляните на результирующий код HTML: там можно найти их все. Кроме того, не забыта и семантика, проставлены тэги «label», тэги для совместимости со стандартами ARIA и так далее. К тому же, текст доступен для перевода системой «core translation».

Так что у авторов тем есть масса причин начать пользоваться этим вместо громоздких форм. Ваши пользователи и авторы плагинов будут вам благодарны. И в самом деле — пришло время сделать WordPress заботящимся более о дизайне, нежели о своей конструкции.

ABSOLUTE vs RELATIVE на пальцах

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

(Источник в Дизайнерской хибаре)


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

Если у вас та же история, то это ваше чтение на вечер.

Одним из откровений, посетивших меня по прочтении, стало понимание работы позиционирования, в особенности — разница между абсолютным и относительным (absolute, relative). Если дочитаете до конца, то будете точно знать — когда и как работает каждое. Здесь всё изложено на примерах списков и картинок.

Пять значений позиционирования

В CSS мы имеем список из пяти значений позиционирования div-ных блочных элементов:

  1. Static — статическое.
  2. Relative — относительное.
  3. Inherit — унаследованное.
  4. Fixed — фиксированное.
  5. Absolute — абсолютное.

Немного расчитстим дорогу, убрав inherit, просто потому, что это свойство позиционирования в дополнительном разборе не нуждается. Оно говорит элементу наследовать свойства родительского и всё. А в старых версиях Интернет Эксплорера и вовосе не поддерживается.

По умолчанию же, позиционирование выставляется в static. Любой элемент со статическим позиционированием будет там, где его ждут, будучи целиком и полностью зависимымм от структуры HTML.

Теперь fixed. Это такой якорь. Будучи оснащёнными этим значением, элементы останутся там, куда мы их поместим и не сдвинутся с места даже при прокрутке. Это часто используется для фиксации боковых панелей навигации, что конечно ужас для контента.

Так что, с тремя значениями позиционирования мы разобрались и можем считать их понятными. Просто потому, что их функционал не имеет, ни повторений, ни вариаций. Остаются интересности — absolute и relative. Взглянем на них по отдельности, а потом на то, как они могут быть использованы вместе. А ещё на то, какие интересные результаты это может дать.

Абсолютное позиционирование

Абсолютное позиционирование позволяет выдернуть объект из обычного потока документа и сунуть его в конкретную точку на странице. Создадим простой список — unordered list.

  • РАЗ
  • ДВА
  • ТРИ
  • ЧЕТЫРЕ
  • ПЯТЬ

Как мы знаем, его пункты уже в значении static, автоматом. Это значит то, что они текут себе в потоке других элементов документа там, куда помещены согласно его html-структуре. Теперь посмотрим — что случится, если одному из пунктов списка назначить absolute с нулевыми координатами.

>ul li:nth-child(4){
      position:absolute;
      left:0; top:0;}

Как видим, он выкидывается из общего потока и размещается в верхнем левом углу окна браузера. Заметим, что абсолютно позиционированному элементу всё равно — есть ли на том месте какой-нибудь другой или нет. Он всё равно будет помещёно согласно координатам.

Итак, абсолютное позиционирование нужно нам тогда, когда требуется поместить элемент именно в том месте экрана, где мы хотим его видеть. Соответственно, отмеряется его положение отступами сверху, справа, снизу и слева границы окна.

Например, поместим тот самый четвёртный пункт списка с отступом в двадцать пикселей слева и двадцать сверху.

ul li:nth-child(4){
      position:absolute;
      left:20px; top:20px;}

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

ul li:nth-child(4){
      position:absolute;
      left:60px; top:80px;}

В заключение, отметим поведение остальных пунктов списка. При удалении из потока четвёртого, остальные атоматически подравниваются в очереди так, как будто его там и не было: за третьим сразу идёт пятый. Запомним это, а потом используем в своих интересах.

Относительное позиционирование

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

Посмортим:

ul li:nth-child(4){
      position:relative;
      left:0px; top:0px;}

  • РАЗ
  • ДВА
  • ТРИ
  • ЧЕТЫРЕ
  • ПЯТЬ

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

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

ul li:nth-child(4){
      position:relative;
      left:20px; top:20px;}

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

Собираем всё вместе

Теперь, когда мы усвоили базовые правила поведения HTML-элементов с абсолютным и относительным позиционированием через CSS, создадим полноценный и наглядный пример работы всего этого дела.

HTML

Начнём, создав HTML-блок класса «photo» и сразу сунем в него картинку 200×200 пикселей.

<div class="photo">
    <img src="http://domen.ru/photocartochka.jpeg" />
</div>

Теперь пора перейти к правке нашей CSS.

Базовая CSS

Сначала сменим фон на тёмный. Потом добавим фотке базовые стили: сделаем ей рамку и навешаем теней.

body { background: #69C; }

.photo {
border: 5px solid white;
height: 200px; width: 200px;
margin: 50px auto;

/*сложные, но клёвые тени*/
-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}

Ух ты:

Ну, в общем — вот наша картинка. Ничего особенного, но полигон создан.

Привешиваем полоску скотча

Скажем так: мы хотим создать впечатление того, что фотки прилеплены к стене кусками скотча. Для этого нам потребуется показать то, чему уже научились и прибавить псевдо-элемент.

Во-первых, для создания нашей плёнки, мы используем псевдо-элемент «до» — «:before». Его CSS-настройки скажут быть скотчу высотой в двадцать и длиной в сто пикселей. Да ещё с белым фоном, которому назначена непрозрачность в пятьдесят процентов, плёнка же. Ну и тенюшка, куда без неё.

.photo:before {
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Да, тут плёнка так ничего не приклеит, кроме себя самой...

Очевидно то, что у нас проблемы с позиционированием псевдо-элемента. Попробуем исправить положение при помощи относительного позиционирования.

.photo:before {
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);

position:relative;
top:0px; left:0px;

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Здорово. Какой эффект...

Как видим, проблему мы не решили. Ну, раз относительное позиционирование не сработало, то пойдём в противоположном направлении и попробуем абсолютное.

.photo:before {
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);

position:absolute;
top:0px; left:0px;

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

А вот это уже ближе к теме.

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

Ну что ж, мы попробовали, и relative, и absolute для позиционирования. Но, ни то, ни другое, в качестве решения нас пока не устраивает.

Что дальше? А например то, что рассказ об абсолютном позиционировании элементов не полон. Видите ли, верхний левый угол экрана — это не всегда нулевая точка координат для абсолютно позиционированного элемента. Вместо этого, наш «абсолютный» псевдо-элемент сориентируется по первому нестатичному предку. В данном случае — по фотке.

Что нам с этого? Очень многое: мы можем использовать абсолютное позиционирование для скотча. Но перед этим, должны изменить кое-что у его родителя, у фотки. И раз мы не хотим, чтобы скотч произвольно двигался по фотке в зависимости от разрешения экрана, то применим к ней относительное позиционирование.

.photo {
border: 5px solid white;
height: 200px;
width: 200px;
margin: 50px auto;
position:relative;

-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}


.photo:before {
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
position:absolute;
top: 0px; left: 0px;

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

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

Теперь, когда мы нашли отправную точку, можно сдвинуть скотч к нужному нам месту, настроив левое и верхнее значение. Обратите внимание на отрицательное значение для верхней точки. Взглянув на результат, вы поймёте — зачем. Левое же значение задано так, чтобы отцентрировать ленту по горизонтали. Некто «Мгновенный калькулятор» наглядно покажет — как это рассчитывается.

.photo:before {
content: "";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
position:absolute;
top: -15px; left: 50px;

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Как видим по финальной картинке — комбинирование абсолютного и относительного позиционирования дало нам именно то, что необходимо для реализации задуманного эффекта и для понимания работы этих двух свойств.

А ещё загляните на «Тинкербин». По сути — это такой полезный генератор кодов различных эффектов.

Заключение

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

Первое — это то, что относительное позиционирование позволяет нстроиться относительно конкретной отправной точки. Второе — то, что настроиться можно и относительно первого нестатичного предка, а не только края окна браузера, как это происходит при значении «position: none». И наконец: ни относительное, ни абсолютное позиционирование объекта не влияет на статические и фиксированные оъекты, его окружающие. Вспомним из начала статьи: абсолютно отпозиционированные элементы удаляются из потока, а относительные занимают чужие позиции.

Примечания

  • Несвежие мобилы и таблетки плохо воспринимают параметр позиционирования «fixed». Вернее не воспринимают. Меню, которому он назначен, катаются по экрану вместе с контентом так, как если бы они были «static». С появлением iOS 5+ всё нормализовалось, но не раньше.
  • То, как всё здесь написанное воспринял, например, седьмой Internet Explorer — даже обсуждать не охота. Ещё меньше было желания думать о том, как хачить под него CSS. Поэтому для упыря я нашлёпал скринов всей красоты и закодил их в HTML конструкциями, типа:

    <!--[if IE]>
    Сюда тупо скрин для Эксплорера.
    <![endif]-->

    <![if !IE]>
    А сюда полноценный код для нормальных браузеров.
    <![endif]>


    Так что, если не лень накидать своих решений чисто по CSS, то каменты к вашим услугам. Спасём мир.

Слегка рабочее, апачее. SSI: наиболее полное руководство, с примерами.

Для тех, кто пробует потрогать вэбдизайн в части сайтостроительства, рекомендую обратить внимание на язык директив сервера Апач — на Server Side Includes, «Включения со стороны сервера».

Апач — это народный сервер, на нём крутится абсолютное большинство сайтов в мире. А SSI, являясь его модулем, помогает автоматизировать существенную часть работы по созданию и обновлению интернет-ресурсов. Штука старая и проверенная. И незаменимая в случаях невозможности поставить себе полноценное двигло типа Drupal, Joomla или Wordpress. Например на бесплатных хостингах или если тупо неохота учить PHP.

Collapse )