Як розширити тему Wordpress. Як змінити розмір сайдбару – ручний метод та редактура за допомогою Visual Sidebar Editor
Від автора:Вітаю вас, друзі. У черговій статті на тему WordPress ми з вами розглянемо питання, як змінити шаблон WordPress. Якщо ви ще ніколи не стикалися з необхідністю зміни шаблону WordPress, тоді обов'язково прочитайте цю статтюОскільки рано чи пізно вам, швидше за все, доведеться зіткнутися з питаннями налаштування та редагування шаблону WordPress.
Для початку давайте визначимося з питаннями, що найчастіше виникають, з якими стикаються користувачі при налаштуванні шаблону WordPress під себе. Ось зразковий їх список:
як редагувати шаблон WordPress
змінити ширину шаблону на WordPress
як змінити розмір шаблону WordPress
як змінити колір шаблону WordPress
як змінити шрифт у шаблоні WordPress
І це лише невеликий перелік проблем, з якими ви можете зіткнутися або які ви зможете допомогти вирішити іншим, у тому числі за винагороду, якщо ви займаєтеся розробкою сайтів на замовлення.
Всі питання у списку вище можна вирішити двома способами, залежно від теми, яка використовується для сайту. Почнемо з найпростішого варіанту, який не потребує знань верстки. Цей варіант підійде, якщо шаблон підтримує редагування налаштувань.
Перейдемо до розділу Зовнішній вигляд- Налаштувати і побачимо головну сторінкусайту та в лівій частині сторінки доступні налаштування сайту. Серед них можуть бути і налаштування оформлення.
Наприклад давайте спробуємо змінити колірну схемусайту. Зайдемо в меню Кольори і змінимо фон бічний і центральної частинсайту.
Як бачимо, це досить зручно і змінити колір шаблону WordPress досить просто – результат ми бачимо одразу ж і можемо його оцінити.
Однак не будь-яка тема пропонує всі необхідні нам налаштування шаблону WordPress. Наприклад, там навряд чи будуть налаштування, які дають змогу змінити ширину шаблону на WordPress, наприклад, навіть у поточній темі немає налаштувань, що дозволяють змінити шрифт у шаблоні тощо. Як бути в цьому випадку? Ось тут нам і доведеться вдатися до другого варіанту і тут вже потрібні деякі навички верстки.
Отже, нам потрібно редагувати найчастіше лише один файл – це файл стилів style.css. Знаходиться він у папці вашої теми. Давайте як приклад змінимо колір шрифту. До речі, зробити це можна безпосередньо з адмінки WordPress. Тільки будьте обережні та уважні, щоб випадково не «поламати» сайт. Найкраще зробіть резервну копіютеми перед тим, як щось міняти у ній. Отже, йдемо в меню Зовнішній вигляд - Редактор і за замовчуванням у Вас має бути відкритим для редагування файлів стилів теми.
Якщо це не так, тоді оберіть цей файл зі списку праворуч, він називається Таблиця стилів (style.css). Найчастіше колір шрифту задається в body, тому знайдемо стилі даного елемента і пропишемо червоний колір як колір шрифту.
Після збереження файлу можемо оновити сайт та побачити червоний колір для основного шрифту на сайті.
Як бачимо, налаштування шаблону WordPress під себе досить нескладне завдання. Досить трохи знань CSS і ви зможете змінити шаблон WordPress та зробити необхідне налаштуванняшаблон. За тією ж схемою ми можемо вирішити інші аналогічні завдання. На цьому я з вами прощаюсь. Успіху і до нових зустрічей!
Ви повинні вміти змінювати розмір шаблону, якщо хочете створити добрий сайт. За замовчуванням багато тем пропонують незручні розміри каркаса шаблону. Вузькі теми – це так само погано, як занадто широкі. У вас має бути "золота середина", яка якраз підходить для виконання функцій на сайті. Тільки так вміст вашого ресурсу коректно відображатиметься, і всі віджети влізуть у сайдбар. У цій статті ви дізнаєтесь які є способи корекції розмірів бічних колонок.
Без сайдбару сайт виглядає нікудишньо. Якщо ви бажаєте якось візуально розбавити вміст сторінки, вам варто змінити шаблон Вордпрес, додавши сайдбар певного розміру. Зазвичай бічні колонки вже встановлено за замовчуванням. Але не завжди ширина сайдбару є оптимальною для того чи іншого проекту. Розберемо методи, як змінити ширину та висоту бічної частини сайту Вордпрес.
Яким має бути розмір сайдбару
Можливо, вам і не знадобиться нічого міняти. Змінити бічну колонку слід тільки в тому випадку, якщо вона виглядає криво і неприродно. По-перше, дивіться, щоб сайдбар мав меншу ширину ніж основна частина сторінки, що містить контент. Бічна колонка не є ключовою частиною сайту, тому на неї не повинно бути багато уваги - максимум вона може займати 40% від видимої частини сторінки. Зверніть увагу, що якщо у вас два сайдрбари (або кілька), їх ширина не повинна перевищувати 50% від ширини всієї сторінки. Краще використовувати тільки одну бічну колонку - так вона ефективніша.
Існує "золоте правило" дизайнерів для сайтів, де використовується лише один сайдбар. Це правило говорить, що якщо на сторінці лише одна бічна колонка, вона не повинна займати більше 38% ширини сайту. Про таку загадкову цифру говорять багато відомих веб-дизайнерів (наприклад: Джарел Ремік).
А щодо висоти – важливо, щоб сайдбар не стирчав зверху сайту. Його розмір за висотою у верхній межі має бути аналогічним до основної частини сторінки. А ось нижню межу можна змінити, щоб базова частина сайту була довша. Не потрібно намагатися впхнути в сайдбар все, що є на сайті – тільки головне. А якщо інформації реально багато, тоді зробіть дві бічні колонки, але не потрібно розтягувати sidebar до підвалу сайту.
Як змінити розмір сайдбару вручну
Тепер поговоримо про те, як самостійно змінити розмір бічних колонок і каркаса шаблону без використання будь-яких доповнень. Такий метод передбачає зміну вихідного кодусторінки. Саме в html-тегах і є параметр розміру шаблону. Врахуйте, що зміна розмірів може спричинити негативні наслідки, якщо в якості фону ви завантажили картинку спеціального розміру. Тому краще змінити параметри каркасу ще на стадії верстки сайту.
Параметри сайдбара у коді знаходяться у вигляді блоку. Щоб змінити розмір всього каркаса, і бічних колонок, у тому числі, вам знадобиться влізти в код, і поперемінно скоригувати цифрові параметри ширини і висоти кожного елемента. А саме:
- header - відповідає за розмір шапки сайту;
- bg – це основний контент, тобто та частина сторінки, на якій розміщуватимуться статті (саме в цій частині і знаходиться сайдбар);
- footer – це підвал сайту, тобто нижня частина.
Щоб дізнатися розміри певного блоку, вам необхідно натиснути на wrapper у “Перегляді коду сторінки”. Збоку в розділі CSS браузера ви побачите значення ширини елемента в пікселях. Щоб змінити розмір всього каркаса, необхідно відредагувати елемент main, а після нього внести зміни і в інші елементи. Рекомендується це робити на локальному сервері, щоб ваш сайт не "стрибав" на очах користувачів І взагалі краще таким займатися ще до запуску інтернет-проекту.
Для зміни розміру сайдбару знайдіть приблизно такий рядок
Цей рядок відповідає за параметри серединної частини сторінки, тобто за блок із контентом і за бічні колонки. Не чіпайте рядок "main" - це основна частина сайту. Вам потрібно знайти тег "mainnav" - це і є бічна колонка. Все, що вам потрібно, це в CSS змінити пункт width, що відповідає за ширину - вписати інше значення розміру. Можете зменшити або збільшити сайдбар, але не забувайте стежити за наведеними вище порадами за розмірністю, щоб сайт відображався коректним чином.
Щоб внесені зміни збереглися, їх слід проводити на сервері. Тобто ви спочатку можете протестувати коригування на локальному хостингу, але потім обов'язково скопіюйте відредагований файл style.css і занесіть його в бази даних основного сервера. Тільки тоді зміни набудуть чинності.
Плагін для зміни розміру сайдбару
Якщо ви не бажаєте пробиратися у нутрощі каскадних таблиць стилів, і шукати елементи, які необхідно відредагувати, тоді можете скористатися плагіном Visual Sidebar Editor for WordPress. Це спеціальний модуль, який призначений для генерації бічних колонок. Він є частиною глобального інструменту Visual Composer.
Плагін Visual Composer – це натуральний конструктор сторінок для Вордпресу. З ним ви зможете з нуля створити готовий шаблон. Працює модуль із шорткодами, і дуже простий у встановленні. Якщо зміна розміру сайдбару - це не єдине, що вам належить зробити, краще завантажте плагін Visual Composer, і як додаток додайте Visual Sidebar Editor. Якщо проблема лише у розмірі бічної частини сторінки, тоді модуля Visual Sidebar Editor буде достатньо.
Перевага використання плагіна для зміни сайдбару в тому, що він робить автоматично. Тобто ви показуєте, що хочете змінити по системі Drag & Drop, а модуль самостійно коригує код елемента, виходячи з ваших запитів. Якщо ви хочете випробувати свої сили в редактурі html-тегів, то плагін надасть вам і таку можливість. Крім того, у ньому є спеціальні шорткоди для внесення. додаткових функційна сайт – понад 40 розширень.
Ще один плюс використання такого плагіна для редактури сторінок – це збереження змін незалежно від версії движка. Навіть якщо ви оновили Вордпрес, шаблон не зміниться – він контролюється модулем. Тому можете переходити на більш старі версії або оновлювати WordPress – шкоди для розмірності сайдбару це не завдасть. Крім того, плагін працює зі зручним імпортом та експортом – тобто можна копіювати сайдбари з одних сайтів та переносити їх на інші. І, що найголовніше, модуль працює за зрозумілим принципом – навіть новачок його швидко освоїть.
Якщо вам сподобалася робота Visual Sidebar Editor, подумайте над встановленням повного комплекту доповнення – модуля Visual Composer. Тоді вам легко редагувати будь-який елемент на сторінках порталу.
Ви бажаєте створити повнорозмірну сторінку на WordPress?
Тоді повернемось до того, чому ми тут.
Метод 1: використання вбудованого шаблону ширини у темі WordPress
Цей метод рекомендується, якщо ваша тема WordPress вже має повнорозмірний шаблон сторінки. Якщо у вас його немає, зверніться до наступного вибору та отримайте його.
По-перше, ви повинні відредагувати сторінку або створити нову, відвідавши " Сторінки> ДодатиНова сторінка
У вікні редагування сторінки виберіть Повна ширинаяк шаблон під прапорцем атрибутів сторінки.
Після вибору моделі Повна ширинаВи повинні зареєструвати свою сторінку. Ви можете продовжити налаштування сторінки, щоб додати більше вмісту, або натисніть кнопку перегляду, щоб побачити її в дії.
Якщо у вас немає опції «Повна ширина» – «шаблон повної ширини- на екрані редагування вашої сторінки це означає, що ваша тема WordPress не має цієї сторінки.
Але не хвилюйтеся, ми покажемо вам, як легко створити повнорозмірну сторінку без зміни теми WordPress.
Метод 2: як створити шаблон сторінки з повною шириною
Цей метод вимагає від вас редагування файлів тим WordPress, які ви використовуєте, та для базового розуміння PHP, CSS та HTML.
До речі, ми також запрошуємо вас проконсультуватися з
Спочатку вам потрібно відкрити текстовий редактор, такий як "Блокнот", і вставити наступний код у порожній файл:
Цей код просто визначає ім'я файлу шаблону і просить WordPress витягти шаблон заголовка.
Тоді вам знадобиться контентна частина коду. Підключіться до вашого сайту за допомогою FTP-клієнта ( або файловий менеджеру CPanel) потім перейдіть до / Wp-зміст / теми / ваш-тематичний каталог / .
Потім ви повинні знайти файл з ім'ям " page.php». Це файл шаблону сторінки за промовчанням для вашої теми.
Скопіюйте все після функції get_header()І вставте його у файл Повний width.phpЦе ви створили на вашому комп'ютері.
Тепер вам потрібно переглянути вміст файлу "full-width.php" і видалити цей рядок коду:
Цей рядок просто відновлює бічну панель та відображає її у вашій темі WordPress. Видаляючи це, ваша тема не відображатиме бічну панель під час використання шаблону Повна ширина.
Ви можете бачити, що цей рядок з'являється кілька разів у темі WordPress. Якщо ваша тема WordPress має кілька, ви побачите кожну бічну панель, на яку посилається один раз у коді. Ви повинні вирішити, які бічні панелі хочете зберегти.
Ваш сайт завантажується повільно, відкрийте для себе
Якщо тема не відображає бічні панелі на вашій сторінці, ви можете не знайти цей код у своєму файлі.
Ось як наш код full-width.php дбає про внесення змін. Ваш код може трохи відрізнятися залежно від вашої теми.
Тоді вам потрібно завантажити файл Повний width.phpУ вашій папці теми WordPress за допомогою .
Ви успішно створили і завантажили шаблон сторінки повної ширини для своєї теми. Наступним кроком буде використання цього шаблону для створення повнорозмірної сторінки.
Перейдіть до панелі інструментів і відредагуйте або створіть нову сторінку.
На екрані редагування сторінки знайдіть прапорець атрибутів сторінки і клацніть меню, що розкривається під опцією «Модель».
Ви можете побачити свою модель. Уперед, виберіть його та збережіть або оновіть сторінку.
Тепер ви можете відвідати свій веб-сайт і ви побачите, що бічні панелі зникли, і ваша сторінка відображається як сторінка з одним стовпцем. Можливо, він ще не заповнений, але ви готові поширити його по-іншому.
Зробіть свій сайт популярним, відкривши для себе
Вам потрібно буде використовувати інструмент Inspect, щоб виявити CSS-класи, які використовуються вашою темою для визначення області вмісту.
Потім можна настроїти його ширину до 100%, використовуючи CSS. Ми використовували наступний код CSS:
.стр-шаблона повної ширини зони.content (ширина: 100%; Маржа: 0px; межа: 0px; оббивка: 0px; ) .стр-шаблон повної ширини.Вихідного (поля: 0px; )Ось як це виглядатиме двадцять сімнадцять.
Це все для цього уроку, я сподіваюся, що це дозволить вам створювати повнорозмірні сторінки.
Вищезазначені методи безкоштовні для тих, хто може собі дозволити і хоче швидко створювати макети повної чи повної ширини.
Відкрийте для себе також кілька преміальних плагінів WordPress
Ви можете використовувати інші плагіни WordPress, щоб надати сучасного вигляду та оптимізувати управління вашим блогом або веб-сайтом.
Ми пропонуємо вам кілька преміальних плагінів WordPress, які допоможуть вам це зробити.
1. Divi Builder
Divi Builder – це високоякісний конструктор сторінок, який високо цінується Елегантні теми, Хоча вона зазвичай використовується як частина теми WordPress Divi, Divi Builder також є окремим плагіном, який можна використовувати в інших темах WordPress.
Divi Builder дозволяє редагувати ваш контент, використовуючи візуальний інтерфейс на стороні інтерфейсу, а також інтерфейс на стороні сервера, хоча більшість користувачів віддають перевагу першому інтерфейсу.
По суті, замість бічних панелей все знаходиться у спливаючих вікнах і кнопках, що плавають. Він надає вам доступ до певних шаблонів 316, що розповсюджуються по різних пакетах презентацій 40, а також дозволяє зберігати власні дизайни як шаблони.
Ми пропонуємо вам відкрити
Однією з характеристик Divi завжди був контроль над стилями, які він дає вам. На трьох різних вкладках ви можете налаштувати різні параметри, включаючи адаптивні елементи керування, інтервал, що настроюється, і багато іншого.
Ви навіть можете додати користувальницький CSS, тому що його редактор CSS об'єднує базову перевіркута автозаповнення.Одним з критиків Divi Builder завжди було те, що він заснований на , Це означає, що якщо ви відключите його одного разу, у вашому контенті залишиться купа шорткодів. Хоча це трохи пригнічує, але тепер існує менше проблем із такими плагінами, як Shortcode Cleaner.
2. Будівельник
Не дивно, що Themify Builder – це пропозиція команди Themify. Він інтегрує його в багато своїх тем WordPress, щоб надати клієнтам прості варіанти налаштування. Але ви також можете купити його як окремий плагін та використовувати його з будь-якою темою WordPress.
Як і Divi Builder та WPBakery Page Builder, Themify Builder дозволяє створювати макети в інтерфейсі або бекеденді.Ще одна хороша річ – цей плагін дозволяє вам налаштовувати ваші чуйні контрольні точки (але лише на рівні всього сайту).
Відкрийте для себе створити інтернет-магазин та легко продавати свої товари в інтернеті
Цікавою особливістю Themify Builder є те, що він все ще дозволяє використовувати стандартний редактор WordPress, в той час як інші конструктори сторінок змушують вас використовувати інтерфейс Page Builder для всього.
3. Факір
Спочатку запущений у 2016, плагін WordPress Elementor є одним із наймолодших розробників цього списку. Незважаючи на пізній запуск, Elementor швидко накопичив більше активних установок 1 000 000 на WordPress.org, що робить його одним із найпопулярніших конструкторів WordPress.
Якщо у вас є пропозиції чи зауваження, залиште їх у нашому розділі
Часто буває так, що тема, що сподобалася, має вузьку область для записів і в її налаштуваннях не передбачена зміна ширини. У цьому випадку її можна збільшити, з мінімальним знанням HTMLі CSS. Наприклад, використовуємо популярну, безкоштовну тему Patagonia. Розширити тему можна за допомогою чудового плагіна Firefox— Firebug. Спочатку його треба встановити, завантаживши звідси. Потім вмикаємо плагін, як показано на малюнку - Вкладка Інструменти — Веб розробка — Firebug — відкрити Firebug:
Після цього в нижній частині екрана необхідно, наводячи курсор і натискаючи мишкою, вибирати різні елементи. При цьому у правій частині будуть виводиться стилі CSS
, а в області сторінки, буде підсвічуватись та чи інша область - основна, sidebar, header. Нас же зараз цікавить основна область, на яку ми потрапимо, коли вийдемо на тег Наприклад, збільшимо ширинуосновної області з 550 пікселів, до 620-ти. Для цього треба внести зміни до рядка width: 550pxфайлу style.css. Якщо тема вже встановлена, можна редагувати цей файл, прямо з адмінки, якщо ні, треба розпакувати архів з темою і внести зміни до файлу за допомогою редактора. У нашому випадку, тема встановлена, тому заходимо в адмінку— Зовнішній вигляд — Редактор- Відкриваємо файл style.css, знаходимо пошуком рядок width: 550px і змінюємо значення ширини 550px на 620px. Тиснемо Оновити файл. Переходимо на сайт і бачимо, що область постів розширилася, але подекуди «наїхала» на праву колонку. У цьому випадку нам треба пропорційно звузити цю область. Для цього також скористаємося плагіном Firebug, Як і в попередньому випадку. Знаходимо тег Проробляємо тугіше процедуру з редагуванням style.css, що і в попередньому випадку з основною областю, тільки тепер редагуємо рядок margin: 0 0 0 580px;Змінюємо у ній значення відступу з 580px до 630px. Ось тепер усе гаразд. Область записів стала ширшою і не наїжджає на область sidebar. Також буває, що стилі прописані у файлі style.css, а й у файлі screen.css.
