Coma Web Development разрабатывает сайты на WordPress c 2010 года. В блоге мы делимся некоторыми наблюдениями из жизни, советами и рекомендациями для тех, кто решит сделать сайт на WordPress самостоятельно.

Как добавить Feature Boxes с иконками в WordPress

Ноя 29, 2016/от Vadim Pavlovich

Многие люди, которые посещают сайты, обычно не читают, что в них написано. Мы, как люди, превращаемся в профессиональные сканеры. Это, в свою очередь, значит, что как владелец бизнеса вам надо подавать свою информацию в легкодоступном виде. Поэтому многие сайты обычно используют огромное изображение или слайдер. Вы можете использовать так называемые feature boxes, в которых можно продемонстрировать несколько продуктов сразу, и каждая ячейка может быть связана с определенным действием.

Добавляем Feature Boxes с иконками на сайт

Первым делом вам надо установить и активировать плагин Advanced WP Columns. После активации зайдите в Settings > Advanced WP Columns, чтобы настроить плагин. Пролистайте вниз до Column class и введите в поле mycolumns.

Затем вам понадобится плагин, чтобы вставить красивые иконки в ваш Feature boxes. Установите и активируйте плагин WP SVG Icons. Теперь вы готовы к созданию Feature Boxes. Начните с редактирования страницы, на которой вы хотели бы их видеть. Вы заметите две новые кнопки в окне редактора постов. Первая – Add Icon – находится прямо над редактором. Следующая находится последним элементом в меню визуального редактора. Если ваш визуальный редактор показывает всего один ряд кнопок, то вам надо щелкнуть по кнопке, которая разворачивает панель кнопок.

Сперва вам надо щелкнуть по кнопке Advanced WP Columns. В появившемся окне щелкните по Empty и затем выберите число колонок, которое вы хотите добавить.

После этого надо щелкнуть по каждой колонке, чтобы добавить какой-нибудь текст. Если вы не добавите текст сейчас, то потом будет сложно видеть колонки в редакторе постов. Когда закончите, нажмите по кнопке Add Columns внизу. Теперь вы увидите колонки в своем редакторе постов. Следующим шагом будет добавление иконок над текстом. Наведите мышиный курсор на текстовое поле в первой колонке и щелкните по клавише ввода. Это уберет текст вниз и создаст место для иконок. Вам надо теперь щелкнуть по кнопке Add icon и вы увидите подобное окошко.

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

[wp-svg-icons icon=»rocket» wrap=»span»]

Повторите процесс, чтобы добавить иконки в другие Feature Boxes. Как только закончите, нажмите по кнопке Update, чтобы сохранить свою страницу. Вы почти закончили, но если сделаете предпросмотр страницы, то заметите, что иконки слишком маленькие, а ваши feature boxes едва заметны.

Вам надо будет добавить следующий CSS-код в таблицу стилей своего шаблона:

span.wp-svg-rocket.rocket { 
font-size:100px; 
} 

span.wp-svg-cloud.cloud { 
font-size:100px; 
} 
span.wp-svg-headphones.headphones { 
font-size:100px; 
} 
.mycolumns { 
border:1px solid #eee;
min-height:250px; 
padding-top:20px !important;
}

Не забудьте отредактировать CSS, чтобы он соответствовал названиям иконок, которые вы используете.

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520

Как настроить автоматический бэкап с помощью Codeguard

Ноя 29, 2016/от Vadim Pavlovich

Вы хотели бы создать машину времени для своего сайта? Автоматический бэкап вашего сайта в облако это первый шаг в обезопасивании вашего сайта, потому что он дает возможность вернуть все на круги своя, если что-то пойдет не так. В этой статье мы расскажем вам как настроить автоматический бэкап WordPress с Codeguard, а также попутно дадим свой честный обзор на сам сервис.

Что такое Codeguard?

Codeguard является сервисом по бэкапу сайтов, который может в автоматическом режиме делать резервную копию вашего сайта и сохранять ее в облако. Также он позволяет ежедневно отслеживать изменения. Есть куча плагинов WordPress для создания резервных копий, однако использование плагина означает, что вам постоянно нужно будет следить за тем, чтобы плагин своевременно обновлялся. Также большинство плагинов не предлагают облачных хранилищ. Если вы администрируете сайты для кого-то, то управление всеми бэкапами по отдельности может быть затруднительным, не говоря уже о том, что клиенты случайно могут отключить бэкап. Codeguard это платный сервис по созданию резервных копий сайтов, который работает на всех платформах, включая Вордпресс. Их ежемесячный тариф начинает с 5 долларов за сайт и бесконечными базами данных с 5 Гб для хранения. Также они предлагают пробный период длиною в 14 дней. Мы решили попробовать Codeguard потому что их ребята утверждают, что их сервис это настоящая машина времени для вашего сайта и мы хотим узнать насколько обоснованно это утверждение.

Настройка резервной копии WordPress в Codeguard

Первым делом вам надо зайти на сайт Codeguard и щелкнуть по кнопке Start Your Free Trial.

Это направит вас на форму подписки. Заполните ее и щелкните по кнопке start my free trial, где вас попросят ввести пароль для своего профиля. Используйте что-нибудь надежное, прежде чем нажмете кнопку дальше.

Откроется окно, где вам надо ввести адрес своего сайта и указать информацию об FTP.

Если вы не знаете имя пользователя и пароль от FTP, то свяжитесь с хостом своего сайта. Вы также можете узнать эту информацию и в письме, которое отослал вам хостинг, когда вы зарегистрировались на нем. Помимо этого вы можете получить эти сведения в cPanel, щелкнув по FTP в менеджере FTP. После ввода информации об FTP/SFTP щелкните по кнопке соединения.

Сервис соединится с вашим сайтом и покажет все файлы, расположенные на вашем сервере. Вам надо выбрать папку, которая содержит все ваши файлы WordPress и затем щелкнуть кнопку select root directory.

Теперь пролистайте немного вниз и вы увидите Select website content. Вам надо выбрать все ваши файлы и папки. Просто щелкните по самой верхней папке и все файлы внутри ее будут автоматически выбраны. Затем щелкните по кнопке Begin first backup.

Codeguard автоматически начнет скачивать ваши файлы WordPress на свои облачные серверы. Вам попросят добавить свою базу данных для создания резервной копии.

Следующий шаг это соединить свою базу данных и, чтобы сделать это, необходимо указать следующую информацию:

— название хоста вашей базы данных или IP-адреса
— имя пользователя и пароль MySQL

Вы можете найти эту информацию в сайте wp-config.php или же связавшись со своим хостингом. Если вы соединяетесь, используя localhost в качестве названия хоста, то вам потребуется ввести такое же доменное имя как и у хоста. Иными словами, если вы используете имя вроде mysql.example.com, то вам надо вводить это или использовать IP-адрес серверва MySQL.

Введите информацию о соединении своей базы данных. Прежде чем продолжите, вам надо скопировать IP-адресы под Helpful Tips справа. Ваш хостинг не даст внешнему IP подключаться к вашей базе данных, если только вы не дадите ему разрешение. Чтобы это сделать вам нужно внести эти адреса в белый список. Просто войдите в профиль cPanel и нажмите по иконке Remote MySQL.

Скопируйте и вставьте IP-адрес, затем щелкните по кнопке add host. Повторите процедуру для всех IP-адресов, выданных вам Codeguard. Как только закончите, вернитесь на экран добавления баз данных Codeguard и нажмите кнопку, чтобы продолжить. Сервис соединится с вашей базой данных. Если у вас их несколько, то вас попросят выбрать одну. Выберите нужную и нажмите кнопку add database. Codeguard начнет делать резервную копию вашей базы данных на свои облачные сервера. После завершения он покажет вашу базу данных и некоторые базовые статистики WordPress.

На этом все, можете себя поздравить, так как вы только что успешно забэкапили свой сайт и базу данных на облачных серверах CodeGuard.

Как восстановить сайт и базу данных из бэкапов Codeguard

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

Вы также можете скачать свои бэкапы себе на копмьютер, чтобы произвести ручное восстановление.

Обзор CodeGuard

Ребята из CodeGuard по праву называют свой проект машиной времени веб-сайтов, так как с помощью FTP и MySQL вы можете сделать резервную копию практически любого сайта. В то время как хранение резервных копий является чисто личным выбором мы советуем вам выбрать последнее, поскольку сайты взламываются сплошь и рядом. Представьте, за одно мгновение потерять весь тот материал, который у вас накопился за годы существования вашего сайта. Поэтому регулярные бэкапы сайта это наиболее разумная инвестиция, когда речь заходит о сайтостроении.

Как добавить кнопку поделиться в Скайпе на WordPress

Ноя 24, 2016/от Vadim Pavlovich

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

Перво-наперво вам надо установить и активировать плагин Skype share. После активации зайдите на страницу Settings > Skype Share button, чтобы отладить плагин.

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

Ручное добавление кнопки в шаблон

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

<script>
// Place this code in the head section of your HTML file 
(function(r, d, s) {
	r.loadSkypeWebSdkAsync = r.loadSkypeWebSdkAsync || function(p) {
		var js, sjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(p.id)) { return; }
		js = d.createElement(s);
		js.id = p.id;
		js.src = p.scriptToLoad;
		js.onload = p.callback
		sjs.parentNode.insertBefore(js, sjs);
	};
	var p = {
		scriptToLoad: 'https://swx.cdn.skype.com/shared/v/latest/skypewebsdk.js',
		id: 'skype_web_sdk'
	};
	r.loadSkypeWebSdkAsync(p);
})(window, document, 'script');

</script>

После этого добавьте следующий код в файлы single.php, loop.php, index.php, page.php, category.php, и archive.php.



<div class='skype-share' data-href='<?php the_permalink(); ?>' data-lang='en-US' data-text='<?php the_title(); ?>' data-style='large' ></div>

Вы можете изменить data-style на large, small, circle, или square. Вы также можете поменять язык на желаемый. Код, приведенный выше, позволит пользователям делиться отдельным постом с заголовком в виде сообщения.

Как добавить поиск Google себе на сайт

Ноя 17, 2016/от Vadim Pavlovich

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

Зачем использовать поиск Googlе в WordPress?

Изначальная система поиска в WordPress не отличается высоким качеством и часто не может дать нужные результаты. Это вынуждает владельцев сайтов искать альтернативы. Есть множество поисковых плагинов для WordPress вроде SearchWP, Swiftype и так далее. Проблема заключается в том, что вам все равно придется их администрировать, а также то, что они будут есть ресурсы вашего сервера. С другой стороны, вы можете пользоваться поиском от Google. Он бесплатный, позволяет ограничить поиск в пределах вашего сайта и его можно запускать прямо с вашего блога. Среди прочих достоинств, которыми может похвастаться поиск от Google, можно отметить скорость, высокий уровень доверия людей к бренду Google, а также отсутствие необходимости как-то поддерживать или обновлять поисковик. Давайте же теперь посмотрим как вы можете установить его себе на сайт.

Способ первый: добавляем Google Search на сайт с помощью плагина

Этот способ проще и больше всего подойдет для новичков, так как позволяет вам добавить поиск себе на сайт без необходимости вносить изменения в файлы шаблонов. Первым делом вам надо установить и активировать плагин WP Google Search. После активации зайдите на страницу Settings > WP Google Search.

Плагин попросит вас указать Google Search Engine id. Для этого зайдите на сайт Google Custom Search и нажмите на ссылку New Search Engine.

Просто укажите адрес своего сайта в поле Sites to Search. Затем вам надо выбрать язык вашего сайта. Наконец нажмите кнопку создать. Google создать ваш личный поисковик и покажет сообщение об успехе. Вам надо щелкнуть по панели управления, чтобы продолжить настройку своего поисковика.

Вас направит в панель управления вашего поисковика. Сперва надо щелкнуть по кнопке Search engine ID и скопировать ID вашего поисковика.

Затем вам надо нажать по Look and Feel. Под вкладкой шаблонов выберите results only.

Как только закончите, нажмите на кнопку сохранения. Теперь можете вернуться на свой сайт. Скопируйте и введите search engine ID, который вы скопировали ранее на странице настроек WP Google Search. Затем зайдите на страницу Appearance > Widgets. Там вы увидите виджет WP Google Search в списке доступных виджетов. Перетащите виджет в сайдбар, где вы хотели бы видеть форму поиска.

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

Способ второй: ручное добавление поиска Google в WordPress

Этот способ требует внесения изменений в файлы вашего шаблона, поэтому он может не подойти для новичков. Если будете им пользоваться, то убедитесь, что сделали резервную копию файлов, прежде чем вносить изменения. Зайдите на сайт Google Custom Search и щелкните по ссылке New Engine Search в панели слева.

Укажите адрес своего сайта в поле Sites to Search. Затем вам надо выбрать язык сайта и нажать кнопку create, чтобы продолжить. Google теперь создаст ваш личный поисковик и покажет сообщение об успехе. Вам надо будет щелкнуть по кнопке Get code.

На следующем экране вы увидите код в текстовой области. Вам надо скопировать этот код. Для следующего шага вам понадобится FTP-клиент. Соединитесь со своим сайтом по FTP и зайдите в папку /wp-content/themes/your-current-theme/. Замените свою текущую папку шаблона названием вашего текущего шаблона.

Найдите в директории шаблона файл searchform.php Скачайте этот файл к себе на компьютер и откройте в каком-нибудь текстовом редакторе вроде Блокнота. Удалите все его содержимое и вставьте скопированный вами ранее код. Сохраните файл и загрузите его обратно на сайт через FTP. После вставки кода зайдите на страницу Appearance > Widgets, чтобы перетащить виджет поиска в ваш сайдбар.

Сохраните настройки и зайдите на сайт, чтобы увидеть поиск в действии.

Настройка цветов и внешнего вида поисковика Google

Зайдите на сайт Google Custom Search и отредактируйте свой поисковик. Вы увидите настройки вашего поисковика. Нажмите на Look and Feel в сайдбаре. У гугла есть свои заготовленные шаблоны, которые вы можете выбрать, но вы также можете настроить их под свой вкус, выбрав собственные шрифты, границы и цвета фона.

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

Как добавлять категории в пользовательские типы постов в WordPress

Ноя 17, 2016/от Vadim Pavlovich

Категории по умолчанию используются только для постов. Однако в некоторых сценариях у вас может возникнуть желание использовать их с пользовательским типом постов. В этой статье мы расскажем вам как это можно сделать.

Способ с плагином

Для начинающих пользователей мы рекомендуем использовать Custom Post Type UI плагин, чтобы создать пользовательский тип постов. Используя этот плагин, у вас есть возможность ассоциировать пользовательский тип постов с любой встроенной или пользовательской таксономией, включая категории. После установки плагина зайдите в CPT UI » Add/Edit Post Types для того, чтобы создать новый пользовательский тип постов или отредактировать существующий.

Прокрутите вниз до Advanced Options и там вы увидите параметр Built in Taxnomies. Отметьте ячейку напротив категорий и сохраните свой тип постов.

Ручное добавление категорий для пользовательского типа постов

Если вы создали пользовательский тип постов, добавив код в файл functions.php, то вам придется изменить этот код, чтобы добавить категорию как поддерживаемую таксономию. Все, что от вас требуется, это добавить эту строчку в аргументы вашего пользовательского типа постов:

‘taxonomies’ => array( ‘category’ ),

Не исключено, что у вас уже есть эта строка в коде с какой-нибудь другой пользовательской таксономией. Если это так, то вам надо просто добавить запятую после нее и добавить категорию:

‘taxonomies’ => array(‘topics’, ‘category’ ),

Вот пример целого кода, где мы создали пользовательский тип постов под названием «фильмы» с поддержкой всех встроенных категорий.

function custom_post_type() {

// Set UI labels for Custom Post Type
	$labels = array(
		'name'                => _x( 'Movies', 'Post Type General Name', 'twentythirteen' ),
		'singular_name'       => _x( 'Movie', 'Post Type Singular Name', 'twentythirteen' ),
		'menu_name'           => __( 'Movies', 'twentythirteen' ),
		'parent_item_colon'   => __( 'Parent Movie', 'twentythirteen' ),
		'all_items'           => __( 'All Movies', 'twentythirteen' ),
		'view_item'           => __( 'View Movie', 'twentythirteen' ),
		'add_new_item'        => __( 'Add New Movie', 'twentythirteen' ),
		'add_new'             => __( 'Add New', 'twentythirteen' ),
		'edit_item'           => __( 'Edit Movie', 'twentythirteen' ),
		'update_item'         => __( 'Update Movie', 'twentythirteen' ),
		'search_items'        => __( 'Search Movie', 'twentythirteen' ),
		'not_found'           => __( 'Not Found', 'twentythirteen' ),
		'not_found_in_trash'  => __( 'Not found in Trash', 'twentythirteen' ),
	);
	
// Set other options for Custom Post Type
	
	$args = array(
		'label'               => __( 'movies', 'twentythirteen' ),
		'description'         => __( 'Movie news and reviews', 'twentythirteen' ),
		'labels'              => $labels,
		'supports'            => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'revisions', 'custom-fields', ),
		'hierarchical'        => false,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'show_in_nav_menus'   => true,
		'show_in_admin_bar'   => true,
		'menu_position'       => 5,
		'can_export'          => true,
		'has_archive'         => true,
		'exclude_from_search' => false,
		'publicly_queryable'  => true,
		'capability_type'     => 'page',
		
		// This is where we add taxonomies to our CPT
		'taxonomies'          => array( 'category' ),
	);
	
	// Registering your Custom Post Type
	register_post_type( 'movies', $args );

}

/* Hook into the 'init' action so that the function
* Containing our post type registration is not 
* unnecessarily executed. 
*/

add_action( 'init', 'custom_post_type', 0 );

Отображение нескольких типов постов на странице категории

По умолчанию страницы категории на сайте WordPress отображают стандартный тип постов. Если хотите, чтобы ваш тип постов отображался бы на той же странице категорий, что и посты по умолчанию, то вам надо добавить следующий код в файл functions.php:

add_filter('pre_get_posts', 'query_post_type');
function query_post_type($query) {
  if( is_category() ) {
    $post_type = get_query_var('post_type');
    if($post_type)
        $post_type = $post_type;
    else
        $post_type = array('nav_menu_item', 'post', 'movies'); // don't forget nav_menu_item to allow menus to work!
    $query->set('post_type',$post_type);
    return $query;
    }
}

Не забудьте поменять movies на название своего пользовательского типа постов.

Как исправить ошибку WordPress “Upload: Failed to Write File to Disk”?

Ноя 16, 2016/от Vadim Pavlovich

Вам выдает ошибку “Upload: Failed to write file to disk”, когда пытаетесь загрузить файлы в WordPress? Эта распространенная ошибка может быть очень хлопотной для новичков. В этой статье мы покажем как можно от нее избавиться.

Что служит причиной этой ошибки?

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

• WordPress failed to write to disk
• WordPress has failed to upload due to an error failed to write file to disk
• Unable to create directory wp-content/uploads/2016/03. Is its parent directory writable by the server?

Исправляем ошибку Upload Failed to Write to Disk

Сперва вам надо соединиться с сайтом посредством FTP-клиента. В этой инструкции мы будем использовать клиент Filezilla. Как только подсоединитесь, вам надо щелкнуть правой кнопкой мыши по папке wp-content и выбрать права доступа.

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

Вам надо ввести 755 в поле Numeric value. После этого вам надо отметить ячейку возле Recurse into subdirectories. Наконец вам надо щелкнуть по Apply to directories only. Нажмите по кнопке ОК, чтобы продолжить. Ваш клиент теперь установит доступ папки 755 и применит ко всем подпапкам внутри wp-content. Это также включает папку uploads, где хранятся все ваши изображения. Вам также надо убедиться, что доступ к индивидуальным файлам в вашей папке wp-content настроен должным образом. Снова нажмите правой кнопкой мыши по папке wp-content и выберите доступ к файлам. В этот раз мы поменяем права доступа к файлам. Введите 644 в числовом поле и отметьте ячейку возле Recurse into subdirectories. Наконец нажмите по опции Apply to files only. Нажмите на кнопку ОК, чтобы продолжить. Теперь ваш FTP-клиент настроит доступ к файлам на 644 для всех файлов внутри папки wp-content.

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

Как изменить цвет адресной строки в мобильном браузере Android

Ноя 16, 2016/от Vadim Pavlovich

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

Зачем делать так, чтобы цвет адресной строки соответствовал вашему сайту в мобильном браузере?

Многие шаблоны WordPress поддерживают мобильные устройства. Однако это все равно выглядит всего лишь как сайт. Изменение цвета адресной строки создает ощущение, будто человек использует приложение. Все это приводит к более приятному опыту использования, продажам и конверсиям. Однако заметитьте, что этот трюк работает только для браузера Google Chrome, работающего на устройствах Android и использующих Lollipop или более последние версии операционной системы.

Просто добавьте следующий код в файл header.php вашей дочерней темы прямо перед закрывающим тегом </head>.

<meta name=»theme-color» content=»#ff6600″ />

Эта строчка это HTML мета-тег, который использует Google Chrome на Андроиде, чтобы поменять цвет вашей адресной панели в мобильном браузере. У поля контента есть hex код для цвета, который вы хотите использовать в качестве фонового. Не знаете как получить этот код? Вы можете его получить, используя любой графический редактор вроде Adobe Photoshop, Gimp, Paint и других.

Вы также можете выбрать цвет с помощью онлайновых сервисов по выбору цвета в HTML. Если хотите выбрать цвет из веб-страницы, то можете использовать расширение браузера под названием ColorZilla.

Как настроить Facebook Instant Articles в WordPress: пошаговое руководство

Ноя 12, 2016/от Vadim Pavlovich

Instant Articles это функция Facebook, которая позволяет грузить ваш контент в 10 раз быстрее, используя адаптированный мобильный формат. В нем используется та же технология, что и в приложениях для телефонов. Многие популярные сайты вроде BuzzFeed, TechCrunch, Mashable и другие используют эту фишку на своих сайтах. Отличить статьи от обычных можно благодаря иконке с молнией.

Преимущества и недостатки Facebook Instant Articles

Как и у всего остального, у Facebook Instant Articles есть свои преимущества и недостатки.

Преимущества:

— быстрое время загрузки делает чтение более приятным
— благодаря скорости, люди будут чаще делиться вашим контентом с друзьями
— доступ к монетизации
— увеличенный Facebook Page Reach
— новый трафик на сайте за счет огромной аудитории соцсети

Недостатки:

— пользователи не увидят ваших виджетов, формулоров для e-mail’ов, сайдбары и так далее, поскольку кроме самой статьи все остальное будет скрыто
— у вас может упасть доход от рекламы, так как Facebook накладывает ограничения на количество рекламы
— Facebook ограничивает количество изображений и видео в статьях
— многие шорткоды и пользовательские поля будут недоступны в статьях

Выбирая пользоваться или нет Facebook Instant Articles, надо основываться на типе контента и ваших бизнес-целях. Если у вас новостной сайт, то есть смысл попробовать.

Что требуется для того, чтобы включить Facebook Instant Articles в WordPress?

— Facebook-страница вашего сайта
— Страница приложения Facebook (позже в этой статье мы объясним вам как ее можно сделать)
— 10 и более статей на сайте
— плагин Instant Articles (позже в статье мы разберем этот вопрос)

Регистрация в Facebook Instant Articles

Сперва вам надо зайти на сайт Facebook Instant Articles и щелкнуть по кнопке регистрации.

Теперь Facebook попросит выбрать страницу вашего сайта. Затем щелкните, что вы согласны с правилами и ажмите на Access Instant Articles Tools.

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

Прокрутите к секции Tools и нажмите Claim your URL.

Вы увидите фрагмент кода, который вам нужно скопировать и вставить в область вашего сайта. Есть два способа это сделать. Вы можете отредактировать файл header.php в дочернем шаблоне и вставить код перед тегом.

Однако если вы не пользуетесь дочерним шаблоном, то вы можете использовать плагин Insert Headers and Footers. После активации плагина зайдите на страницу Settings – Insert Headers and Footers и вставьте код в секцию header.

Добавив код к себе на сайт, вам надо перейти обратно к инструментам публикаций на Фейсбуке. Добавьте адрес своего сайта перед кодом, который вы недавно копировали и нажмите на кнопку Claim your url.

Следующим шагом будет добавление RSS-фида Instant Articles себе на сайт. Для этого просто установите и активируйте плагин Instant Articles for WP. После активации плагин сгенерирует фид мгновенных постов для вашего WordPress-сайта. Вы можете найти фид, введя feed/instant-articles после адреса вашего сайта.

Скопируйте адрес вашего фида и вернитесь назад к инструментам Фейсбука. Прокрутите вниз пока не найдете Production RSS Feed.

Вставьте адрес своего фида и нажмите кнопку сохранения. Фейсбук должен показать вам успешное сообщение.

Настройка плагина Facebook Instant Articles

Вы заметите, что после активации плагина у вас в меню появился новый пункт под названием Instant Articles. Щелкнув по нему, вы попадете на страничку настроек плагина.

Этот плагин требует APP ID и секретные ключи для его активации. Для этого вам надо зайти на сайт для разработчиков Facebook, щелкнуть по выпадающему меню возле My Apps в верхнем правом углу экрана возле вашего профильного изображения.

Появится окошко, в котором надо щелкнуть по website.

Откроется мастер быстрой настройки, в котором надо будет указать название вашего приложения для Facebook. Можете использовать любое название, лишь бы оно помогало идентифицировать само приложение. Нажмите на кнопку Create New Facebook App ID, чтобы продолжить.

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

Затем нажмите на Create App IDD. Окошко исчезнет и Facebook создаст для вас приложение. На странице быстрого старта вы увидите информацию о том, как пользоваться приложением. Вам надо всего лишь пролистать вниз до секции Tell us about your website.

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

Вас перенаправит в админку только что созданного приложения, где вы увидите ваше App ID и секретный ключ (надо будет нажать кнопку Show, чтобы его увидеть).

Прежде чем вы скопируете эти ключи, вам сперва нужно сделать свое приложение публичным. Щелкните по ссылке App Review в меню слева.

На следующем экране вы увидите, что ваше приложение находится в стадии разработки. Щелкните по тумблеру, чтобы перевести его в Yes и сделать ваше приложение публичным. Теперь щелкните по ссылке слева, чтобы перейти в панель настроек своего приложения и скопируйте свое App ID и секретные ключи. Вернитесь к странице настроек вашего плагина Instant Articles и вставьте туда App ID и секретные ключи.

Щелкните по кнопке Продолжить. Теперь на странице настроек плагина вы увидите кнопку для входа с помощью Facebook.

Нажав ее, вы попадете на Facebook, где вас попросят дать приложению разрешение доступа к информации вашего профиля. Как только вы дадите это разрешение, вас перенаправит обратно на сайт WordPress. Щелкните по выпадающему меню Select Page, чтобы выбрать свою страничку в Facebook.

Ваш сайт готов к Instant Articles, но осталось еще два шага.

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

Посетите свою страницу в Facebook и из админпанели нажмите Publishing Tools. Слева щелкните по ссылке Configuration.

Пролистайте вниз до Tools и щелкните по вкладке Style. Вы увидите, что Facebook уже добавил стиль по умолчанию для вашего сайта. Нажмите на него, чтобы изменить и у вас откроется окошко, в котором вы можете загрузить логотип своего вебсайта. Facebook требует изображения минимум 690 на 132 пикселя.

Добавление фида Instant Articles

Прежде чем отправлять фид на рассмотрение вам нужно убедиться, что у вас в нем есть по меньшей мере 10 статей. Если вы запостили уже более десяти статей на свой сайт, но фид не показывает ни одну из них, тогда вам надо просто отредактировать последние десять постов и нажать на кнопку обновления. Как только убедитесь, что у вас в фиде есть 10 статей, можете добавлять их на рассмотрение Фейсбука. Зайдите на свою страницу в Фейсбуке и нажмите на Publishing Tools из админпанели. После этого нажмите на ссылку Configuration под Instant Articles в левой части меню. Ищите на этой страницеStep 2: Submit for Review.

Если все в порядке, то вы должны увидеть кнопку Submit for Review. Нажмите ее, чтобы отправить фид на рассмотрение. На этом все, Instant Articles станет доступным для вашего сайта как только команда Фейсбука рассмотрит и подтвердит ваш фид.

Советы по устранению проблем

Facebook требует, чтобы ваш фид Instant Articles подходил под требования, описанные на их сайте разработчиков. За это отвечает ваш плагин Instant Articles, однако в зависимости от шаблонов или плагинов, которые вы используете у себя на сайте, у вас могут возникать определенные ошибки или предупреждения. Простейший способ от них избавиться это редактирование поста и прокручивание вниз к мета-панель Facebook Instant Articles под редактором постов.

Большинство ошибок вызваны плагинами или шаблонами, которые добавляют в ваши посты контент, который не подходит под правила плагина Instant Articles. Вы можете изменить эти правила, но поскольку это требует определенных навыков, куда проще будет просто настроить сами плагины, чтобы они не добавляли лишний контент в ваши посты.

Неправильные адреса

Если вы постоянно получаете ошибку Empty Feed, когда отправляете свой фид Instant Articles, то вам стоит проверить адрес, который вы пытаетесь добавить.

http://www.example.com/feed/instant-articles
http://example.com/feed/instant-articles

Как видите, это два разных адреса и в зависимости от настройки вашего WordPress, ввод не того адреса может привести к ошибке 404. Если вы до сих пор видите эту ошибку, то постарайтесь обновить последние десять постов на свой сайте. Это изменит дату их изменения и добавит в фид.

9_sovetov_po_marketingu_v_linkedin_ot_professionalov_1425997792244_image

Как автоматически публиковать посты WordPress в LinkedIn

Ноя 12, 2016/от Vadim Pavlovich

LinkedIn это социальная сеть профессионалов и очень сильная платформа, которая может принести трафик на ваш сайт. В этом посте мы разберем как автоматически публиковать свои посты WordPress в LinkedIn.

Способ первый: автоматическая публикация постов в LinkedIn с помощью IFTTT

IFTTT это сокращение для If This Then That. Это сервис, который позволяет добавлять онлайн аккаунты и заставляет их работать на вашу пользу. Первым делом вам надо завести аккаунт IFTTT, зарегистрировавшись на их сайте.

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

Процесс, созданный IFTTT, называется рецептом. Нажмите на ссылку My Recipes в самом верху, чтобы создать свой первый рецепт.

Это страница, где будут отображены все ваши рецепты. Просто нажмите на кнопку Create a recipe, чтобы продолжить.

Рецепт IFTTT состоит из двух частей. Первая часть называется This, которая запускает сам рецепт. Нажмите на this, чтобы начать. IFTTT покажет вам каналы, которые вы можете использовать в качестве рычагов. Вам нужно ввести WordPress в поле поиска и выбрать его в качестве канала.

IFTTT предложит вам соединиться с сайтом WordPress. Щелкните на кнопку, чтобы продолжить. Появится окно, в котором вас попросят предоставить информацию о сайте.

Вам нужно ввести адрес своего сайта, ваше имя пользователя и пароль, а затем нажать на кнопку Connect для того, чтобы продолжить. Теперь IFTTT попытаеся соединиться с вашим сайтом и в случае удачи покажет окно успеха. Затем от вас потребуется выбрать доступные рычаги. Вы можете запускать рычаг каждый раз, когда новый пост появляется у вас на сайте или когда пост появляется в определенной категории или с определенным тегом. Сейчас мы будем использовать Any new post в качестве нашего рычага.

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

Первым делом вам надо будет выбрать канал, в котором все будет происходить. Найдите и выберите LinkedIn в качестве канала.

Сайт попросит вас соединиться с вашим аккаунтом в LinkedIn. Введите свои данные для входа и нажмите кнопку Ok, I’ll allow.

Вы должны увидеть сообщение об успехе. Щелкните на кнопку done, чтобы закрыть окно и на кнопку continue, после чего вам потребуется выбрать действие. Вы можете делиться апдейтом в профиле LinkedIn или же вы можете делиться ссылкой.

Нажмите на share an update в профиле LinkedIn, чтобы продолжить. Сервис попросит вас выбрать поля и автоматически покажет заголовок вашего поста и поля адреса в статусном поле.

Просто щелкните по кнопке create action, чтобы завершить свой рецепт. Сервис покажет итог вашего рецепта. Вам надо щелкнуть по create recipe, чтобы ваш рецепт заработал.

После этого ваш рецепт будут работать и автоматически мониторить ваш сайт на предмет новых постов, а затем шейрить их в качестве обновления статуса в профиле LinkedIn. Расшаривая пост, LinkedIn будет автоматически использовать featured image вашего поста в качестве эскиза.

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

Способ второй: автоматически публикуйте посты WordPress на LinkedIn, используя плагин

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

На странице настроек вы увидите две ссылки с вашего сайта и ссылку создания приложения LinkedIn. Для работы этого плагина вам понадобится создать приложение LinkedIn, чтобы получить клиентский и секретный API ключи. Просто посетите сайт разработчиков LinkedIn и нажмите на кнопку create application.

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

Напоследок вам надо указать адрес своего сайта, электронный ящик и телефонный номер. Отметьте ячейку, что вы согласны с условиями использования и нажмите на кнопку Submit. LinkedIn создаст приложение и вы попадете в его админку. Там вы найдете ваш клиентский ID и секретные ключи.

Но вам все равно нужно создать авторизованный адрес редиректа в админке вашего приложения. Пролистайте немного вниз и вы найдете поле OAuth 2.0 Authorized Redirect URLs. Скопируйте и вставьте второй адрес из страницы настроек плагина и щелкнете на кнопку Add.

Не забудьте щелкнуть по кнопке update, чтобы сохранить настройки. Теперь просто скопируйте и вставьте ключи Client ID и Client Secret со страницы своего приложения в страницу настроек плагина. После этого щелкните по кнопке сохранения. Теперь ваш сайт готов к соединению с аккаунтом LinkedIn. Щелкните по кнопке Authorize в верхнем правом углу страницы с настройками плагина.

Это приведет вас на сайт LinkedIn, где вас попросят разрешить последующий доступ к приложению, которое вы создали ранее.

Введите данные входа в свой аккаунт LinkedIn и нажмите на кнопку Allow access. Теперь LinkedIn перенаправит вас на страницу настроек плагина, где вы увидите сообщение об успехе. Кнопка авторизации поменяется на кнопку реавторизации. На этом все, плагин LinkedIn Auto Publish готов автоматически шарить ваши посты в профиль LinkedIn. Вы также найдете новое мета-поле на экране вашего редактора постов. С его помощью вы можете отключать или менять настройки шаринга для каждого поста.