отключить WP автоматически вставленные разрывы строк после изображения

Я установил изображения среднего размера в пользовательский размер, который должен позволять обоим изображениям выравниваться по горизонтали внутри сообщения. (Полная ширина сообщения составляет 880 пикселей, средние изображения – 413 пикселей).

Моя задача состоит в том, что изображения не выравниваются равномерно – изображение справа всегда немного ниже, ЕСЛИ не будет следующей группы средних изображений сразу ниже, и в этом случае эта вторая группа будет выравниваться равномерно.

Я думаю, что это может быть связано с тем, что WP автоматически вставляет разрывы строк после изображения, но несколько способов, которые я пытался отключить, не были успешными.

Что я добавил в сообщение:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" /> <img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" /> 

Что читает браузер:

 <p><img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" /><br /> <img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" /><br /> 

Попытки (неудачные) решения – 1 Как отключить разрывы строк после изображений? 2 Почему WordPress добавляет строку после моего плавающего изображения?

Ссылка на сайт.

введите описание изображения здесь

Solutions Collecting From Web of "отключить WP автоматически вставленные разрывы строк после изображения"

Если это выглядит так:

 <img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" /> <img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" /> 

Тогда вы должны собрать их вот так:

 <img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" /><img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" /> 

Потому что если вы это сделаете ( wpautop ):

 remove_filter( 'the_content', 'wpautop' ); remove_filter( 'the_excerpt', 'wpautop' ); function wpse_wpautop_nobr( $content ) { return wpautop( $content, false ); } add_filter( 'the_content', 'wpse_wpautop_nobr' ); add_filter( 'the_excerpt', 'wpse_wpautop_nobr' ); 

вы, вероятно, сломаете все, что вы написали, это не стоит.

Быстрое исправление заключается в том, чтобы обернуть ваши теги изображений в теги div. Это не позволит WP обернуть изображения в тегах P. Затем вы можете дать divs класс для дальнейшего контроля внешнего вида / расположения.

Мы не можем перехватывать wpautop() . Потому что тогда он будет обрезать весь абзац и разбить теги из контента.

После вставки изображения в редактор просто нажмите на вкладку « Текст » в правом верхнем углу редактора и удалите абзац и разделите теги, которые находятся между изображениями.

Для получения дополнительных параметров (например, выравнивания и других атрибутов) нажмите на изображение, затем установите его соответствующим образом с помощью параметров « Расширенная настройка »

Вы правы, что это теги для сайтов , но есть альтернатива:

Поместите каждое изображение в свой абзац, а не соседние строки

Вот как работает разрыв строки в содержимом WordPress:

Пункты

 This is paragraph 1 This is paragraph 2 

Кратковременные перерывы

 This is paragraph 1 This is also paragraph 1 but on a new line without a space 

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

Поэтому вместо:

 <img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" /> <img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" /> 

Делать:

 <img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" /> <img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" /> 

Теперь каждое изображение обернуто в собственный тег абзаца, давая вам этот вывод:

В результате:

святой моли, проблема выравнивания исчезла

Если вы чувствуете себя авантюрно, вы можете полностью удалить теги p вокруг изображений (на интерфейсе), но я рекомендую не делать этого на вашем сайте. Откройте другой вопрос, если вам интересно, как это сделать.

Удалите тег разрыва строки между вашими изображениями.

Пример:

 <img src="" alt="" /> <br/> <img src="" alt="" /> 

Функция wpautop() добавляет теги <p> и <br> к вашему контенту, чтобы сохранить разрывы строк. Если вы предпочитаете добавлять эти теги самостоятельно, вы можете удалить фильтры, которые применяют эту функцию к сообщению:

 remove_filter( 'the_content', 'wpautop' ); remove_filter( 'the_excerpt', 'wpautop' ); remove_filter( 'the_content', 'wpautop' ); remove_filter( 'the_excerpt', 'wpautop' ); function wpse_wpautop_nobr( $content ) { return wpautop( $content, false ); } add_filter( 'the_content', 'wpse_wpautop_nobr' ); add_filter( 'the_excerpt', 'wpse_wpautop_nobr' ); 

Вы можете попробовать использовать jQuery, чтобы удалить их для вас:

 jQuery(document).ready(function($){ $('img').next('br').remove(); }); 

Это должно удалить любые теги br после изображений, поскольку в следующем будет выбран ближайший следующий элемент. Если это дает вам проблемы, вы можете попробовать .nextAll('br:first') вместо этого

См. Здесь больше примеров и вещей, которые вы можете попробовать.

Предполагая, что проблема – это тег (который, как я считаю, верен), и на основании одного из ваших комментариев, указывающего, что вы не хотите возвращаться и редактировать сообщения, вы можете использовать фильтр the_content для поиска экземпляров двух сред разделенные только новой строкой (которая заменяется тэгом <br> как частью функции wpautop() WordPress) и удаляет новую строку:

 add_filter( 'the_content', 'gowp_152091' ); function gowp_152091( $content ) { preg_replace( "/(<img.*?size-medium.*?>)\n(<img.*?size-medium.*?>)/", "$1$2", $content ); return $content; } 

Рекомендации:

the_content

Функция: preg_replace

Вы можете удалить его с помощью jQuery следующим образом:

 jQuery('.zoomthumbnail-image').next('br').remove(); 

Попробуйте использовать shift + enter вместо ввода в редакторе.