Яка структура шаблону на wordpress і як її редагувати

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

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

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

Звичайно можна, але навіщо, коли працювати на локальному сервері легше і швидше.

Структура сторінки wordpress шаблону

Для редагування я вирішив використовувати стандартну тему вордпресс, яка встановлюється автоматично з двигуном.

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

Для того, щоб було зрозуміло які ми будемо редагувати файли, вам треба познайомитися з приблизною структурою сторінок wordpress.

Як видно з малюнка, кожна сторінка умовно розділяється на окремі блоки, де кожен виконує певну функцію. Давайте я вам коротко розкажу, за що конкретно відповідає кожен документ блоку.

Header.php - цей файл відповідальний за верхню частину сторінки блогу. У ньому знаходяться логотип і назву.

Sidebar.php - даний файл формує сайдбар. У нашій темі він розташований праворуч. Тут розташовуються рубрики, свіжі записи, архів, мітки та інші корисні віджети.

Index.php - це один з головних файлів, він виводить інформацію на головній сторінці блогу. Не плутайте з файлом single.php.

Single.php - найголовніший файл wordpress, так як тут виводиться інформація всіх записів блогу.

Archive.php - цей файлик відповідає за виведення архіву на блозі, (записів в архіві).

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

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

Якщо повернутися до нашої теми wordpress і подивитися на неї очима движка вордпресс, вона буде являти собою приблизно такий вигляд.

Давайте зі стандартною темою wordpress зробимо просте редагування малюнка шапки, змінимо положення заголовка, короткого опису і приберемо посилання виробника з футера (підвалу) сторінки.

- змінимо малюнок шапки теми;
- змінимо місцями назву і опис блогу;
- прибираючи посилання вордпресс в підвалі теми;

Міняємо шапку блога

Шапка на блозі виводиться за допомогою картинки path.jpg. яка розташована в папці images редагованої теми wordpress.

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

Заходимо в папку images теми і знаходимо картинку, яка стоїть в шапці блогу path.jpg

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

В «Adobe Photoshop» з даної картинкою можете робити все що завгодно вашої фантазії (намалювати логотип. Написати текст, додати різні ефекти).

Якщо хочете, можна знайти будь-яку іншу картинку і в програмі підігнати розмір під оригінальну. Не забудьте зберегти нове зображення під тим же ім'ям path.jpg.

Редагуємо назву Title і опис description

Ми бачимо, що назва і опис блогу, яке ви пишіть в «Параметрах» - «Загальні» консолі wordpress, розташовані в такий спосіб.

Тема розташований зліва, а короткий опис справа.

Як видно з скріншоту, що параметр стилів id = "site-title" відповідає за розташування заголовка, а параметр id = "site-description" за висновок короткого опису. Для того, щоб налаштувати ці параметри на свій розсуд переходимо в style.css.

Тут міняємо положення значення «left» на «right» і виставляємо відступ від правого краю «250 px».

Тут міняємо значення «right» на «left».

Перезавантажуємо сторінку і дивимося отриманий результат. Як видно заголовок і короткий опис теми помінялися місцями.

Прибираємо посилання wordpress в підвалі блогу

Для цього переходимо в footer.php і знаходимо наступний код:

Видаляємо виділений код і вставляємо туди свій текст у вигляді посилання або картинку.

Можна подивитися остаточний результат редагованої теми wordpress.

На сьогодні у мене все. Якщо у вас є питання по редагуванню або зміни теми, ви можете задати їх, і я постараюся відповісти.

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

З повагою, Максим Войтик

Підкажіть будь ласка, куди звернутися з такою проблемою:

Вибрав собі шаблон StarStruck, у якого шапка сторінки сайту візуально розширюється по горизонталі до країв екрану за рахунок позиціонування з помощю style.css в тезі body фонової картинки методами: top left repeat-x. Весь інший фон набуває кольору, присвоюється відповідним атрибутом. Підсумок: атрибут вибору картинки фону зайнятий прикрасою шапки, решті фон має просто колір, але не оформлений зображенням. Хотілося б: замість кольору замостити весь фон будь-якої картинкою.

Що намагався зробити: з помощю фокуса CSS3 застосувати в стилях МультіФон таким способом -

background: orange url (images / bg_header.gif) top left repeat-x, url (images / background_wood.jpg);

Метод не спрацьовує, навіть якщо я міняю в описі background місцями посилання на зображення і граю з описом атрибутів, в результаті одне з двох виходить, або моститься весь фон і пропадають аолоскі по краях шапки, або пропадають всі фонові зображення вообщеа фон стає просто білий. Чи може проблема полягатиме в тому, що тестую сайт я не Денвері? Замучився і спробував вибрати інший шаблон (fluidyellow), так напоровся там на точно таку ж реалізацію шапки. Як бути, врятуйте ?!

Привіт Дмитро! Бачу що у тебе відмінні знання в css, раджу тобі звернутися до фрілансерам вони допоможуть за 5 секунд, тільки доведеться трошки заплатити. Раджу використовувати сервіс free-lance.ru сам ним користуюся.

Доброго дня. Я не те що вчуся а просто своїми силами змушена виправляти помилки не грамотного айтішника.

У підвалі він зробив граматичні помилки.

Я все це знайшла в настройках, але не зрозумію як змінити.

Я виправляю, обновляю сторінку як ви пишете і все одно все залишається як було.

Може потрібно десь щось змінити права, або потрібна взагалі спеціальна програма.

Можливо у мене занадто дурний питання, але прошу допомогти

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

Максим, добрий день!

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

Картинки (2 шт.) Завантажила в розділі налаштування шаблону-зображення заголовка, але після поновлення на сайті показується тільки одне зображення.

Якщо принципово, то саме основне меню зроблено з статичних сторінок.

Дякуємо! і ще не підкажете, якщо у мене сайт для англомовної публіки, можна як то його повністю перевести. тобто слова «теги, рубрика і тд»

Привіт, додав пошук в верхнє горизонтальне меню. як тепер відредагувати його положення?

використовую такий код

add_filter ( 'wp_nav_menu_items', 'add_search_box', 10, 2);

function add_search_box ($ items, $ args)

$ Items. = ''. get_search_form (false). '';