Какой размер логотипа для сайта wordpress
Перейти к содержимому

Какой размер логотипа для сайта wordpress

  • автор:

Как изменить логотип wordpress?

Если вы хотите изменить логотип WordPress на своем сайте, вам необходимо выполнить следующие шаги:

  1. Подготовьте новое изображение, которое вы хотите использовать в качестве логотипа. Размер изображения должен быть WordPress рекомендует использовать изображение размером 512 x 512 пикселей.
  2. Войдите в административную панель своего сайта WordPress.
  3. Наведите курсор на «Внешний вид» в левой боковой панели, затем выберите «Настроить».
  4. В окне настроек выберите «Шапка сайта».
  5. Выберите опцию «Изображение логотипа» и загрузите новое изображение.
  6. Нажмите кнопку «Публиковать» или «Обновить», чтобы сохранить изменения.

Теперь вы увидите, что новый логотип отображается на вашем сайте WordPress. Обратите внимание, что процедура может отличаться в зависимости от используемой вами версии WordPress и используемой вами темы.

Размеры изображений

В этом уроке подробно расскажу, что вообще подразумевается под размерами изображений в WordPress и как их можно использовать на своём сайте.

Как работать с размерами изображений при создании новой темы WordPress я подробно рассказываю в моём видеоуроке.

Что такое размеры изображений и для чего они нужны?

Допустим, вы загрузили изображение на свой сайт. Где и как оно может использоваться? Некоторые из вариантов:

  • Непосредственно в контенте ваших постов,
  • А что, если вы используете какую-нибудь галерею-лайтбокс, когда у вас открывается полная версия изображения во всплывающем окне при клике на него?
  • В качестве миниатюр на страницах архивов, например в рубрках, тегах, блоге.
  • В виджетах, например «Популярные записи», «Распродажа» (если у вас интернет-магазин например) и т.д.,
  • Да даже в админке можно сделать, чтобы посты или рубрики отображались с превьюшками!

В общем существует множество различных вариантов использования одного и того же изображения на сайте. Согласитесь, если во всех этих местах картинка будет одного и того же размера, да ещё и под несколько мегабайт, то это будет очень странно и тупо. Именно поэтому при загрузке изображения на сайт WordPress автоматически создаёт разные его копии (заранее зарегистрированные или указанные в настройках) и вы можете использовать эти копии там, где уместно. Например для админки это может быть копия изображения размером 100х100 пикселей.

Конечно, с дополнительными размерами изображений тоже лучше не злоупотреблять, ведь, чем их больше:

  • тем больше файлов будет в составе вашего сайта (70 тысяч изображений, из которых оригиналов только 2 тысячи — это не круто),
  • тем больше времени потребуется на загрузку каждого файла (ведь движку нужно сгенерировать все эти размеры).

Возможно вас может забеспокоить тот факт – ну как же так, WordPress генерирует столько копий, зачееем. Но а какие ещё есть варианты? До того, как появился этот функционал, помню мы использовали PHP-скрипт, в который передавался URL изображения и размеры, которые нужно создать – явно так себе вариантик.

Стандартные размеры изображений WordPress

По умолчанию WordPress уже поддерживает несколько размеров изображений. Некоторые из них вы можете найти и отредактировать в админке на странице Настройки > Медиафайлы.

Настройки медиафайлов в WordPress

Вы должны кое-что знать про эти три размера: все загруженные вами изображения будут вписаны в те параметры высоты и ширины, которые указаны в админке (скриншот выше), исключение — миниатюры — если в настройках стоит галочка (снова смотрим скриншот), то миниатюры будут строго указанного размера.

Например, вы загрузили на сайт фотографию 1024х765, у вас в итоге получатся следующие копии: крупный — 1024х765, средний — 300х224, миниатюра — 150х150. Ну в общем думаю механизм понятен.

Полный список стандартных размеров изображений в WordPress:

Идентификатор размера Описание
thumbnail Миниатюра, доступна в настройках медиафайлов.
medium Средний размер, доступен в настройках медиафайлов.
large Крупный размер, доступен в настройках медиафайлов.
medium_large Этот размер изображений появился в версии WordPress 4.4 вместе с функцией адаптивных изображений, по умолчанию имеет фиксированную ширину 768 и пропорциональную высоту.
1536×1536 и 2048×2048 Эти два размера появились в версии WordPress 5.3 вместе с функцией оптимизацией больших изображений, видимо потому, что пользователи продолжали вставлять в контент своих сайтов картинки по 10-20МБ.
full Оригинал изображений.

Как отключить и удалить стандартные размеры изображений?

Понятное дело, что в зависимости от того, какой дизайн вашего сайта, вполне вероятно, что вам не понадобится полный список стандартных размеров изображений WordPress. И какие-то из них вы захотите отключить.

Отключение в админке

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

Отключение размеров изображений в WordPress

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

Отключение в коде

В этом случае всё свободится к использованию фильтра intermediate_image_sizes_advanced :

add_filter( 'intermediate_image_sizes_advanced', 'true_remove_default_sizes' ); function true_remove_default_sizes( $sizes ) { unset( $sizes[ 'НАЗВАНИЕ РАЗМЕРА' ] ); return $sizes; }

Если вы не знаете, куда вставлять код, читайте этот урок.

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

add_filter( 'intermediate_image_sizes_advanced', 'true_remove_default_sizes' ); function true_remove_default_sizes( $sizes ) { unset( $sizes[ 'thumbnail' ] ); // миниатюра unset( $sizes[ 'medium' ] ); // средний unset( $sizes[ 'large' ] ); // крупный unset( $sizes[ 'medium_large' ] ); // с шириной 768 unset( $sizes[ '1536x1536' ] ); unset( $sizes[ '2048x2048' ] ); return $sizes; }

Удаление ненужных копий из папки uploads

После вставки этого кода или обновления настроек копии новых изображений с этими размерами не будут создаваться при загрузке. Однако нам как-то нужно избавиться и от старых изображений, которые уже лежат в нашей папке uploads . Для того рекомендую поставить какой-нибудь плагин, который позволит пересоздать все уже существующие копии изображений на сайте и удалить те, которые мы отключили. Мне например для этой цели нравится плагин «Force Regenerate Thumbnails».

Плагин пересоздания размеров изображений

Как использовать дополнительные размеры изображений на сайте

Чтобы научиться использовать размеры изображений на реальном примере, на реальном сайте, рекомендую посмотреть мой видеокурс про создание темы WordPress. Вот ссылка непосредственно на урок про изображения.

Тем не менее коротко об этом расскажу ниже.

В админке

Если мы говорим о добавлении изображений в контент поста в Gutenberg, то настройки размера изображения находятся в сайдбаре справа – там же, где и настройки любого другого блока.

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

выбор размера изображения в медиазагрузчике WordPress

В коде

В WordPress есть различные функции для работы с изображениями в коде. Для вывода изображений я например чаще всего пользуюсь функциями get_the_post_thumbnail(), the_post_thumbnail(), wp_get_attachment_image_src().

Большинство из них имеет параметр $size , в котором вы можете задать название размера. Чуть выше я уже перечислял названия стандартных размеров.

Вот пример вывода миниатюры (большого размера) текущего поста в цикле

the_post_thumbnail( 'large' );

Как добавить собственный размер изображения

Теперь попробуем добавить свой собствевенный произвольный размер изображения. Я постараюсь рассмотреть все моменты, с которыми вам возможно придётся столкнуться. И разделю эту главу на несколько шагов. Но обязателен только первый шаг.

1. Регистрация размера функцией add_image_size()

Прежде всего нам нужно зарегистрировать размер изображения – именно после этого шага WordPress начнёт распознавать его и генерировать копию при каждой загрузке новой картинки на сайт.

Это можно сделать при помощи функции add_image_size() и вот такого например кода:

add_action( 'after_setup_theme', 'true_add_image_size' ); function true_add_image_size() { add_image_size( 'nazvanie-moego_razmera', 244, 244, true ); }

В целом эту функцию рекомендуют добавлять на хук after_setup_theme , и я решил так и поступить. Но я кстати не замечал никаких проблем и при использовании этой функции напрямую без хука.

  • Первый параметр функции – идентификатор размера.
  • Второй – ширина в пикселях.
  • Третий – высота в пикселях.
  • Четвёртый параметр – как обрезать или не обрезать. Подробнее про этот параметр здесь.

2. Добавление размера в медиазагрузчик и в Gutenberg

Как я уже говорил выше, этот шаг необязательный. Но легко осуществимый – для этих целей нам всего лишь понадобится фильтр-хук image_size_names_choose .

add_filter( 'image_size_names_choose', 'true_new_image_sizes' ); function true_new_image_sizes( $sizes ) { $addsizes = array( 'nazvanie_moego_razmera' => 'Мой размер изображения' ); return array_merge( $sizes, $addsizes ); }

добавление размера изображения в загрузчик медиафайлов WordPress

Также благодаря хуку image_size_names_choose размер изображения появится и в Gutenberg:

выбор произвольного размера изображения в Gutenberg

Как обновить изображения при изменении их размеров или смене темы

Возможно вы сталкивались с такой ситуацией, что после изменения параметров функции add_image_size() или же и вовсе при смене темы, у вас на сайте по-прежнему отображались изображения со старыми размерами или же их оригиналы.

Это происходит потому, что хоть мы и изменили размеры изображений на сайте и WordPress теперь будет создавать копии уже для новых размеров, старые копии картинок сами по себе никуда не пропадут из папки uploads. Их нужно пересоздать/удалить вручную или при помощи плагина.

Что делать в этой ситуации? Если на вашем сайте 2-3 картинки, вы конечно можете их просто перезагрузить. А если 2-3 тысячи? Не перезагружать же все картинки по-новой?

Могу порекомендовать вам два классных плагина, которые использовал сам:

  1. «Ajax Thumbnail Rebuild» – хорош тем, что позволяет выбрать только определённые размеры изображений, которые вы хотите пересоздать. Или же вообще только миниатюры записей. Внушительно сэкономит время обновления изображений, особенно если у вас там десятки тысяч копий.
  2. «Force Regenerate Thumbnails» – подходит к процессу более глобально – полностью удаляет и пересоздаёт заново копии для всех зарегистрированных размеров изображений.

Оба плагина доступны к установке через админке WordPress «Плагины > Добавить новый».

Плагин пересоздания размеров изображений

Как избавиться от неиспользуемых размеров изображений для определённого типа записи WordPress

Давайте сначала я опишу задачу, с которой мне пришлось столкнуться.

Итак, на сайте имеется 10 зарегистрированных типов постов, при этом для каждого из них в шаблоне задействовано по 2-3 размера. Нетрудно перемножить эти числа, чтобы понять, что при загрузке любой фотки на сайт у нас создается по 20-30 копий!

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

/* * этот фильтр будет запущен в процессе загрузки изображений на сайт */ add_filter( 'intermediate_image_sizes', 'true_reduce_image_sizes' ); function true_reduce_image_sizes( $sizes ){ /* * $sizes - массив с размерами, например Array ( [0] => thumbnail [1] => medium [2] => large [3] => post-thumbnail ) * получаем тип поста при помощи get_post_type() */ $type = get_post_type( $_REQUEST[ 'post_id' ] ); /* * прокручиваем массив с размерами через цикл, $key - индекс массива, $value - название размера */ foreach( $sizes as $key => $value ){ /* * задаем условия для каждого из типов, если их (типов записей) слишком много, используйте switch */ if( 'page' == $type ) { if( 'regionfeatured' == $value ){ // отключаем regionfeatured для страниц unset( $sizes[ $key ] ); } } else if ( 'region' == $type ) { if( ! in_array( $value, array( 'regionfeatured', 'misha335' ) ) ){ // для регионов отключаем всё, кроме regionfeatured и misha335 unset( $sizes[ $key ] ); } } else { if( 'thumbnail' != $value ){ // отключаем всё, кроме thumbnail unset( $sizes[ $key ] ); } } } return $sizes; }

Также рекомендую свой видеокурс по созданию темы WordPress на основе готовой вёрстки.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

  1. Для чего нужны?
  2. Стандартные размеры изображений
  3. Отключение стандартных размеров
  4. Добавление размера изображения
    1. Регистрация размера
    2. Добавление в Gutenberg / медиазагрузчик
    3. Пересоздание размеров
    Комментарии — 18

    Анастасия 11 Апр 2015

    Полезный код, спасибо, как раз актуально для моих постов в 20-30 картинок
    А вот у меня используется 3 размера — для миниатюр на главной, в блоге и самые мелкие. Получается, мне надо просто два первых размера отключить для загружаемых на страницах и записях изображений ? А после добавления кода плагином Force Regenerate Thumbnail лишние размеры можно удалить?

    Миша 11 Апр 2015

    Код, который я привёл, актуален только при использовани типов постов. Если ваши картинки загружаются только к записям post , то его смысл теряется.

    Миша 11 Апр 2015
    Да, после настройки кода, можно плагином Force Regenerate Thumbnail почистить.
    Анастасия 11 Апр 2015

    Хм, а в записях post нельзя отключить создания размеров миниатюр для загружаемых картинок, если упростить этот код?
    У меня два размера выводятся через add_image_size и не используются на страницах записей

    Миша 12 Апр 2015
    То есть сделать, чтобы размеры не создавались при загрузке картинок через пост? Конечно можно.
    Анастасия 12 Апр 2015

    Да, мне размеры нужны только в ленте постов
    А не подскажете, как? Я вчера пыталась через unset отключить для типа=post, но вроде не сработало

    Миша 13 Апр 2015

    Вы похоже не совсем поняли механизм работы кода. Есть картинки, которые загружаются либо на странице редактирования поста, либо на странице редактирования страницы, либо просто через медиазагрузчик. Вот для одного из этих вариантов размеры мы и можем отключить.

    Анастасия 13 Апр 2015
    Ну допустим, как-то так:

    add_filter( 'intermediate_image_sizes', 'true_reduce_image_sizes' ); function true_reduce_image_sizes( $sizes ){ $type = get_post_type($_REQUEST['post_id']); if( $type == 'post' ) { unset( $sizes['home-thumbnail'] ); } return $sizes; }

    Миша 14 Апр 2015

    Да, код верный, для изображений, загруженных через пост, мы отключаем генерацию размера home-thumbnail. Он выполняет нужную вам задачу?

    Анастасия 14 Апр 2015

    Вот в том-то и дело, что все размеры создаются =( UPD Поковырялась немного и вроде заработал следующий вариант:

    add_filter( 'intermediate_image_sizes', 'ratfelt_image_sizes', 999 ); function ratfelt_image_sizes( $image_sizes ) < $rat_image_sizes = array( 'home-thumbnail' ); if( isset($_REQUEST['post_id']) === get_post_type( $_REQUEST['post_id'] ) ) < return $rat_image_sizes; >else < return $image_sizes; >>

    влад и яша 3 Июл 2015
    Спасибо! Два дня искал нужный код! it works!
    Евгений 31 Окт 2015
    А есть плагин, который дает возможность выбрать, какие копии делать, при загрузке изображения?
    Миша 31 Окт 2015
    Пока не встречал такого 🙂
    Виталий 20 Ноя 2015

    Не знаю, правильно ли я понял, но решение своей проблемы с ресайзом картинок, которые создает WP вижу в следующем:
    когда я загружаю картинку в пост через кнопку «Добавить медиафайл» http://joxi.ru/RmzgyGjfGBR62O ресайзы картинок не должны создаваться,
    а когда добавляю миниатюру http://joxi.ru/VrwQxvGHv9442X , вот здесь уже они создаются.
    Это было бы идеально, но подозреваю, что т.к. и в том, и в др. случае картинки все равно попадают в Медиабиблиотеку, то так, наверное, не получится сделать?

    Александр 3 Июн 2022

    Хелпаните пж, не могу найти функции которые делаю обрезку изображения (в гутенберге это 100%, 75%, 50%, 25%) нашел только размеры миниатюры full, large и тд но это не то, мне нужно в коде вывести аналогично как в редакторе картинку с full размером но обрезанную на 25% как это в коде прописать ? пока накопал только про srcset и sizes

    Александр 3 Июн 2022

    Куда мой комментарий удалили то, на вопрос хотя бы ответьте, как кропнуть изображение как делает это гутенберг, 25% ?

    Александр 3 Июн 2022

    Могу еще раз коммент продублировать, как в коде уменьшить изображение как это делает гутенберг, в моем случае к 25%, поиски в поисковике пока не увенчались успехом, смог только до thumbnail уменьшить sizes и srcset с оригинальным url, но это все равно не то что нужно, почему нельзя просто написать размер 25% и все.

    Андрей 14 Дек 2023

    Михаил, добрый день. Столкнулся со следующим багом: если создаешь и регистрируешь собственный размер больше 800px, то в системе он есть, изображения генерируются, но при редактирования текстового блока и попытке вставить изображение через Add Media в выпадающем списке Size отображается, что мои кастомные размеры ограничены 800 пикселями.
    Исходные данные: WP 6.4.2 / Php 8.2 / Плагинов нет, кроме Classic Editor и Elementor (хотя и их отключал, все равно баг) / Тема: Hello Elementor и собственно ее дочерняя.
    Код в function.php:

    add_filter( 'big_image_size_threshold', '__return_false' ); function add_custom_image_sizes() { add_image_size( 'cw160', 160); add_image_size( 'cw320', 320); add_image_size( 'cw480', 480); add_image_size( 'cw640', 640); add_image_size( 'cw720', 720); add_image_size( 'cw860', 860); add_image_size( 'cw960', 960); add_image_size( 'cw1024', 1024); add_image_size( 'cw1280', 1280); add_image_size( 'cw1440', 1440); } add_action( 'after_setup_theme', 'add_custom_image_sizes' ); function custom_image_sizes( $size_names ) { $new_sizes = array( 'cw160' => __( 'mbt-w160' ), 'cw320' => __( 'mbt-w320' ), 'cw480' => __( 'mbt-w480' ), 'cw640' => __( 'mbt-w640' ), 'cw720' => __( 'mbt-w720' ), 'cw860' => __( 'mbt-w860' ), 'cw960' => __( 'mbt-w960' ), 'cw1024' => __( 'mbt-w1024' ), 'cw1280' => __( 'mbt-w1280' ), 'cw1440' => __( 'mbt-w1440' ), ); return array_merge( $size_names, $new_sizes ); } add_filter( 'image_size_names_choose', 'custom_image_sizes' );

    Так вот в выпадающем списке Sizes медиазагрузчика напротив mbt-w860, mbt-w960, mbt-w1024, mbt-w1280, mbt-w1440 стоит значение — 800×500. Причем в элементоре в модуле Image и других аналогичных список корректный. И проблема в том, что ВП при попытке вставить изображение с размером например mbt-w1280 вставляет в img тэг width=»800″ height=»500″. Возможно вы сталкивались с данной проблемой? Я за 5 часов поиска увы не смог найти.

    Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.

    Favicon

    Блог по web технологиям. Веб студия г. Воронеж. Создание и поддержка сайтов на заказ.

    • Главная
    • /
    • WordPress
    • /
    • Меняем страницу логина в админку WordPress

    Меняем страницу логина в админку WordPress

    Опубликовано 27.07.2017 08.07.2022 Виктор Обломов

    Изначально наша форма входа выглядит следующим образом:

    форма входа wordpress

    Если говорить о простой смене логотипа, то реализуется это весьма просто. Первым делом вам нужно создать соответствующую картинку, которая по размерам будет похожа на базовое лого WordPress, стандартные размеры логотипа 84х84 пикселей. Стандартные размеры логотипа можно изменить, зайдя по адресу wp-admin -> css -> файл wp-admin.min.css и отредактировать свойства .login h1 a , однако при обновлении wordpress все настраиваемые стили вернутся по умолчанию. Как правильно изменить размер логотипа вы увидите чуть позже.

    Сохранять логотип лучше с прозрачным фоном в формате PNG. Потом загружаем изображение на ФТП в директорию images используемого вами шаблона.

    Следующих шаг — в разделе «Внешний вид» — «Редактор» открываем файл functions.php. Вставляем в конец, перед тегом ?> (если такой есть) следующий код:

    function my_login_logo ( ) < #login h1 a < background : url ( '. get_bloginfo(' template_directory' ) .'/images/logo.png ) no-repeat 0 0 !important ; >
    add_action ( ‘login_head’ , ‘my_login_logo’ ) ;
    /* Ставим ссылку с логотипа на сайт, а не на wordpress.org */
    add_filter ( ‘login_headerurl’ , create_function ( » , ‘return get_home_url();’ ) ) ;
    /* убираем title в логотипе «сайт работает на wordpress» */
    add_filter ( ‘login_headertitle’ , create_function ( » , ‘return false;’ ) ) ;

    Обратите внимание на строку №4
    /images/logo.jpg — это путь картинки.
    logo.jpg — имя картинки (если вы назвали картинку по своему, тогда здесь следует заменить).

    Обратите внимание на строку №9
    Мы убираем ссылку с логотипа на сайт wordpress.org и устанавливаем ссылку на главную страницу сайта.

    Обратите внимание на строку №12
    Мы убираем подсказку «Сайт работает на WordPress», которая выскакивает при наведении на логотип курсор мышки.

    Взглянем на результат:

    форма входа wordpress

    Плагин Erident Custom Login and Dashboard Settings

    Если вам нужно нечто большее, чем просто замена логотипа, то проще всего обратиться за помощью к соответствующему плагину. Теоретически вы, конечно, можете поискать нужные файлы ядра системы и подправить код непосредственно в них, но после обновления системы WordPress все эти изменения пропадут. С плагином же такого не случится. Кроме того, с помощью настроек в частности BM Custom Login пользователь сможет самостоятельно править разные параметры для страницы и формы логина.

    kak-izmenit-formu-vhoda-v-wordpress

    1. Устанавливаем и активируем плагин Erident Custom Login and Dashboard.

    2. После активации плагина переходим к настройкам плагина: Настройки -> Custom Login and Dashboard.

    kak-izmenit-formu-vhoda-v-wordpress

    Замена фона на форме входа WordPress

    3. Для замены стандартного фона переходим на вкладку настроек «Login Screen Background».

    kak-izmenit-formu-vhoda-v-wordpress

    • Login Screen Background Color — сделать фон одним цветом
    • Login Screen Background Color — загрузить изображение на фон
    • Login Screen Background Repeat — фоновое изображение повторять/не повторять/повтор по оси Х/повтор по оси Y
    • Background Position — привязка фонового изображения
    • Background Size — размер фонового изображения

    Замена логотипа на форме входа WordPress

    4. Для замены стандартного логотипа переходим на вкладку настроек «Login Screen Logo».

    kak-izmenit-formu-vhoda-v-wordpress

    • Logo URL — задаем наш логотип
    • Logo Width — ширина лого
    • LogoHeight — высота лого
    • Powered by Text — текст при наведении на лого

    Настройка формы входа

    5. Настроить форму входа с помощью этого плагина также очень просто. На вкладке «Login form Setting» можно настроить размеры формы (Login form width), изменить фон на картинку или сплошной цвет (Login Form Background Color), а также изменить:

    kak-izmenit-formu-vhoda-v-wordpress

    • Login form width — ширина формы
    • Login Form Border Radius — радиус рамки формы
    • Login Border Style — стиль рамки формы
    • Login Border Thickness — толщина рамки
    • Login Border Color — цвет рамки
    • Login Form Background Color — цвет фона формы
    • Login Form Background Image — фоновое изображение формы
    • Login Form Background Repeat — повторение фонового изображения
    • Background Position — позиция фонового изображения
    • Login Form Label Text Color — цвет лейбл текста
    • Login Form Label Text Size — размер лейбл текста
    • Login Form Input Text Color — цвет текста в поле ввода
    • Login Form Input Text Size — размер текста в поле ввода
    • Login Form Link Color — цвет ссылок
    • Enable link shadow? — тень для ссылок
    • Login Form Link Shadow Color — цвет тени для ссылок
    • Enable form shadow? — тень для формы логина
    • Login Form Shadow Color — цвет тени формы логина
    • Login Button Color — цвет кнопки
    • Hide Register | Lost your password link — скрыть ссылку регистрации/восстановления пароля
    • Hide Back to your website link — скрыть ссылку возврата на ваш сайт

    Вот что в итоге получилось:

    kak-izmenit-formu-vhoda-v-wordpress

    Экспорт/импорт настроек

    kak-izmenit-formu-vhoda-v-wordpress

    6. Можно сохранить настройки плагина в формате .json во вкладке Export Settings. Либо импортировать настройки, чтобы получить такую же форму входа.

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

    В случае если у Вас возникли вопросы или что-то не получилось — смело пишите в комментариях.

    Размеры изображений в WordPress — как изменить, добавить свои и удалить лишние

    Заходя в раздел настроек админки «Медиафайлы» многие новички, наверное, с недоумением смотрели на представленные там размеры изображений и не совсем понимали, что именно все это значит. Сегодня постараюсь прояснить некоторые аспекты, связанные с этими параметрами: расскажу зачем они нужны, как убрать лишние и добавить свои значения. Данная информация пригодится не только для общего развития, но и позволит немного оптимизировать/ускорить ваш веб-проект.

    Размеры изображений в WordPress

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

    Логика работы системы WordPress с размерами изображений

    Исходя из изложенных выше умозаключений, становится понятно зачем разработчики WordPress предусмотрели в системе несколько разных размеров изображений (см. на картинку выше) со следующими дефолтными значениями:

    • Миниатюры (Thumbnail) — квадрат 150x150px;
    • Средний (Medium) – с максимальным значением ширины/высоты 300px;
    • Большой размер (Large) — 1024px максимум по высоте/ширине;
    • Полный оригинальный размер загруженного вами файла.

    Сразу после загрузки файла через админку в Медиабиблиотеку, система создаст несколько его копий на хостинге в соответствующих размерах. Если зайдете в папку /wp-content/uploads то сможете их увидеть:

    изображения на хостинге

    Здесь для оригинального файла menu-account2.jpg созданы еще 3 новых JPG. Причем, если посмотреть на первый скриншот, то увидите, что для превью у меня включен параметр “обрезать миниатюру”, поэтому итоговая картинка получится квадратной. В то же время для средних/больших пропорции сохраняются, а один из размеров (ширина/высота) будет фиксированный, а второй нет.

    В другом своем сайте с более новой версией WordPress, я обнаружил, что файлов создается еще больше:

    изображения на хостинге

    Дело в том, что в WordPress 4.4 к базовым параметрам добавили значение “medium_large” для лучшей адаптивности и совместимости с другими устройствами. Плюс в коде media.php из папки wp-includes можно найти еще 2 значения (на скриншоте видим только 2xmedium_large, т.к. загружаемый файл был меньше 2000px):

    function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 ); }

    Вообще этих копий на FTP можно встретить и больше, т.к. помимо самой системы новые форматы могут добавлять и разработчики шаблонов. Либо, когда картинка достаточно маленькая изначально, то большой формат не будет создан.

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

    Как изменить базовые размеры и добавить свои

    Если по каким-то причинам вас не устраивают стандартные параметры или вы, например, поменяли тему на другую, то внести правки достаточно легко. Переходите в админке сайта в раздел “Настройки” – “Медиафайлы” и указываете там свои значения.

    Настройки Медиафайлы

    В конце не забудьте сохранить изменения.

    Регистрируем новый параметр

    А что делать, когда вы хотите добавить в шаблон какую-то новую уникальную величину фоток, например, для галереи, виджетов, баннеров и т.п.?

    Для этого используем функцию add_image_size, которая добавляется в файл functions.php. Ее синтаксис следующий:

    add_image_size( name, width, height, crop );

    add_image_size( name, width, height, crop );

    • имя нового параметра размера картинки;
    • ширина;
    • высота;
    • опция обрезать изображение или нет (по умолчанию false).

    Например пишете что-то в стиле:

    add_image_size( 'our-new-size', 400, 200 );

    add_image_size( ‘our-new-size’, 400, 200 );

    Если нужно четкое соответствие размеру, то указываем “true” для последнего параметра:

    add_image_size( 'our-new-size', 400, 200, true );

    add_image_size( ‘our-new-size’, 400, 200, true );

    Кстати, вы можете выбирать с какой стороны фотка будет обрезана. Следующий код убирает часть изображения сверху справа:

    add_image_size( 'our-new-size', 400, 200, array( 'right', 'top' ) );

    add_image_size( ‘our-new-size’, 400, 200, array( ‘right’, ‘top’ ) );

    Доступные значения для массива crop: center, top bottom, left, right.

    Дополнительные нюансы

    1. В названиях нельзя использовать стандартные имена: large, medium, thumbnail, thumb и post-thumbnail.

    2. Если будете создавать свой шаблон для WP каталога тем, то в параметре используется имя темы + название, что-то вроде: newtheme-smallimg.

    3. Теоретически пример выше можно записать и с проверкой для лучше совметимости:

    if ( function_exists( 'add_image_size' ) ) { add_image_size( 'our-new-size', 400, 200 ); }

    if ( function_exists( ‘add_image_size’ ) )

    4. Чтобы использовать какой-то размер для миниатюры необходимо его добавить с помощью функции:

    if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails', array( 'post', 'event', 'page' ) ); set_post_thumbnail_size( 250, 250 ); // размер миниатюры поста по умолчанию }

    Для вывода нового типа картинок в качестве миниатюр пишете:

    if ( has_post_thumbnail() ) { the_post_thumbnail( ' our-new-size ' ); }

    Как удалить лишние размеры

    Как вы уже поняли из скриншотов, в системе генерируется от 4 и более файлов на хостинге только дня одной(!) картинки. Думаю, в среднем их число может быть около 5-6 файлов (даже на стандартных шаблонах). Все это занимает лишнее место на диске. Если у вас сайт богат на разную графику + тариф хостинга имеет определенные ограничения, то лучше ненужные объекты удалять.

    Вот как можно избавиться от стандартных размеров – пишете в functions.php код:

    add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); function prefix_remove_default_images( $sizes ) { unset( $sizes['thumbnail']); // 150x150 unset( $sizes['medium']); // 300x300 unset( $sizes['large']); // 1024x1024 unset( $sizes['medium_large']); // 768px width return $sizes; }

    В сети находиле еще такой код, но, думаю, первый более логичный:

    update_option( 'thumbnail_size_h', 0 ); update_option( 'thumbnail_size_w', 0 ); update_option( 'medium_size_h', 0 ); update_option( 'medium_size_w', 0 ); update_option( 'large_size_h', 0 ); update_option( 'large_size_w', 0 );

    update_option( ‘thumbnail_size_h’, 0 ); update_option( ‘thumbnail_size_w’, 0 ); update_option( ‘medium_size_h’, 0 ); update_option( ‘medium_size_w’, 0 ); update_option( ‘large_size_h’, 0 ); update_option( ‘large_size_w’, 0 );

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

    function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'our-new-size', 'post-thumbnail' ) ) ) { remove_image_size( $size ); } } } add_action('init', 'remove_extra_image_sizes');

    Здесь “post-thumbnail” и “our-new-size” – это имена новых параметров размеров, которые хотите убрать.

    Плагин Regenerate Thumbnails

    Плагин Regenerate Thumbnails

    Чтобы выполнить “полную очистку” хостинга от лишних фалов вам пригодится специальный плагин — Regenerate Thumbnails. С помощью хаков, указанных выше, мы выключили механизм создания новых копий, но для всех старых (уже обработанных картинок) они остались.

    Скачиваете/устанавливаете плагин Regenerate Thumbnails. После этого найдете одноименный пункт меню в разделе админки “Инструменты”

    Плагин Regenerate Thumbnails

    Тут, кстати, вы можете видеть все доступные и зарегистрированные на вашем сайте размеры медиафайлов. Это позволяет легко понять сколько их всего и какие можно удалить.

    На выбор у вас будет несколько опций, с помощью которых можно:

    • пропустить миниатюры, что уже существуют и соответствуют вашим новым правилам размеров (нет смысла создавать их повторно);
    • удалить не используемые файлы – в этом случае следует действовать очень аккуратно, т.к. если в проекте или шаблоне должны выводиться изображения, которые собираетесь удалить, то это приведет к ошибкам;
    • пересоздать миниатюры для всех объектов или только тех, что добавлены в записи/посты.

    Лично я перед запуском модуля рекомендовал бы делать бекап, то есть скопировать все прошлые файлы на локальный компьютер. Если очистка FTP пройдет успешно и на веб-сайте не вылезет никаких ошибок, то этот бекап можно будет удалить.

    Все дополнения/уточнения по теме размеров картинок в WordPress пишите нише.

    Понравился пост? Подпишись на обновления блога по RSS wordpress insideRSS, RSS wordpress insideEmail или twitter wordpress insidetwitter!

    рейтинг

    Оцените статью:

    (голосов — 13, средний балл: 4,23 из 7)

    категорияКатегории: Хаки и секреты;
    тегиТеги: изображения, медиафайлы и медиабиблиотека, миниатюры постов, новичкам, оптимизация блога, очистка WordPress.

    Похожие статьи:

    1. Миниатюры для поста в WP 2.9 на практике
    2. Картинки-превью (миниатюры) в списке постов админки WordPress
    3. Совмещение миниатюр и скрипта первой картинки поста
    4. Автоматическая установка миниатюр для новых постов
    5. Как отключить emoji в WordPress

    Оставить комментарий
    ← WordPress 5.7 — много обновлений в Gutenberg, быстрый переезд на HTTPS (предыдущая статья)

    Блог WordPress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

    Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

    Последние посты

    • Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
    • Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
    • Плагіни для створення стрічки новин з біжучим рядком в WordPress
    • Як змінити розміщення кнопки оформлення замовлення в WooCommerce
    • Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
    • Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
    • Онлайн генератор ссылок на мессенджеры для WordPress и не только

    • WooCommerce (46)
    • Безопасность (12)
    • Видео (6)
    • Виджеты (28)
    • Возможности (141)
    • Вопрос-ответ (6)
    • Начинающим (52)
    • Новости (46)
    • Оптимизация (23)
    • Плагины (246)
    • Сервисы (87)
    • Хаки и секреты (87)
    • Шаблоны (45)

    Лучшее в категории

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *