• Главная
  • Карта сайта
Не найдено

Главная Новости

Изменить размер и расположение миниатюры Wordpress

Опубликовано: 01.09.2018

Вступление

Уже давно на WordPress можно в редакторе задавать «Изображение записи». Эта миниатюра отображается рядом с анонсом  статьи. В шаблонах WordPress прописаны размер миниатюры и ее расположение по отношению к тексту анонса. А раз они прописаны, значит, их можно поменять.

Как изменить размер и расположение миниатюры WordPress  вы узнаете их этой статьи.

Обращу ваше внимание, что в статье будем пытаться изменить размер и расположение миниатюры  Wordpress непосредственно в текущем шаблоне. В файлах шаблона миниатюра прописывается, как Thumbnail. Чаще всего, миниатюра показывается слева от анонса статьи. Размер может быть разный, чаще от 100 на 100 px.

Размер миниатюры можно изменить

Важно! Пред работой, чтобы избежать « белого экрана » делаем резервную копию сайта .

Изменить размер миниатюры можно в файле шаблона, в который входит тег вывода анонса статьи. Скорее всего это будет content.php. В административной части сайта  открываем редактор . В файле content.php ищем (слово поиска: thumbnail) код содержащий функцию вывода на экран html код картинки :

<?php the_post_thumbnail( $size, $attr ); ?>

Например такого вида:

<?php if(has_post_thumbnail()) { echo '<span class="thumbnail"><a href="'; the_permalink(); echo '">'; the_post_thumbnail(array(100,100)); echo '</a></span>'; } the_excerpt(); } ?>

Меняем значения [100,100] на нужный нам размер Миниатюры. На фото пример замены размера миниатюры записи с 100×100 px  на 200×200 px.

 Изменить отображение миниатюры по отношению к тексту анонса

Изменить размер и расположение миниатюры WordPress можно редакцией таблицей стилей шаблона. Для этого открываем Редактор . Ищем файл style.css (Таблица стилей). В файле ищем секцию: /* Images */. В секции ищем код, опять со словом thumbnail.

.entry-summary .thumbnail img { float: none; margin-right: 10px; max-width: 100px; max-height: 100px; padding: 3px; width: expression(document.body.clientWidth < 742? '200px' : document.body.clientWidth > 1000? '200px' : 'auto'); }

И меняем Значение свойства float:

float:left | right | none

На выбор вставляем одно из значений : left | right | none ( левое | правое | нет ).

Также меняем значения в секции ниже , в соответствии с тем, что установили в файле Loop-singl.php.

max-width: 100px; меняем на нужный размер;

max-height: 100px; меняем на нужный размер.

Не забываем сохраниться.  

Примечание: В зависимости от верстки шаблона «прописку» миниатюры, может быть придется поискать по файлам шаблона.

Размеры миниатюр в файле function.php

Если так изменить размер и расположение миниатюры WordPress , то такое изменение придется повторять каждый раз при обновлении шаблона. Это эффективно, хотя не удобно. Поэтому, лучше добавить или изменить, если уже есть, размеры миниатюр в файле function.php рабочей темы.

Важно! Перед любыми изменениями в файлах шаблона, особенно в файле function.php, сделайте резервную копию сайта, для восстановления сайта в случае ошибок.

Например добавить размеры миниатюр, по умолчанию, можно, так :

if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 150, 150, true );

Причем изображение будет обрезаться (true). Код вставляется в файл function.php.

Вывод

На этом все! Надеюсь эти старенькие советы помогут изменить размер и расположение миниатюры WordPress.

WordPress Codex

Скрытый текст

Функция

the_post_thumbnail

Назначение

Функция the_post_thumbnail выводит html код картинки-миниатюры поста пустое значение, если картинка отсутствует.

Применение

Этот тег шаблона, функция the_post_thumbnail, должен использоваться внутри Цикла WordPress

Использование

<?php the_post_thumbnail( $size, $attr ); ?> the_post_thumbnail( string|array $size = 'post-thumbnail', string|array $attr = '' )

Источник

Файл:  wp-includes / post-thumbnail-template.php

function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ) { echo get_the_post_thumbnail( null, $size, $attr ); }

Параметры

$size (строка/массив)

Размер миниатюры, которую нужно получить. Может быть строкой с условными размерами: thumbnail, medium, large, full или массив из двух элементов (ширина и высота картинки): array(60, 60).

По умолчанию : ‘post-thumbnail’, то есть размер который устанавливается для текущей темы функцией set_post_thumbnail_size()

$attr (строка/массив)

Массив атрибутов, которые нужно добавить получаемому html тегу img (alt — альтернативное название).

По умолчанию :

Пример

<?php // Post featured image if(has_post_thumbnail()) { if (!is_single()){ ?><a href="<?php the_permalink(); ?>" title= "<?php printf( $SMTheme->_( 'permalink' ), the_title_attribute( 'echo=0' ) ); ?>"> <?php } the_post_thumbnail( array($SMTheme->get( 'layout', 'imgwidth' ), $SMTheme->get( 'layout', 'imgheight' )), array("class" => $SMTheme->get( 'layout','imgpos' ) . " featured_image") ); if (!is_single()){ ?></a><?php } } ?>

Статьи связанные по теме:

www.wordpress-abc.ru

Другие статьи раздела: Администрирование WordPress

Статьи связанные по теме:

Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss