Тайная строка разрыва

Вопрос или проблема

У меня есть вопрос новичка по программированию, если кто-то не против взглянуть. Пытаюсь разместить заголовок на одной строке с меткой, т.е.

Метка: Заголовок

В настоящее время он отформатирован следующим образом:

Метка:

Заголовок

<p>
<?php echo apply_filters('cm_tooltip_parse', 'Метка: ', true); ?>
<?php if ( generate_show_title() ) {
    the_title();
}
?>
</p>

Также пробовал:

<p>
<?php echo apply_filters('cm_tooltip_parse', 'Метка: ', true);
if ( generate_show_title() ) {
    the_title();
}
?>
</p>

Обычно я справляюсь с базовым форматированием, но что-то в фильтре, похоже, заставляет переноситься на новую строку,

Спасибо,

Привет, Тим. Я включил полный код ниже, чтобы увидеть, как это влияет на это.

Используя код Тима, ‘Метка’ и ‘Заголовок’ теперь находятся на одной строке, но (как он указал) несмотря на удаление пробелов, у меня все еще возникает пробел под этой строкой (‘Опубликовано’) начинается новый абзац. Если я убираю <p> перед 'Метка: ', и '</p>', после него и ставлю <br /> в конце, я получаю нужное форматирование, но тултип больше недоступен для 'Метка: '

<p>
<?php 
echo ! generate_show_title() ?: trim( apply_filters( 'cm_tooltip_parse', the_title( 'Метка: ', false ), true ), " \t\n\r\0\x0B" );
?><br />                            

Опубликовано: <time datetime="<?php echo esc_attr( get_the_date( 'c' ) ); ?>"><?php echo esc_html( get_the_date() );
                            ?></time><br />

<?php if( get_field('date_updated') ): ?>
    Обновлено: <?php the_field('date_updated'); ?><br />
<?php endif; ?>

</p>

Вы можете попробовать это, посмотреть, будет ли это как-то по-другому:

<p>
<?php $label = apply_filters('cm_tooltip_parse', 'Метка: ', true);
if ( generate_show_title() ) {$title = get_the_title();} else {$title="";}
echo str_replace( array( "\n", "\r"), array( '', ''), $label . $title );
?>
</p>

Если это сработает, cm_tooltip_parse или generate_show_title вероятно выводят разрыв строки где-то, но по крайней мере это удаляется таким образом.

информации действительно недостаточно, но исходя из предоставленного вами кода, вот что я вижу:

  1. используемый фильтр принадлежит плагину и используется в местах, где необходимо разобрать и отформатировать динамический контент для любых сопоставляющихся терминов, которые вы добавили в глоссарий, дополнительно добавляя тултип для термина. Вы передаете статическую строку "Метка: " этому.
  2. Существуют некоторые настройки в CM Tooltip Glossary > Tooltip – Content > Чистый текст тултипа? и CM Tooltip Glossary > Tooltip – Content > Избегать разбора защищенных тегов?. Пробовали ли вы переключать их, чтобы увидеть, обеспечивают ли они вывод так, как вы хотите?
  3. Поскольку кажется, что это проблема форматирования из-за фильтра парсинга, устранение любых областей, которые он может интерпретировать неправильно, может помочь. Например, создайте строку самостоятельно и выводите вместо того, чтобы выходить и входить в PHP на разных строках. Вы можете использовать the_title внутри вашего вызова apply_filters. Скорее всего, вы хотите, чтобы парсер проверял не только статическую строку 'Метка: ', но также имел в виду и заголовок:
<?php echo ! generate_show_title() ?: apply_filters( 'cm_tooltip_parse', the_title( '<p>Метка: ', '</p>', false ), true ); ?>
  1. Поскольку ваш пример кода добавлял разрывы строк после вашей статической строки 'Метка: ', это значит, что использование вышеуказанного кода выводило бы в одной строке, как вы желаете: <p>Метка: $title</p>. Разрывы строк от парсера все еще будут существовать и выводиться после этого. Вы можете обернуть вывод в что-то вроде trim(), я полагаю:
<?php 
/**
 * Удаляет следующее из выходной строки:
 * 
 * ' '   : Пробел
 * '\t'  : табуляция
 * '\n'  : новая строка
 * '\r'  : возврат каретки
 * '\0'  : NUL-байт
 * '\x0B': вертикальная табуляция
 */
echo ! generate_show_title() ?: trim( apply_filters( 'cm_tooltip_parse', the_title( '<p>Метка: ', '</p>', false ), true ), " \t\n\r\0\x0B" );

Правка:
Оставшаяся проблема, которую я вижу из предоставленного фрагмента, может быть вызвана недопустимым HTML.

Возьмите этот базовый пример:

<p>
    <p>что-то</p>
</p>

Первый <p> открывающий тег будет автоматически закрыт в браузере, когда он встретит следующий <p> открывающий тег, окружающий “что-то”. Поэтому с этим базовым примером браузер в конечном итоге отобразит это примерно так:

<p>
</p>
<p>что-то</p>
<p>
</p>

Что я бы попробовал, так это сначала изменить ваш окружающий <p> тег на <div>, и ваша метка/заголовок обычно должны быть в каком-то заголовочном теге. Я не знаю всей разметки страницы, поэтому мне трудно сказать, но я просто возьму <h1>.
Элемент <h1> должен содержать основную “тему” страницы, и так как это то, что люди обычно заполняют для the_title – это, вероятно, правильная вещь, чтобы использовать:

<div class="page-details-with-tooltip">
    <?php echo ! generate_show_title() ?: trim( apply_filters( 'cm_tooltip_parse', the_title( '<h1>Метка: ', '</h1>', false ), true ), " \t\n\r\0\x0B" ); ?>
    <p>
        Опубликовано: <time datetime="<?php echo esc_attr( get_the_date( 'c' ) ); ?>"><?php echo esc_html( get_the_date() ); ?></time></br>
        <?php if ( get_field('date_updated') ) : ?>
        Обновлено: <?php the_field('date_updated'); ?>
        <?php endif; ?>
    </p>
</div>

Здесь мы используем <div>, чтобы обозначить блок контента, который может включать другие блоки внутри него. В этом случае у нас есть заголовочный элемент для заголовка (<h1>), а параграфный контент – это сопроводительный текст, описывающий тему с дополнительной метаинформацией, которую мы обернули в <p> тег. Заголовочные элементы (h1-h6) называются заголовочным контентом, что, я полагаю, довольно точно описывает их.

Таким образом, вы, возможно, задаетесь вопросом, почему элемент <time> не переходит на новую строку в выводе, даже несмотря на то, что при его проверке вы видите его отображение на новой строке. Это потому, что это фразовый контент, который в основном определяет текст внутри тега и любой разметки, которую он может содержать. <br> является разрывом строки, чтобы обозначить, что параграф начинается снова в начале следующей строки – как бы это ни напоминало возврат каретки (как \r из того, что мы удаляли выше). Это должно использоваться только тогда, когда разделение контента в абзаце важно визуально, и не должно использоваться для создания пространства между абзацами. В общем, я стараюсь избегать <br> в любой разметке, но для этой ситуации наш вывод – это просто текст, и разрыв строки здесь – это правильное решение. <br> в конце, который вы добавили после части Обновлено: $date – это не то, что следует использовать здесь. Я предполагаю, что это использовалось, так как у вас есть контент, который следует за ним – и вы хотите отделить следующий абзац. Это следует делать визуально, с помощью CSS. Я думаю, мы определили, что вы используете тему GeneratePress – и глядя на стили для <p>, похоже, у них есть отступ снизу для этих элементов, чтобы помочь сохранить единый вертикальный ритм на вашем сайте. С этой разметкой и уже определенными стилями – вам, вероятно, не нужно применять дополнительный CSS для изменения его внешнего вида, так как это должно соответствовать стилю остальной части вашего сайта.

Несколько групп фразового контента делает абзац! Обычный текст также является фразовым контентом. Для более глубокого понимания моделей контента, спецификация W3C HTML5 полна всей информации, которая вам когда-либо пригодится и не пригодится. Важно то, что если мы запустим это через валидатор HTML, он пройдет как правильная разметка, и браузеры смогут отображать это так, как задумано.

Возвращаясь к <div>, который мы использовали для замены <p>, который был в вашем исходном коде – вы можете видеть, что я добавил page-details-with-tooltip в качестве имени класса к этому элементу. Это можно удалить, если вы не считаете это необходимым, но я добавил это, чтобы упростить применение стилей CSS в контексте этой конкретной области, если вы захотите внести какие-либо визуальные изменения в эту область. Существует и другие (обычно лучшие) способы записи селектора, чтобы ссылаться только на эту область в специфических контекстах в WordPress, о которых вы можете прочитать в моем ответе на вопрос #275909.

Надеюсь, это поможет вам решить вашу проблему и даст вам представление о некоторых возможных проблемах, которые могли возникнуть, и, что более важно, почему они могли возникнуть! Очень трудно дать окончательный ответ на что-то столь специфичное, не видя проблему визуально и не имея возможности проверить это в браузере, так как существует множество факторов, которые могут вызывать пробелы – от кода до разметки до CSS. Тем не менее, я смог получить некоторые странно распределенные выходные данные. После этого изменения я все равно рекомендую дважды проверить пункт #4 выше о настройках плагина, так как они, вероятно, имеют что-то загадочное, если они предоставили опцию включения/выключения очистки вывода, который разбирается/отрисовывается в фильтре, просто чтобы убрать это из вашего списка проверки!

Ответ или решение

Для решения вашей проблемы с расположением заголовка и метки на одной строке, а также устранения нежелательного разрыва строки, мы можем рассмотреть несколько аспектов касательно структуры HTML и выполнения PHP. Давайте пошагово проанализируем ситуацию.

1. Структура HTML и типовые элементы

Вы используете элемент <p>, который автоматически добавляет отступ до следующего блочного элемента, если таковой имеется. Это может быть одной из причин, по которой возникает нежелательное пространство между "Label:" и остальным контентом. Вместо этого можно использовать элемент <div>, который не добавляет автоматических отступов так, как это делает <p>.

2. Применение PHP и фильтров

Ваша проблема может быть связана с тем, что некоторые фильтры, такие как cm_tooltip_parse, добавляют предполагаемые разрывы строк или пробелы. Чтобы предотвратить это, можно использовать trim() для удаления лишних пробелов в конце и начале строки.

В приведенном ниже примере кода мы отрегулировали вывод так, чтобы он был упакован в <div> и производился без вторичных разрывов строк:

<div class="page-details-with-tooltip">
    <?php 
    $label = apply_filters('cm_tooltip_parse', 'Label: ', true);
    if (generate_show_title()) {
        $title = get_the_title();
    } else {
        $title = '';
    }

    echo trim($label . ' ' . $title); 
    ?>
    <br />
    Published On: <time datetime="<?php echo esc_attr(get_the_date('c')); ?>"><?php echo esc_html(get_the_date()); ?></time><br />
    <?php if(get_field('date_updated')): ?>
        Updated On: <?php the_field('date_updated'); ?><br />
    <?php endif; ?>
</div>

3. CSS для управления отступами

После изменения разметки вы можете дополнительно контролировать внешний вид через CSS, чтобы гарантировать, что все элементы отображаются так, как вы этого желаете. Например, можно задать отступы и размеры, чтобы избежать нежелательного переноса строк:

.page-details-with-tooltip {
    margin: 0;  /* Убираем отступы */
    padding: 0;
}

.page-details-with-tooltip br {
    display: none;  /* Скрываем дополнительный отступ, если он больше не нужен */
}

4. Проверка плагина

Пока вы тестируете изменения, стоит проверить настройки плагина, который предоставляет фильтр cm_tooltip_parse. Возможно, он имеет разные параметры форматирования, которые могут влиять на вывод. Опции, такие как "Очистка текста подсказки" или "Избегать анализа защищенных тегов", могут касаться вашей проблемы.

Заключение

Для достижения желаемого результата важно правильно структурировать HTML и использовать возможности PHP эффективно для удаления лишних пробелов и разрывов. Проверяйте CSS, чтобы максимально контролировать стилизацию и обеспечить желаемый вид на веб-странице. Такие манипуляции помогут вам успешно разрешить задачу по форматированию между "Label:" и "Title".

Если у вас будут дополнительные вопросы или что-то останется неясным, не стесняйтесь задавать новые.

Оцените материал
Добавить комментарий

Капча загружается...