每次点击/加载时在网站上显示的随机背景图像

时间:2014-04-19 作者:vega

如果不使用插件,我希望在每次点击/加载时(或者以后可能每小时)都有一个大的背景图像改变。所以,我创建了一个random\\u img。php文件,并将一些代码放入标头中。php。不要对头代码感到奇怪!这是必要的,因为一些浏览器(Safari、Chrome)不接受背景图像更改,因为缓存的目的。

随机\\u img。php:

<?php
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate"); // HTTP/1.1
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache"); // HTTP/1.0
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header(\'Content-Type: image/jpeg\');
$bilder = glob( "../is/images/*.jpg" );
shuffle( $bilder );
$zufall = imagecreatefromjpeg($bilder[0]);
imagejpeg($zufall); 
?>
收割台头部。php:

<?php echo \'<style type="text/css"> 
  body {background: url(http://www.xxx.de/wp-content/themes/is/random_img.php?\'.rand().\') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
</style>\'; ?>
到目前为止,这是可行的,但我有一些问题:

现在,我已经为带有$bilder = glob( "../is/images/*.jpg" );, 但这很糟糕,因为我必须再次做一些事情,这意味着我必须在那里上传图片。相反,我想使用某种格式/大小,这是我之前用add_image_size( \'hintergrundbild\', 1500, 1500 ); 在函数中。php。如何进行/连接?

有没有更干净的方法来代替将那条线放在页眉的上方。php?我有一种感觉,这有点不对劲,但另一方面,我找不到解决Safari和Chrome缓存问题的方法。

每次点击/加载一张新图片时,如何对其进行编码,使其每隔一个小时左右自动更改?我想,这样可能更好,也不那么咄咄逼人。

伙计们,非常感谢你们。

1 个回复
最合适的回答,由SO网友:gmazzap 整理而成

如果要使用add_image_size, 您的图像必须以WordPress附件的形式上传,而不仅仅存在于特定文件夹中。

因此,首先注册您的自定义尺寸:

add_action( \'after_setup_theme\', \'gmrb_background_image_size\' );

function gmrb_background_image_size() {
  // using WP 3.9 crop position
  // see https://codex.wordpress.org/Function_Reference/add_image_size#Crop_Mode
  add_image_size( \'gmrb_background\', 1500, 1500, array( \'center\', \'center\') );
}
之后,进入后端upload all your background images, 进入“添加新媒体”屏幕。

现在的问题是,在所有更新的图片中,如何识别哪些图像是背景,哪些不是背景?

我认为一个好主意是使用meta field \'_is_background\' 对于背景图像,将其设置为true。

由于WP 3.5存在挂钩\'attachment_submitbox_misc_actions\' 允许将一些输出添加到附件的“保存”/“更新”元框中。因此,您可以使用该挂钩输出复选框,然后使用\'update_post_meta\' 钩子将复选框值另存为post自定义字段。

显示字段:

add_action( \'attachment_submitbox_misc_actions\', \'gmrb_background_support\' );

function gmrb_background_checkbox() {
  wp_nonce_field(\'is_background\', \'_is_bkgrnd_n\');
  $html = \'<div class="misc-pub-section misc-pub-filename"><label for="is_bkgrnd">\';
  $html .= \'<input id="is_bkgrnd" name="_is_background" type="checkbox" value="1"%s />\';
  $html .= \'&nbsp;%s</label></div>\';
  global $post;
  $is = get_post_meta($post->ID, \'_is_background\', TRUE );
  printf( $html , checked(1, $is, FALSE), esc_html__(\'Is Background?\', \'your-txt-domain\') );
}
保存字段:

add_action( \'update_post_meta\', \'gmrb_background_checkbox_save\', 20, 4 );

function gmrb_background_checkbox_save( $mid, $pid, $key, $value ) {
  $post = filter_input(INPUT_SERVER, \'REQUEST_METHOD\', FILTER_SANITIZE_STRING);
  if ( strtoupper($post) !== \'POST\' ) return;
  if ( ! $key === \'_wp_attachment_metadata\') return;
  if ( ! check_admin_referer(\'is_background\', \'_is_bkgrnd_n\') ) return;
  $is = (int) filter_input(INPUT_POST, \'_is_background\', FILTER_SANITIZE_NUMBER_INT);
  if ( $is === 1 ) {
    update_post_meta($pid, \'_is_background\', \'1\' );
  } elseif( get_post_meta($pid, \'_is_background\', TRUE ) ) {
    delete_post_meta($pid, \'_is_background\');
  }
}
附件编辑屏幕中上述代码的输出:

Checkbox for attachment custom field

因此,上传一些背景图像后,编辑它们并选中“是缩略图”复选框。

现在,您需要的是一种随机获取图像的方法,并每小时更改一次。

一旦背景是附件帖子,我们可以使用get_posts 使用transient 每小时更改一次结果。

function gmrb_background_get_random() {
  // first check transient
  $background = get_transient( \'my_background_random\' );
  if ( empty( $background ) ) {
    // no transient, perform a query
    $args = array(
      \'post_type\' => \'attachment\',
      \'post_status\' => \'inherit\',
      \'orderby\' => \'rand\',
      \'posts_per_page\' => 1,
      \'meta_query\' => array(
        array( \'key\' => \'_is_background\', \'value\' => 1, \'type\' => \'NUMERIC\' )
      )
    );
    $result = (array) get_posts( $args );
    if ( ! empty( $result ) ) {
      $attachment = array_shift( $result );
      $image =  wp_get_attachment_image_src( $attachment->ID, \'gmrb_background\' );
      $background = ! empty( $image ) ? $image[0] : FALSE;
      if ( $background ) {
        // save transient for one hour
        set_transient( \'my_background_random\', $background, HOUR_IN_SECONDS );
      }
    }
  }
  return $background;
}
最后一件没有做的事是使用这个随机图像作为背景。

我建议您实施custom background feature, 这样,使用core interface 您可以定义要用作默认值的图像,还可以将类“custom-background”添加到body类和handle the inline style addition 需要使用自定义图像作为背景。(有关更多信息,请参见上文链接的食品法典页面)。

这为您节省了一些工作,并为其他背景属性提供了一个界面,如repeat-x和repeat-y、position、scroll或fixed。。。

您唯一需要做的就是使用\'theme_mod_background_image\' 过滤器挂钩返回随机图像(使用my_background_get_random() 以上)而不是核心界面中的映像集,如果my_background_get_random() 出于任何原因,返回false(例如,wen没有图像设置为背景)。

首先,让我们添加对自定义背景的支持

add_action( \'after_setup_theme\', \'gmrb_background_support\' );

function gmrb_background_support() {
  if ( ! current_theme_supports( \'custom-background\' ) ) {
    add_theme_support( \'custom-background\' );
  }
}
现在,让我们过滤自定义背景功能使用的图像:

add_filter( \'theme_mod_background_image\', \'gmrb_background_custom_filter\' );

function gmrb_background_custom_filter( $image ) {
  // do nothing on admin or core custom background interface will not work properly
  if ( is_admin() ) return $image;
  $random = gmrb_background_get_random();
  if ( $random && filter_var( $random, FILTER_VALIDATE_URL ) ) {
    $image = $random;
  }
  return $image;
}
我们完成了。您只需确保在模板中(通常在header.php) 有人打电话给wp_head() 以及body html标记包含body_class().类似于:

<body <?php body_class(); ?>>
考虑到这两个都是最佳实践,应该在所有WordPress主题中进行,无论是否实现了自定义背景功能。

所有代码都可以作为插件在Gist here.

结束

相关推荐

Link images to post

将图像链接到帖子。大家好我相信这很简单,但我不知道怎么做。我知道如何在帖子中添加图像-单击帖子,添加媒体,选择缩略图。这给了我一个缩略图。我想我要做的是将缩略图链接到帖子,这样我就可以控制缩略图在页面上的显示位置。我有一个这样的模板。 <div class=\"content_div\"> <?php $car_args = array( \'post_type\' =>