Архив рубрики: WEB

Выводим красивое сообщение пользователю после отправки сообщения из Contact Form 7

Начиная с версии 7.5, события нужно теперь отлавливать через DOM. Например вывод сообщения об успешной отправке письма можно оформить так:

document.addEventListener( 'wpcf7mailsent', function( event ) {
$.fancybox(
	'<h2>Уведомление</h2><strong>'+event.detail.apiResponse.message+' </strong><br/><br/>',
	{
    	    'autoDimensions'	: false,
    	    'padding'		: 30,
    	    'margin': 30,
	    'width'         		: 'auto',
	    'height'        		: 'auto',
	    'transitionIn'		: 'fade',
	    'transitionOut'		: 'fade'
	}
    );
}, false );

Изменяем заголовок wp_head на отдельных страницах wordpress

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

<?php
/*
Plugin Name: Изменение title для части страниц
Plugin URI: https://грибовы.рф
Description: Если видит что открыта страница с id=460,то меняет заголовок подставляя город из куков
Version: 1.0
Author: Грибов Павел
Author URI: https://грибовы.рф
*/

add_action('template_redirect', 'before_header', 0);
add_action('wp_head', 'after_header', 900);
function before_header (){
    ob_start('change_title_tag');
}
function change_title_tag($head) {
    if (isset($_COOKIE["city"])==true){    
	$head=str_replace("Интернет и телевидение в квартиру","Интернет и телевидение в квартиру ".$_COOKIE["city"],$head);
	$head=str_replace("Интернет и телевидение в дом","Интернет и телевидение в дом ".$_COOKIE["city"],$head);
    };
    return $head;
}
function after_header() {
    ob_end_flush();
}

?>

Отключение HSTS в FireFox

Бывает так, что работал сайт по протоколу HSTS, работал.. И вдруг бац — перестал работать. А FireFox стал капризничать — «подавай мне HSTS на этом сайте, помню же что был».  Переубеждаем:

В FireFox заходим в в меню  Справка -> Информация для решения проблем.  Открываем каталог «Папка профиля»

Ищем в файле SiteSecurityServiceState.txt интересующий нас сайт и удаляем всю информацию о нем. Далее перезапускаем FireFox. Всё должно работать.

 

Jquery и маска ввода телефона

К сожалению наиболее часто упоминаемый в «интернетах» плагин maskedinput не очень хорошо работает на мобильных устройствах. Адекватной заменой может служить плагин inputmask: https://github.com/RobinHerbots/Inputmask

Один огромный минус — уж очень «жирноват» плагин для простых задачь. Иногда лучше использовать «чистый» javascript:

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
    <input  value="+7(___)___-____">
    <script>
window.addEventListener("DOMContentLoaded", function() {
function setCursorPosition(pos, elem) {
    elem.focus();
    if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);
    else if (elem.createTextRange) {
        var range = elem.createTextRange();
        range.collapse(true);
        range.moveEnd("character", pos);
        range.moveStart("character", pos);
        range.select()
    }
}

function mask(event) {
    var matrix = this.defaultValue,
        i = 0,
        def = matrix.replace(/\D/g, ""),
        val = this.value.replace(/\D/g, "");
        def.length >= val.length && (val = def);
    matrix = matrix.replace(/[_\d]/g, function(a) {
        return val.charAt(i++) || "_"
    });
    this.value = matrix;
    i = matrix.lastIndexOf(val.substr(-1));
    i < matrix.length && matrix != this.defaultValue ? i++ : i = matrix.indexOf("_");
    setCursorPosition(i, this)
}

    var input = document.querySelector("input");
    input.addEventListener("input", mask, false)
});
  </script>
</body>

</html>

Изменение ширины темы WordPress Twenty Fourteen

По мотивам этой статьи. В очередной раз обновилась тема Twenty Fourteen и в очередной раз нужно менять css файл style.css, чтобы тема нормально смотрелась на очень широких экранах. На этот раз решил подойти радикально — и обновления не терять, и руками каждый раз не править. А именно: заходим в настройки темы -> дополнительные стили и копируем туда код:

.site {	
	max-width: 100% !important;	
}
.site-header {
	max-width: 100% !important;	
}
.hentry {	
	max-width: 100% !important;
}
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	max-width: 80% !important;
}
.image-navigation {	
	max-width: 80% !important;
}

.archive-header,
.page-header {
	max-width: 80% !important;
}

.contributor-info {	
	max-width: 80% !important;
}

.comments-area {
	max-width: 80% !important;
}

.site-main .mu_register,
.widecolumn > h2,
.widecolumn > form {
  max-width: 80% !important;
}

Сильно надеюсь, что на этом все.