Тоді вам потрібно завантажити файл Повний 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 швидко накопичив більше активних установок 1000000 на WordPress.org, що робить його одним з найпопулярніших конструкторів WordPress.

Якщо у вас є пропозиції чи зауваження, залиште їх у нашому розділі

Часто при підборі шаблону Wordpress виникає проблема – недостатня ширина блоків. У багатьох відразу виникає бажання змінити ширину шаблону. Для тих, хто добре розуміється на html або php це не створить особливих проблем. Але для того, щоб докладно написати про те, як вносити зміни до розмірів шаблону wordpress для непідготовленої людини, знадобиться ціла брошура.

Найпростіше – замовити, але той, хто намагається зробити це самостійно, здобуває знання. Надалі йому не доведеться звертатися до фахівців з кожної дрібниці. Знаючи "основу" зробити це цілком можливо. Перед початком будь-яких змін обов'язково зробіть запасну копію всіх сторінок вашого ресурсу. У разі неточної роботи ви без проблем відновите початковий вид сайту.

Шаблонів Wordpress неймовірна безліч, всі вони різні і кожен змінюється по-своєму. Але такі основні блоки як: ширина основної сторінки, шапка, ліва та права колонка, підвал мають усі. Для роботи нам знадобиться:

Коли все необхідне завантажено, встановлено та готове до роботи, відкриваємо вибраний шаблон Mozilla Firefoxі запускаємо Firebug, натиснувши на значок жука.

Панель плагіна

Внизу відкривається панель плагіна, в якій ми працюватимемо. Всі зміни, що вносяться, відразу будуть відображатися у верхній частині монітора. На вкладці праворуч ми бачимо CSS стильобирається елемента, зліва html кодсторінки. Щоб збільшити або зменшити ширину шаблону, насамперед ми повинні дізнатися про поточний розмір основи. Натискаємо на значок курсору нашого плагіна.

Елементи на сторінці будуть підсвічуватись різними кольорами, і ви зможете, виділяючи кожен елемент сторінки, детально ознайомитись зі структурою вашого сайту. Отримавши назву, дізнаєтесь точні розміри. Після того, як поточна ширина буде встановлена, лівою кнопкою миші натискаємо на це значення. Методом проб створюємо найбільш відповідну ширину і тестуємо її відображення.

Ви можете сміливо експериментувати з будь-якими елементами та значеннями. Поточні зміни не можуть впливати на вашу сторінку на сервері, вони активні лише у вікні плагіна (поточному кеші Мозили). При оновленні всі параметри скидаються.

Правим style.css

Тепер залишилося зберегти ці зміни для wordpress шаблон. Зазвичай ширина шаблону прописується у style.css. Входимо до адміністративної панелі веб-сайту → зовнішній вигляд→ редактор → style.css → рядок 79, змінюємо значення width. Зберігаємо.

WordPress – це фантастичний інструмент для ведення блогів, але, на жаль, не ідеальний. Навіть після великої кількості оновлень і сотень нових можливостей для зручної роботи все ще потрібні деякі базові поліпшення інтерфейсу користувача.

Останнім часом я писав багато довгих статей-списків і в цьому процесі виявив проблему з вбудованим візуальним редактором записів WordPress, Про яку раніше не знав, або раніше вона мені не особливо заважала.

У цьому короткому уроці я покажу вам, як змінити ширину основної колонки з текстом візуальний редакторзаписів WordPress.

Проблема

При створенні великих записів (в основному з картинками) мені доводилося часто зберігати та робити попередній перегляд посту, щоб переконатися, що список правильно відформатовано. Крім того, часто мені доводилося писати текст прямо на моєму зображенні, тому що розмір вікна редактора майже в півтора рази більший за будь-яке моє зображення (а також блок основного контенту на моєму сайті):

Рішення

Рішення просте, але вам потрібно знати, як втілити його в життя. Для початку вам потрібно дізнатися про поточну ширину блоку контенту на вашому сайті. У моєму випадку ширина блоку мого блогу – 650 пікселів.

Потім вам потрібно буде відкрити файл functions.phpі додати внизу файлу наступний код:

Function fb_change_mce_buttons($initArray) ( $initArray["width"] = "650px"; return $initArray; ) add_filter("tiny_mce_before_init", "fb_change_mce_buttons");

Результат

В результаті ви побачите редактор запису, що повторює ширину блоку контенту на самому сайті. Таким чином, ви будете впевнені, що коли ви створюєте запис через консоль адміністратора, вона виглядатиме максимально наближено до кінцевого результату.

Пам'ятайте, що деякі роздільні здатності екрана змінять ваші налаштування і, наприклад, показуватимуть лише одну колонку - це залежатиме від ширини вашого контенту.

Ви повинні вміти змінювати розмір шаблону, якщо хочете створити добрий сайт. За замовчуванням багато тем пропонують незручні розміри каркаса шаблону. Вузькі теми – це так само погано, як занадто широкі. У вас має бути "золота середина", яка якраз підходить для виконання функцій на сайті. Тільки так вміст вашого ресурсу коректно відображатиметься, і всі віджети влізуть у сайдбар. У цій статті ви дізнаєтеся, які є способи корекції розмірів бічних колонок.

Без сайдбару сайт виглядає нікудишньо. Якщо ви хочете якось візуально розбавити вміст сторінки, вам варто змінити шаблон Вордпрес, додавши сайдбар певного розміру. Зазвичай бічні колонки вже встановлено за замовчуванням. Але не завжди ширина сайдбару є оптимальною для того чи іншого проекту. Розберемо методи, як змінити ширину та висоту бічної частини сайту Вордпрес.

Яким має бути розмір сайдбару

Можливо, вам і не знадобиться нічого змінювати. Змінити бічну колонку слід тільки в тому випадку, якщо вона виглядає криво і неприродно. По-перше, дивіться, щоб сайдбар мав меншу ширину, ніж основна частина сторінки, яка містить контент. Бічна колонка не є ключовою частиною сайту, тому на неї не повинно бути багато уваги - максимум вона може займати 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. Тоді вам легко редагувати будь-який елемент на сторінках порталу.