Как встроить Google Календарь в WordPress (бесплатные способы + плагины)
Быстрый ответ: Чтобы встроить календарь Google в WordPress , откройте календарь Google на компьютере, выберите календарь в разделе «Настройки» , найдите пункт «Интеграция календаря» и скопируйте код iframe.
В WordPress добавьте Пользовательские HTML Вставьте блок, вставьте код и опубликуйте страницу. Если вам нужны фирменные страницы мероприятий, фильтры, бронирование или продажа билетов, импортируйте мероприятия с помощью Modern Events Calendar вместо того, чтобы показывать iframe от Google.
Календарь должен быть общедоступным или предоставлен в общий доступ тем, кому необходимо его просматривать. Для общедоступного расписания достаточно бесплатного метода. Предварительно просмотрите опубликованную страницу на телефоне, поскольку сетка месяцев может оставаться тесной даже после того, как iframe впишется в ширину страницы.
Большинство людей, ищущих информацию о том, как встроить Google Календарь в WordPress, хотят, чтобы календарь был виден уже сегодня, а не просматривать длинное сравнение плагинов.
Использование iframe занимает всего несколько минут и не требует плагина. Его ограничения становятся важными только в том случае, если календарь предназначен для взаимодействия с клиентами или требует функций, выходящих за рамки простого расписания.
Какой метод следует использовать?
Используйте бесплатный iframe для простого публичного расписания. Если для мероприятий необходимы отдельные страницы WordPress, расширенные возможности дизайна, бронирование, продажа билетов или импорт расписания, используйте специализированный плагин календаря событий, например MEC.
| Способ доставки | Лучше всего | Стоимость | Главный компромисс |
|---|---|---|---|
| Календарь Google (iframe) | Часы работы, расписание занятий, встречи с представителями сообщества, внутренние календари. | Бесплатно | Ограниченные возможности оформления и отсутствие стандартных страниц мероприятий WordPress. |
| Блок Google Календарь на WordPress.com | На сайтах WordPress.com, где уже установлен этот блок. | Есть | В результате по-прежнему отображается встроенный контент, размещенный на сервере Google. |
| Импорт и отображение MEC | Публичные мероприятия, справочники, бронирование, билеты и фирменные страницы мероприятий. | Бесплатная или платная версия, в зависимости от используемых функций и дополнений. | Настройка проще, чем простое копирование iframe. |
Если вам нужно больше, чем просто календарь, воспользуйтесь нашим руководством по созданию полноценного веб-сайта для мероприятий на WordPress , включая страницы мероприятий, регистрацию, тестирование и запуск.
Как бесплатно встроить Google Календарь в WordPress?
Скопируйте iframe из настроек интеграции календаря Google Calendar и вставьте его в блок «Пользовательский HTML» в WordPress. Google утверждает, что код встраивания доступен с компьютера, а не из мобильного приложения «Календарь».
Шаг 1: Выберите, что посетителям разрешено видеть.
- На компьютере войдите в систему по адресу: calendar.google.com.
- Под Мои календариЩелкните по календарю, который хотите опубликовать.
- Нажмите на меню с тремя точками, затем Настройки и обмен.
- Проверьте права доступа к календарю.
На общедоступном веб-сайте нельзя отображать личный календарь каждому посетителю. Если расписание предназначено для просмотра всем желающим, включите параметр « Сделать доступным для всех».
Google предупреждает, что общедоступные календари могут раскрывать подробности событий, поэтому более безопасным вариантом будет отдельный календарь для событий на веб-сайте. Никогда не вставляйте секретный iCal-адрес календаря на общедоступную страницу.
Шаг 2: Скопируйте код встраивания Google Календаря
- Оставайтесь на странице настроек календаря и прокрутите вниз до Интегрировать календарь.
- Под Код для вставки, нажмите Настроить Если вы хотите изменить вид по умолчанию, отображаемые элементы, цвет, язык, часовой пояс, ширину или высоту.
- Скопируйте весь код iframe.
В текущих инструкциях Google рекомендуется устанавливать оба параметра не менее чем на 500 пикселей в настройках темы. Вы по-прежнему можете заставить iframe заполнять более узкую колонку контента с помощью CSS, как показано ниже.
Шаг 3: Вставьте iframe в WordPress
- Откройте страницу или запись WordPress, где должен отображаться календарь.
- Щелкните по инструменту вставки блоков и добавьте Пользовательские HTML блок.
- Вставьте код iframe в этот блок.
- Используйте Предпросмотр Чтобы проверить страницу в режиме реального времени, а затем опубликовать или обновить её.
Если посетители видят код iframe как текст, значит, он был вставлен в блок «Абзац» или «Код». Переместите его в блок «Пользовательский HTML».
Шаг 4: Отрегулируйте календарь так, чтобы он соответствовал ширине страницы.
Простейший способ настройки — изменить iframe. width значение для 100%. Сохраняйте фиксированную высоту, соответствующую выбранному виду. Базовая адаптивная версия выглядит так:
<div style="width:100%; overflow:hidden;">
<iframe
src="YOUR-GOOGLE-CALENDAR-EMBED-URL"
style="border:0;"
width="100%"
height="600"
frameborder="0"
scrolling="no">
</iframe>
</div>Сохраните URL-адрес встраивания из кода, сгенерированного Google для вашего календаря. Замените только ширину, высоту или окружающий контейнер. Даже если iframe полностью помещается в контейнер, сетка на весь месяц может выглядеть тесной на телефоне.
Для аудитории, активно использующей мобильные устройства, протестируйте как режим просмотра расписания или повестки дня, так и режим просмотра по месяцам.
Стандартный iframe быстро публикуется, но его макет и интерактивные функции по-прежнему контролируются Google Календарем.
Как добавить Google Календарь на WordPress.com?
На сайтах, поддерживаемых WordPress.com, есть блок Google Календарь. Добавьте этот блок, вставьте тот же код iframe из Google Календаря, нажмите «Встроить» и просмотрите страницу в новой вкладке.
На сайте WordPress.org, размещенном на собственном сервере, этот блок может не отображаться, если его не предоставляет Jetpack. Метод с использованием пользовательского HTML работает и без этого блока и обычно является кратчайшим путем.
В текущем руководстве по поддержке WordPress.com также отмечается, что темы могут предлагать элементы управления выравниванием по ширине и на всю ширину для блока календаря.
В каких случаях следует импортировать события из Google Календаря?
Импортируйте события, когда веб-сайту необходимо контролировать презентацию и взаимодействие с участниками мероприятия.
В iframe отображается календарь, размещенный в Google. Импортированное событие может стать контентом WordPress со своим собственным URL-адресом, изображением, организатором, местоположением, макетом и, если поддерживается, вариантами бронирования или покупки билетов.
Для компаний, занимающихся организацией мероприятий, это различие имеет значение. Расписание занятий в школе или календарь доступности офиса могут быть вполне уместны в виде iframe. Однако компаниям, организующим конференции, фитнес-студии, площадки для проведения мероприятий или тренинги, часто требуются страницы с подробной информацией о мероприятиях, которые соответствуют остальному дизайну сайта.
Если вы все еще выбираете оптимальный уровень контроля, ознакомьтесь со статьей «Создатель пользовательских календарей WordPress: 4 способа создать свой собственный» . В ней сравнивается встроенный календарь с нативными таблицами, размещенными инструментами планирования и плагинами событий WordPress.
Импорт преобразует запись календаря в контент, который WordPress может отображать и управлять им как событием.
Как импортировать события из Google Календаря в MEC?
MEC импортирует события через экран импорта Google Календаря, используя ключ API Google и идентификатор календаря. Точные доступные параметры могут различаться в зависимости от версии MEC и дополнений, поэтому проверьте установленную версию, прежде чем планировать повторяющийся рабочий процесс.
- Установите и активируйте MEC Lite или MEC Pro.
- В Google Cloud включите API Google Calendar и создайте ключ API для сайта.
- В Google Календаре скопируйте идентификатор календаря из... Настройки и общий доступ > Интеграция календаря.
- В WordPress откройте Календарь ME > Импорт/Экспорт > Импорт календаря Google.
- Введите ключ API и идентификатор календаря, затем выберите диапазон дат для получения данных.
- Нажмите НачатьВыберите необходимые события и импортируйте их в список событий MEC.
- Создайте или выберите короткий код MEC и разместите его на странице, где должен отображаться календарь.
В документации MEC указано, что для этого способа импорта календарь Google должен быть общедоступным. Также рекомендуется согласовывать часовые пояса в WordPress и Google Calendar, особенно в случаях, когда появляется ошибка 403, 404 или неверное время события.
Также необходимо убедиться, что календарь, из которого вы импортируете данные, является общедоступным.
После импорта выберите макет календаря, подходящий для контента, вместо того, чтобы пытаться разместить все события в сетке месяца. MEC поддерживает конструкторы страниц, включая Gutenberg, Elementor и Divi.
Если ваш календарь является частью разработанной целевой страницы, перед выбором дополнения ознакомьтесь с доступными способами использования Elementor с MEC и другими поддерживаемыми конструкторами.
Могут ли Google Календарь и WordPress оставаться синхронизированными?
Да, но "синхронизация" может означать разные вещи.
В iframe всегда отображается представление, размещенное на сервере Google, поэтому повторный импорт не требуется. Импортированное событие WordPress представляет собой отдельную запись и требует запланированного процесса импорта или синхронизации для получения последующих изменений.
В документации MEC по импорту и экспорту данных описаны запланированные задачи Google Календаря с использованием заданий cron. Хост должен поддерживать cron, а соответствующий импорт или экспорт Google Календаря должен быть уже настроен.
МЕК Advanced Importer Дополнение также может подключаться к таким сервисам, как Google, Facebook, Meetup и Eventbrite, и позволяет администраторам планировать импорт. Перед внесением изменений в последнюю минуту подтвердите направление и интервал, необходимые для вашей настройки.
Импорт по расписанию позволяет уменьшить количество дублирующихся записей, но время его выполнения зависит от настроенной задачи и поддержки cron на сайте.
Встраивание Google Календаря или MEC: в чем практическая разница?
| Возможности | Google iframe | импорт событий MEC |
|---|---|---|
| Время установки | Несколько минут | Дольше времени, потому что API и отображение требуют настройки. |
| Обновления | Отображено из календаря, размещенного на Google. | Вручную или по расписанию, в зависимости от конфигурации. |
| Дизайн-контроль | Параметры встраивания Google | Макеты WordPress, шорткоды и поддерживаемые конструкторы сайтов |
| URL-адреса событий в вашем домене | Нет | Да |
| Изображения, организаторы и места проведения. | Ограничено тем, что отображает встроенный контент. | Управляется как контент мероприятия |
| Бронирование и продажа билетов | Не встроено в календарь | Доступно с соответствующими функциями или дополнениями MEC. |
| Наиболее подходящий | Расписание, которое необходимо просмотреть. | События, которые люди должны узнать, открыть для себя, забронировать или купить. |
Почему встроенный календарь не работает?
Большинство сбоев связано с правами доступа к календарю, неправильным блоком WordPress, размером контейнера, кэшированием или несоответствием часовых поясов. Проверьте эти моменты, прежде чем заменять встроенный элемент или устанавливать другой плагин.
При импорте MEC возвращает ошибку 403 или 404: перепроверьте настройки общедоступного календаря, статус API Google Calendar, ограничения ключа API и идентификатор календаря. И следите за обновлениями в социальных сетях.
Календарь пуст или запрашивает у посетителей вход в систему: подтвердите, что календарь является общедоступным или предоставлен для просмотра всем предполагаемым пользователям.
Код iframe отображается как текст: вставьте его в блок "Пользовательский HTML", а не в блок "Абзац" или "Код".
Календарь обрезан: Установите ширину iframe на 100%Попробуйте использовать широкий или полноразмерный блок и увеличьте его высоту.
В мобильной версии текст трудночитаем: протестируйте режим просмотра расписания, уменьшите количество отображаемых элементов управления или используйте макет календаря WordPress, разработанный для маленьких экранов.
События отображаются в неправильное время: синхронизируйте часовой пояс в Google Календаре, WordPress и плагине импорта.
Импортированные события не изменились: проверьте направление импорта, последний запуск, расписание cron и кэш страницы.
1. Можно ли встроить личный календарь Google в WordPress?
Частный календарь может быть виден зарегистрированным пользователям, уже имеющим разрешение, но он не будет работать как общедоступный календарь на веб-сайте.
Для общедоступной страницы создайте отдельный календарь, содержащий только те события, которые вы готовы опубликовать. Не раскрывайте секретный URL-адрес iCal в исходном коде страницы.
2. Будут ли обновления Google Календаря автоматически отображаться в WordPress?
Встроенный iframe загружает календарь, размещенный на сервере Google, поэтому посетители видят текущий календарь при обновлении страницы.
Импортированные события представляют собой отдельные записи WordPress. Они обновляются только при выполнении повторного импорта или настройке поддерживаемой задачи синхронизации по расписанию.
3. Нужен ли мне плагин WordPress для встраивания календаря Google?
Нет. Для бесплатного метода с использованием iframe требуется только код встраивания Google Календаря и блок пользовательского HTML-кода WordPress.
Плагин становится полезным, когда вам нужны страницы событий WordPress, более расширенные возможности управления макетом, фильтрация, метаданные событий, бронирование или продажа билетов.
4. Можно ли встроить более одного календаря Google?
Да. В настройках Google Календаря можно разместить несколько календарей в одном встраиваемом элементе, или же можно добавить отдельные iframe-элементы на разные страницы WordPress.
Разделяйте публичные и приватные расписания и протестируйте цветовые метки и мобильный режим просмотра, когда несколько календарей используют одну сетку.
5. Замедляет ли встраивание календаря Google работу WordPress?
iframe загружает контент из Google после начала загрузки страницы, поэтому он добавляет запрос к стороннему ресурсу и увеличивает вес страницы. Обычно достаточно одного календаря.
Избегайте размещения нескольких встроенных элементов в верхней части страницы и протестируйте готовую страницу с помощью вашего обычного инструмента для оценки производительности.
6. Могут ли посетители добавлять события в свой собственный календарь Google в WordPress?
Да. Google сообщает, что посетители могут использовать ссылку «Добавить в календарь Google» внизу встроенного общедоступного календаря.
Для отдельного публичного события Google Календарь также предоставляет возможность опубликовать событие с помощью HTML-кода для кнопки добавления в календарь.
7. Опубликуйте самый простой календарь, отвечающий поставленным задачам.
Для создания публичного расписания плагин не требуется. Скопируйте iframe, вставьте его в блок «Пользовательский HTML», сделайте ширину адаптивной и проверьте результат на телефоне.
Переходите на плагин событий, если календарь должен делать больше, чем просто отображать даты.
Если вашим посетителям нужны страницы событий, фильтры, бронирование или билеты, протестируйте MEC на небольшом наборе событий, прежде чем переносить весь календарь.
Это позволяет провести наглядное сравнение, не нарушая расписание прямых эфиров.
