Как обернуть элемент блока ссылкой? - PullRequest
Новая
       7

Как обернуть элемент блока ссылкой?

0 голосов
/ 24 августа 2018

Как указано в спецификации HTML5

Элемент a может быть обернут вокруг целых абзацев, списков, таблиц и т. Д., Даже целых разделов, если в них нет интерактивного содержимого (например, кнопок или других ссылок).

Имея это в виду, у меня есть документ WordPress PHP, начинающийся с doctype HTML5 (<!DOCTYPE html>), и я обертываю <article> с <a>, и установил <a> в display: block.

Мой источник PHP: 

<a href="<?php the_permalink(); ?>">
    <article>
        <header>
            Some header content
        </header>
        <footer>
            Some footer content
        </footer>
    </article>
</a>

Но когда я просматриваю его в нескольких современных браузерах (протестированных в Chrome, Firefox и Safari), я получаю следующее: 

<a href="the-correctly-rendered-url">
</a>
<article>
  <a href="the-correctly-rendered-url"></a>
  <header>
    <a href="the-correctly-rendered-url">
			    Some header content
            </a>
  </header>
  <footer>
    Some footer content
  </footer>
</article>

Обертка <a> полностью перемещается за пределы <article> и дублируется, чтобы обернуть некоторые элементы внутри нее.

Эти браузеры просто не соответствуют спецификациям HTML5? Что можно сделать, если отображаемая страница не соответствует заданной спецификации?

Ответы [ 4 ]

0 голосов
/ 24 августа 2018

В этом случае некоторые другие пользовательские функции и Wordpress создавали дополнительные теги <a>, project_categories_terms_links() и edit_post_link() внутри тега <article>, что вызывало странный рендеринг.

После того, как я удалил их или сделал их обычным текстом, все выглядело так, как ожидалось.

Надеюсь, это поможет любому, кто столкнется с той же проблемой.

0 голосов
/ 24 августа 2018

Я только что проверил ваш код на этом простом примере, и он хорошо работает в моих браузерах 

<?php
    function the_url()
    {
        echo 'http://exemple.com';
    }
?>

<a href="<?php the_url(); ?>">
    <article>
        <header>
            Some header content
        </header>
        <footer>
            Some footer content
        </footer>
    </article>
</a>

Вывод 

<a href="http://exemple.com">
    <article>
        <header>
            Some header content
        </header>
        <footer>
            Some footer content
        </footer>
    </article>
</a>

Ваша проблема в другом месте

0 голосов
/ 24 августа 2018

Ваша проблема связана с функцией the_permalink () , которая будет содержать фильтры и другие элементы.

Код, который вы разместили, работает нормально с обычной функцией, которая просто выводит строку.

Вместо использования 

<a href="<?php the_permalink(); ?>">

Попробуйте использовать 

<a href="<?php echo get_permalink(); ?>">
0 голосов
/ 24 августа 2018

можно попробовать 

    <article>
      <a href="<?php the_url(); ?>">
         <header>
            Some header content
         </header>
         <footer>
            Some footer content
        </footer>
      </a>
    </article>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...