скачать книгу бесплатно
Теперь нам надо определиться где будет расположено меню на странице. Опускаемся вниз, выбираем Primary или Top Bar, жмём «Сохранить меню».
Открываем наш сайт. Для этого жмём в Консоли на имени нашего сайта
Добавление Рубрик в меню
Если необходимо в Меню поместить рубрики, то поступаем следующим образом.
Заходим Внешний вид/Меню
Опускаемся вниз и жмём на Рубрики/Все.
Отмечаем галочкой нужные Рубрики и подрубрики и жмём Добавить в Меню
Методом переноса расставляем рубрики и подрубрики в панели «Структура меню» в нужном порядке. Подрубрики сдвигаем немного вправо.
Если возникают проблемы переноса или сдвига мышкой, то открываем треугольник справа и в дополнительном окне выбираем выше-ниже.
После настройки меню вверху справа жмём «Сохранить». Заходим на сайт и смотрим, как работают наши настройки.
Смотрим как работают наши основные пункты меню Наши услуги и О нас и их подменю (см. рисунок) и проверяем что они ведут нас на нужные страницы.
Создание дополнительного меню
Таким образом можно создать сколько угодно меню, главное – предварительно щёлкнуть ссылку создать новое меню, иначе вместо добавления очередного меню вы отредактируете уже существующее.
Чтобы меню отобразилось на сайте, установите флажки (или флажок) блока Области темы. Количество и названия её элементов зависят от используемой темы оформления. В нашем случае тема поддерживает только основное (располагается справа) и дополнительное (находится слева) меню. Если вы установите оба флажка, на сайте появятся сразу два меню, которые будут дублировать друг друга. Если вы хотите иметь два разных меню, то вам необходимо создать их и установить для каждого свой флажок (одному Основное верхнее меню, другому – Дополнительное меню слева).
Размещение меню
Меню можно располагать не только в местах, установленных темой (делается это через виджеты), но и в любой другой части сайта или даже на определённой странице.
Чтобы вставить меню в любое место, добавьте строку:
<?php wp_nav_menu ();?>
непосредственно в код страницы там, где хотите его разместить. Строка сработает, если произвольное меню на сайте всего одно. При наличии нескольких в код следует добавить строку вида:
<?php wp_nav_menu (array (’menu’ => «Меню_1»));?>
где вместо Меню_1 нужно ввести название вашего меню.
Установка логотипа, имени сайта, его описания и иконки
После долгих подготовок и настроек, наконец-то, начнём формировать наш сайт и заполнять его информацией. И делать это мы будем на примере сайта, рекламирующего «Инновационные технологии изготовления и применения пенобетона в строительстве малоэтажных домов»
Картинки иконки и логотипа желательно заготовить заранее.
Логотип должен отражать суть вашей фирмы и её деятельности. Логотипы крупных фирм патентуются и охраняются законом. Поэтому запрещается использовать чужие логотипы. Но при небольшой фантазии вы можете создать свой логотип.
Логотип можно подготовить в любом из 16 графических редакторов, обзор которых дан на сайте http://www.dejurka.ru/graphics/best-free-graphic-editing-software/ (http://www.dejurka.ru/graphics/best-free-graphic-editing-software/)
Рекомендуемый размер 240х240 px.
Иконки можно вставлять для украшения в начале статьи, записи. Она должна хоть немного соответствовать содержанию статьи. Большой выбор иконок можно найти на сайте: dryicons.com
Настройки/Общие
Внешний вид/Настроить/Свойства сайта.
Устанавливаем Логотип, Название сайта, краткое описание и устанавливаем иконку. Логотип и иконку можно придумать и изготовить самому в любом графическом редакторе, например, в Paint.net/ При установке Логотипа и Иконки вас попросят загрузить их или с интернета, или с вашего компьютера.
Жмём «Сохранить». Смотрим свой сайт.
Изображение заголовка
Как правильно брать бесплатные картинки для сайта – http://youtu.be/sck3GEKxGv8 (http://youtu.be/sck3GEKxGv8)
Для начала хотим предупредить вас, что у многих красивых картинок есть свои хозяева с авторскими правами. Чтобы не попасть в неловкую ситуацию, в которой вас могут обвинить в плагиате (воровстве) картинок, пользуйтесь сервисами свободного доступа к изображениям (см. Приложение). В самом крайнем случае оставляйте ссылку на сайт, откуда взято изображение. Ссылку можно давать как по тексту, так и разместить её на самом изображении где-нибудь внизу справа. Сделать это можно в любом графическом редакторе.
https://ru.support.WordPress.com/themes/custom-header-image/ (https://ru.support.wordpress.com/themes/custom-header-image/)
Многие темы WordPress.com позволяют пользователям загружать свои собственные изображения заголовка с нанесённым на него красивым текстом
Загрузка изображения заголовка
Перейдите на страницу консоли Внешний вид -> Заголовок. Если такой возможности нет, значит, ваша тема не поддерживает выбор изображения заголовка.
Жмём «Добавить»
Нам предлагают загрузить файл из Библиотеки (они на рисунке) из интернета или с компьютера.
Внимание! Можно использовать только файлы. jpeg,.gif, и. png. Все обрезанные изображения будут преобразованы в формат JPEG. Лучше всего использовать изображение правильного размера, т.е. подходящего для вашей темы. Чтобы сохранить прозрачность, используйте изображения. gif или. png правильного размера.
Если вы загрузили изображение, размеры которого не подходят выбранной теме, вам предложат его обрезать. Не торопитесь это делать, ведь вам дорог рисунок в том виде как вы его подготовили. Иногда можно растянуть рамку обрезки на всю картинку, затем жмём «Не обрезать» и потом «Вставить» или «Опубликовать».
Наложить красивый текст на фото можно с помощью следующих приложений.
– Pics Art; 144 мб рус
– Aviary; 39 мб рус
– InShot; 97мб рус бесплатно
– Camly 125 мб рус бесплатно (+много крутых наклеек);
– PicSee 126 мб рус бесплатно (текст в фигурных рамочках);
– https://ofont.ru/category/0 (https://ofont.ru/category/0) более 5000 русских шрифтов
После сообщения о смене заголовка можно перейти на сайт и посмотреть, как он выглядит.
Уже неплохо!
Забегая немного вперёд, чтобы в дальнейшем не вносить изменения в уже сформированный сайт, опишем необходимые SEO настройки изображения.
SEO оптимизация изображений для сайта
Внимание! Картинки берите не просто в Интернете, а на бесплатных фотостоках – https://unsplash.com/ (https://unsplash.com/), https://pixabay.com/ (https://pixabay.com/) и https://www.pexels.com/ (https://www.pexels.com/)
1.Если изображение слишком большое, то будет более верно разместить превьюшку (уменьшенное изображение) с возможностью перехода по дополнительной ссылке для просмотра полноразмерного изображения.
<a href=«место размещения оригинала»> <img src=«место размещения превью»> </a>
2.Ниже картинки с помощью тега «p» вставляют её описание.
<img src=«адрес изображения» alt=«альтернативная подпись изображения» />
<p> Подробное описание картинки </p>
Если сайт поддерживает html5 можно использовать теги «figure» и «figcaption».
<figure> <img src=«адрес изображения» alt=«альтернативная подпись изображения» />
<figcaption> Подробное описание картинки </figcaption> </figure>
В целях оптимизации используются атрибуты тега «img».
3. Атрибут «alt»
«alt» – отвечает за вывод описания изображения текстом на экран, когда браузер пользователя не может открыть картинку. Выглядит так:
<img src=«место расположения картинки» alt=«Описание картинки»>
Текст, являющийся описанием картинки, помещённый внутрь атрибута «alt» так же влияет на оптимизацию изображений, помещённых на страницы.
Нужно обходиться 50—60 символами, большие тексты плохо воспринимаются поисковыми роботами.
4.Атрибут «title»
Текст помещённый в title выводится как подсказка в момент наведения курсора мыши на картинку. Обычно в нем помещают дополнительные данные об изображении.
При установке изображения в её атрибутах обязательно надо прописать Titl – Заголовок и Alt – «альтернативный текст» или если картинка одна, то попросту ключевые фразы, соответствующие контенту страницы.
5.«url» фотографии
Здесь нужно проставить адрес страницы, на которой находится картинка.
Человеко- понятный «url» несёт в себе информацию для пользователей, а также поисковых систем
Если у вас несколько картинок, то прописывайте в данных атрибутах очень краткое описание того, что изображено на каждой картинке.
Внимание! Часто допускается атрибуты title и alt делать одинаковыми до 10 слов.
Название файла должно быть кратким и описывать содержимое картинки.
Эти параметры позволяют дать поисковым системам понять, о чём говорит то или иное изображение и попасть изображениям в поиск по картинкам по определённым запросам, которые мы и пропишем в данных атрибутах.
Объем текста для Alt должен составлять 3—10 слов, для Title допустимо более развёрнутое описание, но увлекаться здесь тоже не нужно – всплывающая подсказка из нескольких строк не всегда бывает уместна и может лишь испортить впечатление.
Для уже загруженных картинок редактирование атрибута Alt доступно по щелчку кнопки мыши по изображению (иконка «Изменить» с изображением карандаша). В этом же окне («Параметры изображения») можно обнаружить и доступную для изменения строку Title, для этого необходимо развернуть пункт меню «Дополнительные настройки».
Оптимизация размера и веса изображения
Внимание! Некоторые плагины, которые мы установили, имеют функцию оптимизации изображений.
Сжатие картинки в Paint.
Открываем изображение в Paint и на вкладке «Главная» имеется пункт «Изменить размер».
Нажав на него, мы можем изменить размер, не потеряв при этом качество (если уменьшаем) и не утеряв пропорции. Для этого обязательно активируем настройку для сохранения пропорций.
Изменяя параметры размеров по горизонтали и вертикали, вы регулируете ширину и высоту изображения соответственно. Выбрать необходимые параметры, жмете на кнопку «Ок», а затем сохраняете итоговый файл на компьютер.
Сжатие картинки в IrfanView
– Изображение/Изменить размер – выставить новый размер.
– Сохранить как – выставить параметры и качество.
Делайте оптимизацию картинок к каждой статье, и дополнительные посетители на Ваш сайт гарантированно придут с поиска по картинкам.
Это основные моменты SEO оптимизации статьи. Не ленитесь делать SEO оптимизацию сайта (статей, рубрик, записей и картинок) ведь от этого зависит продвижение Вашего сайта в поисковых системах, количество посетителей и соответственно доход от сайта.
Сжатие картинки
Заходим на сайт https://tinyjpg.com/ (https://tinyjpg.com/) вставляем нашу картинку и получаем сжатый примерно в два раза вариант.
Здесь же можно провести анализ сайта на возможность его оптимизации путём сжатия картинок. Открываем панель ANALYZER, вводим адрес сайта без http:// и получаем результат
Формат и вес изображения
В качестве изображений с богатой палитрой лучше всего использовать популярный формат JPG. Для растровых картинок и для инфографики лучше всего использовать формат PNG. Для анимаций можно использовать формат GIF. Размер картинки не должен превышать ширину рабочего поля, а её «вес» должен быть адекватным и не превышать 100—250 кб. В противном случае картинка будет заметно замедлять загрузку сайта.
Настройка фонового изображения
Помимо картинки-заголовка через панель управления WordPress можно также заменить фоновое изображение, используемое в текущей теме.
Фоновое изображение – это картинка-подложка, фон дополнительной области, отображаемой за границами основного каркаса сайта. Для некоторых тем используется фон белого цвета, вы можете поменять его, выбрав пункт панели управления Внешний вид/Фон. Во-первых, вы можете изменить цвет фона, для этого используйте поле Цвет в блоке Настройки отображения. Нажмите ссылку Выбрать цвет и в открывшейся палитре подберите подходящий оттенок. При этом в поле Просмотреть появится предварительный вид нового фонового изображения.
