Вордпресс зараз - одна з універсальних і дружніх до користувача веб-платформ. Є безліч плагінів, дозволяючи навіть недосвідченому веб-дизайнеру почати творити і отримувати прийнятні результати в сайтобудування.
Для тих, хто не хоче встановлювати стандартні шаблони, є так звані «порожні» теми, відредагувавши які, можна отримати щось більш персоналізоване. З ростом «гумових» тенденцій в інтернеті все більше тим стає повноекранними, які займають всю ширину екрану або «складними» особливим чином в залежності від дозволу, не виключаючи і стандартну тему Twenty Twelwe.
Однією з кращих «порожніх» тим є Reverie, яка, в свою чергу, грунтується на фреймворку Zurb. Ми поговоримо зараз про четвертому, найбільш свіжому, випуск Ревері, що отримав значні зміни в синтаксисі і структурі. Ревері робить розробку своєї власної «тягнеться» теми досить простим заняттям.
Інструкція, представлена нижче, передбачає, що ви маєте базові знання HTML і у вас є досвід роботи з WordPress. До того ж, так як Reverie 4 вибудувана ідеальна для використання з SASS, ми сфокусуємось в цьому проекті на Vanilla CSS.
Зіставте «тягнеться» тему Вордпресс за допомогою фреймворка на HTML5 під назвою Reverie 4.
Після того, як ви встановите Вордпресс, визначитеся зі структурою, налаштуєте меню, встановіть назву, ви встановите тему Twenty Twelve. Вона, звичайно, непогана, але ми хочемо використовувати першокласну Reverie 4.
Встановіть Reverie, як ви зазвичай робите це з усіма темами: консоль -> зовнішній вигляд -> теми -> встановити теми. Виберіть zip-файл, встановіть, активуйте.
Структура Reverie 4 відрізняється від більш ранніх релізів, які слідували стандартної структурі WordPress. Всі стильові листи зараз знаходяться в папці CSS.
Ви можете встановити фон або за допомогою CSS, або за допомогою вбудованих в Вордпресс функцій (Зовнішній вигляд -> Теми -> Налаштувати -> Фонове зображення). Виберіть картинку або колір, збережіть.
Щоб змінити фон в шапці сайту, знайдіть рядок 4554 в style.css. Приберіть header.row з кластера рядів і помістіть його окремо в нову секцію з чорним непрозорим кольором. Видаліть підкреслення в заголовку, прибравши тег
під лого в файлі header.php.
Навігація повинна бути підсвічена. Є кілька місць, де потрібно міняти колір підкладки, включаючи назву, елементи списку, і форму пошуку (для повної ширини). Змініть колір підкладки в рядках 2736, 2859, 2953, 3008, 3071 з темно-сірого на червоний.
Щоб контролювати зовнішній вигляд першої сторінки, вам потрібно створити свою власну. В папці з темою знайдіть файл page.php, скопіюйте його в home.php. WordPress буде автоматично шукати цей файл при запуску. Настав час його підредагувати.
Ревері 4 поставляється з передвстановленим скриптом «Орбіт», щоб слайдер заробив, вам потрібно тільки встановити однойменний плагін. Після його установки і активації перейдіть в home.php, додайте діви з кодами слайдера відразу під дивом з основним вмістом. Потім в панелі управління вордпресс ви зможете налаштувати картинки для показу.
Нехай у записи буде чорний фон з червоною рамкою, 10px рамками і 10-піксельним відступом знизу. Змінимо заголовок з H1 на шрифт Amatic з Google fonts і змінимо колір. Змінимо розмір мета-тегів, текст сниппета буде білим. Картинка буде зліва.
Уже все упаковано в рамки, чому ж не сайдбар? Відкрийте файл sidebar.php в папці з темою. Сайдбар це тег
Відкрийте файл footer.php в папці з темою. Будь-які зміни, вироблені тут, спершу вимагають тега
Тепер клацніть на заголовок будь-якого запису і подивіться, що можна поліпшити на внутрішній сторінці. Взагалі-то, вона виглядає непогано, залишилося додати тільки кілька штрихів. У заголовка потрібно змінити колір, але зверніть увагу на тег 'entry-title', з яким ми працювали раніше.