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

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

Когда и зачем может потребоваться отображение даты регистрации

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

Добавление колонки с датами регистраций пользователей в админке

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

WordPress

Под вкладкой колонок нажмите на users и затем щелкните по кнопке add column. Затем выберите Rigstered в выпадающем меню и щелкните по store updates. Теперь можете зайти на экран пользователей и увидите там графу Registered, отображающую дату регистрации пользователей.

WordPress

Отображение даты регистрации в профиле пользователя

Чтобы показывать дату регистрации в настройках профиля вам надо загрузить пользовательский плагин. Просто создайте новый файл, используя текстовый редактор вроде Блокнота и назовите его membersince.php Затем вставьте в него следующий код:

<?php


namespace ShowMemberSince;
add_action( 'plugins_loaded', 'ShowMemberSince\init' );
/**
 * Adding needed action hooks
*/
function init(){
  foreach( array( 'show_user_profile', 'edit_user_profile' ) as $hook )
		add_action( $hook, 'ShowMemberSince\add_custom_user_profile_fields', 10, 1 );
}
/**
 * Output table
 * @param object $user User object
 */
function add_custom_user_profile_fields( $user ){
	$table =
	'
<h3>%1$s</h3>


<table class="form-table">

<tr>

<th>
				%1$s
			</th>


<td>


Member since: %2$s

			</td>

		</tr>

	</table>

';
	$udata = get_userdata( $user-ID );
	$registered = $udata->user_registered;
	printf(
		$table,
		'Registered',
		date( "M Y", strtotime( $registered ) )
	);
}
?>

Сохраните файл и загрузите его на сайт WordPress. Вы можете подключиться к своему сайту с помощью FTP-клиента и зайти в папку wp-content/plugins/ Теперь можете зайти на страницу плагинов и активировать свой новый плагин. На этом все. Удостоверьтесь в работе плагина, просто зайдя в правку профиля у себя в админке, и вы увидите дату регистрации пользователя.

WordPress

Отображение даты регистрации пользователя у себя на сайте

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

function wpb_user_registration_date($atts, $content = null ) { 

$userlogin = shortcode_atts( array(
'user' => FALSE,
), $atts );

$uname = $userlogin['user'];     

if ($uname!== FALSE) {             

$user = get_user_by( 'login', $uname );  
if ($user == false) { 

$message ='Sorry no such user found.'; 


} else { 

$udata = get_userdata( $user-ID );
$registered = $udata->user_registered;

$message =	'Member since: ' . date( "d F Y", strtotime( $registered ) );

}
	
} else { 

$message = 'Please provide a username.'; 

} 

return $message; 

} 

add_shortcode('membersince', 'wpb_user_registration_date');

Затем вы можете отобразить дату регистрации пользователя просто используя шорткод вроде этого:

[membersince user=peter]

Только замените peter на имя пользователя, чью дату регистрации собираетесь отобразить.


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


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

Приступаем

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

Проблемы в переезде с ЖЖ в Вордпресс

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

Зачем переезжать с ЖЖ на ВП?

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

Прежде, чем начать

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

Импорт контента ЖЖ в Вордпресс

Вордпресс предлагает отличный инструмент импорта, который автоматически импортирует ваши записи ЖЖ, комментарии и теги в ВП. Просто зайдите в Tools > Import и щелкните по Livejournal.

WordPress

WordPress выдаст вам окно установки плагина для импорта ЖЖ. Вам также могут показать предупреждение о том, что плагин не был проверен на совместимость с вашей версией Вордпресса. Можете смело проигнорировать это предупреждение и нажать кнопку Install Now.

WordPress

Плагин по импорту ЖЖ будет установлен на ваш сайт и вам надо будет щелкнуть по ссылке активации плагина и запустить импортировшик.

WordPress

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

WordPress

Если у вас есть защищенные паролем посты на сайте ЖЖ, то вам понадобится ввести пароль. Как только все будет подготовлено, нажмите на Connect to LiveJournal and Import. WP начнет импортировать ваш контент. Процесс разбит на несколько разных шагов и может потребовать время, если у вас в ЖЖ много постов и комментариев. Если импорт оборвется, то можете спокойно попробовать еще раз, так как импортировщик достаточно умен, чтобы избегать повторный импорт одних и тех же постов. Как только все будет сделано, вы увидите соответствующее сообщение, уведомляющее вас о завершении работы.

WordPress

Можете зайти в раздел Posts, чтобы увидеть все свои посты.


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


Вы замечали, что в WordPress версии 4.4. произошло небольшое изменение с полями для комментариев? Теперь панель комментирования расположена вверху, в то время как поля Name, Email и Website теперь находятся снизу. В этой статье мы расскажем как вернуться к прошлому состоянию.

Почему форма комментирования была изменена?

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

WordPress

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

Сдвиг поля комментирования вниз

Просто вставьте этот код файл functions.php вашего сайта.

function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}

add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom' );

Затем можете зайти на сайт в качестве незарегистрированного пользователя и посмотреть на изменения.

WordPress


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


Если вы являетесь разработчиком 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://www.coma.lv
 * Version: 1.0
 * Author: Coma.lv
 * Author URI: https://www.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


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

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

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

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

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

WordPress

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

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

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

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

WordPress


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


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

Что такое Codeguard?

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

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

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

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

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

WordPress

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

WordPress

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

WordPress

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

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

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

WordPress

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

Обзор CodeGuard

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


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


Прежде чем мы затронем вопрос постоянных ссылок WordPress, важно дать определение того, что такое SEO-дружелюбный URL. Такой адрес содержит ключевые слова, которые объясняют суть статьи и их легко прочесть как человеку, так и поисковикам. Они также повышают шансы на более высокую выдачу в поисковых системах. Пример SEO-дружелюбного адреса:

https://www.coma.lv/how-to-install-wordpress/

А как выглядит НЕ дружелюбный к SEO адрес?

https://www.coma.lv/?p=10467

По умолчанию WordPress теперь использует заголовок поста в URL, что является наиболее СЕО-дружелюбной структурой адресов. Так почему же тогда новички продолжают задавать вопросы о структуре постоянных ссылок? Это потому, что в прошлом WordPress не использовал красивые адреса, известные также как постоянные ссылки. По умолчанию Вордпресс использовал не столь дружелюбные к СЕО адреса, как из примера выше. Это изменилось в версии WordPress 4.2, поэтому если вы лишь недавно установили Вордпресс, то у вас адреса дружелюбны к поисковой оптимизации. Вы также можете с легкостью подтвердить настройки своих постоянных ссылок в админке Вордпресс.

Разъяснение страницы настроек постоянных ссылок

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

WordPress

Как видите, там есть целое множество опций. Давайте попробуем разобраться. Первая опция, которая называется plain, использует стандартную структуру адресов в WordPress. Эта опция не дружелюбна к поисковой оптимизации.

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

Однако если речь идет о публикации новостей, то вы можете желать, чтобы в ваших адресах отображалась дата, указывая тем самым на свежесть новости и улучшая опыт использования. В нашем понимании эти две структуры подойдут лишь для новостных сайтов. Бизнес-сайты должны избегать их. Опция Post Namе самая лучшая, поскольку она самая короткая и понятная. Если у вас большая публикация, то вы можете использовать пользовательскую структуру, которая тоже может быть дружелюбной к СЕО. Например, если у вас много постов, вы можете добавлять в адрес их категорию, чтобы пользователи не путались. Чтобы использовать пользовательскую адресную структуру, вам понадобится добавлять специальные теги в панель с пользовательской структурой. Например, мы используем:

/%category%/%postname%/

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

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

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

• %year% – год поста, четыре цифры, например 2016.
• %monthnum% – месяц года, например 05
• %day% – день месяца, например 28
• %hour% – час дня, например 15
• %minute% – минута часа, например 43
• %second% – секунда минуты, неапример 33
• %postname% – обработанная версия заголовка поста. Например если ваш пост называет This Is A Great Post!, то его название в адресе превратится в this-is-a-grat-post.
• %post_id% – уникальный ID номер вашего поста, например 423
• %category% – обработанная версия названия категории.
• %author% – обработанная версия имени автора.

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

Предупреждение: важная заметка для уже работающих сайтов

Если ваш сайт работает уже шесть и более месяцев, то, пожалуйста, не меняйте структуру постоянных ссылок. Вам не надо иметь структуру, которую мы использовали. Меняя структуру постоянных ссылок, вы рискуете потерять шейры в социальных сетях и рискуете утратить существующую позицию выдачи. Если вам необходимо изменить структуру постоянных ссылок, то наймите профессионала, который сможет сделать правильные редиректы. Правда, вы в любом случае потеряете количество шейров на страницах. У этого правила есть только одно исключение: если ваш сайт использует plain URL, то вне зависимости от его возраста, вам следует обновить структуру адресов для более лучшего СЕО. Да, вы потеряете количество шейров в соцсетях, но в долгосрочной перспективе это пустяки по сравнению с тем эффектом, который вам даст изменение структуры адресов.


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


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

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

В админпанели 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