Добавляем короткий код для адаптивной модульной сетки в WordPress
В данном уроке мы сделаем пользовательскую модульную сетку на CSS и интегрируем ее в WordPress с помощью коротких кодов. Так как количество мобильных устройств растет с каждым днем, то модульная сетка будет автоматически адаптироваться под разные размеры экрана.
Шаг 1: Строим сетку CSS
Прежде, чем начать создадим папку css и в ней файл grid.css. Затем размещаем в нем код CSS:
/* ---------------------------------------------------------------------- */ /* Пользовательская сетка /* ---------------------------------------------------------------------- */ .container { margin:0 auto; width:940px; position:relative; } .container .one-half, .container .one-third, .container .one-fourth, .container .two-thirds, .container .three-fourths { float:left; margin-right:20px; } .container .one-half.last, .container .one-third.last, .container .one-fourth.last, .container .two-thirds.last, .container .three-fourths.last { margin-right:0; } .container .one-half { width:460px; } .container .one-third { width:300px; } .container .one-fourth { width:220px; } .container .two-thirds { width:620px; } .container .three-fourths { width:700px; } /* ------------------------------------------- */ /* Адаптивная сетка /* 1. Планшет /* 2. Мобильный телефон - портрет /* 3. Мобильный телефон - ландшафт /* ------------------------------------------- */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width:748px; } .container .one-half { width:364px; } .container .one-third { width:236px; } .container .one-fourth { width:172px; } .container .two-thirds { width:492px; } .container .three-fourths { width:508px; } } @media only screen and (max-width: 767px) { .container { width:300px; } .container .one-half, .container .one-third, .container .one-fourth, .container .two-thirds, .container .three-fourths { width:300px; margin-right:0; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width:420px; } .container .one-half, .container .one-third, .container .one-fourth, .container .two-thirds, .container .three-fourths { width:420px; margin-right:0; } }
Шаг 2: Регистрируем наш CSS код в WordPress
Прежде, чем погрузиться в создание коротких кодов нужно зарегистрировать наш созданный файл CSS. Будем использовать wp_register_style
и wp_enqueue_style
. Код для регистрации нужно размещать в файле functions.php или в том, который встраивается в систему через functions.php. Все действия выполняются с помощью функции add_action
.
if ( !function_exists('register_css') ) { function register_css() { wp_register_style('custom-grid', get_template_directory_uri() . '/css/grid.css'); wp_enqueue_style('custom-grid'); } add_action('wp_enqueue_scripts', 'register_css'); }
Шаг 3: Начинаем создавать короткие коды
Создаем новый файл shortcodes.php для отделения наших функций от остального кода. Также потребуется ссылка на наш файл из functions.php.
// включаем короткие коды include 'shortcodes.php';
Шаг 4: Короткий код. Способ 1
Shortcode API отличная библиотека. Она предоставляет бесконечные возможности.
Так как мы делаем сетку, то в ней будут колонки. Но последняя колонка должна иметь специальное обозначение. Например, если основная область занимает две третьих, а боковая панель справа - одну треть, то боковая панель будет последней колонкой и должна иметь класс last
.
Теперь создаем короткий код. Начнем с основы - колонки в одну вторую. Создаем функцию с названием короткого кода. Она будет получать два аргумента $atts
и $content
. Нужно вернуть элемент div
с классом, обозначающим одну вторую ширины, и переданным содержанием. А затем нужно разрешить исопльзование короткого кода в теме WordPress. Данная задача решается с помощью функции add_shortcode
. Данная функция принимает два параметра: имя доступа к короткому коду и функцию. Мы применяем ‘one_half
‘ для имени доступа, поэтому в теме в тексте записей можно будет использовать [one_half]
.
function one_half( $atts, $content = null ) { return '<div class="one-half">' . do_shortcode( $content ) . '</div>'; } add_shortcode('one_half', 'one_half');
Теперь определим код для последней колонки. Просто создадим еще один короткий код, но вместо [one_half]
будем использовать [one_half_last]
с изменением имени класса <div class="one-half">
на <div class="one-half last">
.
function one_half_last( $atts, $content = null ) { return '<div class="one-half last">' . do_shortcode( $content ) . '</div>'; } add_shortcode('one_half_last', 'one_half_last');
Шаг 7: Короткий код. Способ 2
Если вам не нравится создавать короткие коды отдельно для каждой колонки – один для обычной, а второй для последней, то можно предавать атрибут в функцию, например, [one_half last="yes"]
.
Основная часть функции будет выглядеть также. Нужно сначала извлечь shortcode_atts
. Затем произвести проверку на атрибут ‘last
‘ с помощью выражения if
. В зависимости от результатов проверки изменяется значение переменной $position
, которое добавляется к классу элемента. Теперь для короткого кода [one_half]
можно использовать атрибут ‘last
‘ для добавления специального класса – [one_half last="yes"]
.
function one_half( $atts, $content = null ) { extract( shortcode_atts( array( 'last' => '' ), $atts ) ); if ( $last == 'yes') { $position = 'last'; } else { $position = ''; } return '<div class="one-half ' . $position . '">' . do_shortcode( $content ) . '</div>'; } add_shortcode('one_half', 'one_half');
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/5kNpGxiCshI/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Самое важное в каждом деле – пересилить момент, когда нам не хочется работать. И. Павлов |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.