davehunt
  • 0
Новичок

Подпись на странице добавляет нежелательные 10 пикселей к ширине

  • 0

Я пытаюсь создать изображение с подписью на странице, с которой я работаю. В параметрах изображения я выровнял его по правому краю с шириной изображения 220. Без подписи у меня нет проблем, однако с добавлением подписи он добавляет оболочку div с шириной встроенного стиля 230 пикселей. Единственный способ исправить это — установить ширину вручную в параметрах изображения на 210 пикселей, что затем делает встроенную ширину 220 пикселей (она просто добавляет 10 пикселей к значению).

Как предотвратить добавление этих дополнительных 10 пикселей к ширине встроенного стиля?

Share
  1. Это сильно зависит от того, как ваша тема отображает его и не мешает ли плагин (подключается, фильтрует что-то). Пробовали ли вы это с темами Twenty* по умолчанию и без активированных плагинов?

    • 0
  2. Вот что вы можете сделать. В начале функции выполнения шорткода для внешнего интерфейса есть фильтр, который позволит вам захватывать подписи. Возврат непустого значения остановит выполнение шорткода, поэтому, если вы просто обработаете шорткод так, как вы хотите, и вернете этот результат, вы можете избавиться от надоедливых 10 пикселей встроенного заполнения. Помещение чего-то подобного в functions.php файл вашей темы или в плагин будет работать:

    function wpse14305_img_caption( $empty_string, $attributes, $content ){
      extract(shortcode_atts(array(
        'id' => '',
        'align' => 'alignnone',
        'width' => '',
        'caption' => ''
      ), $attributes));
      if ( empty($caption) )
        return $content;
      if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
      return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '">' . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
    }
    
    add_filter( 'img_caption_shortcode', 'wpse14305_img_caption', 10, 3 );
    
    • 0
  3. Начиная с версии 3.7 существует фильтр для непосредственного изменения ширины обертки div. Это исправит лишние 10 пикселей и не позволит подписи выходить за пределы ширины изображения (в отличие от width: auto !important).

    function wp456_img_caption_width( $width, $atts, $content){
        //by default 10 is added if image caption
        return $width - 10;
     }
    
    add_filter( 'img_caption_shortcode_width', 'wp456_img_caption_width', 10, 3 );
    
    • 0
  4. Я склонен подходить к этому иначе, чем Джон — его решение включает в себя дублирование внутренностей img_caption_shortcode() функции, которая была изменена в обновлениях WordPress с момента добавления этого решения. Вместо этого вы можете подключиться к параметрам шорткода, переданным в код генерации подписи, и просто вычесть 10 пикселей из ширины, чтобы противодействовать тому, что делает WordPress:

    add_filter('shortcode_atts_caption', 'fixExtraCaptionPadding');
    
    function fixExtraCaptionPadding($attrs)
    {
        if (!empty($attrs['width'])) {
            $attrs['width'] -= 10;
        }
        return $attrs;
    }
    
    • 0
  5. Существует также простое решение CSS для переопределения встроенных стилей WordPress.

    .wp-caption {
        display: table-cell;
        width: auto !important;
    }
    

    Установка ширины для auto блочного элемента приведет к тому, что его ширина расширится, чтобы заполнить доступное пространство, что, вероятно, не то, что нужно, но установка автоматически display: table-cell изменяет div размер в соответствии с содержимым.

    Как элемент ячейки таблицы, div wp-caption автоматически изменяет размер, как если бы он был встроенным блоком, но ведет себя как блочный элемент в том содержимом, которое следует за ним, даже встроенное содержимое без контейнера отображается ниже div. а не на той же строке, как если бы это был встроенный блок.

    ( !important Требуется, поскольку в противном случае встроенный стиль переопределяет таблицу стилей.)

    Мне не удалось найти точное описание того, как должна вести себя ячейка таблицы css, но я проверил это в Internet Explorer (включая IE8 на WinXP), Firefox, Chrome и Opera и обнаружил полную согласованность.

    • 0

Оставить ответ

You must login to add an answer.