Создание страниц: Об авторе, О сайте и Контакты

Итак, друзья! Продолжим! Сегодня мы обсудим, как создать страницы: Об авторе, О сайте и Контакты.

Страница — это статический контент, который появляется вверху сайта (в данный момент, у нас его нет) и зачастую не изменяется. Это первая статья, к примеру, «описание» о вас/ваших услугах, ваши контактные данные и описания вашей компании. Для создания этих страниц и для работы с ними, нам понадобится два плагина:
1) «Simple Page Ordering» или «простая сортировка страниц». (Автор: Jake Goldman, 10up). Он может по-разному называться, но акцентируем свое внимание на автора. Автор именно Джейк Голдман.
2) «Contact Form by BestWebSoft».(Автор: BestWebSoft)

Что мы делаем? Мы заходим в одной вкладке на наш на сайт, чтобы удобно было смотреть, а во второй вкладке у нас будет админка. Помните, что админка — это адрес нашего сайта затем Slash и wp-admin (нашсайт.ru/wp-admin). Пишем вручную или копируем с нашего блокнотика, о котором мы узнали в первом уроке.

Если появились обновления, то мы обновляем. Мы нажимаем на этот кружочек обновления и это добрый знак. Всегда это значит, что наш сайт станет лучше без какого-либо усилия или вреда для нас.

Мы выбираем, что у нас можно обновить. Нажимаем «обновить плагины». Это процесс достаточно простой. И зачастую быстрый.

Что мы делаем сейчас? Нам нужно с вами поработать именно со страницами. Мы заходим. У нас тут есть «пример страницы». Мы его удаляем. Можно выделить, нажать действия «удалить», «применить».

Но гораздо проще просто нажать «удалить». Ждём. Теперь мы создаем сразу три страницы.

Мы копируем или пишем вручную (лучше, я вам советую, копировать, чтобы не ошибаться). Мы скопировали «Об авторе». Обращай внимание, Вот я сюда вставила или написала и нажимаю просто на пустую область черновика. Написано, что черновик сохранён. И, обращайте внимание, на ссылку, которая у нас формируется. Мы чуть ранее настраивали именно эти ссылки. У нас сейчас «адрес сайта»/«об авторе». Все! Все достаточно просто. Написали, нажали «опубликовать».

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

И также добавляем последнюю страницу «Контакты». Ждем! Все опять появилась наша ссылка. Нажимаем « опубликовать».

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

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

Разберём как теперь в нашем шаблоне и во многих других вывести пункты «меню».
И так, чтоб наши пункты «меню» отображались на странице, нам необходимо создать это «меню».

Мы заходим во «внешний вид», выбираем «меню». Мы создаем новое меню. Можете назвать меню на свое усмотрение, а можете назвать «mainmenu». Нажимаем «создать меню».

Создалось.
У нас есть в нашем шаблоне три варианта, где можно это меню отобразить:
Primary menu (Это основное)
secondary Menu (второстепенное)
Footer Menu (Это то, которое находится внизу, в подвале)

В данный момент, нам нужно составить primary меню.

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

Все! Теперь нам нужно добавить, какие пункты меню будут находиться у нас в меню. Мы выбираем нами уже созданные. Важно, нажать «добавить меню». Они у нас здесь появились. Нажимаем «сохранить».

И не поверите, но мы обновляем. У нас теперь есть меню. Посмотрим на очередность пунктов. Как это странно, слева «контакты», потом «о сайте», «об авторе». Зачастую «контакты» находится справа, в самом крайнем пункте меню. Это стандарт. Я вам советую его придерживаться.

Мы заходим и у нас есть первый вариант, как это можно поменять. Просто перетаскиваем «о сайте», «об авторе» «контакты», чтобы потренироваться.

Поставим на первое место «об авторе», «о сайте» и опять нажимаем «сохранить». Заходим, обновляем. Все!

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

Дальше мы работаем с наполнением. Вернёмся к нашей странице. И как? Они у нас ещё остались пустые. Давайте наполнять. Сразу скажу, что если вы хотите создать другие страницы или ещё страницы, то создавайте. Не стесняйтесь.

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

Но код HTML видит его именно вот в таком виде. Нам этот вкладыш «текст» ещё понадобится. Поэтому просто важно о ней знать.

Так, вернусь! В этом пункте меню, да и, в принципе, во всех других, важно размещать информацию, чтобы она была интересная и наглядная. Зачастую это фотографии, заголовки, текст и ещё круто размещать видео. Чуть позже доберёмся. Я сразу подготовила себе такое небольшое описание «об авторе». Просто скопировали. Копировать описание советую вам просто подготовленный текст с блокнота.

Если будем копировать допустим с другого своего сайта или даже с Ворда, они могут добавить свои стили и текст может отображаться немного кривовато.

Поэтому, даже если у вас есть текст с другого сайта или с Ворда, вы копируете в блокнотик и потом оттуда уже копируете на сайт. Это обезопасит вас от каких-либо других проблем. Сохраните.

Проверяем страницу «об авторе». Есть! Текст уже разместился. Симпатично. Давайте добавим какую-либо фотографию. Для начала мы ставим курсор, где мы хотим разместить нашу фотографию. Вот в данный момент я поставила перед своим именем и отчеством., нажимаем «добавить медиафайл», «загрузить файл», и « выберите файлы».

Заранее сохраняем изображения на рабочем столе или в отдельной папке, чтобы удобнее было с ними работать. Сразу скажу, что файлы, которые мы загружаем на сайт, называйте только латиницей, то есть только английскими символами и можно использовать символ «тире». Например, sozdaniesaitov.png и saiti-na-zakaz.png.

Все остальные варианты вообще не советую, потому что потом эти файлы могут некорректно отображаться. Даже формат png и JPEG нормальные. Еще акцентируйте внимание, что нельзя загружать на сайт огромные фотки. Чтобы посмотреть размер своей фотки, можно открыть ее в каком-то редакторе, к примеру, Photoshop или просто в браузере. Размер фотографии можно посмотреть, просто наведя мышкой на вкладку на комьютере. На странице в среднем до 500 пикселей по ширине.

Сразу вам советую заполнять Alt. Мы чуть позже разберемся, что это. Но загружайте и просто подписывайте просто по смыслу. Он заполняется русским буквами. Чтобы фотография была слева, а текст был справа, нажимаем на фотографию, выбираем «изменить» и ставим «слева» и размер меняем. Вы можете сразу или миниатюру делать, или средний, или полной ставить.

Нажимаем «обновить». Обновляем страничку. И смотрите, вроде цивилизованная полноценная страница. Прекрасно!

Теперь мы заполним с вами. Вы можете дальше заполнять, видео кидать, больше текста. Моя задача, показать вам наглядно, как это.

Идём дальше!

Таким е образом наполняем следуюшую страницу.Нам нужно заполнить «о сайте». Зашли. Смотрим, чтоб вкладочка «визуально» была. Подготовьте небольшой текст заранее в блокнотике. Размещайте фотографии немного по-другому. Сразу оставляйте пустое место. Нажимаете «добавить медиафайл», «загрузить файл». Выбирайте уже подготовленную фотографию. Помните у нас там был Alt? Заполняйте его. Вы нажимаете на фотографию, выбираете «изменить», ставите ее по центру и выбираете «полный размер». Обновите и посмотрите, как это будет выглядеть на вашем сайте. Все симпатичненькое какое? Тут может быть любое описание. И так у Вас уже более или менее полноценный сайт.

Вернёмся к другому способу, как можно ещё менять пункты меню местами. Поэтому мы с вами подготовили плагин «Simple page ordering». Сразу запоминайте автор Джек Golden. Ставим плагин. Во вкладке «плагины» выбираем «добавить новый». Поиск плагинов. Я написала, что он ещё по-другому называется «простая сортировка страниц». Вот и смотрим автор Джейк Голдман. Установим именно его, хоть тут и куча других вариантов.

Ждём, ждём, ждем. Сразу же активируем.

Все! У нас «простая сортировка страниц» активирована. Мы также можем ее выключить.

Что нам дал этот плагин? Обратите внимание, теперь, когда мы заходим на страницу, у нас появился такой вот крестик «четыре стрелочки». И мы можем вот уже на страницах менять. Давайте поставим «контакты» на первое место. Заходим, проверяем.

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

Теперь у нас остался пункт меню «Контакты». Он пустой. Я вам советую, зайти и заполнить свои какие-то определенные данные. Желательно писать максимальную информативность: Ф.И.О., мой телефон, электронную почту, ссылки на соц.сети. Причем соц.сети лучше ставить симпатичнее.

Не просто вот ссылку можно было ставить. А вот пишете «я ВКонтакте», выделите и сверху выберите «добавить ссылочку», вставьте ссылку на Вашу страницу сюда и сохраните.

Еще можно настраивать, чтобы ссылка открывалась в новой вкладке, и ваш сайт оставался открытым в предыдущей вкладке.

Обновить. Заходим на сайт, обновляем страницу и смотрим, что получилось. Также можно в каждой другой соц.сети.

Но, зачастую, у нас Люди уже привыкли, что в контактах у нас есть форма обратной связи. Не все хотят сразу идти на контакт. Многим проще просто задать вопрос без каких-либо дополнительных усилий. Звонок потому что, в любом случае, это немного стресс. Поэтому у нас есть заготовленная форма, с помощью которой мы сделаем эту форму обратной связи. Заходим в «плагины», выбираем «добавить новый» и ищем. Копируем «Contact Form 7», добавляем как плагин. Посмотрим сразу автор Takayuki Miyoshi. Неожиданно. Но вот он. Нажимаем «установить» и «активировать».

Плагин установлен. Вот у нас появляется в левой колонке вкладка «контакт форм 7». Нажимаем на него. И сразу «контактная форма 1». Она сразу стандартная. Написано «вставить шорткод в записи, где нужна эта форма». Копируем и сохраняем.

Сейчас заходим во вкладку «страницы», выбираем «все страницы», затем «контакты». Вставляем сюда в «визуально», сохраняем. И вот эта форма.

Мы можем изменять. Необходимо опять зайти в «контакт форм 7». Заходим в нашу форму. Назвать её можем по-разному. Можем создать несколько форм без проблем. У нас сейчас «имя» и «mail» или «сообщения» обязательными. «Имя» можно сделать необязательным. Просто убираем вот эту звёздочку.

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

Как это проверять? Когда мы заполняем форму и нажимаем на сайте «отправить», то нас предупреждает, что мы не заполнили обязательное поле.

Мы, таким образом, вставляем всякие шаблончики, корректируя их, можем изменять эту форму. К примеру, если не нужно нам это, просто убираем «тему». Сохранить. Проверяем. Обновляем.

Супер! Всегда оставляйте хотя бы одно обязательное поле.

Если вы хотите, допустим, вставить ещё что-то, например, телефон, вы можете стандарты задать. Нажать «вставить тег». Смотрим, как это будет визуально. Оно сразу вставляет поле для телефона.

И тут сразу будет оно определяется как телефон. Мы можем так вот заполнять. Все, что мы хотим, можно делать. Можно просто копировать верхнее поле и вставили его, как третье поле. Чтобы не углубляться в эти коды. Потому что это сложновато. В этом поле вместо «ваше имя», мы написали «ваш телефон». Супер! Заполнили, к примеру, текстовую строчку и телефон и нажали «отправить». И эти данные придут к вам на почту. Снизу будет написано: «Ваше сообщение отправлено».

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

Тут видно, куда будет отправляться, в таком формате, тема будет какая, какой стандарт этого ответа. Все можно корректировать под себя. Хотите, чтобы на один мэйл пришло, то пишите свой. Хотите на кокой-то другой, то опять же корректируйте и приходит на другой.

Какие есть уведомления при отправке формы? Опять же все можете подкорректировать под себя. На любом языке очень удобно.