Такой код ломает разметку, как правильно тут создать шорткод? как впрочем и return ' Код (Text): <?php add_shortcode ( 'thanks', 'my_shortcode_thanks' ); function my_shortcode_thanks ( $attr, $content = null ) { return <<< EOT <html> <head> <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 50%; border: none; text-align: center; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } </style> </head> <body> <button class="accordion">Сайт юристы Воронежа благодарит...</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur a............. nostrud exercitati uip ex ea commodo consequat.</p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> </body> </html> EOT; } ?> и более простой вариант ведет себя также Код (Text): <?php function my_shortcode_thanks () { return ' <style type="text/css"> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 50%; border: none; text-align: center; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } </style> <button class="accordion">Сайт юристы Воронежа благодарит...</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur a............. nostrud exercitati uip ex ea commodo consequat.</p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script>'; } add_shortcode ( 'thanks', 'my_shortcode_thanks' ); ?>
и даже такой вроде правильный код не работает Код (Text): <?php function my_shortcode_thanks ($atts , $content = null ) { ob_start(); ?> <div style="border: 2px dotted green"> <button class="accordion">Сайт юристы Воронежа благодарит...</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur a............. nostrud exercitati uip ex ea commodo consequat.</p> </div> <style type="text/css"> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 50%; border: none; text-align: center; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } </style> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> </div> <?php $html = ob_end_clean(); return $html; } add_shortcode ( 'thanks', 'my_shortcode_thanks' ); ?>
Ну пихать в шорткод всё, от <html> точно неправильно. Другие варианты должны, по идее, срабатывать. Код вставляется в то место, где шорткод вы пишите? Тему переношу в WordPress
@mkramer, сам шоркод, а выводится в футере через <?php echo do_shortcode ('[thanks]'); ?> аналогичный код работает правильно если создаешь на его основе виджет. видимо мой код как дополнительно "экранировать" нужно в потоке элементов. Хотя EOT для этого и нужен...
Выводится ли в этом месте код html? Ничего экранировать не нужно, насколько я помню. Как ты определяешь, что у тебя что-то сломалось? Визуально или по исходному коду страницы?
@mkramer, визуально - странно увеличивается область чата, которая выводится через шорткод текстового виджета (которая в хидере). Если отключить мой новый шорткод - всё нормально становится, посмотрите сами на jurvrn.ru
Визуально - это непрофессионально на 100%. Для начала надо нажать волшебные кнопочки Ctrl+U в браузере, и посмотреть, выводится ли код шорткода. Если выводится, то проблема в каких-нибудь стилях
@mkramer, сайт это черновик. Только вырабатываю структуру. По поводу стилей...скорее всего где-то они совмещаются в потоке html... иначе как они могут влиять на друг друга? Тем более странно что этот последний виджет так влияет на другой.... Буду начинать сначала. Как правильно программировать такой шорткод? Есть образец, основа. Не хочу плагинами пользоваться
@mkramer я разобрался, с кодом было всё правильно! вы были правы, спасибо, дело в стиле - там в одном шорткоде был стиль .active, который вешал на скрипт действие, видимо в двух шорткодах они как-то пересекались, я просто сделал .accordion.active, то есть индивидуализировал стиль, чтобы не пересекались
PS не помогло. Свойства стилей active почему то накладываются на две кнопки в разных местах....Видимо это косяки java
@mkramer я про <script> имел ввиду... это наверно jquery (см. первый пост) в итоге выяснилась причина - ваша правда - стили сбивались, по причине того, что были в коде php лишние пробелы и кодировка файла с BOM )) тему закрыть можно