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. Для вопросов и комментариев пишите нам в комментарии.

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

• wp_enqueue_script
• wp_register_script
• wp_enqueue_scripts

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

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

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

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

 })

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