Как создать свой блог самостоятельно? Пошаговая инструкция. Настройка основных параметров
(Последнее обновление: 11.03.2019)
Приветствую вас, дорогой читатель! Сегодня, друзья, у нас будет пост - как создать свой сайт/блог самостоятельно на CMS 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- Для первой в качестве поддомена укажите www , выберите тип записи А , в качестве данных укажите IP адрес (в панели управления хостингом Бегет/Beget, с левой стороны), к которому нужно прикрепить домен.
- Для второй записи укажите знак @ (собака) в качестве поддомена и так же выберите тип А и укажите тот же IP адрес хостинга .
- Для третьей записи в качестве поддомена укажите знак * (звёздочку) и так же выберите тип А и укажите тот же адрес 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
Через админпанель вы можете управлять своим сайтом, наполнять контентом, устанавливать , темы () для сайта и многое другое. На этом позвольте с вами попрощаться, надеюсь вам было полезно узнать, как создать сайт самостоятельно . Удачи и до новых встреч.
Сейчас объясню, как сделать из простого HTML-шаблона тему WordPress на примере дизайна из той статьи.
Адаптировать дизайн под WordPress может понадобиться по многим причинам, например, вы переносите на CMS свой некогда статичный сайт, или вам понравился дизайн, которого в коллекции WordPress ещё нет, или вы просто хотите разобраться, как устроены темы этой CMS изнутри.
Итак, приступим.
Распределяем код по файлам
1. Скачайте шаблон и распакуйте его в папку с темами WordPress (адрес вида адрес_блога_wordpress/wp-content/themes/ ). Если хотите, переименуйте папку с темой на свой вкус. Например, у меня шаблон располагается по адресу адрес_блога_wordpress/wp-content/themes/MyTheme/ .
2. Переименуйте файл styles.css в style.css .
3. Откройте style.css в редакторе кода (таком, как Notepad++) и в самое его начало вставьте следующие строки:
/* Theme Name: MyTheme Theme URI: http://test1.ru Author: NoName Author URI: http://test1.ru Description: Example of test Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
Как вы могли догадаться, это служебная информация о теме оформления: название, автор, описание, лицензия, версия и т. д. Правые части строк вы можете заменить на собственные, то есть задать свои авторство, версию, описание и прочие данные.
4. Создайте файлы header.php , index.php , sidebar.php , footer.php и распределите по ним код из index.html .
4.1. В header.php скопируйте код по строчку , так как этот файл отвечает за верх сайта. styles.css замените в коде на style.css - новое корректное имя файла.
4.2. В index.php вставьте код основного блока (со строки по строку ).
4.3. В sidebar.php скопируйте код бокового меню (с по ).
4.4. В footer.php вставьте оставшиеся строки (с до конца документа index.html ).
5. Удалите index.html .
6. Перейдите в админ-панель и убедитесь, что шаблон MyTheme появился в разделе Внешний вид -> Темы . Вы даже можете попробовать его просмотреть или активировать, но ничего хорошего из этого пока не получится, ведь шаблон с WordPress мы ещё никак не интегрировали.
Адаптируем header
Теперь мы начнём из статичного шаблона делать динамическую тему, в которую будут подгружаться данные и настройки WordPress.
В шаблоне будут встречаться PHP-вставки. Начинается такой код с . Между ними расположен PHP-код, чаще всего вызывающий функции CMS
1. Откройте файл header.php и замените содержащийся в нём код до блока
на следующий:
>
"> "> " type="text/css" media="screen" />Мы сделали динамическим блок
Код вызывает функцию, возвращающую языковые атрибуты в контейнер.
">
Вместо того, чтобы прописывать кодировку константой, мы вызвали функцию, которая берёт значение из настроек CMS и автоматически подставляет его в код, то есть для смены кодировки уже не придётся править файл темы.
Важная функция, обеспечивающая работу на странице стилей, плагинов и скриптов.
2. Перейдите к редактированию файла index.php. В самом его начале пропишите
,
Строчки вызывают файлы шапки, боковой панели и низа сайта.
Теперь вы можете просмотреть или даже активировать MyTheme. В результате браузер отобразит уже знакомый шаблон со статическим меню и одной-единственной страницей. Чтобы меню стало динамическим и настраиваемым, а вместо одной страницы отображались все помещённые на сайт материалы, нужно преобразовывать шаблон дальше.
Делаем динамическим верхнее меню
Пока мы имеем полностью статическую тему оформления, в том числе и с неизменным горизонтальным верхним меню. Пока его нельзя настроить из админ-панели, и если оставить код в нынешнем виде, то для вставки/удаления/переноса пунктов придётся каждый раз редактировать файл header.php , что крайне неудобно.
Чтобы не мудрствовать лукаво и не погружаться в пучину увлекательного мира программирования, зададим динамическому меню статичное название. Вместо таблицы горизонтального меню вставьте код
так, чтобы получилось следующее:
Для того, чтобы меню стало отображаться, в панели управления сайтом откройте Внешний вид -> Настроить -> Меню и либо переименуйте уже созданное меню в menu, либо создайте меню и настройте его на своё усмотрение, но обязательно присвойте ему имя menu.
Суть действий в том, что файл header.php функцией wp_nav_menu("menu=menu"); открывает меню под названием menu, которое, чтобы отобразиться, должно быть правильно названо и настроено в панели администрирования WordPress. Название menu вы можете поменять на любое другое, главное, чтобы имя совпадало и в настройках сайта, и в коде header.php .
Навигация явно куда-то съезжает, хоть и делает это красивой лесенкой. Так происходит потому, что меню нашего шаблона было неосмотрительно реализовано внутри таблицы, а надо было оформлять его списком. Частично исправить ситуацию можно, добавив в файл style.css следующий код:
#menu ul { margin: 0; /* Обнуляем значение отступов */ padding: 4px; /* Значение полей */ font-size: 18px; } #menu ul li { display: inline; /* Отображать как строчный элемент */ margin-right: 5px; /* Отступ слева */ padding: 3px; /* Поля вокруг текста */ }
Так как он прокомментирован, дополнительные объяснения вряд ли нужны. Остаётся обновить страницу и посмотреть, что список наконец-то стал горизонтальным.
Меню, конечно, можно сделать ровней и красивее, но к адаптации шаблона отношения это действо не имеет, зато крепко связано с CSS, который вы можете подробно изучить.
Завершаем «шапку»
Единственные элементы файла header.php , оставшиеся статическими - имя и описание сайта. Чтобы они брались из настроек, задаваемых в админ-панели, замените отвечающий за вывод текста в шапке код на следующие строки:
Обновите страницу - результат не заставил себя долго ждать.
Работа с файлом header.php на этом завершена, в итоге он имеет следующий код:
>
"> "> " type="text/css" media="screen" />Выводим посты
Переходим к части, содержащей основной контент страницы - редактироваться будет файл index.php .
Удалите содержимое блока right и вместо него вставьте код динамического отображения постов. Либо же удалите из файла весь код и вместо него вставьте следующее:
">
/ /А здесь нет ничего:(404
Начало цикла, благодаря которому страница будет выводить посты, пока они не закончатся.
">
Отображает заголовок поста.
/ /
Дата в формате день, месяц (сокращённо), год. Теги, комментарии.
Вывод поста.
Конец цикла при условии, что записи были.
Если же материалов нет, вывести об этом соответствующую надпись и покинуть цикл.
Вывод постраничной навигации при условии, что на одной они не помещаются.
Простой с виду код глобально изменил страницу - блог стал по-настоящему динамическим. Каждый пост можно посмотреть, ссылки работают.
Дальнейшее оформление и размещение элементов зависит только от вашей фантазии и навыков вёрстки - с отображением данных можно делать всё, что угодно, но работа над шаблоном ещё не завершена.
Добавляем виджеты
Слева от основного контента в шаблоне есть панель, на ней - блок Информация (своего рода виджет) и боковое меню. Информационный блок не должен быть статичен, а так как он очень напоминает виджет, предлагаю виджетом его и сделать. Для этого необходимо:
- зарегистрировать блок виджетов;
- вывести его в нужном месте.
Теперь подробнее.
1. В каталоге темы создайте файл functions.php. В нём хранятся функции, обеспечивающие работу шаблона. Также он может содержать и другие пользовательские процедуры.
2. Внесите в следующий код:
"MySidebar", "before_widget" => "", "after_widget" => "", "before_title" => "
", "after_title" => "
",)); ?>Этот код регистрирует блок виджетов. Вместо MySidebar вы можете вписать любое другое название. Примерно такой же функцией в этом файле можно регистрировать и меню, но я решил обойтись малой кровью и этого не делать, чтобы соприкосновение с PHP сделать минимальным, а заодно и показать два разных подхода к решению одной задачи.
3. В файле sidebar.php сотрите строки:
Информация
Далее...
и вместо них запишите:
Блок Информация ожидаемо исчез, сбоку осталось только пока ещё статическое меню.
4. Зато перемены к лучшему произошли в админ-панели - раздел Внешний вид обзавёлся подпунктами Виджеты и Меню . Перейдите в первый. Откройте его и посмотрите: внутри появился зарегистрированный в файле functions.php блок (у меня это MySidebar).
5. Чтобы воссоздать информационный блок, перетащите на сайдбар виджет Текст , в поле Заголовок введите Информация , в поле Текст - код
Мы предлагаем Вам праздничные скидки. Далее...
6. Обновите страницу блога - блок удалось воссоздать практически один в один (мелкие нюансы меняются в файле style.css и заострять на них внимание я не буду).
Адаптируем меню
Вторая часть боковой панели - вертикальное меню. Его тоже нужно переделать из статического в динамическое, чтобы редактировать затем прямо из админки.
1. Удалите огромный вложенный список меню в файле sidebar.php и вместо него введите код:
2. В панели управления WordPress откройте Внешний вид -> Настроить -> Меню , нажмите кнопку Добавить меню, назовите его так, чтобы имя в админ-панели совпадало с именем в коде страницы sidebar.php (у меня это left_menu ) и добавьте все необходимые пункты.
3. Сохраните изменения, обновите страницу и убедитесь, что динамическое меню левой части сайта работает и отображается правильно.
Код страницы sidebar.php по сравнению с исходным сильно уменьшился и в итоге стал таким:
Меню
Фактически статичной осталась только надпись Меню . И то потому, что меняться вряд ли будет, хотя и её легко можно «оживить», например, реализовав этот блок в виде ещё одной области виджетов и добавив на него блок Произвольное меню, но это, если внимательно читали статью, вы можете теперь легко сделать самостоятельно.
Работаем с файлом footer.php
Здравствуйте, дорогие друзья и читатели – сайт!
Сегодня я покажу, как с ноля создать шаблон для WordPress.
Если честно, никогда не думал, что буду в этом разбираться, но жажда знаний взяла надо мной верх. Сильное желание понять устройство и воплотить кучу идей, заставило сесть и заполнить все пробелы в своей голове.
Каждый день появляются новые фишки и способы их реализации в шаблонах WordPress. Конечно, всё изучить и за всем уследить физически невозможно, но имея представление о том, как всё устроено будет намного легче ориентироваться в любой теме.
Подготовка к созданию шаблона для WordPress.
Перед тем, как начать создавать шаблон для WordPress, с помощью , нужно подключиться к действующему серверу в Интернете или локальному, установленному на Вашем компьютере.
Чтобы не мучиться с передачей файлов через FTP , советую и разрабатывать шаблоны на виртуальной машине.
С точки зрения редактирования и правки кода, настоятельно рекомендую использовать — Notepad++ . Благодаря подсветке кода и простому интерфейсу, этой программе отдаёт предпочтение наибольшее количество Веб-мастеров.
Зайдите в корневую директорию, содержащую установки WordPress, перейдите в wp-content => themes и создайте там папку с именем — «New Theme 3.0» . Внутри этой папки разместите следующие файлы (расширения – PHP, CSS, PN G):
Шаг-1 style.css
Файл , будет содержать в себе все элементы стиля шаблона для WordPress. Именно его мы будем использовать первым, чтобы объявить имя шаблона, имя автора, ссылку на сайт с описанием и номером версии:
Эта информация, может быть изменена в любое время. Главное, чтобы всё было закомментировано ().
Теперь, в этом файле, нужно создать несколько основных определений стилей, которые в дальнейшем будут реализовываться в некоторых PHP файлах темы WordPress:
В этом коде используется тег — body , только для спецификации (определения) шрифтов используемых на сайте и цвета фона (всё меняется на любой вкус). Затем, мы объявляем атрибуты стиля для связи, а также некоторые из заголовков, которые мы будем использовать на протяжении всей нашей темы.
#wrapper — будет отвечать за полный размер веб-страницы. С #header , всё очевидно, это заголовок, а #blog , это последние сообщения на главной странице.
Остальные стили колонтитулов # (заголовков) footer и sidebar , будут применяться к соответствующим их названию файлам, которые мы рассмотрим чуть позже.
Шаг-2 header.php.
Теперь, мы создадим файл — , который будет содержать логотип и обычную навигацию:
На самом деле, подробно этот код объяснять нет смысла. Просто нужно запомнить, что он должен присутствовать в , во всех темах WordPress. Но, если Вам интересно, то расскажу.
В самом начале, мы объявляем тип документа и стандартный код, который будет использоваться для отображения названия сайта, вводимое в настройках администратора WordPress. Далее, идёт и PHP код, позволяющий работать с древовидными комментариями.
Шаг-3 Добавление пользовательской навигации.
Теперь, когда мы закодировали в нашу основную информацию, можно добавить пользовательское меню навигации. Но, прежде, нужно открыть файл functions.php и прописать специальную функцию:
Как видите, я прокомментировал участки кода. Первая часть add_action , используется для добавления поддержки пользовательского меню, а вторая, регистрирует саму область первичного меню. Далее, переходим к самой реализации в шаблоне WordPress.
Чтобы создать меню, нужно, ниже ранее прописанного кода в файле добавить строчку:
Давайте, немного её разберём. Основной функцией, которая здесь используется, является wp_nav_menu . Переменные sort_column , container_class , и theme_location , применяются в качестве аргументов. Sort_column — гарантирует порядок отображения, который задаётся в админке. Container_class — позволяет выбрать Вашего меню. Ну, а theme_location , просто присваивает primary-menu те значения, которыми мы манипулируем в реальном времени.
Шаг-4 Стиль навигации шаблона для WordPress.
Благодаря произведённым ранее действиям, наша WordPress тема, обрела пользовательскую навигацию. Но, обычное меню выглядит просто и не привлекательно. Чтобы это исправить, мы создадим класс nav в файле .
Как видите в .nav , мы сделали основные заявления, такие, как цвет фона, ширина навигации, выравнивание и положение элемента на мониторе. Далее, мы задали порядок размещения основных элементов и всплывающих окон.
Завершающим действием, будет добавление стилей для ссылок из выпадающего меню:
В .nav ul ul , мы устанавливаем абсолютную позицию и первую выпадающую ссылку делаем 100% , чтобы она появлялась под основной. Так же, мы изменили фон выпадающего окна, чтобы он отличался от существующего. К общим значениям, был добавлен атрибут z-index:99999 , который заставляет раскрываться выпадающие ссылки, над другими объектами.
На этом, добавление стилей для пользовательского меню шаблона вордпресс закончено.
Шаг-5 index.php.
Файл index.php , будет отвечать за главную страницу нашего сайта. Он будет содержать в себе код для включения верхнего и нижнего колонтитула, а также боковой панели, о которой мы поговорим позже. Ещё, в нём будет присутствовать функция включения самых последних сообщений на блоге и вывода соответствующих им миниатюр.
Следующие строки кода, используются для вывода всей информации в , sidebar.php и footer.php там, где Вы их разместите в WordPress шаблоне:
В принципе, разобраться в этом коде, не так сложно. После вызова , мы используем наш #blog , который был создан изначально в . Затем, добавляем цикл вывода последних сообщений блога и код для заголовка, который оборачиваем в
h3> .
Здесь, присутствует кусок кода, который выводит миниатюры в постах на главной странице блога. Пока, он неактивен, но следующим шагом используя functions.php , мы заставим его заработать.
В пятом шаге, мы добавили кусок кода, который отвечает за отображение миниатюр сообщений на главной странице блога. На данный момент, ничего такого не происходит, так как он деактивирован. Для его активации, нужно открыть файл functions.php и ниже ранее установленного кода меню навигации, прописать следующее:
Рассмотрев внимательно код, сразу становится очевидным его назначение. Первая строка, добавляет поддержку миниатюр в Вашей теме WordPress, а вторая, задаёт точные размеры изображения.
Шаг-7 sidebar.php.
Думаю, Вы догадались, что файл sidebar.php , будет отображать всю информацию, которую мы хотим видеть на боковой панели. Так как мы уже задействовали его в index.php , то осталось, только поместить код в файл и наша боковая панель, будет выведена на главной странице сайта:
Да, это весь код, который нужно добавить в sidebar.php , чтобы сделать его функциональным. Теперь, я поясню его значение.
С помощью div , мы вызываем стили из файла , а код ниже, даёт нам возможность размещать виджеты из админки WordPress, в желаемой последовательности.
Но, как и многие функции, чтобы заставить работать, нужно в файле functions.php , прописать следующий код:
Этот код, просто говорит WordPress, что нужно зарегистрировать боковую панель, о которой мы заявили в sidebar.php . Для общего ознакомления могу сказать, что WordPress может легко работать в одной теме с несколькими боковыми панелями.
single.php — это то, что будет использоваться для одной страницы поста. Представленный ниже код, будет очень похож на тот, который мы поместили в index.php . Отличие лишь в том, что мы добавили шаблон комментариев с div и код, который должен включить comments.php :
С выходом вордпресс 3.0 разработчики решили облегчить жизнь авторам тем и шаблонов для WordPress. Они перешли на единый стандарт форм комментариев.
Код ниже, нужно положить в Ваш файл comments.php :
Это добавит вашим сообщениям стандартную форму комментариев.
В файл page.php , мы поместим код, который будет отвечать за статические страницы нашего сайта. Он будет практически идентичен тому, который был размещён в single.php . Единственное изменение, это отсутствие шаблона комментариев и добавление кода, который обрабатывает страницы, а не должности. Всё остальное будет одинаковым:
Файл category.php , служит для вывода сообщений из определённой рубрики или архива, к которым обращается читатель. Здесь, основная часть кода будет похожа на page.php и single.php , которые мы закодировали выше, за исключением куска в самом начале:
Фрагмент кода ниже, это единственное, что мы добавили после основного цикла:
Здесь мы используем кучу заявлений if/elseif в PHP , которые показывают то, что Вы просматриваете на блоге. К примеру, если мы смотрим категорию под названием — «», то она будет показана в h2 Архив из категории: «» перед всеми записями, разбивая их по датам или авторам.
Шаг-12 Настройка заднего фона сайта.
С появлением WordPress 3.0 была создана функция, которая даёт возможность изменять фон сайта из панели администратора, используя изображение или обычный цвет. Для этого, в файл functions.php , нужно вставить следующий код:
Итак, пользовательские фоны включены. Бонусом, мы добавим ниже код, который делает доступными ссылки архивов, комментариев и тегов из RSS ленты:
В завершении создания вордпресс шаблона, мы добавим кусок кода в footer.php , использующий #footer , который был объявлен в . Наш подвал будет содержать, только основную информацию об авторском праве, а так же RSS ленту новостей и комментариев:
На этом, создание самого простого шаблона (темы) для WordPress окончено.
Чтобы проверить его работоспособность, Вы можете скачать архив с созданной темой и активировать на своём ресурсе:
А у Вас, получилось создать свой первый шаблон для WordPress?
Друзья, пока я буду писать новый пост, Вы можете почитать следующее:
На сегодня это всё.
Всем кому понравилась статья, могут подписаться на обновления блога, чтобы получать уведомления о выходе нового материала на свой электронный ящик.
До новых статей…
С уважением, Денис Черников!
Интересное по теме:
Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:
96 комментариевА что думаете Вы?
Спасибо огромное за статью! Очень полезная информация для юных верстальщиков! Читал статью по рэпчик... =)
Денис Черников ответил:
Ноябрь 3rd, 2012 at 14:38
Пожалуйста, Александр! Трое суток над ней пыхтел, хотелось, чтобы все всё поняли! Надеюсь, что у меня получилось! Рэпчик рулит!
Александр Красильный ответил:
Ноябрь 3rd, 2012 at 15:13
Да я заметил, что статья не маленькая и куча мелких нюансом. Если их не учесть, то все пойдет наперекосяк! У меня друг занимается чисто версткой, сидит в офисе и зарплата приличная, в районе 4000—5000 грн. При этом он самоучка! Вот и мну есть желание, но не хватает времени...=(
Архив не удалось установить. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature
Вот что пишется, после того, как я хотел протестить эту тему. В чём тут дело?
С уважением и благодарностью, Евгений!
Спасибо за полезную статью. По мне, лучше переделать готовую тему под себя.
Денис, шаблон получился слегка узковатым, на главной в футере много вопросительных знаков вместо надписи, ну и редактировать запись выводится тоже только вопросительными знаками. Так и должно быть? и еще нет в верхнем меню главной страницы и неудобно заходить в админку, только через редакцию статьи. А в принципе очень неплохо, и понятно, спасибо.
Юлия ответил:
Ноябрь 4th, 2012 at 6:47
Не знаю уж в чем дело в шаблоне, но установленный фон не просматривается на блоге.
И ещё кое-что. На скринах виден не весь код.
Но всё равно, спасибо за статью! Вы — молодец! Успехов в дальнейшем!
С уважением, Евгений!
Спасибо за информацию. Обязательно попробую.
Денис, я убрал свою старую тему, а установил какую- то сложную и новую. Многих файлов,которые ты описываешь нет, например, single.php,page.php и category.php. Поэтому трудно сооринтироваться, как поступать в такой ситуации. Но вот картинки с миниатюрами меня заинтересовали. Когда нахожусь на главной странице, картинок не видно. Но стоит в поиске ввести пробел и запустить поиск, то все миниатюры сразу появляются. Как ты считаешь, в чем может быть причина?
Привет, Денис! Ну это уже высший пилотаж! Верстать самому темы WordPress, а не тупо скачивать шаблон! Но самому пробовать такую тему, пока нет времени. Еще много надо реализовать то, что есть у тебя интересного в дизайне сайта (стрелочка"вверх",отгибающийся уголок и т.п.).
Денис, и тема полезная, и глаза боятся...
Пока забил в закладки...
Попала к Вам случайно, но очень рада!!! Спасибо большое за информацию.
Статья очень актуальна, ну по крайней мере для меня. Сам вот недавно задался вопросом, как создать свою собственную тему для ВордПресс (шаблон), и нашел вот такую программку — Artisteer. Правда эта прога платная, НО, не для русского человека если Вы понимаете о чем я.
Денис а вы не пробовали менять цвет сайдбаров? или как это сделать по подробней,в css
Большое спасибо за статью. Искал подходящую информацию для настройки шаблона WP. В большинстве случаев просто общие фразы и без конкретики, а у Вас — другое дело!
Денис, у Вас в некоторых местах код обрывается из-за размеров картинки... А счастье было так близко!
Отлично, спасибо большое! Я так и думала, что чего-то недопоняла.
Денис, здравствуйте!
Большое спасибо за урок. Удалось внедрить свой дизайн) Но вот почему-то возникла проблема со вставкой фото в посты — почему-то не функционирует обтекание текстом фотографий. Это прописывается где-то в шаблоне? Никак не пойму в чем дело... подобных проблем раньше не было.
Заранее спасибо!
Денис Черников ответил:
Март 19th, 2013 at 15:45
Здравствуйте, Людмила!
Специально для этого я написал отличный пост. В нём показано, как сделать обтекание картинкам и видео в постах. Посмотрите через поиск или в списке статей поищите.
Людмила ответил:
Март 19th, 2013 at 15:57
Ок, спасибо!
С точки зрения редактирования и правки кода, настоятельно рекомендую использовать - Notepad++.
Я пользуюсь Sublime Text 2 — что-то среднее между NotePad++ и небезызвестным TextMate (Mac OS). В окно перетаскиваю проект и он появляется в виде дерева. Очень удобно! Плюс еще куча фишек которые упрощают жизнь получше NotePad++! Очень рекомендую))
Денис, я ничего не поняла уже на первом этапе. Где брать все эти коды? переписывать с Ваших принт-скринов? Может можно где-то взять шаблон и отредактировать?
Большое спасибо! Попытаюсь всё сделать как написано! Индивидуальный вид намного лучше))
Добрый вечер.Я новичек,и мне не совсем понятно как в ""Создание необходимых папок и файлов "" мне «„ Внутри этой папки разместите следующие файлы (расширения – PHP, CSS, PNG)“» я напечатала их через Notepad++ а как перенести???
Еще раз здраствуйте...как мне зделать это????:
Внутри этой папки разместите следующие файлы (расширения – PHP, CSS, PNG):
Искомые файлы, создаются на рабочем столе компьютера при помощи обычного блокнота, с присвоением нужного расширения.
я не могу понять как разместить Файлы В ПАПКЕ.При их копировании из блокнота полцчается ерунда.Поясните пож. ивенно как перенести с Notepade++ в папку фаилы.
Почему у меня злобный аватар?Я вообще добрая .Как мне его сменить???
Здравствуйте Денис! Я новичок, подскажите пожалуйста как мне запилить тему в ворд пресс, во Внешнем виде/Темы моя тема не отображается...((((
Спасибо, статья очень помогла!
только добавьте в footer.php , а то без этого админ панель не видна.
Денис, доброго времени суток!
Если честно, я ничего не поняла из написанного...Заслуга в этом не Ваша — у меня знаний ноль абсолютно в этой области и для меня Ваши записи оказались китайской грамотой...Напрашиваюсь либо на некоторые разъяснения (если позволите), либо просто на удаление своего коммента:)
Как изменить название шаблона, которое для некоторых тем отображается в левом боковом меню админки?
Попробовала скачать Ваш шаблон — там ни фон, ни шапка не меняется — данные вводятся, цвет выбирается — только на сайте никаких изменений не происходит:)))))
Здравствуйте! А могли бы мне свертать тему за умеренную плату? Еть представление как хочу видеть вой сайт, есть фото для темы, но нет умений работать с фотошопом и HTML
Сергей ответил:
Март 23rd, 2014 at 1:50
Денис, Я прошу прощения зря вы не промышляете версткой вам всего за 3 вечера получилось нарисовать такой шедевр, года 2 назад я такую информацию по крупинкам собирал а тут такой клад ссылку на вас в контакт и низкий поклон вам за проделанную работу, есть правда кое какие недочёты. Но все ровно даже при условии всех мелочей эту статейку мне бы года 2 ох как бы мне это помогло с моим первым проектом. А что нибудь по яваскрипту в вашем арсенале имеется, просто у людей вашего уровня образованности всегда интереснее инфу читать изучать.
Денис Черников ответил:
Март 23rd, 2014 at 12:12
Сергей, я промышляю иногда вёрсткой, но не люблю копаться в уже загаженном коде пытаясь найти ту ниточку, которая убила весь сайт! Мне проще с ноля делать, чем искать ошибки на сайтах клиентов. А по скриптам у меня есть отличный мастер, который всё делает грамотно и красиво!
Сергей ответил:
Март 23rd, 2014 at 23:59
Да нет мне не программист нужен а информация для лик-беса я правда уже увидел у вас на сайте целый раздел по яваскрпт в общем спасибо за ваш ресурс, очень информативный.
Помогите, у меня не редактируется styles.css из админки. захожу «внешний вид — редактор», выбираю стилевой файл, но он открывается пустым. по фтп все редактируется, но это не удобно для меня.
помогите залить самописный сайт на WP (заплачу)
Денис, спасибо огромное за статью! Очень ценная и полезная информация. Обязательно ей воспользуюсь, когда буду создавать свой шаблон с нуля.
Но пока для сайта выбрана готовая тема, а я совсем «чайник»... Была бы Вам очень признательна за помощь!Итак, мне нужно было на страницу «А» вывести новости только из категории «А». Я скопировала страницу index.php, добавила на нее строку кода и выбрала в качестве шаблона для страницы «А». Теперь на ней отображаются только нужные записи, но все оформление слетело...) чтобы оформление этой страницы не отличалось от оформления сайта, нужно что-то добавить в таблицу стилей? или я изначально все сделала не так? Спасибо)
Денис Черников ответил:
Март 30th, 2014 at 21:35
Елена, я такие консультации не даю! Я понятия не имею что Вы там делаете, а по описанию не всегда понятно!
Елена ответил:
Апрель 1st, 2014 at 16:51
Денис, изменю вопрос: возможно ли выводить на страницу с названием «А» статьи только из рубрики «А», а на страницу с названием «В» статьи только из рубрики «В»? Спасибо.
Сергей ответил:
Март 30th, 2014 at 22:37
Елена Я не уверен что вам это подойдёт но вашу задачу я бы решил при помощи 2х плагинов Display Widgets это плагин который определяет отображение виджетов на любой вам нужной странице а этот Recent Posts Widget Extended делает красивый вывод новостей, но Я повторюсь что так сделал бы Я
Сергей ответил:
Март 30th, 2014 at 22:41
Все таки прочитав и переосмыслив ещё раз понял что этот вариант не очень для вашего Елена вопроса.
Елена ответил:
Апрель 1st, 2014 at 17:16
Сергей, спасибо за Ваш ответ! Попробовала плагин Recent Posts Widget Extended. Полезная вещь) Мне бы вот точно такой же вывод статей, но не в виджетах, а на основной странице) Спасибо!!
Денис, помогите разобраться с темой.
За основу была взята Ваша тема из поста. Переделал все под себя, все устраивает, но не видно комментариев. Форма комментов есть, они проходят на модерацию, но после апрува показывает только количество комментов к посту и саму форму, а комменты не видно.
Думал во время работы с файлами что то потер, но нет...
Установил Ваш оригинал, та же проблема, подскажите в чем может быть дело, буду очень признателен.
ЗЫ. Думаю может дело в том что движок обновлен и после обновы что то не так стало. Есть еще вариант попробовать сменить версию php у хостера.
Денис, спасибо большое за доступную для понимания инфу. Уже давно ищу сайт со стандартными заготовками, которые могли бы служить исходниками для любой темы. Везде описывается так: создается файл index.html, который затем кромсается и разрасывается частями по папкам.php. При этом в index.html для образца размещается обычный и точкованный текст. Но ведь ни в одной теме никакого текста изначально нет (он пишется уже пользователем после создания страницы или записи). После вашей статьи все стало на свои места. Отдельные фрагменты мозаики в голове сложились в единую картинку. Еще раз, спасибо!
Добрый день, Денис, прочитал статью сделал Всё как Вы написали, НО используя свои записи и цвета,ВСЁ ЗАРАБОТАЛО. Это хорошо))
ВОпрос: Как перенести сайдбар так чтоб он стал слева, и второй вопрос: а нет у вас статьи как в свой шаблон сунуть свои же картинки (то есть есть дизайн в PSD уже нарезанный, хочу его слить с шаблоном).
Заранее спасибо за ответ.
Привет, дорогие читатели!
Сегодняшняя статья – это подробная инструкция по созданию сайта с нуля. В ней будут освещены все этапы от выбора тематики и шаблона WordPress до запуска площадки в сеть интернет. В данном обзоре я буду ссылаться на ранее написанные статьи, которые имеют непосредственную связь с этой темой. Статья будет очень полезна новичкам, но, может быть, и те, кто уже ведет свой блог, найдут для себя интересную информацию. После ее прочтения, абсолютно каждый сможет сделать сайт на Вордпресс самостоятельно.
Выбор тематики. Как загрузить WordPress на компьютер?
На следующем этапе вы можете приступить к созданию блога самостоятельно, используя известные вам языки программирования. Но этот путь под силу только опытным программистам. Поэтому в нашем распоряжении есть готовые системы управления (CMS). Среди них самые известные Joomla, Drupal и, конечно, WordPress. Поскольку мой блог посвящен и создан на Вордпресс, то дальше речь пойдет именно о нем.
Для начала на официальном сайте ru.wordpress.org скачайте платформу WordPress (последнюю русскоязычную версию этой CMS).
Локальный сервер для WordPress
Этот пункт можно пропустить! Многим проще сразу начать разработку на хостинге, но я привыкла создавать сайты у себя на локальном сервере, а только затем переносить на хостинг.
Приступим к установке Денвера. Это программа, которая позволит создать локальный сервер на своем компьютере. С его помощью вы сможете до загрузки сайта в сеть разобраться с движком, разработать стиль блога, протестировать площадку. Кроме того, он вам понадобится и в дальнейшем, если вы захотите работать над сайтом удаленно, не боясь поломать его основную версию.
Как создать контент для блога?
После того как дизайн выбран и доработан, а блог настроен, пора перейти к наполнению его информацией. Идеальный вариант наполнения сайта – создавать контент самостоятельно. Тогда он будет уникален не только по форме, но и по содержанию. Но не всегда на это хватит сил и фантазии. Если так случилось, то есть несколько вариантов:
- Переводить иностранные тексты по вашей тематике;
- Делать копирайт, основываясь на информации из разных источников;
- Нанять копирайтера, который будет делать это за вас.
Основное требование к содержанию постов – это их доступность и актуальность для читателей.
Когда вы собрали ключи, можно приступать к написанию поста. Но перед этим советую ознакомиться с . Важно, чтоб ваши тексты понравились не только читателю, но и поисковикам. Не забывайте прописывать мета-теги к статьям и картинкам.
Пошаговая инструкция создания блога: домен и хостинг
И вот только теперь можно приступать к выбору доменного имени и хостинга для своего сайта. Внимательно прочитайте, и . Это достаточно ответственный этап. Если вы намерены серьезно заниматься своим сайтом, то не советую вам регистрировать бесплатный домен. В выборе хостинга обратите внимание на соотношение стоимости и разрешенной нагрузки.
Однако даже если вы промахнулись с выбором хостинг-провайдера или регистратора, не отчаивайтесь. Всегда можно , или к другому регистратору доменных имен. В статье о переносе на хостинг вы также узнаете, как перенести сайт с денвера на новый хостинг. Для оперативной работы и добавления файлов на удаленный сервер лучше пользоваться файловым менеджером хостинга или FTP-клиентами, такими как или . После того, как вы зарегистрировали доменное имя и залили свой блог на хостинг, ваш сайт появится в сети Интернет.
Надеюсь, данная инструкция по создания сайта на WordPress с нуля была вам полезна. Делитесь своими находками и впечатлениями.
Предлагаю посмотреть видео. Оно на английском языке, но зато как раз отвечает на вопрос сегодняшней статьи: как создать блог на Вордпресс самостоятельно.
В следующем обзоре мы разберем основные способы монетизации блога. Подпишитесь на рассылку по форме ниже, чтобы не пропустить. Всем удачи!
P.S. Вчера решила почистить старый ноутбук от пыли внутри, разобрала, а собрать обратно не могу. Вот беда, что же делать?
Привет, друзья! Вы решили создать свой сайт, но не знаете с чего начать? А обращаться к профессиональным разработчикам слишком дорого? Не унывайте! Я помогу вам, подробно рассказав, как создать сайт на WordPress бесплатно. У вас есть 2 варианта: сделать все самим по инструкции ниже либо пойти на бесплатный тренинг и сделать все с тренером и командой поддержки.
Если вы выбрали первый вариант, то читаем инструкцию и делаем все по шагам. Если выбрали второй, то приходите на мой бесплатный 4-х дневный курс по созданию сайтов и я открою для вас множество секретов! Чтобы записаться на обучение — переходите по ссылке: и регистрируйтесь. Моя инструкция – пошаговая. Поэтому у вас не возникнет проблем с тем, чтобы воплотить в жизнь свою мечту. Единственное, о чем хотел бы вас предупредить – будьте готовы к тому, что вам придется много работать. Успех просто так никому не дается!
Как создать сайт на WordPress бесплатно и почему именно WordPress?
Я буду рассказывать вам, как создать сайт на WordPress бесплатно. Но, вероятно, у наиболее любопытных обязательно возникнет вопрос – а почему, собственно, WordPress? Ведь есть и другие системы, позволяющие создавать веб-ресурсы. Например, Drupal или Joomla.
В свое время мною была проведена значительная аналитическая работа по сравнению нескольких систем. Ее результатом стал вывод, что именно WordPress является наиболее дружелюбной системой для новичков:
- идеален для создания блогов;
- интуитивно понятный интерфейс;
- имеется множество плагинов, повышающих функциональные возможности;
- удобный визуальный редактор.
Кстати! Если вы умеете работать в текстовых редакторах, у вас не возникнет проблем с публикацией и оформлением текстов. А вот на таких движках, как Drupal или Joomla есть некоторые сложности даже с этой простой опцией.
Учитывая все вышесказанное, могу сказать, что именно WordPress представляет собой оптимальную современную площадку для создания посещаемого блога и заработка на нем.
Надеюсь, я вас убедил, что нет ничего лучше описываемой платформы. Теперь приступаю к описанию пошаговой инструкции, как создать сайт на WordPress бесплатно.
1. Регистрация в хостинге
Хостинг – это фактическое место на сервере, где будет размещаться ваш сайт. Такие услуги предоставляют многие компании. При выборе конкретного хостинга следует ориентироваться на такие аспекты:
- стоимость хостинга;
- наличие дополнительных опций;
- качество технической поддержки;
- размер пространства, предоставляемого под размещение сайта.
Пошаговая инструкция как зарегистрироваться в хостинге (видео):
Для регистрации в хостинге TimeWeb перейдите по ссылке
2. Подбираем доменное имя
Начинать нужно с подбора имени своего сайта. Важно, чтобы имя отображало тематическую направленность создаваемого вами ресурса.
Обратите внимание! Если вы ведете личный блог, то можно использовать просто фамилию. Например, доменное имя будет иметь следующий вид petrenko.com. Но это не значит, что если сайт посвященным мобильным телефонам, в качестве имени нужно использовать название телефона – такой вариант заведомо проигрышный.
Для названия сайта можно писать русские слова латиницей. Например – futbol.ru. Хотя, конечно, в идеале рекомендуется использовать правильные английские слова, написанные без ошибок. Это придаст солидности сайту. Регистрация доменного имени проводится на специальных сайтах. Ничего сложного в этом нет – следуйте инструкция сайта и все у вас получится.
Совет! Для регистрации доменного имени рекомендую воспользоваться сервисом timeweb . Он отлично зарекомендовал себя, пользуюсь уже много лет – устраивает и стоимость, и поддержка. Переходите по ссылке и выбирайте вкладку Домены
Пошаговая инструкция как подобрать и зарегистрировать доменное имя (видео):
Но! Важный момент: если вы хотите сторонний домен с какой-то необычной доменной зоной (к примеру.com.ua), то смотрим видео как купить отдельный домен и привязать его к хостингу:
3. Установка сайта на сервер и предварительные настройки
Первый шаг – установка CMS. Начинать ее рекомендую на собственном компьютере, а только после того, как все будет сделано, переносить сайт на выбранный хостинг. Там нужно следовать подсказкам. Ничего особенного сложного нет. Но если у вас возникли проблемы с тем, как установить WordPress на хостинг, пишите в комментариях – либо отвечу там, либо, если запросов будет слишком много, напишу отдельную статью на эту тему.
Шаг 1
Шаг 2
4. Устанавливаем тему оформления
Найти тему для WordPress не проблема – их полно в Интернете в свободном доступе. Среди них можно найти массу интересного и необычного.
Совет! Но я настоятельно не рекомендую скачивать тему с непонятного сайта. Темы подбирайте на официальном сайте WordPress. Там они все безопасные и корректно работающие.
Выбрав тему, опубликуйте несколько статей и материалов на сайте. Сложностей с публикацией не будет. Как уже говорил выше – редактор очень простой и интуитивно понятный.
После публикации можете приступать к редактированию теме. Кстати, предварительная публикация статей нужна для того, чтобы лучше понимать, как будет меняться сайт, его внешний вид после редактирования темы.
Но на первых порах советую работать со стандартным шаблоном, не внося в него особых изменений. Лишь когда у вас появятся более фундаментальные навыки, а также вы поймете, что именно хотите получить в оформлении сайта, приступайте к редактированию шаблона.
Инструкция по подбору и установке темы для сайта (видео):
5. Контент и структура сайта
Рассказывая о том, как создать сайт на WordPress бесплатно, нельзя пройти мимо наполнения сайта контентом.
Под контентом подразумевается любая информация, представленная в разных формах:
- статьи;
- фотографии;
- диаграммы;
- видео и т.д.
Работать в административной панели просто. Не нужно ничего бояться – вы не испортите и не сломаете сайт!
Теперь переходим к структуре сайта. Она подразумевает следующие базовые элементы:
- страницы и записи;
- рубрики;
- виджеты.
К страницам относятся те разделы, что являются статическими элементами общей структуры – это:
- Главная;
- О сайте (О нас, О авторе);
- Контакты.
Обратите внимание! Страницы «О сайте» и «Контакты» — обязательны. Их наличие, а также адекватная информация формируют доверие пользователя к сайту.
О главной
В подавляющем большинстве случаев на движке WordPress главная страница – динамическая. То есть, она постоянно обновляется – новые статьи появляются вверху, а более старые опускаются вниз, переходят на другие страницы.
Появление новых статей приводит к обновлению главной страницы, что положительно отражается на сайте – поисковые роботы ценят обновленный контент.
- Футбол;
- Волейбол;
- Баскетбол;
- и т.п.
То есть, в каждой такой рубрике публикуются статьи, посвященные конкретному виду спорта.
О виджетах
Виджеты в WordPress – это отдельные блоки, которые помещаются в правой боковой колонке. В них содержится определенная информация. Например, посредством виджетах на страницах сайта можно выводить следующую информацию:
- Прогноз погоды;
- Календарь;
- Свежие записи;
- Форму авторизации;
- и многое др.
Обратите внимание! Некоторые темы поддерживают не все виджеты. Также не рекомендую устанавливать их слишком много. Во-первых, пользователь устанет от большого количества информации. Во-вторых, перегрузите сайт.
Что нужно продумать перед тем, как создавать сайт
Рассказывая о том, как создать сайт на WordPress, хочу отметить следующее – перед тем, как делать свой веб-ресурс, определитесь со следующим:
- необходимость наличия комментариев;
- какие функции вы хотите добавить и какие плагины для этих целей необходимы;
- сколько ресурсов (времени, сил, денег) вы готовы вкладывать в сайт;
- как вы планируете (и планируете ли вообще) монетизировать сайт.
Постарайтесь максимально полно описать все пункты. Это поможет вам сделать действительно функциональный и полезный сайт.
6. Плагины для WordPress: какие выбрать
Плагин – это особое программное обеспечение. Правильнее даже говорить – дополнение. Посредством плагинов повышается функциональность сайта. Существует большое количество плагинов, но это не значит, что вы должны использовать их все.
Совет! Слишком большое количество плагинов замедляет работу сайта. Поэтому устанавливайте только самые необходимые.
Подумайте, какие функциональные возможности должны быть у вашего сайта. Исходя из этого добавляйте соответствующие плагины. Расскажу о наиболее популярных и необходимых.
Позволит вам защититься от атаков спамеров в комментариях под статьями. Поверьте, спамеров будет много, если не установить плагин, они просто завалят ваш сайт непонятными комментариями и рекламными предложениями. В том числе, рекламируя продажу не совсем благонадежных товаров и услуг.
WordPress SEO от Yoast
Этот плагин необходим для обеспечения самостоятельного продвижения сайта в поисковых системах. У него есть бесплатная версия, имеющая все основные функции для продвижения.
Пользоваться плагином – легко. Он интуитивно понятный. И позволяет решить все основные задачи и вопросы, возникающие при продвижении сайта.
Чтобы не возникло проблем с использованием плагина, внимательно прочитайте руководство пользователя, представленное на сайте разработчиков.
RusToLat
Еще один важный и необходимый плагин, который существенно упростит вам жизнь. Он проводит автоматическое изменение URL-адреса, транслитерируя кириллицу в латиницу. Это крайне важно для нормальной работы и эффективного продвижения сайта.
Пожалуй, его нужно устанавливать вторым после Akismet.
Anti-XSS attack
Плагин, необходим для повышения уровня безопасности сайта. Он защитит от XSS-атак.
MaxSite Russian Date
Этот плагин нужен для правильного отображения дат. Если у вас они выводятся некорректно, просто установите этот плагин и проблема будет решена.
Russify Comments Number
Некоторые темы не могут правильно склонять слово «Комментарий», что приводит к некрасивому указанию количества комментариев под постом. Установив этот плагин, вы решите проблему.
Subscribe to Comments
Позволяет пользователям подписываться на комментарии. Весьма полезная фишка, поскольку повышает удобство использование сайта, а также мотивирует пользователей вернуться на сайт, чтобы прочитать или ответить на комментарии.
Dagon Design Sitemap Generator
Он поможет вам создать карту сайта. Она необходима для эффективного продвижения сайта. С ее помощью поисковые роботы проводят индексацию веб-ресурса.
Google XML Sitemaps
Еще один плагин, посредством которого формируется карта сайта. Создается она в формате XML – именно такой формат любят поисковые роботы. Создание карты, как говорилось выше, важно для нормальной индексации ресурса и его последующего продвижения.
WP-NoRef
Все ссылки, которые будут публиковаться на вашем сайте, автоматически закрываются от индексации поисковыми системами. Они помещаются в специальный тег теги noindex с добавлением атрибута rel со значением nofollow. Благодаря этому вы не будете передавать «вес» своего ресурса сайтам, на которые стоят ссылки. Что благоприятно скажется на продвижении.
Disable WordPress Updates
Отключает постоянный поиск обновлений, как самого движка, так и уже установленных плагинов. Это положительно отражается на скорости работы, загрузки сайта.
Hyper Cache
Плагин создает кэширование, что снижает общий уровень нагрузки на сервер, а это в свою очередь приводит к более быстрой работе самого сайта.
WordPress Related Posts
Нужный плагин! Он отображает похожие по тематике статьи под читаемым материалом. В итоге, это повышает удобство пользования сайтом – к тому же, вовлекает пользователя в просмотр все новых и новых страниц. В итоге, пользователь остается на сайте дольше времени, пересматривает больше статей.
Кстати, благодаря этому плагину создается , что весьма полезно для продвижения сайта.
Video Embedder
Если вы собираетесь добавлять на свой сайт видео-ролики, обязательно используйте данное расширение. Оно дает возможность добавлять ролики с наиболее просматриваемых видео-ресурсов.
Плагин простой в использовании. Даже если вы никогда не работали с расширениями, проблем у вас не возникнет.
WordPress Audio Player
Отличный плагин для публикации музыки, прочих ауди-файлов. Плеер имеет большое количество опций, без проблем подстраивается под внешнее оформление сайта.
Advertising Manager
Отличное расширение, упрощающее добавление рекламных блоков. Важный инструмент, если вы всерьез рассчитываете получать прибыль со своего веб-ресурса.
Использование плагина позволит вам помещать рекламные блоки фактически в любых частях сайта:
- в шаблоне;
- в статьях;
- и т.д.
Он помогает в размещении любых блоков. Даже от сервиса Google Adsense – все будет выполняться быстро и просто.
Обратите внимание! Конечно, для размещения блоков можно пользоваться еще одной методикой – она подразумевает использование только кода. С одной стороны – это хороший метод, поскольку не требует установку расширений, что снижает нагрузку на сервер. С другой стороны – не все знаю, что такое код и как с ним работать.
Насколько важно иметь на своем сайте кнопки социальных сетей, наверное, даже не стоит говорить. Ведь их наличие существенно упрощает процесс взаимодействия пользователя с вашими материалами.
Существует целый ряд плагинов, позволяющих установить кнопки социальных сетей. В целом, они все схожи. Основное отличие – внешний вид кнопок.
После установки понравившегося вам плагина вы сможете:
- выбрать кнопки определенных сетей;
- выбрать их размер;
- выбрать их месторасположение на сайте.
Обратите внимание! У каждого плагина имеется ряд настроек. После установки обязательно ознакомьтесь с официальным описанием расширения, чтобы правильно настроить его работу.
7. Оптимизация ускорения загрузки страниц
Не редко пользователи сталкиваются с ситуацией, когда сайт работает уж слишком медленно. Это не очень хорошо – во-первых, пользователи не любят ждать загрузки, во-вторых, поисковым роботам не понравиться такая работа сайта, а поэтому он будет плохо индексироваться.
Медленная работа – следствие установки большого количества плагинов. Хотя, описанные мною расширения работают хорошо и не создают большой нагрузки на сервер.
Но даже если сайт работает нормально, грузится хорошо, уделите внимание оптимизации. Среди методов ускорения работы стоит выделить кэширование страниц. Об это я говорил выше, при описании плагинов.
Среди прочих методов стоит выделить уменьшение изображений – не загружайте слишком большие картинки, уменьшайте их размер, оптимизируя под веб-ресурсы. Такую оптимизацию позволяют провести большинство редакторов изображений.
8. Финансирование и прибыль
Продолжая рассказ, как создать сайт на WordPress бесплатно, остановлюсь на монетизации ресурса. То есть, внедрение определенных фишек, позволяющих получить доход от сайта.
Множество сайтов закрываются только по одной причине – нет возможности получать прибыль. Но тут нужно сразу понимать – чтобы сайт стал успешным, в него нужно вкладывать силы, знания, ресурсы. Ничего просто так с неба вам падать не будет!
Как вариант, можно оплачивать работу копирайтера, контент-менеджера, сео-специалиста. Но если такой возможности нет, придется всю работу делать самостоятельно.
А для этого потребуются определенные знания, умения. Опыт – не обязателен, его вы получите в процессе работы, а вот знания обязательны.
Что нужно знать для создания успешного сайта на WordPress
О том, как создать сайт на WordPress пишут много людей и «специалистов». Все говорят о том, что это очень легко! Конечно, прочитав такие статьи, сразу хочется тут же начать работу над сайтом и получать огромные деньги от рекламы.
Я не буду вводить вас в заблуждение и надевать вам розовые очки! Наоборот, будут с вами предельно честным – создание успешного и посещаемого сайта, который будет приносить вам прибыль, дело не простое. Да, повторить определенные действия, описанные мною в статье, не сложно, но для достижения успеха придется вложить немало ежедневного труда.
А также получить определенные знания. В частности, следует владеть навыками работы с:
- текстовыми редакторами;
- графическими редакторами.
Обратите внимание! Для более глубокой проработки сайта потребуются знания кодировки – html, css и php. Хотя на начальном этапе можно обойтись и без них, но в будущем желательно все же изучить код.
Чтобы сайт был посещаем, статьи были на первых позициях в выдаче поисковых систем, важно знать хотя бы основы SEO. Это поможет вам провести эффективную оптимизацию всего сайта в целом и отдельных частей в частности.
Кстати! SEO весьма интересное направление. Потратив время и деньги на его изучение, вы узнаете много нового и полезного для вас. А впоследствии сможете даже зарабатывать деньги, продвигая чужие сайты.
В первую очередь вам необходимо будет составить семантическое ядро – это подбор запросов, по которым ваш сайт будут искать пользователи в будущем. Для подбора ключевых слов рекомендую пользоваться онлайн-сервисами:
- Яндекс Вебмастер;
- Google AdWords.
Поможет в этом и специальная программа KEYCollector.
Совет! Чтобы достичь успеха, обязательно изучите все возможные онлайн-сервисы, посредством которых можно развивать и продвигать свой сайт! Их много – о некоторых я пишу в этом блоге. Чтобы не пропустить интересные статьи – обязательно подпишитесь на рассылку новостей!
Как создать сайт на WordPress: подводя итог
Я подробно рассказал вам о 7-и этапах, как создать сайт на WordPress бесплатно! После поэтапного прохождения всех пунктов у вас будет полноценный сайт с высокой функциональностью – удобный и интересный для среднестатистического пользователя.
После этого вам нужно будет засучить рукава и приложить усилия для его наполнения и продвижения. Если вы настроены серьезно, все у вас обязательно получится.
Конечно, в дальнейшем вы сможете вносить изменения в функционал и работу сайта – это уже будет зависеть от ваших потребностей и запросов.
Если у вас еще остались вопросы, то пишите их внизу в комментариях.