Шпора для себя: галерея на флексах, градиент на текст и шорткоды

Надо написать шпору себе на будущее, вдруг тема поменяется или новый сайт появится. Галерея на флексах, градиентый текст и шорткоды для последних записей.

Гугл и яндекс, это вам про шорткоды

Если я не напишу теорию, фиг же ранжировать будут.) Поэтому ловите.

Шорткоды —  это коды, которые помогают сделать что-то с помощью скриптов или кодов. Это такая сжатая форма, чтоб ручки не отвалились большие коды писать.

Шорткоды нужны для быстрого вызова длинного сценария. У WordPress есть, что неудивительно,  свой набор шорткодов, но есть и сторонние. Если порыться по интернету, инфа найдется.

Шорткоды нужно вставлять в тему или вручную, или плагином.

Плагин вставки шорткодом последних записей: Display Posts

Раньше учили, что много плагинов плохо, но это они еще джеквери и слайдеров не знали.))) Плагины ерунда. Есть дичь гораздо более лютая, например, слайдеры вверху сайта на всю ширину или даже мой этот виджет отелей. Скорость сайта была по гугле высокая, после всех форм и виджетов в мобиле ужас. Сама в шоке.

Но что ж поделать, если он норм смотрится и в тему? Пусть живет. С фиксированным меню за месяц свыклась. Тоже переживала, что долго грузит в мобиле. Но виджет победил джеквери-скрипт меню 1:0 однозначно.

Display Posts поставила не сразу. Хотела поставить код php, но в этой теме че-то не выходит. На других сайтах похожие вещи получались, а у себя что-то не так. Штук 5 вариантов перепробовала. И в родительскую, и в дочернюю, и с тегами, и без, и дописываая эндиф. Короче, вот с джеквери прокатило в родительской, с последними записями нет.

Ни такие: wp_get_recent_posts(), ни такие: query_posts(), никакие не заходят.

Возможно, внутрь конкретной статьи нельзя встраивать. Но когда я поиск по сайту делала, я всунула в любую точку сайта и ничего. Почему нельзя воткнуть эти коды? Наверное, нельзя или что-то надо по-особенному писать в этой теме. Я вижу, что строка вывода не срабатывает.

Поэтому нашла плагин Display Posts, ничего настраивать не надо. Он создан для вывода последних записей вордпресс.

Шорткоды вывода записей

Подбирала разные варианты, читала, сошлась на 2. Один шорткод для рубрик, как советовал Сергей, второй в пустое место внизу главной. Насчет формы подписки думаю. Формы все уязвимы, но сегодня на одном чужом финансовом сайте видела в футере форму.

Сами шорткоды. Первый выводит названия статей и анонсы:

ВАЖНО: Заменила скобки[] на (), потому что иначе выводит мне записи здесь.

(display-posts posts_per_page="10" include_excerpt="true")

Здесь написано, что выведется 10 последних записей с анонсами текстовыми.

Второй шорткод должен быть не списком, маркеры не нужны, поэтому убираем.

(display-posts posts_per_page="3" wrapper="div")

Здесь написано вывести 3 поста списком, но без маркеров. Я написала wrapper=”div”, чтобы отменить действие li – тега маркировочного списка по умолчанию.

Если вы читаете это, а на сайте не находите, значит, прошли годы, авторы состарились, шорткоды устарели.))) В общем, пользуйтесь, пока актуально.

Линейный градиент текста css3

У нас, для тех, кто не в курсе, в 2019 уже css3 в моде (по секрету скажу, еще php 7.2, 7.3 есть и html5).

Но это очень секретно! Поэтому я, как великий любитель градиентов, не прошла мимо и зафигачила Н2 от души:

цветной градиент текста

Это css для тех, кому лень через инспектор списать)))

background: linear-gradient(100deg,#0b86cd 30%,#0cc8fa 50%,#30ba8f 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Объяснялочка

background: linear-gradient – устанавливается фон с цветовыми переходами.

deg– угол наклона.

# 0b86cd – ну тут, если вы не знаете, то вы вообще конечно.)))))))))))

-webkit-background-clip: text;– как раз и делает так, чтобы только на текст накладывался градиент, а не в виде фона вокруг его. Пока новая штука, только через префикс webkit работает. Я проверяла не только в Хроме и Сафари. Даже в Эксплорер работает.

Однако на всякий случай надо ставить и запасной вариант. Поэтому для пристарелых браузеров-ветеранов я написала color: # 30ba8f;. Посоветовалась в группе и поняла, что запаску надо ставить в конец стилей. Если ваши вебкиты уплывут по течению, то фраза не исчезнет, а будет указанного цвета, в моем случае зеленой.

Для подбора процентов для цветового перехода удобно отключать на время второй параметр -webkit-background-clip: text;и смотреть по прямоугольку результат, потом включить не забудьте.

-webkit-text-fill-color: transparent; – прозрачность помогает просвечивать сквозь фон. Буквы прозрачные и виден градиент. Если убрать, градиент исчезнет.

Адаптивная галерея на Flex с рамкой

У нас в теме Basic гелерея генерируется шорткодом, написана она версткой наших пробабок на float, но так как я не жила в то время, то у меня все на флексах.

моя галерея

Я себе придумала галерею сразу в совместимости с моим новым дизайном, с рамкой, тенью.

Важно: фотки лучше одинакового размера. Если разная высота, оно сработает, но при переносе при сужении экрана некрасиво.

Я предлагаю брать 6 штук одного размера. Не нужны собственные рамки. Если фоток 5, переносом картинки отобразятся неплохо тоже, но если их 4, то под этот код сильно большие, мне не нравится. На 4 фотки пишите процент 50% вместо 33.33%.

Показываю пример без единого размера (картинки обрезаются, как хотят, иногда короткие, так как не стоит заполнение всей плитки, дабы не растягивались.)

Также здесь видно, что можно оставлять место под текст или ссылку. В нашей теме при создании галереи из медиафайлов предлагают такую функцию. А вообще можно после ссылки на картинку текст писать или в свой какой-то класс встраивать после ссылки <img src=”https://ссыль картинки” />. Блин, рамку отключила.))))))

плохой пример галереи

Код css, чтоб самой у себя списывать

.gallery {
border: none;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 850px;
}
.gallery-item {
flex: 1 1 calc(33.33% - 30px);
margin: 5px;
box-sizing: border-box;
min-width: 170px;
text-align: center;
background: #EFF5FB; box-shadow: 0 0 10px 1px #789;border: 10px solid rgba(0,0,0,.1);}

чисто к теме моей:
.wp-caption-text, .wp-caption p.wp-caption-text{font-size: 22px;
color: #2d8e9d;}

Просто скопировать-вставить, чтоб не думать. Цвета поменять. Концовка не надо. Это мне для текста.

Так как у нас галерея сама генерируется с классами .gallery и.gallery-item (не я их придумала, я только стили), то если сайт на другой теме, этими классами надо будет вручную оборачивать ячейки и вставлять урлы картинок.

В общем натыкать из библиотеки картинок и вокруг наставить айтемы. И все это взять в класс .gallery

У меня выглядит так. Внутренние классы не важны, это чисто к моей теме фишки.

код гелереи хтмл

Будет типа так примерно

<div class=”gallery”>
<div class=”gallery-item”><img src=”https://ссыль картинки” /></div>
<div class=”gallery-item”><img src=”https://” /></div>
<div class=”gallery-item”><img src=”https://” /></div>
<div class=”gallery-item”><img src=”https://” /></div>
<div class=”gallery-item”><img src=”https://” /></div>
<div class=”gallery-item”><img src=”https://” /></div>
</div>

У нас в теме само делается. В библиотеке есть пункт “Создать галерею”, выбираешь и появляется вот что (шорткод):

(gallery size=”full” ids=”5225,5227,5230,5229,5228,5226″)

Он создает галерею. Это номера картинок. Я скобки шорткода [] убрала, а то ставилась вся галерея. Кстати, я тормоз и про существование галереи узнала недавно, хотя сайт на теме год так точно. Невнимательность — высший уровень.)))))))))

Что за писанина

flex: 1 1 calc(33.33% – 30px); – не убирать. Размеры с отступами.

margin: 5px; – отступ между рамками.

box-sizing: border-box; – адекватный размер.

min-width: 170px; – для переноса при сужении экрана

Для текста, если есть под картинкой:

font-size: 22px;
text-align: center;

+ свой цвет в тему дизайна, но, я думаю, он сам унаследуется от боди или Н.

background: #eff5fb; – фон ячейки

box-shadow: 0 0 10px 1px #789;  – тень между ячейками.

border: 10px solid rgba(0,0,0,.1); – рамка.

Рамка и тень создают эффект объема. Это можно убирать. Главное не убирать flex: 1 1 calc(33.33% – 30px); box-sizing: border-box; min-width: 170px;

Хотя, если любите смотреть трэш и хоррор, можете убрать конечно.

Без них накроется все. Создаю картинки в фотошопе размером 500 на 300 (просто так решила), чтобы при нажатии они увеличивались до полного размера. Но это будет несколько тормозить скорость. Ничего.

ВАРИАНТЫ:

На самом деле пробуйте отключать рамку border: 10px solid rgba(0,0,0,.1); или box-sizing: border-box; Иначе будет выглядеть. Тоже прикольно.

Если поставить padding: 0px; – то не будет отступов от рамки до картинки.тоже хороший вариант.

Если получается чушь, значит надо дописать еще что-то, например margin: 0 auto; или другие размеры под свою ширину блока для контента. Еще может быть чушь, если какие-то другие приоритетные правила перекрывают или наследуются. Например, какие-то импортанты для img.

Смотрим пример: (это кодом, можно жмякать)

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

Там варианты тоже есть при создании. И на что ссылается, и попробовать вставлять миниатюры, посмотреть, что будет. Просто эти нюансы не для этой статьи. Я еще не перебирала варианты. Нет смысла это разбирать, все равно никому не поможет, у всех другие темы.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Я согласен с политикой конфиденциальности

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.