Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

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

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

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

Як адаптувати 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
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 14

Postmachine:

Чи пробували ви адаптувати WP сайт до мобільних пристроїв за допомогою Twitter Bootstrap (http://twitter.github.com/bootstrap/)?
Це буде гарне рішення?

WordPresso:

Не пробували, але дякую за наведення, буде цікаво глянути.

HTM:

на мою у вас помилка в media query
потрібно писати так
@media екран і (максимальна ширина: 500 пікселів) {

}

інакше не реагує на такі штучки)

Ендрю:

— проблема відображення на мобільних пристроях. Репітні зображення повторюються лише по ширині екрана смартфона. Не можу розібратись. Може хтось підкаже?

Віталій:

Добрий день. А куди вставляти код у файлі функції? Я ставив наприкінці і маю синтаксичну помилку. Підкажіть будь ласка.

WPcafe.org:

https://hostenko.com/wpcafe/tutorials/kuda-vstavlyat-etot-kod-v-wordpress-obshhaya-struktura-faylov-temyi/

Віталій:

Будь ласка, перевірте цей код. Можливо, синтаксис в wordpress змінився. Бо я все правильно роблю.

гість:

помилка треба get_template_directory_uri()

гість:

по правді кажучи, жодна з вище наведених порад не допомогла в мобільній опері картинок.

Ірина:

Насправді — вставка коду у теми functions.php — видає синтаксичну помилку — це може бути конфліктом самої теми і цього коду?
Активно використовую тему Jupiter — може, в темі є якісь налаштування, а цим кодом скасовую їх і сайт вішається?

WPcafe.org:

Так, таке просто може бути. Тема Jupiter вже з коробки адаптована до мобілок, немає сенсу її в цьому плані допилювати.

слава:

тема ще жива, питання можна ставити?

Павло:

Привіт, скажи пліз який плагін або сервіс юзаєш для відображення соціальних кнопок під статтею?

WPcafe.org:

Easy Social Share Кнопки

Додати коментар або відгук