Вступление.
Приветствую всех читателей на проекте «Сайт — это легко». В предыдущем уроке мы зарегистрировали домен, хостинг, сделали наш сайт безопасным, и установили админку для управления нашим сайтом.
На сегодня у нас задача поинтереснее. Будем создавать контентный сайт. Это инструкция подойдёт тем кто решил создавать создать блог, статейник, новостной сайт, журнал и любой другой информационный ресурс.
В этом уроке я буду делать блог о создании сайтов. А вы, повторяя за мной, можете создать любой контентный проект на ваше усмотрение.
Итак нам предстоит.
- Научиться восстанавливать сайт и создавать резервные копии.
- Мы с вами научимся наполнять сайт контентом (создавать записи, рубрики, меню, боковую панель и прочее)
- Установим красивый современный дизайн на наш сайт. Тему я дам на выбор.
Как создать резервную копию сайта Worpress.
Что ж приступим. Заходим в админку. Ссылку вы должны помнить из предыдущего урока. Так как опыта у нас в создании сайтов нет, мы можем совершить ошибку и сайт может перестать функционировать. Да что там говорить — и опытные мастера нет-нет, да «косячат».
Поэтому, первым делом научимся создавать резервные копии сайта и восстанавливать их. Для этого нам понадобится специальный плагин под названием UpdraftPlus. Плагин — это такое дополнение, которое расширяет функционал нашего сайта. Установить плагины можно прямо из админ-панели нашего сайта. Заходим в «Плагины», «Добавить новый».
Перед нами открывается репозиторий плагинов WordPress. Репозиторий — это удаленное хранилище какого либо материала. В нашем случае — плагинов.
В поле поиск вбиваем название нашего плагина — UpdraftPlus и устанавливаем первый найденный плагин (с оранжевой иконкой). Далее — активируем плагин, а затем переходим к настройкам плагина.
Нажимаем большую кнопку «Создать резервную копию». Перед нами появится всплывающее окно с опциями резервной копии. Оставляем две верхние галочки и так же ставим галочку внизу, для того что бы наша резервная копия не была удалена автоматически. Напротив второго пункта нажимаем троеточие и выбираем все типы данных.
Что такое плагины вы уже знаете. Темы — это шаблон внешнего вида сайта. Загрузки — это файлы, которые мы загружаем на наш сайт, например — картинки. А папка «wp-content» – это основная папка нашего движка где хранятся основные файлы. Нажимаем «Создать резервную копию».
Если создание резервной копии пройдёт успешно, вы увидите такое окно:
Убедиться в этом можно, чуть пролистав страницу вниз. И увидеть созданную нами копию. Я уже создавал ранее резервные копии, так что их у меня много, у вас будет одна.
А мы сейчас попробуем что-нибудь сломать. Вот как сейчас выглядит наш сайт:
Я удалил кусок кода. Пожалуйста, не делайте так, это всё ради эксперимента! И после удаление кода всё выглядит вот так:
Давайте попробуем восстановить наш сайт. Для этого в админ панели сайта переходим в «Настройки», «резервные копии UpdraftPlus».
Напротив созданной нами резервной копии нажимаем «восстановить».
Выбираем необходимые типы данных. Я выбираю все, и нажимаем «далее».
Система говорит нам, всё ок, копию можно восстанавливать. Жмём «восстановить».
Если «выскочит», ошибка:
Не пугайтесь, просто нужно почистить старые папки. Нажимаем «Удалить старые директории».
Видим сообщение об успешном удалении старых папок, нажимаем «вернуться к настройкам UpdraftPlus» и снова повторяем процедуру восстановления.
Если резервная копия восстановится, Вы увидите такое сообщение с зелёной надписью «Restore successful»:
Пробуем обновить наш сайт. Всё заработало. В тему резервных копий углубляться не буду. У плагина есть документация, если есть время и желание, можете почитать «FAQ» на странице плагина. Вам необходимо уметь создавать и восстанавливать резервные копии. Теперь, когда я за вас спокоен можем заняться дизайном нашего сайта. Давайте установим другую тему что бы улучшить визуальную составляющую, а так же структурировать контент для пользователя.
Как установить (сменить) тему (шаблон) на сайте WordPress?
Первый способ.
Для этого заходим «Внешний вид», «Темы».
Перед нами открылось окно с предустановленными темами.
Нажимаем «добавить» и попадаем в репозиторий тем.
Репозиторий тем — это место, где вы сможете выбрать подходящую тему для Вас. Я выбрал тему Gidzone, она имеет современный дизайн и отличную скорость работы. Можете поставить её, а можете выбрать другую на своё. Данный урок рассчитан и на то, что у вас может быть другая тема.
Выбирайте тему какая Вам приглянулась, а я найду Gidzone с помощью инструмента поиска и установлю ее. А после установки, активирую:
В новом окне видим надпись «Новая тема активирована», значит всё — ок!
Второй способ.
Есть и второй способ установки тем. Темы можно найти в интернете. Скачиваете архив с темой, нажимаете кнопку «загрузить», далее — «выбрать файл», загружаете архив с темой, «установить» и «активировать».
Хорошая новость! Я собрал для вас более 15 разных тем для нашего урока у себя на сайте. Все темы бесплатные, без вирусов, заходите, смотрите демо и качайте, если что то Вам приглянулось. Ссылка на шаблоны здесь.
Итак, мы установили тему. Давайте теперь посмотрим, как теперь выглядит наш сайт. Вверху есть кнопка «перейти на сайт».
Тема осталось прежней.
Обновляем страницу с очисткой кэша. (CTRL+F5 для Chrome).
Уже лучше! Но у нас по прежнему нет меню, рубрик и самого контента. Давайте это исправлять.
Как добавить запись на сайт WordPress?
Если вы могли обратить внимание, в верхней части сайта сайта есть панель администратора. Она видна только Вам, неавторизованные пользователи ее не видят. С помощью неё мы можем перейти в админку нажав на иконку «WordPress».
Для начала давайте добавим нашу первую запись. Для этого переходим в раздел «записи». Удаляем тестовую запись. Далее жмём — «добавить новую».
Перед нами открывается редактор. В левой части — поле редактора, сюда мы будем добавлять контент. Справа — вспомогательное меню, в котором можно задавать различные свойства контенту. Фон, цвет текста, отступы, размеры и многое другое.
Контент в редакторе добавляется блоками, это очень удобно. Первое — очевидно, заполним заголовок.
Далее если вы хотите ввести текст, то просто вводите текст, если вы хотите добавить другой тип контента, нажимаем на плюсик. Например — «изображение».
Я буду добавлять запись с описанием одного из шаблонов для сайта, так что добавить изображение вполне логично. Изображение можно добавить с вашего компьютера, по ссылке с другого сайта или уже ранее загруженное. Я загружаю новое. К изображению можно добавить подпись по желанию.
Давайте добавим и описание, т. е. текстовый контент. Нажимаем «Enter» и у нас появляется следующий блок. У меня описание уже заготовлено, так что я его просто скопирую вставлю в редактор.
Раз мы добавляем запись с шаблоном было бы здорово вместо ссылок на скачивание добавить красивые кнопки. Кстати, блоки можно разделять с помощью вот такого инструмента под названием колонки.
Теперь блок разделился на два, куда я и добавлю кнопки.
Слева я добавлю кнопку «демо», а справа «скачать».
Обратите внимание, что в правой части редактора можно менять свойства блока. Так например у кнопки я могу изменить цвет и скруглить углы.
Так же кнопке необходимо присвоить ссылку.
Для примера я думаю достаточно. Блоки можно удалять и менять местами.
Всё интуитивно понятно. Попробуйте сами поэкспериментировать и подбавлять разный контент.
Теперь обратите внимание на правое меню. Переходим на вкладку «запись» и настраиваем нашу запись перед публикацией. Тут, опять же, много настроек, я расскажу Вам про основные.
Как добавить рубрики и метки на сайт WordPress?
Обязательно указываем рубрику. Это необходимо для структурирования контента. Например на свой сайт я буду добавлять много шаблонов WordPress и пользователю будет удобно подбирать их в отдельной рубрике а не с кучей других записей. Рубрику можно создать находясь в редакторе. Пишем название рубрики и нажимаем «Enter».
Для записи так же можно указать и метки, или их ещё называют тэги.
Так же необходимо установить миниатюру записи. Я использую уже загруженную картинку из библиотеки изображений WordPress, которую я ранее добавлял в запись.
Контент добавлен. Свойства записи указаны. Нажимаем опубликовать. Запись можно сделать открытой или публичной, а так же запланировать на определённое время.
Наша запись открытая, размещается в режиме реального времени, поэтому ещё раз нажимаем «опубликовать».
Запись добавлена. Посмотреть запись вы можете нажав на ссылку «Просмотреть» в правом верхнем углу редактора.
Небольшое отступление насчёт миниатюры. Многие темы сразу выводят миниатюру в начало поста. В таком случае нет необходимости добавлять картинку в поле редактора, иначе она у вас задвоится.
Давайте посмотрим как выглядит наш сайт на главной странице. Пока что контента маловато. Я добавил ещё записей, теперь мой сайт выглядит вот так:
Есть контент, но нет навигации.
Как добавить и настроить меню на сайте WordPress
Давайте настроем меню. Меню настраивается для всех тем и шаблонов по одному и тому же принципу. Для этого заходим в админку. В админ панели нажимаем «внешний вид», «меню».
Как видно, меню у нас нет, поэтому давайте его создадим. Придумываем название на своё усмотрение и выбираем область отображения. Mobile – меню будет отображаться в мобильных версиях сайта. Header — сверху версии сайта для пк. Нажимаем «Создать меню».
Теперь давайте добавим в меню различные пункты. Как я уже говорил, для пользователю будет удобно, если мы добавим в меню различные рубрики. Для этого нажимаем «рубрики» и выбираем вкладку «все». Далее — отмечаем нужные нам рубрики и нажимаем кнопку «добавить в меню».
Так же полезно для пользователя будет добавить ссылку на главную страницу. Для этого нажимаем «произвольные ссылки», указываем текст: «Главная» а вместо ссылки указываем «/». Жмём «добавить в меню».
Что бы ещё добавить в меню? Будет здорово, если вы создадите страницу с описанием вашего проекта а так же страницу с контактами, что я и сделал ранее. Давайте их тоже добавим в меню.
Пункты меню можно менять местами, а так же редактировать и удалять:
Сохраняем меню.
Немного о том, как создавать страницы. Страница создается по такому же принципу как и запись. В левом меню нашей админки выбираем «Страница», «добавить новую».
В отличии от записей страницы не отображаются на главной странице вашего сайта. Для чего ещё нужны страницы, мы поговорим в другом уроке. А пока давайте посмотрим как выглядит наш сайт с созданным меню.
Ну вот, теперь посетителю будет удобнее найти нужный контент.
Как создать и настроить сайдбар (боковую колонку) на сайте WordPress.
Давайте настроим сайдбар. Сайдбар — это боковая колонка на сайте, у меня она выглядет вот так. Смысл ее схож с меню, она позволяет делать навигацию по сайту удобнее. Пример. Часто в интернет магазинах в сайдбаре используют фильтр товаров. Давайте и мы добавим сюда какой либо контент. Какой контент сюда добавить. Полезный для пользователя и такой, что бы она не дублировался с основным контентом сайта — лентой новостей, меню и так далее.
Для того что бы отредактировать сайдбар. На главной странице в верхней админ-панели нажимаем «настроить».
Можно это сделать и через админку. «Внешний вид», «настроить».
Ищем пункт «Виджеты». Так он называется у меня. У вас в зависимости от темы он может называться сайдбар или боковая колонка. Кликаем.
У нас открывается колонка с блоками. Их можно добавлять удалять и перемещать.
Я удалю блок поиска, потому что в моей теме он дублируется. Свежие записи тоже удалю, потому что они отображаются на главной странице. Сайт у меня новый, комментариев пока нет. Ну давайте оставим в самом низу. Так что же добавить?
Добавлю ссылку на ютуб канал. Но сделаю ее в виде картинки. Нажимаем «добавить виджет» и выбираем изображение
Оно у меня уже загружено, вы можете загрузить с компьютера. Заполняем поле заголовок. Вставляем ссылку и нажимаем опубликовать.
Рубрики у нас есть в меню, поэтому давайте в сайдбар добавим метки, может это заинтересует вашего пользователя. Назовём облако меток, так лучше звучит.
Ну и ещё один виджет с картинкой давайте создадим. Пусть это будет моя тема для сайта. Назовём этот виджет «Шаблон месяца». Комментарии убираем в самый низ. И ещё раз нажимаем «опубликовать».
Смысл я думаю понятен. Различных виджетов тут много. Можете попробовать добавить разные, поэкспериментировать. А мы движемся дальше. Нажимаем на крестик, переходим на сайт и смотрим как выглядит наш сайт.
А выглядит он очень даже здорово! Супер! Но есть моменты, которые смотрятся не очень. Заголовок вверху сайта смотрится топорно. Давайте это исправим.
Как добавить логотип и иконку на сайт WordPress.
Добавляем логотип.
Нажимаем «Hастроить» и выбираем пункт «Свойства сайта».
Удаляем название и описание и оставляем что то типа этого: «sajtexpert.ru»
Так гораздо лучше. Но можно поступить и по-другому. Оставляем название и описание, убираем галочку, что бы они не отображались. а вместо них у нас будет отображаться логотип. Для этого нажимаем на кнопку «выбрать логотип». У меня уже есть подготовленный логотип, поэтому я и загружу его. Нажимаем опубликовать и смотрим как выглядит наш сайт. Здорово!
Добавляем иконку сайта (favicon).
Заодно давайте установим и иконку (её ещё называют «favicon») нашего сайта в этом же разделе. Иконка — эта маленькая картинка, которая будет отображаться в браузере на вкладке вашего сайта, а так же в поисковой выдаче. Внизу нажимаем на поле «выберите иконку», далее — загружаем иконку и жмём «опубликовать».
Иконка сменилась со стандартной на нашу.
Структура сайта WordPress.
Небольшое отступление. Наверное будет правильно рассказать немного о структуре сайта на движке wordpress. Любой сайт на wordpress поделён на различные блоки с контентом. Сайт на WordPress — не исключение.
Сверху сайта располагается Header («Хедер», «Заголовок»). Здесь как правило находится меню, описание сайта, логотип или какой либо баннер. Справа или слева может отображаться «Сайдбар» — это по сути вспомогательная боковая панель. В основном теле сайта — располагается контентная часть. В нашем случае — это записи. А в низу — располагается Footer («Футер», «Подвал»). Здесь может находится любая информация на ваше усмотрение. Как правило здесь указывается копирайт и какая либо контактная информация. Интернет магазины часто оставляют здесь схему проезда.
Настройки Футера в WordPress. Как поменять копирайт и убрать лишние ссылки?
Для того в админ баре выбираем пункт «Настроить». Далее в боковом меню выбираем «Theme Options», «Footer».
Настройка Футера в данной теме частично выполнена на английском, но не пугайтесь, здесь всё легко я вам все сейчас покажу.
Спускаемся вниз сайта, что бы видеть наш футер и переходим к настройке. Контакты я указал в меню, поэтому в футере я оставлю только копирайт. Его можно поменять вот в этом поле «Footer copyright».
Если поле остаётся пустое — копирайт остаётся по умолчанию. Можете оставить его. Так вы защитите юридически свой контент от копирования.
Так же внизу есть ссылка на WordPress и автора темы. Можете её добавить или убрать на своё усмотрение. Убирается эта надпись в разделе «Footer Credit».
Для меня копирайта в Футере пока достаточно. Тут много ещё что можно настроить. Но боюсь, что тогда эта инструкция совсем растянется. Возможно запишу отдельное видео по настройке этой темы. А пока жмём «опубликовать» и движемся дальше.
В основном наш контентный сайт готов. И выглядит он очень хорошо, современно и наполнено.
Размещение социальных кнопок на главной странице.
В моей теме есть возможность разместить в левую вспомогательную колонку ссылки с иконками. Ссылки эти будут вести на мои блоги в социальных сетях.
Для того что бы настроить иконки нажимаем «Настроить», «Тheme options», «Social Links».
Раскрываем первую ссылку.
Иконки настраиваются с помощью специального шрифта под названием «Font Awesome». Для того что бы иконка отобразилась нужно ввести специальный код в этом поле:
Давайте разместим иконку «Youtube». Что бы узнать код отображения той или иной иконки я захожу на специальный сайт этого шрифта. Ссылка есть прямо здесь, настройках иконок.
С помощью инструмента поиска ищем код для отображения иконки «Youtube».
Система предлагает мне html-код, но для моей темы он полностью не нужен. Мне нужна только вот эта часть «fa-youtube»
Указываем ссылку и меняем цвет. Для ютюба выберу красный. Так же указываем заголовок. Иконка отобразилась. Нажимаем опубликовать.
По такому же принципу сделаю иконки с Дзеном, ВК и Рутюбом. Что бы добавить новую иконку нажимаем кнопку «Add new social Link». Иконки рутюб в этом шрифте нет. Вместо нее сделаю вот такую иконку: «fa-ravelry». Ещё поставлю галочку напротив поля «Open in new window», что бы ссылки открывались в новых вкладках.
Ещё раз нажимаем «опубликовать» и переходим на сайт. Проверяем работоспособность ссылок. Всё работает!
Заключение. Что получилось.
Перед вами финальная версия сайта sajtexpert.ru.
Вы можете перейти на него сами и посмотреть как он работает в живую. По мере возможности буду добавлять туда полезный контент, шаблоны, плагины и обучалки. Поэтому заходите периодически, буду рад вас видеть на своём сайте.
Дорогие коллеги! Урок номер два закончен. Поэтому я не постесняюсь теперь обращаться к вам именно так. Принимайте мои поздравления вы создали полноценный контентный сайт и смело можете назвать себя начинающим вебмастером. От всей души хочу пожелать вам успехов в вашим начинаниях. В очередной раз постарался для вас разложить всё по полочкам. Если есть вопросы жду их в группе ВК, там я отвечаю оперативное. Пишите, буду рад помочь.
Что дальше? Третьим и четвертым уроком я хотел сделать создание лэндинга и интернет магазина. Но немного изменил свои планы. Наверное будет правильно следующим шагом подружить наш сайт с Яндексом и Гуглом, что бы получать посетителей из поисковых систем.
Так вот в след. уроке я проведу для вас туториал по поисковой оптимизации. Научимся делать с вами то, за что компании и фрилансеры дерут большие деньги. Всем успехов в создании сайтов, здоровья и процветания! До скорых встреч!
