Як адаптувати WordPress сайт до мобільних пристроїв

Оскільки мобільні пристрої з предметів розкоші стають предметами потреби, очевидним стає ключовий момент: ваша WordPress тема з фіксованою шириною має стати гнучкою. Настав час серйозно подумати над питанням перетворення вашої WordPress теми на дружню до мобільних пристроїв. Це керівництво покаже вам базові кроки до того, щоб зробити ваш сайт гнучким.

Крок 1. Резервна копія

Перше, що потрібно зробити перед тим, як робити будь-які серйозні зміни у коді – резервна копія файлів. У цьому випадку вам потрібно просто скопіювати FTP папку вашої теми, або, якщо у вас є SSH-доступ до вашого веб-сервера, просто виконати cp -R twentyten ./twentyten~ у папці WordPress / Wp-зміст / теми

Крок 2. Розбір вашої WordPress теми

Іноді найкращий спосіб зрозуміти, як якісь речі працюють – поділити їх (візуально). Давайте умовно розберемо сайт, виділяючи базові частини сторінки WordPress за замовчуванням (тема Twenty Ten).

Подивіться діаграму структури WordPress-сторінки:

Крок 3. Гнучкість контейнерних елементів за допомогою CSS та медіа-запитів

Підготуйтеся до мобільних екранів, використовуючи медіа-запити та замінюючи CSS-Правила новими відсотковими значеннями якостей. Якщо ви подивіться в style.css вашої теми ви побачите, що вам потрібно замінити фіксовану ширину базових розділів (контейнери DIV, Тобто #заголовок, #головний, #контейнер, #primary, #secondary, #sidebar и #нижній колонтитул) на значення у відсотках. Наприклад, у темі Twenty Ten потрібно додати в кінці вашої таблиці стилів наступне:

@media screen and max-width 1024px {
  #wrapper
  {
    WIDTH:94%;
    MARGIN:20px auto;
  }

  #access,#access .menu-header,div.menu,#colophon,#branding,#main,#footer
  {
    WIDTH:100%;
    MARGIN:0 auto;
  }

  #branding
  {
    OVERFLOW:hidden;
  }

  #container
  {
    FLOAT:left;
    WIDTH:99%;
    MARGIN:0 -25.5319149% 0 0;
  }

  #content
  {
    WIDTH:68.5957447%;
    MARGIN:0 29.787234% 0 20px;
  }

  #primary,#secondary
  {
    OVERFLOW:hidden;
    WIDTH:23.40425535%;
  }

  #site-title,#site-info
  {
    WIDTH:74.4680851%;
  }

  #footer-widget-area .widget-area,#site-generator,#site-description
  {
    WIDTH:23.40425535%;
  }
}

@media screen and max-width 660px {
  #wrapper
  {
    WIDTH:90%;
    MARGIN:5px auto;
    PADDING:0 3%;
  }

  #access,#access .menu-header,div.menu,#colophon,#branding,#main,#footer
  {
    WIDTH:100%;
    MARGIN:0 auto;
  }

  #branding
  {
    OVERFLOW:hidden;
  }

  #site-title
  {
    WIDTH:100%;
  }

  #container
  {
    FLOAT:left;
    WIDTH:100%;
    OVERFLOW:auto;
  }

  #content
  {
    WIDTH:99%;
    MARGIN:0;
  }

  #primary,#secondary
  {
    FLOAT:left;
    OVERFLOW:hidden;
    WIDTH:99%;
  }

  #secondary
  {
    CLEAR:left;
  }

  #site-generator,#site-description,#site-info,#site-title
  {
    CLEAR:left;
    FLOAT:left;
    WIDTH:95%;
    MARGIN:0;
    PADDING:0;
  }
}

CSS3 медіа-запити

Більш старі версії Internet Explorer не розпізнають нові елементи розмітки HTML5 та/або медіа-запити. Необхідно посилатися на два JavaScript файли, які виправляють недоліки IE8 (і старіших версій). Розмістіть ці посилання в голова-Частини коду вашої сторінки.

<!--[if lt IE 9]>
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fhtml5shim.googlecode.com%2Fsvn%2Ftrunk%2Fhtml5.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcss3-mediaqueries-js.googlecode.com%2Fsvn%2Ftrunk%2Fcss3-mediaqueries.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<![endif]-->

Крок 4. Зробіть зображення гнучкими

За методом Рідина одне й те велике зображення використовується всім розмірів екрана, що несприятливо впливає час завантаження. Наприклад, уявіть, що вам потрібно завантажити на мобільний телефон зображення 1000 пікс, яке потім буде масштабовано до 100 пікс. Це марнування часу та трафіку, а також навантаження на ресурси мобільного пристрою.

Найкращим рішенням буде Прогресивне вдосконалення. У цьому випадку ми завантажимо зменшені версії зображень для менших екранів. За допомогою JavaScript, визначається найближчий відповідний розмір, картинка завантажується і робиться гнучкою за допомогою CSS.

WordPress автоматично додає атрибути ширини та висоти для всіх зображень, що динамічно надаються коду сторінки. Тож для того, щоб отримати гнучкість, нам потрібно видалити ці атрибути. По-перше, ми створимо JavaScript файл під назвою responsive-images.js у папці теми, в якій буде наступне:

jQuery(document).ready( function ($) {
	$('img').each( function () {
		$(this).removeAttr( 'width' );
		$(this).removeAttr( 'height' );
	});
});

Потім вставте наступний код у файл functions.php теми:

add_action( 'wp_enqueue_scripts' 'tutsresponsive_enqueue' );
function tutsresponsive_enqueue() {
	wp_enqueue_script( 'responsive-images', get_theme_directory_uri() . '/responsive-images.js', array( 'jquery' ) );
}

Також додайте до файлу styles.css таке CSS правило:

	img {
		max-width: 100%;
		height: auto;
		width: auto9; /* ie8 */
	}

Простий шлях, але чому б і ні…

Є кілька WordPress-плагінів, які допомагають зробити зображення гнучкими. Використання плагінів може заощадити час. Якщо ви не готові зариватися в код, знайдіть просто добрий плагін. Щоб зробити картинки гнучкими, можна використовувати WP Fluid Images у директорії плагінів WordPress.

Крок 5. Ще трохи цікавого коду

Є ще кілька питань щодо iPhone, які потрібно розглянути. Два питання, які, безперечно, виникнуть, це зміна розміру тексту и масштаб. Ось два додаткові рядки коду: перший потрібно додати у ваш файл styles.css, а другу потрібно додати в частині сторінки.

html {
	-webkit-text-size-adjust: none;
}

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/