WordPress Туториалы

Как показать в WordPress всплывающее окно подтверждения при выходе

Авг 22, 2016/от Vadim Pavlovich

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

Что это такое?

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

Всплывающее окно (pop-up) позволяет завершить написание комментария.

Такое окно можно увидеть в редакторе WordPress. Если у вас имеется несохранённые изменения, и вы попытаетесь закрыть страницу или же закрыть браузер, то вы увидите предупреждающее всплывающее окно.

Давайте посмотрим, как можно добавить данную функцию к формам на вашем сайте.

Показываем всплывающее окно для неотправленных форм в WordPress

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

Начнём!

Для начала вам необходимо создать новую папку на вашем компьютере и назвать её confirm-leaving. В этой папке создайте ещё одну папку и назовите её js.

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

<?php

function wpb_confirm_leaving_js() { 

     wp_enqueue_script( 'Confirm Leaving', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
} 
add_action('wp_enqueue_scripts', 'wpb_confirm_leaving_js');

Эта php функция просто добавляет файл JavaScript для вашего сайта. Сохраните этот файл под именем  confirm-leaving.php в папке confirm-leaving

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

Создайте новый файл и вставьте в него данный код:

<?php

 jQuery(document).ready(function($) { 

$(document).ready(function() {
    needToConfirm = false; 
    window.onbeforeunload = askConfirm;
});

function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here 
        return "Your unsaved data will be lost."; 
    }
}
 
$("#commentform").change(function() {
    needToConfirm = true;
});

 })

Этот код JavaScript определяет, есть ли несохранённые изменения в форме для комментариев. Если пользователь пытается уйти со страницы или же закрывает окно, будет показано предупреждающее всплывающее окно.

Вам необходимо сохранить данный файл под именем confirm-leaving.js в папку js.

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

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

Как только вы подключитесь, необходимо загрузить папку confirm-leaving в папку /wp-contents/plugins/ на вашем сайте.

После этого, вам надо войти в панель администратора WordPress и зайти на страницу с плагинами. Найдите плагин под названием ‘Confirm Leaving’ в списке установленных плагинов и нажмите на ‘activate’ под названием.

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

Добавляем оповещения к остальным формам в WordPress

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

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

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

Найдите строку, которая начинается с тега <form> . В этом теге вы найдёте атрибут ID.

В этом примере, ID нашей формы — wpforms-form-170. Нужно скопировать этот атрибут.

Теперь откройте файл confirm-leaving.js и добавьте ID атрибут после #commentform.

Удостоверьтесь, что вы разделили запятой #commentform и ID вашей формы. Также необходимо добавить знак # в качестве префикса к ID атрибуту вашей формы.

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


jQuery(document).ready(function($) { 

$(document).ready(function() {
    needToConfirm = false; 
    window.onbeforeunload = askConfirm;
});

function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here 
        return "Your unsaved data will be lost."; 
    }
}

$("#commentform,#wpforms-form-170").change(function() {
    needToConfirm = true;
});

 })

Сохраните все изменения и загрузите этот файл на ваш вебсайт.

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

Также вы можете скачать плагин confirm-leaving. Он действует лишь по отношению к формам комментариев, но вы можете отредактировать код, чтобы он действовал и на остальные формы.

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

Если вам понравилась эта статья, то милости просим подписаться на наш канал в YouTube, где вы найдёте видеоучебники по WordPress. Также нас можно найти на Twitter или Facebook.

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

Как установить WordPress на ваш ПК используя WAMP

Авг 22, 2016/от Vadim Pavlovich

Знали ли вы, что существует возможность установить WordPress прямо на ваш компьютер для изучения и тестирования? Процесс установки WordPress на ваш ПК также называется установкой локального сервера (localhost). Зачастую дизайнеры тем и разработчики плагинов устанавливают WordPress на локальный сервер, чтобы ускорить процесс разработки. Обычный пользователь может использовать локальный сервер, чтобы тестировать плагины и/или делать изменения на сайте, перед тем как данные изменения увидят посетители. В этой статье мы покажем вам, как установить WordPress на ваш компьютер с помощью WAMP.

Помните, что если вы установите WordPress локально на ваш компьютер, то вы будете единственный, кто увидит этот сайт. Если вы хотите иметь публичный сайт WordPress, то вам необходимо иметь доменное имя и хостинг. Мы рекомендуем вам посмотреть данное руководство: Как установить WordPress.

Что такое WAMP?

WAMP или WampServer это сборка для Windows из веб-сервера Apache, PHP и MySQL. Другими словами, вам нужно установить WAMP, чтобы установить вам собственный локальный сервер и установить WordPress на Windows. Существуют также другие клиенты для Windows, например XAMPP, но мы рекомендуем использовать WAMP. Он бесплатен и прост в освоении.

Установка Wampserver на ваш ПК

Первым делом, необходимо перейти на сайт WampServer и скачать последнюю версию WampServer. Вы увидите различные опции скачивания на данной странице, просто выберите ту, которую подходит для вашего Windows (64-bit или 32-bit). Если не знаете, что выбрать, качайте 32-битную версию, она будет работать также и на 64-битном Windows.

Как только вы скачали WampServer, запустите инсталлятор и следуйте инструкциям на экране. В какой-то момент, установщик попросит указать местонахождение браузера по умолчанию. По умолчанию он будет использовать Internet Explorer, но вы можете изменить браузер на любой другой, указав его в папке Program Files.

Как только закончите, запускайте WampServer.

Установка базы данных для WordPress

WampServer идёт в комплекте с phpMyAdmin, это веб-приложение, которое позволяет управлять базами данных MySQL. Нажмите на иконку WampServer в панели задач и запустите phpmyadmin.

phpMyAdmin откроет новое окно в браузере. Нажмите на Databases в phpmMyAdmin, чтобы создать новую базу данных для WordPress. Выберите имя для базы данных и нажмите кнопку Create.

Installing WordPress on Windows with WAMP Установка WordPress для Windows с помощью WAMP

Скачайте WordPress c сайта WordPress.org. Извлеките zip файлы и скопируйте папку wordpress. Перейдите в C:\wamp\www и вставьте папку wordpress туда. Вы можете переименовать эту папку, например в mojsajt и так далее. Мы решили переименовать эту папку в mysite. Теперь откройте браузер и перейдите:

http://localhost/mysite/

WordPress проинформирует вас, что он не может найти файл wp-config.php . Нажмите на кнопку Create a Configuration File, чтобы создать его.

На следующей странице, вам необходимо предоставить информацию о вашей базе данных. В нашем случае, мы назвали её test_db.

Следует знать, что стандартный логин БД является root, а пароль отсутствует. Нажмите кнопку отправки данных и WordPress создаст файл конфигурации для вас.

После этого, вы увидите страницу, на которой будет написано, что WordPress успешно создал файл конфигурации и вы можете перейти к установке. Нажмите на кнопку Run Install.

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

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

Устранение конфликта WAMP со Skype

Если у вас установлен Skype и у вас включен WampServer, у вас могут возникнуть неполадки из-за конфликта со Skype. Этот конфликт вызван тем, что Apache и Skype используют один порт — 80. Эту проблему легко решить. Зайдите в Skype и перейдите в Настройки » Опции. Кликните на Дополнительно, далее нажмите на Соединения. Уберите галочку со строки, где написано Использовать порт 80 и 443 в качестве альтернатив для входящих соединений. Сохраните изменения и перезагрузите Skype.

Активация постоянных ссылок в WAMP

По умолчанию, данная функция не работает на локальном сервере. Все ваши URL будут выглядеть в стиле localhost/mysite/?p=18. Если вы перейдёте в Настройки » Постоянные ссылки и используете одну из опций, то столкнётесь с ошибками «Страница не найдена». Мы уже писали о решении, узнайте, как включить постоянные ссылки в WAMP.

Переход из WAMP в интернет

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

Мы надеемся, что эта статья помогла вам установить WordPress на вашем компьютере Windows, используя WAMP. Иметь локальный сервер полезно для обучения и для тестирования. Помните, что если вы хотите запустить блог, который должны видеть другие люди, то вам не нужно устанавливать WordPress на ваш ПК. Вам нужно установить WordPress на хостинг. Если у вас есть какие-либо вопросы, смело задавайте их в комментариях.

Как установить плагин в WordPress – пошаговая инструкция для новичков

Авг 21, 2016/от Alina

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

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

Если вы используете WordPress.com, то вы не сможете установить плагины.
Мы часто получаем жалобы от пользователей, которые не видят меню с плагинами в своей панели управления на WordPress. Все из-за того, что они используют WordPress.com, у которого есть свои ограничения.
Чтобы использовать плагины, вам нужно будет использовать независимый хостинг WordPress.org (читайте о разнице между независимым WordPress.org и WordPress.com).
Если вы хотите перейти с WordPress.com на WordPress.org, можете ознакомиться с нашим уроком о том, как правильно перейти с WordPress.com на WordPress.org.

Как установить плагин в WordPress

Для простоты понимания вы можете посмотреть следующее видео о том, как устанавливается плагин в WordPress:

Однако если вы хотите следовать письменной пошаговой инструкции, читайте далее.
Мы поговорим о всех трех методах: установка плагина в WordPress с использованием поиска, загрузка плагина, и установка вручную с использованием FTP.

Установка плагина с использованием WordPress Plugin Search

Самый легкий способ установки плагина на WordPress – через поиск в директории плагинов. Единственным недостатком этого варианта является то, что нужный плагин должен быть доступен в директории плагинов WordPress, которая ограничена только бесплатными плагинами.
Первое, что вам нужно сделать, это зайти в свой раздел администратора на WordPress и нажать Plugins > Add New.

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

Выберите плагин, который вам больше всего подходит. Так как мы искали Floating Social Bar и она оказалась первой в списке, мы нажмем кнопку “Install Now”.

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

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

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

Установка плагина с использованием WordPress Admin Plugin Upload

Платные плагины для WordPress не доступны в директории плагинов WordPress. Эти плагины нельзя установаить, используя первый метод.

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

Для начала вы должны скачать плагин из источника (это будет zip файл). Далее вам нужно войти в раздел администратора на WordPress и открыть страницу Plugins > Add New.

После этого нажмите кнопку Upload Plugin в верху страницы.

Таким образом вы попадете на страницу загрузки плагинов. Здесь вам нужно нажать на кнопку “choose file” и выбрать плагин, который вы ранее скачали на свой компьютер, а потом – кнопку “install now”.

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

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

Мануальная установка плагина для WordPress с использованием FTP

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

Лучший выход из такой ситуации – установка плагина вручную через FTP.

Метод FTP менеджера – наименее подходящий для новичков.

Сначала вам нужно скачать файл плагина (это будет zip файл). Далее – распакуйте этот файл на ваш компьютер.

При распаковке zip файла плагина будет создана новая папка с таким же названием. Эту папку вам будет нужно загрузить на ваш вебсайт, используя FTP-клиент.

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

Откройте FTP-клиент на вашем компьютере и подключитесь к вашему вебсайту, используя логин и пароль, предоставленные вашим веб-хостингом. После этого найдите канал /wp-content/plugins/

Загрузите папку, которую вы извлекли из zip файла, в папку /wp-content/plugins/ на вашем веб-сервере.

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

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

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

Как создать тестовую среду для сайта на WordPress

Авг 21, 2016/от Vadim Pavlovich

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

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

Создание тестового сайта
Использование Git и BitBucket
Перенос изменений с локального сервера на BitBucket
Развёртывание изменений из BitBucket в тестовый сайт

Что такое тестовая среда?

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

Существует небольшая проблема с этим подходом. Что делать, если всё работало на локальном сервере, а на интернет сервере что-то не работает? Это может вызвать проблемы на установленных сайтах, что также повлияет и на оценку поисковых движков, на продажи, на первое впечатление у пользователей и так далее.

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

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

Установка тестовой среды через cPanel

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

Чтобы сделать это, зайдите в cPanel (в других панелях управления всё похоже, ищите раздел Домены или Субдомены). Под разделом Домены, кликните на Субдомены.

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

В cPanel должно автоматически заполниться текстовое поле Document Root, с указанием местонахождения вашего субдомена. Вы можете изменить его, но можно это и не делать (public_html/staging).

Теперь вам нужно нажать на Create когда вы закончите. Должен показаться субдомен в таблице ниже.

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

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

В cPanel перейдите в раздел FTP Account. Заполните поля в разделе Add FTP Account.

Directory должна совпадать с директорией, что вы указали при создании субдомена. Нажмите Create FTP Account чтобы создать новый аккаунт. Этот аккаунт будет иметь лишь доступ к указанной директории, а не ко всему серверу.

Копирование данных с рабочего сайта в тестовую среду

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

Простейший путь сделать это — через phpMyAdmin. Зайдите в phpMyAdmin через cPanel, и выбреите вашу текущую базу данных. Как только вы это сделаете, нажмите на раздел Operations в строке меню.

Здесь вам нужно будет найти блок Copy Database To. В текстовом поле, введи название вашей тестовой базы данных (если вы ещё не создали её, обязательно выберите галочку CREATE DATABASE before copying и дайте ей какое-нибудь название). Вам нужно будет скопировать и структуру и данные, а также удостовериться, что все остальные настройки остаются по умолчанию. Нажмите Go и немного подождите. Помните, что для больших баз данных может потребоваться некоторое время.

Как только ваша база данных будет скопирована, вам нужно будет выбрать её из боковой панели слева. phpMyAdmin откроет вам новую скопированную базу данных. Вам нужно нажать на SQLtab в меню в phpMyAdmin.

Теперь мы заменим все отсылки с нашего рабочего сайта на тестовый сайт, чтобы убедится, что всё работает нормально, когда мы используем БД для тестирования. Чтобы сделать это, надо выполнить следующие SQL запросы.

UPDATE wp_options SET option_value = REPLACE(option_value, 'ORIGINAL_URL', 'NEW_URL');
UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, 'ORIGINAL_URL', 'NEW_URL');
UPDATE wp_posts SET guid = REPLACE(guid, 'ORIGINAL_URL', 'NEW_URL');
UPDATE wp_posts SET post_content = REPLACE(post_content, 'ORIGINAL_URL', 'NEW_URL');

Введите следующие запросы в окно ввода запросов SQL, заменяя следующие значения:

ORIGINAL_URL – URL вашего сайта, например http://example.com . Вы можете найти его в панели администратора WordPress: Settings > General > WordPress Address (URL)
NEW_URL – введите новый URL, это будет ссылка на созданный вами ранее тестовый сайт: http://staging.example.com
wp_ – Если у вашего вебсайта есть свой префикс для таблиц баз данных, замените wp_ на него.

Нажмите Go чтобы выполнить запросы. Должно появится окно подтверждения.

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

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

/wp-content/uploads
/wp-content/themes
wp-content/plugins

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

Зайдите в cPanel и нажмите File Manager в секции Files.

cPanel запустит файловый менеджер. Вам нужно будет перейти в директорию рабочего сайта wp-content (обычно/public_html/wp-content), где вы сможете увидеть ваши темы, плагины и загруженные папки.

Для каждой папки, вам необходимо нажимать правую кнопку мыши и выбирать «Копировать». Вам будет предложено выбрать местоположение, куда вы хотите скопировать папку. Мы хотим скопировать её в директорию, где мы создали наш тестовый субдомен. Это также является директорией, куда вы загрузили WordPress чуть ранее. /public_html/staging/wp-content/

Данное действие скопирует каждую папку в тестовую директорию wp-content .

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

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

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

Зайдите на ваш тестовый сайт через субдомен, что вы создали ранее. Если в вашей тестовой папке нету файла wp-config.php , то WordPress создаст его и спросит вас о деталях вашей базы данных. Если у вас есть этот файл, то не забудьте изменить его и указать данные вашей тестовой базы данных.

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

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

Настройка и решение проблем вашей тестовой среды

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

Убедитесь, что имя домена верно

Посмотрите на URL вашей панели администратора. Если это это ваш субдомен, то он обнаружит новую конфигурацию. Если нет, то SQL запросы, что были выполнены ранее, не поменяют URL тестового сайта. Посмотрите параметры siteurl и home в таблице wp_options.

Убедитесь, что файлы скопированы

Посетите раздел Медиафайлы в панели администратора WordPress и проверьте, на месте ли все картинки, видео и так далее. Если так, то папка загрузок скопирована верно. Если нет, то проверьте, правильно ли скопирована папка с загрузками (обычно /public_html/staging/wp-content/uploads).

Выключите XML Sitemaps в SEO WordPress

Если вы пользуетесь SEO, то обязательно отключите опцию XML Sitemaps. Это поможет предотвратить от индексирования поисковиками ваш тестовый сайт.

Ограниченный доступ к сайту

Чтобы не дать доступ к тестовому сайту случайным пользователям, установите и активируйте плагин Restricted Site Access. После установки, перейдите в Settings > Reading чтобы сконфигурировать плагин.

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

Также можно защитить всю директорию паролем с помощью htpassword. Метод, показанный в этой статье, предназначен для /wp-admin/, но вы можете применить его для любой папки сайта.

Обновите постоянные ссылки

Перейдите в Settings > Permalinks и нажмите Save, чтобы убедиться, что структура постоянный ссылок обновлена. Если вы получаете ошибки 404 на тестовом сайте, то проблема скорее всего именно в этом.

Перенос изменений на тестовый сайт из GitHub или BitBucket

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

GitHub или BitBucket, что лучше использовать

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

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

Начало работы с BitBucket

Шаг 1. Установка Git

Для начала вам нужно скачать и установить Git. Windows (или Mac).

Шаг 2. Создание первого репозитория

Если вы установили Git, то следующим шагом будет регистрация бесплатного аккаунта BitBucket. Как только зарегистрируетесь, зайдите в панель BitBucket и нажмите на кнопку Create new repository.

Введите имя и описание вашего репозитория, которое поможет идентифицировать ваш проект. Чтобы сделать репозиторий приватным, нажмите на галочку напротив Access Level. Далее, убедитесь, что Git выбран в качестве вашего репозитория. Остальные опции можно оставить как есть и нажать на кнопку создать репозитория. BitBucket создаст пустой репозиторий.

Так как вы будете работать в вашей локальной установке WordPress, нажмите на I have an existing project to push up.

Шаг 3: Добавьте локальную директорию в Git

Всё готово к тому, чтобы перенести ваш локальный проект WordPress в BitBucket. Запустите Git Bash на вашем компьютере. Да, это программа с командной строкой и нужно будет вводить команды, но не волнуйтесь, это очень легко.

Если не хотите использовать командную строку, то вы можете использовать графические интерфейсы: Github for Windows и/или TortoiseGit.

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

В Git Bash переместитесь в директорию проекта, введя путь до директории проекта:

cd /C/xampp/htdocs/wordpress/wp-content/themes/myawesometheme
git init

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

git add .

После добавления всех файлов, далее нужно зафиксировать всё это.

git commit -m "Adding all project files as the first commit"

Шаг 4. Синхронизируйте изменения с вашим репозиторием Bitbucket

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

git remote add origin

Перенесите все ваши файлы в репозиторий BitBucket.

git push -u origin --all # pushes up the repo and its refs for the first time

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

git add . 
git commit -m "Added new features"
git push -u origin --all

Перенос изменений из BitBucket на тестовый сайт

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

Чтобы сделать это, мы рекомендуем использовать Ftploy. Базовый бесплатный аккаунт позволяет работать с одним проектом. Он следит за изменениями, сделанными по отношению к вашему репозиторию BitBucket, а после переносит их на ваш веб-сервер. Для начала, вам нужно создать аккаунт в Ftploy. После этого, вам надо добавить детали сервера.

Чтобы сконфигурировать новый сервер, выберите Servers » New Server из навигационной панели.

Заполните все поля теми значениями, которые вы использовали для конфигурации тестового FTP аккаунта.

Нажмите на Test Connection чтобы убедиться, что FTPloy может подсоединиться к серверу, а после нажмите на Save Server.

Чтобы создать проект, выберите Projects » New Project из навигационного меню, выбрав GitHub или BitBucket.

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

Когда вы сделаете изменение в вашем репозитории BitBucket, FTPloy возьмёт изменённые файлы и загрузит на выбранный сервер.

Перенос изменений на рабочий сайт

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

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

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