Products
GG网络技术分享 2025-03-18 16:12 0
日前,知名博客平台WordPress宣布,所有基于WordPress框架构建的博客网站都支持创建和发布VR内容,包括360图片和360视频,不过目前发布360视频仍在测试阶段。WordPress表示他们的目标是让用户发布VR内容尽可能地像发文字和照片那么简单,而其他人则可以通过电脑、手机以及VR头显等设备观看发布的内容。
VR游戏下载、新游推荐、福利,尽在17173VR!
当用户在电脑端的浏览器观看时,点击图片或视频的“播放”图标后,VR查看器会自动加载内容,用户可以通过鼠标拖曳图片观看360图片或视频,也可以点击“全屏”图标进入全屏模式下观看360图片或视频。
当用户使用手机或者WebVR兼容的桌面浏览器时,可以点击“VR”图标,使用相关的 VR 头显设备观看。目前WordPress已经测试过谷歌纸盒、Gear VR、Daydream View、Oculus Rift和HTC Vive。
WordPress能够与时俱进无疑是一件好事,让每位个人站长都能轻松的为自己的站点增加VR内容。不过为了有更好的用户体验,站长们则不得不需要重新考虑一下带宽问题。毕竟比起HTML文本和图片,在网站上发布360图片或者视频,所占的体积更大,其所需的带宽也会更多。
如果你的文章页面都是比较多图片要显示且需要用到相册功能,是否觉得每次选择要显示的图片加入到相册并要把相册短代码插入到文章很麻烦呢?如果能自动将文章中的所有或部分图片加入相册并自动插入gallery相册短代码到文章页就可以省很多时间。本文介绍的方法就是修改主题让它在每篇文章的结尾部分自动添加相册,同时还可以指定相册中的图片数量。
1. 编辑模板文件
我们需要改动3个模板文件:
single.php —— 在文章中插入图集
style.css —— 调整图集样式
functions.php —— 插入代码实现图集效果
下面的例子以2010主题为基础,在其它主题上的修改方法也是相同的。
首先打开single.php文件,找到the_content()标签,在下一行加上:
这是对我们将要在functions.php文件里生成的函数的调用。
2. 创建函数
pbd_image_gallery()函数将查看当前文章,确定文章中配有的图片,然后显示这些图片供我们使用。
首先需要生成一个用以查找文章中图片的query查询。在functions.php的结尾部分(?>结束标签之前)加入下面的代码:
/*
文章自动添加相册
代码来源: www.wpzxbj.com
*/
function pbd_image_gallery() {
global $post;
$limitImages = 8; // How many images in total to show after the post?
$perRow = 4; // How many images should be in each row?
$featuredID = get_post_thumbnail_id($post->ID);
// Build our query to return the images attached to this post.
// We query one image more than we intend to show to see if there
extra images that won\'t fit into the gallery here.
$args = array(
\'post_type\' => \'attachment\',
\'post_mime_type\' => \'image\',
\'numberposts\' => $limitImages + 1,
\'orderby\' => \'menu_order\',
\'order\' => \'ASC\',
\'post_parent\' => $post->ID,
\'exclude\' => $featuredID
);
$images = get_posts($args);
第一行声明这是一个函数,之后抓取变量$post(该变量中含有当前文章的相关信息,如ID等)并进行若干设置(总共需要显示的图片数量,每行显示的图片数量等,可根据需要自行更改数值)。
接下来用get_post_thumbnail_id函数找到被用于缩略图的图片ID,稍后我们会用到这些ID信息以确保对应的图片不显示在图集里。
剩下的代码就是我们的查询。
3. 输出HTML
现在我们已经有了图片的PHP代码,接下来需要把他们转换成HTML。在刚才添加到functions.php中的代码后加入:
// Assuming we found some images, display them.
if($images) : ?>
Image Gallery
<?php
// We'll use the $count here to keep track of what image we're on.
$count = 1;
// Print each individual image.
foreach($images as $image) {
// Only show the image if it is within our limit.
if($count
<li>
ID); ?>\">
ID, \'gallery-thumbnail\'); ?>
这段代码先检查是否找到任何图片(如果没有找到图片,代码将不执行任何操作)。
然后输出一些简单的HTML信息(定义图集的DIV块、标题以及列表的开始部分)。
函数始于第七行,首先生成一个名为$count的变量,该变量将记录当前浏览图片。
之后我们生成一个循环,使最终图集能够循环演示。调用每一个图片时都需要检查是否达到之前设定的图片最大数量,然后显示图片。
然后我们在设计图集样式时,可以在图集每行的最后一张图片上用到CSS类。因此我们用第15至17行代码来判断当前图片是否是每行规定的图片数量的倍数。
通过wp_get_attachment_image函数我们可以用图片ID获取并显示图片,甚至可以设置图片大小。可以在functions.php文件的开始部分加上下面的代码以定义图集的缩略图大小:
add_image_size(\'gallery-thumbnail\', 145, 145, true);
图片ID的作用和文章ID一致,因此我们可以用get_permalink()函数将图片链接到图片页面。
4. 添加一个“More”链接
某篇文章中可能有很多图片,而我们只想显示前8张。由于我们在query查询中已经生成了函数,所以现在需要做的就是查看最终返回的图片总数是否大于最初的设置,如果的确大于,链接到第一个图片。
$limitImages) : ?>
ID); ?>\">View More Images »
Demand feedback