Question

问题并不复杂（与我写的描述相比:)）但我想尽可能正确地做到这一点（例如我可能在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）如果我不在主页上，我需要获取自定义字段key / vaules，但仅限于与图像背景相关的属性（正如我之前所说，页面有1到N个数字背景图片）。例如，我的“关于”页面有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'}

Pseudocode看起来像这样：

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

现在这看起来有点复杂，我觉得我可以做得更简单，但我不知道怎么做。

Answer 1

要在WordPress的任何页面上设置不同的背景，您只需要CSS。 WordPress会自动为每个页面或帖子添加一个唯一的类，因此您需要在style.css中定位标记背景。

查看任何WordPress页面或帖子的来源。
如果您要为帖子添加背景，请注意分配给正文的类，即<body class="home page page-id-24 ...>或post-id-25。
使用您可能需要使用的body.page-id-93{ background:blue !important;}编辑您的style.css！重要因为其他样式应用于正文。
现在，您可以为每个页面或帖子执行相同的操作。

如何使用自定义属性在不同页面上设置不同的背景？

1 个答案: