WordPress Туториалы

javscript-1

Как правильно добавить скрипты и стили в WordPress

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

Ошибка

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

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

Хоть это и просто, но это неверный способ добавления скриптов в WordPress. Для примера, если вы загружаете jQuery вручную и другой плагин тоже грузит jQuery, то получается, что jQuery загружается дважды. Также две разные версии могут инициировать конфликт.

Давайте посмотрим, как нужно делать.

Зачем ставить скрипты в очередь?

У WordPress имеет большое сообщество разработчиков. Тысячи людей по всему миру придумывают темы и пишут плагины для WordPress. Чтобы убедиться, что всё работает верно и никто не наступает друг другу на ногу, WordPress имеет специальную функцию очереди для скриптом. Функция предоставляет систематическую загрузку JavaScript и стилей. Используя функцию  wp_enqueue_script ,  вы говорите WordPress когда нужно грузить скрипт, где грузить и при каких условиях.

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

Как правильно вставить скрипты в очередь в WordPress

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

<?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

Пояснение:

Мы начали регистрацию нашего скрипта через функцию wp_register_script(). Данная функция принимает 5 параметров:

  • $handle – Удерживать уникальное имя вашего скрипта. Мы назвали наш скрипт “my_amazing_script”
  • $src – src это местоположение вашего скрипта. Мы используем функцию plugins_url чтобы получить правильный URL папки нашего плагина. Как только WordPress найдёт его, он также найдёт скрипт с названием amazing_script.js в этой папке.
  • $deps – deps это для зависимостей. Так как наш скрипт использует jQuery, то мы добавили jQuery в область зависимостей. WordPress автоматически загрузит jQuery, если он ещё не был загружен.
  • $ver – Это номер версии нашего скрипта. Параметр необязателен.
  • $in_footer – Мы хотим загрузить наш скрипт в нижний колонтитул, потому нам надо поставить это значение на true. Если вы хотите загрузить скрипт в шапку, то поставьте false.

После расставления всех параметрво в wp_register_script, вы можете просто вызвать скрипт, который всё сделает: wp_enqueue_script()

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

Как правильно поставить в очередь стили

Так же как и скрипты, вы можете поставить в очередь свои стили. Посмотрите на пример:

<?php
function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?>

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

В примерах выше мы использовали plugins_url для уточнения местоположения скрипта или стиля, который мы хотим поставить в очередь. Однако, если вы используете функцию для очередей в вашей теме, то используйте get_template_directory_uri(). Если вы работаете с дочерней темой, то используйтеget_stylesheet_directory_uri(). Вот пример:

<?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

Мы надеемся эта статья помогла вам научиться правильно добавлять JavaScript и стили в темы и плагины WordPress. Для вопросов и комментариев пишите нам в комментарии.

Дополнительные ресурсы:

 


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


Dart Widgets

Как сделать FAQ в виде гармошки в WordPress

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

Что за гармошка?

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

WordPress

Добавление FAQ гармошки на jQuery

Перед тем как добавлять гармошку для ЧЗВ, убедитесь, что у вас есть готовый раздел с ЧЗВ. Можете прочитать наше пособие, как добавить раздел FAQ в WordPress.

Что ж, давайте начнём создавать гармошку. WordPress идёт вкупе с библиотекой jQuery, однако тем для jQuery у него нет. Мы загрузим их с Google CDN и вставим скрипты в WordPress. Мы также создадим короткий код, который будет показывать наши ЧЗВ.

Создайте папку на вашем рабочем столе и назовите её my-accordion. Откройте блокнот и создайте файл my-accordion.php и вставьте данный код в него:

<?php

function accordion_shortcode() { 

// Registering the scripts and style
wp_register_style('wpb-jquery-ui-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.css', false, null);
wp_enqueue_style('wpb-jquery-ui-style');
wp_register_script('wpb-custom-js', plugins_url('/accordion.js', __FILE__ ), array('jquery-ui-accordion'), '', true);
wp_enqueue_script('wpb-custom-js');

// Getting FAQs from WordPress FAQ Manager plugin's custom post type questions
$posts = get_posts(array(  
'posts_per_page' => 10,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'question',
));
	
// Generating Output 
$faq  .= '<div id="accordion">'; //Open the container
foreach ( $posts as $post ) { // Generate the markup for each Question
$faq .= sprintf(('<h3><a href="">%1$s</a></h3><div>%2$s</div>'),
$post->post_title,
wpautop($post->post_content)
);
}
$faq .= '</div>'; //Close the container
return $faq; //Return the HTML.
}
add_shortcode('faq_accordion', 'accordion_shortcode');

После сохранения изменений, создайте новый файл и назовите его accordion.js. Вставьте данный код и сохраните файл:

jQuery(document).ready(function() {
jQuery("#accordion").accordion();
})();

Теперь наш плагин готов к загрузке. Откройте свой FTP клиент и загрузите папку в директорию сайта /wp-contnt/plugins/. Теперь вам нужно активировать плагин в разделе Плагины в панели администратора.

Добавление страницы с ЧЗВ и гармошкой

Чтобы добавить FAQ в гармошку, нужно создать новую страницу — Pages » Add New. Дайте странице название и вставьте в редактор данный код:

[faq_accordion]

Сохраните и опубликуйте страницу, и вы увидите ваш FAQ с красивым меню в стиле гармошки.

Изменение стиля и цвета гармошки

Для изменения стиля и цвета гармошки можно использовать jQuery UI темы. Вы можете скачать их и установить на свой сайт — на сайте jQuery есть целый раздел с jQuery UI темами. Как видно, мы использовали тему под названием Humanity в нашем плагине. Вы также можете создавать или изменять темы в Themeroller.

WordPress

Надеемся эта статья помогла вам разобраться в том, как добавить FAQ в виде гармошки на сайте WordPress.

 


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


comments

Как добавить подсказки на jQuery в форме комментариев на WordPress

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

WordPress

Зачем это нужно?

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

Этим самым вы улучшаете внешний вид и взаимодействие с пользователем.

Как добавить подсказки на jQuery

Первым делом нужно создать папку на рабочем столе и назвать её wpb-comment-tooltips. Внутри этой папки, создайте три файла:

  • wpb-comment-tooltips.php
  • wpb-tooltip.css
  • wpb-tooltip.js

Используйте любой текстовый редактор, чтобы создать эти файлы. Как только создадите файлы, откройте wpb-comment-tooltip.php в тектовом редакторе. Скопируйте и вставьте это код в файл:

add_action( 'comment_form_before', 'wpb_comment_tooltips' );

function wpb_comment_tooltips() {
wp_enqueue_script('wpb-tooltip-jquery', plugins_url('/wpb-tooltip.js', __FILE__ ), array('jquery-ui-tooltip'), '', true);
wp_enqueue_style('wpb-tooltip-css', plugins_url('/wpb-tooltip.css', __FILE__), false, null);
}


function alter_comment_form_fields($fields){
    $fields['email'] =  '

<label for="email">' . __( 'Email', 'twentythirteen' ) . '</label> ' .
      ( $req ? '<span class="required">*</span>' : '' ) .
      '<input id="email" title="Your email is safe with us, see our privacy policy." name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' />

';  
    $fields['url'] = '

<label for="url">' .
      __( 'Website', 'twentythirteen' ) . '</label>' .
      '<input id="url" name="url" title="Your website or any social media profile URL" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" />

';  
	  $fields['author'] = '

' .
      '<label for="author">' . __( 'Name', 'twentythirteen' ) . '</label> ' .
      ( $req ? '<span class="required">*</span>' : '' ) .
      '<input id="author" title="Please use your real name, no keywords." name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />

';
    return $fields;
}
add_filter('comment_form_default_fields','alter_comment_form_fields');
?>

В данном коде мы сначала создали заголовок плагина, дали плагину имя и описание. После мы создали наши файлы JavaScript и CSS.

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

title="Пожалуйста укажите своё реальное имя."

Теперь время добавить немного кода jQuery. Откройте файл wpb-tooltip.js и добавьте этот код в него:

(function($) {
$( "#commentform" ).tooltip({ position: {
	my: "center bottom-10",
        at: "center top",
        using: function( position, feedback ) {
          $( this ).css( position );
          $( "

<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        } } });
})(jQuery);

В этом коде,  #commentform это селектор, где jQuery будет показывать подсказки, а .tooltip это часть контента, где мы определили позиции для подсказок.

Финальная часть — нужно добавить немного CSS в файл wpb-tooltip.css . Просто скопируйте и вставьте этот код:

.ui-tooltip, .arrow:after {
    background: #356aa0;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px #356aa0;
	max-width:350px;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px #356aa0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }

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

Вот и всё. Теперь вы успешно создали плагин, который добавляет подсказки на jQuery в форму комментариев. Теперь вам нужно загрузить папкуwpb-comment-tooltips  с компьютера в папку /wp-content/plugins/  на вашем веб-сервере, используя FTP клиент, например FileZilla. Как только вы загрузите плагин, перейдите на страницу с плагинами в панели администратора WordPress и активируйте плагин.

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


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


985884554

Как добавить эффект плавной прокрутки наверх с помощью jQuery

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

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

Что такое плавная прокрутка и когда её нужно использовать?

WordPress

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

&lt;a href=&quot;#&quot; title=&quot;Back to top&quot;&gt;^Top&lt;/a&gt;

Она просто моментально прокрутит страницу наверх. Функционально, но как-то дёшево и сердито. Плавная прокрутка — это совсем другое дело. Она плавно прокрутит страницу наверх, что создаёт приятный эффект.

Добавление эффекта плавной прокрутки с помощью jQuery

Чтобы добавить данный эффект, мы будем использовать jQuery, немного CSS, и всего одну строку кода HTML в нашей теме WordPress. Для начала откройте текстовый редактор и создайте файл smoothscroll.js. Скопируйте и вставьте этот код в файл.

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() &amp;lt; 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

Сохраните и загрузите файл в вашу директорию WordPress под названием /js/ (смотрите также: Как использовать FTP для загрузки файлов WordPress). Если ваша тема не имеет такой папки, то создайте её и загрузите файл smoothscroll.js в неё. Это скрипт jQuery, который добавляет эффект плавной прокрутки к кнопке, направляющей пользователей наверх.

Далее вам нужно добавить smoothscroll.js к вашей теме. Чтобы сделать это, мы добавим скрипт в WordPress. Скопируйте и вставьте этот код в файл темы functions.php .

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

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

&amp;lt;a href=&quot;#top&quot; id=&quot;smoothup&quot; title=&quot;Back to top&quot;&amp;gt;&amp;lt;/a&amp;gt;

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


#smoothup { 
height: 40px; 
width: 40px; 
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url(&quot;http://www.example.com/wp-content/uploads/2013/07/top_icon.png&quot;); 
-webkit-transition-duration: 0.4s; 
-moz-transition-duration: 0.4s; transition-duration: 0.4s; 
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

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

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

 


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


maxresdefault

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

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

WordPress

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

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

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

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

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

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

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

WordPress

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

WordPress

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

WordPress

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

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

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

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

WordPress

Найдите строку, которая начинается с тега <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


install-wordpress-on-wamp-featured

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

Знали ли вы, что существует возможность установить 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.

WordPress

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

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

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

WordPress

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

WordPress

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, чтобы создать его.

WordPress

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

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

WordPress

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

WordPress

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

WordPress

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

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

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

WordPress

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

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

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

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

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


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


wordpress-plugins

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

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

installplugins

 

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

Если вы используете 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.

searchplugins (1)

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

pluginsearchresults

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

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

activateplugin

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

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

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

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

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

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

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

uploadpluginwpadmin

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

pluginuploadpage

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

plugininstalledmanual

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

 

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

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

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

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

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

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

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

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

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

ftppluginupload

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

installedplugins

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

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


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


Bitbucket-vs-GitHub

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

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

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

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

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

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

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

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

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

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

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

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

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

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

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

WordPress

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

WordPress

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

WordPress

Теперь мы заменим все отсылки с нашего рабочего сайта на тестовый сайт, чтобы убедится, что всё работает нормально, когда мы используем БД для тестирования. Чтобы сделать это, надо выполнить следующие 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.

WordPress

 

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

WordPress

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

WordPress

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

WordPress

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

Внимание: В некоторых средах 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. Это поможет предотвратить от индексирования поисковиками ваш тестовый сайт.

WordPress

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

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

WordPress

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

WordPress

Так как вы будете работать в вашей локальной установке 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 из навигационной панели.

WordPress

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

WordPress

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

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

WordPress

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

WordPress

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

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

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

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

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


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