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

Настройка фонового изображения

Помимо картинки-заголовка через панель управления WordPress можно также заменить фоновое изображение, используемое в текущей теме.

Фоновое изображение – это картинка-подложка, фон дополнительной области, отображаемой за границами основного каркаса сайта. Для некоторых тем используется фон белого цвета, вы можете поменять его, выбрав пункт панели управления Внешний вид/Фон. Во-первых, вы можете изменить цвет фона, для этого используйте поле Цвет в блоке Настройки отображения. Нажмите ссылку Выбрать цвет и в открывшейся палитре подберите подходящий оттенок. При этом в поле Просмотреть появится предварительный вид нового фонового изображения.

Полный перечень цветов, рекомендуемых к использованию в веб-графике, и кодов к ним можно посмотреть на сайте: http://www.artlebedev.ru/tools/colors

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

Приведём адреса сайтов с большой коллекцией качественных бесплатных фотоизображений, на которых можно совершенно свободно позаимствовать изображения для своего сайта:

http://www.flickr.com/creativecommons

http://www.sxc.hu

http://openphoto.net

http://www.freephotosbank.com

http://www.imageafter.com

http://www.unprofound.com

http://morguefile.com

http://freerangestock.com

https://www.dreamstime.com

https://pixabay.com

https://ru.freeimages.com

https://freerangestock.com/

https://www.freepik.com

Сайдбары

Сайдбар – это закреплённая боковая панель на сайте, графически отделённая от основной области контента для навигации по вспомогательной информации, например, по страницам, по рубрикам или по записям.

Как правило, количеством и расположением сайдбаров управляет выбранная вами тема оформления WordPress.

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

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

– навигационное меню;

– информационные блоки (напр., страницы, рубрики и записи);

– функциональные элементы (напр., поиск, корзина, календарь, новости, погода);

– объявления с рекламой;

– предложения товаров и услуг;

– дополнительные виджеты-разделы.

Чтобы внести изменения в сайдбар нужно зайти в «Консоль/Внешний вид/Виджеты.

Виджеты

Виджет – это настраиваемый блок для вывода определенного содержимого сайта в определённой области, предусмотренной текущей дизайн-темой. Виджеты располагаются в боковых колонках (сайдбаров).

Благодаря виджетам, структурный каркас сайта можно собирать и видоизменять наподобие конструктора: выводить и удалять блоки, менять их местами, корректировать способ вывода контента и т д.

В WordPress уже есть встроенные виджеты. Для управления виджетами выберите пункт панели Внешний вид/Виджеты. Левая колонка содержит виджеты, установленные в теме-шаблоне. Сюда можно добавлять виджеты из интернета.

Правая колонка содержит виджеты, установленные в сайдбаре.

Вкратце рассмотрим доступные виджеты, размещённые в левой части страницы.

RSS – трансляция обновлений любого сайта, имеющего RSS-поток; если у вас есть ещё один проект на похожую тему, можно таким образом рекламировать его на сайте;

• Календарь – архив записей сайта за текущий месяц, представленный в виде календаря, в котором отмечены дни, когда на сайте производилось обновление;

• Облако меток – ссылки на используемые на сайте метки, организованные таким образом, что наиболее популярные метки выделяются крупнее, чем менее популярные;

• Рубрики – перечень существующих на сайте рубрик, который можно организовать в виде обычного списка или раскрывающегося меню; Свежие комментарии – вывод текста последних комментариев, опубликованных на сайте, их количество и объем отображаемого текста можно настроить при активировании виджета;

• Страницы – ссылки на все созданные статичные страницы сайта;

• Архивы – ссылки на архивы записей сайта, сгруппированных по месяцам;

• Мета – служебные ссылки (быстрый вход в панель управления, ссылка на RSS-поток сайта, ссылка на сайты проекта WordPress и т д);

• Поиск – поисковая форма сайта;

• Произвольное меню – созданное вами меню (процесс создания мы рассматривали выше); произвольные меню можно отображать на сайте и с помощью виджетов;

• Свежие записи – заголовки последних публикаций сайта; количество заголовков можно настроить при активировании виджета;

• Ссылки – вывод внешних ссылок, которые были созданы в разделе. Ссылки панели управления; как вы помните, ссылки можно разбивать по рубрикам, и виджет поддерживает отображение определённой рубрики ссылок;

• Текст – самый ценный вид виджета, позволяющий выводить на сайте любой произвольный текст (что не так востребовано) либо произвольный HTML-код (что очень ценно); благодаря этому на сайт можно вставить практически любой элемент (например, рекламный блок) без вмешательства в исходный код служебных файлов WordPress

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

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

Перетаскивая виджет мышкой в правой колонке вверх-вниз, мы можем менять их местами. Давайте оставим только самые необходимые виджеты. Остальные уберём.

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

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

При клике по тому или иному разделу откроется соответствующая страница.

Глава 17. Создание страниц

http://WordPress1.ru/rabota-s-kontentom/obschaya-informatsiya/otlichie-zapisey-ot-stranits/

http://WordPress1.ru/rabota-s-kontentom/stranitsy/

http://WordPress1.ru/rabota-s-kontentom/obschaya-informatsiya/otlichie-zapisey-ot-stranits/#more-1248

http://WordPress1.ru/rabota-s-kontentom/zapisi/

https://youtu.be/zugw2vpkOBA

Основными структурными информационными единицами сайта являются «Страницы» и «Записи» В чём их сходство и различия?

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

Типичные примеры страниц на многих сайтах: «Главная», «Наши услуги», «О нас», «Контакты», «Отзывы». Страницы можно сформировать в иерархическую структуру, тем самым показав зависимость одной от другой. Например, у вас есть страница

«Строительство домов», в которую входят подстраницы:

– «Заливка фундамента»,

– «Воздвижение стен».

– «Межэтажное перекрытие»,

– «Кровля».

Каждая подстраница включается в Меню и оформляется в виде выпадающего подменю под её родительской страницей.

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

Для каждой страницы можно задать своё уникальное оформление вне зависимости от контента, который на ней представлен. Например, страница контактов может быть у вас по всей ширине сайта без боковой колонки, а главная страница будет немного уже. Она может иметь боковую колонку (сайдбар) для размещения виджетов в виде новостей, записей, рубрик. Всё зависит от возможностей вашей темы.

Добавление страниц

Страницы – это основные информационные блоки нашего сайта.

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

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

Страниц может быть много. Все они создаются по одному принципу и отличаются друг от друга, во-первых, информационным контентом (заголовки, текст, мультимедиа) и во-вторых дополнительными функциями, такими как: «Наличие меню», «Обратная связь», «Заказ товара», «Местоположение на карте» и др.,

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

Главная

Наши услуги

– Пеногенератор

– Пеноблоки

– Строительство домов

– Видео

О нас

– Сертификаты

– Контакты

– Задать вопрос

Начнём с «Главной страницы».

Создание статичной «Главной страницы»

Статичная страница отличается от записей в блоге тем, что она остаётся на одном месте и отображается в меню сайта (в большинстве тем).

Заходим в Консоль/Страницы/Добавить новую. Откроется окно.

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

Внимание! Многие формы позволяют оформлять заголовок вместе с картинкой (см. выше)

Вводим основной текст.

Для ввода основного текста существует два метода:

– Визуальный – редакция текста как в Word-е

– Текстовой – ввод и редакция текста с помощью html кода. Он служит в основном для ввода внешних и внутренних ссылок, и небольших фрагментов различного рода html

Основные требования к страницам

– Указание фокусного ключевого слова. Наличие фокусного ключевого слова в заголовке и в тексте, особенно в первом параграфе. Ключевое слово в тексте должно встречаться несколько раз.

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

– Объём статьи на странице должен быть около 900 слов

– В тексте не реже чем через 200 слов должны быть подзаголовки

– Предложения не должны быть длинными: 10—15 слов максимум.

– В тексте должны быть внутренние ссылки на другие статьи или записи (рубрики).

– У рисунков должны быть указаны alt– альтернативный заголовок, описание, ссылка на сайт

– Предложений в страдательном залоге должно быть не более 10%. обозначающее признак того, кто испытывает на себе чужое действие, так сказать «страдает» от чужого действия: «замороженный», «отогретый», «прослушиваемый», «испитый», строящийся – выражают категорию страдательного залога.

– В тексте должно быть около 30% предложений с переходными словами между предложениями (таким образом, потому что, самое главное, откуда следует, что…, например.

– Я сильно устал. Поэтому я собираюсь лечь спать.

– Мы вынуждены с вами расстаться. Другими словами, вы уволены.

– Я не очень люблю фрукты. Тем не менее, я люблю бананы.

– Вечером мне нравится отдыхать. Например, я люблю смотреть телевизор.

– Нужно регулярно заниматься спортом. Прежде всего, он поддерживает здоровье.

– Я люблю слушать музыку. Кроме того я люблю танцевать

– Я немного отдохну. После этого пойду гулять.

– Мать пыталась успокоить ребёнка. Точно также отец пытался развлечь его.

– В заключение, переходные слова являются важным аспектом SEO копирайтинга.

Редакция текста как в Word-е.

Нажав на значок страницы (1), можно раскрыть вторую строчку панели управления форматом. Нажав на значок (?), можно раскрыть справку по горячим клавишам. Например,

– Shift+Alt+Z раскрыть панель форматирования

– Shift+Alt+J выравнивание по ширине

– Shift+Alt+T вставить разрыв текста «More» (читать далее) там, где находится курсор (только для Записей).

Если вы ещё не установили плагин cyr-to-lat, то поменяйте вручную конечную русскоязычную ссылку на английскую, например, для Главной на home.

Иногда необходимо ввести какие-то внешние ссылки, например, на видео, или что-то изменить в настройках с помощью изменения или добавления html кода. Для этого существует возможность перейти с визуального редактора в Текстовой редактор – ввод и редакция текста с помощью html кода.

Панель инструментов в HTML-редакторе

Рассмотрим панель инструментов, присутствующую в HTML-редакторе.

Описание кнопок слева направо:

• Кнопка добавляет тег <strong> (альтернативное написание – <b>), выделяющий текст полужирным начертанием.

• Кнопка добавляет тег <em> (альтернативное написание – <i>), применяющий курсив.

• Кнопка вставляет тег <a href>, который преобразует выделенный текст в гиперссылку После нажатия этой кнопки появится диалоговое окно, в котором нужно ввести URL-адрес для ссылки.

• Кнопка добавляет тег <blockquote>, применяющий к выделенному тексту стиль «цитата».

• Кнопка добавляет тег <del>, перечёркивающий выделенный текст.

• Кнопка добавляет тег <ins>, предназначенный для выделения текста, который был добавлен в новую версию документа Теги <del> и <ins> обычно используются в связке, впрочем, как правило, они применяются в технической документации, а для обычных публикаций (новости и статьи) они не совсем подходят.

• Кнопка вставляет в запись тег <img src> для отображения графического файла После нажатия кнопки в открывшемся диалоговом окне нужно ввести URL-путь к картинке При этом не имеет значения, расположен графический файл на вашем сервере или вы вставляете ссылку на картинку, размещённую на другом сайте. Группа из трёх следующих кнопок отвечает за добавление тегов для отображения списков вводит нумерованный список.

• Маркированный список, а формирует отступ, которым обычно оформляются списки Тегами <ol> и <li> необходимо размечать каждую строчку списка, а <ul> оформляет весь список целиком.

• Кнопка вставляет тег для отображения фрагмента программного кода, который бывает необходимо разместить в материале «как есть», без преобразования Например, если вы разместите в материале код <em> WordPress </em>, то он будет преобразован в слово, написанное курсивом: WordPress А если этот код заключить в тег:

– <code> <em> WordPress </em> </code>, то код будет выведен без преобразования в курсив.

• Кнопка вставляет тег <! – more – > («Далее»), разделяющий материал на вступительную и основную часть Особенностью этого тега является то, что его не нужно закрывать.

• Кнопка не добавляет никаких тегов, а вызывает справочную функцию, осуществляющую поиск заданного термина на сайте http://www.answers.com В общем-то, это довольно бесполезная функция, не совсем понятно, для каких целей внедрённая в интерфейс HTML-редактора.

• Кнопка добавляет закрывающую часть для тегов, которые вы забыли закрыть при их вводе вручную.

• И последняя кнопка переключает редактор в полноэкранный режим, в котором удобно работать с объёмными текстами.

Правильное оформление заголовков

Тег Title (Заголовок) – один за самых важных тегов для внутренней оптимизации сайта. Во-первых, поисковые системы придают ему большое значение при ранжировании страниц, во-вторых, от его привлекательности зависит CTR (доля кликов) по сайту в поисковой выдаче. Убедитесь, что в нём присутствуют самые важные ключевые слова для страницы. Подробное описание вы можете прочитать в справке Яндекса и Google.

Заголовки – первое, что видит в поисковой выдаче посетитель в ответ на свой запрос. Длина тега Title может составлять 60—70 символов для Яндекса и Google. Заголовок страницы (SEO-заголовок) в редакторе WordPress виден в самом верху (не путайте с заголовком страницы в Меню). Ниже идёт подзаголовок. Ещё ниже – 1-й абзац текста.

Текст должен быть разбит на части со своими подзаголовками и содержать ключевые фразы

Как всё это организовать? Для этого достаточно установить такой плагин, как WordPress SEO by Yoast. Этот плагин проанализирует заголовки и текст на ваших страницах и записях и выявит их слабые места.

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

Именно в таком порядке их и различает Google. Это следует учитывать при SEO настройках страниц в Joast SEO.

С точки зрения SEO-оптимизации к заголовкам и расположением в них «Фокусного ключевого слова» (в данном примере – Сайтостроение и интернет-маркетинг) предъявляются особые требования:

– основное фокусное ключевое слово или фраза должны быть в самом начале SEO-заголовка.

– место в рекламе для заголовка фиксирована (600 пкс) – это примерно 55 букв

– желательно, чтобы заголовок максимально заполнил это место.

– Фокусное ключевое слово должно содержаться и в Подзаголовке, и в 1-ом абзаце.

Если у вас установлен плагин Joast SEO, то в редакторе страницы внизу, под основным текстом, расположены замечания по SEO-оптимизации и как будет выглядеть в поисковике сниппет вашей рекламы (1– ваша реклама (выделено рамкой), 2– SEO заголовок, 3-ссылка, 4-пояснение)

Вот так будет выглядеть в поисковике сниппет вашей рекламы (1– ваша реклама (выделено рамкой), 2– SEO заголовок, 3-ссылка, 4-пояснение)

Заголовок и пояснение под ним (сниппет) должны отражать основную суть сайта (рекламируемой страницы)

При правильных настройках, ещё ниже, раскрыв вкладку «Фокусное ключевое слово», вы увидите сообщение:

Отличный результат!

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

Как правильно использовать уровни заголовков

https://WordPress-book.ru/kontent/zagolovki-h1-h6/

Апрель 29, 2017 автор: Роман Ваховский

В нынешних условиях главное требование к сайту – его комплексная всесторонняя оптимизация. Мало кто грамотно расставляет заголовки h1 – h6, тем самым недополучая эффекта от оптимизации.

Заголовки имеют уровни от первого h1 до шестого h6, чем ниже уровень – тем меньше значимость выделенного объекта. Но даже тег h самого низкого уровня уже говорит поисковой системе о том, что выделенное им слово или фраза имеют значение для определения темы контента.

В совокупности же содержание всех тегов h на одной странице, при их грамотной расстановке, даст поисковой системе полное представление о том, как вы позиционируете её содержание.

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

– – главным и самым значимым тегом h1 выделяется название сайта;

– – тегом h2 название страницы (заголовок статьи);

– – тегами h3 подзаголовки статьи;

– – тегами h4 значимые ключевые слова текста или же рубрики материалов;

– – теги h5-h6 распределяются в разных случаях по-разному.

Иногда для грамотной оценки тематики и темы страницы бывает намного целесообразнее заключить в тег h1 именно название статьи.

Существуют определённые технические правила, которые необходимо соблюдать.

– Каждая страница сайта должна содержать лишь один заголовок h1. Если заголовки всех остальных уровней могут повторяться, в зависимости от ситуации и необходимости, то заголовок первого уровня всегда один!

– Важно соблюдать иерархию заголовков на странице. Чем выше уровень заголовка – тем выше он должен находиться на странице. Это требование скорее актуально для заголовков первых двух уровней, так как они чаще всего не повторяются. К остальным же заголовкам данное требование нужно применять по возможности. Самое главное здесь, чтобы выше других располагался заголовок h1.

– В заголовках h1 – h6 не допускается никаких посторонних элементов кроме текста. Нельзя в них заключать ссылки, картинки, другие теги и т. п.

– Все теги h1 – h6 должны содержать в себе ключевые слова или фразы. Не допускается заключение в них бессмысленных слов, так как это может ввести в заблуждение поисковую систему и негативно сказаться на оценке содержимого страницы.

– Не допускается использование любого из шести тегов h совместно с другими тегами, предназначенными для выделения элементов текста!