Использование simplemodal с WordPress - PullRequest
Новая
       8

Использование simplemodal с WordPress

1 голос
/ 15 февраля 2011

Я пытаюсь использовать simplemodal, чтобы иметь модальные всплывающие окна с текстом в сообщениях WordPress.Я поиграл с различными плагинами, но у них было определенное применение (например, форма контакта или другая, которую я видел, которая отображает одну заметку, которую вы можете настроить).

Я пытался следовать этому руководству: http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html но инструкции не очень понятны для людей без продвинутых знаний jquery или wordpress, и это просто не работает для меня.Например, автор не объясняет, куда вы поместили эту функцию.

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

1 Ответ

3 голосов
/ 15 февраля 2011

Учебное пособие - хорошее начало для решения, но не совсем предоставляет все детали. Есть также некоторые изменения, которые я бы сделал. Вот что я хотел бы сделать, чтобы это заработало:

  • Создайте шаблон обработчика Ajax и страницу
  • Убедитесь, что ссылка, которую вы хотите использовать для открытия модального окна, включает класс postpopup и идентификатор записи в атрибуте rel.
  • Создайте папку js/ в каталоге вашей темы
  • Загрузите SimpleModal 1.4.1 и поместите файл в папку js/
  • Создайте пользовательский файл JavaScript (site.js) и поместите его в папку js/
  • Введите следующий код в site.js:

. 

jQuery(function ($) {
    $('a.postpopup').click(function(){
        id = this.rel;
        $.get('http://yourdomain.com/ajax-handler/?id='+id, function (resp) {
            var data = $('<div id="ajax-popup"></div>').append(resp);
            // remove modal options if not needed
            data.modal({
                overlayCss:{backgroundColor:'#000'}, 
                containerCss:{backgroundColor:'#fff', border:'1px solid #ccc'}
            });
        });
        return false;
    });
});
  • Добавьте следующий код в файл functions.php вашей темы:

. 

function my_print_scripts() {
    if (!is_admin()) {
        $url = get_bloginfo('template_url');
        wp_enqueue_script('jquery-simplemodal', $url . '/js/jquery.simplemodal.1.4.1.min.js', array('jquery'), '1.4.1', true);
        wp_enqueue_script('my_js', $url . '/js/site.js', null, '1.0', true);
    }
}
add_action('wp_print_scripts', 'my_print_scripts');

Это должно заставить вас работать. Убедитесь, что в нижнем колонтитуле вашей темы есть функция wp_footer(). Я переработал способ, которым вызывалось модальное окно, чтобы автоцентрирование контента работало.

...