Архив категории: ‘Web разработка’

Древовидные комментарии wordpress, wp_list_comments

Tuesday, 18 Aug 09 в 23:42

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

Итак, появилась эта фишка в wordpress начиная с версии 2.7., правда далеко не все темы оказались к этому готовы, поэтому львиную часть времени занимает правка шаблона. Но перед этим древовидные комментарии нужно активировать в админке – идем в раздел «Параметры» – «Обсуждение», где ставим галочку напротив поля «Разрешить древовидные (вложенные) комментарии глубиной  уровней» – на английском это «Enable threaded (nested) comments  levels deep». При этом указываем количество уровней, для которого можно отвечать на комментарий.

Если после этого в вашем блоге в комментариях не появилась ссылка «Оветить» (Reply), то, увы, шаблон такой вид комментариев не поддерживает. В таком случае нам придется править файл comments.php. Проще всего найти шаблон, который правильно работает с древовидными комментариям либо поиска и в Интернете нужный фрагмент кода. Я нашел подсказку в этой статье. Если вы хотите создать шаблон для всех версий wordpress, то нужно делать проверку поддерживается ли в той или иной установке функция wp_list_comments – для этого создается 2 варианта шаблона и добавляете условный оператор if в код (см. статью). У меня все гораздо проще – wordpress версии 2.8., поэтому лишние действия смысла делать нет.

В самом начале не забудьте сохранить резервную копию файла comments.php на всякий случай. Дальше заходим в header.php, где перед вызовом функции wp_head() добавляем код:

if ( is_singular() ) wp_enqueue_script( 'comment-reply' );

Это добавит небольшую функциональность с помощью javascript в комментарии – судя по наблюдениям, форма для комментирования будет отображаться сразу после записи, где вы нажали «Ответить». Далее в файл comments.php записываем код:

<div id="comments-wrap">
<?php // Do not delete these lines
	if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');
 
	if ( post_password_required() ) { ?>
		<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
	<?php
		return;
	}
?>
 
<!-- You can start editing here. -->
<?php // Begin Comments & Trackbacks ?>
<?php if ( have_comments() ) : ?>
<h6 id="comments-wrap"><?php comments_number('No Comments', 'One Comments', '% Comments' );?> to &#8220;<?php 
 
the_title(); ?>&#8221;</h6>
	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
<ol class="commentlist">
	<?php wp_list_comments(); ?>
</ol>
	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
</div>
<?php // End Comments ?>
 
 <?php else : // this is displayed if there are no comments so far ?>
 
	<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->
 
	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>
 
	<?php endif; ?>
<?php endif; ?>
 
<?php if ('open' == $post->comment_status) : ?>
 
<div id="respond">
 
<h4 class="postcomment"><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h4>
 
<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" class="textarea" value="<?php echo $comment_author; ?>" size="28" 
 
tabindex="1" />
	<label for="author"><?php _e('Name'); ?></label> <?php if ($req) _e('(required)'); ?>
	</p>
 
	<p>
	<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="28" tabindex="2" 
 
class="textarea" />
	<label for="email"><?php _e('E-mail'); ?></label> <?php if ($req) _e('(required)'); ?>
	</p>
 
	<p>
	<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="28" tabindex="3" 
 
class="textarea" />
	<label for="url"><?php _e('<acronym title="Uniform Resource Identifier">URI</acronym>'); ?></label>
	</p>
 
	<?php endif; ?>
 
	<p>
	<label for="comment"><?php _e('Your Comment'); ?></label>
	<br />
	<textarea name="comment" id="comment" cols="60" rows="10" tabindex="4" class="textarea"></textarea>
	</p>
 
	<p>
	<input name="submit" id="submit" type="submit" tabindex="5" value="<?php _e('submit'); ?>" class="Cbutton" />
	<?php comment_id_fields(); ?>
	</p>
	<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; ?>
</div>
<?php else : // Comments are closed ?>
<p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>
<?php endif; ?>
</div>

Еще нужно будет добавить в файл стилей несколько строк:

.alt {margin: 0;padding: 10px;}
#comments ol {list-style-type: none;line-height: 18px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 10px;padding-left: 5px;}
#comments ul li {list-style-type: none;list-style-image: none;list-style-position: outside;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 5px;padding-top: 5px;padding-right: 0px;padding-bottom: 0px;padding-left: 0pt;}
.commentlist {padding: 0;text-align: justify;}
.commentlist li {margin: 15px 0 10px;padding: 5px 5px 10px 5px;list-style: none;}
.commentlist li ul li { margin-right: -5px;margin-left: 10px;list-style: none;}
.commentlist li li {background:none;border:none;list-style:none;margin:3px 0 3px 20px;padding:3px 0;}
.commentlist li .avatar {border:1px solid #ccc;margin:15px 8px 6px 0;float: right;padding:2px;width:45px;height:45px;}
.commentlist cite, .commentlist cite a {font-weight: bold;font-style: normal;font-size: 1.1em;}
.commentlist p {font-weight: normal;line-height: 1.5em;text-transform: none; margin: 10px 5px 10px 0;}
#commentform p {font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;}
.commentmetadata {font-weight: normal; margin: 0;display: block; color: #ca5433;}
.commentmetadata a, .commentmetadata a:visited {color: #fa7703;}
.commentmetadata a:hover{ color: #333333;}
.children { padding: 0; }
.thread-alt {background-color: #f8f8f8;}
.thread-even {background-color: white;}
.depth-1 {border: 1px solid #ddd;}
.even, .alt {border-left: 1px solid #ddd;}

Понятно, что их можно изменять и подправить под дизайн вашего блога. После сохранения все должно работать. У Дмитрия Донченко есть статья про древовидные комментарии, где он подробно разбирает некоторые части кода для comments.php, что может прояснить некоторые моменты, если это очень интересно для вас.

Функция wp_list_comments

В версиях wordpress старше 2.7 данная функция отвечает за вывод списка комментариев.

<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>

Проблема в том, что править формат вывода через шаблон оказалось не так просто. Тем не менее, есть 2 варианта решения данной проблемы – во-первых, вы можете указывать стиль вывода комментариев – с помощью div, ol или ul, а через CSS уже внедрять свои фантазии офомления. Например:

<div class="commentlist">
<?php wp_list_comments(array('style' => 'div')); ?>
</div>

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

<ol class="commentlist">
<?php wp_list_comments('callback=mytheme_comment'); ?>
</ol>

А в файле  functions.php его необходимо определить. Вот пример из одного блога.

<?php
function mytheme_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
     <div id="comment-<?php comment_ID(); ?>" class="mycomment">
      <table><tbody><tr><td width="80" valign="top" >
	  <div class="comment-author vcard">
         <?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>       
      </div>
	  </td><td width="100%" valign="top" style="padding-left: 10px;">
 
      <?php if ($comment->comment_approved == '0') : ?>
         <em><?php _e('Your comment is awaiting moderation.') ?></em>
         <br />
      <?php endif; ?>
 
      <div class="comment-meta commentmetadata"> <?php printf(__('<cite class="fn">%s</cite>'), get_comment_author_link()) ?> пишет <a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>
 
      <?php comment_text() ?>
 
      <div class="reply">
         <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
      </div>
	  </td></tr></table>
     </div>
 
<?php
        }
?>

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

P.S. Постовой. Заходми в блог юного SEOшника и читаем про Фарму, дорвеи, black seo!

Понравился пост? Подпишись на обновления блога по RSS для блоггеров и вебмастеровRSS, RSS для блоггеров и вебмастеровEmail или RSS для блоггеров и вебмастеровtwitter!

Валидность HTML – сервисы проверки, валидный noindex

Saturday, 04 Jul 09 в 19:36

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

В принципе, особых проблем по созданию валидного HTML кода нет. В зависимости от используемого формата DOCTYPE определены те или иные правила. Чаще всего в блогах на WordPress идет тип документа XHTML 1.0 Transitional. Большинство шаблонов, найденных в сети, уже валидны, поскольку их создатели беспокоятся о правильности кода – с ошибками продать темы не получится. Да и вообще стандартам «там», по-моему, больше внимания уделяется.

Сервисы проверки валидности кода HTML

Скорее всего, в сети есть очень много seo и обычных сервисов для проверки валидности, тем не менее, главный из них находится на сайте W3C здесь. В специальной форме вводите ссылку на свой сайт или любую его страницу, если требуется, выбираете дополнительные опции (кодировку, DOCTYPE), после чего запускаете проверку Check.

сервис проверки валидности HTML

При наличии неточностей, в результатах вы получите список предупреждений и ошибок в коде. Иначе высветится приятная зеленая надпись «This document was successfully checked as XHTML 1.0 Transitional!»:)

Чтобы ускорить процесс можно использовать одну из функций модуля для firefox web developer, где кроме валидации есть куча других полезных мелочей.

Валидный noindex

Проблема валидности, как это не удивительно, часто подстерегает с использованием отечественных особенностей, например, счетчики различные и тег noindex. Он используется исключительно для Яндекса чтобы запретить индексацию информации, находящейся в нем. Точно также как для гугла закрываются от индексации ссылки через rel=”nofollow”. Но проблема заключается в том, что в W3C вообще не знают или не воспринимают тег noindex, поэтому получить валидный HTML с его использованием нереально. Приходится применять маленькую хитрость в виде следующего кода:

<span class="noi"><![CDATA[<noindex>]]></span>
Текст и ссылки, которые не индексируются
<span class="noi"><![CDATA[</noindex>]]></span>

Это для HTML, при этом в CSS пишите класс:

.noi { display: none }

Данный метод можно найти на множестве сайтов и блогов, о нем не писал только ленивый. А я вот лишь сейчас только занялся валидацией, поэтому и обратил внимание. Использовал его на своем сайте – HTML валидация проходится успешно. При этом многие авторы (оптимизаторы) заявляют, что в процессе тестирования noindex продолжает корректно выполнять свои функции для Яндекса. То есть, походу данное решение позволяет получить валидный noindex.

Кроме того в коде часто бывают проблемы со счетчиками, где используется символ «&». Так вот для типа документа XHTML его нужно просто заменить набором символов «&amp;». Чтобы исправить другие ошибки, читайте пояснения валидатора.

Даже, если валидность HTML не влияет на восприятие сайта поисковиком google, то она может помочь выявить наличие ошибок в самом проекте. Некоторые браузеры (как firefox) часто закрывают глаза на небольшие нюансы – типа отсутствие закрывающей конструкции –> и т.п., в то время как IE будет выводить ошибочное содержимое страницы. Или div какой-то не закрыли, упустили – все это можно с большой вероятностью обнаружить при валидации документа HTML.

А вы что думаете по поводу валидности кода – соблюдаете или нет?

UPD 9.07. Почитав еще немного информации на сайтах и форумах, пришел к выводу, что конструция <![CDATA[<noindex>]]> ссылки от Яши не закроет, хотя валидность будет 100%. Поэтому, думаю, правильным будет соблюдение всех правил написания html кода, но с обычным использованием тега noindex без извращений.

UPD UPD 15.05.11 Неожиданно ответ по поводу валидного noindex был найден на сайте Яндекса, где в описании совершенно четко указано решение данной проблемы, позволяющее использовать noindex и не нарушающего никакие правила W3C (плюс, кстати, Яндекс теперь понимает rel=”nofollow”):

<!--noindex-->текст, индексирование которого нужно запретить<!--/noindex-->

P.S. Постовой. Поисковое продвижение сайта, поисковая оптимизация сайтов.
Новые книги предлагает книжный интернет магазин Букля. Низкие цены, бесплатная доставка!
Машинки и паровозики – игрушки для детей.
Посетите наш цветочный салон и купите цветы, готовые букеты.

Понравился пост? Подпишись на обновления блога по RSS для блоггеров и вебмастеровRSS, RSS для блоггеров и вебмастеровEmail или RSS для блоггеров и вебмастеровtwitter!

Работа в интернете – web программирование

Sunday, 24 May 09 в 14:46

web программированиеСделать деньги в Интернете можно не только на различных биржах ссылок, партнерских программах, а и просто работая. Ибо во всемирной паутине за пользователями стоит большая «армия» создателей сайтов, сервисов и онлайн проектов. Каждой ступени процесса разработки сайта соответствует определенная профессиональная ниша – дизайн, верстка, программирование, копирайтинг, продвижение. Это такая глобальная модель без учета всяких исключений и отклонений.

Большой плюс всех этих работ заключается в том, что их можно выполнять, как находясь на полной ставке в офисе, так и сидя за компьютером дома. Я как-то уже сравнивал работу в офисе и фриланс – можете почитать мои мысли по этому поводу. Сейчас хотелось бы остановиться немного на другой теме – web программировании: как начать с нуля, что изучить, где найти работу. Более полезно для начинающих молодых людей, которые хотят найти подработку или полноценную работу в Интернете. Поскольку я сам начинал с этого направления, поэтому частично делюсь своим опытом.

Весь процесс обучения я бы разделил на 3 шага.

HTML (язык разметки веб-страниц) 1. Изучение HTML (язык разметки веб-страниц) и CSS (таблицы стилей для этой разметки). Большинство сайтов создаются именно на этой связке HTML + CSS. Тут следует заметить, что преобразование нарисованного шаблона из Photoshop в HTML страницу есть отдельный вид работ, который называется верстка. Многие занимаются исключительно этим делом, не вникая в следующие шаги подробно. Работа, в принципе, востребованная – так, например, у нас на фирме все 3 или 4 верстальщика работали удаленно, в офисе такого человека не было. Насколько я понимаю, выгодно в таком случае найти какую-то фирму, где устроится на постоянную удаленную работу с фиксированным окладом – и вам стабильность, и компании дешевле. При этом вы запросто сможете подрабатывать со сторонними заказами. В таком случае можно рассчитывать на какие-то деньги, ибо без постоянных заказов там непросто.

В качестве итога хотелось добавить – если вы собираетесь заниматься версткой, то нужно достаточно «глубоко копнуть» в плане изучения мат.части – там очень много нюансов, с которыми нужно будет разбираться. А чтобы привлечь внимание работодателей нужно делать свое дело качественно и лучше других, так как предложений на рынке хватает. Но если вы хотите заниматься именно программированием, вам достаточно изучить общие понятия. Можно для практики создать простенький сайт. В работе с HTML и CSS мне помогает хорошая программа Dreamweaver – советую. Кроме того, лишним не будет изучить или хотя бы просмотреть JavaScript – с его помощью можно реализовывать простенькие и не очень скрипты для веб сайтов.

PHP2. Второй шаг – изучение непосредственно языка программирования. Я так понимаю самым популярный для веб – это PHP. Если вы занимались программированием до этого или имеете хотя бы какое-то представление об этом предмете, то освоить его будет не сложно. Здесь, как и везде, есть те же константы, синтаксис, операторы и функции. Можно за пару дней вдумчиво прочитать какую-то книжку по PHP и вперед практиковаться. На этом этапе можно уже даже находить какие-то задания разовые на тех же биржа фриланса и зарабатывать обучаясь.

На втором шаге также есть выбор – углубиться в рассматриваемый вопрос на 200% либо изучать лишьосновы предмета (чуть позже объясню почему так). PHP – достаточно мощный язык, тем не менее, сейчас есть всякие более крутые, как я понимаю, ruby on rails (программный каркас для создания веб-приложений), AJAX и другие. Вы можете стать крутым веб-программистом либо сконцентрировать внимание на разработке сайтов с помощью других средств.

3. Около двух лет назад я начал создавать сайты без каких-либо знаний PHP. Тогда складывалась определенная ситуация, когда нужно было сдавать проекты, учиться было некогда. За это время я пару раз начинал читать большущую книгу по PHP5, иногда даже что-то программировал, но не хватало упорства и времени довести это дело до конца. Более того, я начал слегка задумываться о ненужности такого шага для меня – да, я не могу создавать «любой» сайт, который бы реализовывал абсолютно все пожелания заказчика, но это не помешало мне создать более 100 маленьких и больших проектов.

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

Joomla – самая простая и популярная. По словам некоторых людей, шарящий человек разберется с ней за пару дней. Кроме того, я видел достаточно много заказов по данной CMS на фрилансерских сайтах. Я бы советовал с нее начинать – получится своего рода экскурс в системы управления контентом + возможность заработать.

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

Drupal - не очень простая, но весьма интересная и гибкая. Собирался изучать ее для создания различных социально-направленных сайтов. Читал, что для этого она идеальна и очень гибкая.

typo3 CMSTYPO3 - сложная, но очень гибкая. С нее то я и начинал:) Так до конца систему изучить не удалось, опять же в большей степени из-за необходимости решать конкретные задачи вместо обучения. К тому же, книг на русском тогда не было, благо хорошие разработчики писали документацию к своим модулям (на английском). Очень мощная CMS, известная по всему миру, есть реализации для крупных компаний, сложные проекты на нескольких серверах и с 18-тью локализованными версиями. Говорят, при хорошем знании PHP можно разобраться за 2-3 недели что к чему:) (p.s. Кстати, недавно открыл блог о TYPO3 где есть много интересной и полезной информации).

Все эти системы бесплатные, заказчику не придется платить за лицензию, а лишь за ваше работу. Поэтому они достаточно популярны и есть много заказов. Тем не менее, есть работа и для платных CMS как, например, Bitrix. Коробочные версии заточены под решение определенных задач, которые не всегда совпадают с мнением клиента, поэтому приходится немного «подкрутить», что-то добавить и т.п. В таких случаях при всей дружелюбности и готовности системы «для любого» пользователя без программиста не разобраться.

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

Хочу еще добавить относительно писка клиентов. Зависит от того какая модель работы вам ближе – офисная и фриланс. Успешные веб программисты есть и там, и там, поэтому здесь на передний план выходят некоторые другие особенности, как желание работать в команде, ходить на работу, набраться опыта, получить уверенность в завтрашнем дне или стажировку за границей. В любом случае запомните – хорошие специалисты нужны всегда и везде. Это аксиома! И даже если в вашем поселке городского типа не платят за веб программирование, никто не помешает вам найти заказчика из Англии, что сможет обеспечить шикарные условия сотрудничества. Но для этого нужно много знать и хорошо уметь делать свою работу. Поэтому перед поиском работы я бы рекомендовал научиться всему, а дальше потихоньку прощупывать почву. Начать можно с бирж фриланса, где есть заказы как на разработку с использованием PHP, так и с помощью всех вышеперечисленных CMS. После набора портфолио, опыта и знаний можно разослать резюме в различные фирмы вашей и соседних стран. Кризис кризисом, а разумные компании с удовольствием заполучат ценного работника.

Если у вас есть что добавить или же хотите поделиться личным опытом – пишите в комментариях, будет интересно почитать.

P.S. Уникальная биржа рекламы для англоязычных проектов.
Аналитическая статья от Larson&Holz IT Ltd об экономическом кризисе.
Продажа автомобилей на ad-auto.ru – бесплатные объявления.
Для молодоженов – кафе проведение свадеб.
Заходите в виртуальное казино и выигрывайте.

Понравился пост? Подпишись на обновления блога по RSS для блоггеров и вебмастеровRSS, RSS для блоггеров и вебмастеровEmail или RSS для блоггеров и вебмастеровtwitter!
Страница 4 из 81234567...Последняя »