Свой сайт на Wordpress: легко, быстро, бесплатно бесплатное чтение
Введение
1. О книге и ее авторе.
Приветствую вас, мой дорогой читатель на страницах этой книги. Меня зовут Маргарита Козодой. Это моя первая книга. Я являюсь экспертом в области информационных технологий в образовании. Веду курсы повышения квалификации для педагогических работников, в том числе по созданию сайтов.
Особенно актуальны мои курсы стали в 2020 году, когда на Россию и весь мир свалилась пандемия и нас всех усадили по домам. Педагоги образовательных организаций, в которых я работаю, учились со мной создавать свои онлайн курсы, а я прокачивала свою экспертность.
А еще я веду курсы для школьников в Академии цифровых технологий Санкт-Петербурга. Они тоже создавали сайты на Wordpress, и занимали первые места в конкурсах. Некоторые ребята пришли ко мне на курс, чтобы создать свой индивидуальный проект и получали в школе высшие оценки.
Недавно я подумала, что мои знания могут быть полезны не только педагогическим работникам и школьникам, а и другим людям тоже.
Вот если вы держите в руках эту книгу, значит, вам тоже интересна тема создания сайта? Давайте вместе сделаем ваш первый сайт! Конечно, можно просто читать эту книгу, но, знаете, что? Ваш сайт сам себя не создаст. Это факт. Чтобы сайт появился, нужно сесть и начать делать его.
В книге я показываю, как создать сайт на примере сайта рукодельницы или маленькой фирмы, которая занимается производством и продажей вязаных вещей. Если вы рукодельница и хотели бы создать свой личный сайт, то эта книга вам точно будет полезна.
С помощью этой книги, мы с вами создадим себе аккаунт на бесплатном хостинге, установим WP, создадим на нем сайт, разместим несколько основных страниц о себе. Кроме того, вы узнаете, что такое лендинг и посадочная страница, чем отличается сайт фирмы от интернет-магазина, научимся взаимодействовать с посетителями сайта и превращать их в покупателей. Я покажу, как можно синхронизировать сайт фирмы с социальной сетью, и расскажу, зачем это нужно и как лучше использовать эту связь.
А задумывались ли вы, нужны ли на сайте маленькой фирмы игры и онлайн игрушки? А вот и да! На практике мы создадим пазл, вставим его в пост и оформим его так, чтобы было интересно читать нашей целевой аудитории.
Кстати, умение создавать онлайн-пазлы может пригодиться не только для сайта. Это может быть оригинальный подарок для вашего близкого человека. Вы находите какую-нибудь фотографию с события, о котором ваша подруга уже и забыла, делаете из нее пазл и отправляете подруге вместе с пожеланиями. Она собирает пазл, и, представляете, ее эмоции? Она видит фотографию, вспоминает об этом событии. Я думаю, ее благодарность вам будет безгранична!
2. Для кого эта книга.
Данная книга – это практическое руководство по созданию сайта рукодельницы или маленькой фирмы. Оно будет также полезно тем, кто хочет создать свой личный сайт, но не желает осваивать программирование и платить деньги вебмастерам.
Если у вас есть ребенок-старшеклассник, который не знает, какой проект сделать, покажите ему эту книгу. Он может создать метапредметный проект по информатике и какому-то другому предмету. Один из моих учеников создал сайт про чудеса света, именно его сайт занял первое место на конкурсе в этом учебном году.
Другая моя ученица создала сайт «Различные способы умножения. Применение художественных навыков в математике». Получился проект на стыке трех предметов: математики, информатики и ИЗО.
Конечно, такие индивидуальные проекты выделяются из всех остальных!
В данной книге очень подробно рассказано, как сделать качественный сайт на Wordpress, проект вашего ребенка точно получит высшую оценку!
А может, вы хотели бы создать свой творческий проект в виде сайта, но не хотите изучать программирование? Эта книга точно будет вам полезна. Чтобы создать качественный сайт творческого проекта совсем не обязательно быть прошаренным программистом, достаточно базовых знаний. В этой книге подробно рассказывается о процессе создания сайта проекта (ведь сайт рукодельницы – это тоже проект!) и способах размещения контента на нем.
Кроме того, книга будет полезна предпринимателям, у которых есть свой маленький бизнес, и которые хотят создать себе сайт, потому что понимают, что в XXI веке невозможно вести бизнес без представительства в интернете.
У меня на курсе был мальчик, который пришел, чтобы создать сайт себе, а в результате, быстро создал сайт своему папе, у которого был маленький бизнес по продаже наборов для шашлыков. Такой вот полезный бонус от посещения курса получился!
Естественно, если вы создаете сайт для реальной фирмы, то в этом случае, его нужно создавать на платном хостинге.
3. Почему Wordpress?
В данной книге описан процесс создания сайта на Wordpress (WP). Выбор данной системы управления сайтом не случаен. По данным независимого агентства Web Technology Surveys за март 2022 года, около 64,8 % всех сайтов в мире использует CMS Wordpress.
Такая популярность этого движка вызвана несколькими причинами. Во-первых, он бесплатен. CMS Wordpress распространяется по открытому лицензионному соглашению (GNU GPL), так что его можно свободно использовать даже в коммерческих целях.
Во-вторых, это неограниченные возможности движка. С его помощью можно создать как интернет-магазин, так и тематический блог, информационный портал, галерею мультимедиа, личный блог или корпоративный сайт.
В-третьих, гибкая настройка внешнего вида и функциональности. С помощью дополнительных плагинов, можно решать технические задачи и дополнять функционал сайта теми элементами, которые нужны для того, чтобы сделать контент наиболее понятным и интересным для пользователей сайта (целевой аудитории).
В-четвертых, простота администрирования. Для того, чтобы управлять сайтом, не нужны глубокие навыки программирования, достаточно базовых знаний об устройстве web-ресурсов.
Кроме того, многие хостеры предоставляют возможность автоматической установки WP на сайт. То есть, не нужно искать дистрибутив, разбираться в тонкостях установки, достаточно сделать пару кликов, и движок установится на сайт сам.
Мы будем создавать сайт на бесплатном хостинге. Нам будет доступен 1 Гб на диске, чего вполне достаточно для достижения образовательных задач при создании сайта фирмы. Для школьного проекта этого тоже хватит, так что смело начинайте создавать свой сайт на WP c помощью этой книги.
Если вы создаете сайт для реального коммерческого проекта, то лучше сразу купить платный хостинг. Это совсем смешные деньги, для начала вам хватит тарифа 2500 рублей в год. Для получения дополнительной информации пишите по контактам, указанным в конце книги.
4. Подготовительная часть. Выбор темы проекта. Изучение целевой аудитории фирмы и сайта.
Эта глава для тех, кто создает сайт проекта. В этом случае, вам лучше выбрать тему, которая будет интересна лично вам, это может быть информационный или творческий проект, а сайт, это будет продукт вашего проекта. В данной книге речь, в основном, пойдет о создании контента для рукодельницы или маленькой фирмы по рукоделию, то есть, информация будет связана с предпринимательством и финансовой грамотностью. Однако, способы формирования контента, общения с посетителями сайта с помощью постов разного типа, одинаковы для всех сайтов.
Глава 1 Понятия и определения.
Для начала определимся с понятиями. Если вы хорошо разбираетесь в том, что такое хостинг, домен, система управления сайтом, и т.д., то можете смело пропустить эту информацию. Но если вы думаете, что домен и сайт это одно и то же, я рекомендую ознакомиться с этим разделом. Здесь же мы разъясним базовые термины, которые нужно знать при работе с Wordpress.
Хостинг – услуга по размещению сайта или иного контента на сервере, обычно имеющем непрерывный доступ к Сети. Хостинг – это «дом», в котором сдается место, чтобы вы могли организовать там свою «квартиру» – сайт. В этой книге мы будем создавать сайт творческого проекта на бесплатном хостинге beget
Домен –имя сайта, то есть это адрес сайта или web-сервиса, написанный понятными человеку символами, которые он может запомнить и набрать в поисковой строке. Домен обычно покупается у регистратора через хостер-провайдера (хостера) или регистрируется самостоятельно. Нам для нашего проекта домен покупать не нужно, мы будем использовать технический домен, предоставленный хостером.
Сайт – представляет собой одну или несколько веб-страниц, объединенных общей тематикой, дизайном и доменным именем. По сути любая страница, выдаваемая поисковой системой в ответ на запрос пользователя, является частью сайта.
Домен и сайт часто путают, но это не одно и то же. Если сайт – это «квартира», то домен – это «адрес» вашей квартиры. Если у вашего жилья нет адреса, невозможно вам отправить письмо. Если у сайта нет домена, невозможно найти его в интернете.
Система управления сайтом (CMS – от англ. Content Management System) – система управления контентом сайта, его «движок».
С помощью CMS мы будем создавать и редактировать страницы сайта, дополнять информацию, загружать изображения, видео, интерактивные элементы, управлять оформлением. Делается это через консоль, или панель управления сайтом.
Плагины – (англ. plugin – подключаемый модуль), т.е. маленькие подпрограммки, которые можно установить дополнительно для расширения возможностей темы или шаблона, который мы выбрали. Устанавливаются из панели управления сайтом.
Виджеты – небольшие элементы сайта, которые позволяют выводить информацию в нужном разработчику месте. Допустим, меню сайта –это виджет, потому что там собираются названия страниц. В Wordpress есть виджеты, которые устанавливаются по умолчанию: последние записи, последние комментарии, архив, и некоторые другие. Но хозяин сайта может убрать или добавить на страницу разные элементы, чтобы сделать ее более удобной и наглядной для пользователей.
Записи или посты (posts) – служат для публикации взаимосвязанных статей. То есть, если на сайте предполагается много постов на одну тему, то, как правило эти посты публикуются в записях и объединяются в рубрики. При публикации поста вы указываете рубрику или рубрики, куда нужно публиковать этот пост. Если пользователь нажмет на название рубрики, система выдаст ему все записи, которые вы в ней опубликовали. Эту возможность удобно использовать для создания карточек товаров. Мы будеи говорить об этом в соответствующем разделе.
По умолчанию записи можно комментировать, но при желании можно эту возможность отменить. Я бы этого делать не стала, так как для нас с вами важна возможность общения с нашей целевой аудиторией, а это удобнее делать именно в комментариях.
Рубрики – это как папка для файлов на компьютере. Здесь собраны все статьи (посты) на одну тему.
Страницы – в Wordpress это автономные кусочки сайта, которые нельзя привязать к рубрикам. Это главное отличие страниц от записей. Каждая страница существует на сайте сама по себе, хотя позволяет создавать подстраницы если необходимо. У страниц также есть так называемые шаблоны страниц, которые могут полностью изменить дизайн конкретной страницы. В записях такого нет.
Спойлер – это скрытая часть текста. На странице отображается только малая его часть, как правило, заголовок, остальное содержание скрыто дот тех пор, пока пользователь не захочет посмотреть его. Как правило, он должен для этого нажать на заголовок или значок рядом с ним.
Посадочная (целевая) страница или лендинг- одностраничный сайт, цель которого, собрать контактные данные посетителей (целевой аудитории) и прорекламировать товар или услугу.
Глава 2. 5 технических шагов создания сайта
Итак, вы готовы приступить к процессу создания сайта фирмы или своего проекта?
Создание сайта состоит из двух частей: технической и содержательной.
Я буду создавать сайт фирмы, которая занимается продажей вязанных изделий, просто мне эта тема ближе. Вы будете создавать сайт своей фирмы или проекта, просто меняйте информацию и грузите свои картинки и карточки товаров и услуг.
Шаг 1. Регистрация аккаунта на бесплатном хостинге
Сам процесс регистрации на бесплатном хостинге несложен. В поисковую страницу браузера вводим запрос «Бесплатный хостинг beget». Самая первая ссылка, скорей всего, будет наша.
Процедура регистрации на хостинге не сложная и не отличается от других. Самое главное убедиться, что вы регистрируетесь на бесплатном хостинге. Для наших задач, создания сайта личного сайта или проекта вполне достаточно. Вам должна открыться вот такая страница (рис. 1).
Рисунок 1. Регистрация на бесплатном хостинге
На скриншоте видно, что после регистрации вам будет доступен 1 Гб дискового пространства на сервере, 1 сайт, 1 база данных, и возможность загрузить 25 тысяч файлов. Доступно также неограниченное количество доменов, но нам это не нужно, потому что все домены платные. Если платить за домен, то лучше купить платный хостинг и получить домен в подарок. Такая возможность есть, но у другого хостера. Здесь я об этом писать не буду, но, если интересно, могу рассказать. Просто напишите мне на электронку по контактам, указанным ниже.
Чтобы получить личный кабинет, нужно ввести свои фамилию, имя и отчество и номер телефона. Укажите реальный номер телефона, потому что на него придет код, который нужно будет ввести в поле (рис.2).
Рис. 2 Поле для введения кода из СМС
На скришоте видно еще одно важное замечание. Техподдержка на бесплатном хостинге не оказывается. Это означает, что техподдержка не должна, по идее, помогать вам. Но на практике я и ребята, которые создавали сайты под моим руководством, всегда получали помощь. Правда, мои ученики писали, что являются учениками и будущими предпринимателями, учатся создавать и администрировать сайты и, поэтому, работают на бесплатных тарифах.
Обращений было много и ни разу нам не написали, что нужно заплатить, чтобы получить помощь. Поэтому, можете смело использовать наш лайфхак.
Если вы все сделали правильно, то появится следующее окно (рис.3):
Рисунок 3. Завершение регистрации на хостинге
На скриншоте мои логин и пароль закрыты синим прямоугольником. Можно ознакомиться с панелью управления, пройдя по ссылке и почитать полезные статьи. Если вы планируете в дальнейшем заниматься сайтостроением, это, действительно, будет полезно.
Перед тем, как нажать кнопку перейти в панель управления, рекомендую создать текстовый документ и сохранить в нем логин и пароль на сайт.
После этого смело жмите синюю кнопку «Войти в панель управления». Вот так выглядит панель управления хостингом (рис. 4).
Рисунок 4. Панель управления хостингом
Перейдем теперь к установке Wordpress.
Шаг 2. Установка Wordpress
Для установки WP нам не нужно ничего скачивать и грузить на хостинг программное обеспечение, данный хостинг позволяет установить Wordpress автоматически. Для этого нужно пройти по ссылке «CMS Установка систем управления», на скриншоте выше это первая иконка во втором ряду. Далее нужно выбрать Wordpress (рис.5):
Рисунок 5. Автоматическая установка Wordpress
Нажимаем на ссылку Wordpress (на рисунке 5 она выделена красным овалом) и в открывшейся таблице заполняем все поля (рис.6):
Рисунок 6. Создание сайта Wordpress
В поле «Описание сайта» можно написать название фирмы или его слоган, если он есть. Позже мы отредактируем эту информацию.
В поле «Логин» нужно придумать свой логин для входа а панель управления сайтом, затем придумываем пароль и вводим его в поле ниже. Главное, запомнить то и другое, без них вы не сможете войти в свой сайт.
После введения всей информации, жмем кнопку «Установить».
Все, наш сайт на WP создан. Вверху страницы «CMS» появилась информация об этом (рис 7)
Рисунок 7. Созданный сайт
Чтобы попасть на сайт, нужно перейти по синей ссылке (цифра 1). Если нажать на букву i (цифра 2), откроется окно с реквизитами созданного сайта. Там можно посмотреть логин и пароль, если вдруг вы их забыли. Если возникнет необходимость удалить сайт, то есть кнопка под цифрой 3.
Есть еще один способ попасть на сайт, в панели управления хостингом в разделе «Сайты» (рис 8.)
Рисунок 8. Раздел "Сайты" в панели управления
Сайт на хостинге создан, самое время перейти к его настройке.
Шаг 3. Выбор и настройка темы (шаблона) для сайта
Так выглядит сайт сразу после установки (рис.9):
Рисунок 9. Стартовая страница сайта
Название сайта можно поменять в разделе «Настройки». Об этом мы поговорим чуть позже. Чтобы начать редактировать сайт, нам необходимо сначала попасть в консоль, панель управления сайтом. Сделать это можно двумя способами. Первый – через панель управления хостингом, раздел сайты (см. рис.7). Второй способ – выйти на сайт и в адресной строке добавить к адресу /wp-admin (рис. 10).
Рисунок 10. Вход в панель управления сайтом через адресную строку
В обоих случаях в открывшемся окне нужно ввести логин и пароль, которые вы ввели при создании сайта (рис. 11):
Рисунок 11. Вход в панель управления сайтом
На рисунке 12 представлена консоль (панель управления сайтом) после введения логина и пароля. Постепенно мы познакомимся со всеми вкладками, представленными справа. А сейчас нам предстоит выбрать шаблон (или тему) и настроить его под наши задачи.
Рисунок 12. Панель управления сайтом
Тема в Wordpress отвечает за внешний вид сайта, его дизайн. Думаю, не нужно объяснять, насколько это важно для успеха сайта? Помните пословицу «По одежке встречают…»? Именно тема Wordpress и является той одежкой, которая встречает ваших посетителей. От того, насколько она красивая и яркая, и соответствует деятельности вашей фирмы, будет зависеть настроение посетителей вашего сайта и их желание приходить к вам еще и еще раз. А потом становиться покупателями ваших товаров и услуг.
Некоторые темы содержат множество полезных настроек, например, дополнительные меню, сайдбары, возможность поменять цветовую гамму сайта или задний фон, то, чего нет в стандартной теме. Но, даже если вы не найдете нужного функционала в теме, всегда можно добавить его с помощью плагинов.
Выбор, установка и активация темы производится во вкладке «Внешний вид» панели управления. Наводим мышь на эту вкладку и в появившемся меню переходим во вкладку «Темы» (рис. 13):
Рисунок 13. Переход во вкладку "Темы"
По умолчанию в этой вкладке всего три шаблона. Сейчас активна тема twenty twenty two. Рядом есть еще две. Если навести мышь на соседнюю тему, появляются две кнопки: «Посмотреть» и «Активировать». При. Нажатии на первую, откроется демо-версия этого шаблона, если тема понравится, ее можно установить на сайт, нажав кнопку «Активировать». Если не одна тема не понравится, можно добавить еще тем в консоль, для этого нужно нажать на кнопку «Добавить» в верхней части страницы с темами.
Для выбора наиболее подходящей темы можно воспользоваться фильтрами характеристик. В открывшемся окне, поставить галочки в те функции, которые хотелось бы иметь (рис. 14):
Рисунок 14. Поиск темы по фильтру характеристик
Жмем кнопку «Применить фильтры» внизу страницы и ждем. Может появиться сообщение, что выбранному фильтру не соответствует ни одна тема, отчаиваться не нужно, попробуйте снова вернуться к началу и выбрать другие характеристики.
После того, как система подберет темы, можно выбрать одну из них. Для этого наводим мышь на тему и жмем на появившуюся кнопку «Установить». Затем нужно дождаться сообщения, что тема установлена, ее нужно активировать (рис. 15):
Рисунок 15. Активация выбранной темы
После того, как тема будет активирована, она появится в списке установленных тем. Ненужные темы можно удалить если они не нужны. Для этого нужно щелкнуть по теме и нажать на кнопку «Удалить», которая находится в нижнем правом углу страницы.
Чтобы посмотреть, как изменился сайт, нужно навести мышь на ссылку с названием сайта и нажать на ссылку «Перейти на сайт» (рис. 16)