banner banner banner
Создание сайта от А до Я. Книга 3
Создание сайта от А до Я. Книга 3
Оценить:
Рейтинг: 0

Полная версия:

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

скачать книгу бесплатно

Создание сайта от А до Я. Книга 3
Владимир Вдовиченко

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

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

Книга 3

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

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

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

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

ISBN 978-5-0059-4222-7 (т. 3)

ISBN 978-5-0059-4220-3

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

Предисловие

В предыдущих двух книгах мы рассмотрели:

– Что такое сайт и алгоритм его создания;

– Выбор хостинга и доменного имени;

– Установка и настройка WordPress и темы-шаблона.

– Настройка основных необходимых плагинов

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

Вот чем мы займёмся в данном разделе:

· Подготовка сайта к заполнению контентом.

· Внешний вид сайта.

· Создание и настройка Меню.

· SEO оптимизация изображений для сайта.

· Сайдбары и Виджеты.

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

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

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

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

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

· Установка счётчика LiveInternet.

· Защита сайта от взлома.

· Резервное копирование сайта.

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

· Проверка валидности сайта.

· Проверка адаптивности сайта.

Часть 3

Глава 16. Подготовка сайта к заполнению

контентом

hhttps://www.youtube.com/user/maestroSt1/featured (https://www.youtube.com/user/maestroSt1/featured)

https://youtu.be/BjA9rSPKC8k (https://youtu.be/BjA9rSPKC8k)

https://wp-system.ru/wm/ (https://wp-system.ru/wm/)

https://wp-system.ru/wm/chek-in (https://wp-system.ru/wm/chek-in)

Давайте последовательно пройдём все этапы необходимые для дальнейшей настройки сайта и наполнения его информацией.

Совет! При работе с любыми панелями Консоли не забывайте смотреть вверху справа «Настройки экрана» и отмечать галочками нужные вам свойства (функции).

Внешний вид сайта

Внешний вид – это лицо любого сайта, которое либо привлекает, либо отталкивает посетителя.

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

Чтобы капитально изменить внешний вид сайта, т.е. сменить основу его архитектуры, необходимо переехать в другое здание – сменить шаблон, на котором он построен. Делается это довольно просто, но не быстро. Вы должны просмотреть тысячи шаблонов, обращая внимание не на его картинки, а на саму структуру расположения основных деталей. Картинки и тексты вы скорее всего замените на свои. Выбрав шаблон, вы либо скачиваете его на свой компьютер в виде *.zip архива, либо, зайдя в Консоль/Внешний вид/Темы выбираете из числа предложенных библиотекой, либо с помощью поиска тем в интернете.

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

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

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

Совет! По возможности выбирайте темы с официальных сайтов из числа русскоязычных и адаптивных тем. Их уже тысячи.

Экран «Внешний вид» используется для управления установленными темами.

Создание и настройка Меню

http://wordpress1.ru/nastroyka-wordpress/menyu-v-wordpress/mnogourovnevoe-menyu/ (http://wordpress1.ru/nastroyka-wordpress/menyu-v-wordpress/mnogourovnevoe-menyu/)

https://wp-lessons.com/sozdanie-i-nastroyka-menyu-v-wordpress (https://wp-lessons.com/sozdanie-i-nastroyka-menyu-v-wordpress)

https://www.seostop.ru/sozdanie-saita/wordpress/menu.html (https://www.seostop.ru/sozdanie-saita/wordpress/menu.html)

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

Начинать создавать меню можно на пустых страницах. Для этого нужны только заголовки страниц. Создадим необходимое число пока пустых страниц:

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

По умолчанию при создании страницы Заголовок страницы автоматом входит в соответствующий ему раздел Меню.

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

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

Для создания новой страницы зайдём в Консоль/ Страницы/Добавить новую

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

Какую страницу сделать главной (стартовой т.е. загрузочной)?

Если вы хотите, чтобы при обращении к сайту он открывался на какой-то определённой странице (категории), то нужно перейти в Консоль/Настройки/Чтение. Выберите пункт «Статическую страницу». Далее выберите страницу, которую вы хотите использовать как главную страницу.

Для того чтобы назначить страницу для вывода всех записей (статей, новостей) вашего сайта на WordPress выберите в пункте «Страница записей» ту страницу, которою вы хотите использовать для вывода записей.

Назначаем страницу «Блог» для отображения записей

Не забудьте сохранить изменения нажав кнопку «Сохранить изменения».

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

Редактирование меню

Для перехода в редактор меню откройте в панели управления WordPress Консоль/Внешний вид/Меню.

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

Чтобы добавить меню, введите его название в соответствующее поле и нажмите кнопку Создать меню.

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

В качестве пунктов меню можно использовать следующие типы элемента:

– страницы

– рубрики

– записи

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

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

Жмём Сохранить

Теперь самое время наполнить его пунктами. Элементы, которые можно добавить в меню, находятся слева. Установите галочки напротив будущих пунктов и нажмите кнопку Добавить в меню – выбранное появится в блоке Структура меню, то есть будет добавлено.

В меню можно поместить страницы, рубрики, записи и произвольные ссылки. Последний тип элементов позволяет пункт с произвольным названием, ведущий на указанную вами страницу. Например, чтобы добавить в меню пункт Сайт, ведущий на главную страницу seostop.ru, надо в поле URL блока произвольные ссылки ввести адрес http://seostop.ru (http://seostop.ru/), в поле название набрать Сайт SEO и нажать кнопку Добавить в меню.

Смена названия пунктов меню

Возьмём первую (главную) страницу. Её заголовок (1) – «Инновационные технологии производства и применения пенобетона». Понятно, что такой заголовок в меню (2) будет смотреться некрасиво.

В Меню мы должны заменить его на Главная.

В разделе Структура меню/Текст ссылки (3) убираем старый заголовок и вставляем новый «Главная»

Заголовок страницы (1) остался прежним, а ссылка в меню (2) изменилась на «Главная».

Эту процедуру проделываем для всех страниц, на которые мы ссылаемся.

Жмём «Сохранить»

Настройка иерархии меню

Расположим заголовки меню в нужном порядке.

Заходим в Консоль/Внешний вид/Меню

Откроется окно, в котором задаётся Заголовок меню, отмечаются галочкой те страницы, которые должны входить в меню. Настраиваем соответствие названия меню для каждой страницы и структуру меню.

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

Проверим соответствие заголовка меню заголовку страницы.

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

Положение меню на странице