Вы хотите настроить 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

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

Создание локальных сайтов на WordPress как и создание сайтов в астане является обычной практикой среди разработчиков и владельцев сайтов. Такой метод позволяет тестировать WordPress без размещения реального сайта в Интернете.

Описанные в этой статье шаги относятся к системе Windows. Тем не менее, процесс на Mac или Linux компьютеров в основном тот же самый.

Необходимые программы

Есть несколько программ для создания локальной установки WordPress. В этом посте мы сосредоточились на следующих простых в использовании инструментов:

• • Установить локальный веб — сервер и базу данных MySQL. В нашем примере, XAMPP был установлен под следующую папку: C: XAMPP
    
    Примечание: Эта программа также доступна для Linux и Mac.

• Чтобы загрузить WordPress файлы, вам нужен FTP клиент.
• Локальная установка WordPress должна быть скорректирована позже. Мы загрузим и установим плагин Better Search & Replace для этой цели. Если вы не знаете как установить плагин, вот вам гид: как установить плагин в WordPress — шаг за шагом для начинающих.

Процедура

Настройка локальной установки WordPress включает следующие шаги:

1. Загрузка файлов WordPress.
   
   Скачать все файлы инсталляции WordPress и скопировать их на свой компьютер.
2. Идентификация и экспорт базы данных.
   
   Вы можете определить и экспортировать базу данных в панели управления.
3. Импорт и настройка базы данных.
   
   Импорт экспортированной базы данных и настроить его с помощью XAMPP.
4. Настройка файла.
   
   Для запуска WordPress локально, вы должны настроить один файл.
5. Настройка ссылок.
   
   С помощью плагина, вы регулируете ссылки на локальной установки WordPress.

 Загрузка файлов WordPress

1. Создайте новую папку в C:xampphtdocs. В нашем примере: wp-testenvironment
   
   Примечание: Запомните это имя папки. Она Вам потребуется позже, чтобы войти в систему локальной установки WordPress.
2. Скопируйте все файлы вашей установки WordPress во вновь созданную папку с помощью FTP клиента.

Определение базы данных

Если вы не знаете, какая база данных подключена к вашему сайту на WordPress, проверьте файл wp-config.php в корне сайта, в строке define(‘DB_NAME‘, ‘имя_базы_данных’);.

Экспорт базы данных

1. Запустите PhpMyAdmin.
2. Нажмите кнопку Экспорт.
3. Нажмите Go.
4. Сохраните базу данных на вашем компьютере.
   
   Примечание: Запомните имя файла и где вы сохранили файл. Вам нужна будет эта информация, чтобы импортировать файл на следующем шаге.

Установка локально WordPress

Все шаги, описанные в этом разделе требуется локальный веб — сервер (Apache) и локальной базы данных (MySQL), которые должны быть запущены. Если вы не установили эти модули в панели управления XAMPP, вы не можете использовать локальную установку.

Импорт базы данных

Теперь вы должны импортировать экспортированную базу данных в новую, пустую базу данных локального веб-сервера.

1. Запустите Панель управления XAMPP.
2. Запустите Apache и MySQL.
3. В MySQL, нажмите кнопку Администратор.
   
   
   
   Откроется локально установленный PHPMYADMIN.
4. Нажмите Базы данных.
5. Введите имя базы данных и нажмите кнопку Создать.
   
   
   
   Новая база данных отображается в разделе слева. Импортируйте ранее экспортированную базу данных в эту пустую базу данных.
6. Нажмите на новую базу данных
7. Нажмите Импортировать.
8. Нажмите кнопку Обзор и выберите ранее экспортированный базу данных.
9. Нажмите Go.

База данных импортируется.

Настройка локальной базы данных

Записи базы данных «SITEURL» и «HOME» должны быть изменены вручную. И по- прежнему содержат URL, под которым ваша «реальная» установка WordPress может быть доступна. Вы должны заменить этот URL — адрес на локальный URL.

1. Со стороны левой руки, нажмите на стол, заканчивающегося «options«.
   
   
2. Выберите SITEURL и нажмите кнопку Изменить.
3. Введите URL — адрес, под которым указанна ваша локальная установка WordPress. В нашем примере: http://localhost/wp-testenvironment/
   
   Примечание : «wp-testenvironment» это имя папки, созданной в разделе «Загрузка файлов WordPress«. Если вы выбрали другое имя папки, введите это имя.
   
   
4. Нажмите Go.
5. Выберите HOME и нажмите кнопку Изменить.
6. Введите адрес вашей локальной установки WordPress снова.
   
   
7. Нажмите Go.

Измененные записи должны быть в колонке option_value.

Настройка файла

Теперь вы должны настроить файл wp-config.php. Этот файл по-прежнему содержит информацию о базе данных вашей «реальной» установки WordPress. Вы должны заменить эту информацию той, которая имеет отношение к вашей локальной установки.

1. Откройте папку, содержащую вашу локальную установку WordPress. В нашем примере: C:xampphtdocswp-testenvironment
   
   Примечание: «wp-testenvironment» это имя папки, созданной в разделе «Загрузка файлов WordPress«. Если вы выбрали другое имя папки, введите это имя.
2. Откройте wp-config.php файл в текстовом редакторе, например в Блокноте.
3. Введите следующую информацию:

   • DB_NAME: Имя базы данных вашей локальной установки WordPress.
   • DB_USER: root
   • DB_PASSWORD: оставьте пустым
   • DB_HOST: localhost
     
     

4. Сохраните файл.

Настройка ссылки

Звенья локальной установки WordPress по- прежнему указывают на вашу онлайн — установку. Вы можете легко изменить это с помощью плагина Search & Replace.

1. Перейдите в область администратора вашей локальной установки WordPress, введя соответствующий URL в адресной строке браузера. В нашем примере: http://localhost/wp-testenvironment/wp-admin.
2. Установите плагин Better Search & Replace.
3. Под именем плагина, который вы только что установили, выберите Настройки.
4. Введите URL вашей «онлайн установки» в поле Search for.
5. Активировать вариант All – search and replace!.
6. Введите адрес вашей локальной установки WordPress в поле Replace with.
   
   В нашем примере: http://localhost/wp-testenvironment/
7. Нажмите Go.
   
   Изменения применяются.
8. Нажмите Настройки> Постоянные ссылки.
9. Выберите имя поста и нажмите кнопку Сохранить изменения.

Локальная установка WordPress теперь установлена.

Использование локальной установки WordPress

1. Для использования локальной установки WordPress, запустите Панель управления XAMPP.
2. Запустите Apache и MySQL.
3. Введите адрес вашей локальной установки в вашем браузере. В нашем примере:

   • http://localhost/wp-testenvironment/
     
     или
   • http://localhost/wp-testenvironment/wp-admin

4. Используйте локальную установку WordPress, как обычно.