Статьи

Создание шорткода Toggle для страницы часто задаваемых вопросов 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=»https://techblog.sdstudio.top/sozdanie-shortkoda-toggle-dlja-stranicy-chasto-zadavaemyh-voprosov-wordpress/#»>’. 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

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

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

Your Toggle Title

Toggle Content

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

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Кнопка «Наверх»

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: