Wordpress добавляет нежелательные теги html в мой код - PullRequest
Новая
       26

Wordpress добавляет нежелательные теги html в мой код

0 голосов
/ 22 января 2020

Я не могу понять, почему wp добавляет нежелательные теги 

</p>

в мои любимые html. Я что-то пропустил? Проблема: из-за этого они становятся пустыми 

</p>

, поэтому на моей карточке bootstrap внизу создается граница 3rem, а не 1px.

Новая страница:

  • переключить визуальный редактор на [текст]
  • вставить мой html код
  • страницу обновления

// Html код выглядит так после Vs Studio formating 

<div class="container-fluid p-0">
   <div class="jumbotron w-100 bg-danger text-light px-3 pt-4 pb-2" style="text-shadow: -1px -1px 2px #000000;">

      <div class="d-flex justify-content-between align-items-center px-3 pt-0 pb-2 mb-2">
         <h4>Flexible height</h4>
         <h4>Responsive</h4>
      </div>

      <div class="row no-gutters row-cols-2 row-cols-md-3 row-cols-xl-4">

         <div class="col px-2">
            <div class="card bg-gradient-primary shadow align-content-center list-unstyled">
               <img class="card-img" src="http://localhost/wp_susi/wp-content/uploads/2020/01/image-19.jpg" alt="CardImage">
               <div class="card-img-overlay  pt-2 pb-3 px-2">
                  <p class="card-text">Cards can be used for images, supporting text below/above</p>
                  <div class="d-flex justify-content-between align-items-center">
                     <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;">View</button>
                        <button type="button" class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;">Edit</button>
                     </div>
                     <p>
                        <small>123 Tag</small>
                     </p>
                  </div>
               </div>
            </div>


         </div>

      </div>

   </div>

</div>

это скомпилированный html код из "источника просмотра страницы" 



<h1>gallery</h1>
<div class="container-fluid p-0">
<div class="jumbotron w-100 bg-danger text-light px-3 pt-4 pb-2" style="text-shadow: -1px -1px 2px #000000;">
<div class="d-flex justify-content-between align-items-center px-3 pt-0 pb-2 mb-2">
<h4>Flexible height</h4>
<h4>Responsive</h4>
</p></div>
<div class="row no-gutters row-cols-2 row-cols-md-3 row-cols-xl-4">
<div class="col px-2">
<div class="card bg-gradient-primary shadow align-content-center list-unstyled">
               <img class="card-img" src="http://localhost/wp_susi/wp-content/uploads/2020/01/image-19.jpg" alt="CardImage"></p>
<div class="card-img-overlay  pt-2 pb-3 px-2">
<p class="card-text">Cards can be used for images, supporting text below/above</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
                        <button type="button" class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;">View</button><br />
                        <button type="button" class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;">Edit</button>
                     </div>
<p>
                        <small>123 Tag</small>
                     </p>
</p></div>
</p></div>
</p></div>
</p></div>
</p></div>
</p></div>
</div>
            </div>
         </div>
      </div>
   </div>
</div>

[Он создает эти пустые p´s] [1], а также: 

<br />

// после первой кнопки ... хм, это кажется немного странным, так как я думал, что html не зависит от отступов.
При разработке сетки изображений на странице. php (для простота разработки) все работает как положено, но при перемещении одного и того же кода на wp-страницу (сообщение) это происходит

Вот заголовок и тело страницы html, блок в конце : (поскольку я создал несколько html -виджетов, это может создать некоторые проблемы, поскольку боковая панель находится перед столбцом содержимого)

image

Каким-то образом WordPress Редактор выполняет форматирование, когда: в панели инструментов, после вставки нового кода на новую страницу и переключения в визуальный редактор и обратно в режим текстового редактора. Впоследствии код из wp выглядит следующим образом, и карта отображается немного по-другому, потому что ищите закрывающую скобку тега img 

<div class="container-fluid p-0">
<div class="jumbotron w-100 bg-danger text-light px-3 pt-4 pb-2" style="text-shadow: -1px -1px 2px #000000;">
<div class="d-flex justify-content-between align-items-center px-3 pt-0 pb-2 mb-2">
<h4>Flexible height</h4>
<h4>Responsive</h4>
</div>
<div class="row no-gutters row-cols-2 row-cols-md-3 row-cols-xl-4">
<div class="col px-2">
<div class="card bg-gradient-primary shadow align-content-center"><img class="card-img" src="http://localhost/wp_susi/wp-content/uploads/2020/01/image-19.jpg" alt="CardImage" />
<div class="card-img-overlay pt-2 pb-3 px-2">
<p class="card-text">Cards can be used for images, supporting text below/above</p>

<div class="d-flex justify-content-between align-items-center">
<div class="btn-group"><button class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;" type="button">View</button>
<button class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;" type="button">Edit</button></div>
<small>123 Tag</small>

</div>
</div>
</div>
</div>
</div>
</div>
</div>

И отображение страницы 





<h1>gallery</h1>
<div class="container-fluid p-0">
<div class="jumbotron w-100 bg-danger text-light px-3 pt-4 pb-2" style="text-shadow: -1px -1px 2px #000000;">
<div class="d-flex justify-content-between align-items-center px-3 pt-0 pb-2 mb-2">
<h4>Flexible height</h4>
<h4>Responsive</h4>
</div>
<div class="row no-gutters row-cols-2 row-cols-md-3 row-cols-xl-4">
<div class="col px-2">
<div class="card bg-gradient-primary shadow align-content-center"><img class="card-img" src="http://localhost/wp_susi/wp-content/uploads/2020/01/image-19.jpg" alt="CardImage" /></p>
<div class="card-img-overlay pt-2 pb-3 px-2">
<p class="card-text">Cards can be used for images, supporting text below/above</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group"><button class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;" type="button">View</button><br />
<button class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;" type="button">Edit</button></div>
<p><small>123 Tag</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
            </div>
         </div>
      </div>
   </div>
</div>

Много p´ s пропали, но теперь закрывающая скобка тегов img повреждена и добавлен ap * 

<div class="card bg-gradient-primary shadow align-content-center"><img class="card-img" src="http://localhost/wp_susi/wp-content/uploads/2020/01/image-19.jpg" alt="CardImage" /></p>
´´´

  [1]: https://imgur.com/a/3lPkT1G

1 Ответ

0 голосов
/ 23 января 2020

Я обнаружил проблему, и на Bootstrap слабости я нашел решение: просто добавьте следующий фрагмент кода в функции Wordpress. php

remove_filter ('the_exceprt', 'wpautop');
remove_filter ('the_content', 'wpautop');
remove_filter('term_description','wpautop');

это сработало, потому что в моем случае это была выдержка, которая добавила некоторые p-теги.

...