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

问题描述 投票：1回答：2

Intro

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

image wordpress device retina
2个回答
1
投票

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

0
投票

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

看这里的解释......

 http://silev.org/test/Retina-resize.html
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.