Сдейлай добро - напиши информацию о рос. войсках в телеграм @evorog_bot

GRAVITSAPA.INFO

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

Задонатити ₴
Темний режим

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

Автоматически меняем недоступные / поломанные изображения на произвольные

Чтобы автоматически поломанная / недоступная картинка менялась на произвольную, используйте этот простенький js:

<script>
let img = document.querySelectorAll('img')
img.onerror = function() {
img.src = '/zamena.png'
}
</script>

Вместо “/zamena.png” ставьте ссылку на необходимую картинку.
Скрипт размещайте перед закрывающимся </body>

Не создаётся и не открывается файл sitemap.xml – ошибка File not found 404

Sitemap.xml не формируется и не открывается, вместо этого пустая страница с сообщением File not found или ошибка 404.

Что бы исправить эту проблему, необходимо зайти в настройки своего хостинга / сервера nginx -> найдите опцию с названием “Статический контент” / “Расширения статических файлов” / “Обработка статических файлов nginx” или с похожим названием -> в этой опции будет перечень расширений файлов из которого необходимо убрать xml -> сохраните настройку -> пробуйте теперь сформировать и открыть sitemap.xml

Делаем простым способом градиент для border на CSS, Simple Gradient Borders in CSS

Сразу приведу пару примеров, что бы могли сразу использовать…

Предположим есть <div></div> контейнер. Сделаем ему сверху border с градиентом на CSS:

<style>
.border-grad1 {
width: 300px;
height: 30px;
border-top: 4px solid;
background: #cfcfcf;
border-image: linear-gradient( to right, #ff0000, #1000ff ) 1 0%;
}
</style>
<div class="border-grad1"></div>

В следующем примере border будет со всех сторон блока. Что бы в таком случае сделать градиент, понадобится немного другая конструкция CSS стилей

<style>
.border-grad2 {
width: 292px;
height: 30px;
border: 4px solid transparent;
background: linear-gradient(#cfcfcf,#cfcfcf) padding-box, linear-gradient(to right, #ff0000 0%, #1000ff 100%) border-box;
}
</style>
<div class="border-grad2"></div>

Можно ещё играться с направлением градиента. Например направление “to right” изменим на “to top right” и получим диагональное направление

<style>
.border-grad3 {
width: 292px;
height: 30px;
border: 4px solid transparent;
background: linear-gradient(#cfcfcf,#cfcfcf) padding-box, linear-gradient(to top right, #ff0000 0%, #1000ff 100%) border-box;
}
</style>
<div class="border-grad3"></div>

Заметили, возле кодов цветов градиента стоят значения “0%” и “100%”? Этими цифрами можно устанавливать плавность перехода цвета к цвету, а так же смещение цветов в одну или другую сторону.

Надеюсь этой информации хватит, что бы сделать любой градиент для border на чистом CSS!

Внедрить критические 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');

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

Наверх