Контакты и часы работы на всём сайте

Что получится

<!-- theme-options.html and the footer of every page: the same markup -->
<body wp-fields-group="Site settings">
<footer class="footer">
  <a class="footer__phone" href="tel:+15550100199" opt-link="Phone link">
    <span opt-text="Phone">+1 (555) 010-0199</span></a>
  <p class="footer__address" opt-area="Address">12 Linden Street, Portland, OR</p>
  <ul class="footer__hours" opt-loop="Opening hours">
    <li><span fld-text="Days">Mon–Fri</span> <span fld-text="Hours">7:00–19:00</span></li>
    <li><span fld-text="Days">Sat–Sun</span> <span fld-text="Hours">8:00–17:00</span></li>
  </ul>
</footer>
</body>

Пошагово

1. Страница настроек сайта

   Разметку подвала положите и в theme-options.html с группой wp-fields-group: так поля появятся на экране настроек.

   <body wp-fields-group="Site settings">

2. Телефон — ссылка и номер

   opt-link на ссылке tel: и opt-text на номере. Клиент меняет оба: ссылку для звонка и то, что видно на сайте.

   <a class="footer__phone" href="tel:+15550100199" opt-link="Phone link">
     <span opt-text="Phone">+1 (555) 010-0199</span></a>

3. Адрес

   opt-area — адрес в несколько строк, переносы сохранятся.

   <p class="footer__address" opt-area="Address">12 Linden Street, Portland, OR</p>

4. Часы работы — список

   opt-loop на списке дней: клиент добавит «праздники» отдельной строкой. Поля внутри строки — fld-text.

   <ul class="footer__hours" opt-loop="Opening hours">
     <li><span fld-text="Days">Mon–Fri</span> <span fld-text="Hours">7:00–19:00</span></li>

Что важно

• На страницах сайта разметка подвала та же, что в theme-options.html: атрибуты opt- читают настройки сайта, где бы ни стояли.
• Общие для сайта значения не делайте полями страниц: иначе клиенту придётся менять телефон на каждой странице.

Частые ошибки

Журнал сборки — вкладка «Логи» вашего проекта на themeforge.pro; те же замечания показывает бесплатная проверка разметки.

<a class="footer__phone" href="tel:+15550100199" opt-text="Phone">+1 (555) 010-0199</a>

<a class="footer__phone" href="tel:+15550100199" opt-link="Phone link">
  <span opt-text="Phone">+1 (555) 010-0199</span></a>

Атрибуты в рецепте

Ещё рецепты