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

70 Время чтения: 2 мин.

После того, как я наконец выпустил свою первую тему на 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 ‘

‘. esc_html( $title ). ‘

‘. do_shortcode( wp_kses_post( $content) ). ‘

‘;
}
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. Просто поместите в свой файл 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;
}