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

Площадь

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

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

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

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

Подача информации

По каким критериям я раскидал элементы на странице — не помню. Видимо по никаким, и из-за этого такая чушь получилась.

Метки

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

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

Навигация

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

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

RSS и подписка по E-mail

Слишком уж большая иконка RSS, к тому же позаимствованная, а виджет с подпиской по E-mail ничем не выделен. Теперь справа красуются две аккуратные кнопочки, на которые по-моему даже чаще нажимать стали.

Новые элементы

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

Добавлен блок «Интересности» — решил продолжить вести эту рубрику, потому что почему бы и нет. В таком формате планируется ещё пара рубрик. Предлагаю не пропустить и подписаться на обновления по RSS или по E-mail, если ещё не подписаны.

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

Удобство пользования блогом

При прошлом шаблоне пользоваться блогом, на мой взгляд, было весьма неудобно, элементы располагались не на своих местах, и это было заметно.

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

Лишние плагины

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

Сейчас их число сократилось как минимум в два раза — отключены ненужные, некоторые заменены одним замечательным мегаплагином, о котором возможно расскажу в следующих постах (в открытом доступе его пока не найти).

Общее впечатление

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

Кстати, подключил поиск от Google, попробуйте что-нибудь поискать — удобно.

Благодарю за внимание и желаю вам всего самого наилучшего.
Артём Савельев

P.S. Если вдруг понадобится заказать смеситель, вы знаете как нажать на ссылку. Кстати, зависит ли от смесителя или от чего ещё распределение воды на кухне и в ванной? Ужасно, когда наслаждаешься душем, а на кухне кто-то включает воду, и тебя либо холодной, либо горячей водой внезапно отрезвляет.

Одолела меня любовь к прекрасному, и пришлось отказаться от идеи сделать 40 шаблонов за 3-4 дня. Это реально, но бесплатные шаблоны оказались бы на порядок лучше и аккуратнее. Поэтому я решил подойти к делу основательно и создать 40 качественных тем для Wordpress. Три дня ушло только на создание уникальных шапок для всех сайтов, на шаблоны я отвожу две-три недели (по 2-3 шаблона в день).

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

Для начала я создал для наших тем 40 папок на локальном компьютере и в каждую засунул папку images, содержащую шапку сайта. В дальнейшем для некоторых тем в эту папку добавится ещё пара-тройка картинок.

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

Важно, чтобы вёрстка во всех шаблонах отличалась. Важно придумать уникальные для каждого шаблона значения тегов class. Важно использовать разные стили в файле style.css. Важно не использовать элементы, которые могут дружно указать на одного единственного автора всех сайтов.

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

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

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

Приведу пример иерархии файлов в одном из шаблонов. Подробнее изучить этот вопрос можно в Кодексе Wordpress.

• images/
  • logotype.jpg
  • sidebars.jpg
• category.php
• comments.php
• footer.php
• functions.php
• header.php
• index.php
• navigation.php
• page.php
• sidebar-banner.php
• sidebar-banner_two.php
• sidebar-two.php
• sidebar.php
• single-firms.php
• single.php
• style.css
• tag.php
• taxonomy-city.php
• taxonomy-firmcat.php

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

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

</p>
<div class="navigation_pages">
<?php<br />
global $wp_query;<br />
$max_page = $wp_query->max_num_pages;<br />
$nump=100;<br />
if($max_page>1){<br />
$paged = intval(get_query_var('paged'));<br />
if(empty($paged) || $paged == 0) $paged = 1;<br />
echo '
<p>';<br />
if($paged!=1) echo '<a href="'.get_pagenum_link(1).'" class="link">1</a> ';<br />
else echo '<span class="link">1</span> ';<br />
if ($paged<=($nump/2)){<br />
$start=2;<br />
$end=$nump;<br />
}elseif(($paged+($nump/2))>$max_page){<br />
$start=$paged-($nump-($max_page-$paged));<br />
$end=$max_page-1;<br />
}elseif($paged>($nump/2)){<br />
$start=$paged-($nump/2); if ($start == 1) ++$start;<br />
$end=$paged+($nump/2); if ($end == $max_page) --$end;<br />
}<br />
if ($nump >= $max_page){$end = $max_page-1;};<br />
if($start>2) echo "<span class='text'>... </span>";<br />
for ($i=$start;$i<=$end;$i++)<br />
{<br />
if($paged!=$i) echo '<a href="'.get_pagenum_link($i).'" class="link">'.$i.'</a> ';<br />
else echo '<span class="link">'.$i.'</span> ';<br />
}<br />
if($end<$max_page-1) echo "<span class='text'>... </span>";<br />
if($paged!=$max_page) echo '<a href="'.get_pagenum_link($max_page).'" class="text">»</a>';<br />
else echo '<span class="text">»</span> ';<br />
echo '</p>
<p>' ;<br />
}<br />
?>
</p></div>
<p><!-- (c)2009 NightMan sergey@arsav.com --><br />

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

• 77.221.138.102
• 77.221.141.34
• 77.221.141.35
• 77.221.141.36
• 77.221.141.37
• 77.221.141.38
• 77.221.142.250

Похожи, не правда ли? Лучше не рисковать.

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

Желаю вам всего самого познавательного.
Артём Савельев.

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

Шаблоны, конечно, вполне симпатичные попадаются в открытом доступе, но все они какие-то неподходящие и совсем меня не радуют. А надо, чтобы радовали, иначе нехорошо и удовольствия меньше.

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

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

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

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

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

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

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

А ещё мне предстоит глубоко погрузиться в Google, чтобы найти ответы на некоторые вопросы, в частности: как отобразить страницу добавления содержимого вне админки Wordpress. Если вы знаете ответ, буду признателен, если поделитесь информацией.

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

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

Желаю вам всего самого честного.
Артём Савельев.

P.S. Кстати, Зелёный Кактус затеял акцию: за ссылку на его блог он готов написать обзор сославшегося блога.

P.P.S. На одном форуме через одного вполне авторитетного блогера заказал увеличение количества подписчиков за символическую сумму (после открытия общего доступа к услуге цена повысится и станет адекватной). Заметили прирост более 200 подписчиков? Все они подписались через Google, интересно только каким образом, и будет ли от этого толк.

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

Есть в этом мире два замечательных плагина: Theme My Login и Theme My Profile, они-то и помогут нам в нашем деле. Скачаем, установим и приступим к настройкам и модификациям.

Рабочий пример вы можете пощупать на моём тестовом сайте.

Установка

Существуют как минимум два способа установить плагин для Wordpress.

Ручная установка

1. Скачиваем архив с нужным плагином на локальный компьютер.
2. Извлекаем архив.
3. Полученную папку с плагином с помощью FTP-клиента помещаем в каталог /wp-content/plugins, который находится в папке с вашим сайтом на виртуальном хостинге (как правило).
4. В панели администратора переходим на страницу Плагины → Установленные, находим наш плагин и нажимаем «Активировать».

Автоматическая установка

Если плагин есть в репозитории Wordpress, то его можно найти и добавить на сайт прямо из админки.

1. В панели управления заходим на страницу Плагины → Добавить новый.
2. Вводим в поле поиска название плагина, нажимаем «Найти плагины».
3. Из результатов поиска выбираем нужный плагин и нажимаем «Установить», откроется окно с описанием, в нём также нажимаем «Установить сейчас».
4. Возможно вам будет предложено ввести данные для FTP-доступа.
5. После того, как плагин загрузится, нажмите на «Активировать плагин».

Настройка плагинов

Я подготовил для вас переводы этих плагинов на русский язык. Скачайте и загрузите эти файлы в папки wp-content/plugins/theme-my-login/language и wp-content/plugins/theme-my-profile/language соответственно.

• theme-my-login-ru_RU.zip
• theme-my-profile-ru_RU.zip

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

Настройка Theme My Login

General — в нашем примере мы не будем включать ни один из параметров.

Template — здесь у нас есть возможность настроить текст служебных ссылок и приветствия (Titles), а также текст служебных сообщений (Messages).

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

Redirection — после авторизации можно отправить пользователей из разных групп на разные страницы.

E-mail — здесь можно и нужно настроить сообщения, которые плагин будет отправлять пользователям по разным поводам.

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

В нужном месте шаблона вставляем следующий код:

<?php global $user_ID, $user_identity, $user_level ?><br />
<?php if ( $user_ID ) : ?><br />
СОДЕРЖИМОЕ ДЛЯ ПОЛЬЗОВАТЕЛЕЙ<br />
<?php else : ?><br />
СОДЕРЖИМОЕ ДЛЯ НЕАВТОРИЗОВАННЫХ ПОЛЬЗОВАТЕЛЕЙ<br />
<?php if ( get_option('users_can_register') ) : ?><br />
ЕСЛИ МОЖНО ЗАРЕГИСТРИРОВАТЬСЯ<br />
<?php endif ?><br />
<?php endif; ?>

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

СОДЕРЖИМОЕ ДЛЯ ПОЛЬЗОВАТЕЛЕЙ я заменил на ссылки для пользователя, причём ссылка на администрирование доступна только администраторам.

<br />
<h2 class="widgettitle">Меню пользователя</h2>
<p>Здравствуйте, <strong><?php echo $user_identity ?></strong>.</p>
<ul>
<?php global $user_ID; if( $user_ID ) : ?><br />
<?php if( current_user_can('level_10') ) : ?></p>
<li><a href="<?php bloginfo('url') ?>/wp-admin/index.php">Администрирование</a></li>
<p><?php else : ?><br />
<?php endif; ?><br />
<?php endif; ?></p>
<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Настройки профиля</a></li>
<li><a href="<?php echo wp_logout_url(get_permalink()); ?>">Выйти</a></li>
</ul>
<p>

В результате получаем примерно следующее:

СОДЕРЖИМОЕ ДЛЯ НЕАВТОРИЗОВАННЫХ ПОЛЬЗОВАТЕЛЕЙ мы поменяем на форму авторизации пользователей.

<br />
<h2 class="widgettitle">Авторизация</h2>
<form name="loginform-tml-main" id="loginform-tml-main" action="/login/?instance=tml-main&action=login" method="post">
<p><label for="log-tml-main">Логин</label></p>
<input type="text" name="log-tml-main" id="log-tml-main" class="input" size="18" />
<p><label for="pwd-tml-main">Пароль</label></p>
<input type="password" name="pwd-tml-main" id="pwd-tml-main" class="input" value="" size="18" />
<p><label for="rememberme-tml-main"><br />
<input name="rememberme-tml-main" type="checkbox" id="rememberme-tml-main" value="forever" /> Запомнить?</label></p>
<input type="submit" name="login-submit-tml-main" id="login-submit-tml-main" value="Войти" />
<input type="hidden" name="redirect_to" value="http://wptest.ru/login/" />
<input type="hidden" name="testcookie" value="1" />
</form>
<p>

Неавторизованным пользователям достанется примерно такая форма:

ЕСЛИ МОЖНО ЗАРЕГИСТРИРОВАТЬСЯ заменим на ссылки на страницы авторизации и восстановления пароля.

<ul>
<li><a href="<?php bloginfo('url') ?>/login/?instance=tml-main&action=register">Регистрация</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Забыли пароль?</a></li>
</ul>
<p>

Вот такую красотень увидят все, кто ещё не авторизовался или не зарегистрировался на сайте.

С плагином Theme My Login мы разобрались. Приступим к его товарищу.

Theme My Profile

Здесь всё предельно просто. Заходим в Настройки → Theme My Profile и выбираем группы пользователей, для которых необходимо темизировать страницу редактирования профиля.

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

#your-profile .form-table td {<br />
text-align:left;<br />
width:60%;<br />
}<br />
#your-profile .form-table th {<br />
text-align:right;<br />
vertical-align:top;<br />
width:30%;<br />
padding-top:8px;<br />
}<br />
#your-profile .form-table input {<br />
display:block;<br />
}<br />
#your-profile .form-table textarea {<br />
width:260px;<br />
}<br />
#your-profile .form-table select {<br />
height:auto;<br />
width:260px;<br />
}

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

Всего самого доброго.
Артём Савельев.

P.S. Кстати, иллюстрация к уроку создана из скриншотов недавно созданного мной блога Сергея Ройзмана, который публикует уникальную информацию для руководителей продающих подразделений крупных Российских и международных компаний, КАМов (Key Account Managers), Продакт, Сейлз менеджеров, работающих в Больших продажах (B2B и B2G).

P.P.S. Типография Галеон предоставляет полиграфические услуги в Москве — офсетная печать, современное качество.

Здравствуйте, дорогие друзья! В Москве сейчас такая клёвая погода! Тепло, безветренно, немного дождика и мои любимые вечерние московские фонарики. Всё это создаёт отличное настроение, в честь которого я поделюсь сегодня с Вами бесплатным шаблоном для Wordpress собственного производства.

• Скачать шаблон
• Посмотреть в работе

Шаблон уже переведён на русский и французский, в архив включён файл artsavius-wave.pot, который позволит переводчикам переводить его на другие языки, и логотип в формате .psd. Шаблон имеет страничку с настройками, относительно гибок, имеет четыре сайдбара (один справа и три в футере).

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

После установки советую сразу перейти на страницу настройки темы и настроить всё под себя (указать свои rss и twitter и ещё кое-чего по мелочи).

Желаю вам всего доброго!
Артём Савельев.

P.S. Сейчас активно набросился на два замечательных скрипта: один из них позволяет удобно управлять множеством сайтов из одной панели, другой умеет добывать уникальный человеческий контент. О них я расскажу в самых ближайших статьях, так что подписывайтесь на RSS, чтобы не пропустить интересности о создании и монетизации сайтов.

Если Вы счастливый обладатель движка Social Engine, то для Вас это радостная весть. Для тех, кто ещё не приобрёл эту систему, расскажу, что с её помощью можно создать собственную социальную сеть, подобную Вконтакте.ру и Facebook.com.

А весть заключается в том, что сегодня открыта новая версия сайта Social Engine Templates, который уже многие месяцы успешно держится в топе Гугла по одноимённому запросу, и теперь доступен для обновления посетителями сайта. То есть, если Вы автор платного или бесплатного шаблона, у Вас есть возможность добавить его в коллекцию. После проверки модератором, он появится на сайте.

Проект аж на шести языках, в том числе и на русском, но пока переведён только интерфейс — с контентом сложнее, будут переводится только избранные шаблоны.

Итак, если Вам нужны бесплатные или платные профессиональные шаблоны для Social Engine, Вы знете куда нужно обращаться в первую очередь.

P.S. Компания BeliSoft предлагает разработку программного обеспечения на заказ — профессиональные IT-разработки с Белорусской душой и Европейской надёжностью.