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

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

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

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

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

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

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

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

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

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

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

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

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

Вы успешно добавили бесплатный сертификат 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. Контакты для бесплатной консультации — [email protected], +371 29394520

---

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

Что такое Shortcake?

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

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

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

Приступаем

Сначала вам необходимо установить и активировать плагин 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 в левой панели. Щелчок по ней отобразит вам кнопку для вставки вашего кода.

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

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

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

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;
}

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

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

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. Контакты для бесплатной консультации — [email protected], +371 29394520

---

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

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

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

Что такое Aweber?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---