GRAVITSAPA.INFO

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

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

Убираем со страниц сайта на WordPress файл стилей Wp Block Library Css

На сайтах на WordPress может автоматически подключаться файл стилей wp-block-library-css. Нужен он для редактора Gutenberg.
<link rel='stylesheet' id='wp-block-library-css' href='https://site.com/wp-includes/css/dist/block-library/style.min.css' type='text/css' media='all' />

Если не используете этот редактор и не планируете использовать, при этом хотите немножко ускорить работу сайта, то можно убрать этот файл стилей из фронт-части сайта. Для этого откройте файл functions.php темы оформления и вставьте туда этот код:
<php
function wpassist_remove_block_library_css(){
wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'wpassist_remove_block_library_css' );
?>

Делаем фид xml для турбо-страниц Яндекс на WordPress без плагинов

Что бы сделать для Яндекса Турбо-страницы в WordPress, выполняем простую инструкцию:

  1. Добавляем код в файл functions.php текущей темы WordPress:
    <?php //turbo yandex
    add_action('init', 'customRSS');
    function customRSS(){
    add_feed('feedturbo', 'customRSSFunc');
    }
    function customRSSFunc(){
    get_template_part('rss', 'feedturbo');
    }
    ?>
  2. В папке с темой создаём файл rss-feedturbo.php и добавляем туда код:
    <?php
    $postCount = 5000; // кол-во записей в фиде
    $posts = query_posts('showposts=' . $postCount);
    header('Content-Type: '.feed_content_type('rss-http').'; charset='.get_option('blog_charset'), true);
    echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>';
    ?>
    <rss version="2.0"
    xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:wfw="http://wellformedweb.org/CommentAPI/"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:media="http://search.yahoo.com/mrss/"
    xmlns:atom="http://www.w3.org/2005/Atom"
    xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
    xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
    <?php do_action('rss2_ns'); ?>>
    <channel>
    <title><?php bloginfo_rss('name'); ?></title>
    <link><?php bloginfo_rss('url') ?></link>
    <description><?php bloginfo_rss('description') ?></description>
    <language>ru</language>
    <?php do_action('rss2_head'); ?>
    <?php while(have_posts()) : the_post(); ?>
    <item turbo="true">
    <title><?php the_title_rss(); ?></title>
    <link><?php the_permalink_rss(); ?></link>
    <pubDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_post_time('Y-m-d H:i:s', true), false); ?></pubDate>
    <media:rating scheme="urn:simple"><?php echo get_post_meta($post->ID,'wpcf-adult',true); ?></media:rating>
    <author><?php the_author(); ?></author>
    <category><?php echo get_post_meta($post->ID,'wpcf-feedturbo-category',true); ?></category>
    <?php
    $gallery = get_attached_media( 'image',$post );
    foreach( $gallery as $image_url ) {
    echo '<enclosure url="' . $image_url->guid . '" type="image/jpeg"/>';
    }
    ?>
    <description><![CDATA[<?php echo get_the_excerpt(); ?>]]></description>
    <turbo:content><![CDATA[
    <?php
    $content=get_post_field('post_content', $post->ID);
    $pattern = '/(<img([^>]*)>)/i';
    $replacement = '<figure>$1<figcaption>
    '.get_the_title().'
    </figcaption>
    </figure>';
    $content = preg_replace( $pattern, $replacement, $content );
    echo $content;
    ?>]]></turbo:content>
    <?php rss_enclosure(); ?>
    <?php do_action('rss2_item'); ?>
    </item>
    <?php endwhile; ?>
    </channel>
    </rss>
  3. Заходим в админку WordPress -> Настройки -> Постоянные ссылки -> нажимаем Сохранить ничего не меняя. Это нужно сделать что сформировался новый фид.
    Если установлен Yoast SEO, то заходим в настройки плагина -> Отображение в поисковой выдаче -> нажимаем Сохранить.
  4. Открываем фид для проверки по адресу https://ваш-сайт.com/feed/feedturbo (если выскочит ошибка «Namespace prefix turbo on content is not defined», то ничего страшного…)
  5. Заходим в Яндекс Вебмастер -> Турбо-страницы -> Источники -> Добавляем фид и включаем

Этот способ быстрый, не нагружает сайт, легко модернизируется. Делитесь статьёй в соц. сетях 😉

Как исправить ошибку PHP Use of undefined constant … — assumed ‘…’ ?

В моём случае появилась ошибка:
Use of undefined constant d - assumed 'd' (this will throw an Error in a future version of PHP)

По факту строка, на которую ссылалась ошибка выглядела так:
$date_d = date(d);

Обычная PHP функция, которая выводит день текущего месяца. Но видимо в самой последней версии PHP 7.3.10 появились изменения и пришлось переписать функцию вот так:
$date_d = date('d');

Т.е. теперь константу нужно писать в кавычках.

Делаем переключатель между CSS стилей или как сделать ночную тему для WordPress

Всё больше набирает популярность ночная тема (тёмная тема) оформления разных интерфейсов, на сайтах и в приложениях. В интернетах нашел один из хороших способов сделать это, но вариант был технически не идеален и не корректно работал для сайта на WordPress. Мой друг, хороший веб-разработчик @only_darkangel помог довести до ума работоспособность функции включения и выключения ночной темы в WP.

Как реализовать переключатель на ночную тему в WordPress?

  1. Определите стили в переменные, которые нужно подставлять непосредственно элементам сайта. Ниже пример для цвета фона:
    root {
    --body-tst-background: #fff;
    }
    [data-theme="dark"] {
    --body-tst-background: #000;
    }
    body-tst {
    background: var(--body-tst-background);
    }

    Получается, что в root базовые стили обычного оформления, в [data-theme=»dark»] стили для ночной темы. Кстати не обязательно это будет именно тёмная ночная тема, возможно захотите сделать просто переключатель между двумя своими CSS стилями.
  2. В папке с темой WordPress создайте папку js и в ней создайте файл night.js (файл можно назвать как угодно). Этот файл не забудьте подключить в <head>. В файл поместите код, в котором на строке где «url:» укажите url Вашего сайта:

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

Фиксируем блок на определённой позиции при прокрутке с помощью jQuery

В этом примере рассмотрим фиксацию блока при прокрутке и прилипание к верху экрана. DEMO можно увидеть перейдя СЮДА в песочницу.

Как видим реализовано всё просто.
Пример HTML структуры. Не зависимо от содержимого, будь то меню, или просто блок с текстом, нужно обернуть содержимое в два div блока. Так исключаем проблему с дёрганьем во время фиксации блока.
<div class="super-block">
<div class="mega-block">
Этот блок должен прилипнуть когда доскроллится до верха экрана.
</div>
</div>

Затем вот такие CSS стили. Видно, что для фиксации используется вполне логичный стиль position: fixed.
.super-block {
height: 50px;
}
.mega-block {
background: gray;
text-align: center;
height: 50px;
line-height: 50px;
}
.topchik {
position: fixed;
left: 0;
right: 0;
top: 0; /*этот стиль лепит наш блок к верху, если нужно фиксировать в другом расположении, то меняем этот стиль, а так же left и right*/
z-index: 1;
}

И главный герой работы фиксации блока при скролле — это скрипт на jQuery, который разместим между <head></head>. В скрипте видно, что класс мы меняем второму div — это так же нужно, для избежания проблем с прыжками блока во время фиксации.
<script>
jQuery(document).ready(function($){
var $window=$(window),
$target=$(".mega-block"),
$h=$target.offset().top;
$window.on('scroll',function(){
var scrollTop=window.pageYOffset||document.documentElement.scrollTop;
if(scrollTop>$h){
$target.addClass("topchik");
return;
}else{
$target.removeClass("topchik");
}
return;
});
});
</script>

Пишите комменты и делитесь статьёй в соц. сетях, нажав соответствующую кнопку ниже 😉 Спасибо!

Блок прыгает во время скролла с добавлением position: fixed — исправляем проблему

Условия возникновения проблемы прыжков блока с position: fixed:

Проблема заключается в том, что во время скролла когда блок достигает нужной позиции для получения нового класса со стилем position: fixed, класс начинает непрерывно сбрасываться. Визуально это выглядит как прыжки блока.

Скажу сразу, если скрипт корректно определяет позицию и в нужный момент добавляет класс, значит работает правильно и дело не в нём. Будем копать в сторону стилей CSS и HTML верстки блока, который нужно фиксировать. Итак решение проблемы прыжков блока при фиксации:

Готовое решение рабочей фиксации блока при скролле страницы можно найти в ЭТОЙ СТАТЬЕ.

Исправляем ошибку HTTP при загрузке файлов в библиотеке WordPress

Способы исправления ошибки HTTP при загрузке файлов через библиотеку WordPress.

Первый способ тот, который помог исправить ситуацию в моём случае. Если у вас есть доступ к настройкам или редактировании файла php.ini на хостинге, то найдите параметр mbstring.func_overload и поставьте ему значение 0. Так же за успешную загрузку файлов отвечают такие параметры в php.ini как php_memory_limit (должно быть хотя бы 64МБ), upload_max_size и post_max_size (лучше всего значение в 300МБ), max_input_time (рекомендую 600 секунд). Если редактировать эти параметры никак не можете, то возможно нужно или переходить на другой тариф с выше параметрами по умолчанию или менять хостинг.

Второй способ — перепроверить себя. Может быть загружаемый файл слишком большого объёма, или картинка слишком высокого разрешения. HTTP не предназначен для передачи больших файлов. А обработчик WP из-за ограничений хостинга не сможет обработать изображение слишком большого разрешения.

Если всё же нужно загрузить изображение высокого разрешения, то можно изменить библиотеку обработки. Зайдите в файл functions.php вашего шаблона в WordPress и вставьте туда код:
<?php
function hs_image_editor_default_to_gd( $editors ) {
$gd_editor = 'WP_Image_Editor_GD';
$editors = array_diff( $editors, array( $gd_editor ) );
array_unshift( $editors, $gd_editor );
return $editors;
}
add_filter( 'wp_image_editors', 'hs_image_editor_default_to_gd' );
?>

Если нужно загрузить файл большого объёма, воспользуйтесь FTP клиентом.

Делитесь статьёй в соц. сетях. Спасибо 😉

При подключении домена к 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.

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

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

NIGHT
Наверх