p3chat plugin для wordpress: убираем кнопки при печати
К сожалению, вебдизайнеры достаточно часто не уделяют особого внимания подготовке сайтов к печати. Не хочется следовать этой плохой традиции, уберём кнопку инициализации чата при печати. Покажу общий подход на конкретном примере.
Справа показано изображение одной из страниц сайта, на котором будем проводить эксперимент. И удалять с печати будем кнопку, “приклеенную” слева к краю окна (её хорошо видно на рисунке слева).
Рассмотрим методику решения на примере плагина для онлайн-чата на сайте 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’
, что и обеспечит нам использование этого файла стилей только при печати.
В общем то, на этом всё, предпросмотр печати обсуждаемой страницы справа. Как видно (точнее – как не видно), ненужной нам на печати кнопки уже нет, что и требовалось.
RSS комментарии
Обратная ссылка