Как вставить фотогалерею на страницу WordPress или в сообщение в блоге

Лиза Сабин-Уилсон

2172 белая таблетка овальной формы

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

  1. На странице (или публикации), в которую вы хотите вставить галерею, загрузите свои изображения.



  2. На странице «Добавить новую страницу» (или «Добавить новую публикацию») нажмите кнопку «Добавить медиа».

    Откроется диалоговое окно «Вставить носитель».

  3. Щелкните ссылку «Создать галерею» в левой части диалогового окна «Вставка мультимедиа».

    Вкладка Галерея отображается только для сообщений или страниц, на которые загружено одно или несколько изображений.

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

    image0.jpg

  4. Нажмите кнопку «Создать новую галерею».

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

  5. В разделе «Настройки галереи» установите параметры отображения для вашей галереи:

    • Ссылка на: Выберите файл мультимедиа (физический файл изображения) или страницу вложения (страницу, на которой отображается только само изображение).

    • Случайный порядок: Выберите этот параметр, чтобы изображения отображались в случайном порядке.

    • Столбцы: Выберите, сколько столбцов изображений вы хотите отображать в своей галерее.

  6. Нажмите кнопку «Вставить галерею» в нижней части диалогового окна.

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

    Примечание: Вы должны переключиться в представление HTML (щелкните вкладку HTML), чтобы увидеть этот код.

  7. (Необязательно) В поле редактирования страницы (или публикации) в представлении HTML вы можете изменить порядок отображения изображений в галерее, а также разметку (теги HTML или селекторы CSS), введя следующий короткий код:

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

    места

    теги вокруг подписи к изображению. (В

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

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

    Этот код помещает

    теги вокруг подписи к изображению. Разметка по умолчанию дляcaptiontagвариантдд.

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

    Этот код помещает

    теги вокруг каждого значка эскиза. Разметка по умолчанию длязначокявляетсяDT.

    itemtag : Определяет разметку HTML вокруг каждого элемента в вашей галерее. Измените разметку вокругitemtag(каждый элемент) в галерее, изменив короткий код галереи, чтобы он выглядел примерно так:

    могут ли антибиотики вызвать диарею

    Этот код помещает теги вокруг каждого элемента в галерее. Разметка по умолчанию дляitemtagявляетсядл.

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

    Этот код отображает миниатюры в порядке возрастания меню. Другой параметр, который вы можете использовать, этоID_order ASC, который отображает эскизы в порядке возрастания в соответствии с их идентификаторами.

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

    Сокращенный код галереи Выход
    Галерея из четырех столбцов, содержащих изображения среднего размера.
    Галерея из десяти столбцов, содержащая миниатюрные изображения, взятые из
    сообщение в блоге с ID 215
    Галерея из трех столбцов (по умолчанию), в которой каждое изображение
    окружен
    теги, а заголовок изображения окружен теги

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

  1. На панели инструментов выберите «Внешний вид» → «Темы» → «Редактор», а затем откройте таблицу стилей CSS.

  2. Определите стильтеги в вашей таблице стилей.

    Втеги создают встроенный элемент. Элемент, содержащийся втег остается на той же строке, что и элемент перед ним; нет разрыва строки. Вам нужно немного знать CSS, чтобы изменитьтеги. Вот пример того, что вы можете добавить в таблицу стилей (style.css) для вашей текущей темы, чтобы определить стильтеги:

    span.gallery-icon img { padding: 3px; background: white; border: 1px solid black; margin: 0 5px; }

    Поместив этот бит CSS в таблицу стилей (style.css) вашей активной темы автоматически помещает 1-пиксельную черную рамку вокруг каждой миниатюры с 3-пиксельным отступом и белым фоном. Левое и правое поля имеют ширину 5 пикселей, что создает хороший интервал между изображениями в галерее.

  3. Нажмите кнопку «Обновить файл», чтобы сохранить изменения в таблице стилей (style.css) шаблон.

Вот фотогалерея с использованием предыдущих шагов и примера CSS в теме Twenty Thirteen по умолчанию. Вот краткий код галереи:

image1.jpg

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

Некоторые полезные плагины WordPress работают в тандеме с функцией галереи WordPress.