Учебники

Создание шорткода Toggle для страницы часто задаваемых вопросов WordPress

Как избежать конфликтов шорткода тем и плагинов в WordPress

После того, как я наконец выпустил свою первую тему на Themeforest, «Классную бизнес-тему WordPress», я решил поделиться некоторыми учебными пособиями и кодом того, как я создал некоторые из потрясающих функций в этой теме.

Я не буду проводить вас через каждый шаг, объясняя каждый бит кода, потому что его очень легко понять, вместо этого я предоставлю вам все необходимое, чтобы вырезать / вставить короткие коды в вашу собственную тему (даже лучше!)

Шорткод Toggle

Создать шорткод Toggle очень просто. Все, что нам нужно сделать, это добавить функцию шорткода в наш файл functions.php, который имеет 2 варианта: заголовок и цвет. Таким образом, когда вы добавляете шорткод, вы можете выбрать заголовок, который вы можете щелкнуть для эффекта переключения, и цвет, чтобы вы могли добавить различные параметры цвета к своему переключателю, как вы можете видеть в моей демонстрационной ссылке выше, где я добавил белый и серый стиль, чтобы люди могли создавать этот эффект чередования цветов.

Просто скопируйте и вставьте шорткод в свой файл functions.php:

// Register the toggle shortcode function toggle_shortcode( $atts, $content = null) { extract( shortcode_atts( array( 'title' => 'Click To Open', 'color' => '' ), $atts) ); return '<h3 class="toggle-trigger"><a href="#">'. esc_html( $title ). '</a></h3><div class="toggle_container">'. do_shortcode( wp_kses_post( $content) ). '</div>'; } add_shortcode( 'toggle', 'toggle_shortcode' );

Переключить Javascript, CSS и изображения

Ниже приведен весь код, который я использовал для создания переключателей в моей премиальной теме WordPress, если вы хотите добиться того же внешнего вида.

Javascript

Вот Javascript. Вы можете поместить это в свой файл custom.js или в заголовок своей темы.

Важно: убедитесь, что вы уже включили библиотеку jQuery, поскольку она необходима для работы остальной части js 😉

jQuery( function( $) { $( document ).ready(function() { $( ".toggle_container" ).hide(); $( ".toggle-trigger" ).click( function() { $(this).toggleClass( "active" ).next().slideToggle( "normal" ); return false; } ); } ); } );

CSS

Вот CSS. Просто поместите в свой файл style.css

/*toggle*/ .toggle-trigger { margin: 0px !important; font-size: 18px; padding: 10px; padding-left: 30px; background-color: #F5F5F5; background-image: url('images/shortcodes/toggle-plus.png'); background-position: 10px center; background-repeat: no-repeat; } .toggle-trigger a { color: #333; text-decoration: none; display: block; } .toggle-trigger a:hover { color: #0489B7; text-decoration: underline; } .toggle-trigger.active{ background-image: url('images/shortcodes/toggle-minus.png') !important; background-position: 10px center; background-repeat: no-repeat; } .toggle_container { overflow: hidden; padding: 20px 10px; }

Картинки

Ниже представлены два изображения шорткода. Просто щелкните правой кнопкой мыши и выберите «Сохранить изображение как», чтобы сохранить изображения в папке изображений вашей темы.

Создание шорткода Toggle для страницы часто задаваемых вопросов WordPress
Создание шорткода Toggle для страницы часто задаваемых вопросов WordPress

Использование шорткода

Теперь, когда вы добавили весь код, необходимый для шорткода, вы можете легко вставить свои переключатели на свой сайт следующим образом:

[toggle title="Your Toggle Title" color="white"]Toggle Content[/toggle]

Слишком ленивый? Получите тему!

Нажмите на картинку ниже, чтобы проверить мою премиальную тему и купить ее. 🙂

Создание шорткода Toggle для страницы часто задаваемых вопросов WordPress

Источник записи: https://www.wpexplorer.com

Похожие сообщения
Учебники

Как установить и настроить кеширование WordPress с помощью WP Super Cache

Учебники

Руководство для начинающих по пониманию внутренних функций WordPress

Учебники

Как отправлять клиентские счета через WordPress

Учебники

Автоматическое добавление атрибутов заголовка ссылки для публикации ссылок в WordPress