В статье рассмотрим вариации вывода информации (произвольное количество блоков) на совершенно любой странице (в требуемом месте) либо в любой точке страницы сайта: то есть вызовом функции в файлах шаблона. Без плагинов! легко и просто…
Различные способы – спойлером, аккордеоном, либо просто открытыми блоками с дочерними элементами – как угодно. Например, информационный блок FAQ вопросов-ответов. К тому же, всё это информативное чтиво возможно организовать тегами микроразметки (если это ЧАВО-блок – FAQ).
Вариант абсолютно автономен: возможно использовать вкупе с плагинами по типу Elementor и пр. либо, если кто использует сайдбары, в сайдбаре.
Приступим (возможно, добавлю видеоинструкцию):
Описанные по тексту ниже варианты вывода информационных блоков – всего лишь варианты: всё это возможно перенастроить на свои усмотрения и требования.
Главное должны быть подключены библиотеки jquery типа 1.12.4.
Если используются сайдбары, то вот плагин widget text class ats (текстовый виджет), который умеет работать с функциями php
, html
и шорткодами (доступен в репозитории WP).
Использование виджетов WordPress — добавить и настроить абсолютно в любом месте сайта БЕЗ использования сайдбара!
выводим информационные блоки абсолютно в любом месте сайта
Примерно так (фото ниже) будет выглядеть блок информации (по типу – раскрывающихся блоков).
Как и говорилось выше, возможно настроить вариант вывода блока 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 могут быть какими угодно, кому что из функционального исполнения JS по душе…
Подключаем 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;
}
Подробнее о том, как рационально подключать jQuery библиотеки от CDN Google
Как организовать подключения js скриптов в файлах шаблона — событие wp_footer — без перегрузок!..
Как правильно зарегистрировать JS файлы, подключение JS jQuery к своему шаблону, сайту.
Что правильнее использовать — add_action или функцию — function.
Стили 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"
определит цвет активной области ссылок вопросов.
как эпилог:
Если всё повторите по инструкции правильно (без ошибок) то у вас блоки прекрасно заработают тут же после правок!
Эти варианты вывода шорткодов даны для примеров – наглядности!!
Выводить информацию в файлах сайта, на мой взгляд, правильнее функцией. Но для этого нужно создать в админке соответствующую страницу настроек, на которой будет собран инструментарий управления шорткодами: добавление текстовой… ссылочной информации; варианты дизайна и условия вывода отображения блоков и прочее и прочее. Это значительно удобнее!..
В этом случае данные блоков будут храниться в Базе Данных…
Как создаются страницы настроек, у меня в блоге есть несколько статей…
Подключаем на сайту турбостраницы Яндекса (с плагином и без плагина).
Адаптация настроек профиля пользователя… добавим возможности настроек и вывода на сайте второго блока об авторе. – абсолютно в любом месте сайта.
Располагает визуальным и текстовым редакторами…
mihalica.ru !