GRAVITSAPA.INFO

Компьютеры, электроника, софт, авто, мото, вело, сайты, жизнь, советы :)

Посты категории: Создание сайтов

При подключении домена к Cloudflare появилась ошибка ERR_TOO_MANY_REDIRECTS — исправляем

Решил подключить один из своих сайтов к Cloudflare. Этот сервис имеет отличные возможности кеширования, выдаёт бесплатно SSL, и увеличивает безопасность сайта. Но столкнулся с проблемой после подключения. Стала выпадать ошибка в браузере «Сайт site.com выполнил переадресацию слишком много раз.» и ниже ERR_TOO_MANY_REDIRECTS.

Эксперименты с настройками результаты не дали, решил поискать инфу. Нашел вот такую статейку на официальном сайте Cloudflare. По русски через Google-переводчик часть статьи:

Если исходный сервер настроен на перенаправление HTTP-запросов в HTTPS, ответы сервера обратно на Cloudflare зашифрованы и, поскольку Cloudflare ожидает HTTP-трафик, он продолжает повторять тот же запрос, что приводит к циклу перенаправления. Это приводит к тому, что браузеры отображают ошибки «Страница перенаправляется неправильно» или «ERR_TOO_MANY_REDIRECTS».

Исходя из этой информации зашел в панель управления хостингом и выключил редирект с http на https, так же нужно этот редирект убрать из .htaccess. При этом на самом Cloudflare убедился, что этот редирект включен. Раздел «Crypto»:

После манипуляций подождал минут 20 и ошибка пропала.

Делаем простой слайдер сравнения двух изображений — Image Comparison Slider

Начнём с DEMO работы слайдера Image Comparison Slider (за основу взята библиотека Cocoen):

Смотреть полностью

Делаем автоматическую плавную смену цвета любого блока сайта на CSS и HTML

Чаще всего для реализации плавной смены цвета HTML блока нужно применять JavaScript. Нашел вариант реализации на чистом CSS и делюсь им с Вами:

Предположим цвет нужно менять этому HTML блоку
<div class="color-wave">
В ЭТОМ БЛОКЕ МЕНЯЕТСЯ ПЛАВНЕНЬКО ЦВЕТ
</div>

Для плавной смены цвета нужно использовать вот такие CSS стили
div.color-wave {
-webkit-animation: color 5s ease-in-out infinite;
-moz-animation: color 5s ease-in-out infinite;
-o-animation: color 5s ease-in-out infinite;
animation: color 5s ease-in-out infinite;
font-weight: bold;
color: white;
width: 300px;
height: 300px;
}
@keyframes color {
0%{background-color: #2487ca;}
10%{background-color: #2283c3;}
20%{background-color: #1f74ad;}
30%{background-color: #1b6698;}
40%{background-color: #175782;}
50%{background-color: #13496c;}
60%{background-color: #175782;}
70%{background-color: #1b6698;}
80%{background-color: #1f74ad;}
90%{background-color: #2283c3;}
100%{background-color: #2487ca;}
}
@-webkit-keyframes color {
0%{background-color: #2487ca;}
10%{background-color: #2283c3;}
20%{background-color: #1f74ad;}
30%{background-color: #1b6698;}
40%{background-color: #175782;}
50%{background-color: #13496c;}
60%{background-color: #175782;}
70%{background-color: #1b6698;}
80%{background-color: #1f74ad;}
90%{background-color: #2283c3;}
100%{background-color: #2487ca;}
}

DEMO на Jsfiddle.

В своем варианте я меняю цвет по кругу. Градаций можно делать больше или меньше. Кстати очень удобно для подбора плавной смены цвета использовать этот инструмент. Там можно сделать подборку по градиенту, «по радуге» или по другому спектру наглядно.

Делитесь статейкой в соц. сети 😉

Прибиваем подвал (footer) к низу экрана, даже если на странице мало контента

Задача предельно понятна, нужно просто и грамотно прибить footer (подвал сайта) к низу экрана при отсутствии контента или его маленького количества. И суть проблемы изобразил схематически:

Что бы футер оставался внизу, используйте вот такой пример стилей для основных блоков:
<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<header>Шапка</header>
<main>Мало контента</main>
<footer>Футер</footer>
</div>
</body>
</html>

И сами CSS стили:
, ::after, ::before {
box-sizing: border-box;
}
html {
display: flex; /* осевое координирование блоков */
min-height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
display: flex;
overflow-x: hidden;
}
.wrapper{
flex: 1 1 auto;
display: flex;
flex-flow: column;
justify-content: space-between;
}
.wrapper main {
flex: 1 1 auto;
display: block; /* обязательно нужно для IE, иначе выдаёт ошибку для блока main */
background: #eee;
}
.wrapper header,
.wrapper footer {
max-height: 50px;
flex: 0 0 50px;
background: #999;
}

Настоятельно рекомендую ознакомиться с свойствами display: flex; и всеми возможностями флексбоксов. Благодаря стилям выше мы получаем такую картину (пример на JSFiddle):

Устраняем ошибку 404 на страницах записей и пагинации в WordPress

Исправляем ошибку 404 на страницах записей в WordPress

Ошибка может проявляться явно и не явно. Когда при открытии страницы записи вы сразу же попадается на страницу 404, то это явно указывает Вам на то, что произошел глюк. Но бывают случаи, когда страница записи нормально открываться, при этом отдаёт не код 200, а 404. Существует 3 метода решения этой проблемы:

  1. Пересохранение постоянных ссылок в WordPress. Заходим в Настройки -> Постоянные ссылки -> Выбираем «Простые» -> Нажимаем «Сохранить».
    Пробуем зайти в запись, если всё нормально, то включите снова тот режим постоянных ссылок, какой был и перейдём ко второму методу.
  2. Смотреть полностью

Как в MySQL базе данных массово удалять или заменять значения?

Для того, что бы в MySQL базе данных заменить любое значение, часть значений или символов, можно воспользоваться простым запросом:

UPDATE `table` SET `stolbec` = REPLACE( stolbec, 'staroe', 'novoe' )

Для того, что бы удалить значение, просто уберите новое значение в запросе, оставьте пустоту. Тогда запрос заменит старые символы или значения на пустоту.

UPDATE `table` SET `stolbec` = REPLACE( stolbec, 'staroe', '' )

Теперь о самих запросах:
table — это таблица, в которой делаем операцию. Таблицы находятся слева в PHPMyAdmin.
stolbec — это столбец, в котором нужно производить операцию. Столбцы таблиц можно видеть в правой части экрана, выбрав определённую таблицу.

staroe — это любое значение, которое хотите удалить или заменить. Причем удалять или заменять можно часть целого значения, об этом ниже.
novoe — это то новое значение, которым хотите заменить старое. Как уже говорил, замену можно делать части целого значения.

Например старые значения содержат цифру «49» — «site49», «exemple49», «url49» и т.д.. А нам нужно заменить на «77». В таком случае достаточно сделать такой запрос:
UPDATE `table` SET `stolbec` = REPLACE( stolbec, '49', '77' )
Соответственно значения теперь будут — «site77», «exemple77», «url77» и т.д.

И на последок. Запросы SQL выполняем во вкладке «SQL», предварительно выбрав таблицу слева. Справа будут видны все столбцы выбранной таблицы, а двойным щелчком можно включить название столбца в запрос.

Как исправить ошибку отсутствия logo для структурированных данных AMP в WordPress?

На сегодняшний день самым популярным плагином для реализации AMP-страниц в WordPress является AMP for WordPress, автором которого выступают соавторы самого WordPress и представители Google.

Но во время использования этого плагина столкнулся с не критичной ошибкой в Google Search Console. Звучит она так: «Неправильная разметка структурированных данных». И в правду, если запустить тест AMP (структурированных данных) через инструмент Google, то увидим следующую ошибку («Необходимо указать значение для поля logo.»):

Что бы устранить ошибку отсутствия logo для AMP страниц, выполним простую инструкцию:

  1. Наводим на вкладку «Внешний вид» и выбираем пункт «Настроить».
  2. Затем выбираем «Свойства сайта» и тут нужно загрузить логотип, соответствующий указанным параметрам.
  3. Нажимаем «Выбрать изображение», загружаем его или выбираем из существующих. Нажимаем «Опубликовать».

Теперь ещё раз проходим тест структурированных данных, и увидим, что ошибки не будет.

Пишите комменты, делитесь статьёй в соц. сетях 😉

Делаем простейший вывод похожих/рекомендуемых записей для WordPress без плагинов

Сразу же приступим, всего 2 пункта:

  1. В файле шаблона WordPress, где выводиться «одна запись» (обычно single.php), под <?php the_content(); ?> или что-то похожее вставляем этот код:
    <h3>Рекомендуемые статьи</h3>
    <div class="recommend">
    <?php
    $categories = get_the_category($post->ID); //оплеределяем категории, из которых будем выводить похожие
    if ($categories) {
    $category_ids = array();
    foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
    $args=array(
    'category__in' => $category_ids, //сортировка по категориям
    'post__not_in' => array($post->ID),
    'showposts'=>4, //количество выводимых ячеек
    'orderby'=>'rand', // в случайном порядке
    'ignore_sticky_posts'=>1); //исключаем одинаковые записи
    $my_query = new wp_query($args);
    if( $my_query->have_posts() ) {
    echo '<ul>';
    while ($my_query->have_posts()) {
    $my_query->the_post();
    ?>
    <li><a class="imgrel" href="<?php the_permalink() ?>"><img alt="<?php the_title(); ?>" src="<?php echo catch_that_image(); ?>" /></a><a class="urlrel" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
    <?php
    }
    echo '</ul>';
    }
    wp_reset_query();
    }
    ?>
    </div>
  2. Но если в записи нет ни одного изображения, то нам надо подставить какую-то картинку-заглушку. Для этого в файле functions.php вставляем этот код (ссылку на изображение вставляем свою):
    function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];
    if(empty($first_img)) {
    $first_img = "https://exemple.com/zaglushka.png"; // Ссылка на изображение-заглушку, если в посте оно не найдено
    }
    return $first_img;
    }

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

Пишите комменты, делитесь статьёй в соц. сетях 😉

Делаем Хлебные крошки (Breadcrumb) с микроразметкой для WordPress без плагинов

Раньше использовал «Хлебные крошки» от Yoast плагина… Но к сожалению, в таком варианте не было микроразметки, и не было возможности сделать по своему. Погуглив, нашел отличное решение реализации хлебных крошек для WordPress без плагина. Внедрил «структурированные данные» и получилось идеально! Ко всему незначительно уменьшается скорость загрузки страницы… Появляется возможность пихать всякий юникод)) всевозможные разделители и вообще можно переписать код по своему под свои задачи… Уже использую такой вариант у себя. Следуйте простой инструкции и у Вас будут такие же хлебные крошки, которые Google будет правильно индексировать и выводиться в сниппетах результатов выдачи привлекая больше трафика:

  1. В файле functions.php Вашего шаблона добавляем этот код (самое главное, не вставьте случайно этот код в уже работающую функцию):
    Смотреть полностью

Делаем простенькую но эффективную кнопку «Наверх» для сайта с плавной прокруткой

Я не автор этого кода, нашел в сети, мне очень понравилась. Поэтому решил использовать на сайте Gravitsapa.info, тут же можно посмотреть как она работает. Но изобретать тут особо и нечего… Код не нагружает сайт, прокрутка вверх отрабатывает без ошибок и тормозов. Легко модернизировать в более сложный функционал, или накинуть других параметров. Протестировано на смартфоне, в адаптивный дизайн вписывается отлично. И ещё, если у вас есть длинные страницы или статьи, рекомендую использовать эту кнопку без сомнений!

Что бы у Вас на сайте заработала такая прекрасная кнопка «Наверх» с плавной прокруткой, выполните простую инструкцию:

  1. Между <head></head> вставляем этот код:
    <script type="text/javascript">
    $(function() {
    $(window).scroll(function() {
    if($(this).scrollTop() != 0) {
    $('#toTop').fadeIn();
    } else {
    $('#toTop').fadeOut();
    }
    });
    $('#toTop').click(function() {
    $('body,html').animate({scrollTop:0},800);
    });
    });
    </script>
  2. Прямо перед </body> вставляем этот код:
    <div id="toTop" >Наверх</div>
  3. В файле стилей .css вставляем этот код (цвета и другие стили можно изменить на свои):
    #toTop {
    width: 70px;
    background: #2487ca9c;
    text-align: center;
    padding: 5px;
    position: fixed;
    bottom: 20px;
    left: 15px;
    cursor: pointer;
    display: none;
    color: #fff;
    height: 20px;
    vertical-align: middle;
    }

Теперь и у Вас на сайте эта прекрасная полезная кнопочка, которой бывает очень не хватает. Делитесь статьёй в соц. сетях 😉 Спасибо!

NIGHT
Наверх