Добавляем короткий код для адаптивной модульной сетки в 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-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Бог тянет за одну руку, а черт - за обе ноги Буш Вильгельм - (1832-1908) - немецкий поэт и художник |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.