GRAVITSAPA.INFO

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

Ночной режим

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

Внедрить критические CSS в страницы сайта на WordPress [ПРОСТОЙ СПОСОБ]

В этой статье я не буду рассказывать, о том, что такое Critical CSS, для чего нужен и т.д. Раз Вы сюда попали, значит нужно просто внедрить Critical CSS на WordPress, желательно бесплатно и просто 🙂

Для этого понадобиться установить плагин Autoptimize, кстати в котором много полезностей для оптимизации страничек сайта на WordPress. Но в рамках подключения критичных CSS понадобиться на первой вкладке «JS, CSS & HTML» -> раздел «Опции CSS» -> пункт «Inline «над слоем CSS» при загрузке основного автооптимизированного CSS только после загрузки страницы.» -> включите его, появиться поле.

Далее… Идём на сайт https://pegasaas.com/critical-path-css-generator/ -> в поле «URL» вставляем ссылку на страницу Вашего сайта, где теоретически используется больше всего CSS стилей, возможно это главная или страница статьи -> нажмите «Generate CPCSS».

Скопируйте появившееся стили и вставьте их в поле, которое появилось в настройках плагина Autoptimize в разделе «Встроить и отложить выполнение CSS?».

Это самый простой и бесплатный способ встроить критические CSS для сайта на WordPress. Способ имеет минусы, плохо подходит для «больших» сайтов с разными страницами. Но для простых сайтов с преимущественно одинаковыми страницами отлично подойдёт такой вариант подключения Critical CSS

Делаем размытый background на HTML и CSS

Что бы сделать размытый background, а на нём нормальный текст используем html контейнер:
<div class="blur-block">
<div class="bckgr-blur"></div>
<div class="str-txt">
<h3>Четкий заголовок</h3>
<p>Четкий текст за которым размытый фон</p>
</div>
</div>

и применим такие стили css:
.blur-block {
position: relative;
}
.bckgr-blur{
background-image: url("https://site.com/KARTINKA.jpg");
filter: blur(8px);
-webkit-filter: blur(8px);
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.str-txt {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.4);
color: white;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}

получим результат:

Четкий заголовок

Четкий текст за которым размытый фон

Такой вот простой способ размыть фон на CSS. Можно использовать в слайдерах, при hover или в связке с js при разных событиях. Пишите комменты, делитесь статьёй в соц. сетях 😉

Как вставить несколько background в один div блок?

Несколько background в одном DIV блоке на CSS — это реально и просто.

Предположим есть div блок с классом:

<div class="mnogofonov"></div>

Что бы разместить в нём несколько фонов, воспользуемся CSS стилями

.mnogofonov {
width: 100%;
height: 400px;
background-image: url(/wp-content/uploads/2019/11/space-shattle-gravi.png),
url(/wp-content/uploads/2019/11/moon.png),
linear-gradient(to right, rgb(31, 35, 39), rgb(12, 48, 70));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: bottom right, left, right;
}

В итоге получим такую картину:

Разберёмся, как это работает. В примере у каждого свойства (background-image, background-repeat, background-position) указываются через запятую стили, которые соответствуют друг другу по очерёдности. Свойств может быть больше. На этом всё 🙂

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

Разбираемся в отличиях между em и rem размерами шрифтов в CSS

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

Как работает размер шрифта em в CSS?

Для начала возьмём контейнер:
<div id="gravi1">
<h1 class="zagolovok1">Заголовок 1</h1>
<div id="gravi2">
<h1 class="zagolovok1">Заголовок 2</h1>
</div>
</div>

В нём имеем общий блок #gravi1 и заголовок .zagolovok, затем вложенный блок #gravi2 и принадлежащий ему заголовок с таким же классом .zagolovok

Пусть у заголовка с классом .zagolovok будет размер шрифта 2em, при этом конкретно контейнерам #gravi1 и #gravi2 назначим разные размеры шрифта в px:
#gravi1 { font-size: 27px; }
#gravi2 { font-size: 17px; }
.zagolovok { font-size: 2em; }

В итоге увидим такой результат:

Заголовок 1

Заголовок 2

Заголовок 1 имеет размер 27px * 2, а Заголовок 2 размером 17px * 2, соответственно 54px и 34px. Почему так? Потому что .zagolovok { font-size: 2em; } задает размер относительно родительских показателей и указывает в сколько раз будет больше. Если бы размер был 1em, то размеры остались как у родителей 27px и 17px. А если бы не указал размер для #gravi2, то родительские значения будут от #gravi1 и оба .zagolovok будут одинакового размера.

Как работает размер шрифта rem в CSS?

Теперь изменим em на rem, что бы наглядно увидеть его:
#gravi1 { font-size: 27px; }
#gravi2 { font-size: 17px; }
.zagolovok { font-size: 2rem; }

Контейнеры оставляем те же, и смотрим результат:

Заголовок 1

Заголовок 2

Поскольку rem не зависит от значений родительских контейнеров, но зависит от главного значения по умолчанию у общего контейнера html, то в данном случае размер у .zagolovok 32px. Почему так? Потому что у html для всей страницы изначальное браузерное значение размера шрифта 16px, а поскольку .zagolovok { font-size: 2rem; }, то 2 * 16px. Разумеется в CSS можно переопределять размер шрифта у html.

На этом всё. Надеюсь всем было доступно и понятно 🙂 Задавайте вопросы в комментах, делитесь статьёй в соц. сетях.

Убираем со страниц сайта на 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 верстки блока, который нужно фиксировать. Итак решение проблемы прыжков блока при фиксации:

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

Наверх