TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как добавить разные фоны в сообщения и страницы WordPress

1 010

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

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

В любом случае, вы должны отлично провести время, поскольку это относительно простой проект. К тому же всегда интересно узнавать что-то новое. Наслаждайтесь до самого конца и делитесь своими предложениями, комментариями или вопросами в области комментариев. Готов? Сделаем решительный шаг через 3, 2, 1…

Как добавить фон в WordPress с помощью кода

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

Добавление различных фонов в сообщения и страницы WordPress с помощью CSS

Большая часть стиля, который входит в сообщения и страницы WordPress (и весь ваш сайт), контролируется файлом, известным как таблица стилей. Файл таблицы стилей в WordPress обычно называется style.css. Вы можете получить доступ к style.css, перейдя в Внешний вид> Редактор в админке WordPress:

Как добавить разные фоны в сообщения и страницы WordPress

Мы добавляем фоны (и другие стили) к вашим записям / страницам WordPress в style.css, поэтому важно, чтобы они загружались на отдельной вкладке.

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

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

Найдите этот фрагмент кода:

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

Если, например, вы просматривали исходный код своей домашней страницы, вышеуказанная функция выдаст что-то вроде:

И это потому, что <? Php body_class(); ?> часть фрагмента кода предоставляет все классы, например .home, .blog, .logged-in и т. д., которые вы можете использовать в своем CSS для стилизации различных элементов вашей домашней страницы.

Кроме того: просмотреть исходный код любого сообщения или страницы очень просто. Если вы используете Chrome, просто щелкните правой кнопкой мыши страницу / сообщение и выберите «Просмотреть источник страницы». В Mozilla щелкните правой кнопкой мыши сообщение / страницу и выберите «Просмотреть исходный код страницы». Если вы используете Microsoft Edge (Internet Explorer), щелкните правой кнопкой мыши свою страницу / сообщение и выберите «Просмотреть источник».

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

Если вы просматривали исходный код одного сообщения, наша функция body_class выводит что-то близкое к:

Как видите, у вас есть пара классов CSS, на которые можно легко настроить таргетинг:

  • .page для всех страниц
  • .page-id-2, который позволяет вам настроить таргетинг на конкретную страницу, т.е. страницу с номером id. 2
  • .single для всех отдельных сообщений, то есть все стили CSS, которые вы применяете к этому классу, будут применяться ко всем сообщениям.
  • .postid-1 для сообщения с id = 1, что означает, что все применяемые стили CSS будут влиять только на это сообщение.
  • .single-format-standard – позволяет применять стили CSS ко всем сообщениям со стандартным форматом сообщений.
  • .logged-in – стили, которые вы применяете с помощью этого класса CSS, будут применяться только к авторизованным пользователям.

Все элементы, содержащиеся в class = “”, предлагают вам CSS-хуки, которые вы можете использовать для таргетинга на любой пост или страницу. Но почему мы добавляем точку (.) Перед каждым классом? Это обычный синтаксис CSS, который указывает, что вы должны вызывать все классы, используя точку (.), И все div, используя хэш (#). Рассказ на другой день.

Например, чтобы применить черный фон ко всем сообщениям, добавьте следующий фрагмент в style.css:

.single { background-color: #000; }

Добавление фона в сообщения и страницы WordPress с помощью PHP (через настраиваемое поле)

Если вы хотите добавить встроенный ручной метод для изменения фона на вашем сайте через настраиваемое поле, это тоже очень легко сделать. Просто вставьте следующий код в файл functions.php вашей темы (если вы используете стороннюю тему, это лучше всего сделать через дочернюю тему). Обязательно измените место, где написано «myprefix» на ваш уникальный идентификатор (это необходимо для предотвращения конфликтов с темами и плагинами), и как только все будет готово, вы можете теперь использовать настраиваемое поле «myprefix_background_image» для ввода URL-адреса изображения для любую страницу или сообщение, в котором вы хотите изменить фон.

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

Добавление фона в WordPress с помощью плагинов

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

WP-Backgrounds Lite Бесплатный плагин WordPress

Как добавить разные фоны в сообщения и страницы WordPress

Что я могу сказать? Это один из тех плагинов WordPress, которые отвечают вашим потребностям. Вам нравятся яркие фоны для ваших записей и страниц WordPress? Конечно, почему бы и нет. Легко ли установить и использовать этот плагин? Хотелось бы услышать ваше мнение.

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

Плагин Custom Backgrounds Premium для WordPress

Как добавить разные фоны в сообщения и страницы WordPress

Плагин Custom Backgrounds, предоставленный вам RightHere, элитным автором CodeCanyon, предлагает вам полный контроль над вашими фонами WordPress. За считанные минуты вы можете создать великолепный фон для сообщений WordPress, страниц, пользовательских типов сообщений, таксономий и архивов среди других шаблонов, а также дополнить все это эффектами параллакса, таймерами и лучшим jQuery, который может предложить.

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

Видео и параллакс фоны для конструктора страниц WPBakery

Как добавить разные фоны в сообщения и страницы WordPress

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

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

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

Помимо эффекта параллакса, плагин также можно использовать для добавления фонового видео, с легким встраиванием видео с YouTube или Vimeo – просто добавьте URL-адрес для встраивания. Это еще один отличный способ создать привлекательный веб-сайт, который запомнится посетителям.

Заключительные слова

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

Источник записи: https://www.wpexplorer.com

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