Добавляем короткий код для адаптивной модульной сетки в 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
Новые статьи и публикации
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 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 » Интеграция с Яндекс Еда
Секрет быть несчастным: иметь время занудствовать на тему, счастлив ты или нет Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp