Як розширити сторінку в wordpress. Зміна ширини теми WordPress

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

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

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

Веб - браузер Mozilla Firefox.
Плагін Firebug встановлений на Firefox.

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

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

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

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

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

правимо style.css

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

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

Для чого може знадобитися поміняти розмір шаблону.

Розмір шаблону ви можете захотіти змінити як на самому початку, як тільки встановили, так і після того як написали ряд статей і у вас почали з'являтися перші десятки відвідувачів. Наприклад мені знадобилося розширити шаблон після того як я захотів спробувати заробити перші пару центів на рекламі зі своєї праці - блогу. Для цих цілей була обрана система банерної реклами від Google- AdSense. Але щоб заробити хоч нещасні два центи треба враховувати два параметри:

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

тобто нам треба поєднати перший і другий пункт, а саме зробити так щоб банера від Google або Яндекс поміщалися в виділені для цього місця, лівий сайдбар і в статтях. Оскільки мій шаблон був занадто вузьким для цих цілей, а дрібні банера вішати не має сенсу, тому що ніхто клацати на них не, то залишається тільки одне - розтягнути бокове меню і розділ статей.

Як збільшити шаблон по горизонталі частина 1, розуміємо цифри

Щоб зрозуміти на скільки нам потрібно збільшити ширину того чи іншого елемента нам треба не прикинути на погляд «вистачить сантиметр туди, і пів сантиметра туди», а дізнатися ці цифри точно, в пікселях. У цьому нам допоможе майже будь-який браузер, наприклад:

Safari
FireFox
Google chrome

Особисто я буду показувати на прикладі Safari, а ви на будь-якому зручному для вас браузері. Відмінності повинні бути тільки в одній кнопці.

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

Для зміни ширини лівого меню.

В цьому випадку ви можете поміняти як пікселі, як ми робили це в пункті 3-5, так і процентне співвідношення на сторінці. Для цього досить поміняти замість пікселів параметр

1	width: 31.8%;

Ці значення означають скільки відсотків ширини можна займати того чи іншого елементу. Головне щоб в сумі sidebar і стаття займали 100%, а не більше, інакше у вас все попливе по сторінці.

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

Як збільшити шаблон по горизонталі частина 2, міняємо ширину

Після того як ми зрозуміли цифри, і записали їх десь на листочку давай тепер поміняємо їх для всіх, а не тільки для себе. Для цього:

Зайдіть по FTP на сайт
Знайдіть і скопіюйте до себе на комп'ютер файл / wp-content / themes / Ваша тема / style.css
Зробіть резервну копію цього файлу, тобто скопіюйте його до себе в папку документи. Щоб на комп'ютері було дві копії файлу, один над яким ми будемо працювати, другий який ми не будемо чіпати. Другий служить на випадок якщо ми щось змінимо не так і забудемо що.
Відкривайте файл в зручному редакторі. Тепер перед нами стоїть досить просте завдання поміняти, старі значення на нові. Існує два способи, перший легкий другий важкий. Перший - пошуком знаходимо старе значення і пишемо замість нього нове. Другий спосіб - шукаємо назву стилів, всередині стилів шукаємо ширину і міняємо значення.

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

Перший, відповідає за ширину всього сайту:

1 2 3 4 5 6 7 8

#page (min- height: 100px; clear: both; width: 96%; padding: 0; padding- top: 24px; max- width: 980px; overflow: hidden;

#page (min-height: 100px; clear: both; width: 96%; padding: 0; padding-top: 24px; max-width: 980px; overflow: hidden;

Другий за ширину двох елементів, списку статей, і лівого меню:

1 2 3 4 5 6 7 8 9 10 11

. main- container (width: 980px; margin: 0 auto; overflow: hidden; padding: 0; background: #fff; position: relative; - webkit- box- shadow: 0px 0px 10px rgba (50, 50, 50, 0.17) ; - moz- box- shadow: 0px 0px 10px rgba (50, 50, 50, 0.17); box- shadow: 0px 0px 10px rgba (50, 50, 50, 0.17);)

Main-container (width: 980px; margin: 0 auto; overflow: hidden; padding: 0; background: #fff; position: relative; -webkit-box-shadow: 0px 0px 10px rgba (50, 50, 50, 0.17) ; -moz-box-shadow: 0px 0px 10px rgba (50, 50, 50, 0.17); box-shadow: 0px 0px 10px rgba (50, 50, 50, 0.17);)

Все що нам залишилося це поміняти значення 980 на 1080 і завантажити назад.

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

Часто буває так, що вподобана тема має вузьку область для записів і в її настройках не передбачено зміну ширини. В цьому випадку, її можна збільшити, з мінімальним знанням HTML і CSS . Для прикладу, використовуємо популярну, безкоштовну тему Patagonia. Розширити тему можна за допомогою чудового плагіна Firefox— Firebug. Спочатку його треба встановити, скачавши звідси. потім включаємо плагін, як показано на малюнку - вкладка Інструменти — Веб розробка — Firebug — відкрити Firebug:

Після цього в нижній частині екрана, необхідно, наводячи курсор і клікаючи мишкою, вибирати різні елементи. При цьому в правій частині, будуть виводиться стилі CSS, А в області сторінки, буде підсвічуватися та чи інша область - основна, sidebar, header. Нас же зараз цікавить основна область, на яку ми потрапимо, коли «вийдемо» на тег

. У правій частині буде виведений фрагмент файлу style.css. І тут видно, що ширина основної області дорівнює 580 пікселям. А це мало для наших потреб.

Наприклад, збільшимо ширину основний області з 550 пікселів, до 620-ти. Для цього треба внести зміни в рядок width: 550px файлу style.css. Якщо тема вже встановлена, можна редагувати цей файл, прямо з адмінки, якщо немає, то треба розпакувати архів з темою і внести зміни в файл за допомогою редактора. У нашому випадку, тема встановлена, тому заходимо в адмінку— Зовнішній вигляд — редактор - відкриваємо файл style.css, знаходимо пошуком рядок width: 550px і міняємо значення ширини 550px на 620px. тиснемо оновити файл.

Переходимо на сайт і бачимо, що область постів розширилася, але місцями «наїхала» на праву колонку. В цьому випадку, нам треба пропорційно звузити цю область. Для цього також скористаємося плагіном Firebug, Як і в попередньому випадку. знаходимо тег

\u003e. У файлі style.css, Бачимо, що ширина sidebar задана неявно за допомогою властивості width, А за допомогою margin: 0 0 0 580px;

Проробляємо тугіше процедуру з редагуванням style.css, що і в попередньому випадку з основною областю, тільки тепер редагуємо рядок margin: 0 0 0 580px;Міняємо в ній значення відступу з 580px до 630px. Ось тепер все нормально. Область записів стала ширше і не наїжджає на область sidebar. Також буває, що стилі прописані не тільки в файлі style.css, але і в файлі screen.css.

Ви хочете створити повнорозмірну сторінку на WordPress?
Тоді повернемося до того, чому ми тут.

Метод 1: використання вбудованого шаблону ширини в темі WordPress
Цей метод рекомендується, якщо ваша тема WordPress вже забезпечена повнорозмірним шаблоном сторінки. Якщо у вас його немає, зверніться до наступного вибору і отримаєте його.
По-перше, ви повинні відредагувати сторінку або створити нову, відвідавши " Сторінки\u003e Додати Нова сторінка
У вікні редагування сторінки виберіть повна ширина як шаблон під прапорцем атрибутів сторінки.
Після вибору моделі повна ширинаВи повинні зареєструвати свою сторінку. Ви можете продовжити настройку сторінки, щоб додати більше контенту, або натисніть кнопку попереднього перегляду, Щоб побачити її в дії.
Якщо у вас немає опції «Повна ширина» - «шаблон повної ширини» - на екрані редагування вашої сторінки це означає, що ваша тема 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.
Якщо у вас є пропозиції або зауваження, залиште їх у нашому розділі