的简介

Question

的简介

我决定为创建自适应图像的脚本创建一个主题。我已经更新了这个主题，所以我可以参考。要求更专注于特定答案@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-Images和RewriteEngine 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但没有结果。

Answer 1

我在自适应图像方面取得了巨大成功，但它涉及一些手动工作。 http://cferdinandi.github.io/adaptive-images/

Answer 2

我发现最简单的解决方案是制作一张图像 - 两倍的标准 - 压缩它，然后在非视网膜显示器上调用它的一半大小。

请在此处查看说明......

 http://silev.org/test/Retina-resize.html

自适应图像+ for WordPress：与WordPress集成

的简介

的问题

我做了什么？

2 个答案: