Для того, щоб виконати цю роботу, потрібні хоча б базові знання правил CSS, це основна таблиця, яка відповідає за оформлення і зовнішній вигляд сайту. Вона дає великі можливості в дизайні, створюючи різні ефекті, спецефекти обмеження тільки на фантазію дизайнера.
Давайте приступимо до справи.
Першим кроком ми підключимо таблицю CSS для мобільних пристроїв. Для цього переходимо до встановленої темі і відкриваємо файл header.php. Тут знаходимо стандартне підключення CSS, виглядає воно приблизно так:
І міняємо ці рядки на наступні:
Другим кроком ми створимо таблиці для мобільної версії. Знову переходимо до нашої теми, знаходимо основну таблицю CSS «style.css» і копіюємо її в окрему папку або на робочий стіл (куди вам зручніше) головне скопіювати. Потім, перейменувавши її в mobile-style (зверніть увагу, що ми раніше підключали таблицю для мобільних пристроїв з ім'ям mobile-style.css. Якщо ви будете перейменовувати зовсім в інше ім'я, то не забуваємо його міняти і в підключенні.) Переміщаємо назад в нашу тему.
Третій крок - це основний крок. На нас чекає повністю поміняти структуру сайту, прибрати зайві властивості, змінити розміри і допрацьовувати походу справи різні дрібниці. Відкриваємо, таблицю створену нами для мобільних пристроїв в моєму випадки mobile-style.css. І в першу чергу розберемося з основними блоками, в якому знаходиться весь наш сайт. У багатьох темах його визначають класом або ідентифікатором під назвою «wrapper», змінимо даного блоку стилі приблизно на наступні:
Основним стилям є ширина блоку «width», ми зафіксували його в 300px, я вважаю це оптимальний розмір. Можна також задати ширину у відсотках «100%», але я роблю наголос саме на мобільний пристрій, тому мені плаваюча ширина не потрібна. Далі ми змінимо стиль блоку #header приблизно на такий:
Наступним йде «logo» назву сайту, виводиться всередині блоку header. даємо такі стилі:
Потім навігація, тут трохи складніше, бажано переробити її в список, що випадає, по скільки пункти меню будуть на лазити один на одного, що не дуже добре. Є кілька варіантів вирішити цю проблему, найпростіший, встановити спеціальний плагін, називається WP Mobile Menu. Якщо плагін - це не ваш варіант, то можна зробити мобільне меню за допомогою jQuery, скриптів, але тут варто повозитися.
Наступний у нас йде центральний блок «content», йому також потрібно змінити стилі, приблизно на такі:
Зверніть увагу, що ми змінили властивості float: left; або можливо float: right; на float: none ;. Таким чином, скасовуємо обтікання блоків і структура побудови сайту тепер буде будуватися в один ряд, один за іншим.
Останнє, що нам залишилося, це доопрацювати дрібниці, задати ширину footer'a у відсотках, змінити розмір шрифту (якщо потрібно буде) і інше, що некоректно виглядає. За великим рахунком важко сказати, що саме потрібно буде міняти, це все робиться походу справи. Основне ми розібрали - це головне, також варто врахувати, ідентифікатори, які я наводив у приклад - умовні. Тобто не у всіх темах вони можуть так називатися, тому раджу користуватися плагіном для Mozilla Firebug. Це був один із способів, як створити мобільну версію сайту для WordPress.
Читайте також:
Плагін мобільного меню на WordPress
Набір контурних іконок на різні теми
Креативні логотипи для натхнення
Анімовані ефекти при наведенні на веб-іконки з використанням шрифту Font Awesome