Контакти й години роботи на всьому сайті

Що вийде

<!-- 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>

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

Ще рецепти