Добавим информационные блоки (по типу спойлер) в любое место сайта – без плагинов: легко и просто…

В статье рассмотрим вариации вывода информации (произвольное количество блоков) на совершенно любой странице (в требуемом месте) либо в любой точке страницы сайта: то есть вызовом функции в файлах шаблона. Без плагинов! легко и просто…

Различные способы – спойлером, аккордеоном, либо просто открытыми блоками с дочерними элементами – как угодно. Например, информационный блок FAQ вопросов-ответов. К тому же, всё это информативное чтиво возможно организовать тегами микроразметки (если это ЧАВО-блок – FAQ).

Вариант абсолютно автономен: возможно использовать вкупе с плагинами по типу Elementor и пр. либо, если кто использует сайдбары, в сайдбаре.

Приступим (возможно, добавлю видеоинструкцию):

 

 

 

 

 

 

 

 

выводим информационные блоки абсолютно в любом месте сайта

 

 

 

 

Примерно так (фото ниже) будет выглядеть блок информации (по типу – раскрывающихся блоков).

 

Как и говорилось выше, возможно настроить вариант вывода блока FAQ (Вопрос/Ответ), в этом случае будет логичным добавление атрибутов соответствующей микроразметки.

 

 

 

 

 

 

Ниже дан код для прописки в файле функций functions.php активной (либо дочерней) темы – либо же пропишите в какие-то отдельные файлы, или Создайте свой плагин).

 

 

/*инфо шорткоды*/
add_shortcode('doats', 'ats_castss_shortcode');
function ats_castss_shortcode( $atts, $contentss = null )
{
extract(shortcode_atts(array(
"color" => '', // blue или пусто
), $atts));
//<title>Возможно добавить имя блоку: вопросы/ответы</title>
return do_shortcode( '<div class="atssb doats_'.$color.'">'.$contentss.'</div>' );
// <div itemscope itemtype="https://schema.org/FAQPage">возможны данные из строки выше</div>
}

add_shortcode('dosats', 'ats_site_shortcode');
function ats_site_shortcode( $atts, $contentss = null )
{
extract(shortcode_atts(array(
"name" => ' ',
"question" => ' ',
), $atts));
//$fname = 'itemprop="name"'; // если используем микроразметку
//$ftext = 'itemprop="text"'; // если используем микроразметку
$fboxss = 'class="ats_links"'; //
return do_shortcode( '<div>
<a href="#'.$name.'" '.$fboxss.' >'.$question.'</a>
<div class="doats_body" id="'.$name.'" name="'.$name.'">'.$contentss.'</div>
</div>');
/* Вариант микроразметки - пример:
<div style="display:none" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"><div '.$fname.'>'.$question.'</div>
<div style="display:none" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"><div '.$ftext.'>'.$contentss.'</div></div></div>
*/
}
/*инфо шорткоды*/

 

 

 

 

 

 

 

 

Если требуется вариант информационного блока “аккордеон”, тогда создаем JS файл – например bloc-b.js:

 

 

Содержание файла такое:

 

 

if(location.hash) {
questnum = location.hash.replace(/#/g, "");
document.getElementById(questnum).style.display = "block";
}
jQuery(document).ready(function($) {
$(document).ready(function(){
$(".ats_links").click(function(){
$(this).parent().children("div.doats_body").toggle("normal");
return false;
});
});
});

 

 

 

 

 

Подключаем JS файл, например так (прежде поместите созданный файл bloc-b.js в ядро шаблона в папку js):

 

 

add_action('wp_footer', 'func_mihats_ats');
function func_mihats_ats(){ // комментарии: в "имя_темы" укажите название вашего шаблона
echo <<<EOT
<script src='/wp-content/themes/имя_темы/js/bloc-b.js'></script>
EOT;
}

 

 

 

 

 

 

Стили css для информационных блоков:

 

 

 

Дан вариант для “аккардеона”, если вам симпатичнее простой вариант блоков – уберите ненужные селекторы, подредактируйте.

 

 

 

.ats_links {display:block;color:#fff;
font-weight:800!important;padding:5px 5px 5px 5px;
margin-bottom:4px;text-decoration:none;border-radius:3px;
-webkit-border-radius:3px;-moz-border-radius:3px}
.ats_links:hover {color:white}
.ats_links:focus {color:#fff}

.doats_body {background:#eaeaea;display:none;border-bottom:1px solid #ccc;border-left:1px solid #ccc;border-radius:4px;padding:5px;margin:0px 7px 4px 10px}

/* Faq Colors*/
.doats_grey div a.ats_links{background-color:#aaa;border-left:5px solid #aaa}
.doats_grey div a.ats_links:hover {background-color:#dddddd;border-left:5px solid #aaa}

.doats_blue div a.ats_links {background-color:#1ec8bb;border-left:5px solid #1ec8bb}
.doats_blue div a.ats_links:hover {background-color:#91d6d1;border-left:5px solid #1ec8bb}

.doats_red div a.ats_links {background-color:red;border-left:5px solid red}
.doats_red div a.ats_links:hover {background-color:pink;border-left:5px solid red}

.doats_green div a.ats_links {background-color:#4da54d;border-left:5px solid #4da54d}
.doats_green div a.ats_links:hover {background-color:#89c189;border-left:5px solid #4da54d}

.doats_yellow div a.ats_links {background-color:Gold;border-left:5px solid Gold}
.doats_yellow div a.ats_links:hover {background-color:#EEDD82;border-left:5px solid Gold}

 

 

 

 

шорткоды для записи и вывода информации во фронтенде

 

 

 

 

Информация организуется при помощи блоков шорткодов (если работаем в текстовых редакторах Записей, Страниц):

 

 

[doats color="blue"]
[dosats name="name" question="Вопрос 1"]
Ответ 1
[/dosats]
[dosats name="name" question="Как связаться с админом"]
Ответ 2
[/dosats]
[dosats name="name" question="Вопрос 4"]
Ответ 4
[/dosats]
[/doats]

 

 

 

Вывод блока шорткода напрямую в файлах шаблона:

 

 

<?php echo do_shortcode( '
[doats color="blue"]
[dosats name="name" question="Вопрос 1"]
Ответ 1

[/dosats]
[dosats name="name" question="Как связаться с админом"]
Ответ 2

[/dosats]

[dosats name="name" question="Вопрос 4"]
Ответ 4

[/dosats][/doats]
' ); ?>

 

 

Это color="blue" определит цвет активной области ссылок вопросов.

 

 

 

 

как эпилог:

 

Если всё повторите по инструкции правильно (без ошибок) то у вас блоки прекрасно заработают тут же после правок!

 

 

 

 

 

 

 

 

 

 

 

 

 

Адаптация настроек профиля пользователя… добавим возможности настроек и вывода на сайте второго блока об авторе. – абсолютно в любом месте сайта.

Располагает визуальным и текстовым редакторами…