WordPress Туториалы

Полная инструкция как подсоединить AWeber к WordPress

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

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

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

Что такое AWeber?

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

Бесплатный план AWeber предназначен для частных лиц и малого бизнеса, начинающих заниматься email-маркетингом, и включает до 500 подписчиков и 3000 ежемесячных рассылок по электронной почте.

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

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

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

WordPress

Выберете план и кликните по Start your 14-day trial.

WordPress

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

Прокрутите страницу вниз и кликните по continue with Free чтобы подписатьсйа на бесплатный сервисс.

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

WordPress

После настройки AWeber предлагает создать целевую страницу, настроить серию приветственных писем, добавить существующих подписчиков и создать письма с помощью простого конструктора drag-and-drop. Вы можете выполнить эти шаги сразу или отложить на потом.

AWeber

Создание списка рассылки

AWeber Free позволяет вам создать один список рассылки. Чтобы настроить его выберите List Options > List Settings из панели управления AWeber.

AWeber list

В табе Basic Settings введите сведения о списке:

  • Название вашего списка.
  • Описание списка.
  • Имя отправителя, которое будет отображаться у подписчиков.
  • Адрес электронной почты, с которого будут отправляться сообщения. (Вы можете выбрать адрес эл. почты с которым вы зарегестрировались или добавить новый нажав на Add New Email Address в выпадающем списке).
  • AWeber new emailАдрес вашей компании.
  • Добавьте один или несколько адресов электронной почты, чтобы получать уведомления, когда подписчик присоединяется к вашему списку.

Нажмите Save List Settings.

В табе Personalize Your List вы можете добавить дополнительные сведения о своей компании, дополнительную информацию, которую вы хотите включить во все свои сообщения (например, часы работы магазина, промокоды или даты мероприятий) и подключить свои социальные аккаунты.

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

edit message

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

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

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

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

Aweber предлагает вам простые инструменты по созданию собственных форм подписки и вставки их к себе на сайт. Просто зайдите на сайт сервиса и щелкните по Pages & Forms > Sign Up Forms. Нажмите по Create a Sign Up Form и выберите For My Website из выпадающего меню. У вас появится конструктор с кучей шаблонов, которые вы можете выбрать для начала. Вы можете редактировать форму, просто щелкнув по ней в экране предпросмотра.

WordPress

Как только будете удовлетворены результатом, вам надо щелкнуть по кнопке Save Your Form и потом — Go To Step 2. Вы попадете в настройки, где сможете выбрать действие, которое будет происходить, когда пользователи будут заполнять форму. Лучшим выбором будет перенаправлять их на страницу вашего сайта.

WordPress

Затем вы можете выбрать действие, которое происходит, если пользователь уже подписан. Опять таки можете создать страницу у себя на сайте и перенаправлять пользователей туда. Сохраните форму и нажмите по кнопке Go To Step 3.  Нажмите по I Will Install My Form. Aweber покажет вам два набора кодов, которые вы можете добавить себе на сайт, чтобы отображать их в качестве формы подписки. Нажмите по Raw HTML Version и скопируйте код.

WordPress

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

WordPress

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

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

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

Чтобы интегрировать OptinMonster с AWeber, в OptinMonster перейдите на вкладку Integrations в вашей форме. Выберите AWeber из списка поставщиков. Авторизуйте подключение, войдя в свою учетную запись AWeber. Выберите свой список адресов электронной почты в AWeber, куда следует добавить лиды.

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

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

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

Сперва вам потребуется установить и активировать плагин WPForms Pro (интеграция с AWeber доступна только в Pro-версии). После этого зайдите на страницу 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 и нажмите по Automations > Campaigns.

WordPress

Нажмите на Create a Campaign и выберите Blog Automation в качестве типа кампании.

WordPress

Кликните по созданной компании, выберите действие Check Feed и укажите адрес RSS-фида вашего сайта. Установите частоту проверки ленты (например, каждый час, ежедневно).

WordPress

Кликните по превью сообщения чтобы настроить шаблон.

WordPress

Нажмите Save & Exit, чтобы вернуться к своей кампании.

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


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


Как увеличить скорость WordPress и защитить свой сайт при помощи .htaccess без каких-либо плагинов

Вам нужно защитить свой сайт на WordPress? Тогда вот вам хороший способ, который потребует использовать ТОЛЬКО .htaccess

 

Что такое .htaccess

 

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

 

Как все это работает?

 

У меня есть мысль избегать огромных библиотек от множества плагинов и настроек, которые я размещаю на сервере. Для этой цели я использую .htaccess

 

Включить в WordPress Gzip, используя .htaccess

 

Чтобы включить у себя в Вордпрессе gzip вам нужно включить mod_deflate.c и использовать подходящие фильтры. Например, эти:

<ifmodule mod_deflate.c>
	AddOutputFilterByType DEFLATE text/plain
	AddOutputFilterByType DEFLATE text/text
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/plain
	AddOutputFilterByType DEFLATE text/xml
	AddOutputFilterByType DEFLATE text/css
	AddOutputFilterByType DEFLATE image/gif
	AddOutputFilterByType DEFLATE image/jpeg
	AddOutputFilterByType DEFLATE image/jpg
	AddOutputFilterByType DEFLATE image/png
	AddOutputFilterByType DEFLATE image/gif
	AddOutputFilterByType DEFLATE image/flv
	AddOutputFilterByType DEFLATE image/ico
	AddOutputFilterByType DEFLATE image/swf
	AddOutputFilterByType DEFLATE application/rss+xml 
	AddOutputFilterByType DEFLATE application/xhtml+xml
	AddOutputFilterByType DEFLATE application/xml
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/json
	AddOutputFilterByType DEFLATE video/3gpp
	AddOutputFilterByType DEFLATE video/3gpp2
	AddOutputFilterByType DEFLATE video/x-flv
	AddOutputFilterByType DEFLATE video/jpm
	AddOutputFilterByType DEFLATE video/jpeg
	AddOutputFilterByType DEFLATE video/x-m4v
	AddOutputFilterByType DEFLATE video/mp4
	AddOutputFilterByType DEFLATE video/ogg
	AddOutputFilterByType DEFLATE video/webm
	AddOutputFilterByType DEFLATE video/quicktime
	AddOutputFilterByType DEFLATE audio/x-mpegurl
	AddOutputFilterByType DEFLATE audio/midi
	AddOutputFilterByType DEFLATE audio/mp3
	AddOutputFilterByType DEFLATE audio/mp4
	AddOutputFilterByType DEFLATE audio/mpeg
	AddOutputFilterByType DEFLATE audio/webm
	AddOutputFilterByType DEFLATE audio/basic
	AddOutputFilterByType DEFLATE audio/x-wav
	AddOutputFilterByType DEFLATE audio/wav
	
	# Fix Browsers
	BrowserMatch ^Mozilla/4 gzip-only-text/html
	BrowserMatch ^Mozilla/4\.0[678] no-gzip
	BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</ifmodule>

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

 

Настройка кэша WordPress внутри .htaccess

 

Если вы хотите ускорить свой сайт путем кэширования яваскриптов, CSS и картинок, то вы можете запросто настроить это через .htaccess, включив mod_expires.c

 

# Expires - 2678400s = 31 days
<ifmodule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 1 seconds"
	ExpiresByType text/html "access plus 7200 seconds"
	ExpiresByType image/gif "access plus 2678400 seconds"
	ExpiresByType image/jpeg "access plus 2678400 seconds"
	ExpiresByType image/png "access plus 2678400 seconds"
	ExpiresByType text/css "access plus 518400 seconds"
	ExpiresByType text/javascript "access plus 2678400 seconds"
	ExpiresByType application/x-javascript "access plus 2678400 seconds"
</ifmodule>

 

В моем примере я использую кэш на протяжении 31 дня. Вы можете поменять эту настройку на ту, которая нужна именно вам. А вот код для headers:

 

# Cache Headers
<ifmodule mod_headers.c>
	# Cache specified files for 31 days
	<filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
		Header set Cache-Control "max-age=2678400, public"
	</filesmatch>
	# Cache HTML files for a couple hours
	<filesmatch "\.(html|htm)$">
		Header set Cache-Control "max-age=7200, private, must-revalidate"
	</filesmatch>
	# Cache PDFs for a day
	<filesmatch "\.(pdf)$">
		Header set Cache-Control "max-age=86400, public"
	</filesmatch>
	# Cache Javascripts for 31 days
	<filesmatch "\.(js)$">
		Header set Cache-Control "max-age=2678400, private"
	</filesmatch>
</ifmodule>

 

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

 

Защищаем установку WordPress через .htaccess

 

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

 

# Disable directory browsing
Options All -Indexes

# Deny access to wp-config.php file
<files wp-config.php>
	order allow,deny
	deny from all
</files>

# Deny access to xmlrpc.php file *** REMOVE THIS IF YOU WANT TO ACCESS IT ***
<files xmlrpc.php>
	order allow,deny
	deny from all
</files>

# Deny access to all .htaccess files
<files ~ "^.*\.([Hh][Tt][Aa])">
	order allow,deny
	deny from all
	satisfy all
</files>

# Block wp-includes folder and files
<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteBase /
	RewriteRule ^wp-admin/includes/ - [F,L]
	RewriteRule !^wp-includes/ - [S=3]
	RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]
	RewriteRule ^wp-includes/js/tinymce/langs/.+\.php - [F,L]
	RewriteRule ^wp-includes/theme-compat/ - [F,L]
</IfModule>

# Block Massive attacks
<IfModule mod_rewrite.c>
	RewriteEngine On
	# Block out any script trying to base64_encode data within the URL.
	RewriteCond %{QUERY_STRING} base64_encode[^(]*\([^)]*\) [OR]
	# Block out any script that includes a <script> tag in URL.
	RewriteCond %{QUERY_STRING} (<|%3C)([^s]*s)+cript.*(>|%3E) [NC,OR]
	# Block out any script trying to set a PHP GLOBALS variable via URL.
	RewriteCond %{QUERY_STRING} GLOBALS(=|\[|\%[0-9A-Z]{0,2}) [OR]
	# Block out any script trying to modify a _REQUEST variable via URL.
	RewriteCond %{QUERY_STRING} _REQUEST(=|\[|\%[0-9A-Z]{0,2})
	# Return 403 Forbidden header and show the content of the root homepage
	RewriteRule .* index.php [F]
	
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d

	# Disable user agents from this locations
	SetEnvIfNoCase User-Agent "^Missigua Locator" bad_bot
	#SetEnvIfNoCase User-Agent "^PEAR HTTP_Request class" bad_bot
	SetEnvIfNoCase User-Agent "^Java/1.4.1" bad_bot
	SetEnvIfNoCase User-Agent "^Java/1.5.0" bad_bot
	SetEnvIfNoCase User-Agent "^psycheclone" bad_bot
	SetEnvIfNoCase User-Agent "^WEP Search 00" bad_bot
	SetEnvIfNoCase User-Agent "^FlashGet" bad_bot
	SetEnvIfNoCase User-Agent "^GetRight" bad_bot
	SetEnvIfNoCase User-Agent "^GetWeb!" bad_bot
	SetEnvIfNoCase User-Agent "^Go!Zilla" bad_bot
	SetEnvIfNoCase User-Agent "^httplib" bad_bot
	SetEnvIfNoCase User-Agent "^Indy Library" bad_bot
	SetEnvIfNoCase User-Agent "^InfoNaviRobot" bad_bot
	SetEnvIfNoCase User-Agent "^InterGET" bad_bot
	SetEnvIfNoCase User-Agent "^Internet Ninja" bad_bot
	SetEnvIfNoCase User-Agent "^LexiBot" bad_bot
	SetEnvIfNoCase User-Agent "^libWeb/clsHTTP" bad_bot
	SetEnvIfNoCase User-Agent "^libwww" bad_bot
	SetEnvIfNoCase User-Agent "^libwww-perl" bad_bot
	SetEnvIfNoCase User-Agent "^LinkextractorPro" bad_bot
	SetEnvIfNoCase User-Agent "^Mozilla.*NEWT" bad_bot
	SetEnvIfNoCase User-Agent "^Octopus" bad_bot
	SetEnvIfNoCase User-Agent "^ProWebWalker" bad_bot
	SetEnvIfNoCase User-Agent "^SuperBot" bad_bot
	SetEnvIfNoCase User-Agent "^WebAuto" bad_bot
	SetEnvIfNoCase User-Agent "^Wells Search II" bad_bot
	SetEnvIfNoCase User-Agent "^Wget" bad_bot
	SetEnvIfNoCase User-Agent "^wget" bad_bot

	<Limit GET POST>
		order allow,deny
		allow from all
		deny from env=bad_bot
	</Limit>
</IfModule>

 

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

Следующей мерой защиты было отключение прямого доступа к файлам .htaccess, xmlrpc.php и wp-config.php.

Важное примечание: если вам требуется файл xmlrpc.php, то вам нужно убрать соответствующую часть кода.

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

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

 

Выводы

 

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

 

# Enable GZIP
<ifmodule mod_deflate.c>
	AddOutputFilterByType DEFLATE text/plain
	AddOutputFilterByType DEFLATE text/text
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/plain
	AddOutputFilterByType DEFLATE text/xml
	AddOutputFilterByType DEFLATE text/css
	AddOutputFilterByType DEFLATE image/gif
	AddOutputFilterByType DEFLATE image/jpeg
	AddOutputFilterByType DEFLATE image/jpg
	AddOutputFilterByType DEFLATE image/png
	AddOutputFilterByType DEFLATE image/gif
	AddOutputFilterByType DEFLATE image/flv
	AddOutputFilterByType DEFLATE image/ico
	AddOutputFilterByType DEFLATE image/swf
	AddOutputFilterByType DEFLATE application/rss+xml 
	AddOutputFilterByType DEFLATE application/xhtml+xml
	AddOutputFilterByType DEFLATE application/xml
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/json
	AddOutputFilterByType DEFLATE video/3gpp
	AddOutputFilterByType DEFLATE video/3gpp2
	AddOutputFilterByType DEFLATE video/x-flv
	AddOutputFilterByType DEFLATE video/jpm
	AddOutputFilterByType DEFLATE video/jpeg
	AddOutputFilterByType DEFLATE video/x-m4v
	AddOutputFilterByType DEFLATE video/mp4
	AddOutputFilterByType DEFLATE video/ogg
	AddOutputFilterByType DEFLATE video/webm
	AddOutputFilterByType DEFLATE video/quicktime
	AddOutputFilterByType DEFLATE audio/x-mpegurl
	AddOutputFilterByType DEFLATE audio/midi
	AddOutputFilterByType DEFLATE audio/mp3
	AddOutputFilterByType DEFLATE audio/mp4
	AddOutputFilterByType DEFLATE audio/mpeg
	AddOutputFilterByType DEFLATE audio/webm
	AddOutputFilterByType DEFLATE audio/basic
	AddOutputFilterByType DEFLATE audio/x-wav
	AddOutputFilterByType DEFLATE audio/wav
	
	# Fix Browsers
	BrowserMatch ^Mozilla/4 gzip-only-text/html
	BrowserMatch ^Mozilla/4\.0[678] no-gzip
	BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</ifmodule>

# Expires Headers - 2678400s = 31 days
<ifmodule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 1 seconds"
	ExpiresByType text/html "access plus 7200 seconds"
	ExpiresByType image/gif "access plus 2678400 seconds"
	ExpiresByType image/jpeg "access plus 2678400 seconds"
	ExpiresByType image/png "access plus 2678400 seconds"
	ExpiresByType text/css "access plus 518400 seconds"
	ExpiresByType text/javascript "access plus 2678400 seconds"
	ExpiresByType application/x-javascript "access plus 2678400 seconds"
</ifmodule>

# Cache Headers
<ifmodule mod_headers.c>
	# Cache specified files for 31 days
	<filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
		Header set Cache-Control "max-age=2678400, public"
	</filesmatch>
	# Cache HTML files for a couple hours
	<filesmatch "\.(html|htm)$">
		Header set Cache-Control "max-age=7200, private, must-revalidate"
	</filesmatch>
	# Cache PDFs for a day
	<filesmatch "\.(pdf)$">
		Header set Cache-Control "max-age=86400, public"
	</filesmatch>
	# Cache Javascripts for 31 days
	<filesmatch "\.(js)$">
		Header set Cache-Control "max-age=2678400, private"
	</filesmatch>
</ifmodule>

# Disable directory browsing
Options All -Indexes

# Deny access to wp-config.php file
<files wp-config.php>
	order allow,deny
	deny from all
</files>

# Deny access to xmlrpc.php file *** REMOVE THIS IF YOU WANT TO ACCESS IT ***
<files xmlrpc.php>
	order allow,deny
	deny from all
</files>

# Deny access to all .htaccess files
<files ~ "^.*\.([Hh][Tt][Aa])">
	order allow,deny
	deny from all
	satisfy all
</files>

# Block wp-includes folder and files
<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteBase /
	RewriteRule ^wp-admin/includes/ - [F,L]
	RewriteRule !^wp-includes/ - [S=3]
	RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]
	RewriteRule ^wp-includes/js/tinymce/langs/.+\.php - [F,L]
	RewriteRule ^wp-includes/theme-compat/ - [F,L]
</IfModule>

# Block Massive attacks
<IfModule mod_rewrite.c>
	RewriteEngine On
	# Block out any script trying to base64_encode data within the URL.
	RewriteCond %{QUERY_STRING} base64_encode[^(]*\([^)]*\) [OR]
	# Block out any script that includes a <script> tag in URL.
	RewriteCond %{QUERY_STRING} (<|%3C)([^s]*s)+cript.*(>|%3E) [NC,OR]
	# Block out any script trying to set a PHP GLOBALS variable via URL.
	RewriteCond %{QUERY_STRING} GLOBALS(=|\[|\%[0-9A-Z]{0,2}) [OR]
	# Block out any script trying to modify a _REQUEST variable via URL.
	RewriteCond %{QUERY_STRING} _REQUEST(=|\[|\%[0-9A-Z]{0,2})
	# Return 403 Forbidden header and show the content of the root homepage
	RewriteRule .* index.php [F]
	
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d

	# Disable user agents from this locations
	SetEnvIfNoCase User-Agent "^Missigua Locator" bad_bot
	#SetEnvIfNoCase User-Agent "^PEAR HTTP_Request class" bad_bot
	SetEnvIfNoCase User-Agent "^Java/1.4.1" bad_bot
	SetEnvIfNoCase User-Agent "^Java/1.5.0" bad_bot
	SetEnvIfNoCase User-Agent "^psycheclone" bad_bot
	SetEnvIfNoCase User-Agent "^WEP Search 00" bad_bot
	SetEnvIfNoCase User-Agent "^FlashGet" bad_bot
	SetEnvIfNoCase User-Agent "^GetRight" bad_bot
	SetEnvIfNoCase User-Agent "^GetWeb!" bad_bot
	SetEnvIfNoCase User-Agent "^Go!Zilla" bad_bot
	SetEnvIfNoCase User-Agent "^httplib" bad_bot
	SetEnvIfNoCase User-Agent "^Indy Library" bad_bot
	SetEnvIfNoCase User-Agent "^InfoNaviRobot" bad_bot
	SetEnvIfNoCase User-Agent "^InterGET" bad_bot
	SetEnvIfNoCase User-Agent "^Internet Ninja" bad_bot
	SetEnvIfNoCase User-Agent "^LexiBot" bad_bot
	SetEnvIfNoCase User-Agent "^libWeb/clsHTTP" bad_bot
	SetEnvIfNoCase User-Agent "^libwww" bad_bot
	SetEnvIfNoCase User-Agent "^libwww-perl" bad_bot
	SetEnvIfNoCase User-Agent "^LinkextractorPro" bad_bot
	SetEnvIfNoCase User-Agent "^Mozilla.*NEWT" bad_bot
	SetEnvIfNoCase User-Agent "^Octopus" bad_bot
	SetEnvIfNoCase User-Agent "^ProWebWalker" bad_bot
	SetEnvIfNoCase User-Agent "^SuperBot" bad_bot
	SetEnvIfNoCase User-Agent "^WebAuto" bad_bot
	SetEnvIfNoCase User-Agent "^Wells Search II" bad_bot
	SetEnvIfNoCase User-Agent "^Wget" bad_bot
	SetEnvIfNoCase User-Agent "^wget" bad_bot

	<Limit GET POST>
		order allow,deny
		allow from all
		deny from env=bad_bot
	</Limit>
</IfModule>

# BEGIN WordPress
<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteBase /
	RewriteRule ^index\.php$ - [L]
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteRule . /index.php [L]
</IfModule>
# END WordPress

 

Но учтите, что перед тем, как вы попробуете наш код, ОБЯЗАТЕЛЬНО позаботьтесь о соответствующих резервных копиях.

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

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


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


Как использовать SMTP сервер, чтобы отправлять электронные письма Вордпресс

У вас проблемы с получением или отправкой электронных писем со своего сайта Вордпресс? Одно из решений это использовать сервисы третьей стороны вроде Mandrill. Однако их использование может обойтись в копеечку. В этой статье мы расскажем как использовать SMTP сервер, чтобы отсылать электронные письма.

Проблема с электронными письмами

Вордпресс использует почтовую функцию в PHP для того, чтобы отправлять электронные письма. На многих хостингах эта функция либо толком не настроена, либо отключена вовсе дабы избежать ее злоупотребления. В любом из этих сценариев ваши письма не будут доставлены. Альтернативным решением может быть использование сторонних сервисов вроде Mandrill, Google Apps или Sendgrid. Но вам надо будет платить за свой профиль и стоимость будет зависеть оттого, сколько пользователей/аккаунтов вы хотите добавить или сколько писем собираетесь отсылать. Но есть и третий вариант.

Использование e-mail профилей вашим хостингом

Многие Вордпресс-хостинги предлагают сервис электронной почты для каждого домена, который вы используете с ними. Это означает, что вы можете создавать e-mail профили с собственным доменным именем вроде [email protected]. Сперва вам понадобится создать e-mail аккаунт. В целях эксперимента мы покажем вам как создать такой аккаунт в cPanel. Ваш хостинг может использовать другие системы управления профилем, но основной процесс одинаков на всех хостингах. Итак, зайдите в свой хостинг и нажмите по email accounts.

WordPress

У вас появится простенькая форма, куда вам надо ввести информацию, необходимую для создания своего аккаунта электронной почты. Поскольку мы будет использовать этот профиль для отправки писем, мы рекомендуем вам использовать название вроде [email protected], заменив example.com на свое доменное имя.

WordPress

Перед тем, как использовать свой e-mail профиль, нам понадобится следующая информация от вашего хостинга:

1. SMTP Host для вашего электронного ящика
2. SMTP Port для безопасного входа

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

Использование своего почтового ящика в Вордпресс

Вам надо будет установить и активировать плагин WP Mail SMTP. После активации зайдите на страницу Settings > Email, чтобы настроить плагин.

WordPress

Вам надо ввести свой электронный адрес, который вы только что создали. Не забудьте удостовериться, что опция Send all WordPress emails via SMTP отмечена. Под настройками SMTP заполните информацию о вашем порте, которую получили от своего хостинга. В качестве способа шифровки используйте SSL. Поскольку мы используем сервер SMTP, плагину понадобятся ваши данные, чтобы отправлять электронные письма. В области аутентификации выберите ‘Yes: Use SMTP authentication.’ и укажите детали входа в SMTP.

Затем нажмите по кнопке сохранения, страница перезагрузится и вы увидите соответствующее сообщение.

Тестирование ваших настроек SMTP

У WP Mails SMTP есть функция отладки. После сохранения настроек пролистайте вниз и введите свой адрес электронной почты.

WordPress

Плагин отошлет вам тестовое сообщение. Если вы его не получили, значит, у вас что-то не так в настройках.

Устранение проблем

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

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

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

Однако у хостингов ВП есть свои ограничения на исходящие письма, поэтому они не очень хорошо подходят для массовых рассылок. Другая частая проблема заключается в том, что их сервера иногда могут быть ненадежными. Если вы заметите задержку в доставке писем, то вам следует подумать об использовании сторонних сервисов вроде Google Apps for Work, Mandrill или SendGrid.


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


Как легко отобразить код у себя на сайте

У вас есть блог, посвященный разработке, и вы хотели бы выкладывать на нем фрагменты кодов? По умолчанию отображение кодов на сайте Ворпдресс задачка не из легких, так как по причинам безопасности фильтры WordPress блокируют любой код, добавленный в посты, виджеты или комментарии. Поэтому вам надо установить и активировать плагин Synatx Highlighter Evolved. После его активации зайдите на страницу Settings » Syntax Highlighter, чтобы настроить только что установленный плагин.

WordPress

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

WordPress

[

&lt;?php
echo “Hello World”;
?&gt;

]

Для CSS:

WordPress

[

.entry-title {
font-family:”Open Sans”, arial, sans-serif;
font-size:16px;
color:#272727;
}

]

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

Как отображать код в Вордпрессе без использования плагинов

Многие пользователи ведут блоги, не связанные с разработкой, поэтому им не нужно часто вставлять фрагменты кодов в свои посты. Для редких случаев вы можете добавлять код, конвертируя его в HTML похожим образом:

&gt;?php echo «Hello World»; ?&lt;

Проблема в этом способе заключается в том, что это сложно сделать вручную, поэтому вам понадобится использовать специализированные онлайн-сервисы. Сконвертировав код в HTML вы можете вставлять его в посты. Для дополнительного оформления можете обернуть код в теги <code> и </code>.


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

Как восстановить сайт WordPress одной лишь копией баз данных

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

Приступаем

В рамках этой статьи мы предполагаем, что у вас есть бэкап вашей базы данных в виде .zip-файла. Для начала вам понадобится создать новую базу данных. Просто зайдите в свой профиль cPanel и щелкните по MySQL Databases под разделом Database.

WordPress

Затем укажите название своей базы данных и щелкните по кнопке create database.

WordPress

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

WordPress

Укажите имя пользователя и крепкий пароль. Потом вам надо добавить созданного пользователя к базе данных. Прокрутите вниз до Add user to database и выберите пользователя вместе с базой данных из выпадающих меню и нажмите кнопку Add.

WordPress

Импорт резервной копии базы данных ВП

Зайдите в cPanel и под разделом баз данных щелкните по phpMyAdmin.

WordPress

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

WordPress

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

Восстановление сайта Вордпресс

Для ручного восстановления ВП вам понадобится вручную установить Вордпресс на свой сервер. Во время установки, когда вы дойдете до шага create a configuration file, введите название базы данных и пользователя, которого создали ранее.

WordPress

Вы увидите сообщение, что ВП может подключиться к вашей базе данных и вы сможете запустить установку. Щелчок по кнопке установки покажет вам сообщение Already Installed.

WordPress

На этом все, можете зайти на свой сайт.

Устранение проблем

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

1. Шаблон

Просто установите свежую копию вашего старого шаблона WordPress. Если вы вносили изменения в старый шаблон, то они все исчезнут.

2. Виджеты

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

3. Постоянные ссылки

Структура постоянных ссылок вашего сайта также хранится в базе данных и будет автоматически восстановлена. Однако если вы видите ошибки 404, то вам надо обновить настройки постоянных ссылок. Просто зайдите в Settings > Permalinks и нажмите по кнопке сохранения настроек без изменения чего-либо. Это обновит вашу структуру адресов WordPress.

4. Плагины

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

WordPress

Скопируйте названия плагинов и начните устанавливать и активировать их один за другим.

Восстановление утерянных изображений

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

1) Загляните в кэш своего браузера

Если вы потеряли свой сайт недавно, то можете заглянуть в кэш своего браузера. Пользователи Firefox могут скачать адд-он CacheViewer2, чтобы легко найти изображения со своего сайта, сохраненные в кэше браузера.

WordPress

Вы можете просто щелкнуть правой кнопкой по изображению и выбрать сохранить его из меню. Пользователи Google Chrome на Windows могут использовать Chrome Cache Viewer. Пользователи же Мака остаются за бортом, так как мы не смогли найти эффективный инструмент для предпросмотра и сохранения изображений в кэше браузера на Маке.

2) Поиск ваших изображений в кэшах веб-страниц

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

WordPress

Можете щелкнуть по изображению, чтобы увидеть более крупную версию картинки и сохранить ее. Если же речь идет о восстановлении более старого сайта и вы не можете найти изображения в Google или Bing, то вы можете поробовать сайт Archive.org Это бесприбыльная организация, которая хранит снимки сайтов в исторических целях.

WordPress

Поиск и замена изображений на вашем сайте

Если на вашем сайте было много контента, то поиск и замена изображений вручную может оказаться нелегкой задачей. Вот простой способ как можно быстро обнаружить и заменить неисправные картинки. Установите и активируйте плагин Broken Link Checker. После активации зайдите на страницу Tools > Broken Links Checker. Плагин покажет вам список всех неисправных ссылок на вашем сайте.

WordPress

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

Бонусный совет

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


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


Как создать плагин WordPress TinyMCE

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

Требования

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

Создаем свой первый TinyMCE плагин

Мы начнем с создания пользовательской кнопки для панели инструментов. Эта кнопка при нажатии на нее позволит пользователю добавлять ссылку с пользовательским CSS-классом. Исходный код будет полностью приведен в конце этой статьи, а до того давайте создадим наш плагин шаг за шагом. Сперва создайте директорию в папке wp-content/plugins и назовите ее tinymce-custom-link-class.

Заголовок плагина

Создайте новый файл в только что созданной директории и назовите его tinymce-custom-link-class.php Добавьте этот код в файл и сохраните его.

/**
 * Plugin Name: TinyMCE Custom Link Class
 * Plugin URI: https://coma.lv
 * Version: 1.0
 * Author: Coma.lv
 * Author URI: https://coma.lv
 * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor
 * License: GPL2
 */

Это просто PHP-комментарий, который указывает Вордпрессу название плагина, а также его автора и описание. В админпанели Вордпресс активируйте новый плагин, зайдя на страницу Plugins – Installed Plugins и щелкнув по ссылке Activate под TinyMCE Custom Link Class.

WordPress

Настройка нашего класса плагина

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

class TinyMCE_Custom_Link_Class {
	
	/**
	* Constructor. Called when the plugin is initialised.
	*/
	function __construct() {
		
	}

}

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

Это создает PHP-класс вместе с конструкцией, которая вызывается, когда мы доходим до строки $tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

Любая функция, добавленная в этот класс, не должна конфликтовать с другими плагинами Вордпресс.

Настройка нашего TinyMCE плагина

Затем нам надо указать TinyMCE, что мы хотим добавить пользовательскую кнопку в панель инструментов визуального редактора. Для того, чтобы это сделать, мы можем использовать actions Вордпресса. В данном случае action под названием init. Добавьте следующий код в функцию __construct() вашего плагина.

if ( is_admin() ) {
	add_action( 'init', array(  $this, 'setup_tinymce_plugin' ) );
}

Эта функция проверят находимся ли мы в админпанели. Если ответ да, то функция запрашивает запуск функции setup_tinymce_plugin внутри нашего класса как только Вордпресс закончит загрузку. Затем добавьте функцию setup_tinymce_plugin:

/**
* Check if the current user can edit Posts or Pages, and is using the Visual Editor
* If so, add some filters so we can register our plugin
*/
function setup_tinymce_plugin() {

// Check if the logged in WordPress User can edit Posts or Pages
// If not, don't register our TinyMCE plugin
	
if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
	        return;
}

// Check if the logged in WordPress User has the Visual Editor enabled
// If not, don't register our TinyMCE plugin
if ( get_user_option( 'rich_editing' ) !== 'true' ) {
return;
}

// Setup some filters
add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
		
	}

Эта функция уже проверят может ли залогиненный пользователь редактировать посты или страницы. Если нет, то нет смысла в регистрации нашего плагина для этого пользователя, поскольку он никогда и не увидит-то визуальный редактора. Затем мы проверяем пользуется ли пользователь визуальным редактором, так как некоторые пользователи отключают это у себя в профиле. Опять-таки, если пользователь не использует визуальный редактор, то мы возвращаем (exit), поскольку нам больше ничего не надо. Наконец, мы добавляем два Вордпресс-фильтра — mce_external_plugins и mce_buttons, чтобы вызвать функции, которые загрузят необходимый файл Javascript для TinyMCE и добавят соответствующую кнопку в панель инструментов.

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

Давайте добавим функцию add_tinymce_plugin:

/**
* Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
*
* @param array $plugin_array Array of registered TinyMCE Plugins
* @return array Modified array of registered TinyMCE Plugins
*/
function add_tinymce_plugin( $plugin_array ) {

$plugin_array['custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js';
return $plugin_array;

}
 

Эта функция говорит TinyMCE, что необходимо загрузить файлы Javascript, расположенные в ячейке $plugin_array. Эти файлы укажут TinyMCE что надо делать. Нам также надо добавить код в функцию add_tinymce_toolbar_button, чтобы доложить TinyMCE о кнопке, которую мы хотели бы добавить в панель инструментов.

/**
* Adds a button to the TinyMCE / Visual Editor which the user can click
* to insert a link with a custom CSS class.
*
* @param array $buttons Array of registered TinyMCE Buttons
* @return array Modified array of registered TinyMCE Buttons
*/
function add_tinymce_toolbar_button( $buttons ) {

array_push( $buttons, '|', 'custom_link_class' );
return $buttons;
}

Это добавляет два элемента в ячейку кнопок TinyMCE: разделитель (|) и название нашей кнопки (custom_link_class). Сохраните свой плагин и отредактируйте страницу или пост, чтобы увидеть визуальный редактора. Скорее всего, вы не увидите панели инструментов.

WordPress

Не волнуйтесь – если вы загляните в Инспектор браузера, то увидите ошибку 404, сгенерированную TinyMCE, говорящую нам о том, что он не может найти наш файл Javascript.

WordPress

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

Создаем плагин Javascript

Создайте новый файл в вашей папке wp-content/plugins/tinymce-custom-link-class и назовите его tinymce-custom-link-class.js, а затем добавьте туда следующий код:

(function() {
	tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
		
	});
})();

Это вызывает класс TinyMCE Plugin Manager, который мы можем использовать, чтобы запускать массу связанных с плагином действий. В частности добавляем наш плагин в TinyMCE используя функцию add. Это принимает два элемента; название плагина (custom_link_class) и функцию анонимности. Если вы знакомы с концептом функций в кодинге, то функция анонимности это просто функция без названия. Например, function foobar() { … } это функция, которую мы можем вызвать где-нибудь еще внутри кода, используя foobar().

С функцией анонимности мы не можем вызывать эту функцию где-нибудь еще в коде – лишь с помощью функции add(). Сохраните свой файл Javascript и примитесь к редактированию страницы или поста, чтобы увидеть визуальный редактор. Если все сработало, то вы увидите панель инструментов:

WordPress

На данный момент наша кнопка не была добавлена в панель инструментов. Это оттого, что мы сообщили TinyMCE только то, что мы создали пользовательский плагин. Теперь нам надо указать TinyMCE что надо делать, то есть добавить кнопку в панель инструментов. Обновите свой файл Javascript, заменив существующий код следующим:

(function() {
	tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
		// Add Button to Visual Editor Toolbar
		editor.addButton('custom_link_class', {
			title: 'Insert Button Link',
			cmd: 'custom_link_class',
		});	
	});
})();

Заметьте, что у нашей анонимной функции два аргумента. Первый это editor, являющийся визуальным редактором TinyMCE. Подобным образом как мы можем вызвать различные функции в PluginManager, мы также можем вызвать различные функции в editor. В этом случае мы вызываем функцию addButton, чтобы добавить кнопку в панель инструментов. Сохраните свой файл javascript и вернитесь в визуальный редактор. С первого взгляда ничего не изменилось. Однако если вы наведете мышиный курсор на иконку в правом верху, то увидите подсказку:

WordPress

Мы успешно добавили кнопку в панель инструментов, но ей нужно изображение. Добавьте следующий параметр к функции addButton под title:

image: url + ‘/icon.png’,

url это адрес нашего плагина. Это удобно в случае, если мы хотим сделать отсылку к файлу с изображением с папкой плагина. В этом случае нам понадобится изображение с названием icon.png в папке нашего плагина. Используйте следующую иконку:

WordPress

Перезагрузите визуальный редактор и увидите свою кнопку с иконкой:

WordPress

Указываем команду запуска

На данный момент, если вы нажмете на кнопку, ничего не произойдет. Давайте добавим команду, которая скажет TinyMCE что надо делать. Добавьте следующий код в нашем Javascript файле под концом раздела editor.addButton

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
	alert('Button clicked!');
});

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

WordPress

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

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
	// Check we have selected some text that we want to link
	var text = editor.selection.getContent({
		'format': 'html'
	});
	if ( text.length === 0 ) {
		alert( 'Please select some text to link.' );
		return;
	}

	// Ask the user to enter a URL
	var result = prompt('Enter the link');
	if ( !result ) {
		// User cancelled - exit
		return;
	}
	if (result.length === 0) {
		// User didn't enter a URL - exit
		return;
	}

	// Insert selected text back into editor, wrapping it in an anchor tag
	editor.execCommand('mceReplaceContent', false, '<a class="button" href="' + result + '">' + text + '</a>');
});

Блок кода выполняет несколько действий. Сперва мы проверяем выбрал ли пользователь какой-нибудь текст, чтобы обернуть его в визуальном редакторе. Если нет, то они увидят следующее сообщение.

WordPress

Затем мы просим их ввести ссылку, снова проверяя что они сделали. Если они отменили или ничего не ввели, то мы тоже ничего не делаем.

WordPress

Наконец, мы запускаем функцию execCommand в редакторе TinyMCE, запустив действие mceReplaceContent. Это заменяет выбранный текст нашим HTML-кодом, который включает якорную ссылку с классом class=»button”, используя выбранный текст. Если все сработало, то вы увидите выбранный вами текст связанным в визуальном редакторе с классом, который связан с кнопкой:

WordPress

Итоги

Мы успешно создали плагин WordPress, который добавляет кнопку в визуальный редактор TinyMCE в WordPress. Это руководство также осветило некоторые основы API TinyMCE и интеграцию фильтров. Мы добавили код, чтобы когда пользователь щелкает по нашей пользовательской кнопке, ему предлагают выбрать текст в визуальном редакторе, который он может связать с ссылкой на усмотрение. Наконец, наш плагин заменяет выбранный текст его ссылочной версией, которая содержит пользовательский класс CSS под названием button.


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


Как правильно переехать с Squarespace на WordPress

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

Зачем переезжать с Squarespace на WordPress?

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

Шаг нулевой: приступаем к работе

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

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

Зарегистрировав себе хостинг, вам надо установить Вордпресс. Будучи одной из наиболее используемых систем по управлению сайтами в мире, Вордпресс известен своей пятиминутной установкой. Также многие хостинги вроде Bluehost, Siteground, Hostgator и другие предлагают однокликовую установку.

Шаг второй: экспорт контента с Squarespace

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

Вот контент, который будет экспортирован:

— все ваши основные страницы
— одна страница, которая появится в страницах Вордпресс как Blog
— все ваши блоговые записи под этой страницей
— все ваши страницы с галерей
— текст, изображения и блоки со вставленным контентом

А вот контент, который НЕ будет экспортирован:

— страницы товаров, альбомов и мероприятий
— аудио, видео и блоки товаров
— стили и CSS
— папки и индексные страницы
— если у вас более одной блоговой страницы, то только одна из них будет экспортирована

Теперь, зная ограничения Squarespace, давайте приступим к экспорту контента, чтобы начать все с чистой страницы на Вордпрессе, где у вас будет куда больше свободы действий. Зайдите в свой аккаунт Squarespace и посетите меню Settings > Advanced > Import / Export.

WordPress

У вас появятся настройки импорта/экспорта. Вам надо щелкнуть по кнопке экспорта, чтобы продолжить.

WordPress

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

WordPress

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

WordPress

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

Шаг третий: импортируем контент из Squarespace в WordPress

Следующий шаг это импортировать контент, который вы скачали с Squarespace на свой сайт WordPress. Для этого зайдите в админпанель Вордпресс и посетите страницу Tools > Import. Вы увидите список платформ на выбор. Squarespace в нем не будет, так как он экспортирует контент в совместимом с Вордпресс формате XML. Щелкните по WordPress, чтобы продолжить.

WordPress

Появится всплывающее окно, в котором вас попросят установить плагин WordPress Importer. Щелкните по кнопке Install Now.

WordPress

WordPress скачает и установит плагин. После установки вам надо щелкнуть по Activate Plugin & Run Importer.

WordPress

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

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

WordPress

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

Шаг четвертый: импортирование изображений из Squarespace

К сожалению, импортер Вордпресс не может импортировать изображения с вашего сайта Squarespace и вам придется сделать это вручную. Первым делом установите и активируйте плагин Import External Images. После его активации зайдите на страницу Media > Import Images, чтобы запустить плагин.

WordPress

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

Вам надо удостовериться, что вы не упускаете трафик, идущий через ссылки вашего старого сайта Squarespace. WordPress использует SEO-дружелюбную адресную структуру, которая позволяет вам настраивать ссылочную структуру самыми разнообразными способами. Задача здесь это создать похожу структуру ссылок как на вашем сайте Squarespace. Последний использует формат год/месяц/день/заголовок поста в качестве формата ссылок в блоговых постах. Он также использует префикс вроде blog или blog-1 в адресах постов. Типичный адрес блоговой записи, используя стандартный домен Squarespace, будет выглядеть подобным образом:

https://example-website.squarespace.com/blog-1/2016/3/6/post-title

В админпанели WordPress вам надо зайти на страницу Settings > Permalinks. Там вы увидите список опций адресных структур. Ближайшим аналогом вашего старого адреса Squarespace будет адрес Day and Name.

WordPress

Щелкните по опции Day and Name и затем перейдите к пользовательской структуре. Вы увидите, что пользовательская структура автоматически заполнена годом, месяцем, днем, и тегами заголовка. Вам надо лишь добавить префикс blog-1. Например:

/blog-1/%year%/%monthnum%/%day%/%postname%/

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

Шаг шестой: импорт прочего контента из Squarespace в WordPress

Squarespace ограничивает импорт контента и, если вы использовали их функцию мероприятий или размещали там аудио- и видеофайлы, то вам придется вручную добавлять их на сайт Вордпресс. В зависимости от объемов контента этот процесс может занять некоторое время. Для некоторых продуктов вам понадобится плагин WordPress eCommerce вроде WooCommerce. Что же касается видеофайлов, то мы советуем вам размещать их на специальных сервисах по типу Ютуба и Вимео.

Шаг седьмой: узнаем Вордпресс

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


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


Как установить Facebook Remarketing/Retargeting Pixel в WordPress

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

Что такое Facebook Retargeting Pixel?

Вы замечали, что посетив какой-то сайт, у вас на Фейсбуке появляется его реклама? Это называется ретаргетингом или ремаркетингом, а такие сайты используют ретаргетинговую технологию, известную как Facebook Pixel. Этот инструмент не добавляет ничего на ваш сайт, он просто отсылает браузеру файлы cookie ваших пользователей, что позволяет Фейсбуку ретаргетировать ваших пользователей. Давайте посмотрим как вы можете установить себе такую фичу на сайт.

*Примечание: Meta постепенно отказывается от использования термина «pixel» и вводит вместо него термин «datasets».

Создание Facebook Retargeting Pixel

Первым делом вам надо зайти в свой профиль на Facebook Business Manager или Meta Business Suite и посетить страницу Events Manager. Затем щелкните по Connect Data Sources, выберите в всплывающем окошке Web в качестве источника данных, затем нажмите Connect.

WordPress

WordPress

Далее вам надо будет ввести название своего Meta Pixel и нажать кнопку Create Pixel.

WordPress

Добавьте URL-адрес вашего веб-сайта и нажмите кнопку Next. Выберите, как вы хотите подключить свой сайт. (Meta рекомендует использовать как Meta Pixel, так и Conversions API). Затем нажмите Next.

Далее Фейсбук предложит вам выбрать платформу или партнера вашего веб-сайта, чтобы продолжить процесс установки Pixel.

WordPress

Установить Pixel на свой сайт можно двумя способами: либо напрямую через Facebook, используя одну из партнерских интеграций (как показано на снимке экрана выше), либо вручную добавив код Pixel, предоставленный Facebook, на свой сайт.

Установка Facebook Pixel на WordPress с помощью партнерской интеграции Facebook

Из предложенных платформ выберите WordPress. Фейсбук проведет вас через пошаговые инструкции.

WordPress

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

Установка Facebook Pixel на WordPress вручную

Если вы предпочитаете устанавливать Facebook Pixel вручную, перейдите в раздел Data Sources (значок треугольника в левом меню Events Manager) и выберите Pixel, который вы хотите установить. Нажмите Continue Pixel Setup.

WordPress

Выберите Meta Pixel, затем нажмите Connect. Выберите Install Code Manually.

WordPress

Фейсбук выдаст вам код, который вам надо скопировать.

WordPress

Вам надо добавить скопированный код в раздел вашего шаблона Вордпресс. Самый простой способ сделать это — использовать плагин Insert Headers and Footers. После установки и активации плагина, зайдите в Settings > WP Headers and Footers.

WordPress

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

Бонусный шаг: создание своей аудитории с помощью Facebook Pixel

Теперь, когда вы успешно установили себе на сайт Facebook Pixel, следующим шагом будет создание аудитории под ретаргентиговую кампанию на Фейсбуке. Пользовательские аудитории позволяют отслеживать посетителей, которых вы уже знаете. Этими пользователями могут быть люди, которые уже лайкнули страницу или люди, которые подписались на ваш рассылочный список. Вот как вы можете создать пользовательские аудитории в Фейсбуке. Зайдите в панель Facebook Ads Manager и перейдите в раздел Audiences.

WordPress

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

WordPress

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

WordPress

Затем вам необходимо выбрать продолжительность в днях. Наконец, вам надо указать название аудитории. Используйте что-нибудь легко запоминающееся. Как только закончите, нажмите по кнопке Create audience, чтобы завершить процедуру. Повторяйте процесс, чтобы создать больше пользовательских аудиторий с помощью Facebook-ретаргетинга.

Показ рекламы пользовательским аудиториям с помощью Facebook Retargeting Pixel

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

WordPress


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


Как избежать потери цвета и насыщенности изображений в WordPress

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

Почему некоторые изображения теряют цвет и насыщенность в WordPress?

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

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

Способ первый

Откройте изображение в Фотошопе и нажмите по File > Save for Web

WordPress

У вас выскочит диалоговое окно, в котором вы можете отметить ячейку рядом с Convert the image in RGB.

WordPress

Способ второй

Если вы не довольны результатами первого способа, то можете воспользоваться этим. В Adobe Photoshop зайдите в меню Edit > Color Settings. У вас появится диалоговое окно с настройками цвета.

WordPress

Вам нужно выбрать North America Web/Internet из выпадающего меню настроек. Затем, под областью Color management policies выберите Convert to Working RGB. После этого щелкните по кнопке ОК, чтобы сохранить настройки. Теперь вам надо открыть оригинальное изображение или фотографию, которую вы собирались загрузить. Если профили не совпадают, то Фотошоп выдаст вам предупреждение и спросит что ему делать.

WordPress

Вам надо выбрать Convert document’s color to working space и затем щелкнуть ОК. Теперь цветовой профиль вашего снимка будет сконвертирован куда более аккуратно. Теперь можете сохранить изображение. Повторите процесс для всех фотографий, которые собираетесь загрузить. Теперь вы можете их загружать, не боясь насчет потери цвета или насыщенности.

Исправляем потерю цвета и насыщенности в WordPress с помощью GIMP

Gimp это мощная и, главное, бесплатная альтернатива Фотошопу. Вы также можете использовать его, чтобы конвертировать цветовые профили для своих загрузок на WordPress. GIMP просто обнаруживает каждое изображение, которое вы пытаетесь открыть, на наличие цветового профиля. Если цветовой профиль вашей картинки это Adobe sRGB, то GIMP автоматически предложит вам конвертировать его.

WordPress

В некоторых случаях GIMP не сможет определить профиль корректно и вам придется вручную поменять профиль. Вам потребуется знать какой цветовой профиль использовал ваш фотограф. Мы предполагаем, что это Adobe sRGB, но можем и ошибаться. Проверьте свою камеру в случае, если вы не уверены. У GIMP нет встроенного Adobe sRGB-профиля и вам придется скачать Adobe sRGB ICC Profile себе на компьютер.

Выберите свою операционную систему и следуйте указаниям на экране. Вы сможете скачать ICC профили в виде архива, распаковав который, вы обнаружите файл AdobeRGB1998.icc. Как только скачали ICC профиль, просто откройте свое изображение с помощью GIMP и щелкните по Image > Mode > Assign Color Profile. У вас должно появиться диалоговое окно вроде этого:

WordPress

Щелкните по выпадающему меню и найдите ICC профиль, который вы скачали ранее. Нажмите кнопку Assign для того, чтобы применить его. Как только вы примените цветовой профиль, GIMP сможет спокойно сконвертировать его в RGB без потери цветов. Просто нажмите по Image » Mode » Convert Color Profile…

WordPress

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


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