Вы хотите настроить Google AMP на вашем WordPress сайте? Ускоренные страницы для мобильных устройств или AMP является способом сделать свой веб-сайт быстрее на мобильных устройствах. Быстрые сайты предлагают лучший пользовательский опыт и может улучшить ваш трафик. В этой статье мы покажем вам, как настроить Google AMP в WordPress.

Что такое Google AMP?

Google AMP выступает за ускоренную страницы для мобильных устройств. Он с открытым исходным кодом при поддержке технологических компаний, таких как Google и Twitter. Целью проекта является сделать загрузку веб — контента быстрее для мобильных пользователей.

Для многих мобильных пользователей, чтение в Интернете часто медленно. Большинство контента богатых страниц занимает несколько секунд, чтобы загрузить, несмотря на все усилия, предпринятые владельцами сайтов, чтобы ускорить их веб — сайт.

Ускоренные мобильные страницы или AMP используют голый минимальный HTML и ограниченный Javascript. Это позволяет контенту, который будет размещен на Google AMP Cache. Google может затем отдавать кэшированную версию пользователям мгновенно при нажатии на ссылку в результатах поиска.

Это очень похоже на Facebook Instant Articles. Тем не менее, Instant Articles ограничены только платформой Facebook, более конкретно на их мобильное приложение.

Ускоренные Мобильные страницы являются платформы агностиком и может быть использованы любым приложением, браузером или веб-просмотром. В настоящее время он используется Google, Twitter, LinkedIn, Reddit и другими.

Плюсы и минусы Google AMP (Accelerated Mobile Pages)

Эксперты утверждают, что SEO Accelerated Mobile Pages поможет вам дать более высокий рейтинг в Google, и это улучшает пользовательский опыт для мобильных пользователей на медленных интернет-соединений. Тем не менее, есть несколько проблем для владельцев веб-сайтов, блоггеров, и маркетологов.

AMP использует ограниченный набор HTML, JavaScript и CSS. Это означает, что вы не можете добавить некоторые виджеты и функции на свой мобильный AMP веб — сайт. Это ограничивает вашу способность добавлять смарт — формы электронной почты OPTIN, facebook и другие динамические скрипты.

В то время как Google AMP поддерживает Google Analytics, он не поддерживает многие другие аналитические платформы. То же самое касается рекламных опций, которые ограничены, чтобы выбрать несколько рекламных платформ.

Несмотря на свои ограничения, Google продвигает страницы AMP, давая им толчок в мобильном поиске.

Если значительная часть вашего трафика приходит из мобильного поиска, то вы можете добавить поддержку AMP для улучшения и поддержания вашего SEO.

Некоторые из наших читателей спрашивали о том, как настроить Google AMP в WordPress, мы создали шаг за шагом процесс о том, как настроить ускоренные мобильные страницы в WordPress.

Настройка ускоренных страниц для мобильных устройств или AMP в WordPress

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

После активации, зайдите на страницу Внешний вид » AMP, чтобы увидеть, как выглядит ваш сайт на мобильных устройствах с помощью AMP.

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

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

Не забудьте нажать на кнопку Сохранить, чтобы сохранить изменения.

Теперь вы можете посетить любой один пост на вашем сайте и добавить /amp/в конце URL. Примерно так:

https://andreyex.ru/blog-platforma-wordpress/luchshie-uchebniki-po-wordpress/kak-pravilno-ustanovit-google-amp-na-vashem-sajte-wordpress/amp/

Вам покажет усеченную версию AMP поста.

Если просмотреть исходный код оригинального поста, вы найдете эту строку в HTML:

<link rel="amphtml" href=" https://andreyex.ru/blog-platforma-wordpress/luchshie-uchebniki-po-wordpress/kak-pravilno-ustanovit-google-amp-na-vashem-sajte-wordpress/amp/" />

Эта строка сообщает поисковым машинам и других AMP,  где искать версии AMP страницы.

Исправление проблем:

Если вы видите сообщение об ошибке 404 при попытке просмотреть версию AMP, то вот что вам нужно сделать.

Посетите страницу Настройки » Постоянные ссылки в вашей админке WordPress и нажмите на кнопку «Сохранить изменения». Помните, что ничего не изменится здесь, просто нажмите на кнопку Сохранить. Это позволит обновить постоянную ссылку структуры веб — сайта.

Просмотр страниц ускоренный мобильный в Google Search Console

Хотите знать, как ваши Ускоренные страницы для мобильных устройств показываются в поиске Google? Вы можете легко проверить это с помощью Google Search Console.

Войти в панель управления Google Search Console, а затем нажмите Вид поиска »ускоренные мобильные страницы.

Не беспокойтесь, если вы не видите ваши результаты AMP сразу. Это может занять некоторое время для Google, чтобы он мог проиндексировать ваши ускоренные страницы для мобильных устройств, а затем показать данные в Search Console.

Расширение и настройка Ускоренных страниц для мобильных устройств

Плагин AMP для WordPress поставляется с очень ограниченными возможностями настройки. Тем не менее вы можете использовать некоторые другие плагины WordPress, чтобы добавить несколько настроек.

Если вы уже используете Йоаст SEO, то вам необходимо установить и активировать Glue for Yoast SEO & AMP.

Этот плагин надстройка для Yoast SEO и плагина AMP. После активации, вам необходимо посетить страницу SEO »AMP для настройки параметров плагина.

Плагин позволяет включить поддержку AMP для других типов постов.

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

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

Не забудьте нажать на кнопку Save Settings для сохранения изменений.

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

Тем не менее, вы должны убедиться, проверить страницы AMP после установки каких — либо аддон плагинов.

Мы надеемся , что эта статья помогла вам узнать, как настроить Ускоренное страницы для мобильных устройств (AMP) на WordPress.

Краткое предисловие

Если вы хотите, чтобы ваша>тема или плагин (последний вариант предпочтительнее чисто идеологически) самостоятельно создавали новые материалы(несколько страниц), можете использовать приведенный ниже код. Просто добавьте его на свой блог, и вы получите готовый результат.

Код плагина-примера

<?php

/*

Plugin Name: Page Creator

Plugin URI: http://andreyex.ru/wordpress-i-programmnoe-sozdanie-stranicy/

Description: Пример программной генерации страницы.

Author URI: http://andreyex.ru

Author: AndreyEx.

Version: 2.0.0

*/

 

$pce_name = "Page Creator";

     

function pce_code_add_admin() {

  global $pce_name;

  add_options_page(__('Настройки'), $pce_name, 'edit_themes', basename(__FILE__), 'pce_code_to_admin');

}

 

function pce_code_to_admin() {

  global $pce_name;

?>

 

<div class="wrap"><?php

    screen_icon();

    echo '<h2>'.__('Настройки').': '.$pce_name.'</h2>';

    if (isset($_POST['save'])) {

        $np = array(

            'slug' => 'example-gen',

            'title' => 'Заголовок статьи',

            'content' => "Содержимое статьи"

        );

        if ( wp_insert_post( array(

                'post_title' => $np['title'],

                'post_type'    => 'page', // тип записи

                'post_name'     => $np['slug'], // URL, будут совпадения? WordPress сам все исправит.

                'comment_status' => 'closed', // закрыть комментарии

                'ping_status' => 'closed', // запретить пинги

                'post_content' => $np['content'],

                'post_status' => 'publish', // опубликовать статью

                'post_author' => 1, // кто будет автором

                'menu_order' => 0 // положение пункта в меню

            )) > 0 ) :

            echo '<div id="setting-error-settings_updated" class="updated settings-error"><p><b>'.__('OK.').'</b></p></div>';

        endif;

    } ?>

    <form method="post">

      <div class="submit">

          <input name="save" type="submit" class="button-primary" value="<?php echo __('Добавить новую страницу'); ?>" />

      </div>

    </form>

</div><?php

}

 

add_action('admin_menu', 'pce_code_add_admin');

 

?>

Небольшое примечания

Собственно, нужный функционал находится между 26 и 41 строчками кода включительно. Функция возвращает 0, если не создается новый пост, иначе получите просто идентификатор записи.

Вы хотите использовать пользовательские форматы в визуальном редакторе WordPress? Хорошая идея, добавление стилей дает вам массу преимуществ. Вы можете использовать элементы без необходимости вносить изменения в текстовом режиме. Таким образом, в этой статье мы покажем вам, как расширить редактор пользовательскими форматами.

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

Там, конечно, много плагинов, которые расширяют редактор. Но действительно ли вы их можете использовать? Или несколько таких элементов, как симпатичные кнопки, например, достаточно? Это не замедлило бы ваш сайт без необходимости.

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

WordPress: Добавление собственных стилей в визуальном редакторе без плагинов

Использование собственных стилей также означает, что мы должны коснуться файлов WordPress. Дополнительный код, который мы создадим мы добавим в functions.php активной темы или в пользовательский плагин. Я рекомендую последний.

1 — мы создаем собственный пункт меню в редакторе

Следующий код создает дополнительное выпадающее меню в визуальном редакторе. Меню даст вам возможность иметь возможность выбирать и использовать свои собственные стили.

<?php

// дополнительное выпадающее меню в визуальном редакторе

function ah_mce_buttons_2($buttons) {

	array_unshift($buttons, 'styleselect');

	return $buttons;

}

add_filter('mce_buttons_2', 'ah_mce_buttons_2');

2 — Создание опций, которые могут быть выбраны

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

<?php



function ah_mce_before_init_insert_formats( $init_array ) {  

	$style_formats = array(  



		array(  

			'title' => 'Blauer Button',  

			'block' => 'span',  

			'classes' => 'blue-button',

			'wrapper' => true,

			

		),  

		array(  

			'title' => 'Roter Button',  

			'block' => 'span',  

			'classes' => 'red-button',

			'wrapper' => true,

		),

		array(  

			'title' => 'Grüner Button',  

			'block' => 'span',  

			'classes' => 'green-button',

			'wrapper' => true,

		),

	);  

	// Insert the array, JSON ENCODED, into 'style_formats'

	$init_array['style_formats'] = json_encode( $style_formats );  

	

	return $init_array;  

  

} 

// Attach callback to 'tiny_mce_before_init' 

add_filter( 'tiny_mce_before_init', 'ah_mce_before_init_insert_formats' );

3 — Создание необходимых CSS для кнопок

Кнопки уже годны к употреблению. Вы можете попробовать их, создав новую статью, а затем, используя новую функцию. Тем не менее, кнопки не похожи на кнопки еще; немного CSS для этого нужно.

Скопируйте CSS в style.css вашей темы WordPress, или создайте собственную таблицу стилей для них.

.blue-button { 

	background-color:#33bdef;

	-moz-border-radius:6px;

	-webkit-border-radius:6px;

	border-radius:6px;

	border:1px solid #057fd0;

	display:inline-block;

	cursor:pointer;

	color:#ffffff;

	padding:6px 24px;

	text-decoration:none;

}



.green-button { 

	background-color:#30AC38;

	-moz-border-radius:6px;

	-webkit-border-radius:6px;

	border-radius:6px;

	border:1px solid #219328;

	display:inline-block;

	cursor:pointer;

	color:#ffffff;

	padding:6px 24px;

	text-decoration:none;

}



.red-button {

	background-color:#bc3315;

	-moz-border-radius:6px;

	-webkit-border-radius:6px;

	border-radius:6px;

	border:1px solid #942911;

	display:inline-block;

	cursor:pointer;

	color:#ffffff;

	padding:6px 24px;

	text-decoration:none;

}                                 

.blue-button:hover, .red-button:hover, .green-button:hover {opacity: .8}

 

4 — Мы все еще нуждаемся в CSS для редактора

Для нас, чтобы быть в состоянии увидеть правильно отформатированные кнопки в визуальном редакторе, нам нужен editor-style.css.

Вы найдете файл в корневой каталоге вашей темы, или в папке с именем CSS. Если нет, то я рекомендую вам создать сейчас. Это не очень сложно. Просто создайте пустой файл с именем CSS в editor-style.css при помощи редактора HTML.

Теперь скопируйте CSS из третьего пункта в новую таблицу стилей и сохраните. Переместите его в основную папку вашей темы. Теперь, все, что вам нужно, это небольшая PHP функция, которая вызывает новую таблицу стилей для вашего редактора.

<?php

// Ab hier kopieren

function ah_theme_add_editor_styles() {

    add_editor_style( 'editor-style.css' );

}

add_action( 'init', 'ah_theme_add_editor_styles' );

 

Конечный результат: Наши новые кнопки

Новые кнопки очень просты в использовании, и только в один щелчок мыши при написании новой статьи.

В крошечном редакторе MCE, отформатированные кнопки теперь будет выглядеть красиво:

Новые кнопки в редакторе WordPress

То же самое можно увидеть при использовании их в статье.

Кнопки в статье

Как использовать новые кнопки

Мы установили кнопки, используя достаточно простые методы, вы не в состоянии использовать удобный генератор. Тем не менее, новые кнопки управляются довольно легко. Просто напишите текст кнопки в редакторе, отметьте текст, а затем нажмите на новый пункт меню «formats.» и выберите кнопку.

Теперь вы создали цветную кнопку. Для получения ссылки, отметьте текст кнопки снова, и осуществлять связь.

Добавление других элементов — Made Simple

Вы можете добавить другие элементы, когда вы хотите. Может быть, вы, как и я, используете код тега более чем один раз? Или вы хотите создать цветную рамку для выделенного текста? Нет проблем, снимок экрана показывает вам, что надо изменить в PHP коде в пункте два.

Добавление собственных стилей

Все, что вам нужно сделать, это скопировать весь массив и поместить его ниже существующего. На скриншоте, я указал начало и конец массива. Зеленые скобки отмечают область.

Вывод

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

2016-11-29T11:39:47

Лучшие учебники по Wodpress