Введение
Решил создать тему для скрипта, создающего адаптивные изображения. Я обновил эту тему, так что я могу сослаться. Требовать более сфокусированного на конкретном ответе @ChrisFerdinandi посоветовал мне использовать скрипт Adaptive Images+. Этот скрипт сделает именно то, что я ищу.
Поэтому я искал скрипт, который проверял бы меня при посещении веб-сайта на экране Retina, таком как iPad или iPhone для WordPress.
Проблема
Я буду объяснять на каждом шагу, что я сделал, и делиться своим кодом. Прежде чем я поделюсь своим кодом и пройдусь по всем шагам, я опубликую некоторую информацию о моей установке WordPress.
Я установил свою установку WordPress в подпапку с именем /wordpress. Я использую пользовательскую тему WP, которую разработал самостоятельно. Я использую избранные изображения для элементов своего портфолио. Я создаю их в своем файле function.php, например add_image_size('thumbnail-portfolio', 300, 200, true);
Согласно странице установки плагина от Криса Фердинанди, мы начинаем с изменения файла .htaccess на шаге 1. Итак, я пропустил все, что находится между комментариями #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. Я добавляю сценарий cookie сразу после начала <head> до запуска всех остальных сценариев. Весь мой файл выглядит так:
<!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 безрезультатно.
