Ваш путь: Главная » Сниппеты, хаки, функции » текущая страница
заказать разработку или сопровождение вашего сайта/блога

написано: — 
отредактировано: 2020-07-26
издатель: в теме: Сниппеты, хаки, функции пост видели: 163
Запросто с WordPress — создание сайтов ATs media

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

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

Различные способы — спойлером, аккордеоном, либо просто открытыми блоками с дочерними элементами — как угодно. Например, информационный блок 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 !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...




Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
Статьи по теме:


Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©

 необходимо принять правила конфиденциальности