В этой статье я покажу вам, как создать файл footer.php для AMP темы WordPress. Можно было все внести в один шаблон между тегами <html><head>...</head><body>. Но если потом вы захотите изменить шаблон, вам нужно будет искать и редактировать нужный код, что очень не удобно. Поэтому в WordPress было введено разделение на файлы header.php и footer.php, так чтоб вам было удобно редактировать их.
В первой части разработки своей Amp темы WordPress мы уточнили строение стандартных тем и разделили на файлы, без которых не будет работать AMP тема. Во второй части создали файл header.php от начала html документа до меню навигации в боковой панели. Приступим к не менее важному файлу footer.php создадим его и приступим к пояснению кода.
AMP — файл footer.php
Код для файла нижнего колонтитула для AMP темы относительно прост. Рассмотрим его построчно:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | // Закрывающий тег контента файла index.php </div> <div id='footer'> <div class=site_links> // Вывод ссылок на страницы О нас, Контакты, Политика Конфиденциальности < ?php wp_nav_menu( array( 'theme_location' => 'menu-2', 'menu_class' => 'primary-menu',) );? > </div> <divclass='branding'> <p>© Все права защищены 2018-2020<br> <? p h p echo '' . $ _SERVER['SERVER_NAME']; ? ></p> </div> // Подключение счетчиков Google Analitycs и Яндекс метрики <amp-analytics type='googleanalytics' id='analytics1'> <script type='application/json'>{ 'vars':{'account':'UA-ХХХХХХХ-Х'}, 'triggers':{}} </script></amp-analytics> <amp-analytics type='metrika'> <script type='application/json'> { 'vars': { 'counterId': 'XXXXXXX', 'yaParams': '{'key':'value','__ymu':{'user_param_key':'user_param_value'}}'} } </script> </amp-analytics> </div> </body> </html> |
Обратите внимание, что этот файл включает в себя не только элементы нижнего колонтитула, но и закрытие контента тегом div, закрытие body и html. В нашем случае файл footer.php будет содержать вывод:
- Ссылки на страницы «О нас», «Контакты», «Политика конфиденциальности». При желании можете добавить свое решение. Вывод происходит функцией wp_nav_menu из ранее созданного меню WordPress.
- Уведомление об авторских правах и даты существования проекта.
- Вывод на страницы счетчиков Google Analytics и Яндекс метрики. Обратите внимание что код вывода счетчика измененный и соответствует стандартам AMP. Для получения статистики посещений вашего сайта, вам нужно всего лишь заменить «ХХХХХХХ» на идентификатор вашего счетчика.
Приведенный выше код в AMP шаблон являются особым случаем в WordPress и применяется ко всем страницам. Вы можете создать любое количество таких файлов с разной информацией в соответствии с документацией AMP. Включить их в разные файлы шаблонов, отвечающие за вывод страниц, записей, рубрик и страницы поиска.
Pixel Facebook для AMP страниц
Все, что вам нужно сделать, это разместить этот код с вашим собственным номером пикселя вместо ХХХХХХХХ сразу же после кодов счетчиков в файле footer.php. Код ниже использует меньше кода, чем первоначальный код в создании AMP.
1 2 3 4 | <!– Facebook Pixel Analytics tracking –> <amp-pixel src='https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=PageView&noscript=1' layout=”nodisplay”></amp-pixel> <!– End Facebook Pixel Analytics example –> |
Установка социальных кнопок в AMP
Этот HTML-код должен находиться в вашем файле, если вы хотите использовать значки для публикации записей в социальные сети.
Стилизовать иконки тоже очень просто. Вы можете дать им класс, такой как .ground или .square, а затем сделать их квадратными или круглыми, большими или маленькими. Это полностью зависит от вас.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <amp-social-share type=”email” height=”36″ width=”36″ class=”rounded”></amp-social-share> <amp-social-share type=”facebook” height=”36″ width=”36″ class=”rounded” data-param-app_id=”XXXXXXXXXXXXXX″></amp-social-share> <amp-social-share type=”pinterest” height=”36″ width=”36″ class=”rounded”></amp-social-share> <amp-social-share type=”tumblr” height=”36″ width=”36″ class=”rounded”></amp-social-share> <amp-social-share type=”twitter” height=”36″ width=”36″ class=”rounded”></amp-social-share> <amp-social-share type=”whatsapp” height=”36″ width=”36″ class=”rounded”></amp-social-share> <amp-social-share type=”line” height=”36″ width=”36″ class=”rounded”></amp-social-share> //Стили для кнопок занести в файл header.php <style amp-custom> @media screen and (min-width:1200px){ .rounded{ display: inline-block; padding-left: 40px; padding-right: 40px; } } @media screen and (max-width: 1200px){ .rounded{ display: inline-block; padding-left: 20px; padding-right: 20px; } } .rounded { border-radius: 50%; margin-bottom: 50px; margin-right: 10px; } |
Вывод
Наша тема теперь имеет 2 файла в шаблоне и включаемые файлы имеют правильную структуру AMP страниц. Я пытаюсь сделать тему простой и понятной, но для некоторых это может показаться сложным. И понимание PHP, CSS и HTML весьма полезно, чтобы собрать все это вместе.
В следующей части перейдем к добавлению отображения контента и подправим файл functions.php, для правильной обработки страниц AMP.
Если у вас есть дополнительные вопросы, пожалуйста, сообщите это в комментариях ниже.
