G|Translate: English EN Deutsch DE Italiano IT Русский RU Español ES Українська UK

Адаптивные таблицы для WordPress

5/5 - (1 голос)

Зачем это вообще нужно?

Адаптивные таблицы для WordPress

Вроде и так все хорошо выглядит. А Вы помните про “width:100%:” в свойствах таблицы ?

Гугль в вебмастере пишет так:

На Вашем сайте обнаружены проблемы категории “Удобство для мобильных”. 

На Вашем сайте обнаружены следующие проблемы:

И что это значит? Вроде и шрифт нормальный.

А это именно таблицы не нравятся работу. 

Для показа на мобильных устройствах браузер слушается и выводит (вписывает на 100%) широкую таблицу на узкую ширину экрана мобильного устройства = текст внутри таблиц становится не читаемым…

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

Вот это же в виде таблицы

Колонка 1Колонка 2Колонка 3Колонка 4Колонка 5
одиндватричетырепять
12345

На большом экране это выглядит нормально. Вот, например, ASUS Zenfone 1280×720 (5″ экран).

А вот на мобильном экране 5-я колонка оказалась за пределами экрана

 Адаптивные таблицы для WordPress

Вот это в HTML = логично, 800 больше, чем ширина  экрана 720.

<table style="width: 800px;" border="1">
<tr>
<td>Колонка 1</td>
<td>Колонка 2</td>
<td>Колонка 3</td>
<td>Колонка 4</td>
<td>Колонка 5</td>
</tr>
<tr>
<td>один</td>
<td>два</td>
<td>три</td>
<td>четыре</td>
<td>пять</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>

 

Вот тут и Яндекс.Вебмастер подсказывает. Да, в основном – это именно оно. 

Адаптивные таблицы для WordPress

Но выход есть – надо таблицы сделать адаптивными. А как?

Обзор плагинов WordPress для создания адаптивных таблиц на сайте.

Плагин WP Responsive Table

Смотрим на сайте WordPress “Адаптивные таблицы WordPress”

Плагин создает горизонтальную полосу прокрутки

Адаптивные таблицы для WordPress

После установки настройки доступных из свойств темы

Адаптивные таблицы для WordPress

Всё работает из коробки (т.е. у широких таблиц на узких экранах появляется горизонтальный бар прокрутки). Возможно использовать как стили основной темы, так и стили плагина.

У нашей таблицы появилась полоса прокрутки – и саму таблицу можно двигать пальцем на экране.

Адаптивные таблицы для WordPress

Единственный минус – плагин  добавляет свои варианты цветового оформления таблицы (и не учитывает Ваши)

Плагин Magic Liquidizer Responsive Table

Адаптивные таблицы для WordPress

Плагин превращает отдельные строки в блоки.

Настроек нет. Работает сразу после установки.

В мобильном варианте получается вот такой вариант.

Адаптивные таблицы для WordPress

Читабельность, конечно хорошая. Но догадаться, что это была таблица – сложно.

Подпишитесь в VKontakte - нажмите кнопку
Подпишитесь в Telegram - нажмите кнопку
Наша группа ODNOKLASSNIKI

Вы можете сохранить ссылку на эту страницу себе на компьютер в виде htm файла




Пишите на электронную почту (тема и email будут добавлены автоматически в письмо)

В Вашем браузере должна быть настроена обработка ссылок mailto

site_post@bk.ru

или просто скопируйте адрес e-mail



Почитать в разделе

WP плагины

Что такое WordPress плагины? Очень полезная вещь. Влияние плагинов WordPress на скорость загрузки страниц Это дополнительные модули к движку WordPress, которые расширяют (или снижают) его функциональность. Снижают ли плагины скорость загрузки сайта WordPress? И да и нет. Мы помним, что весь код PHP обрабатывается только на сервере (да, плагины добавляют свой код PHP, который надо обработать) и браузер получает уже готовую страницу в HTML. Так что если сервер медленный (самые дешёвый тариф на хостинге) - то да, сайт будет грузиться медленно. Но зато плагины резко расширяют функциональность сайта, удобство для посетителей и в конечном счете дают увеличение трафика на сайт. Так что...
(Читать полностью...)

  • Всего статей в разделе: 9
  • Показано статей в списке: 8
  • Сортировка: название по алфавиту

HTML в URL адресе поста или страницы

По умолчанию WordPress формирует адреса следующего вида  mydomen.ru/mypage/ Имеет ли смысл сделать вариант mydomen.ru/mypage.html Про слеш на конце URL-адреса читаем статью Нужен ли слэш в URL? В чем разница URL с .html на конце С точки зрения SEO - особой разницы нет. Это раньше были файлы на сервере и сервер их отдавал браузеру. Сейчас URL адрес может быть любой и он не привязан к названиям файлов на сервере. Более того - и самих файлов .html на сервере уже нет.  Движок CMS формирует адреса по своим алгоритмам. Тем не менее - важные плюсы есть: поисковый робот сразу понимает, что это конечная страница, а не очередной уровень каталога можно из сайта на WP сделать ...
(Читать полностью...)

WordPress & FaceBook

Интеграция с facebook - зачем это нужно? Это еще один канал продвижения Вашего сайта. Суть - Вы делаете в facebook страницу, ей посетители ставят"лайк", Вы выкладываете в ленту свои события, посетители их видят в своей ленте. Точнее, Вы события выкладываете на сайте, они с помощью плагина выкладываются в ленту Вашей группы. В Facebook могут быть: личный аккаунт официальная страница (могут создавать только официальные организации, бренды и публичные фигуры) группа (группа поклонников Вашего бренда, можно поставить лайк или подписаться)   Надо решить несколько задач.. 1. Показ на своем сайте списка тех, кто поставил "лайк" (и предложение поставить...
(Читать полностью...)

Звёздный рейтинг сайта

Что бы в выдаче Google увидеть снипет с рейтингом (тот самый, со звездочками) - нам нужно несколько компонентов. Конечно, это чистый маркетинг. Посетители видят много положительных оценок и считают это за истину. Плагины для рейтинга Что мы хотим: звездочки рейтинга на страницах сайта (страницы и записи) поддержка Google Rich Snippets (достаточно условная вещь - Google периодически меняет правила показа рейтинга в снипете - для определенных тематик показывается, но не всегда...) Google Rich Snippets - это вот так в выдаче Google количество голосов всего (согласитесь - оценка 4,5 при 10 и при 1000 голосовавших - это разная вещь) В админпанеле сайта: управление...
(Читать полностью...)

Переадресация на внешний ресурс

Сложный вопрос. У Вас есть сайт, Вы написали много полезных статей. И решили под эту тематику сделать отдельный домен. Как не потерять трафик? Переадресация с плагином Redirection https://ru.wordpress.org/plugins/redirection/ Настройки: редиректы группы (да, можно объединять в группы) журнал (кто откуда куда перешел) 404 ошибки Плагин работает через WP REST API. Если его отключить  - перенаправления работать перестанут. ВАЖНО: Всё работает. Но можно попасть под бан со стороны роботов. Они очень не любят, когда при заходе на сайт получают 301 код с автоматической переадресаций на другой домен. А если таких статей у Вас 20-30 штук? С точки зрения логики...
(Читать полностью...)

Плагин “Калькулятор” для сайта на WP

Добавляем на сайт калькулятор Будем создавать вот такой симпатичный калькулятор: посетителям удобнее поисковые роботы "любят" сервис на сайте Калькулятор будет переводить российские школьные отметки в немецкую шкалу успеваемости. С использованием баварской формулы. Подробнее читаем статью Система оценок в учебных заведениях Германии Исходные данные: минимальная возможная оценка максимальная возможная оценка средний балл Итого три переменных. Из них по формуле необходимо получить результат. Плагин Calculator Builder https://wordpress.org/plugins/calculator-builder/ Плагин ранее назывался "WPcalc", разработчик тот же :) Плагин "WPcalc"...
(Читать полностью...)

Плагины для “хлебных крошек”

Навигация на сайте с помощью "хлебных крошек". Навигационная цепочка (дублирующее меню, «хлебные крошки», англ. breadcrumbs). Название «хлебные крошки» является отсылкой к немецкой сказке «Гензель и Гретель», в которой дети, когда их завели в лес во второй раз, не смогли найти обратную дорогу, так как на этот раз вместо маленьких камешков они оставляли за собой хлебныекрошки, впоследствии склёванные лесными птицами. Это позволяет пользователям, которые зашли на страницу сайта с поиска сразу понять, в каком разделе они находятся. И например, перейти на уровень выше. Самый популярный плагин BreadcrumbNavXT Устанавливается и активируется стандартно, вот его основная панель...
(Читать полностью...)

Плагины для SEO WordPress

Что бы заниматься продвижением сайта (SEO), нужно как минимум получать информацию по посетителям и отслеживать сайт в Вебмастере поисковых систем. Собственно плагины SEO никаким продвижением Вашего сайта не занимаются. По умолчанию в WordPress нет служебных полей для тэга Description  - а поисковым роботам он нужен. Поэтому две базовые функции плагинов для SEO: создание полей для Description (плюс сервис автозаполнения и пр.) формирования XML карты сайта для роботов Второй пункт не очевиден. Существует много отдельных плагинов для создания файла sitemap.xml. Но лучше использовать комплексные SEO плагины. Причина на картинке ниже. При создании страницы Вы указываете, нужно...
(Читать полностью...)

Плагины для дополнительной навигации на сайте

Как организовать дополнительную навигацию на сайте "Хлебные крошки" - это хорошо, но хочется большего. Что можем показать пользователю в боковой панели через виджеты? ВАЖНО.  Часть плагинов позволяет показывать или миниатюру или первую картинку поста в качестве превью. Необходимо позаботиться о том, что бы у всех страниц/постов была своя миниатюра. Вывод первой картинки в качестве превью - это просто и красиво - но резко возрастает объем страницы (мы же выводим полную картинку) и для мобильных устройств страница оказывается неоптимизированной.  Со всеми последствиями от поисковых систем. Читаем статью о важности миниатюр Миниатюры (thumbnails) записей и страниц...
(Читать полностью...)