Бетке Сергей: iT блог

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

Справа показано изображение одной из страниц сайта, на котором будем проводить эксперимент. И удалять с печати будем кнопку, “приклеенную” слева к краю окна (её хорошо видно на рисунке слева).

Рассмотрим методику решения на примере плагина для онлайн-чата на сайте p3chat. Интересен пример тем, что элементы, которые нам потребуется скрывать, генерируются скриптом, поэтому при попытке найти их через просмотр View \ Source мы их не найдём – их ещё просто не будет!

Найдём нужный “ненужный” элемент

Процедура на самом деле простая. Открываем в Internet Explorer нашу страницу и нажимаем F12..Таким образом мы запускаем Средства разработчика. Нажимаем на инструмент “Выбрать” (стрелочка, самый левый инструмент на панели инструментов) и выделяем тот элемент, который будем прятать на печати.

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

Итак, мне повезло: нужный мне элемент помечен с помощью id=”p3c-launcher”.

Создаём CSS файл для печати

Теперь создадим для нашего плагина отдельный css файл, который будет использоваться при печати. Так и назову его – print.css. Размещать я его буду в каталоге плагина. И содержимое его будет банальным:

div#p3c-launcher {
    display: none !important;
}

Пришлось так жестоко поступить с !important потому, что непосредственно в HTML определён аттрибут style для нашего ненужного div, и в нём определён display, поэтому единственная возможность переопределить его – через !important.

Подключаем CSS в плагине

Осталось несколько модифицировать код плагина, чтобы подключался наш print.css, и использовался он именно при печати. Сделаем

class p3chat {
    public static function init() {
        ...
        add_action('wp_print_styles', array(__CLASS__, 'print_styles'));
        ...
    }
    
    public static function print_styles() {
        $cssUrl = self::$_url . 'print.css';
        $cssFile = self::$_path . 'print.css';
        if ( file_exists($cssFile) ) {
            wp_register_style(self::$_namespace.'_print', $cssUrl, false, false, 'print');
            wp_enqueue_style(self::$_namespace.'_print');
        };
    }
}

Обратите внимание на тот факт, что при регистрации стилей через wp_register_style мы указали значение для последнего аттрибута media. в результате в итоговый link будет добавлено media=’print’, что и обеспечит нам использование этого файла стилей только при печати.

В общем то, на этом всё, предпросмотр печати обсуждаемой страницы справа. Как видно (точнее – как не видно), ненужной нам на печати кнопки уже нет, что и требовалось.