How can I use custom properties to set different background on different pages?
The problem isn't that complex (compared to the description I'll write :)) but I'd like to do this as correct as possible (e.g. I could be doing it wrong with Home.php), so I'll give you the whole context. As a part of my design, the page displays different background images. For that I use Supersized, "a fullscreen background slideshow built using the jQuery library". Some of my pages use one background image (no slideshow obviously :), and some use three. Also, I use javascript to detect the users monitor resolution and serve him an appropriate image size:
var imageToBeLoaded = "images/bg_index.jpg";
$(document).ready( function () {
if(window.screen.width > 1024) {
imageToBeLoaded = "images/bg_index_large.jpg";
}});
So the problems are:
a) Home.php isn't a page accessible through WP-Admin so I can't give it custom fields.
Solution: if (isHome()){ setDefaultalues();}
b) If I'm not on the homepage, I need to get the custom fields key/vaules but only for the properties that are related to the image background (and as I said before, ever page has 1 to N number of background images). For example, my About page has 5 properties, bgImg1, smallImg1, bgImg2, smallImg2 and greeting text. That means I need to get all the variables and parse the name so I can get e.g. bgImg1 and bgImg2. Additionally, Supersized needs a text description as another parameter, so 开发者_开发知识库the page needs to have two more parameteres, desc1 and desc2 which I also need to get and combine with the appropriate bgImg so I can generate output that looks like this (from the static page):
{image : 'images/bg_rwanda.jpg', title : 'Rwanda Home'}, {image : 'images/bg_rwanda2.jpg', title : 'Rwanda School'}
Pseudocode would look something like this:
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
Now this seems a bit complex and I have a feeling I could do it simpler, but I have no idea how.
To set a different backgrounds on any page of WordPress all you need is CSS. WordPress automatically adds a unique class to each page or post so you'll need to target the tags background in your style.css.
- View the source of any WordPress page or post.
- Note the classes assigned to the body i.e.
<body class="home page page-id-24 ...>or post-id-25 if you're adding a background to a post. - Edit your style.css using
body.page-id-93{ background:blue !important;}you might need to use !important because of other styles applied to the body. - Now you can do the same for every page or post.
加载中,请稍侯......
精彩评论