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

  • Решено jurvrn

    (@jurvrn)


    5 лет, 2 месяца назад

    Такой код ломает разметку других шорткодов, он как-то влияет на другие шорткоды…
    сам шоркод, а выводится в футере через
    <?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)
  • Модератор Юрій

    (@yube)

    5 лет, 2 месяца назад

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

    Автор jurvrn

    (@jurvrn)

    5 лет, 2 месяца назад

    Юрий (@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;
}
?>

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

    • Ответ изменён 5 лет, 2 месяца назад пользователем jurvrn.
    Модератор Юрій

    (@yube)

    5 лет, 2 месяца назад

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

    Автор jurvrn

    (@jurvrn)

    5 лет, 2 месяца назад

    Юрий (@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 — результата нет ((

    • Ответ изменён 5 лет, 2 месяца назад пользователем jurvrn.
    • Ответ изменён 5 лет, 2 месяца назад пользователем jurvrn.
    • Ответ изменён 5 лет, 2 месяца назад пользователем jurvrn.
    Автор jurvrn

    (@jurvrn)

    5 лет, 2 месяца назад

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

    Автор jurvrn

    (@jurvrn)

    5 лет, 2 месяца назад

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

    Автор jurvrn

    (@jurvrn)

    5 лет, 2 месяца назад

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

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