介绍
我决定为创建自适应图像的脚本创建一个主题。我已经更新了这个主题，所以我可以参考。要求更专注于特定答案@ChrisFerdinandi 建议我使用脚本Adaptive Images+。该脚本将完全按照我的要求进行。
所以我一直在寻找一个脚本，当在视网膜屏幕上访问网站时检查我，比如用于 WordPress 的 iPad 或 iPhone。
问题
我将在每一步解释我做了什么并分享我的代码。在我分享我的代码和演练所有步骤之前，我将发布一些关于我的 WordPress 安装的信息。
我已经将我的 WordPress 安装安装在一个名为/wordpress. 我正在使用我自己开发的自定义 WP 主题。我将特色图片用于我的投资组合项目。我在我的function.php文件中创建它们add_image_size('thumbnail-portfolio', 300, 200, true);
根据 Chris Ferdinandi 的插件安装页面，我们首先更改步骤 1.htaccess中的文件。所以，我所做的就是在评论之间和之后的所有内容。#START Adaptive-Images#END Adaptive-ImagesRewriteEngine On
所以我的整个文件是这样的：
#BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
#START Adaptive-Images
#Add any directories you wish to omit from the Adaptive-Images process on a new line.
#Omit plugins, wp-includes and wp-admin content.
RewriteCond %{REQUEST_URI} !wp-content/plugins
RewriteCond %{REQUEST_URI} !wp-includes
RewriteCond %{REQUEST_URI} !wp-admin
#Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
#to adaptive-images.php so we can select appropriately sized versions
RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php
#END Adaptive-Images
RewriteBase /wordpress/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wordpress/index.php [L]
</IfModule>
#END WordPress
好的，修改.htaccess文件后，我上传到服务器。我在子文件夹中更新它/wordpress。好了，我们进入第 2 步。这一步我跳过了，因为这是一个可选选项。
正确的步骤 3。我上传adaptive-images.php到与我的文件相同的目录中.htaccess，为清楚起见，我将两个文件都上传到了子目录中。/wordpress.
第 4 步<head>：在所有其他脚本运行之前，我在开始之后添加 cookie 脚本。我的整个文件如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title><?php bloginfo('name'); ?><?php wp_title('|'); ?></title>
<!-- Meta Tags -->
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<!-- Stylesheets -->
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">
<link href="<?php bloginfo('template_directory'); ?>/css/960.css" rel="stylesheet">
<link href="<?php bloginfo('template_directory'); ?>/css/flexslider.css" rel="stylesheet">
<link href="<?php bloginfo('template_directory'); ?>/css/isotope.css" rel="stylesheet">
<!-- JavaScript -->
<script>
document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';
</script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/custom.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.flexslider.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.isotope.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.isotope.min.js"></script>
<?php
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
好的，这也完成了。在第 5 步中。我已将代码片段添加到我的 css 文件中。
好的，最后一步。第 6 步是测试所有的东西，这里可能问题马上就清楚了。由于我可以访问移动设备视网膜，我决定首先在该设备上查看我的网站。可惜只显示小分辨率图片，使图像焦点不清晰。然后我看着第 6 步表明是否真的有新图像被创建和存储/保存。ai-cache脚本创建了一个文件夹adaptive-images.php，但不幸的是这是空的。
需要注意的是，我已将特色图像尺寸设置为正常尺寸，而不是视网膜版本。对于默认视图也是如此300x200，因为视网膜将是大小600x400px
我做了什么？
我已经检查了脚本的调试页面。我注意到 cookie 将设置为resolution. 当我替换所有图像RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php中的行时，该.htaccess行将RewriteRule .(?:jpe?g|gif|png)$ test.png被该图像覆盖。
删除错误调用之前的注释后将给出错误。每条路径都链接正确。
我试图将文件夹的权限ai-cache从755更改777为没有结果。