Создание сайта от А до Я. Книга 1

Создание сайта от А до Я

Книга 1

Владимир Вдовиченко

Дизайнер обложки Владимир Вдовиченко

© Владимир Вдовиченко, 2022

© Владимир Вдовиченко, дизайн обложки, 2022

ISBN 978-5-0059-4219-7 (т. 1)

ISBN 978-5-0059-4220-3

Создано в интеллектуальной издательской системе Ridero

Введение

Данная книга предназначена не для гуру. В первую очередь она для новичков, которых жизнь по разным причинам вынудила обратиться к вопросам сайтостроения самостоятельно, без знания html кода, на базе бесплатного и уникального CMS-движка Wordpress, рассчитывая только на свои мозги и упорство. В ней довольно подробно изложены основные аспекты, с которыми столкнётся новичок при создании своего первого сайта. В книге дан алгоритм действий по разработке макета и дизайна сайта, выбору хостинга и доменного имени. Даны руководства по установке Wordpress на свой компьютер, базовые понятия что такое сторонние темы, шаблоны, плагины и виджеты – основные компоненты сайта на Wordpress, который скачивается бесплатно с сайта https://ru.wordpress.org/ и устанавливается на выбранный вами внешний хостинг.. Подробно разбирается структура сайта, его составляющие, заполнение сайта контентом (содержимым) и публикация готового сайта в интернете. Затрагиваются методы заработка в интернете на своём сайте.

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

Материал, изложенный в книге, не требует для его понимания особых специфических знаний html кода. Освоить его может любой неленивый человек. Главное – начать и идти до конца!

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

Материал книги составлен на основе обширной русскоязычной справки самого WordPress, подробных уроков Михаила Русакова, Александра Борисова, Романа Ваховского, Сергея Кобзарь, Дмитрия Дементий, Данилина, Евгения Вергуса, Грачевского и личного опыта автора. Подробные ссылки на статьи многих других авторов (действующие до середины 2022 г.) даны по ходу текста руководства и в приложении к книге.

Примечание. Книга разбита на несколько частей ввиду её большого объёма и технических трудностей издания многостраничных томов.

В первой части книги рассматриваются такие вопросы как:

Что такое сайт?

Лучшие хостинги.

Алгоритм создания сайта на WordPress.

Конструктор сайтов или CMS движок.

Выбор тематики сайта.

Почему SEO оптимизацией нужно заниматься ещё на

стадии разработки сайта?

Составление семантического ядра.

Правильный подбор ключевых слов и фраз.

Создание макета сайта и его дизайна.

Подготовка контента (заголовки, тексты, медиафайлы).

Как правильно расставлять мета-теги H1, H2, Н3…H6.

Создание почтовых ящиков на Яндексе и Google.

Выбор и регистрация на удалённом сервере.

Регистрация доменного имени.

Подключение доменной почты.

Установка сертификата SSL.

Установка, знакомство и настройка WordPress.

Выбор и установка темы оформления WordPress.

Базовые настройки WordPress и темы Frontier.

Обзор админ-панели WordPress и начальные настройки.

Часть 1

Что такое сайт?

Прежде чем браться за создание сайта, надо чтобы в вашей голове создалось чёткое понимание что такое сайт и зачем он нужен. Есть такая поговорка: «Ясно мыслю – ясно излагаю, хорошо творю». Позволим себе небольшое отступление для новичков. Гуру это не надо. Они и так уже давно всё знают. Так вот, бродя по страницам интернета в поисках ответа на вопрос «Как создать сайт новичку?» вы, наверное, встречали много предложений и уверений что это очень легко, особенно если пользоваться готовыми конструкторами или CMS движками с интуитивно понятным интерфейсом и что с этим справиться даже школьник. Посмею разочаровать вас. Это совсем не так. Проведём небольшую аналогию.

Сайт – это место вашего проживания на бескрайних просторах интернета, своего рода дом, в котором вы живёте, что-то творите и принимаете гостей. Чтобы и вам и гостям приятно было быть в этом доме, он должен быть достаточно просторным, достаточно комфортным, много функциональным и главное информативным. Если у вас есть деньги вы можете просмотреть много предложений, выбрать и купить себе дом по вашему вкусу. Но у новичка пока нет таких денег и он решается построить такой дом-сайт сам, используя готовые конструкторские блоки. Как вы думаете: «Что построит школьник?» Правильно – дом, похожий или на скворечник, или на теремок, или на избушку на курьих ножках. Взрослый, повозившись, сможет построить небольшой одноэтажный дом, который может развалиться уже при первых толчках землетрясения. Чтобы построить небоскрёб необходимо поручить это бригаде, в которой есть архитектор, отвечающий за прочность и внутреннюю структуру здания, дизайнер, который отвечает за привлекательный внешний вид и комфорт внутренних помещений, ну, и саму строительную бригаду, с бульдозером, подъёмным краном, строительным материалом и т. д.

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

– Абалак (Тобольск) «Резиденция Бабы-Яги». – «Кривой дом» шведского дизайнера Пер Далберг в польском городе Сопот. – Проект небоскрёба Walter Towers в виде буквы W.

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

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

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

Приобретя эти курсы вы:

– Избавитесь от информационного хаоса в вашей голове.

– Вы получите чёткий и пошаговый план действий.

– Вы определитесь с выбором тематики для вашего сайта/блога.

– Вы узнаете о всех инструментах и сервисах для создания сайта/блога.

– Вы узнаете, как правильно и что нужно писать в блог.

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

– Вы узнаете, как продвигаются сайты в поисковых системах.

– Вы узнаете несколько десятков способов заработка на сайтах/блогах

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

– И, наконец, у вас УЖЕ будет свой собственный хорошо функционирующий сайт/блог.

Купив платные курсы и изучив их, вы не только научитесь создавать прекрасные сайты, но также сможете заключить с их авторами Партнёрские соглашения, и, рекламируя их курсы на своём сайте, получать комиссию 30—45% (в среднем ~2000 руб.). Две-три сделки, и вы уже с лихвой окупите свои затраты.

Евгений Попов:

Бесплатные промокурсы:

1.Мини-курс «WordPress. Базовый» —

https://w.cscore.ru/pruff/promowpbase

2.Мини-курс «Wordpress. Домен и хостинг» —

https://w.cscore.ru/pruff/promowpdomain

Основы коммерческого веб-дизайна:

3. Продающий лендинг – https://w.cscore.ru/pruff/disc215

4. Укороченный лендинг – https://w.cscore.ru/pruff/sdisc215

5. Ссылка на оформление заказа —

https://w.cscore.ru/pruff/buy215

45 видео курсов по цифровой обработке фото и видео

материалов – https://w.cscore.ru/pruff/education

Михаил Русаков:

6.WordPress 5 с Нуля до Гуру —

https://ruff.programsite.ru/wp5

7.Видеокурс по созданию сайтов на WordPress 5 —

https://ruff.programsite.ru/freewp5

8.Вёрстка сайта с нуля – https://ruff.programsite.ru/makeup

9.Бесплатные уроки по созданию Интернет-магазина

с нуля – https://ruff.programsite.ru/freeim

10.Создание и раскрутка сайта от А до Я —

https://ruff.programsite.ru/kurs

11.Заработок на создании сайтов под заказ —

https://ruff.programsite.ru/freefl

Александр Борисов:

3-х дневный интенсив по созданию блога —

https://1000-k.ru/op/go/bruff/p/blogintensiv

2-х дневный вебинар – Как создать свой тренинг и продать

его в сети – https://1000-k.ru/op/go/bruff/p/infobiz

InnovationBro – система дистанционного обучения

пользователей —https://1000-k.ru/op/go/bruff/p/innovationbro

Видеокурс «КИБЕР-БЛОГГЕР» (электронная версия) —

https://1000-k.ru/op/go/bruff/p/kiber

ОрдерБро – скрипт приема оплаты и партнерской

программы – https://1000-k.ru/op/go/bruff/p/orderbro

Школа интернет-бизнеса Александра Борисова —

https://1000-k.ru/op/go/bruff/p/sborisov

Видеокурс – «Тотальная защита Wordpress»

(электронная версия) – https://1000-k.ru/op/go/bruff/p/security

Видеокурс «ТОП-10 прибыльных интернет профессий» —

https://1000-k.ru/op/go/bruff/p/top10

Видеокурс – «Качественное видео в блог за час»

(Электронная версия) – https://1000-k.ru/op/go/bruff/p/video

Василий Блинов https://iklife.ru/karta-sajta

Андрей Бернадский https://webformyself.com/

Трепачёв Д. П. http://phphtml.net/

Лучшие хостинги

Если вы уже твёрдо решили создать свой сайт (блог), то рано или поздно перед вами встанет вопрос – как и где разместить свой сайт на хостинге?

Помните! Правильно выбранный хороший хостинг – это будущее Ваших сайтов

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

Хостинги:

REG.RU___________https://www.reg.ru/?rlink=reflink-50333

Beget.ru__________ https://beget.com/p844638

MotoCMS.com____https://www.motocms.com/?aff=ruff

Timeweb.com____ https://timeweb.com/ru/?i=37956

HTS.ru____________ http://www.hts.ru/?affid=90975

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

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

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

1PS.RU https://1ps.ru/?p=840101 А если у вас нет времени или желания разбираться с множеством нюансов настроек рекламных кампаний в Яндексе, Google и в соцсетях, созданием, аудитом и продвижением сайтов, и пр., тогда получите помощь профессионалов от 1PS https://1ps.ru/contacts/?p=840101

Как сделать сайт на WordPress на Бегет, пошагово расписано в статьях по ссылкам:

http://inetsovety.ru/kak-sozdat-sayt-na-hostinge-beget/

https://wordpressmania.ru/sozdanie-sayta-na-wordpress/

«Всё это хорошо. Но ведь с чего-то надо начинать!» – скажете Вы. И будете абсолютно правы. Начнём с изучения алгоритма создания сайта и сравнения возможностей конструкторов сайтов и CMS движков.

Алгоритм создания сайта на WordPress

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

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

2.Изучение данной (или иной) инструкции по созданию сайта новичком с нуля.

3.Создание макета сайта и его дизайна

4.Создание семантического ядра (СЯ). Разработка структуры сайта

5.Подготовка контента (заголовки, тексты, фоны, медиафайлы).

6.Создание почтовых ящиков на Яндексе и Google. Наличие аккаунтов Яндекса и Google позволяет получить доступ ко всем необходимым сервисам.

7.Регистрация и покупка места на удалённом сервере (хостинге).

8.Покупка и регистрация доменного имени. Подключение доменной почты вида info@имя_сайта.

9.Установка WordPress на сервер.

10.Выбор и установка темы-шаблона WordPress, адаптивной к ПК и смартфонам

11.Базовые настройки WordPress

12.Подключение основных плагинов, необходимых любому проекту.

13.Установка и настройка Яндекс Метрики

14.Установка и настройка плагина Yoast SEO

15.Установка и настройка плагина-конструктора Элементор

16.Подготовка сайта к Заполнению контентом (содержанием).

17.Создание страниц.

18.Создание рубрик.

19.Создание записей (постов).

20.Создание карты сайта (блога).

21.Установка Метрики на сайт.

22.Защита сайта от взлома. Резервное копирование сайта.

23.Проверка сайта требованиям SEO.

24.Проверка работоспособности сайта.

25.Проверка адаптивности сайта для ПК и смартфонов.

26.Продвижение молодого сайта в интернете.

27.Монетизация сайта и извлечение прибыли.

28.Установка платёжной системы на сайт.

29.Регистрация сайта в поисковых системах

30.Комплексный аудит сайта

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

Не пугайтесь этого списка и не спешите закрывать книгу. Не пройдёт и месяца, как у вас уже будет готовый полнофункциональный сайт. Львиную долю времени у вас конечно отнимут первые четыре пункта, которые никто, кроме вас самих, лучше не сделает. Пункты 5—9, займут у вас всего два-три дня. Пункты 10—12 отнимут у вас ещё один – пару дней. Пункты 13—22 займут у вас ещё неделю (если вы будете следовать инструкции). Дальнейшее продвижение сайта в интернете у всех занимает примерно полгода и зависит от правильности настроек сайта и от поисковых систем пока они к вам присматриваются. Все расходы отнимут у вас пункты 6 и 7. Они не такие уж большие (минимальные ~115 руб./месяц) и зависят от вашего выбора хостинга и условий предоставления услуг. Об этом мы уже говорили выше.

Нужен ли локальный сервер типа Denwer или OpenServer?

Иногда можно услышать такой совет: «Если вы хотите потренироваться делать сайт бесплатно и не выходя в интернет, то устанавливайте WordPress и базы данных для него на локальный сервер (типа Denwer или OpenServer) на вашем компьютере. Это позволит вам пройти всю полноценную процедуру создания, настройки и отладки сайта, прежде чем выставлять его в интернет на удалённый сервер.»

Да, такая возможность есть. Для этого вам необходимо:

– Скачать и установить на компьютер программу локальный сервер, типа Denwer или OpenServer, с поддержкой всех необходимых инструментов (PHP, базы данных MySQL, Apache).

– Установить WordPress на неё.

– Создать и настроить сайт.

– Перенести готовый сайт на внешний хостинг.

Однако, исходя из своей практики автор убеждён, что вообще нет смысла изучать ни Denwer, ни OpenServer, так как это пустая и бесполезная трата времени новичка при создании сайта. Дело в том, что:

– Во-первых, Denwer устарел, давно не обновлялся и не поддерживает php8, а OpenServer не поддерживает 32-битные системы.

– Во-вторых, у многих хостеров есть бесплатный технический домен (без выхода в интернет, как и у Denwer или OpenServer) с неограниченным сроком действия для тестовых работ и ещё есть от 2-х недель до 2-х месяцев срок бесплатного пользования рабочим доменом на сервере. За это время можно создать, настроить/отладить и проверить в действии свой сайт.

– В-третьих, у обязательного плагина Yoast SEO есть функция, где вы можете на любой период указать: «Мой сайт ещё создаётся и не должен быть индексирован в поисковых системах». И в этот период проводить любые тестовые настройки вашего сайта.

Встаёт вопрос: «Зачем вообще нужны локальные серверы и последующие проблемы с переносом сайта с локального сервера на хостинг?» Разумный ответ я вижу только один – если в вашем районе нет интернета и вы, сидя дома на печи, хотите потренироваться в создании сайта. Но это всё равно, что пытаться самому собрать автомобиль у себя в лоджии на 10-м этаже, а затем вызывать МЧС, чтобы его опустить на землю.

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

Удачи вам!

Глава 1. Конструктор сайтов или CMS движок

Для создания сайта новичку, без знания HTML кода, существует большое количество конструкторов сайта и CMS движков.

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

Что такое Конструктор сайтов?

Конструктор сайтов или – WYSIWYG конструктор – это онлайн софт, позволяющий самостоятельно разрабатывать веб-сайты в онлайн режиме, не имея каких-либо навыков в PHP, HTML, JavaScript и т. д. Аббревиатура WYSIWYG означает What You See Is What You Get – с английского: «что видишь, то и получишь». Принцип работы сводится к визуальному передвижению (перетягиванию) элементов сайта так, как это пожелает вебмастер. Прямая аналогия – перетягивание иконок на рабочем столе компьютера с помощью мыши. Такие возможности достигаются задействованием современных drag and drop редакторов – что кардинально упрощает разработку веб сайтов.

Обзор конструкторов сайта дан в

http://www.webbuildersguide.com/best-builders-russia/

Среди конструкторов сайтов лидером является конструктор Wix.

Wix.

https://ru.wix.com/ Русская версия

Неспроста именно Wix многие называют лучшим конструктором, поскольку его возможности часто на порядок выше чем у конкурентов. Во многом это обусловлено тем, что этот конструктор сайтов существует с 2006 года и за этот период времени Wix проделал большую работу по совершенствованию своего сервиса и эта работа продолжается и сейчас. Команде Wix удалось создать действительно мощный инструмент для разработки сайтов и при этом не утратить простоту и удобство использования для пользователей. Что очень немало важно на наш взгляд. Wix использует HTML5, имеет один из наиболее совершенных веб редакторов, удобный интерфейс и самый большой выбор веб шаблонов из всех конструкторов сайтов. Все Wix шаблоны разбиты по категориям – выбор категорий также впечатляет. Таким образом можно найти подходящий шаблон почти для каждого: для музыканта, тренера фитнес зала или просто коммерческой компании. Также немаловажно, что эти шаблоны разработаны профессиональными веб дизайнерами и выглядят они соответственно, несмотря на то, что Wix все же является бесплатным конструктором сайтов и все его шаблоны – бесплатные. При этом вы можете сперва выбрать понравившийся шаблон и только потом приступить к регистрации, что также весьма удобно. Старания Wix не остались не замеченными пользователями – на данный момент на этой бесплатной веб платформе построено более 75 миллионов сайтов по всему миру. Wix конструктор сайтов

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

– Бесплатный.

– Огромный выбор шаблонов – более 1000 штук, выполненных на HTML5;

– Качество шаблонов – одно из лучших среди конструкторов;

– Наличие полностью адаптивных шаблонов;

– Широкие возможности по редактированию шаблонов;

– Функциональный и интуитивно понятный интерфейс;

– Наличие удобного Drag and Drop редактора;

– Множество готовых решений: Форум, блог, чат, мобильная версия сайта и многое другое; Отличная индексация сайтов поисковыми системами;

– Наличие «SEO-мастера», позволяющего отдельно настраивать SEO параметры сайта; Доступная стоимость платных тарифов;

– Наличие работающих скидочных купонов;

– Большой ассортимент приложений в AppMarket;

– Возможность подгружать свои собственные шаблоны;

– Возможность отдельно настраивать обычную и мобильные версии сайта;

– Возможность перенести Wix сайт на другой хостинг (для платного тарифа);

– Высокий уровень работы технической поддержки.

– Наличие большого количества обучающих материалов и видео-уроков;

– Локализация конструктора на русский язык.

Недостатки Wix:

– Отсутствует возможность редактировать HTML/CSS для тонкойдоработки сайта;

– Разработка интернет магазинов доступна только для платных тарифов.

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

Где найти шаблоны для WIX смотри в Приложении.

Что такое CMS движок?

CMS движок или Content Management System – это система управления контентом (содержимым) сайта.

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

Обзор CMS движков для сайта можно посмотреть здесь:

http://ktonanovenkogo.ru/seo/dvizhok-dlya-sajta-cms-besplatnye-cms-sistemy-upravleniya-kontentom-sajta.html

https://internet-marketings.ru/chto-takoe-cms/

Доля популярности CMS на мировом рынке такова:

– 1-е место: WordPress – 58,8%

– 2-е место: CMS Joomla – 6,5%

– 3-е место: CMS Drupal – 4,8%

WordPress

Благодаря тому, что «движок» этой CMS допускает подключение внешних модулей, его функциональность в настоящий момент практически ничем не ограничена, что позволяет использовать WordPress для разработки Интернет-ресурсов практически любого типа: от обычных блогов до новостных порталов со сложной структурой.

У WordPress есть масса преимуществ:

Конечно у WordPress есть и недостатки, но они легко решаются плагинами, которых у WordPress уже десятки, а то и сотни тысяч.

Заходите на сайты, сравнивайте, выбирайте.

Терминология

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

Контент – Содержимое сайта: текст, графика, видео, заголовки, обратная связь и т. д.

Блог —сайт с переменным во времени контентом

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

Это своего рода универсальный конструктор, подобный Lego. Имея огромный запас деталей, мы собираем из него все, что потребуется. Лишнее оставляем в коробке, придаём своей поделке именно тот облик, который требуется. А главное – всегда можем внести коррективы в изобретение.

Движков сегодня огромное количество. Вот рейтинг CMS движков в июле 2014 год (слева) и в июне 2017 (справа):