• Домашняя страница
  • Статьи
  • Общий
  • Как настроить WordPress и AMP: ускоренные мобильные страницы: настройка Analytics, AdSense, руководство по социальным сетям прилагается

Как настроить WordPress и AMP: ускоренные мобильные страницы: настройка Analytics, AdSense, руководство по социальным сетям прилагается

Опубликовано: 2016-09-25
руководство по установке-amp-и-wordpress-все-в-одном

В последние дни было много шума о Google AMP. Google официально объявил о поддержке страниц AMP как части страницы мобильного поиска. Это действительно интересно. До сих пор я по какой-то причине избегал внедрения AMP на Crunchify и никогда не чувствовал в этом никакой важности.

Но, посмотрев на твит Барри, я тоже решил AMPlify Crunchify.

Вы ищете советы по AMP и WordPress? Хотите усилить свой сайт WordPress с помощью ускоренных мобильных страниц Google? Или вы хотите установить AMP в WordPress? В этом уроке мы рассмотрим шаги по усилению вашего сайта WordPress со всеми подробными шагами.

Что такое ускоренные мобильные страницы (AMP)?

Проект Accelerated Mobile Pages (AMP) — это проект с открытым исходным кодом, созданный с учетом скорости, который создает оптимизированный для мобильных устройств контент один раз и мгновенно загружает его везде. На странице вообще не загружается JavaScript. Существует очень минимальная загрузка CSS с жесткими ограничениями. Я заметил, что вы даже не можете использовать !important в CSS.

Есть вопросы?

  • Google AMP: что это такое и подходит ли он для вашего сайта WordPress
  • Лучший способ настроить WordPress для AMP
  • Как начать работу со страницами Google AMP и WordPress
  • Плагин Wordpress для ускорения мобильных страниц
  • Страницы усилителя WordPress
  • Клей Yoast amp и запросы WordPress

Приступим: Включите AMP для ваших записей WordPress

Шаг 1

Установите официальный плагин AMP.

установить-официальный-плагин-усилитель-crunchify-советы
  • После активации все готово. Вы не увидите никакого меню опций.
  • Вам нужно перейти в меню « Settings » -> Permalinks ». Нажмите Save Changes , не внося никаких изменений.

Официальный плагин AMP обеспечивает базовую функциональность, и все ваши сообщения будут автоматически AMPlify. Вы можете посетить AMPlified-версию своих сообщений, добавив /amp/ в конце любого URL-адреса сообщения.

Взгляните на пример:

  • Original URL сообщения: https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/
  • URL-адрес сообщения AMPlify : https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/

Шаг 2

Установите плагин Glue for Yoast SEO & AMP. Начиная с версии 0.4 AMP WordPress version , я считаю, вам не нужны никакие другие плагины, связанные с AMP.

Сейчас:

  • Перейдите в Appearance -> AMP .
  • Укажите цвет Header и Background и нажмите Save ».
amp-wordpress-plugin-настраиваемый-вариант

Шаг 3

Единственная проблема, которую я вижу с этим плагином, заключается в том, что он добавляет ссылку Powered by WordPress внизу страницы. Чтобы изменить его, вы можете изменить страницу footer.php с помощью приведенного ниже кода.

  • Перейдите в Plugins -> Editor
  • Выберите плагин AMP
  • Выберите файл amp/templates/ footer.php
1
2
3
4
5
6
7
8
9
< footer class = "amp-wp-footer" >
< div >
< h2 > <?php echo esc_html ( $this - > get ( 'blog_name' ) ) ; ?> < / h2 >
< p >
Copyright < i class = "fa fa-copyright" aria - hidden = "true" > < / i > 2012 - 16 < a href = "https://crunchify.com" > Crunchify , LLC . < / a > &nbsp; • &nbsp; < a href = "https://crunchify.com/sitemap/" target = "_blank" > Archives < / a > &nbsp; • &nbsp; < a href = "https://crunchify.com/advertise/" target = "_blank" > Advertise < / a >
< / p >
< a href = "#top" class = "back-to-top" > <?php _e ( 'Back to top' , 'amp' ) ; ?> < / a >
< / div >
< / footer >

Измените код строки авторского права в соответствии с вашими потребностями

кнопки crunchify-amp-footer-and-social-share

Шаг-4

Добавьте значки Analytics и Social Media сетей на свои страницы AMP.

  1. Функция crunchify_amp_add_analytics_social_ads_js добавит необходимую аналитику и код javascript для социальных сетей на вашу страницу усилителя.
  2. Функция crunchify_amp_add_analytics_social_code добавит актуальный код аналитики и иконки социальных сетей.
  3. Убедитесь, что вы обновили свой Google Analytics Universal tracking ID Facebook App ID ниже.
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes Start ~~~~~~~~~~~~~~~~~~~
add_action ( 'amp_post_template_head' , 'crunchify_amp_add_analytics_social_ads_js' ) ;
function crunchify_amp_add_analytics_social_ads_js ( $ amp_template ) {
$ post_id = $ amp_template - > get ( 'post_id' ) ;
? >
<script async custom-element = "amp-analytics" src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js" > </script>
<script async custom-element = "amp-social-share" src = "https://cdn.ampproject.org/v0/amp-social-share-0.1.js" > </script>
<?php
}
add_action ( 'amp_post_template_footer' , 'crunchify_amp_add_analytics_social_code' ) ;
function crunchify_amp_add_analytics_social_code ( $amp_template ) {
     $post_id = $amp_template - > get ( 'post_id' ) ;
     ?>
< amp - analytics type = "googleanalytics" id = "analytics1" >
<script type = "application/json" >
{
   "vars" : {
"account" : "UA-43876549-1"      // Modify universal tracking ID
   } ,
   "triggers" : {
"trackPageview" : {
   "on" : "visible" ,
   "request" : "pageview"
}
   }
}
</script>
< / amp - analytics >
 
   // Social Media Code
   < div align = "center" >
     < amp - social - share type = "twitter"
         width = "30"
         height = "30" > < / amp - social - share >
     < amp - social - share type = "gplus"
         width = "30"
         height = "30" > < / amp - social - share >
     < amp - social - share type = "facebook"
         width = "30"
         height = "30"
         data - param - app_id = "509582389234904" > < / amp - social - share >    // Modify your App ID
   < / div >
     < ? php
}
// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes End ~~~~~~~~~~~~~~~~~~~

Шаг-5

Добавьте код Google AdSense на свою AMP-страницу. В моем случае я хотел добавить код AdSense 300x250 300 x 250 под избранным изображением. Официальных хуков для использования нет, поэтому я изменил файл single.php , расположенный в <каталоге плагинов AMP> amp/templates/single.php .

изменить-amp-плагины-один-php-файл
  • Перейти в меню Plugins
  • Нажмите Editor
  • Выберите плагин AMP
  • Перейти к файлу single.php
  • Добавьте код AdSense, как показано в приведенном ниже фрагменте кода. Просто look for line featured-image и после этого добавьте код AdSense.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php $this - > load_parts ( array ( 'featured-image' ) ) ; ?>
 
// Adsense code START
< br > < div align = "center" >
< amp - ad width = 300 height = 250
type = "adsense"
data - ad - client = "ca-pub-xxxxxxxxxxxxxxxx"
data - ad - slot = "0110036438" >
< div placeholder > < / div >
< div fallback > < / div >
< / amp - ad >
< / div >
// Adsense code END
 
< div class = "amp-wp-article-content" >

И все готово. Просто очистите кеш сайта и проверьте живую страницу AMP. Вы увидите, что все значки Google Analytics, AdSense и социальных сетей работают правильно.

Что теперь?

Давайте проверим и проверим вашу AMP-страницу на наличие проблем. Перейдите на https://validator.ampproject.org/ и проверьте результат.

ampproject-validation-page-crunchify-советы

Как Google собирается сканировать страницы сообщений AMP?

Теперь у вас есть как AMP and non-AMP versions ваших страниц, плагин AMP автоматически добавит приведенный ниже метатег отношения к вашим обеим страницам.

Проверьте это на странице без AMP

Вы должны увидеть ссылку на AMP-версию страницы, чтобы сообщить об этом Google и другим платформам:

<link rel="amphtml" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/">

rel-amphtml-html-tage-for-non-amp-page-crunchify-tips

Проверьте это на странице AMP

Вы должны увидеть текст, указывающий на его каноническую версию без AMP:

<link rel="canonical" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/">

rel-canonical-html-meta-tag-in-amp-page-crunchify-tips

Теперь давайте подождем пару дней или хотя бы неделю, и вы должны увидеть страницы AMPlify в Google Search Console. Для меня это всего 4 дня, и я вижу почти 500 страниц, уже проиндексированных для результата AMP.

руководство по настройке wordpress-and-amp-by-crunchify-stats

Как проверить живой результат?

Просто найдите сообщение в Google в мобильном браузере, и вы должны увидеть AMP result поиска.

crunchifys-amp-result-in-google-мобильная-поисковая-страница

Кроме того, продолжайте посещать эту страницу или добавляйте ее в закладки, так как я буду обновлять этот учебник с течением времени в соответствии с моими знаниями. Приятного ведения блога и помогите ускорить работу сети.