Поддержка Проблемы и решения Не работает шорткод при создании (ломается верстка)

  • Такой код ломает разметку других шорткодов, он как-то влияет на другие шорткоды…
    сам шоркод, а выводится в футере через
    <?php echo do_shortcode ('[thanks]'); ?>

    аналогичный код работает правильно если создаешь на его основе виджет.
    видимо мой код как дополнительно «экранировать» нужно в потоке элементов. Хотя EOT для этого и нужен…

    <?php
     
    add_shortcode ( 'thanks', 'my_shortcode_thanks' );
     
    function my_shortcode_thanks ($atts , $content = null ) {
    	
    echo <<<EOT
    <!DOCTYPE html>
    <html>
    <head><meta charset="UTF-8"></head>
    <body>
    <div style="border: 1px solid #333">
    <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>
    </body>
    </html>
    EOT;
    }
    ?>

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 7 ответов — с 1 по 7 (всего 7)
  • Модератор Yuri

    (@yube)

    В коде, вставляемом в код страницы (iframe — исключение), не должно быть <!doctype>, <html>, <head>, <body> и их «закрывалок».

    Юрий (@yube), поменял на … но тоже самое

    <?php
     
    add_shortcode ( 'thanks', 'my_shortcode_thanks' );
     
    function my_shortcode_thanks ($atts , $content = null ) {
    	
    echo <<<EOT
    
    <div style="border: 1px solid #333">
    
    <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>
    EOT;
    }
    ?>
    

    то есть сам шорткод работает, но странно увеличивается область чата, которая выводится через шорткод текстового виджета (которая в хидере).
    Если отключить мой новый шорткод — всё нормально становится

    • Ответ изменён 4 года, 7 месяцев назад пользователем jurvrn.
    Модератор Yuri

    (@yube)

    У Вас до сих пор куча <head> и <body>.
    Для начала приведите html в порядок.
    Поможет валидатор https://validator.w3.org/

    Юрий (@yube), я из кода убрал <head> и <body> полностью. Может они из других виджетов и шорткодов?
    Мне кажется что дело ещё в двух ранее созданных шорткодах. По отдельности друг от друга они все работают нормально, но стоит новый шоркод совместить с любым из старых — появляется искажение…

    при валидации

    Sorry, I am unable to validate this document because on line 1 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

    The error was: Modification of a read-only value attempted

    перевод

    Извините, я не могу проверить этот документ, потому что в строке 1 он содержал один или несколько байтов, которые я не могу интерпретировать как utf-8 (другими словами, найденные байты не являются допустимыми значениями в указанной кодировке символов). Пожалуйста, проверьте содержимое файла и кодировку символов.

    Ошибка: попытка изменения значения только для чтения

    в каком файле ошибка не понял
    постарался удалить из всех виджетов и шоркодов упоминание body, html, header — результата нет ((

    • Ответ изменён 4 года, 7 месяцев назад пользователем jurvrn.
    • Ответ изменён 4 года, 7 месяцев назад пользователем jurvrn.
    • Ответ изменён 4 года, 7 месяцев назад пользователем jurvrn.

    разобрался вроде, стили пересекались active из двух скриптов

    PS не помогло. Свойства стилей active почему то накладываются на две кнопки в разных местах….Видимо это косяки java

    тема решена, дело в return и echo <<< в других кодах

    • Ответ изменён 4 года, 7 месяцев назад пользователем jurvrn.
Просмотр 7 ответов — с 1 по 7 (всего 7)
  • Тема «Не работает шорткод при создании (ломается верстка)» закрыта для новых ответов.