Почему на базе wp shop — это пока единственный плагин в рунете который развивается. Второе — мне понравилась его логика работы организованная через стандартные записи и дополнительные поля. Третье — с версии 3 авторы реализовали возможность подключения к robokassa, webmoney.

Изначально я планировал создать огромное руководство о том как с нуля сделать на базе wp shop красивый, яркий инет магазин. Даже для этого отрисовал универсальный современный темплейт — но потом подумал, что сделаю ошибку. Ведь если создавать все с нуля, то большинству людей это сложно будет сделать, потому что нужно как минимум знать хорошо html+css, и разбираться хорошо в wordpress, чтобы это реализовать. Кто это все умеет, то он и сам сможет сделать, а кто не умеет, то вряд ли руководство будет полезным. Поэтому, я лучше напишу как сделать инет магазин уже на основе готового сайта с любой темой, что может сделать любой новичок.

Для начала скачайте последнюю версию плагина wp shop со страницы, также плагин требует установки cforms — вы можете скачать его там же. На этой же странице есть видео по работе с плагином, а также есть пошаговая инструкция здесь. Но инструкции написаны для тех случаев, если вы устанавливаете магазин на новый пустой сайт.

Допустим у вас уже есть рабочий сайт и в нем уже есть статьи, рубрики, много материала и вы хотите сделать отдельный раздел с магазином. Реализуем мы это при помощи кастомных типов записей(post type). Есть еще одно преимущество установки магазина в отдельный раздел — это то, что вы сможете отдельно оформлять записи с товарными позициями от остальных записей на сайте. Для этого просто создайте в папке шаблона файлик single-yourpost.php, где yourpost — название созданного типа записей о котором ниже. Если ничего не создавать, то оформление самой товарной позиции будет в стандартном файле single.php

Чтобы не ковыряться в файлах движка для создания нового типа записей, можно воспользоваться готовыми плагинами. Мне нравится плагин custom post type ui, его я и опишу.

Активируем плагин и добавляем новый тип записей «Товары».

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

Advanced Label Options — здесь вы можете настроить руссификацию различных названий, вроде «добавить» и т.д. Advanced Options — здесь вы увидите функциональные опции, обязательно поставьте true напротив Has Archive — так будет доступен архив этого типа данных. Т.е. если вы перейдете по ссылке ваш_сайт/product — в нашем случае, то увидите список ваших товаров в виде ленты. В поле supports будут доступны разные системные поля которые будут выводится при добавлении записи, отключите здесь все ненужное вам. Сделать это также вы можете и уже в самой админке на странице добавления. Для этого нажмите на кнопку настройки экрана в правом углу.

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

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

Заметьте, я отметил галочкой attach to post type свой созданный ранее кастомный тип записей, тем самым привязав таксономию к нему.

Теперь когда тип записей — товары и таксономия созданы, то нужно добавить пару категорий в нашу таксономию. Если вы создавали такие же имена как на скринах, то в админке вы увидите, что появилась новая вкладка «Товары» и имеет подвкладку Категории товаров — переходим на неё и создаем пару категорий, которые будут самыми частыми у вас. В название пишем название, в ярлык пишем урл на латинице. Я добавил для примера 2 категории — компьютеры и телефоны.

Как я и говорил, создание новых типов записей и таксономии нужно только если вы хотите создать отдельный раздел на сайте. Если это не нужно, то пропускайте этот шаг и переходите к следущему — создание набора произвольных полей в админке. Это опять же проще реализовать при помощи плагинов, которых очень много для этих целей. Я покажу на примере magic fields 2. Вы можете взять и другой, но будьте осторожны, некоторые плагины добавляют в название поля свой префикс, в итоге инет-магазин работать не будет.

После установки плагина, когда перейдете на вкладку magic fields, то увидите список всех ваших типов записей и найдете там ранее созданный «Товары» — наведите мышкой и нажмите edit. Далее на странице нажимайте create a group и создавайте группу, после этого создаете поля в этой группе. Только не промахнитесь, чтобы создать поля именно в нужной группе, нужно нажимать на ссылочку рядом с группой.

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

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

Он устроен так, что любую запись будет считать как товарную позицию если в ней вы укажите дополнительное поле с определенным именем. Если у вас все организовано по типу — один товар — одна цена, т.е. у каждого товара не будет различных модицикаций, то вам хватит всего одного созданного поля cost_1, в котором вы будете писать цену. Если каждый товар будет иметь несколько разновидностей с разными ценами, то вам нужно создать несколько доп полей. Для начала подумайте сколько максимально у вас будет разновидностей с ценой и создайте нужное количество полей. Имена у них должны быть строго name_1, name_2, name_3 — здесь будете писать наименование, cost_1, cost_2, cost_3 — здесь цену. Т.е. для name_1 будет установлена цена cost_1 и т.д.

Вернемся к созданию полей.

Для цен и наименований нужно выбрать тип поля -textbox, так как здесь будем вводить всего пару слов или цифр. В настройках отображения справа — уберите галочку с Evaluate Max Length — тогда не будет вводиться ограничение на длину символов в этом поле. Для первой цены — отметьте галочку required, ведь у каждого товара должна быть хоть одна цена, чтобы все нормально работало. Для второй и дальше — можете не ставить, ведь не у каждого товара будут модификации, там где не будет, то просто не будете заполнять эти поля.

К стати, у этого плагина есть хорошее вики

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

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

Если все будет правильно, то на странице товара вы увидите в углу

Добавьте еще несколько товаров, если их у вас очень много, то в плагине есть возможность загружать позиции через excel, подробнее об этом.

Расскажу о еще одной полезной мелочи с доп. полями — например, добавим чекбокс о том есть ли товар на складе в данное время. Для этого создадим при помощи плагина поле c типом chekbox. Назовем его sclad. Теперь в файле отвечающим за вывод товара (по умолчанию это single.php), в нужном месте (обычно это после тега the_content()) внесем такой код

    На складе:
<? $value = get('sclad');?>
<? if($value):?>
да
<? else:?>
отсутствует
<? endif?>

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

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

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

<!--wp-shop text_fied['Комментарий к заказываемому товару']-->

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

Сделаем сначала страницу с корзиной, для этого в любой странице вставьте в виз редактор код [сart] — все, теперь на сайте, вместо этого тега появится корзина.

Чтобы добавить мини-корзину, например, в сайдбар через виджет, то выберите текстовый виджет, а в содержании вставьте тег [minicart]. Более подробно о вставке корзины

Вот и вся основная работа, я в 10 раз дольше писал, чем это все делать.

Теперь можно перейти к дополнительным настройкам, для начала, если вы хотите установить разные способы оплаты, то в настройках плагина поставьте галочку «Показывать способ оплаты:», все способы можно настроить в вкладке WP Shop Payments. Все сообщения, формы заказа можно настроить в cforms — плагин автоматически создает все нужные формы, но вы их можете изменить по желанию. Описание всех настроек вы найдете на страничке. Дополнительные возможности плагина можно глянуть здесь

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

300:5;500:30

где, 300 — это сумма выше которой устанавливается 5 % скидка, 500 — сумма выше которой скидка будет 30 % и т.д. Теперь скидка будет подсчитываться на странице корзины.

В общем, когда вы все сделаете, у вас будет отдельный раздел в админке, куда можете перечислять ваши товары. Плохо то, что по умолчанию во всех темах вы не увидите ваш новый тип записей, так как в ленте постов выводятся стандартные посты. Если хотите добавить вывод в основную ленту и ваших товаров, то можете внести небольшой хак в functions.php темы

// отображение статей на главной
add_filter( 'pre_get_posts', 'my_get_posts' );
function my_get_posts( $query ) {
     if ( ( is_home() && false == $query->query_vars['suppress_filters'] ) || is_feed() )
     $query->set( 'post_type', array( 'post', 'product' ) ); // ВАЖНО! product меняешь на свой тип
     return $query;
}

Или же просто укажите ссылку на архив вашего раздела с товарами, в моем примере это мой_сайт/product.

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

<ul>
<?php wp_list_categories('title_li&taxonomy=product'); ?>
</ul>

Удачи в освоении инет-магазинов.

Мониторинг сети. Практика продвижения сайтов на авторском блоге tytto.ru — понятно даже для новичка.

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

Все это есть у MODX, и не только это, а теперь по пунктам.

1. ЧПУ в MODX

Это встроенная функция, причем есть несколько параметров управления ЧПУ. Для этого есть страничка настройки Инструменты-конфигурация-дружественные URL.

Вот так я установил параметры на странице

Но перед этим не забудьте настроить плагин TransAlias. Для этого идем на вкладку Элементы — Управление элементами — Плагины — TransAlias и ставим значение “russian” в параметре Trans table в конфигурации. Также проверьте в системных событиях, чтобы стояла галочка напротив OnStripAlias.

2. Правильная настройка метатегов в MODX

В MODX есть возможность указывать описание и тайтлы для каждой страницы, а также сделать набор ключевых слов и выбирать из них ключевые слова для каждой страницы. Ключевые слова оставим в покое — как по мне, то сейчас они вообще не учитываются в поисковых системах. А вот самое важное это title. И нужно обязательно в шаблоне самой страницы, сделать вывод тайтлов. В движке есть для этого поля pagetitle и longtitle.

Я думаю это хороший подход, так как в большей части страниц можно использовать заголовок страницы как title, а где нужно сделать побольше текста в title, то можно использовать расширенный заголовок. Но как в шаблоне сделать так, чтобы было условие — «если не указан расширенный заголовок, то использовать обычный?»

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

<title>[+phx:if=`[*longtitle*]`:is=``:then=`[*pagetitle*]`:else=`[*longtitle*]`+]</title>

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

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

<meta name="description" content ="[+phx:if=`[*description*]`:is=``:then=`[[DynamicDescription]]`:else=`[*description*]`+]"/>

Плагин автоматической генерации описания можно взять здесь.

3. Перелинковка страниц

Тут я решил найти информацию в двух направлениях.

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

Второе, это контекстные ссылки. Проще говоря, это когда создаете список определенных слов и ссылок и как только в тексте встречаются эти слова, то они автоматически становятся ссылками. Что-то по типу того, как организована википедия. Для этого есть плагин Context Links.

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

4. robots.txt для MODX

Этот файлик нужно вставить в корень сайта, в нем содержатся директивы для поисковых роботов. Для MODX этот файлик обычно рекомендуют сделать таким

User-agent: *
Disallow: /assets/cache/
Disallow: /assets/docs/
Disallow: /assets/export/
Disallow: /assets/import/
Disallow: /assets/modules/
Disallow: /assets/plugins/
Disallow: /assets/snippets/
Disallow: /install/
Disallow: /manager/
Disallow: /?
Disallow: /*?
Host: yoursite.ru

5. Sitemap MODX

Карту сайта следует создать как для посетителей (в виде архива сайта), так и для поисковых роботов в виде файла xml. Ссыль на урок как это все сделать.

6. Решение проблемы с дублированием контента

Если вы включили ЧПУ в MODX, то вас ожидает одна неприятная штукенция — ваши страницы будут доступны под разными адресами (по id и по alias и т.д.) Это нехорошо, так как по сути, это дуликаты одной и той же страницы, а поисковые системы этого очень не любят.

Чтобы избавиться от этого, существует плагин SEO Strict URLs.

Также есть возможность обойтись без плагина, читайте в этом уроке

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

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

Для систематизации всей информации, я решил разбить всю статью на логические части.

• 1. Структура блогов (примеры, способы реализации, обзор главных функциональных частей)
• 2. То, что поможет сделать ваш блог узнаваемым и живым (интересные трюки и технологии, а также примеры)
• 3. Примеры лучших блогов
• 4. Разбор полетов или обзор некоторых топовых блогов рунета
• 5. Выводы.

Итак, начнем.

Структура блогов

Любой блог должен иметь функциональные части. Я выделяю такие: фон, хедер, контентная часть (обычно с лентой постов), сайдбар, футер. Конечно же, иногда некоторые части игнорируются, но все же большая часть блогов имеет их все. Но перед тем как все их рассмотреть, мне бы хотелось рассказать о ещё одной важной теме — структуре верстки блога (layout). Основной вопрос состоит в том делать ли верстку для блогов резиновой или же выравнивать по центру с шириной 900-1000, как принято на большинстве сайтов.

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

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

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

Вернемся к теме и перейдем к функциональным частям блога.

1. Хедер

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

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

Как примеры

Довольно неплохо смотрится когда хедер делают в минималистичном стиле, но с оригинальным логотипом, при этом меню размещают прямо в хедере.

Такое решение отлично подходит для сайтов ИТ-тематики.

Также главные ссылки можно не отделять от хедера, а сделать тоже графическими.

Также стоит сразу позаботится об местах для баннеров. Баннеры часто отлично смотрятся именно в хедере. Вот вам пример

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

2. Фон

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

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

3. Контентная часть

Обычно содержит ленту постов.

Здесь я бы обратил внимание прежде всего на шрифты. Заголовки делайте крупными и интересными, можно на нестандартных шрифтах. Шрифт самого контента делайте всегда стандартными легкочитаемыми шрифтами, вроде Arial, tahoma, verdana. Обратите внимание на оформление даты, а также ссылок на теги, рубрику, автора.

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

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

4. Сайдбар

Обычно на блогах ставят 1 или 2 сайдбара. Все схемы рассматривать не буду, опишу 2 наиболее удачные по моему мнению.

первая это 2 сайдбара: левый и правый + контент посередине. Пример такого сайдбара можно увидеть на сайте

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

Второй тип расположения сайдбара — один сайдбар в правой (реже левой) части сайта. Пример ниже

Такой тип наиболее универсальный и практичный. Помогает экономить много пространства, так как вывод разделов, популярных записей и т.д. осуществляется обычно через вкладки на jquery. Я рекомендую такую схему расположения элементов в правом сайдбаре начиная сверху: подписка на RSS или же другие ссылки наиболее важные для вас; баннеры или реклама; вкладки с рубриками, популярными записями, последними комментариями; теги и дополнительные блоки.

5. Футер

Сюда помещаем ещё раз название сайта, можно контактные данные + к примеру ссылки на ваши другие сайты или сайты друзей.

Вообще футер можно оформить стильно в соответствии с шапкой.

Если же ищите вдохновение для оригинального футера, то советую глянуть это

Со структурой закончили. В конце хотелось бы сказать, что взгляд пользователя обычно перемещается в виде буквы Z, а значит самым значимым местом является левый верхний угол куда стоит поместить лого, а также графику, которая создает бренд вашего сайта + в первый экран должен входить хотя бы первый пост. Далее верхний правый угол, куда следует поместить call-to-action ссылки или кнопки (например подписку на РСС или же кнопку на покупку вашей книги).

Идем дальше

Техники, которые сделают ваш блог мегазвездой

1. Цвет

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

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

2. Текстуры, векторные элементы

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

2. Размер

Можете попробовать поэкспериментировать с контрастом размеров разных элементов, например, с персонажами.

3. Логотип

Хороший логотип всегда подчеркивает стиль сайта, а также делает его узнаваемым

4. Проработанные мелкие элементы сайта

Здесь хочу описать сразу несколько элементов. Для начала скажу, что есть хороший сайт, на котором можно просмотреть отдельно взятые элементы с разных хорошо оформленных сайтов. Можете там вдохновиться, ну а теперь по-порядку.

4.1 Пагинация

Красиво прорисованная пагинация всегда говорит о том, что в дизайна сайта вложили немало усилий и делает его более дорогим

4.2 Виджеты с вкладками

Виджеты с вкладками очень хорошо экономят пространство и выглядят весьма симпатично

4.3 Оформление блока об авторе или контактных данных

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

4.4 Ссылки на похожие или популярные записи в конце поста с миниатюрами

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

4.5. Оформление комментариев

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

также можете глянуть подборку из более чем 40 вариантов оформления комментариев

4.6. Оформление кнопки rss

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

Можно даже аннимацией

Советую глянуть ещё эту статью, а также вот такую огромную подборку кнопок

4.7 Оформление элементов статьи

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

Если не хотите сильно заморачиваться, то можете попробовать этот плагин

4.8 Фавиконка

Не забываем и об этом важном элементе. Если не умеете делать, то расскажу простой способ. Готовите небольшую картинку, идете на сайт favicon.ru — заливаете картинку, получаете фавиконку, которую нужно вставить в корень сайта.

Переходим к следующему пункту.

3. Примеры лучших блогов

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

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

4. Потрошилка блогов рунета

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

1. Блог Димка.

Создавался в студии блогоарт, поэтому имеет множество элементов дизайна присущие этой студии. В целом производит хорошее впечатление, все светлое и симпатичное. Если бы не одно большое НО — обилие рекламы. Ну фиг с ней с той растяжкой и баннерами 468*60, но вот этот огромный небоскреб справа убивает напрочь диз и создается впечатление, что в первом экране больше рекламы, чем текста. Нехорошо Димка как-то.

Но необычно и интересно смотрится футер

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

2. SeoBlade

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

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

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

3. Блог Шапранова

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

Понравилось также оформление сайдбара. Хорошо оформлены вкладочки. Понравился также шрифт текста и расстояние между строчками.

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

Паша, верни человеческие комменты людям.

4. Inspire me

Симпатичный стильный дизайн на основе темы glow от elegantthemes.com. Хорошо подобраны цвета, логотип. Большие и яркие кнопки подписки в сайдбаре. Хорошо используется пустое пространство между блоками и строками текста, что создает впечатление воздушности и легкости.

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

5. Блог Маула

Чем мне нравятся все сайты Маула — это то, что все они имеют единный стержень в стиле, но при этом не копируют друг друга на 100%. Очень стильно и хорошо поддерживает бренд.

Хорошо подобраны все элементы дизайна, очень понравился сайдбар.

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

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

И все бы отлично на сайте — но эта огромная шапка с Одри. Я понимаю, Маул, что ты от неё без ума (а может, это просто твой маркетинговый ход), но зачем же так навязывать свою любовь читателям. Уменьшить шапку по высоте где-то в 2 раза — было бы отлично. А то даже на широкоформатном мониторе я вижу в первом экране только промо-иллюстрацию с Одри, баннеры и кусочек поста.

6. Блог Терехова

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

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

Что не нравится — комменты. Что сама форма, что сами комменты.

7. Блог Бормалея

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

А какой отпадный футер!!!!!!!!!

Сразу видно, что работал профи-дизайнер.

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

Ну и ещё увеличил бы line-height (пространство между строками текста), а то сильно сливается.

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

5. Выводы и ссылки

Ну вот и подошла к завершению большущая статья о дизайнах, надеюсь вы найдете для себя в ней полезное.

Какой идеальный дизайн для блогов? Каждый видит что-то свое, на 100% всем не угодишь. Но основные признаки можно выделить:

• Бренд. Это может быть и красивый логотип, интересная графика с персонажем или иллюстрации
• Хорошо подобранные текстуры фона. Чтобы и не мешали читать, при этом подчеркивали дизайн и контент
• Функциональность. Сюда бы я отнес информативность и оформление сайдбара, ссылки на похожие записи, и т.д.
• Типографика. Легкие, хорошо читаемые шрифты и красивые заголовки.
• Хорошо проработанные мелкие элементы дизайна, а также комментарии и формы.
• Ну и не забывать, что content is a king

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

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

Ну и напоследок, немного литературы

http://www.incomediary.com/make-your-blog-stand-out-from-the-crowd/

http://www.problogdesign.com/design/7-elements-to-make-your-blog-look-great/

http://www.1stwebdesigner.com/inspiration/blog-designs-design-functionality/

http://www.instantshift.com/2009/09/13/70-fresh-and-inspirational-blog-designs/

http://www.blogdesignblog.com/blog-design/5-simple-ways-to-make-your-blog-design-pop/

http://www.blogdesignblog.com/blog-design/how-to-blog-design-style-guide/

Давно хотел написать этот цикл статей, но останавливала одна вещь, о которой будет сказано ниже.

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

Что же меня останавливало? На самом деле я хотел написать статью о том, как без плагинов создавать абсолютно любую структуру сайта, но ведь это смогут реализовать только те, кто разбирается в wordpress и его коде, а такие уже и сами знают как это сделать. А так как большая часть пользователей — новички, то им нужно что-то более простое. Поэтому пришлось изучить все плагины, которые работают с новой функцией в wordpress 3 версий — custom post type.

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

Реализуется это так:

• типы записей (к примеру это будет отдельный раздел на сайте, где будут новинки кино) — через custom post type (типы записей)
• отдельные рубрики и метки (к примеру, это будет рубрики «комедия», «ужастики» и т.д., а также метки-актеры) через custom taxonomy (таксономию)
• отдельные значения в админке (к примеру, вы захотите сразу указывать отдельно в админке рейтинг фильма на кинопоиске) — custom meta box. (мета блоки)

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

Сначала ничего путевого найти не удавалось. То плагины были слишком простые, то слишком сложные, то не хватало функционала. Единственное, что сразу нашел интересного — custom post type ui. Очень хороший плагин, он умеет создавать новые типы записей и таксономию, но к сожалению в нем нельзя прописывать отдельные поля ввода для каждой записи, поэтому поиски продолжились, пока не нашлось самое лучшее решение о котором я и расскажу.

И решение это — серия плагинов More Types, More Fields, More Taxonomies.

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

1. More Types — плагин для создания новых типов записей.

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

После активации, увидите страничку с кнопкой «Add new Post Type» — жмем её

Первые 2 значения Post type name singular, Post type name plural — это название вашего типа записей. Как видите, первое значение я написал на латинице — оно будет браться для функций движка (n.b. чтобы не было путаницы, пишите с маленькой буквы), второе — на русском, это значение будет использовано для админки.

Hierarchical — это значение указывает сможет ли тип записей иметь дочерние элементы (к примеру, как страницы и подстраницы) или нет.

Menu icon — сюда вставляем ссылочку на иконку для админки размером 16*16

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

Features — здесь указываем какой стандартный набор полей будет у этого типа записей.

Additional boxes — это поле будет доступно только при включенном плагине More Fields о котором ниже

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

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

Menu position — позиция блока в админке — вводим цифру

Enable permalinks — включает ЧПУ

Permalink base — ЧПУ база, т.е. как будет выглядеть урл вашей записи. Например, введем book, тогда ссылки этого типа записей будут выглядеть как сайт.ру/book/названиестатьи

Exclude from search — включить или нет тип записей в поиск

Далее идет много значений вроде Edit capability и т.д. — здесь нужно выбрать кому будет доступны права на добавление, удаление, чтение этого типа записей

После это идут значения ‘Add New’ text и т.д. — здесь вы можете перевести стандартные фразы, которые будут выводится в админке.

После того как все заполните и сохраните у вас должно появиться что-то вроде

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

2. More Fields — плагин для добавления новых полей ввода.

Как и в предыдущем случае, после активации в настройках плагина вам нужно будет нажать на кнопочку «Add new input box». Здесь мы укажем имя для новой группы полей и в каком типе записей они будут доступны. Потом сохраняем и возвращаемся к настройкам плагина, где вы увидите вашу новую группу. Жмем на неё. Здесь вы увидите, что можно добавлять новые поля нажав на кнопку Add new Field. Делаем это.

Field title — название поля

Custom field key — здесь на латинице пишем идентификатор, который будем использовать в дальнейшем для вывода содержимого на сайте. Стоит сделать здесь отступление — в чем прелесть данного плагина, он не пишет данные в какие-то свои таблицы. Любое поле, которые вы здесь создаете — автоматически будет трансформироваться в custom field — т.е. тоже самое вы могли бы сделать, если бы в админке добавляли дополнительное поле, прописывали бы его значение и т.д. Просто плагином мы можем сразу создать нужный набор полей, и кроме того, можем вставлять не только поле для ввода, но и другие типы форм — селекты, выбор даты, поле для ввода файлов и т.д.

Caption — здесь, если нужно пишем какое-то описание к полю, которое будет выводится в админке.

Далее идет выбор типа поля. Можете сделать его чем угодно, даже можно добавить стандартный виз редактор к полю, для этого отметьте WYSIWYG. Если нужно сделать выпадающий список с выбором значений, отметьте галочкой select, а в самом нижнем поле перечислите все значения через запятую, причем для значения по умолчанию поставьте рядом с ним символ звездочки, вот так Drums, Bells, *Whistles

На этом, с этим плагином все.

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

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

3. More Taxonomies.

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

Hierarchical — указываем будет ли новый параметр иметь вложенные. Как пример, рубрики — имеют вложенные рубрики, а метки — нет.

Taxonomy slug — указываем на латинице название, которое будет использоваться в урле новой таксономии.

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

ENG

Custom post type

http://justintadlock.com/archives/2010/04/29/custom-post-types-in-wordpress

http://wpengineer.com/1969/impressions-of-custom-post-type/

http://thinkvitamin.com/code/create-your-first-wordpress-custom-post-type/

http://wptheming.com/2010/07/custom-post-type-resources/

http://sicdigital.com/2010/07/create-custom-post-type-for-image-upload-wordpress3/

http://codex.wordpress.org/Custom_Post_Types

Custom taxonomy

http://justintadlock.com/archives/2010/06/10/a-refresher-on-custom-taxonomies

http://codex.wordpress.org/Custom_Taxonomies

Add custom metabox

http://wptheming.com/2010/08/custom-metabox-for-post-type/

http://www.tanzilo.com/2009/01/15/wordpress-adding-a-custom-option-box-and-developing-file-upload-plugin/

РУ

Новые типы записей

http://www.wordpresser.ru/razrabotka-na-wordpress/nastraivaemye-tipy-zapisej-v-wordpress-3-0.html

http://dandreev.com/blog/wordpress/sozdanie-biblioteki-ili-custom-post-types/

Таксономия

http://dreamhelg.ru/2010/05/intorducing-into-custom-taxonomy-wordpress-3-0/

В данной статье речь пойдет о реальных техниках увеличения количества rss подписчиков. Это не спам, не рассылки, не накрутка.

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

Итак, сначала хотел бы поговорить о серых методах. Все они мне известны (по крайней мере так думаю). Все они состоят в 2 вариантах — или накручивания подписчиков сервисов, которые использует feedburner (типа friendfeed, feedfetcher и т.д.) или же накрутке подписчиков через фейковую e-mail подписку. В первом случае, способ крайне нестабильный, так как feedburner в один момент может перестать учитывать эти сервисы (что собственно и происходит сейчас). 2 — реальный, но уверен, что рано или поздно его прикроют тоже. Ну и ещё есть разные rss-агрегаторы, прогон по которым даст вам 30-100 подписчиков (больше просто агрегаторов нету)

Но есть одно но — нахрена вам накрутка? Нормальные рекламодатели никогда не смотрят только на счетчик, а лично вам накрутка до одного места, так как посетителей с неё не получить (ну разве что с рейтингов).

Поэтому поговорим о реальных способах увеличить кол-во подписчиков.

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

Я разделю все способы на внешние и внутренние.

Внешние способы повышения количества rss подписчиков.

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

Далее, покупаем трафик.

Наверное, самый популярный способ — контекстная реклама adwords. Тем более на форумах можно купить купоны на 1500р за 200-500р.

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

Конверсия очень сильно зависит от качества объявления, лендинга и ключевого слова. Не пытайтесь зацепить обширную аудиторию — лучше цепляйте узкую аудиторию которой 100% будет интересен ваш сайт.

По цене, на тех сайтах, что я пробовал — получалось в среднем около 15-20 у.е. за 100 посетителей (это без купонов)

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

Внутренние методы увеличения подписчиков

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

1. Greetbox

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

2. Comment redirect

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

3. Wp-notify

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

4. Плагины сокрытия контента от неподписчиков rss

Поискав в интернете, я нашел несколько таких плагинов. Feedonly (скрывает часть текста в статье, делая её доступной только в rss ленте), wprsslock (похожий на предыдущий, но гораздо продвинутей, но платный).

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

5. Создание бонусного раздела на сайте.

Собственно этот метод я и придумал недавно и сейчас пробую реализовать.

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

В этом окошке просто укажите, что доступен vip/бонусный и т.д. раздел, перечислите все материалы в нем и дайте ссылочку на rss, чтобы пользователь не пропустил не дай бог ничего нового.

При желании, вы можете сделать так, чтобы этот раздел был доступен только в rss канале. В этом поможет плагин Ultimate Category Excluder. Правда, все подобные плагины давно не обновлялись и часто есть проблемы с новыми версиями wordpress.

А вот удалить вывод определенной категории с главной страницы можно и без плагина. Вставляем в functions.php

function removeFromHome($query) {
if ($query->is_home && !(is_paged()))
{$query->set('cat','-177, -179');}
return $query; }
add_filter('pre_get_posts','removeFromHome');

177 и 179 — это id категорий, которые нужно удалить. Удаление при этом происходит с ленты на главной странице, сами же посты остаются в архивах. Я думаю, что так даже лучше, пускай этот раздел будет доступен не только в rss, но при этом не выводился в общей ленте постов.

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

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

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

// add custom feed content
function add_feed_content($content) {
if(is_feed()) {
$content .= '<p>This article is copyright &copy; '.date('Y').'&nbsp;'.bloginfo('name').'</p>';
}
return $content;
}
add_filter('the_excerpt_rss', 'add_feed_content');
add_filter('the_content', 'add_feed_content');

Вместо

<p>This article is copyright &copy; '.date('Y').'&nbsp;'.bloginfo('name').'</p>

вставляйте что вам нужно.

Ну или воспользуйтесь плагином Ozh Better Feed