Советы

Вордпресс с нуля. Как создать свою тему для WordPress? Что такое CMS

Вордпресс с нуля. Как создать свою тему для WordPress? Что такое CMS

Всем привет, появилась свободная минутка, решил написать обширную статью о том, как создать сайт на 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.png" 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. Обязательно посетите эту страницу.

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

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

Настрока wordpress с нуля для начинающих

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

Удалите тестовые страницы и статьи

Заходите в административную панель блога и далее Записи > Все записи и удаляете тестовую статью «Привет мир». Таким же образом переходите Страницы > Все страницы и удаляете тестовую страницу.

Прописываем постоянные ссылки

По умолчанию в WordPress настроенные постоянные ссылки следующего вида — http://site.ru/p=123 . Такие ссылки, хоть и являются короткими, но они не являются человекопонятными, и поисковые системы их хуже индексируют.

Вы должны изменить их, чтобы сделать ЧПУ ссылками, т.е. подходящими под запросы поисковых систем.

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

Устанавливаем часовой пояс

В этой части настроек прописываем Title, то есть заголовок сайта и его описание. Их вы можете поменять впоследствии, если захотите.

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

Отмените регистрацию на блоге

Регистрация удобна если вы намерены позволить оставлять гостевые посты на сайте, но также возможно будут регистрироваться для оставления спама на блоге. Если вы самостоятельно ведете блог, то регистрация других пользователей вам не нужна. Я советую отменить ее. Это можно сделать перейдя в Настройки > Общие .

Обсуждения и комментарии

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

Сервисы обновления

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

Пробежимся по списку изученного

  • Настроили постоянные ссылки
  • Настроили часовой пояс
  • Настроили комментарии
  • Добавили список сервисов обновлений.

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

Что делать дальше

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

  • Установка плагина WordPress SEO by Yoast и по этой вы можете прочитать руководство по его настройке.
  • , которые увеличивают посещаемость блога.
  • Также советую перейти по ссылке, где вы узнаете все об установке на блог.

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

Разработка уникального сайта достаточно дорогое удовольствие, доступное далеко не каждой компании, не говоря уже про начинающих бизнесменов. Сама разработка и тем более программирование уникальных модулей обойдется совсем не дешево. По данным компании 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 тем.

(Последнее обновление: 01.05.2019)

Приветствую вас, дорогой читатель! Сегодня, друзья, у нас будет пост - как создать свой сайт/блог самостоятельно на CMS WordPress пошаговая инструкция . Вся информация будет на одной странице, то есть, полное руководство шаг за шагом. От покупки домена, хостинга и до входа в панель управления вашим новым сайтом. Создание сайта на WordPress с подробной пошаговой инструкцией - справитесь легко!

Пишу вордпресс, так, как она самая популярная платформа (№1 в мире, 33% веб-ресурсов работают на данной CMS), но вы можете использовать другую систему управления контентом например, Joomla!, Drupal или другую CMS.

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

Создание сайта WordPress

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

Что такое ВордПресс (WordPress)?

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

33% всех сайтов мира работают на WordPress, от личных блогов до крупнейших новостных агентств. Более 60 миллионов людей выбрали WordPress для своего «дома» в сети - присоединяйтесь к семье.

Расширьте WordPress с помощью более 45 000 плагинов, чтобы сайт соответствовал вашим потребностям. Добавьте интернет-магазин, галереи, списки рассылки, форумы, аналитику и многое другое.

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

Домен - это уникальное имя вашего блога или сайта во всемирной паутине (сети интернет). Двух сайтов, с одинаковым доменом не бывает, их просто не существует.

Как подобрать и зарегистрировать домен для сайта

Для этого, я использовал сервис по регистрации доменов 2domains. Зарегистрировать одно доменное имя в зоне ru или рф стоит всего 99 рублей в год Регистрация моментальная и ваш домен становится доступен сразу. Чтобы зарегистрировать домен, нужно выполнить следующее: заходим на сайт 2domains и регистрируемся:

Регистрация домена на сервисе 2domains

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

После успешной регистрации, зайдите в свой аккаунт и создайте свой профиль. Для этого, в верхнем меню нажмите на "Профили" и далее выберите какой профиль вы хотите создать - для RU/SU/РФ доменов на физическое или юридическое лицо или профиль для регистрации международных доменов (com, net, и прочих):

Создайте свой профиль

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

Посчитайте какая сумма вам необходима для регистрации (для этого умножьте количество доменов на цену регистрации одного домена. Цену можно узнать нажав на ссылку "Прайс лист" в меню). После этого вам будет предложено выбрать метод, которым вы хотите пополнить баланс. Укажите сумму пополнения и пополните баланс нужным методом (WebMoney, Яндекс деньги и т. п.):

После того, как ваш баланс пополнен и создан профиль, переходите в верхнем меню в раздел "Домены" - "Подобрать домен":

Перед вами откроется страница где вы можете подобрать нужный, красивый, подходящий домен по ключевому слову для вашего сайта (задача не из лёгких). Просто введите главное и/или дополнительное ключевое слово на английском или на русском языке (в зоне РФ), на основе которого вы хотели бы подобрать домен!:

Подбор домена по ключевому слову для сайта

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

Перед вами откроется список вариантов имен

Далее, можно зарегистрировать домен из корзины, но сначала его нужно проверить (пока вы подбирали имена, домен могли уже занять). В поле для ввода доменов будут отображаться ваши выбранные имена которые вы хотите зарегистрировать. Нажмите кнопку "Проверить":

Ваши домены будут проверены и если они свободны, откроется форма заказа доменов. Здесь сложного ничего нет, установить галочку в "Использовать DNS-сервера регистратора бесплатно" - тогда у домена будут установлены DNS-сервера регистратора, потом в любое время сможете их поменять на нужные.

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

Всё, ваши домены поставлены в очередь на регистрацию и будут зарегистрированы в течение нескольких минут. Зарегистрированный вами домен появится в списке всех ваших доменов (Мои домены) и вы сможете его детально настроить - сменить DNS, внести записи в DNS и т. п.. Теперь переходим к следующему шагу, для создания сайта нужен надёжный хостинг.

Покупка хостинга. Надёжный хостинг BeGet

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

Таких как: Joomla!, WordPress, Drupal и многие другие, как платных так и бесплатных CMS . Все бесплатные движки для сайта устанавливаются автоматически (об этом речь будет чуть ниже), вообщем любому новичку, то, что нужно.

Цены на хостинг очень даже выгодные, в том числе для тарифов, на которых можно размещать 5 (как у меня) и более сайтов одновременно. Представляется возможность 30 дней тестового периода, то есть, бесплатно. Если вы решили разместить сайт на этом хостинге, то вам необходимо зайти на сайт beget.com . Выбрать подходящий тарифный план. Вполне хватит тариф START на пять сайтов, 10 Гб дискового пространства и многое другое:

Базовые тарифы на хостинг. Выбираем Start

Заполните форму регистрации аккаунта. Заполняем все необходимые поля и кликаем - Зарегистрировать аккаунт:

Зарегистрировать аккаунт

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

Делается это очень легко и просто. Зайдите в свой аккаунт 2domains, выберите в меню на главной странице "Домены" и из выпадающего списка нажмите на "Мои домены":

На главной странице "Домены" и из выпадающего списка нажмите на Мои домены

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

Ваши зарегистрированные домены

После этого, появится меню управления доменом. Я свои все зарегистрированные домены, прикреплял к IP адресу хостинга. Узнать IP-адрес сервера, на котором расположен ваш аккаунт, можно в разделе DNS панели управления хостингом. А - запись вашего технического домена содержит нужный адрес. Технический домен имеет вид ваш_логин.beget.tech . Вот тут:

Значение А-записи по умолчанию можно посмотреть у технического домена

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

В меню управления доменом выберите из списка "Управление DNS-серверами / Делегирование":

Управление DNS-серверами / Делегирование

В открывшейся форме поставьте галочку "Использовать DNS-сервера регистратора" и нажмите на кнопку "Изменить":

Затем, опять вызовите меню управления доменом нажав на нужный домен. Выберите из предоставленного списка "Управление зоной DNS":

Управление зоной DNS

  1. Для первой в качестве поддомена укажите www , выберите тип записи А , в качестве данных укажите IP адрес (в панели управления хостингом Бегет/Beget, с левой стороны), к которому нужно прикрепить домен.
  2. Для второй записи укажите знак @ (собака) в качестве поддомена и так же выберите тип А и укажите тот же IP адрес хостинга .
  3. Для третьей записи в качестве поддомена укажите знак * (звёздочку) и так же выберите тип А и укажите тот же адрес IP .

Затем, нажмите кнопку "Добавить". Всё. Готово. Теперь вам нужно подождать, пока изменения вступят в силу и ваш сайт будет открываться с этого IP адреса. Это может занять от 4 до 48 часов. Так, последние маленькие шаги и ваш сайт готов к большому путешествию по Сети.

Важно : Теперь можно регистрировать домены с октября 2016 г. непосредственно через Бегет. Зарегистрировали домен и сразу можно создавать сайт .

Как добавить домен и установить CMS WordPress на хостинг Beget

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

Раздел Домены и поддомены

Добавление доменов и поддоменов. В поле введите ваш домен/ы. При добавлении домена нужно указать:Создать новый сайт для домена.
В данном случае под сайтом подразумевается директория на диске. Например, если мы заказываем домен mydomain.ru и выбираем "Создать новый сайт ", на диске будет автоматически создана директория ~/mydomain.ru , а в ней директория public_html , куда и необходимо будет загружать файлы сайта. Например:

Добавление уже зарегистрированного домена

После выполнения этой операции вам необходимо подождать 10-15 минут (это время необходимо для того, чтобы домен успешно прописался на DNS-серверах). Вот и всё. Готово.

Сайт вы создали, но он работать пока не будет. Для полного счастья не хватает только движка для вашего нового сайта. Будем устанавливать его на хостинг. В панели управления хостингом выбираем раздел "Автоматическая установка CMS ". Раздел CMS позволит быстро установить любую из более чем 30 популярных CMS (Content Managment System - Система Управления Контентом):

Системы управления контентом (CMS)

После открытия раздела (на моём скриншоте будет два списка, у вас только тот сайт на который нужно установить движок) вы увидите два списка: сайты на которые уже установлены CMS:

Список установленных CMS и Установка CMS

Нажимаете WordPress, в примере будет вордпресс, а вы можете установить движок любой, какой вам нужен. После нажатия на логотип CMS вы можете в диалоговом окне выбрать сайт, на который она будет установлена, а также ввести необходимые данные для установки.

Логин администратора : для входа в панель управление блога; Пароль администратора : потом можно в настройках блога; E-mail администратора и название сайта на латинице (потом поменяете на русское если надо, в админпанели вашего нового сайта). Нажимаете кнопочку "Установить":

Автоматическая установка CMS WordPress. Данные для управления сайтом

Установка происходит в течение минуты и появляется информация для вашего сайта. Я только затёр на скрине мои данные (сами знаете почему):

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

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

Для входа в панель управления вашего только, что созданного сайта нажмите ссылку (информация сайта) "ваш сайт.ru/wp-admin ". Введите свои данные:

Вход в панель управления сайтом

Войдите и вы в консоле управления своего нового сайта или блога на движке WordPress:

Админпанель сайта WordPress

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

(function(w, d, n, s, t) { w[n] = w[n] || ; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-292864-4", renderTo: "yandex_rtb_R-A-292864-4", async: true }); }); t = d.getElementsByTagName("script"); s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks");

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

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

  • Можно получить уникальный сайт или лэндинг, отличный от конкурентов. Учитывая миллионы блогов, построенных на этой CMS, каждый типовой дизайн используется как минимум сотню раз.
  • Полная свобода действий на этапе разработки. Можно добавлять собственный функционал с нужными именно вам рабочими элементами.
  • Можно применять разные дизайны для разных разделов сайта, что невозможно при использовании готового шаблона.
  • Можно сделать несколько видов и предоставить посетителям возможность переключаться между разными темами, что повысит интерес и лояльность к веб-ресурсу.
  • Простота работы на Вордпресс делает ее доступной для многих (в помощь будут видео-уроки в интернете). А значит, собственноручная разработка главной или создание дочерней темы позволит сэкономить деньги на привлечении сторонних дизайнеров и программистов.
  • Можно воспользоваться возможностью дочерних тем – когда корректировки вносятся в дублеры таблицы стилей style.css, а главный файл при этом остается нетронутым. Это позволяет быстро отменить изменения, если они окажутся неудачными, а также не терять наработки при обновлении основной темы.

Краткая инструкция

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

Шаг первый: подготовительные работы

Перед началом работ надо убедиться, что у вас есть текстовый редактор (самым простым является Блокнот или Nodepad++, тем более скачать их можно бесплатно). Следующий шаг – установка движка WordPress и набора Denwer на локальный компьютер. Денвер – это пакет важных инструментов для программистов. С помощью них значительно облегчается и ускоряется процесс разработки и внесения изменения сайтов. Как его устанавливать, подскажет это видео:

Шаг второй: создают папку новой темы

Переходим в нужную директорию. Она чаще всего имеет следующий путь: . Здесь хранятся все темы – и стандартные, и произвольные. Заходим в нее создаем новую папку. Называем ее, например, «MyFirstTheme».

Теперь переходим в новую папку и обязательно добавляем два файла, сделанных через Nodepad++ или другой редактор. Это index.php и style.css. Пока эти документы пусть останутся пустыми, потом мы еще займемся их наполнением. Еще добавьте в «MyFirstTheme» сюда папку images. куда можно будет добавлять картинки для оформления шаблона.

В последствии в «MyFirstTheme» можно добавлять шаблоны для отдельных частей сайта: боковой панели (sidebar.php), сайта (header.php), записей на страничках (single.php), комментариев (comments.php) и пр. Набор дополнительных файлов зависит от структуры, которую вы запланируете для своего веб-ресурса.

Шаг третий: наполнение index.php

Первое, что надо сделать – заполнить индексный файл (index.php). Вот пример самого простого кода, по которому у сайта будет четыре области: header, main, sidebar и footer.












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

Шаг четвертый: заполняем и style.css

Теперь надо открыть style.css, добавить и заполнить следующие поля (вписать вместо *** собственную информацию о сайте и владельце). Введенные данные будут отображаться в админке.

/*Theme Name: ***

Theme URI: http:// ***

Author URI: http:// ***

Description: ***

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

(информация в /**/ — это комментарии, а не части кода)

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

Шаг пятый: разбиваем файлы

Все элементы, указанные в index.php следует продублировать отдельными файлами. В шаге первом в примере помимо главной части main были указаны header, sidebar и footer – следовательно, для них создаем свои документы в формате.php.

Например, создаем файл header.php, открываем index.php. находим соответствующий участок кода и вставляем его в новый файл. Это будет:






Site Title



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






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

  • Header – стиль шапки вашего сайта.
  • Comments – шаблон для создания комментариев.
  • Home – тема для главной страницы.
  • Page — определяет тему, если создадите отдельные странички на сайте
  • Category – шаблон для разбивки на категории
  • Date – определяет стиль вывода даты-времени.
  • Archive – шаблон для архивного раздела со старыми материалами.
  • Search – файл, в котором указываются параметры для поиска на сайте.
  • 404 — шаблон для страницы, на которой сообщается об ошибке 404 Not Found.
  • Footer – определяет стиль подвала вашего сайта.

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

Шапка в header.php:

Добавление контента:

Стилизация комментариев:

Подвал на сайте:

Как можно вносить изменения без опасений

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

Чтобы этого не произошло, можно создать дочернюю тему WordPress (подтему) – это дублер файла стилей style.css, не затрагивающий главный файл (изменения в одном не отменяют обновления в другом).

Создание дочерней темы WordPress не составит никакого труда. Надо сделать новую папку в основном каталоге C:\WebServers\home\localhost\www\НАЗВАНИЕ_ЗАДАННОЕ_ПРИ_УСТАНОВКЕ\wp-content\themes . В новой папке делаем свой файл style.css с вот таким содержимым:

Theme Name: НАЗВАНИЕ ТЕМЫ

Template: НАЗВАНИЕ ПАПКИ В ДОЧЕРНЕЙ ТЕМОЙ

Theme URI: ЗАПОЛНИТЬ

Description: ЗАПОЛНИТЬ

Author URI: ЗАПОЛНИТЬ

/* импортируем стили родительской темы */

@import url(«../НАЗВАНИЕ/style.css»);

/* Свои дополнительные стили */

Foo{ color:red; }

Теперь можно в админке зайти во «Внешний вид›Темы» и активировать дочерний шаблон. В дальнейшем можно работать в новом файле. В дополнение небольшая видео-презентация на тему дочерних шаблонов: