Рубрики
продвижение

Блочные сайты создать в Word Press

Блочные сайты в Word Press появились впервые в версии 5,9. Тогда разработчики предлагали заменить привычный классический редактор. Для замены был предложен редактор Gutenberg. Но блогерам такая замена не понравилась, и они массово скачали опять редактор классический.

блочные сайты

Блочные сайты – перестраиваю свой блог

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

В версии Word Press 6.1 построить сайт с блоками, можно находя готовую блочную тему. Их уже довольно много в Word Press org, оттуда и скачивала бесплатно. Принцип установки блоков стандартный, однако, способы их установки разные. В Ядро темы уже входит плагин Gutenberg и на его основе авторы  располагают блоки.

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

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

Блочные сайты – шаблон GeneratePress

Тема хороша, в ней много блочных настроек. Например, макет сайта можно построить в 1, 2,3 колонки. Далее настраиваем в настройщике шапку сайта и можем добавить блок, какой нам будет нужен. Шапка сайта у меня получилась красивой, в этой теме. Хорошо вставились все блочные виджеты.

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

Блочные сайты – в теме Twenty Twenty

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

Акцент построения с блоками делается для статей, когда мы их редактируем.  Когда заходим в редактор, чтобы вставить новую статью. Вверху нас встречает надпись крупным шрифтом «Добавить заголовок». Устанавливаем курсор в начало этой записи и получаем заголовок статьи, таким же крупным шрифтом — H1.

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

панель для редактирования блоков

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

значки в виде списка

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

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

Или текст распределился за пределы листа, сразу после фрейма. Здесь просто отступила ниже от видео, в результате текст расположился правильно.  Но только нужно просмотреть все статьи сайта.

Когда текст отредактируем, на верхней панели справа  увидим кнопку «сохранить», сразу внизу листа перейдем к кнопке  «посмотреть».

Блочные сайты- работа с текстом html

Иногда нам нужно поработать не в визуальном редакторе, а в текстовом. Как быть в этом случае, если у нас для работы стоит панель классического редактора. Например, у меня были случаи, когда в старых текстах исчезли ссылки. Тогда при просмотре увидим зачеркнутый текст.

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

редактировать как html

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

Битую ссылку в тексте html сразу увидим и удалим.  Перейдем опять в визуальный редактор, по кнопке с этой же панельки.

Настройка виджетов рекламы

добавить блок виджетов

Хотя в теме  Twenty Twenty виджеты находятся только в подвале, но настройки делаются в настройщике. Перехожу к опции виджеты. В теме есть подвал №1 и №2, оказалось, что они расположены рядом. Открывая подвалы, увидим в нем пустые, прозрачные блоки с плюсом в центре. Нажмем этот +, это означает добавить блок. Появляется меню со значками.

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

Например, в виджет №1 устанавливаю рекламу Яндекса. Для этого нужен html  код. Нажимаю панель «посмотреть все» и нахожу значок html. Вверху блока возникает маленькая панелька со значками «пишите код». Код копирую в партнерской программе Яндекса, где у меня блоки рекламы уже настроены, года 2 назад.

Там копирую код и вставляю в настройщике. Появляется опция посмотреть. Увидим код рекламы, или сами картинки рекламы Тогда сможем нажать кнопку «опубликовать», расположенную вверху настройщика. Реклама сразу пойдет в подвале сайта. 

Установка других виджетов

На панельке еще есть кнопки расположения, для кода. Можно переместить код вверх или вниз. Но если что-то пошло не так, нажмем 3 точки настроек. Появится небольшая страничка настроек, внизу которой есть кнопка «удалить».

В точности также установила Яндекс поиск, потому что он очень хорошо ищет. В подвале рядом №2 устанавливаю виджет «Cамые популярные записи». Такой значок тоже присутствует в меню. Ссылки на статьи устанавливаются автоматически из Гугла, если наши сайты зарегистрированы в Searsh Console Google. Там следят за посещаемостью страниц. Потому отмечено цифрами, сколько человек их прочитали. Можно найти и другие готовые кнопки, например, «Списки рубрик», «Последние комментарии».

Преимущество блочных тем

Как только переустановила блочную тему, сразу же проверила скорость загрузки. Перехожу в Google Searsh Console, далее в пункт «Основные интернет показатели». Отсюда можно перейти на страницу «Page Sped insights».

скорость загрузки на компьютере

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

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

Но хуже показатели на мобильных устройствах, так как удалила плагин AMP. С ним скорость на мобильных устройствах была очень хорошей. Однако AMP не приемлет Яндекс.

блочные сайты скорость дача

Если сравнить скорость загрузки с другим моим сайтом. Находится он в красивой, но не блочной теме. Его скорость загрузки значительно ниже.

Есть недостатки и достоинства

Поработав некоторое время с блочными сайтами, могу сказать, что редактировать статьи в редакторе Гутенберг неудобно. Блоки довольно неустойчивы. Куда то уплывают из-под рук. Легко текст сломать, особенно в начале статьи.

Но виджеты устанавливаются  хорошо. Например, вставка рекламы, кнопок, поиска и готовых виджетов. Здесь их называют устаревшими. Но по моему они традиционные долгожители. Например, » список рубрик» или «Самые популярные записи» и др.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Яндекс.Метрика