Блок «Обложка» — Поддержка

Блок «Обложка» отображает изображение или видео, поверх которого можно добавить текст и другое содержимое, что замечательно подходит для заголовков и элементов отображения в стиле баннера. В этом руководстве продемонстрировано, как использовать блок «Обложка» таким образом, чтобы ваша запись или страница выглядела элегантно и профессионально.

В этом руководстве

Обучающее видео

Добавление блока «Обложка»

Чтобы добавить блок «Обложка», щёлкните значок + Вставка блоков и выполните поиск по ключевому слову «обложка». Щёлкните его, чтобы добавить блок в запись или на страницу.

💡

Чтобы быстро добавить новый блок «Обложка», в новой строке можно также набрать «/обложка» и нажать Enter.

Чтобы вставить блок «Обложка», воспользуйтесь командой «/обложка»

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

Выбор изображения

После вставки блока у вас будет две опции, чтобы задать изображение или видео: Загрузить и Выбрать медиафайлы:

1. Нажмите Загрузить , чтобы добавить новое изображение или видео со своего устройства.
2. Нажмите Выбрать медиафайл, чтобы выбрать изображение или видео на сайте, в Google Фото, библиотеке бесплатных фотографий Pexels или Openverse.

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

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

Выбор блока «Обложка»

После добавления блока «Обложка» его можно выбрать в виде списка, чтобы повторно открыть его панель инструментов и панель настроек на боковой панели справа:

Выбор блока «Обложка» в виде списка.

Советы по выбору изображения

• Лучше всего подходят декоративные или абстрактные изображения, поскольку изображение не всегда видно полностью.
• Вместо того чтобы создавать текст внутри самого изображения, введите текст поверх изображения. Так изображение будет лучше масштабироваться на экранах любого размера.
• Блок «Обложка» использует изображение в качестве фонового и не показывает его во всю ширину на устройствах разного размера. Если на изображении есть содержимое, которое должно быть видно на устройствах любого размера, лучше используйте блок «Изображение».

Добавление текста и прочего содержимого

После выбора изображения на нём можно написать заголовок. Это пригодится, например, при создании нового раздела записи или страницы. Вы также можете добавить другие блоки, которые будут отображаться поверх блока «Обложка», например блок «Кнопка» или блок «Абзац».

Панель инструментов блока

После того как вы щёлкнете блок, поверх него появится панель инструментов со следующими опциями:

Панель инструментов блока «Обложка»

Среди этих опций:

• Изменение типа блока.
• Перетаскивание блока.
• Перемещение блока выше или ниже.
• Выравнивание изображения (по левому краю, правому краю или центру; а также «Широкий формат» и «Формат во всю ширину», если они поддерживаются темой)
• Изменение расположения содержимого
• По всей высоте
• Применение двухцветного фильтра
• Использование избранных изображений
• Замена текущего изображения другим
• Дополнительные опции

Выравнивание

Подобно другим блокам с помощью панели инструментов блок «Обложка» можно выровнять по левому или правому краю либо по центру. При выравнивании по левому или правому краю рядом с блоком «Обложка» можно разместить другой блок.

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

Широкий формат выходит за пределы ограничивающего столбца, а формат во всю ширину занимает всю ширину страницы.

Расположение содержимого

Используйте функцию «Расположение содержимого», чтобы настроить расположение текста и другого содержимого на изображении:

Перемещение содержимого внутри блока с помощью функции «Расположение содержимого»

Выравнивание по всей высоте

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

Применение двухцветного фильтра

Опция двухцветного фильтра дает возможность задать цвета изображения, используя панель инструментов блока. Можно выбрать черно-белые фотографии, а также любую желаемую комбинацию цветов. Нажмите кнопку «Двухцветный фильтр» на панели инструментов, затем выберите один из предложенных вариантов или задайте собственные цвета.

Чтобы задать собственные цвета, используйте точки на панелях цветов:

Показ избранного изображения в блоке «Обложка»

Используйте блок «Обложка», если вы хотите, чтобы избранное изображение автоматически отображалось в верхней части записи или страницы.

1. Добавьте избранное изображение в свою запись или на страницу.
2. Чтобы добавить Блок «Обложка», щёлкните значок + Вставка блока или введите «/обложка» в новую строку и нажмите Enter.
3. На панели инструментов блока «Обложка» щёлкните Добавить медиафайлы, а затем — Использовать избранное изображение. После этого автоматически подтянется текущее избранное изображение и будет добавлено в блок «Обложка».

Замена изображения

Это ещё одна опция панели инструментов блока «Обложка», которая появляется после добавления начального изображения или видео. Функция Заменить позволяет выбрать новый медиафайл для блока «Обложка».

Замена изображения или видео в блоке «Обложка».

Настройки блока

Панель настроек блока

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

Настройки блока находятся на боковой панели.

Чтобы добавить эффект волны в нижней или верхней части изображения обложки, используйте раздел «Стили» в настройках блока «Обложка».

Фиксированный фон

Среди настроек блока на боковой панели есть переключатель фиксированного фона. Фиксированный фон означает, что изображение обложки прокручивается вместе со страницей. После отключения этой настройки изображение встраивается в страницу и перестаёт прокручиваться.

Эту функцию, также известную как «эффект параллакса», можно отключить на некоторых мобильных устройствах, чтобы улучшить работу страницы.

Повторяющийся фон

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

Это просто одно изображение, повторенное много раз с помощью опции «Повторяющийся фон».

💡

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

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

Средство выбора точки фокуса

Если опция «Фиксированный фон» выключена, вы увидите средство выбора точки фокуса. Оно позволяет определить и выделить главный объект на снимке. Щёлкните средство выбора, чтобы перетащить его в нужное расположение, либо задайте положение вручную с помощью значений в процентах.

Альтернативный текст

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

Очистка медиафайлов

Чтобы очистить обложку и использовать сплошной цветной фон, нажмите «Очистить медиафайлы», как указано ниже:

Нажмите «Очистить медиафайлы», чтобы убрать изображение обложки

Цвет наложения

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

Добавьте цветное наложение и установите уровень его непрозрачности.

Непрозрачность

Этот ползунок позволяет установить уровень непрозрачности наложения для изображения обложки. При перемещении ползунка в сторону значения 100 наложение становится более тёмным и непрозрачным, а при перемещении в сторону значения 0 ― более светлым и прозрачным. При значении непрозрачности 100 наложение становится полностью непрозрачным, а изображение обложки — невидимым. При значении непрозрачности 0 наложение полностью исчезает, оставляя видимым только изображение.

💡

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

Настройки оформления

Внешний вид текста в блоке можно изменить с помощью следующих настроек.

Если настройка не отображается, щёлкните три точки справа от элемента Настройки оформления (как показано справа). Затем можно выбрать необходимую опцию:

• Размер шрифта
• Семейство шрифтов
• Внешний вид
• Высота строки
• Оформление
• Регистр
• Интервалы

Настройки оформления на боковой панели «Настройки блока» с дополнительными опциями.

Параметр Размер шрифта позволяет изменять размер текста. Можно выбрать один из предварительно заданных размеров, например маленький, средний или крупный.

Кроме того, можно указать конкретное значение, щёлкнув значок слайдера над опциями по умолчанию (он отмечен цифрой 1 на снимке экрана ниже). Вы можете изменить единицы измерения, щёлкнув в области, отмеченной цифрой 2 на снимке экрана ниже. Можно выбрать пиксели, em или rem.

С помощью параметра Семейство шрифтов можно изменить стиль шрифта. Выберите нужный шрифт из списка в выпадающем меню.

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

Параметр Высота строки задаёт интервал над текстом и под ним. При выборе значения «ноль» обязательно проверьте свой сайт на мобильном устройстве.

Параметр Оформление содержит опции подчёркивания и перечёркивания.

С помощью параметра Регистр можно изменять регистр текста: все прописные буквы, заглавная первая буква или все буквы строчные.

Параметр Интервалы задаёт интервал между всеми знаками в тексте. Значение единицы измерения по умолчанию (пиксели) можно изменить на проценты, em, rem, vw и vh. Дополнительные сведения об относительных единицах можно найти здесь.

Размеры

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

Вы также можете добавить отступ, чтобы увеличить пространство вокруг содержимого блока «Обложка».

Видео в блоке «Обложка»

Эта функция доступна для сайтов с тарифными планами WordPress.com Premium, Business и eCommerce. Если на вашем сайте действует один из устаревших тарифных планов, этот раздел доступен для плана Pro.

В блоке «Обложка» можно использовать видео. Оптимальный результат достигается при работе с видео в формате .mp4, однако вы можете загружать свои видео в других форматах. Ознакомьтесь со списком допустимых форматов.

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

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

Теперь вы можете добавить любой текст или кнопки поверх видео на обложке.

Дополнительно

На вкладке дополнительных настроек можно добавить к блоку класс CSS, что позволяет записывать пользовательские CSS и настраивать стиль блока по своему усмотрению. Дополнительные сведения.

Ваша оценка:

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

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

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

Что такое масштабированные изображения?

Изображения в сети должны быть оптимизированы. Не слишком большие, но и не слишком маленькие. Если они слишком малы и увеличены, они будут размытыми.

С другой стороны, если изображение слишком большое, браузер уменьшит его до нужного размера. Это не влияет на то, как выглядит изображение, но это добавит вес к размеру файла страницы.

Полное руководство по освоению оптимизации изображений

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

Когда вы получите замечание “ properly size images» в Google PageSpeed Insights, вы будете знать, что пришло время масштабировать некоторые изображения.

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

Изображение, которое слишком велико, причиняет вам неприятности несколькими способами.

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

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

Оптимизаторы скорости сайта, такие как Hummingbird, GTmetrix и Google PageSpeed Insights, рекомендуют масштабировать изображения для повышения производительности.

Разве атрибуты srcset и size не должны заботиться о изменении размера изображения?

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

Атрибут srcset работает, предоставляя URL-адрес для изображения, а затем предоставляя браузеру список изображений на выбор в различных размерах. Этот набор источников для этого селфи сотового телефона, о котором я упоминала ранее, будет выглядеть примерно так:

srcset= “selfie-100×100.png 100w, selfie-200×200.png 200w, selfie-400×400.png 400w”

WordPress говорит браузеру, вы знаете больше о пользователе, чем я, вот изображение, которое вы хотите в 3 разных размерах, выберите то, которое будет работать лучше всего.

Когда браузер должен отобразить 75px X 75px Gravatar рядом с комментарием, он выберет первый вариант в наборе и немного изменит его размер. Если у пользователя есть устройство retina, он выберет второй вариант.

Но масштабирование позволит вам получить этот дополнительный бит производительности.

Как обслуживать масштабированные изображения в WordPress

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

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

Например, предположим, что я хочу использовать фотографию океана на главной странице моего сайта. Изображение в его неизмененном состоянии составляет 4534px x 3023px.

Для изображения в теле сообщения в блоге вам, вероятно, нужно будет обслуживать изображение в диапазоне 600px-960px, а для изображений, которые охватывают ширину экрана настольного компьютера, вы смотрите на что-то в диапазоне ширины 1600px.

Также имейте в виду, что вам нужно будет удвоить эти размеры для размещения экранов retina.

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

Если вы используете Chrome, щелкните правой кнопкой мыши на изображении и перейдите к Inspect (проверить элемент).

В Chrome при наведении указателя мыши на URL-адрес изображения вы увидите размер, в котором отображается изображение, с исходным “естественным” размером изображения в скобках. Этот большой файл изображения — это то, что ваши посетители загружают.

Изображение более 3000 пикселей слишком велико.

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

Обрезка изображений в библиотеке мультимедиа

Чтобы вручную обрезать изображение, перейдите в раздел медиафайлы > библиотека и нажмите на изображение, которое вы хотите обрезать. Затем, нажмите кнопку Изменить изображение, чтобы открыть интерфейс редактирования.

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

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

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

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

Соотношение сторон

У вас также есть возможность ввести желаемое соотношение сторон для изображения:

Соотношение сторон — это отношение между шириной и высотой. Вы можете сохранить соотношение сторон, удерживая клавишу shift при изменении размера вашего выбора. Используйте поле ввода для указания соотношения сторон, например 1: 1 (квадрат), 4:3, 16:9, и т.д.

Вы также можете щелкнуть и перетащить выбранную область, чтобы переместить ее в ту область, которую вы хотите видеть.

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

Масштабируйте или обрезайте изображение в соответствии с размером, определенным вашей темой.

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

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

Когда вы закончите вносить изменения, нажмите кнопку Сохранить под изображением.

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

Затем перейдите на вкладку Библиотека мультимедиа и выберите одно из перечисленных изображений. Затем щелкните ссылку Редактировать изображение справа, чтобы получить доступ к тому же интерфейсу редактирования, упомянутому выше.

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

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

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

Чтобы вручную изменить размер изображения по умолчанию, перейдите в Настройки > Медиафайлы и введите в соответствующих полях максимальную ширину и максимальную высоту, необходимые для соответствующего размера изображения, который требуется изменить.

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

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

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

После сохранения изменений установите и активируйте плагин Regenerate Thumbnails, чтобы изменить размер ранее загруженных изображений в соответствии с новыми размерами, которые вы только что установили.

Редактировать файл в Paint

Откройте изображение в Paint, Adobe Photoshop или в любом другом графическом редакторе. Мы будем использовать размеры, которые мы придумали в инструментах разработчика.

В Paint, перейдите во вкладку home. Откроется окно, которое позволит вам ввести новые измерения. Установите переключатель на пиксели и измените горизонтальные размеры. Вертикальные размеры будут автоматически изменены, если установлен флажок поддерживать соотношение сторон. Именно этого мы и хотим. Если флажок не установлен, вам нужно будет сделать вычисления самостоятельно.

Когда вы закончите настройку размеров, нажмите кнопку ОК. Затем вы можете сохранить файл в Paint, повторно загрузить в WordPress и заменить изображение новым файлом.

Оптимизация изображений с помощью Smush

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

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

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

Автоматическое Изменение Размера Изображения

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

Обратите внимание, как Smush сообщает вам, что изображение самого большого размера на вашем сайте должно быть, а затем удваивает его для устройств Retina.

Smush также дает вам возможность сохранить копию исходного изображения. Эта функция существенно сокращает избыток от вашего самого большого изображения.

Кроме того, вы можете воспользоваться функцией «Отложенная загрузка» и CDN — загрузкой изображений на быструю CDN от WPMU DEV с функциями многоуровневого сжатия и автоматического изменения размера. Это основной инструмент для улучшений скорости загрузки вашей страницы, с помощью снижения нагрузки на сервер.

Как добавить или изменить изображения баннера на вашем веб-сайте WordPress

Перейти к основному содержанию
Перейти к локальной навигации

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

Перед загрузкой изображений баннеров:

Убедитесь, что изображения баннеров соответствуют рекомендациям Йоркского университета по коммуникационным стандартам.

Файлы заголовков .psd доступны по адресу: http://www.yorku.ca/yorkweb/standards/templates/index.html (требуется вход в систему Passport York).

Для настройки:

1. Откройте соответствующий файл в Photoshop
2. Выберите текстовый слой
3. Измените текст на название вашего сайта
   Изображения баннеров должны оставаться либо 910x180px, либо 910x70px — делать не настроить размер этих баннеров.
4. Нажмите «Файл» > «Сохранить для Интернета»
5. Сохранить как .jpg с очень высоким качеством

Чтобы добавить или изменить изображение баннера:

1. Войдите на свой сайт WordPress
2. Загрузить изображение(я) баннера
   1. Нажмите «Мультимедиа» (левая навигация) > «Добавить новый».
      Вы увидите «Многофайловую загрузку». -загрузчик файлов». Изображения баннера должны быть либо 910x180px или 910x70px для правильного отображения. Предоставленные файлы шаблонов уже соответствуют этим размерам, и размеры не должны быть обрезаны или изменены каким-либо образом.
   2. Либо:
   1. перетащите мультимедийные файлы, которые вы хотите использовать на своем веб-сайте, в пространство внутри пунктирных линий; ИЛИ
   2. нажмите «Выбрать файлы» , найдите файл, который вы хотите загрузить, и нажмите, чтобы загрузить. После этого появится информация о файле.
   3. Заполните поле «Альтернативный текст»
      Это текст, который появится, если посетитель отключит изображения или если посетитель использует текст или программу чтения с экрана. Он должен кратко описывать изображение.
   4. Обратите внимание на URL-адрес файла
      Это URL-адрес, который вы используете для ссылки на изображение или файл.
   5. Нажмите «Сохранить все изменения», чтобы сохранить файл в системе.
      Вы будете перенаправлены на страницу библиотеки со списком всех загруженных медиафайлов для вашего веб-сайта.
3. Щелкните Внешний вид > Параметры темы York
4. Если вы используете изображение высотой 180 пикселей на своей главной странице, вставьте URL-адрес изображения рядом с «Заголовком главной страницы» и вставьте URL-адрес заголовка высотой 70 пикселей рядом с «Заголовок вторичной страницы».
   Согласно коммуникационным стандартам York, изображение заголовка высотой 180 пикселей должно использоваться только на главной странице веб-сайта; все остальные страницы должны использовать изображение высотой 70 пикселей. Если вы используете изображение высотой 70 пикселей на всех своих страницах, вставьте изображение рядом с «Заголовком главной страницы» и «Заголовком вторичной страницы».
5. Нажмите «Сохранить изменения».
   Ваши изменения будут применены немедленно.

Как настроить заголовок вашего веб-сайта WordPress

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

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

Выберите изображение для вашего заголовка WordPress

Мы собираемся начать с этого изображения сакуры с сайта MorgueFile.com. Найдите «May_and_June_2007_039.jpg» от ren (конечно, вы можете выбрать и свое собственное изображение!) Загрузите его на свой компьютер.

(MorgueFile.com — отличный источник бесплатных фотографий для использования в вашем блоге.)

Перейдите на свой веб-сайт или блог WordPress и войдите в свою панель инструментов.

1. В панели навигации слева нажмите «Внешний вид», а затем «Заголовок».
2. Посмотрите на текст под изображением заголовка по умолчанию. Обратите внимание на ширину и высоту в пикселях. Для этого изображения ширина составляет 940 пикселей, а высота — 198 пикселей.

Загрузите изображение заголовка

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

1. В панели навигации слева нажмите «Медиа», а затем «Добавить новый».
2. Перетащите файл изображения в загрузчик или нажмите «Выбрать файлы» и перейдите к своему изображению.
3. Вы увидите эскиз изображения. Нажмите кнопку «Редактировать изображение» под изображением.

Поверните и масштабируйте изображение заголовка

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

1. Сначала поверните изображение. (Если вы используете другое изображение, вам может не понадобиться этот шаг.) Наведите указатель мыши на маленькие значки вверху и выберите тот, который дает подсказку «Повернуть против часовой стрелки». Нажмите синюю кнопку «Сохранить».
2. Нажмите кнопку «Редактировать изображение» еще раз. Затем нажмите кнопку «Масштабировать изображение» в правом верхнем углу.
3. В квадрате ширины вы хотите указать ширину, которую вы записали, взглянув на изображение заголовка по умолчанию выше. Для этого примера ширина была 940 пикселей. Высота будет масштабироваться автоматически.
4. Нажмите кнопку «Масштаб».

Обрежьте изображение заголовка в WordPress

Теперь мы обрежем изображение так, чтобы его высота составляла 198 пикселей (высота изображения по умолчанию выше). Мы сохраним ширину 940 пикселей.

1. Щелкните мышью на изображении и перетащите прямоугольник; не важно какой размер.
2. В поле «Обрезка изображения» добавьте 940 : 198 в поле «Выделение»; поле выбора теперь будет иметь правильный размер для заголовка. Вы можете использовать мышь или клавиши со стрелками на клавиатуре, чтобы перемещать поле выбора вверх или вниз, чтобы выбрать нужную часть изображения.
3. Переключатель «Изменение может применяться ко всем размерам, кроме миниатюр».
4. Теперь нажмите кнопку «Обрезать» вверху.
5. Нажмите синюю кнопку «Сохранить».

Теперь нажмите синюю кнопку «Обновить носитель».

Установите отредактированное изображение в качестве заголовка веб-сайта

В панели навигации слева нажмите «Внешний вид», а затем «Заголовок».

1. Под изображением по умолчанию находится надпись «Или выберите изображение из вашей медиатеки». Нажмите кнопку «Выбрать изображение».
2. Вы увидите только что созданное изображение.
   

   This entry was posted in Популярное