Блог Stafox'a http://stafox.ru О программировании, создании сайтов и дизайне Sun, 19 Feb 2012 14:11:54 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Как сделать древовидные комментарии без плагина http://stafox.ru/kak-sdelat-drevovidnye-kommentarii-bez-plagina/ http://stafox.ru/kak-sdelat-drevovidnye-kommentarii-bez-plagina/#comments Fri, 10 Feb 2012 18:19:12 +0000 Stafox http://stafox.ru/?p=1508
Часто вижу, что некоторые начинающие блоггеры, да и не только начинающие, используют плагин, который позволяет выводить древовидные комментарии на блоге. Пример древовидных комментариев Вы можете увидеть на моём блоге. Так вот, для того, чтобы комментарии отображались в виде дерева, совсем не обязательно ставить плагин.

Всё можно сделать самостоятельно, немного подправив тему блога. Вы ещё не задали себе вопрос «Ну и зачем это»? Дело в том, что любой плагин обращается к базе данных, тем самым создавая дополнительную нагрузку. При большом количестве плагинов, Ваш блог станет медленно загружаться, и может попросту не выдержать и «упасть».

И так, закасаем повыше рукава, чтобы не запачкаться, и приступим к делу. Добавим в файл header.php строку кода:

if (is_singular() AND comments_open() AND (get_option('thread_comments') == 1)) wp_enqueue_script('comment-reply');

Вставляем этот кусочек кода перед строкой

wp_head();

Далее в файл functions.php добавляем следующий код:

<?php
function mytheme_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>">
      <div class="comment-author vcard">
         <?php echo get_avatar( $comment->comment_author_email, 64); ?>
         <?php printf(__('<cite class="fn">%s</cite> <span class="says">пишет:</span>'), get_comment_author_link()) ?>
      </div>
      <?php if ($comment->comment_approved == '0') : ?>
         <em><?php _e('Ваш комментарий появится после проверки') ?></em>
         <br />
      <?php endif; ?>
      <div class="comment-meta commentmetadata"><?php printf(__('<small>%1$s в %2$s</small>'), get_comment_date(),  get_comment_time()) ?><?php edit_comment_link(__('<div class="entry-edit"></div>'),'  ','') ?></div>
	  <div class="comment-text">
      <?php comment_text() ?>
	  </div>
      <div class="reply">
         <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
      </div>
     </div>
<?php } ?>

Замечательно! Теперь открываем файл comments.php и заменяем всё, что хранится между тегами <ul class=»commentlist»> и </ul>на

<?php wp_list_comments('callback=mytheme_comment'); ?>

Теперь всё красиво заворачиваем в CSS. Для этого в файл стилей style.css добавьте следующий код:

#author, #email, #url {
	margin:3px 10px 3px 0;
	float:left;
	height:25px;
	color:#555;
	padding:0 12px 0 12px;
	background-color:#dedede;
	font-size:16px;
	border:1px solid #bbb;
	border-radius:12px;
	-o-border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	-ms-border-radius:12px;
	width:150px;
	box-shadow:0 1px 1px #fff;
	-moz-box-shadow:0 1px 1px #fff;
	-webkit-box-shadow:0 1px 1px #fff;
	-o-box-shadow:0 1px 1px #fff;
	-ms-box-shadow:0 1px 1px #fff;
}
#comment {
	width:95%;
	color:#555;
	padding:12px;
	background-color:#dedede;
	border:1px solid #bbb;
	border-radius:12px;
	-o-border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	-ms-border-radius:12px;
	box-shadow:0 1px 1px #fff;
	-moz-box-shadow:0 1px 1px #fff;
	-webkit-box-shadow:0 1px 1px #fff;
	-o-box-shadow:0 1px 1px #fff;
	-ms-box-shadow:0 1px 1px #fff;
	margin:3px 0 3px 0;
	font-size:16px;
	font-family:Tahoma, Arial;
}
#author:focus, #email:focus, #url:focus, #comment:focus {
	box-shadow:0 0 5px #007efd;
	-moz-box-shadow:0 0 5px #007efd;
	-webkit-box-shadow:0 0 5px #007efd;
	-o-box-shadow:0 0 5px #007efd;
	-ms-box-shadow:0 0 5px #007efd;
	border:1px solid #777;
	color:#555;
}
ul.commentlist { font-size:14px;font-family:arial;list-style:none;padding:0;text-indent:0;margin-bottom:20px;}
ul.commentlist li {
	border:1px dashed #d3d3d3;
	background:#eee;
	padding:5px 5px 5px 5px;
	margin:5px 0 0 0;
	border-radius:12px;
	-o-border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	-ms-border-radius:12px;
}
ul.commentlist li.comment { padding:10px 10px 10px 10px; }
ul.commentlist li div.comment-author { font-weight: bold; }
ul.commentlist li div.vcard cite.fn a.url { text-decoration: none; }
ul.commentlist li div.vcard cite.fn a:hover.url { color: #313131; text-decoration: none; }
ul.commentlist li div.vcard img.avatar { border:1px solid #d6d6d6;width:50px;height:50px;float:left;padding:3px;background:#f4f4f4;margin-right:10px; }
ul.commentlist li div.comment-meta { font-family:arial;color:#818181;font-style:oblique;text-shadow:0 1px 0 #fff; }
ul.commentlist li p { color:#606060; clear:both;margin:20px 0 10px 0; }
ul.commentlist li ul { list-style:square; }
ul.commentlist li ul.children { list-style:none; text-indent:0; }
ul.commentlist li ul.children li.bypostauthor { background:#e3e3e3;border:1px dashed #aaa;}
ul.commentlist li.pingback { }
ul.commentlist li.bypostauthor { }
ul.commentlist li.thread-odd {
	border:1px dashed #d3d3d3;
	margin:5px 0 5px 0;
	border-radius:12px;
	-o-border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	-ms-border-radius:12px;
}
.comment-text {
	padding:5px 10px 0 0;
	display:block;
}
.comment-text p {
	padding:5px 10px 0 0;
	display:block;
	font-size:16px;
}
#respond input#submit {
	color:#444;
	font-weight:bold;
	margin:10px 0 10px 0;
	padding:5px 8px 5px 8px;
	border:1px solid #888;
	border-radius:12px;
	-o-border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	-ms-border-radius:12px;
	background: #c1c1c1; /* Old browsers */
	background: -moz-linear-gradient(top, #eeeeee 0%, #c1c1c1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#c1c1c1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #eeeeee 0%,#c1c1c1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #eeeeee 0%,#c1c1c1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #eeeeee 0%,#c1c1c1 100%); /* IE10+ */
	background: linear-gradient(top, #eeeeee 0%,#c1c1c1 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#c1c1c1',GradientType=0 ); /* IE6-9 */
}
#respond input#submit:hover {
	color:#666;
	background: #e3e3e3; /* Old browsers */
	background: -moz-linear-gradient(top, #e3e3e3 0%, #ccc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3e3e3), color-stop(100%,#ccc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e3e3e3 0%,#ccc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e3e3e3 0%,#ccc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #e3e3e3 0%,#ccc 100%); /* IE10+ */
	background: linear-gradient(top, #e3e3e3 0%,#ccc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e3e3', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

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

Не пропустите, это тоже интересно!

2 коммент.]]> http://stafox.ru/kak-sdelat-drevovidnye-kommentarii-bez-plagina/feed/ 2 Как продать ссылку в тегах WordPress http://stafox.ru/kak-prodat-ssylku-v-tegax-wordpress/ http://stafox.ru/kak-prodat-ssylku-v-tegax-wordpress/#comments Wed, 08 Feb 2012 12:49:27 +0000 Stafox http://stafox.ru/?p=1484
Прежде чем начать писать этот пост, я решил поискать нет ли чего похожего — вроде бы не нашёл, поэтому могу с радостью заявить, что в этом посте я «палю тему».

Вы наверняка уже знаете, что большинство блоггеров, зарабатывают на своих детищах, различными способами. Один из этих способов — продажа ссылок в статьях, которой я успешно пользуюсь. Я использую две биржи GoGetLinks и GetGoodLinks, цена ссылки на первой бирже зависит от тИЦ, на второй — от PR. За февраль я уже успел заработать $38. Но сейчас не об этом.

Речь пойдёт о второй бирже. Здесь у Вас есть шанс получить с молодого сайта до $10 за ссылку, т.к. PR каждой страницы разный. PR «морды» (главной страницы) обычно самый высокий. К примеру PR главной страницы моего блога уже 2 (снизился на 1 после апдейта), PR внутренних страниц от 0 до 2. Большая часть статей имеет PR равный 0 или 1, и только одна статья имеет PR=2. Но в WordPress есть страницы из облака тегов, PR которых почему-то в большей мере от 1 до 2, правда пользы от них никакой не было, до недавних пор. Мне на бирже предложили разместить ссылку на странице с PR=2 за $11. После этого я решил попробывать продать ссылку со страницы тега, и у меня всё получилось. Всё не так сложно, как может показаться на первый взгляд.

Первое, что нужно сделать — это добавить три функции, в файл functions.php Вашей темы.

function my_RegexpEscape($str)
{
return preg_quote($str, '/');
}
function my_getpageurl($url, $n) {
if ($url == '/') return $url;
else {
if ($_SERVER['QUERY_STRING']) $page = preg_replace(array('/^\//', '/\/?\?'.my_RegexpEscape($_SERVER['QUERY_STRING']).'$/'), array('',''), $url).'/';
else $page = preg_replace(array('/^\//', '/\/?\??$/'), array('',''), $url).'/';
$arr = explode('/', $page);
return $arr[$n-1];
}
}
function print_link($n, $tag, $link, $description, $page = 0) {
if((my_getpageurl($_SERVER["REQUEST_URI"], $n) == $tag) && ($page == 0) && ((my_getpageurl($_SERVER["REQUEST_URI"], $n+1) == ""))) printf('<div style="display:block;padding:10px;width:580px;">'.$description.'</div>', $link);
elseif (($page != 0) && (my_getpageurl($_SERVER["REQUEST_URI"], $n+2) == $page)) printf('<div style="display:block;padding:10px;width:580px;">'.$description.'</div>', $link);
}

Функция print_link имеет следующие входящие параметры: $n — уровень вложенности страницы, например страница http://stafox.ru/tag/css/ имеет уровень вложенности 2, а http://stafox.ru/contacts/ — 1. $tag — имя страницы. $link — html-ссылка. $decription — околоссылочный текст, место где нужно вставить ссылку указываем с помощью %s, $page — номер страницы, необязательный аргумент, по умолчанию равен 0, задаётся, если необходимо оставить ссылку, к примеру, на второй странице.
Второе — это создать файл links.php со следующим кодом:

<?php
$number++;
$link1='<a href="http://stafox.ru/tag/html/">лекции HTML</a>';
$description1='Вы решили выучить HTML? Сделать это быстро Вам помогут %s от Stafox\'a.';
if($number==1) print_link(2, "cpp", $link1, $description1);
?>

И поместить его в папку с темой.
Условие 

if($number==1)

указывает, что ссылка будет выводится перед первым постом.

Последнее что остаётся, это заменить в файле archive.php код

<?php
while (have_posts()) : the_post();
?>

на 

<?php
while (have_posts()) : the_post();
include("links.php");
?>

Теперь Вы можете продавать ссылки в категориях, в архивах и в тегах, как это делаю я на странице тега cpp.

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

$link="html-ссылка";
$description="текст слева от ссылки %s текст справа от ссылки";
if($number==1) print_link(2, "html", $link, $description, 2);

Не пропустите, это тоже интересно!

5 коммент.]]> http://stafox.ru/kak-prodat-ssylku-v-tegax-wordpress/feed/ 5 HTML с нуля. Лекция 4 http://stafox.ru/html-s-nulya-lekciya-4/ http://stafox.ru/html-s-nulya-lekciya-4/#comments Thu, 26 Jan 2012 00:35:38 +0000 Stafox http://stafox.ru/?p=1460
Приветствую Вас, мои дорогие читатели и случайные прохожие! В четвертой лекции мы поговорим о списках и отдельно о теге <div>, который имеет намного большее значение, нежели Вам может показаться на превый взгляд.

Списки

Думаю Вам не нужно объяснять что такое список, я прав? Замечательно! Перейдём тогда сразу к делу. Тег <ul> устанавливает начало маркированного списка, и как Вы, наверное, уже догадались, тег </ul> — его конец. Что значит маркированный? Это значит что перед каждым элементом списка располагается маркер, он же буллит, — типографский знак, используемый для выделения элементов списка. Каждый элемент такого списка заключен между тегами <li> и </li>. У данного тега есть один собственный атрибут type, который может принимать 3 значения square (квадрат), disc (диск), circle (кольцо). По умолчанию для элемент списка устанавливается тип disc. Применение атрибута type для тега <li> позволяет установить тип для каждого из элементов списка в отдельности, для того, чтобы применить тип для всего списка, атрибут type нужно использовать для тега <ul>.
Рассмотрим код простого маркированного списка:

<ul type="circle">
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
</ul>

Который выглядит следующим образом:

  • Первый элемент списка
  • Второй элемент списка

Также в HTML существует такое понятие, как нумерованный список, который устанавливается с помощью тега <ol>. У данного тега есть три собственных атрибута:

  • type — Устанавливает вид маркера списка.
  • reversed — Нумерация в списке становится в обратном порядке (3,2,1).
  • start — Число, с которого будет начинаться нумерованный список.

Атрибут type для тега <ol> может принимать следующие значения: A (заглавные латинские буквы), a (строчные латинские буквы), I (заглавные римские цифры), i (строчные римские цифры), 1 (арабские цифры). По умолчанию значение равно 1, т.е. арабские цифры. Элемент нумерованного списка располагается между тегами <li> и </li>, как и в случае с маркированным списком.
Код простого нумерованного списка:

<ol type="a">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>
  1. Первый
  2. Второй
  3. Третий

На самом деле, списки. Применяются не только при выводе списка, как может показаться на первый взгляд. Зачастую меню сайта также выводят при помощи списка, при выводе рубрик на блогах также используют списки. Список может отображаться как вертикально, так и горизонтально. Но во втором случае силой одного HTML не обойтись. Список может быть как с маркером, так и без. Для этого на помощь приходит CSS (Cascading Style Sheets — каскадные таблицы стилей). Поэтому, дорогие читатели, пришло время, когда мы с Вами должны окунуться в изучение спецификаций CSS.
Ну что же, поздравляю! Теперь Вы знаете, что такое списки и как их применять на деле.

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

«А как же таблицы?» — спросите Вы. Таблицы таблицами, они по прежнему имееют место в вёрстке, ведь согласитесь, использовать блоки для вывода таблицы успеваемости студентов, нелогично. Используя CSS и блочную вёрстку, Вы уменьшите вес страницы сайта, тем самым увеличив скорость загрузки Вашего сайта.
И так если Вы ещё не решились изучать CSS — вот мой последний аргумент: предположим, что сайт — это квартира, HTML — это стены, благодаря которым у Вас получаются комнаты, а CSS — это двери, обои, краска, картины, мебель, ковры — т.е. то, что придаёт Вашей квартире уникальности! Хотите чтобы Ваш сайт запомнился Вашим пользователям — сделайте его уникальным, и в этом Вам поможет CSS.

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

Не пропустите, это тоже интересно!

Комментариев нет]]> http://stafox.ru/html-s-nulya-lekciya-4/feed/ 0