Руководство по форматированию даты и времени в Divi

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

Однако понимание того, как форматировать дату и время, пригодится. Это дает вам свободу делать дату более читаемой для пользователей. Например, «В понедельник, 23 мая 2020 года» немного теплее (и человечнее), чем отображение минимальной даты вроде «5.23.20». Хотя у последнего есть свое место. То же самое касается форматирования текущего времени на веб-сайте. Некоторым сайтам может быть полезен 12-часовой дисплей, такой как «8:30 вечера», в то время как другие (например, военные или медицинские сайты) предпочитают 24-часовой дисплей, такой как «20:30».

Divi и WordPress дают вам удивительный контроль над форматированием даты и времени, доступным в PHP. В этом уроке мы поможем вам понять, как отображать, форматировать и стилизовать дату и время в Divi. Вы сможете дать сообщениям в блоге настраиваемый формат для даты публикации или даже добавить динамический элемент в призыв к действию для более индивидуального подхода (например, «С понедельником ! Ознакомьтесь с нашим новым предложением»).

Давайте начнем!

Загрузите руководство по форматированию даты и времени Divi Layout БЕСПЛАТНО

Чтобы быстро перейти к форматированию даты и времени в Divi, загрузите этот полезный макет Руководства по форматированию даты и времени. Он включает в себя примеры использования каждого формата даты / времени в качестве динамического содержимого в текстовом модуле Divi, чтобы вы могли воочию увидеть, как каждый из них работает на действующей странице.

Чтобы получить руководство по форматированию даты и времени, вам сначала необходимо загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

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

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Доступные символы формата для отображения даты и времени

Как упоминалось ранее, Divi использует встроенное в WordPress форматирование даты и времени. Но прежде чем мы перейдем к форматированию даты и времени в Divi, это помогает понять доступные нам символы форматирования.

Ниже приведен список доступных символов формата, которые можно использовать вместе (или комбинировать) для создания пользовательских форматов даты и времени. Это пригодится при экспериментировании с уникальными форматами даты и времени на вашем сайте Divi.

Форматирование даты

Символы формата ДЕНЬ

• d = День месяца, 2 цифры с ведущими нулями («02», «22»)
• D = День месяца тремя буквами («июнь», «июль»)
• l (строчная буква «L») = день недели, полное слово («понедельник», «вторник»)
• N = числовой день недели ISO-8601 («1» для понедельника и «7» для воскресенья)
• S = суффикс дня месяца; использовать с j («nd», «st», «rd»)
• w = числовой день недели («0» для воскресенья и «6» для субботы)
• z = день года, начиная с 0 (например, «173» или «это 173-й день года»)

Символ формата WEEK

• W = 26 (номер недели в году, недели, начинающиеся с понедельника; т. Е. «Это 26-я неделя в году»)

Символы формата MONTH

• F = полнотекстовое представление месяца («январь» или «март»).
• m = числовой месяц с ведущими нулями (июнь отображается как «06»)
• M = месяц тремя буквами (март отображается как «март»)
• n = числовой месяц без ведущих нулей (июнь отображается как «6»)
• t = количество дней в данном месяце (если в июне будет отображаться «30»)

Символы формата YEAR

• Y = 2020 (год из четырех цифр; например, «2020»)
• y = 20 (год, состоящий из двух цифр, т. е. «20»)

Пример строки формата даты

• M j, Y = 22 июня 2020 г.
• F d, Y = 22 июня 2020 г.
• м / д / г = 22.06.2020
• mdY = 22.06.2020
• j M, Y = 22 июн, 2020
• l, M d = понедельник, 22 июня
• l, F jS, Y = понедельник, 22 июня 2020 г.
• м · д · у = 06 · 22 · 20

Форматирование времени

Символы формата ВРЕМЯ

• a = (строчные «am» или «pm»)
• A = PM (заглавные буквы «AM» или «PM»)
• g = час, 12-часовой без начальных нулей («1–12»)
• h = час, 12-часовой, с ведущими нулями («01–12»)
• G = Час, 24 часа, без ведущих нулей («0–23»)
• H = Час, 24 часа, с ведущими нулями («00–23»)
• i = 10 (минуты с ведущими нулями («00–59»)
• s = 52 (секунды с ведущими нулями («00–59»)
• T = часовой пояс («CDT», «EST»)

Пример строк формата времени

• g: ia = 16:10
• g: i: sa = 4:10:52 вечера

Строки формата даты и времени

• Г / м / дг: i: s A = 22.06.2020 16:10:52
• M j, Y @ G: i = 22 июн.2020 в 16:10

Экранирование строк формата с помощью символа «\» для включения дополнительного текста / символов

Это действительно полезный прием для настройки отображения даты и времени. Просто добавьте «\» перед каждым символом / буквой, который вы хотите включить в строку формата, и этот символ будет отображаться как обычно (за пределами строки). Таким образом, «/ T / h / e» будет отображать слово «The» в строке формата вместо фактического элемента даты / времени, такого как часовой пояс («T») или час («h»).

• D \ a \ t ga = пн в 16:00
• \ T \ h \ e dS \ d \ a \ y \ o \ f F = 22-й день июня

Форматирование даты и времени с помощью Divi

Изменение формата даты по умолчанию для всего сайта

Если вы хотите изменить формат даты и времени по умолчанию по всему сайту, WordPress имеет для этого встроенную опцию. На панели управления WordPress перейдите в «Настройки»> «Общие». Там вы увидите возможность изменить часовой пояс по умолчанию, формат даты и формат времени.

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

Если вы используете макет сообщения блога Divi по умолчанию (а не настраиваемый макет, созданный с помощью Divi Builder), вы можете ввести строку настраиваемого формата даты, которая будет использоваться для всех сообщений блога по всему сайту. Вы можете найти опцию формата даты, перейдя в Divi> Theme Options и прокрутив страницу вниз на вкладке General.

Интересно, что вы даже можете ввести символы формата времени, чтобы отобразить время публикации сообщения.

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

При использовании Divi Builder у вас есть возможность добавить текущую дату или дату публикации публикации в качестве динамического содержимого в любой модуль. Это отличный способ переопределить формат даты и времени по умолчанию в каждом конкретном случае, а также добавить собственный стиль текста даты и времени.

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

Затем выберите значок динамического содержимого при наведении курсора на поле содержимого.

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

Встроенные форматы даты Divi

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

• M j, Y = 22 июня 2020 г.
• F d, Y = 22 июня 2020 г.
• м / д / г = 22.06.2020
• mdY = 22.06.2020
• j M, Y = 22 июн, 2020
• l, M d = понедельник, 22 июня

Добавление настраиваемого формата даты / времени

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

Этот же процесс можно использовать для добавления текущего времени или времени публикации. Просто добавьте символы форматирования времени в поле «Пользовательский формат даты».

После того, как у вас есть контент, вы можете использовать встроенные настройки дизайна Divi на вкладке дизайна текстового модуля, чтобы настроить основной текст, как вам нравится. Динамический формат даты / времени примет стиль основного текста.

Более полезные примеры

Год авторского права

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

Добавьте текущую дату как динамическое содержимое в текстовый модуль. Затем отредактируйте динамический контент следующим образом:

• Раньше: ©
• После: Компания | Все права защищены.
• Пользовательский формат даты: Y

Динамический призыв к действию

Вы также можете добавить динамический формат даты или времени (встроенный) в призыв к действию или заголовок на своем веб-сайте Divi. Для этого добавьте текущую дату как динамическое содержимое в текстовый модуль. Затем обновите следующее:

• До:

  <h1>It's

• После:

  ... <br>Time to Design!</h1>

• Пользовательский формат даты: l… \ a \ f \ t \ e \ rga

Обратите внимание, что заголовок h1 добавляется к элементу с помощью тегов html до и после ввода. Слово «вторник» отображается буквой «l» в поле настраиваемого формата даты, за которой следует слово «после» с использованием символа «\» для экранирования строки формата. Затем буквы «g» и «a» используются для отображения «18:00».

Затем вы можете настроить стили заголовков h1 на вкладке дизайна.

Последние мысли

Надеюсь, этот пост содержит (и продолжает оставаться) полезным руководством по форматированию даты и времени в Divi. Если вы такой же, как я, вам открылись некоторые удивительные варианты форматирования, которых вы можете достичь без плагина и с помощью специального кода!

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!