Wordpress在特定类别的帖子中的独特背景

时间:2015-01-04 04:01:27

标签: php css wordpress

我有一个代码:

<body <?php if( in_category( 11446 ) ) { echo "style=\"background-image: url('my-background-url-of-image');background-repeat:repeat;\" onclick=\"window.open('http://www.domain.com');\""; } ?> >

此代码仅在页面加载完全比某些事情发生时起作用并且它不起作用我从inspect元素假设onclick函数更改并且我无法找到哪些部分技巧。

此代码的作用是设置特定类别的独特身体背景,背景可点击。

但是由于一些javascript错误它在页面加载时不起作用所以也许有人可以解释我如何删除Javascript上的attr而不是添加我想要的域名。或者可以举例说明如何使用href进行替代代码。

谢谢。

1 个答案:

答案 0 :(得分:0)

我假设您正在构建Wordpress模板,并且要使用的背景图像基于Wordpress帖子的类别。

这不使用Javascript。相反,它所做的是动态地在HTML5文档的head标签内创建CSS声明块。它没有body标签的内联CSS。

<?php
// ====================================================
// Solution #1
// Background Image Only
// ====================================================

function GetThisWordpressPostCategory() {
  // Do post category to filename mapping here
  return("cars");
}

function in_category() {
  // Just a dummy to simulate Wordpress in_category call
  return(true);
}

function BodyBackground($category) {
  $bodyCss = "";
  if (in_category($category)) {
    $bodyCss =<<<CSS
<style type="text/css">
body {
  background-image: url('{$category}.jpg');
}
</style>
CSS;
  }
  return($bodyCss);
}
?>

<!DOCTYPE html>
<html>
  <head>
    <title>Category background</title>
    <?php
    $category = GetThisWordpressPostCategory();
    echo BodyBackground($category);
    ?>
  </head>
  <body>
  </body>
</html>


<?php
// ====================================================
// Solution: 2
// Clickable div spanning viewport
// ====================================================


function GetThisWordpressPostCategory() {
  // Do post category to filename mapping here
  return("cars");
}

function in_category() {
  // Just a dummy to simulate Wordpress in_category call
  return(true);
}

function PageCss($category) {
  $pageCss = "";
  if (in_category($category)) {
    $pageCss =<<<CSS
<style type="text/css">
html, body, #page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-image: url('{$category}.jpg');
}
#page-anchor {
  display: block;
  width: 100%;
  height: 100%;
}
</style>
CSS;
  }
  return($pageCss);
}
?>

<!DOCTYPE html>
<html>
  <head>
    <title>Category background</title>
    <?php echo PageCss(GetThisWordpressPostCategory()); ?>
  </head>
  <body>
    <div id="page">
      <a id="page-anchor" href="http://www.google.com"></a>
    </div>
  </body>
</html>