Подивіться тепер на ваш блог критичним поглядом. Незабаром на ньому багато буде інакше, тому що в принципі, Ви на своєму можете змінити все, що захочете. Звичайно, треба знати, як це зробити.
В адміністративній панелі
Зайдіть в адміністративну панель Зовнішній вигляд - Редактор . Ви вже знаєте, за що відповідає багато з шаблонів, але тепер Вас цікавитимуть не шаблони, а те, що знаходиться під ними: Стилі. Точніше, один розділ із них, який називається Список стилів.
Відповідає цьому списку файл style.css. Цей файл знаходиться на блозі активної теми. Ви його там завжди зможете знайти.
У браузері
Просто відкрийте у браузері свій. У більшості браузерів є хороша функція: Ви можете натиснути на будь-яку область на блозі правою клавішею миші та вибрати зі списку операцій Перегляд коду елемента . Внизу з'являється вікно, в якому Ви можете знайти цікаву інформацію про елемент, який Ви натискали.
У цьому вікні ліворучВи побачите код сторінки, і в цьому коді буде виділено рядок. відповідна даному елементу. А справа, у стилях будуть властивості цього елемента.
Розмір шрифту, відступи, колір тексту та фону, вирівнювання: все це знаходиться у стилях і все це можна змінити.
Змінюємо колір фону
На блозі WordPress особисто мені не подобається, коли фон статей і фон іншого різний. В цьому випадку статті у стрічці йдуть окремими блоками і, на мій погляд, не дуже добре виглядають. Ми зробимо фон скрізь таким самим, як зараз фон статті. Натискаємо на фон, який ми хочемо змінити правою клавішею миші, вибираємо Перегляд коду елемента. Нас у тому рядку, який буде виділено в результаті справа, цікавитиме назва атрибута class . Стилі прописуються саме за класами.
В даному випадку class = art-layout-cellЦе означає, що у стилях, у файлі style.css, теж буде такий клас, і в ньому вже буде прописано властивості. Тільки виглядатиме це по-іншому, а саме:
.art-layout-cell, а далі у фігурних дужках буде прописано властивості цього класу.
Знаходимо клас з такою назвою у файлі style.css. Скористайтеся функцією пошуку Ctrl+F, і пропишемо в вікні пошуку назву: art-layout-cell. Ми відразу побачимо тло:
background-color: Transparent. Transparentозначає прозорий .
А тепер, який же колір нам потрібен? Де взяти колір тла наших статей? На цей раз ми скористаємося програмою FSCapture. У ній. окрім іншого, серед набору інструментів можна знайти піпетку, яка визначає колір будь-якої ділянки на екрані монітора. Дуже корисний інструмент!
Відкриваєте програму FSCapture, заходьте у Налаштування, і вибираєте інструмент Екранна піпетка
. Натисніть на потрібну область на екрані. У вікні HexВи побачите код потрібного кольору: D2E8EE
Його Ви вставляєте у стиль art-layout-cellзамість слова Transparent .
Дивіться, що вийшло. Ще залишається багато роботи, але початок уже покладено.
Відео про те. як редагувати фон на блозі WordPress
Докладніші відомості Ви можете отримати у розділах "Всі курси" та "Корисності", в які можна перейти через верхнє меню сайту. У цих розділах статті згруповані за тематиками блоки, що містять максимально розгорнуту (наскільки це було можливо) інформацію з різних тем.
Також Ви можете підписатися на блог, і дізнаватися про всі нові статті.
Це не займе багато часу. Просто натисніть на посилання нижче:
Фон – це зображення, на якому відображаються всі елементи сайту. Або він може бути не картинкою, а суцільним або градієнтним кольором.
Більшість шаблонів не підтримують встановлення та зміну фону. Однак не всі теми здатні це робити, особливо якщо йдеться про безкоштовні екземпляри. Але навіть якщо у вас на сайті встановлений такий шаблон, на якому можна в налаштуваннях змінити фон WordPress, це буде дуже мізерною операцією, оскільки зміни будуть ухвалені відразу на всьому сайті. Немає звичайних шаблонів поміняти фон тільки в деяких записів, рубрик або сторінок.
У цій статті ми розповімо вам про дві прості плагіни, які вирішують цю проблему за пару кліків.
Background Per Page
Це найпростіший плагін, який дозволяє проводити операції із тлом WordPress. Після встановлення та активації не з'явиться жодних налаштувань та додаткових пунктів панелі керування сайтом. Тільки на сторінці кожного запису та сторінки буде нова опція, яка дозволить додати індивідуальну фонову картинку.
До картини, вибраної для фону WordPress, можна застосувати кілька ефектів:
- Вибрати повтор – горизонтальний чи вертикальний;
- Зробити картинку, що прокручується з сайтом або фіксованою, так званий ;
- Вибрати орієнтацію фону WordPress – праворуч, ліворуч, у центрі;
- Виберіть замість зображень звичайну заливку кольорів.
Плагін безкоштовний. Крім того, кожен завантажений фон WordPress може бути редагований у вбудованому редакторі цього додатка.
Full Screen Background Images Pro
А цей плагін більш складний у роботі, дозволяє проводити більше операцій із фоном WordPress. Він платний і коштує 13 $. Після встановлення активації плагіна на панелі адміністратора буде його пункт меню. У ньому зберігається галерея фонів, сюди можна будь-коли додавати, видаляти і редагувати зображення.
Крім цього, можна встановити фон WordPress для будь-якого запису або сторінки, визначаючи їх за ідентифікатором ID, головної сторінки, будь-якої рубрики, архівних сторінок і навіть сторінки 404.
Широкі можливості даного плагіна доповнюються і тією функцією, що було в першому – на сторінці додавання кожної сторінки та запису додають опції для встановлення того чи іншого фонового зображення з редактором і будь-якими ефектами.
Загалом відмінний інструмент, щоб зробити фон WordPress. І платний, і безкоштовний плагін підійдуть для вирішення багатьох завдань, пов'язаних з цим.
Сьогодні у своїй практиці зіткнувся з тим, що для фону меню потрібно було поставити прозорість. Був варіант звичайно зробити це за допомогою картинки.png, але все ж таки вирішив покапати і зробити напівпрозоре тло за допомогою CSS. Виявилося це дуже просто:)
У html-коді прописуємо "клас", для якого необхідно встановити певну прозорість:
FON ( background: rgba (200, 54, 54, 0.5); )
тим самим я вказав колір фону, виставивши значення для трьох основних кольорів. r, зелений - g, синій - b), та прозорість фону на 50% (alpha - a) однією властивістю. Значення для кольору вказуються в діапазоні від 0 до 255, а для прозорості діапазон буде від 0.0 до 1.0
Властивість rgbaзастосовується також для решти елементів. Але якщо буде необхідно встановити прозорість для всіх елементів що знаходяться в даному класі, то можна скористатися властивістю opacity, що встановлює прозорість цілого елемента або всієї сторінки. тоді код буде виглядати так:
FON ( opacity: 0.5; )
У такому разі прозорими стануть всі елементи, що знаходяться в даному класі, у тому числі картинки та текст будуть прозорими.
Підписуйтесь та отримуйте корисні статті на пошту!
Інші круті статті на нашому блозі
- Знаю, що на практиці часто зустрічається така ситуація, що власник сайту "переробляє" або створює сайт "з нуля" по кілька разів, і не отримує потрібного результату. При цьому слідує…
- Партнерський матеріал! Завдяки постійному зосередженню пошукових систем безпосередньо на самому користувачі інтернету та показниках останніх оновлень алгоритмів Google, власникам сайтів стало ще важливіше звернути увагу на швидкість їх завантаження.
- Дивись, якщо у тебе стоїть завдання "розробити сайт під ключ" - переходь за цим посиланням і делегувати нам завдання. Якщо потрібен приклад технічного завдання - дивись статтю "ТЗ створення…
- Партнерський матеріал! - Чи хочеш опублікувати свою статтю? Багатьом власникам сайтів SEO-оптимізація здається дуже складним завданням. Насправді це не зовсім так. Залучення до просування висококваліфікованих фахівців може бути дуже...
Нещодавно розповідав про рішення для - крім використання CSS і Javascript з цим завданням справляються ще й 2 WordPress плагіни. Один із них я сьогодні розгляну детальніше – це Background Manager. Не кожна тема має установки для зміни фону веб-сайту і не кожен юзер зможе підправити його через стилі в шаблоні. Крім того модуль має кілька додаткових цікавих функцій, тому було вирішено вивчити його докладніше.
Оновлення 8.11.2018: На жаль, модуль давно не оновлювався, а зараз зовсім зник з офіційного репозиторію Plugin Directory. Читайте статтю або дивіться добірку плагінів.
Знайти модуль можна на цій сторінці або встановити його за назвою адмінки WordPress. На момент написання статті він вважався досить старим, т.к. підтримувана версія закінчувалася на номері 3.7.8. На жаль, плагін, може, навіть не підтримується зараз. Однак, я успішно протестував його на останній версії системи 4.2.1. До того ж, 30 тисяч завантажень зустрінеш не в кожному модулі.
Основне завдання плагіна Background Manager – відображення випадкового фону для кожного нового відвідувача або створення слайдшоу із кількох зображень. Зізнатися, спочатку я думав, що модуль просто допоможе зробити мені клікабельний фон, проте його функції дещо різноманітніші. Він дозволяє:
- створювати набори зображень, з яких картинки будуть вставлятися як тло сайту. Ви можете завантажити їх із локального комп'ютера, медіабібліотеки WordPress або інших модулів;
- визначати позиціонування фону, його тиражування (якщо це візерунок);
- накладати на тлі візерунки;
- побачити зображення повністю після завантаження, а не чекати поки воно поступово буде з'являтися зверху вниз (якщо користуватися повільний інтернет);
- настроїти показ фону на певних сторінках: головній, розділах, архівах чи постах;
- додати посилання для фону з підрахунком статистики переходів через Google Analytics.
Як бачите дуже цікавий набір опцій. Це якщо говорити глобально про можливості, але в модулі Background Manager повно будь-яких деталей. Так, наприклад, ви доступний вибір прозорості накладається візерунка, визначення ефекту при переході між картинками в слайдошоу і т.п.
Поза налаштуванням модуля знайдіть у розділі «Зовнішній вигляд» — «Фон». Тут, до речі, виникає така ситуація, що у вас може виявитися одразу два пункти меню з такою назвою. Якщо ви пам'ятаєте, то деякі теми WordPress мають подібне налаштування. Так ось плагін Background Manager повністю сумісний з нею і ви зможете керувати ним у даному розділі.
Але краще все ж таки зайти в той «Фон», який представляє лише налаштування модуля. На цій сторінці побачите просто безліч різних налаштувань.
Однак насамперед слід створити набір зображень для фону — клікаєте за посиланням Add New Image Set“. Переглянути наявні набори можна в закладці "Image Sets".
Як я вже казав, налаштувань тут дуже і дуже багато, є:
- принцип вибірки картинок для фону - випадково та ін;
- показ різних картинок щоразу або запам'ятовування їх у сесії браузера;
- колір фону;
- показ фону на весь екран або тиражування;
- накладання візерунка поверх зображення;
- можна додати кнопку Pin It з Pinterest та визначити ряд інших опцій.
Насамкінець слід зазначити, що з відображенням фону іноді можуть виникнути проблеми. Якщо у CSS шаблоні йде суворе завдання або перевизначення фону, то плагін Background Manager може не спрацювати. У мене, наприклад, на одному сайті спокійно підвантажилася картинка та замінила властивість background у стилях, а в даному блозі довелося його спеціально закоментувати. Від чого це залежить сказати складно. Ось що в результаті вийшло.
В цілому, Background Manager - класний плагін, який дозволяє відображати різні картинки для фону вашого сайту і навіть зробити їх слайдшоу. Для деяких проектів це може стати чудовим «декоративним» елементом.
Що стосується посилань з фону в Background Manager.У налаштуваннях є подібна опція і ви можете вказати лінк кожної картинки. Я тестував цю функцію і начебто все працювало на момент написання статті. Проте зараз із цим виникли проблеми. Єдине, що вдалося зробити, це розмістити лінк у спеціальному елементі — див. іконку [+] на скріншоті вище. Ця фішка плагіна працює без проблем.
