Как я могу использовать пользовательские свойства, чтобы установить различный фон на разных страницах? - PullRequest
1 голос
/ 20 июля 2011

Проблема не так сложна (по сравнению с описанием, которое я напишу :)), но я хотел бы сделать это как можно более корректно (например, я мог бы сделать это неправильно с Home.php), поэтому ядам вам весь контекст.Как часть моего дизайна, на странице отображаются различные фоновые изображения.Для этого я использую Supersized, «полноэкранное фоновое слайд-шоу, созданное с использованием библиотеки jQuery».Некоторые из моих страниц используют одно фоновое изображение (без слайд-шоу, очевидно :), а некоторые используют три.Кроме того, я использую javascript для определения разрешения монитора пользователя и предоставления ему соответствующего размера изображения:

var imageToBeLoaded = "images/bg_index.jpg";
$(document).ready( function () {
if(window.screen.width > 1024) {
  imageToBeLoaded = "images/bg_index_large.jpg";
}});

Так что проблемы:

a) Home.php не доступен для страницычерез WP-Admin, поэтому я не могу дать ему настраиваемые поля.

Решение: if (isHome()){ setDefaultalues();}

b) Если я не на главной странице, мне нужно получить ключ настраиваемых полей/ vaules, но только для свойств, связанных с фоном изображения (и, как я уже говорил, на каждой странице имеется от 1 до N фоновых изображений).Например, моя страница About имеет 5 свойств: bgImg1, smallImg1, bgImg2, smallImg2 и greeting text.Это означает, что мне нужно получить все переменные и разобрать имя, чтобы я мог получить, например, bgImg1 и bgImg2.Кроме того, Supersized требуется текстовое описание в качестве другого параметра, поэтому на странице должны быть еще два параметра, desc1 и desc2, которые мне также нужно получить и объединить с соответствующими bgImg, чтобы я мог генерировать вывод, который выглядит следующим образомэто (со статической страницы):

{image : 'images/bg_rwanda.jpg', title : 'Rwanda Home'}, {image : 'images/bg_rwanda2.jpg', title : 'Rwanda School'}

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

var output = "{image : '";
var imageIsLarge= false;
if (getResolution() > 1024 ) { imageIsLarge= true; }
while (hasNextProperty()){
  Property prop = nextProperty();
  if (imageIsLarge) {
      if (prop.getKey().startsWith (bgImageL)){
         output += prop.getValue()+", title:";
         // etc. Also, I need to set the code to first get the first img, 
         // not just in any order and pair it with the first  description

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

1 Ответ

0 голосов
/ 19 октября 2013

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

  1. Просмотреть исходный код любой страницы или публикации WordPress.
  2. Обратите внимание на классы, назначенные для тела, например <body class="home page page-id-24 ...> или post-id-25, если вы добавляете фон к сообщению.
  3. Отредактируйте ваш style.css с помощью body.page-id-93{ background:blue !important;}, который вам может понадобиться использовать! Important из-за других стилей, примененных к телу.
  4. Теперь вы можете делать то же самое для каждой страницы или записи.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...