1. Для чого може знадобитися поміняти розмір шаблону.
2. Як збільшити шаблон по горизонталі частина 1, розуміємо цифри
3. Як збільшити шаблон по горизонталі частина 2, міняємо ширину
4. про автора

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

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

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

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

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

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

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

• Safari
• FireFox
• Google chrome

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

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

1. Клацають правою кнопкою мишки на шапці сайту і вибираємо «Перевірити об'єкт»
2. Внизу нам відкривається програмний код сторінки. Не бійтеся, нам буде все зрозуміло. Шукаємо мало не самий верхній стиль, який визначає обсяг шаблону. У мене цей клас називається, main-container, а строчка, яку треба знайти відповідно 1 <div class = "main-container"> </ div>

   <Div class = "main-container"> </ div>

3. З ліва браузер нам показує що ширина 980 пікселів. Давайте змінимо це значення скажімо на 1180 пікселів. Просто видаліть значення 980 і напишіть 1080 як звичайний текст. Після того як ви внесете зміни вони відразу набудуть чинності. На даному етапі не бійтеся помилятися, тому що ці зміни працюють тільки до перезавантаження Мандрівниця і видно тільки вам. Якщо ви натиснете «оновити сторінку» то все повернеться як і було.
4. Після збільшення самі кордону блогу стали більше, але весь контент кучкуються по центру. Щоб це виправити давайте поміняємо ще один стиль який тримає кордону і не дає «розплився» двом елементам, списку статей та лівому меню, по своїх місцях. Знаходимо рядок 1 <div id = "page" class = "home-page"> </ div>

   <Div id = "page" class = "home-page"> </ div>

   і натискаємо на неї

5. Як і в першому випадку міняємо значення 980 на 1080 пікселів
6. У моєму випадку після цього зміни все стало на свої місця. Межі самі розширилися. Але якщо у вас не так, або ви хочете щось ще зменшити то нам треба буде правити рядки:

1 <div class = "article"> </ div>

<Div class = "article"> </ div>

Для зміни ширини розділу зі статтями або розміру власне самої статті.

1 <aside class = "sidebar c-4-12"> </ div>

<Aside class = "sidebar c-4-12"> </ div>

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

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

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

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

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

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

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

Особисто я для себе вибрав перший, найлегший спосіб, оскільки він дозволяє внести зміни буквально за пару секунд. Отже, шукаємо значення 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 і завантажити назад.

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

про автора

Andrey

Адміністратор блогу. Спеціаліст з маркетингу, розвитку бізнесу, здорового способу життя. Власник і директор двох компаній в Україні. Сертифікований фахівець Apple. Захоплення: бізнес, спорт, дайвінг.