Как создать тему для WordPress самому: уроки с видео. Как создать свою тему для WordPress? Среди основных достоинств WordPress платформы можно выделить

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

Первая часть.

Навигация по странице: wordpress создание сайтов для начинающих

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

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

Техническое задание: создание сайта на wordpress с нуля для начинающих

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

Ну что, скачали макет, посмотрели, разобрались? - теперь нам нужно сделать сайт визитка своими руками.

Пошаговая инструкция создание сайта на вордпресс

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

2) В отдельном окне открываем папку со скачанными хтмл файлами, надеюсь вы их распаковали из zip архива 🙂 . Папка тут называется "testsite"

3) Находим и копируем из папки "testsite" файл "style.css" в папку "shabtestsite". А также копируем папку "img" в "shabtestsite" .

4) Открываем файл "style.css" в каталоге "shabtestsite" и забрасываем туда в самое начало вот такой код:

/*
Theme Name: Test-Site
Description: WordPress themes by сайт

Смотрите как на скине (откроется поверх всех окон в просмотре):

Этим кодом мы сообщаем WordPress название нашего шаблона, его автора и версию. Без этого файла шаблон работать не будет.

Файл "style.css" оставляем открытым, он нам нужен в следующем шаге.

5) Продолжаем править "style.css". Теперь нам нужно забросить в конец стилей вот такой код:

Aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; margin-right:20px; margin-bottom:15px; } .alignright { float: right; margin-left:20px; margin-bottom:15px; } .wp-caption { margin: 10px; padding-top: 4px; text-align: center; } .wp-caption img { border: 0 none; margin: 0; padding: 0; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } .wp-pagenavi{ padding:30px 0px 5px 0px; font-size:14px; text-align:center; }

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

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

6) На этом, файл "style.css" можно сохранить и закрыть, пока мы его править не будем. Вот так у меня сейчас выглядит каталог "shabtestsite":

7) Работаем дальше, теперь нам нужно в нашей папке шаблона "shabtestsite" создать текстовый файл "header.php" в кодировке, как я писал ранее utf-8 без BOM. Делается это очень просто, достаточно войти в нотепад ++ или дримвьювер, нажать на первую вкладку файл, потом выбрать создать. Далее, если кодировка отличная от utf-8 мы можем просто перекодировать, выше я писал как это сделать.

8) Файл "header.php" оставляем открытым, если закрыли то открываем заново. Также из папки "testsite", где у нас хтмл макет лежит, нам нужно открыть файл "index.html".

9) В файле "index.html" выделяем код от начала до тега "

", как на рисунке и копируем его. Вставляем этот кусок в файл "header.php", в самое начало.

10) Теперь нам нужно сделать пхп вставки в "header.php" для вывода динамического контента, что б создать сайта на wordpress.

10.1) Найдите код "": сюда мы должны добавить функцию wp_title() - для вывода СЕО заголовков наших страниц. Вот так получится:

<?php wp_title();?>

10.2) Найдите код "": здесь нам нужно прописать абсолютный путь к теме, а конкретно к стилям. Для этого вызовем функцию bloginfo("stylesheet_directory") с таким параметром. Будет вот так выглядеть:

/style.css" rel="stylesheet" type="text/css">

10.3) Также, перед закрывающимся тегом "", нам нужно вставить вот такой кусок кода:

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

10.4) Дальше ищем код "" и для ссылки с логотипа ставим bloginfo("url") (на главную), а для изображения опять прописываем абсолютный путь, как мы делали для стилей в п. 10.2. Вот так получится:

" id="logo">/img/logo.svg" alt=""/>

10.5) Ищем тег "

" и удаляем все что у нас внутри. На место удаленного кода мы вставляем функцию wp_nav_menu, вот так должно получиться:

11) Сохраняем файл "header.php" и проверяем с моим скином, должно выйти один в один вот так (код не добавляю, в конце будет архив шаблона для скачивания целиком):
12) Можем закрывать файл "header.php", предварительно все сохранив.

13) Аналогично п.7, создаем в каталоге "shabtestsite" файл с именем "page.php".

14) Из уже открытого файла "index.html" нам нужно скопировать весь хтмл код, начиная с "

" до "
". Сначала выделяем, потом копируем, как мы это уже делали.
Скопированную часть нужно вставить в файл "page.php".

14.1) Самая первая пхп вставка - для подключения файла "header.php" к странице типа page. Вставку нужно сделать на первую строку.

14.2) Находим тег "

" и после него вставляем:

Это наше начало основного цикла WordPress. Тут будем выводить динамический контент в перемешку с хтмл тегами.

14.4) Вместо вот такого хтмл "

Заголовок

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

. (Не путать плз. с СЕО заголовком. Это разные вещи.)

14.5) Находим начало "

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

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

14.7) По аналогии с п.7, в "shabtestsite" создаем файл с именем "sidebar.php".

14.8) Создание сайта на wordpress продолжается, в файле "page.php" нам нужно выделить и скопировать блок, который начинается с "

" и заканчивается "
". Вот он:
Вставляем этот код в файл "sidebar.php", и пока оставляем его.

В файле "page.php", на место выделенного кода, нужно вставить вот такой код подключения сайдбара:

14.9) Сохраняем файл "page.php", который сейчас должен у вас выглядеть вот так:

15) Создание сайта на вордпресс набирает обороты, если вы закрыли файл "sidebar.php", то его нужно открыть заново, будем править его. Сейчас я покажу вам как создать сайт на wordpress с блоком новости в сайдбаре. Будем делать дополнительный цикл WP.

15.1) После этого тега "

" вам нужно вставить выборку из категории Новости. Выглядит она вот так:

global $post;
$tmp_post=$post;
global $more;
$tmp_more = $more;
$tpost=get_posts("cat=1&posts_per_page=3");
if($tpost){
foreach($tpost as $post){setup_postdata($post);
?>

Если решим что 3 новости для нас много или мало, нужно менять вот этот параметр posts_per_page=3.

Продолжение: wordpress создание сайта бесплатно

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

2 голоса

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

1. Сбылась мечта идиота

Немного отвлеку вас от разбора основного вопроса статьи и поделюсь радостью. Сегодня по почте пришла моя карта Яндекс Деньги. Можете похихикать, типа чему тут радоваться? Но имейте ввиду, я живу в небольшом городке на Дальнем Востоке, цивилизация сюда доходит с опозданием. Здесь у половины населения вообще нет пластиковых карт, а что такое знают один человек из двадцати, в лучшем случае. Провинция.

Карта шла 21 день, и вот сегодня пришло СМС, что карта ожидает меня на почте. Естественно, почтовое извещение я ждать не стал, ведь это Почта России:). Сходил и получил вот такой конверт, внутри Инструкция и приветственной письмо с самой картой.


Наконец-то дождался. Вот он долгожданный конвертик.
Внутри инструкция пользования картой и письмо.
Внутри письма прилеплена сама карта.
Поздравляю! Себя.

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

А какими картами вы предпочитаете пользоваться, и почему?

Теперь по существу сегодняшнего вопроса.

2. Дизайн

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

2.1. Вы нанимаете дизайнера

Не так давно работал над полной доработкой сайта дверей. Меня позвали, потому что портал не приносил никакой пользы. В его дизайн угрохали 60 000 рублей и ничего. Один-два человека в месяц, которые сбегали быстрее, чем с парохода «Титаник».

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

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

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

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

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

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

Работа с соискателем отнимает время и деньги. Теоретически, он может оказаться довольно неплохим в том случае если заказчик точно формулирует свои желания. Фактически – это утопия, особенно если вы новичок. Исполнитель должен задавать грамотные вопросы и провести большую работу, а не выдавать сходу 10 000 предложений.

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

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

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

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

Я не просто так решил пройтись по дизайнерам. Наболело. Воюю с ними регулярно.

2.2. Бесплатные или платные шаблоны

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

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

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

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

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

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

2.3. Вы можете сделать дизайн сами

Это будет довольно сложно и, возможно, придется запастись не одним томом из серии «Основы коммерческого веб-дизайна », «Основы CSS », «HTML для начинающих » (по ссылкам можете скачать их бесплатно), просмотреть не один десяток видео уроков, а также пройти через ряд сложностей и неудач. Но в принципе, если вы решитесь на этот шаг - мое почтение. Хватит сил, мужества и упорства реализовать затею - нереальный респект!

3. Базовая настройка – пошаговая инструкция

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

Главная страница – самый важный элемент вашего сайта. Настроим ее: для этого перейдем в «Настройки – Чтение»:

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

В RSS ленте тоже должно быть 6 новостей. Это увеличивает шансы на обретение популярности.

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

Для каждой статьи в ленте рекомендую отражать «Анонс», а не «Полный текст». Так вы уменьшите длину главной страницы, сможете более точно вычислить какие ваши публикации пользуются наибольшей популярностью (для этого мы потом установим Яндекс Метрику). Помимо этого, из RSS-ленты люди будут заходить на ваш сайт, а не читать информацию со стороннего источника. Нам это не нужно.

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

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

Под этим пунктом вы найдете раздел: «Перед появлением комментария».

В самом низу раздела запрятана самая важная кнопка: «Сохранить изменения». Не забудьте ее нажать.

Теперь поговорим о плагинах. Ну, во-первых, что это такое? Если по-простому, то сейчас у вас появился телефон или новый компьютер (сайт), wordpress – это все равно что windows или android (операционная система), а плагины – это дополнительные приложения, которые будут помогать вам в работе.

Сейчас вам нужно установить плагин ЧПУ (человеко понятные урлы). Адрес страницы с информацией, отображаемая в поисковой строке, в простонародье именуется урлом.

Сейчас на вашем сайте она выглядит крайне непрезентабельно. Часть написана кириллицей, а часть латиницей. Установите плагин «Rus-to-lat», чтобы этого исправить.

Зайдите в раздел плагины и введите его название в поисковую строку.

После нахождения наживаете кнопку «Установить».

И активируйте плагин.

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

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

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

В WordPress можно создавать страницы (page) и записи (post). Отличаются они тем, что записи: попадают в ленту на главной странице; для записей указываются категории; записи не могут быть древовидными, а страницы: используются для такого содержимого как "Обо мне", "Контакты", "Карта сайта"; не имеют категорий, а имеют древовидную структуру. Записи обычно предназначены для хронологической информации (по времени добавления), а страницы для древовидной структуры не зависимой от времени. Для примера, эта статья опубликована как "запись" в рубрике "Кодекс", а ссылки в меню шапки ведут на страницы: Функции .

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

Создание страниц в WordPress

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

Способ 1: шаблон страницы через файл с произвольным названием и подключением его в админ-панели (классический способ)

Это самый распространенный способ создать шаблон страницы в WordPress. Для этого нужно создать.php файл, например, tpl_my-page.php в папке темы и в самом начале файла вписать пометку, что созданный файл является шаблоном для страниц:

Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать "шаблон":

С версии WordPress 4.7. такие шаблоны страниц можно создать для любого типа записи, а не только для page. Для этого дополните комментарии строкой: Template Post Type: post, page , где post, page - это названия типов записей к которым относится шаблон.

/* Template Name: Мой шаблон страницы Template Post Type: post, page, product */

Преимущества:

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

  • Можно получить только записи с указанным шаблоном. Например, можно вывести все страницы с шаблоном «Услуги» (файл servises.php). Иногда это удобно. Название файла шаблона хранится в метаполе _wp_page_template , поэтому чтобы вывести страницы с указанным шаблоном нужно создать запрос по метаполю (см. WP_Query).

Недостатки:

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

Как это работает:

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

Template Name: ***

Строка может располагаться где угодно и как угодно в файле.

Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок "Атрибуты страницы".

При публикации страницы, в произвольное поле _wp_page_template записывается название файла шаблона или default , если шаблон не указан:

Wp_page_template = default
_wp_page_template = tpl_my-page.php

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

Способ 2: шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)

При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить:


Для создание шаблона этим способом, вам нужно узнать слаг страницы и создать файл в папке темы. Допустим, наш слаг как на картинке равен contacts , тогда создадим в теме файл page-contacts.php . и заполним его нужным кодом (можно скопировать содержимое из файла шаблона page.php и отредактировать под себя). Все, теперь при посещении страницы мы должны увидеть новый шаблон. Аналогично можно взять ID (пусть 12) страницы и создать файл page-12.php .

Достоинства:

Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке.

Недостатки:

Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID).

Практически бесполезен при написании шаблонов, а тем-более плагинов. Его можно использовать, когда правишь свой сайт, в котором слаг или ID страницы известны заранее.

Как это работает:

WordPeress подбирает какой файл использовать в следующем порядке (файлы должны быть в корне темы):

  • {любое_название}.php (когда используется шаблон страницы)
  • page-{ярлык_записи}.php
  • page-{ID_записи}.php
  • page.php
  • singular.php
  • index.php

Способ 3: шаблон страницы через фильтр "template_include" (коддинг)

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

// фильтр передает переменную $template - путь до файла шаблона. // Изменяя этот путь мы изменяем файл шаблона. add_filter("template_include", "my_template"); function my_template($template) { # аналог второго способа // если это страница со слагом portfolio, используем файл шаблона page-portfolio.php // используем условный тег is_page() if(is_page("portfolio")){ if ($new_template = locate_template(array("page-portfolio.php"))) return $new_template ; } # шаблон для группы рубрик // этот пример будет использовать файл из папки темы tpl_special-cats.php, // как шаблон для рубрик с ID 9, названием "Без рубрики" и слагом "php" if(is_category(array(9, "Без рубрики", "php"))){ return get_stylesheet_directory() . "/tpl_special-cats.php"; } # шаблон для записи по ID // файл шаблона расположен в папке плагина /my-plugin/site-template.php global $post; if($post->ID == 12){ return wp_normalize_path(WP_PLUGIN_DIR) . "/my-plugin/site-template.php"; } # шаблон для страниц произвольного типа "book" // предполагается, что файл шаблона book-tpl.php лежит в папке темы global $post; if($post->post_type == "book"){ return get_stylesheet_directory() . "/book-tpl.php"; } return $template; }

Такой код нужно разместить в файл темы functions.php или в плагин, или подключить как-то еще. Как видно из примера во время фильтра template_include уже работают условные теги, установлены глобальные переменные: $wp_query , $post и т.д.

Достоинства:

    Можно установить шаблон для любой страницы или группы страниц. Практически полный карт-бланш в действиях.

  • Можно создать шаблон при написании плагина.

Недостатки:

Необходимость писать код и отдельно его подключать (например, в functions.php темы).

Разработка уникального сайта достаточно дорогое удовольствие, доступное далеко не каждой компании, не говоря уже про начинающих бизнесменов. Сама разработка и тем более программирование уникальных модулей обойдется совсем не дешево. По данным компании Goal Europe, стоимость одного человеко-часа разработчика в Америке составляет около $40-60, в России (Москве и Санкт-Петербурге) от $20 до $30, в Украине этот показатель держится на уровне $20-25 (Киев), а в регионах не превышает $15 в час. Помимо разработчиков необходим еще как минимум UI/UX дизайнер. Стоимость опытного UI/UX дизайна сопоставима со стоимостью квалифицированного разработчика. Каждый дизайнер имеет свой стиль: кто-то любит чистые и легкие интерфейсы, кто-то пытается максимально разбавить функциональный сайт всевозможной графикой, а некоторые считают, что нет ничего лучше флэта и упорно продвигают это дизайн направление. В этой статье речь пойдет о том, как не потеряться во всех нюансах и разработать функциональный и эффективный сайт?

Но сегодня для того, чтобы начать свой бизнес в интернете не нужно заказывать услуги таких дорогостоящих специалистов, как разработчики и UI/UX дизайнеры. Отличная альтернатива разработке индивидуального сайта – это адаптация шаблонного сайта. Это значительно дешевле, проще и быстрее. Но как определиться, с какой системой работать и какой шаблон выбрать?

Существует масса шаблонов написанных для различных систем управления контентом CMS (англ. Content management system), таких как WordPress, Drupal, Joomla, Magenta и прочие. По данным ресурса builtwith половина сайтов в интернете сделаны на базе WordPress.

Почему именно WordPress?

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

Среди основных достоинств WordPress платформы можно выделить:

Абсолютно бесплатная CMS система

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

Множество плагинов

Возможности WordPress можно расширить с помощью бесплатных или платных плагинов. Более того, подключая плагин вы получаете постоянное обновление и поддержку. За относительно небольшую стоимость платных плагинов можно постоянно поддерживать на должном уровне техническую составляющую сайта за счет обновлений самого WordPress и плагинов. Среди самых распространенных плагинов для вордпресс:
  • WooCommerce – плагин для создания интернет-магазина на базе WordPress.
  • WPML – популярный плагин для создания многоязычного сайта.
  • Contact Form 7 – плагин для создания контактных форм.
  • NextGEN Gallery – плагин для создания и управлении галереями.
  • Yoast SEO – плагин для оптимизации SEO данных сайта.
Существует огромное разнообразие других бесплатных и платных плагинов, некоторые из них можно найти на официальном сайте WordPress .

Адаптивность

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

Дружелюбность к SEO

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

Огромное сообщество поддержки

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

Множество относительно недорогих разработчиков

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

Платные и бесплатные шаблоны

Что касается шаблонов, так называемых тем, то их разнообразие поражает даже самое яркое воображение. Сегодня существует множество маркетплейсов с тысячами разнообразных темплейтов для WordPress. Среди лидеров рынка такие ресурсы, как:

Маркетплейсы

Однозначным лидером среди ресурсов с WordPress темами является Themeforest , как по количеству шаблонов, так и по их качеству. Общее количество WordPress шаблонов на маркете приблизительно 6,5 тысяч.

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

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

Бесплатные или платные шаблоны?

Однозначно среди бесплатных шаблонов есть весьма достойные. Однако если задача сделать стильный и функциональный сайт, то рекомендация выбирать среди платных шаблонов. Средняя стоимость платных тем составляет от 29 до 64 долларов. Однако за эти деньги в большинстве случаев включены некоторые платные плагины. Самые часто используемые плагины в платных темах – это Visual Composer и Slider Revolution . Только стоимость этих двух плагинов уже равна стоимости платного шаблона. А некоторые премиум темы включают в себя намного больше плагинов. По мимо всего, за деньги, потраченные на шаблон, обеспечена первоклассная поддержка: специалисты технической поддержки помогут разобраться с разнообразными возникшими вопросами . Возможности кастомизации платных шаблонов достаточно широки. Например, мультипурпоз темы отлично подойдут как для корпоративного сайта большой компании, так и для личного сайта-порфолио. Ну и, конечно же, существуют узконаправленные шаблоны заточенные под конкретные направления деятельности: например, сайты, посвященные свадебной тематике , или сайты юридических компаний .

Установка шаблонов WordPress

Установка тем не требует особых знаний и занимает совсем не много времени. Существует два способа установки нового шаблона.

Способ 1

  1. Для начала нужно скачать и распаковать архив с шаблоном на компьютер
  2. С помощью файлового менеджера (например Total Commander или Finder), загрузить папку с темой в директорию wp-content/themes.
  3. Зайти в Панель управления сайта и в меню WordPress выбрать опцию «ВНЕШНИЙ ВИД» –> «ТЕМЫ». В списке должен появиться новый шаблон
  4. Далее необходимо выбрать новую тему и активировать её

Способ 2

 1. Зайдите в «ВНЕШНИЙ ВИД» –> «ТЕМЫ», в верхней части страницы перейдите в «Установить темы»

3. И там уже загрузить нужную тему

Примечание! Тема должна быть в архиве zip.


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

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

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

Шаг 1. Регистрируем доменное имя

Доменное имя это просто название вашего будущего сайта, имя моего — сайт. За это имя вы и платите в среднем 400 рублей в год. А платите регистратору – он помогает зарегистрировать любое свободное имя на вас. Можете прямо сейчас зайти к нему и пофантазировать, повыбирать имя для своего будущего блога, и посмотреть цены, все свободные имена потенциально ваши. Вот например зайдите к моему регистратору — https://www.reg.ru. Это интересно!

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

Шаг 2. Покупка хостинга

Хостинг – это дом в котором будет жить ваш проект. То есть все страницы которые вы создаете, форум или интернет магазин должны где-то храниться, и быть доступными 24 часа в сутки. Это место вам и предоставляет хостинг-компания. Так, что приготовьте 1300 рублей и на год у вас хостинг есть.

Эти компании будут завлекают различными тарифными планами, но вам, как новичку, нет необходимости брать дорогой тариф. Возьмите самый простой. Апгрейдить его всегда успеете. Если вам не понравиться блоггинг, и вы забросите свой сайт через месяц, зачем платить больше сейчас? Или наоборот, ваш проект будет набирать тысячи посещений в день – перейдете на другой тариф, с более серьезными серверами и возможности.

Опять-таки, новичкам предлагаю последовать моему примеру и остановить свой выбор на Хостинге Timeweb . Все проекты, в зародыше у меня в этой компании. Например, этот блог только через 2 года я перенес на другой хостинг, буквально в том месяце. Так, что если вы твердо решили сделать себе блог, заходите и регистрируйтесь в Timeweb.

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

Шаг 3. Установка Вордпресс

Самый легкий и быстрый шаг – одна минута, несколько кликов и у вас свой сайт.

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

Почему Вордпресс и что это такое?

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

Таких двигателей существует огромное количество, и платных и бесплатных, и дорогих и дешёвых: Joomla, Drupal, Datalife Engine, uCoz, 1C-Битрикс – куча. У всех свои достоинства и недостатки. Можно сделать сайт на любой из них. Если вы хотите себе блог, но не на Вордпресс, в интернете написано много инструкций по их настройке и работе с ними. Я рекомендую Вордпресс. На моем сайте как раз этот движок. Я не буду расписывать вам его преимущества в этой статье, просто посмотрите, как я его настроил, и оставайтесь со мной дальше. Сделаем блог и вам.

Порекомендовать шаблон я могу только один, от моего бывшего программиста, с которым мы разрабатывали этот блог. В плане его разработок я уверен. Тема Root например, или Yelly если вы ориентированны на соцсети.

Шаг 4. Внешний вид и настройки блога

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

Это уже частности, а сейчас я хочу затронуть более глобальную тему, о которой надо подумать еще перед покупкой домена!

Оно Вам надо?

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

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

И прежде чем думать о заработке, ответьте себе на эти три вопроса:

  1. Будет ли ваш сайт лучше чем у конкурентов?
  2. Кто ваша целевая аудитория?
  3. Какую проблему посетителей вы будете решать?

Я думаю, вы поняли основные моменты. Решайтесь и в следующих статьях узнаете все тонкости. И вот вам напоследок небольшое развлечение в тему. Друзья, найдите на этой картинке 10 отличий и напишите в комментариях сколько вам понадобилось на это времени.

Читайте также: