Як зробити дизайн сайту Wordpress на основі шаблону Twenty Eleven
Як зробити добрий дизайн сайту в тему проекту? Потрібно встановити та відредагувати готовий шаблон.
На минулих заняттях ми з вами встановили на сайт шаблон Twenty Eleven та зробили деякі налаштування. Тепер на основі цього шаблону ми зробимо новий дизайн.
Сайт на основі шаблону Twenty Eleven виглядає приблизно так…
Нагадую, що всі зображення клікабельні - на кліку вони збільшуються.
І наполегливо рекомендую: перш ніж розпочати редагування файлів шаблону, обов'язково зберігайте їх резервні копії. Найпростіший спосіб: просто скопіювати вміст файлу у текстовий документ. Тоді, якщо ви випадково зіпсуєте, зможете повернутися до початкового варіанту.
Як змінити назву та опис сайту?
Натисніть у меню "Зовнішній вигляд" - "Налаштувати". Виберіть «Властивості сайту».
У вікні, що з'явилося, напишіть назву сайту і його короткий опис.
Якщо ви позначите галочкою опцію «Відображати текст заголовка», ці дані будуть виводитися в шапці сайту над основним зображенням.
Якщо ви не помітите цю опцію, то на самому верху сторінки одразу з'явиться зображення як на цьому сайті.
Тут можна завантажити іконку сайту – фавікон. Ця маленька картинка 16 на 16 пікселів працює на імідж сайту. У видачі Яндекса фавікон з'явиться поряд із заголовком вашого сайту і зможе привернути увагу мандрівників, що блукають по Інтернету. У браузері користувача він з'явиться поряд із назвою сторінки у поточній вкладці. Він допоможе швидше знайти ваш сайт в історії браузера і в закладках. Загалом, на сайт обов'язково потрібно встановити зрозумілий, яскравий і незабутній фавікон.
Як встановити фавікон на WordPress?
Є два способи.
Перший метод. У меню "Зовнішній вигляд" - "Налаштувати" - "Властивості сайту" в розділі "Іконка сайту" натисніть "Виберіть файл".
Завантажте на сайт квадратну картинку зі стороною щонайменше 512 пікселів. Двигун сам перетворює картинку на фавікон.
Інший спосіб полягає у встановленні плагіна Easy Icon. Встановіть, активуйте, перейдіть в меню "Зовнішній вигляд" - "Easy Icon".
Прокрутіть сторінку до кінця, виберіть і завантажте файл, який ви приготуєте, з комп'ютера.
Найчастіше картинка для фавікон носить назву favicon.ico. Також використовують картинку у форматі .png розміром 16 на 16 пікселів. Можна скачати готовий фавікон з Інтернету або скористатися яким-небудь онлайн-сервісом з виготовлення фавікона з картинки, що сподобалася.
Як змінити колір заголовків, посилань та фону сайту?
Натисніть у меню "Зовнішній вигляд" - "Налаштувати" - "Кольори". Тут можна вибрати колірну схему: темну або світлу. А також можна призначити колір заголовків, фону та посилань.
Як організувати висновок основного контенту?
Натисніть у меню "Зовнішній вигляд" - "Налаштувати" - "Розмітка".
Тут можна призначити виведення вмісту (контенту) ліворуч від сайдбара, праворуч або одну колонку.
Як змінити зображення у шапці шаблону Twenty Eleven?
Натисніть у меню "Зовнішній вигляд" - "Налаштувати".
Виберіть «Зображення заголовка».
З'явиться форма, щоб додати зображення. Вам потрібно підготувати заздалегідь зображення 1000 × 288 пікселів.
Можна завантажити більшу картинку і обрізати. А можна в Яндекс Картинках задати пошук зображень із заданим розміром, а потім завантажену картинку відредагувати в онлайн фотошопі.
Завантажте картинку та виконайте команди «Вибрати та обрізати» та"Обрізати".
Як призначити як тло зображення?
Натисніть у меню "Зовнішній вигляд" - "Налаштувати" - "Фонове зображення". Виберіть зображення.
Завантаживши зображення, виберіть, яким чином повторюватиметься фон і збережіть зміни.
Як змінити колір головного верхнього меню у темі Twenty Eleven?
Виберіть «Зовнішній вигляд» — «Редактор».
У ньому потрібно знайти розділ, який відповідає за меню – розділ із заголовком /* = Menu.
Подивіться на ділянку коду, яку я виділила синім кольором на фото нижче.
У коді використано два кольори, обидва повторюються чотири рази. Замініть кожен колір іншим 4 рази.
Якщо ви зміните лише один колір, у вас з'явиться градієнт — такий плавний перехід між чорним і вашим кольором. Залежно від того, який колір ви зміните, градієнт буде чорним угорі або внизу.
Якщо ви зміните обидва кольори, скажімо, призначте синій та блакитний, то отримаєте плавний перехід між двома відтінками. Скористайтеся таблицею безпечних кольорів, щоб дізнатися код потрібного кольору.
Якщо ви хочете дізнатися код кольору якоїсь точки на екрані, можна скористатися програмою Pixie. Так ви зможете створити меню в тій самій гамі, що і шапка сайту. Просто виберіть темну і найсвітлішу точку в зображенні заголовка і пропишіть їх коди.
Я змінила відразу 2 кольори
Не забудьте натиснути кнопку "Оновити файл".
Як змінити фон внутрішнього вмісту блогу?
Якщо ви хочете змінити колір фону для всього вмісту блогу (фон основної колонки, бокового сайдбара, футера, віджетів), то потрібно відкрити файл style.css і в рядку виділеного на фото нижче в іншому розділі змінити колір.
Як прибрати посилання у футері теми TwentyEleven?
Знайдіть у меню "Зовнішній вигляд" - "Редактор". Відкрийте файл footer.php.
На малюнку виділено код, який виводить рядок «Сайт працює на WordPress» та відповідне посилання.
Видаліть або змініть рядок:
Також ви можете вставити в цьому місці код лічильників або напис, що розповідає про те, що всі права на вашому сайті захищені.
Як додати до підвалу додаткове меню?
На місці віддаленого у футері шаблону посилання ви можете розташувати невелике меню. Замість віддаленого фрагмента коду, описаного в минулому пункті, можна помістити кілька посилань.
Виглядати фрагмент коду меню приблизно так:
Як видалити форму пошуку у шапці шаблону Twenty Eleven?
Виберіть «Зовнішній вигляд» — «Редактор».
Відкрийте файл header.php.
Як закоментувати код?
Як забрати верхнє меню під шапкою?
Створіть пусте меню без додавання сторінок.
Як додати сайдбар у шаблон Twenty Eleven?
Виберіть «Зовнішній вигляд» — «Редактор». Знайдіть у правій колонці файл single.php («один запис») і відкрийте його на редагування.
Перед нею додайте код:
Тепер потрібно додати стилі для сайдбару, який виводитиметься на сторінці записів.
Таку спеціальну сторінку можна зробити головною сторінкою сайту. Сайдбар на ній може відрізнятись від сайдбару інших сторінок. Якщо ви помістите якісь віджети в «бічний стовпчик обраного», то вони природно будуть виведені тільки на такій сторінці.
Для того, щоб з'явилися обрані статті в слайдері, потрібно зайти на сторінку редагування важливих для вас статей і закріпити їх на головній.
Просто позначте галочкою "Приліпити на головну сторінку".
Відкрийте файл functions.php.Знайдіть функцію twentyeleven_posted_on(). Закоментуйте або видаліть рядок:
Відкрийте файл content-single.php. Видаліть код у межах
Відкрийте файл content.php. Потрібно видалити код у межах:
Видалити потрібно правильно. Якщо ви видалите весь див, то пропаде футер. Вам потрібно видалити лише рядок у тезі
Якщо розташувати поля «ім'я», «сайт» та «email» в одному рядку, то форма виглядатиме акуратніше і компактніше.
Нова форма однаково добре відображатиметься у всіх браузерах, а також адаптуватиметься під розмір вікна браузера.
У файлі стилів пропишіть новий CSS код форми:
Як додати жирність тексту при наведенні курсору миші в меню?
У файлі style.css знайдіть рядок #access ul ul :hover. Змініть код як у прикладі:
Як видалити зайвий простір поряд із заголовком сайту?
У файлі style.css знайдіть рядок #site-title, #site-description та /* Search Form */. Змініть код як у прикладі:
Як видалити зайвий простір між меню та заголовком статті?
У файлі style.css знайдіть рядок .singular .hentry та .singular.page .hentry. Змініть код:
Як додати до дати посту час?
Виберіть «Параметри» — «Загальні». У опції Формат дати виберіть «Свій формат» та впишіть: Y.m.d, G:i
Які б ви зміни не внесли до файлів шаблону, пам'ятайте: вони пропадуть, якщо ви оновите тему.
Можливо вас ще зацікавить: