Css класс изображения wordpress: видео уроки, инструкции для начинающих

И снова, WordPress добавляет динамические классы к вашим записям, используя функцию post_class (), которая позволяет вам создавать свои собственные стили для каждого формата. Функция post_class () добавит класс в виде “.format-foo”, где foo — любой выбранный вами формат записи (например, галерея, изображение и т.д.)

.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

Стандартные стили меню

В нашей статье под названием как стилизировать меню в WordPress мы обсуждали как добавить собственный класс к вашем меню. Мы будем считать, что вы прочли ту статью и то, что вы дали своему классу меню имя “main-menu”.

 
#header .main-menu{}           /* контейнер */
#header .main-menu ul {}       /* первый неупорядоченный список */
#header .main-menu ul ul {}    /* неупорядоченный список в неупорядоченном списке */
#header .main-menu li {}       /* пункт списка */
#header .main-menu li a {}     /* ссылка в пункте списка */
#header .main-menu li ul {}    /* вложенный список в пункте списка */
#header . main-menu li li {}    /* выпадающий элемент навигации */
#header .main-menu li li a {}  /* анкор выпадающего элемента */


.current_page_item{}           /* Класс для текущей страницы */
.current-cat{}                 /* Класс для текущей рубрики */
.current-menu-item{}           /* Класс для любого другого текущего пункта меню */
.menu-item-type-taxonomy{}     /* Класс для таксономии */
.menu-item-type-post_type{}    /* Класс для страницы */
.menu-item-type-custom{}       /* Класс для любого пользовательского элемента, который был добавлен */
.menu-item-home{}              /* Класс для элемента, ведущего на главную страницу блога */

Обратите внимание, что каждый раз при создании меню в WordPress оно автоматически оборачивается в контейнер (div). Этот div имеет только имя класса, если вы его указали (мы выбрали “main-menu”). И уже внутри него вы стилизируете остальные элементы списка.

Продолжение статьи
Шпаргалка по стандартным стилям CSS для начинающих. Часть 2
Шпаргалка по стандартным стилям CSS для начинающих. Часть 3

Rating: 3.7/5 (3 votes cast)

Делаем изображения круглыми в WordPress с помощью CSS

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

Содержание

1. Шаг 1. Добавляем код в CSS-файл.
2. Шаг 2. Обертываем изображения в DIV
3. Важные примечания, а также альтернативный метод
4. Квадраты против прямоугольников

Шаг 1. Добавляем код в CSS-файл.

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

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

В вашем CSS-файле поместите следующий код:

.circular-image img {
               width: 300px;
               height: 300px;
               -webkit-border-radius: 150px;
               -moz-border-radius: 150px;
               -ms-border-radius: 150px;
               -o-border-radius: 150px;
                border-radius: 150px;
                              }

Причина размещения такого количества строк со значением 150px – подгонка под разные браузеры. Некоторые дизайнеры говорят, что сегодня уже достаточно размещать только «border-radius: 150px;», однако лучше перестраховаться.

Шаг 2. Обертываем изображения в DIV

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

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

<div>код-изображения</div>

Иными словами, все это будет выглядеть следующим образом:

Заметьте, что атрибут class у div («circular-image») совпадает с идентификатором в вашем CSS-файле. Не важно, как вы их назовете – важно, чтобы они были одинаковыми. И естественно, надо будет выбрать такое название, чтобы оно не конфликтовало с остальными классами в CSS-коде. Оно должно быть уникальным.

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

Важные примечания, а также альтернативный метод

Есть несколько важных вещей, которые необходимо пояснить в коде выше. Я сделал изображение, которые вы видели выше, идеальным кругом, задав параметры height и width в CSS – 300px и 300px. После чего я задал радиус границы в половину от 300px, т.е. 150px. Вы можете менять эти размеры так, как вам захочется, если вам потребуется что-то меньшее или большее. Просто сохраните пропорции такими же – если вы поставите размеры 400px и 400px, то тогда радиус должен быть 200px.

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

И да и нет… возможно.

Квадраты против прямоугольников

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

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

Теперь я бы мог просто поставить радиус границы как 50% и позволить размеру исходного изображения устанавливать размер заключительного круглого изображения. Я могу поместить это в свой CSS-файл:

.circular-image img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}

Как только я сделаю это, появится финальный результат.

Вот два варианта рядом для сравнения:

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

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

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

Источник: wpmu.org

Настройки изображения — Поддержка WordPress.

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

Содержание

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

Чтобы перейти к настройкам вложения:

1. Перейдите к Медиа на левой боковой панели панели инструментов вашего сайта
2. Выберите нужное изображение.
3. Нажмите Редактировать .

Откроется окно для отображения полного изображения и его настроек:

• Редактировать изображение : Эта кнопка открывает простой редактор, в котором вы можете поворачивать или обрезать изображение. Учить больше.
• Заголовок: Как называется образ. Вы можете нажать на заголовок, чтобы отредактировать его.
• Подпись: Введите подпись, которая будет отображаться под изображением
• Альтернативный текст: Управляет тем, какой текст заменяет изображение в случае медленной загрузки сайтов или для читателей, использующих программы чтения с экрана и другие вспомогательные технологии.
• Описание: Необязательное описание изображения, которое будет отображаться на странице вложения изображения (если вы выбрали ссылку на изображение на странице вложения).
• URL : Полная прямая ссылка на место хранения изображения на вашем сайте. Это не может быть изменено.
• Внизу вы увидите некоторую информацию о вашем изображении: имя и тип файла изображения, дату загрузки изображения и размеры изображения.
• Удалить: (внизу слева) Щелкнув по нему, вы сможете удалить изображение. Это не может быть отменено.

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

↑ Содержание ↑

В постах и ​​на страницах

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

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

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

Подписи к функциям темы

Подписи к героям и другим крупным изображениям можно стилизовать с помощью класса feature-caption . Фотография кредита в подписи может быть дополнительно оформлена с помощью класса кредита на вложенном элементе.

Это подпись к изображению.

Фотография Анселя Адамса

Согласование темы

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec felis tortor. Mauris lobortis cursus tortor, vel porttitor enim. Proin tristique laoreet dictum. Class aptent taciti socialsqu ad litora Torquent per conubia nostra, per inceptos himenaeos.

Suspendisse potenti. Donec at vulputate neque, venenatis semper nulla. Vivamus eget commodo neque, sed volutpat purus. Donec vel nisi posuere, luctus ipsum vel, fermentum nunc. Vivamus venenatis laoreet venenatis. Integer odio justo, eleifend quis tellus ut, lacinia iaculis est. Aenean nec odio tortor.

Тематические этапы

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