WordPress Туториалы

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

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

WordPress

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

WordPress

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

Если вы хотите вручную добавить кнопку в файлы шаблона, то вам надо добавить следующий скрипт в начале своего файла. Вы можете сделать это либо напрямую редактируя файл 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. Вы также можете поменять язык на желаемый. Код, приведенный выше, позволит пользователям делиться отдельным постом с заголовком в виде сообщения.


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


Что такое SSL и Let’s Encrypt? Каждый пользователь Интернета ежедневно делится огромными объемами личной информации. Мы делаем это, когда совершаем покупки онлайн, создаем аккаунты, заходим на различные сайты и так далее. Если это не достаточно зашифровано, то эта информация может быть выслежена и украдена. И здесь на сцену выходит SSL. Он предлагает технологию шифрования, которая делает безопасным соединением между браузером и сервером. Каждый сайт использует уникальный сертификат SSL в целях опознавания. Если сервер притворяется, что использует HTTPS, но его сертификат не соответствует, то большинство современных браузеров предупредят пользователя, чтобы он не соединялся с этим ресурсом.

WordPress

Ранее единственным способом защиты SSL был платный SSL-сертификат. Let’s Encrypt это бесплатный открытый сертификат, который предлагает SSL для широкой аудитории. Это проект от Internet Research Group, получающий поддержку от большого количества крупных компаний, включая Google, Facebook, Sucuri, Mozilla, Cisco и других.

WordPress

Простой способ – использование хостинга, который предлагает встроенный бесплатный SSL

C ростом популярности Let’s Encrypt многие хостинги WordPress уже сразу предлагают встроенную настройку SSL. Следовательно, простейшим способом получения SSL будет регистрация на таких хостингах.

Настройка бесплатного SSL с помощью Let’s Encrypt на SiteGround

SiteGround является одним из самых надежных и известных хостинг-компаний, предлагающих встроенную поддержку бесплатного SSL. Для того, чтобы включить бесплатный SSL, просто зайдите в cPanel и пролистайте до раздела безопасности, где вам надо будет щелкнуть по иконке Let’s Encrypt.

WordPress

Это откроет окно установки Let’s Encrypt. Вам надо будет выбрать доменное имя, которое вы хотите использовать с бесплатным SSL, а также указать верный адрес электронной почты.

WordPress

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

WordPress

Можете поздравить себя, вы только что успешно встроили бесплатный SSL Let’s Encrypt себе на сайт. Однако ваш сайт еще не готов использовать его. Первым делом вам понадобиться обновить свои адреса WordPress и исправить проблемы с небезопасным контентом. Не волнуйтесь, мы объясним как это сделать в шаге Обновление адресов.

Установка бесплатного SSL с помощью Let’s Encrypt на DreamHost

DreamHost это еще один популярный хостинг WordPress, который предлагает встроенную интеграцию для настройки бесплатного SSL на любом домене. Сперва вам надо зайти в админку Dreamhost и под меню Domains щелкнуть по Secure hosting.

WordPress

На этой странице вам надо щелкнуть по кнопке Add Secure Hosting. Dreamhost теперь попросит у вас выбрать домен и внизу у вас будет возможность добавить бесплатный сертификат от Let’s Encrypt. Вам надо убедиться, что эта ячейка отмечена.

WordPress

На усмотрение можете выбрать уникальный IP-адрес для своего доменного имени. Это необязательно, однако улучшит совместимость со старыми версиями Internet Explorer на Windows XP. Щелкните по Add Now, чтобы завершить настройку и DreamHost начнет настройку вашего бесплатного сертификата SSL. В итоге вы должны увидеть подобное сообщение:

WordPress

Вы успешно добавили бесплатный сертификат SSL с помощью Let’s Encrypt себе на хостинг. Но вам до сих пор надо обновить адреса WordPress, чтобы исправить ошибки с безопасностью контента, поэтому перейдите к этому шагу далее в статье.

Установка Let’s Encrypt бесплатный SSL на другие хостинги

Бесплатный SSL от Let’s Encrypt это основанный на домене SSL-сертификат. Это означает, что если у вас есть домен, то вы можете добавить его на любой хостинг. Однако если ваш хостинг не поддерживает простую интеграцию как SiteGround или DreamHost, то вам надо будет пройти через некоторую процедуру, длина которой разнится от хостинга к хостингу. Большинство компаний имеют документацию, объясняющую как можно это сделать. Вы также можете связаться с командой техподдержки за более подробными инструкциями. Bluehost, являющийся одним из официальных WordPress-хостингов, предлагает SSL третьей стороны для ваших доменов, которые вы размещаете у них на хостинге.

Обновление адресов WordPress после настройки SSL

После настройки бесплатного сертификата SSL с помощью Let’s Encrypt следующим шагом будет переезд адреса с HTTP на HTTPS. Обычный сайт без сертификата использует протокол HTTP с соответствующим префиксом в адресной строке:

http://www.example.com

Защищенные сайты с сертификатами SSL используют протокол HTTPS. Это означает, что их адреса будут выглядеть подобным образом:

https://www.example.com

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

Для чистого сайта

Если вы работаете с совершенно новым сайтом, то вам надо просто зайти в админпанель WordPress и щелкнуть по настройкам. Там вам необходимо обновить поля с адресом WordPress и Site URL, чтобы использовать https.

https://www.example.com

Для уже работающих сайтов

Если ваш сайт уже какое-то время находится в Интернете, то велики шансы, что он уже был проиндексирован поисковыми системами. Пользователи могли сохранить его в виде HTTP, поэтому вам надо удостовериться, что весь трафик перенаправляется на адрес с https. Первым делом вам надо установить и активировать плагин Really Simple SSL. Плагин автоматически обнаружит ваш SSL-сертификат и настроит сайт на его использование. В большинстве случаев вам больше не придетс яничего менять, так как плагин также починит проблемы с небезопасным контентом.

Обновление настроек Google Analytics

Если вы установили на свой сайт Google Analytics, то вам надо обновить его настройки и добавить свой новый адрес на https. Зайдите в свою панель Google Analytics и щелкните по Admin в верхнем меню. Затем щелкните по Property settings под вашим сайтом. Там вы увидите опцию дефолтного URL. Щелкните по http и выберите https.

WordPress

Не забудьте сохранить настройки.


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


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

Когда и зачем нужна панель с биографией автора

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

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

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

Многие владельцы сайтов желают отображать информацию об авторах в конце поста. Сперва установите и активируйте плагин Guerilla`s Author Box. Каждый автор на вашем сайте должен будет добавить свою информацию и ссылки на профили. Они могут это сделать, зайдя в аккаунт WordPress и щелкнув по ссылке Profile из админки Вордпресс.

WordPress

Будучи администратором сайта, вы можете заполнить эту информацию лично, редактируя каждый профиль пользователя. Для этого вам надо будет зайти на страницу Users > All User и щелкнуть по ссылке edit под каждым пользователем, чей профиль вы желаете отредактировать.

WordPress

Теперь можете зайти в любой пост WordPress у себя на сайте и вы увидите авторскую инфо-панель внизу поста.

WordPress

Плагин использует стандартную систему аватаров под названием Gravatar. Вашим авторам надо будет добавить их фото на сайт Gravatar.

Настройка отображения панель с инофрмацией об авторе

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

.guerrillawrap {
    background: #ECECEC;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    border: 1px solid #d0d0d0;
    float: left;
    padding: 2%;
    width: 100%;
}

.guerrillagravatar {
    float: left;
    margin: 0 10px 0 0;
    width: 10%;
}

.guerrillagravatar img { 
border-radius:50%;
border:1 px solid #eee;
}

.guerrillatext {
    float: left;
    width: 84%;
}

.guerrillatext h4 {
    font-size: 20px;
    line-height: 20px;
    margin: 0 0 0 0;
    padding: 0;
}

.guerrillatext p {
    margin: 10px 0 15px 0;
    font-style: italic;
}

.guerrillasocial {
    float: left;
    width: 100%;
}

.guerrillasocial a {
    border: 0;
    margin-right: 10px;
}

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

WordPress

Способ второй: информация об авторе в виджете сайдбара для единичных постов

Способ выше неплох, если вы хотите, чтобы информация об авторе отображалась под постами. Однако кому-то из вас может захотеться, чтобы биография автора отображалась в сайдбаре или любой области виджетов. Сперва вам понадобится установить и активировать плагин Meks Smart Author Widgets. После его активации зайдите на страницу Appearance – Widgets. Вы увидите Meks Smart Author в списке доступных виджетов. Добавьте его в сайдбар, где вы хотите отображать информацию об авторе.

WordPress

У виджета есть куча настроек. Самая важная из них, возле которой вам необходимо отметить ячейку это возле Automatically detect author.

WordPress

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

WordPress

Способ третий: добавляем инфо-панель авторов при помощи кода

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

function wpb_author_info_box( $content ) {

global $post;

// Detect if it is a single post with a post author
if ( is_single() && isset( $post->post_author ) ) {

// Get author's display name 
$display_name = get_the_author_meta( 'display_name', $post->post_author );

// If display name is not available then use nickname as display name
if ( empty( $display_name ) )
$display_name = get_the_author_meta( 'nickname', $post->post_author );

// Get author's biographical information or description
$user_description = get_the_author_meta( 'user_description', $post->post_author );

// Get author's website URL 
$user_website = get_the_author_meta('url', $post->post_author);

// Get link to the author archive page
$user_posts = get_author_posts_url( get_the_author_meta( 'ID' , $post->post_author));
 
if ( ! empty( $display_name ) )

$author_details = '

About ' . $display_name . '

';

if ( ! empty( $user_description ) )
// Author avatar and bio

$author_details .= '

' . get_avatar( get_the_author_meta('user_email') , 90 ) . nl2br( $user_description ). '

';

$author_details .= '

<a href="'. $user_posts .'">View all posts by ' . $display_name . '</a>';  

// Check if author has a website in their profile
if ( ! empty( $user_website ) ) {

// Display author website link
$author_details .= ' | <a href="' . $user_website .'" target="_blank" rel="nofollow">Website</a>

';

} else { 
// if there is no author website then just close the paragraph
$author_details .= '

';
}

// Pass all this info to post content  
$content = $content . '

<footer class="author_bio_section" >' . $author_details . '</footer>


';
}
return $content;
}

// Add our function to the post content filter 
add_action( 'the_content', 'wpb_author_info_box' );

// Allow HTML in author bio section 
remove_filter('pre_user_description', 'wp_filter_kses');

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

.author_bio_section{
background: none repeat scroll 0 0 #F5F5F5;
padding: 15px;
border: 1px solid #ccc;
}

.author_name{
font-size:16px;
font-weight: bold;
}

.author_details img {
border: 1px solid #D8D8D8;
border-radius: 50%;
float: left;
margin: 0 10px 10px 0;
}

Вот как панель с информацией об авторе выглядела на нашем демо-сайте.

WordPress


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


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

Что такое Shortcake?

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

[themebutton url=”http://example.com” title=”Download Now” color=”purple” target=”newwindow”]

Shortcake одновременно является плагином и обещанной в будущем функцией Вордпресс. Он предлагает решить проблему, добавив пользовательский интерфейс, что сделает использование шорткодов намного более простой задачей.

WordPress

Приступаем

Сначала вам необходимо установить и активировать плагин Shortcake (Shortcode UI). Вам теперь понадобится шорткод, который принимает несколько параметров для ввода. В рамках данной статьи мы будем использовать простенький шорткод, который позволяет пользователям вставлять кнопку в их посты и страницы. Вот простой код шорткода, который вы можете использовать, добавив его в файл functions вашего шаблона.

add_shortcode( 'cta-button', 'cta_button_shortcode' );

function cta_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="cta-button"><a href="' . $url . '">' . $title . '</a></span>';
}

Вам также понадобится CSS-стиль для этой кнопки. Вы можете использовать следующий стиль в таблице стилей вашего шаблона.

.cta-button {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
background-color: #50A7EC;
}

Вот как пользователи будут использовать этот шорткод в их постах и страницах:

[cta-button title=”Download Now” url=”http://example.com”]

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

Регистрация пользовательского интерфейса с помощью Shortcake

API Shortcake позволяет вам зарегистрировать пользовательский интерфейс вашего шорткода. Вам надо будет указать какие атрибуты использует ваш шорткод, типы полей ввода и какие типы постов покажут пользовательский интерфейс шорткода. Вот пример кода, который мы будем использовать. Можете скопировать его в файл functions.

shortcode_ui_register_for_shortcode(

/** Your shortcode handle */
'cta-button',

/** Your Shortcode label and icon */
array(

/** Label for your shortcode user interface. This part is required. */
'label' => 'Add Button',

/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-lightbulb',

/** Shortcode Attributes */
'attrs'          => array(

/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/

array(

/** This label will appear in user interface */
'label'        => 'Title',

/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',

/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',

/** Add a helpful description for users
'description'  => 'Please enter the button text',
),

/** Now we will define UI for the URL field */

array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),
),
),

/** You can select which post types will show shortcode UI */
'post_type'     => array( 'post', 'page' ), 
)
);

Теперь можете увидеть пользовательский интерфейс шорткода в действии, редактируя пост. Просто щелкните по кнопке Add Media над редактором постов. У вас появится загрузчик медиа, где вы обнаружите новый элемент под названием Insert Post Element в левой панели. Щелчок по ней отобразит вам кнопку для вставки вашего кода.

WordPress

Щелчок по иконке с лампочкой покажет вам пользовательский интерфейс шорткода.

WordPress

Добавление шорткода с помощью нескольких вводов

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

add_shortcode( 'mybutton', 'my_button_shortcode' );

function my_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'color' => 'blue',
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="mybutton ' . $color . '-button"><a href="' . $url . '">' . $title . '</a></span>';
}

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

.mybutton {
    padding: 10px;
    font-size: 18px;
    border: 1px solid #FFF;
    border-radius: 7px;
    color: #FFF;
}

.blue-button  {
    background-color: #50A7EC;
}
.orange-button { 
background-color:#FF7B00;
} 

.green-button { 
background-color:#29B577;
}

Вот как будут выглядеть наши кнопки:

WordPress

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

shortcode_ui_register_for_shortcode(

/** Your shortcode handle */
'mybutton',

/** Your Shortcode label and icon */
array(

/** Label for your shortcode user interface. This part is required. */
'label' => 'Add a colorful button',

/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-flag',

/** Shortcode Attributes */
'attrs'          => array(

/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/

array(

/** This label will appear in user interface */
'label'        => 'Title',

/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',

/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',

/** Add a helpful description for users */
'description'  => 'Please enter the button text',
),

/** Now we will define UI for the URL field */

array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),

/** Finally we will define the UI for Color Selection */ 
array(
'label'		=> 'Color',
'attr'      => 'color',

/** We will use select field instead of text */
'type'		=> 'select',
    'options' => array(
        'blue'		=> 'Blue',
        'orange'	=> 'Orange',
        'green'		=> 'Green',
    ),
),

),

/** You can select which post types will show shortcode UI */
'post_type'     => array( 'post', 'page' ), 
)
);

На этом все, теперь вы можете редактировать пост или страницу и щелкнуть по кнопке Add Media. Вы обнаружите свой недавно добавленный шорткод под Insert Post Elements.

WordPress

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

WordPress


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


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

Шаг нулевой: начинаем

Успех вашего сайта на WordPress зависит от хостинга, который вы используете. Если вы уже пользуетесь хостингом GoDaddy, то можете использовать его и для своего сайта. Если вы хотите попробовать другой хостинг, то мы рекомендуем вам Bluehost, который является официальным партнером WordPress и одной из самых крупных хостинг-компаний в мире.

Шаг первый: подготовки к переезду

У WordPress есть инструменты для импортирования контента со многих сервисов вроде Blogger, Tumblr, Livejournal и так далее. Однако у него нет возможности импорта конструкторов сайтов. По этой причине вам придется сделать бэкап сайта самостоятельно. Это может быть немного затратным по времени, в зависимости от того, сколько контента размещено у вас на сайте. Если у вас всего несколько страниц, то можете сделать резервную копию, просто сохраняя изображения и копируя текст в текстовые файлы у себя на компьютере. Вы также можете сохранить каждую страницу, нажав сочетание Ctrl+S у себя на клавиатуре. Откроется окно сохранения, в котором вам надо выбрать «Страницу целиком” в качестве формата.

WordPress

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

WordPress

Проблема в том, что конструктор сайтов GoDaddy и его шаблоны хранят свои файлы на разных CDN серверах. Названия и адреса этих серверов могут разниться от сайта к сайту. Это затрудняет скачивание всех файлов изображений. Однако если на вашем сайте большая часть контента это текст и вы готовы пожертвовать картинками, то HTTrack это самый быстрый способ скопировать ваш сайт. Как только вы отключите конструктор сайта, вы не сможете вернуться на сайт. Так что, не спешите и убедитесь, что у вас есть бэкап всех данных вашего сайта. К этому времени вы уже наверняка задаетесь вопросом почему нет более простого способа. Это потому, что GoDaddy не хочет, чтобы вы с него уходили.

Резервная копия вашей структуры ссылок

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

Шаг второй: мигрируем сайт на хостинг GoDaddy

Этот шаг думан только для тех, кто будет использовать хостинг GoDaddy для своего сайта на WordPress. Если вы используете другой хостинг, то можете пропустить этот шаг. Если хотите использовать GoDaddy для своего сайта на Вордпресс, то вам надо сперва отключить сервис конструктора сайтов, иначе вы просто не сможете установить WordPress. Просто зайдите в свой аккаунт GoDaddy и щелкните по своему имени пользователя в верху панели. Вы увидите выпадающее меню, где сможете щелкнуть по Manage Website Builder.

WordPress

Это отобразит ваш аккаунт. Вам надо нажать по кнопке Options возле вашего доменного имени.

WordPress

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

WordPress

Теперь ваш конструктор сайтов будет деактивирован и вы сможете установить WordPress. На полную деактивацию может уйти около часу.

Добавляем хостинг к домену

Теперь, когда ваш домен свободен от конструктора сайтов GoDaddy, вам все равно нужно привязать к нему хостинг. Нажмите по веб-хостингу под управлением аккаунта и затем нажмите по кнопке Manage.

WordPress

Это вызовет панель cpanel вашего хостинга. Вам надо прокрутить до раздела доменов и нажать на Addon Domains.

WordPress

Теперь вводите имя домена. Поля субдомена и document root будут заполнены автоматически.

WordPress

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

Шаг третий: привязка домена к другому хостингу

Этот шаг написан для тех, кто зарегистрировал свой домен с GoDaddy и хотят использовать его вкупе с другими хостингами вроде Bluehost или Siteground. Залогиньтесь в свой аккаунт GoDaddy и щелкните по имени пользователя в панели сверху. У вас появится выплывающее меню, в котором вы сможете управлять своими доменами.

WordPress

Выберите свой домен из списка и нажмите по кнопке Nameservers вверху и выберите nameservers.

WordPress

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

WordPress

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

WordPress

Щелкните по кнопке ОК и затем по кнопке сохранения настроек. Учтите, что изменения DNS занимают до 24 часов. Теперь, когда ваш домен привязан к новому сайту, вы можете перейти к следующему шагу.

Шаг четвертый: установка WordPress

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

Шаг пятый: импорт контента с сайтостроителя

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

Шаг шестой: настройка редиректов

Если у вас есть список ссылок со старого сайта, то можете приступить к настройке редиректов. Первым делом вам надо установить и активировать плагин Simple 301 Redirects. После его активации зайдите на страницу Settings > 301 Redirects. Введите свой старый адрес в поле Request и введите новый адрес WordPress в графу Destination.

WordPress

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


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


Aweber является одним из самых популярных сервисов по e-mail маркетингу. В этой статье мы объясним как соединить его с WordPress.

Почему списки e-mail’ов так важны?

Когда-нибудь задумывались почему все популярные сайты вроде Facebook, Twitter и так далее просят ваш адрес электронной почты. Ответ очень прост: e-mail это самый лучший способ, чтобы достучаться до ваших клиентов. Не у всех есть профиль в Фейсбуке или Твиттере, но у всех есть адрес электронной почты. Многие люди проверяют свою почту по несколько раз в день. А с уведомлениями в телефонах люди подсоединены к своей почте 24 часа в сутки 7 дней в неделю. Электронная почта дает вам куда более личный и близкий доступ к вашим клиентам.

Что такое Aweber?

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

Как настроить Aweber

Зайдите на сайт сервиса и зарегистрируйте себе аккаунт.

WordPress

Вас попросят указать личную информацию, а также данные своей кредитки. Не забывайте, что сервис предлагает 30 дней пробного срока. Если вы отмените подписку до окончания пробного периода, то с вашей карточки не снимут никаких средств. После регистрации нажмите по кнопке Let’s get started, чтобы продолжить.

WordPress

От вас попросят указать название компании, сайт и адрес. Этот адрес будет появляться внизу ваших e-mail’ов. Указывайте настоящий адрес, так как того требует законодательство плюс это повысит шансы того, что ваше письмо дойдет до ваших клиентов и не попадет под раздачу спам-фильтров.

WordPress

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

WordPress

Щелкните по кнопке Next, чтобы продолжить. Вас попросят указать название и описание вашего списка e-mail’ов. Это название и описание будут использоваться внутри системы и помогут вам находить список электронных адресов в админке Aweber.

WordPress

Щелкните по кнопке следующего шага, чтобы продолжить. Вам надо выбрать субъекта для подтверждающего письма. Это письмо отсылается вашим пользователям, чтобы подтвердить их электронный адрес, когда они подписываются на рассылку. Aweber предоставит вам список заготовленных субъектов. Можете выбрать тот, который подходит вам больше всего. Вы также можете создать свой собственный. Однако в этом случае команда сервиса должна проверить его, чтобы предотвратить возможный спам. На это может уйти по меньшей мере одни бизнес-сутки.

WordPress

Нажмите на Create List, чтобы продолжить. Теперь вы успешно создали аккаунт в Aweber, а также свой первый список рассылки. Теперь мы расскажем как добавить форму подписки на рассылку от Aweber себе на сайт.

Добавляем формы подписки от Aweber

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

Стандартные формы Aweber

Aweber предлагает вам простые инструменты по созданию собственных форм подписки и вставки их к себе на сайт. Просто зайдите на сайт сервиса и щелкните по Signup forms.

WordPress

На следующей странице нажмите по create a new signup form. У вас появится конструктор с кучей шаблонов, которые вы можете выбрать для начала. Вы можете редактировать форму, просто щелкнув по ней в экране предпросмотра.

WordPress

Как только будете удовлетворены результатом, вам надо щелкнуть по кнопке go to step 2. Вы попадете в настройки, где сможете выбрать действие, которое будет происходить, когда пользователи будут заполнять форму. Лучшим выбором будете перенаправлять их на страницу вашего сайта.

WordPress

Затем вы можете выбрать действие, которое происходит, если пользователь уже подписан. Опять таки можете создать страницу у себя на сайте и перенаправлять пользователей туда. Нажмите по кнопке go to step 3. Сохраните форму и нажмите по I will install my own form. Aweber покажет вам два набора кодов, которые вы можете добавить себе на сайт, чтобы отображать их в качестве формы подписки. Нажмите по Raw HTML Version и скопируйте код.

WordPress

Теперь вам надо зайти в админку своего сайта WordPress и щелкнуть по Appearance > Widgets. Из списка доступных виджетов перетащите текстовый виджет в сайдбар, где хотите отображать вашу форму подписки.

WordPress

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

Добавление форм подписок Aweber с помощью OptinMonster

Как вы заметили, добавить простую форму подписки Aweber в WordPress не так уж и сложно. Однако такие формы не слишком идеальны для высоких конверсий. И тут на сцену выходит OptinMonster, который позволяет создавать легко заметные и красивые формы. Сервис предлагает кучу функций вроде плавающих панелей, сайдбарных форм, слайд-иов и так далее. Сервис работает со всеми популярными сервисами рассылок, включая Aweber.

Добавляем формы подписки Aweber с помощью WPForms

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

Шаг первый: установка Aweber Addon

Сперва вам потребуется скачать и активировать плагин WPForms. После этого зайдите на страницу WPForms > Addons. Нажмите по кнопке Install Addon возле Aweber Addon.

WordPress

После этого WPForms установит аддон и покажет вам сообщение об успехе. После этого вам надо щелкнуть по кнопке Activate, чтобы начать пользоваться аддоном.

WordPress

Шаг второй: соедините WPForms со своим аккаунтом Aweber

Теперь, когда вы успешно установили аддон, следующим шагом будет соединить ваш сайт с аккаунтом Aweber. Зайдите на страницу WPForms > Settings и щелкните по вкладке Integrations. Там вы найдете опцию по интегрированию. Щелкните по ней и вы увидите кнопку Add Accounts, которая отобразит два поля.

WordPress

Вы увидите ссылку под названием Click here to authorize. Щелкнув по этой ссылке, у вас откроется окно, где вас попросят войти в ваш аккаунт Aweber.

WordPress

Введя свое имя пользователя и пароль, нажмите по кнопке Allow Access. Aweber проверит ваши данные и выдаст вам код авторизации.

WordPress

Скопируйте и вставьте его на страницу настроек WPForms. Вы можете использовать что угодно в поле Account Nickname. Затем нажмите на кнопку Connect to Aweber, чтобы продолжить. Плагин соединит вас с вашим аккаунтом и вы увидите статус Connected возле своей интеграции Aweber.

Шаг третий: создаем формы подписки Aweber с помощью WPForms

Зайдите в WPForms > Add New, чтобы создать новую форму. Плагин предлагает кучу шаблонов для создания самых распространенных форм. Один из шаблонов называется Newsletter Signup Form.

WordPress

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

WordPress

Как только будете довольны своей формой, нажмите на вкладку Marketing и щелкните по Aweber. Вам надо нажать по кнопке Add New Connection.

WordPress

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

WordPress

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

Шаг четвертый: вставка формы в WordPress

Существует много способов как можно добавить форму Aweber. WPForms позволяет добавлять формы в любой пост, страницу или виджет, используя шорткод. Вы можете найти шорткод, зайдя на страницу WPForms > All Forms.

WordPress

Вы также можете использовать виджет WPForms, чтобы вставлять форму в сайдбар. Зайдите на страницу Appearance > Widgets. Под списком доступных виджетов вы найдете виджет WPForms. Добавьте его в сайдбар, где вы хотите, чтобы отображалась форма подписки.

WordPress

Отправляйте посты WordPress в список адресов Aweber

Aweber делает очень простым задание отослать ваши посты WordPress вашим подписчикам. Вот как это можно настроить. Просто зайдите в панель настроек Aweber и нажмите по Messages > Blog Broadcasts.

WordPress

На следующем экране нажмите на create a broadcast. Вас попросят указать адрес RSS-фида вашего сайта и выбрать субъект.

WordPress

После этого можете выбрать шаблон слева и нажать кнопку load template. Вы заметите поле HTML, которое автоматически заполнит шаблон. Вы можете продолжить его настройку или же пролистать вниз и настроить способ отправки новых сообщений вашим пользователям.

WordPress

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


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


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

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

Способ первый: публикация постов через WPForms

Этот способ позволяет пользователям публиковать посты прямо с сайта без необходимости заходить в админку. Вы даже можете принимать посты от пользователей, не требуя от них регистрации. Сперва вам надо установить и активировать плагин WPForms, который является премиум-плагином. Вам понадобится профессиональная версия плагина, чтобы получить доступ к нему. После активации зайдите на страницу WPForms > Settings и введите свой лицензионный ключ. Этот ключ вы можете получить с сайта плагина.

WordPress

После подтверждения вам надо зайти на страницу WPForms > Addons. Пролистайте вниз до Post submissions addon и щелкните по кнопке Install Addon.

WordPress

Теперь плагин установит специальный аддон для публикации постов. Чтобы начать им пользоваться, вам надо будет щелкнуть по кнопке активации. Теперь вы готовы создать форму отправки постов. Зайдите на страницу WPForms > Add New, чтобы открыть конструктор интерфейса. Сперва вам надо будет указать название своей формы. Под разделом Select a Template щелкните по шаблону Blog post submission form.

WordPress

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

WordPress

Плагин позволяет вашим пользователям выбирать категории постов, добавлять заглавные изображения и даже собственные поля. Как только будете довольны формой, щелкните по вкладке Settings и затем по вкладке Post Submissions.

WordPress

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

Теперь вы можете добавить форму себе на сайт. Вы можете создать новую страницу или отредактировать уже существующую. На экране редактора вы заметите кнопку Add Form.

WordPress

Это вызовет всплывающее окно, где вам надо выбрать форму отправки поста, которую вы только что создали.

WordPress

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

WordPress

Способ второй: одобряйте контент пользователей с помощью плагина User Submitted Posts Plugin

Другой способ принимать пользовательский контент это используя плагин User Submitted Posts. После его активации зайдите на страницу Settings > User Submitted Posts, чтобы настроить плагин.

WordPress

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

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

[user-submitted-posts]

Теперь можете сохранить или опубликовать свою страницу. Зайдите на сайт, чтобы увидеть форму в действии.

WordPress

Способ третий: разрешаем пользователям регистрироваться и отправлять посты в WordPress

У WordPress есть встроенный функционал, который позволяет управлять сайтом с несколькими авторами. Вы можете разрешить пользователям регистрироваться у вас на сайте и создавать контент, пользуясь вашим администраторским интерфейсом с ограниченными возможностями. Сперва необходимо включить регистрацию пользователей у себя на сайте. Зайдите на страницу Settings > General и отметьте Anyone can register напротив опции Membership. Выберите Author или Contributor в качестве пользовательской роли по умолчанию.

WordPress

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

Проблемы, связанные с этим способом

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


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


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

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

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

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

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

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

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

WordPress

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


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


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

WordPress

Преимущества и недостатки 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 и щелкнуть по кнопке регистрации.

WordPress

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

WordPress

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

WordPress

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

WordPress

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

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

WordPress

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

WordPress

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

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

WordPress

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

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

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

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

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

WordPress

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

WordPress

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

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

WordPress

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

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

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

WordPress

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

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

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


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

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


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