Урок 4. Редактируем тему «WordPress»

Здравствуйте, уважаемые читатели моего блога!

В этом уроке я покажу вам, как можно отредактировать внешний вид темы, исправить некоторые недостатки и убрать ненужные элементы.

О темах и шаблонах можно разговаривать очень долго. Это целое искусство, которым занимаются веб дизайнеры.

Мы же с вами отредактируем лишь основные элементы. При желании можно добиться более индивидуального оформления нашего блога, но сейчас моя основная задача — познакомить вас с основами правки шаблона.

Редактирование темы WordPress

Для оформления своего блога я выбрал тему «mountainlandscape», и на ее основе покажу вам, как можно ее редактировать.

Если вы тоже хотите использовать эту тему, то можете скачать её здесь. Как устанавливать и активировать темы, я показывал в прошлом уроке, можете посмотреть его здесь. И так, давайте посмотрим на нашу тему:

За каждую часть темы отвечают отдельные файлы, которые расположены в папке с темой:

Я приготовил схему, на которой показал, какие файлы отвечают за оформление (расположение, вывод) элементов:

Обращаю ваше внимание, что за вывод контента, в зависимости от темы, могут отвечать несколько файлов. В нашей теме — это index.php, single.php и page.php.

Изучите эту схему, так как в дальнейшем мы неоднократно будем возвращаться к этим файлам.

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

— изменить изображение шапки и подвала;

— переместить меню с названием страниц в левую верхнюю часть шапки;

— изменить надпись «Edit» на надпись «Правка»;

— заменить надписи в подвале на свои.

Изменяем изображения шапки и подвала:

В данной теме шапка – это рисунок формата jpg, вот он:

На этот рисунок наложено еще одно изображение (маска), которое представляет из себя простую заливку, прозрачную посередине (файл mask_head.png). Чтобы ее увидеть, я создал слой черного цвета и на него наложил наше изображение (маску). Сделать это можно в редакторе «Adobe Photoshop».

Здесь же можно расширить прозрачную область (например, вручную при помощи инструмента «ластик») и вставить заголовок блога.

Все эти изображения расположены в папке «images» нашей темы:

Для того чтобы изменить изображение шапки, открываем его (файл bg.jpeg) при помощи «Adobe Photoshop». Можно использовать и другой редактор, позволяющий работать со слоями. Либо использовать свое изображение, только размер должен быть такой же.

Накладываем на него изображение, которое вы подобрали. Это будет отдельный слой. Затем подгоняем его так, чтобы оно полностью закрыло первый слой (наше первоначальное изображение).

Далее сохраняем полученное изображение в таком же формате и под таким же именем, что и первоначальное (bg.jpeg), в туже папку.

Таким образом, можно заменить все графические элементы (иконки, линии и т.п.) нашей темы.

Если вы еще не научились работать с программой «Adobe Photoshop», то советую вам это сделать. Программа очень полезная. Скачать ее можно бесплатно с сайта rutracker.org.

Перемещаем меню с названием страниц:

За вывод этого меню отвечает файл «header.php». Переходим в административную панель. Пункт «Дизайн», подпункт «Редактор», и в правой части находим и открываем файл «header.php».

                         

Находим в нем следующий код:

Здесь сведения о положении нашего меню в шапке отсутствуют. Зато есть ссылка на стиль "#header ul". То есть положение этого меню прописано в файле «style.css». Открываем его в редакторе:

Находим описание нашего меню «#header ul»:

И изменяем значения «top» (отступ от верней части шапки) и «right» (отступ от правого края) на следующие:

Вместо «right» я указал отступ от левого края («left»). Все, наше меню теперь в левой верхней части шапки:

Изменяем надпись «Edit» на «Правка»:

Открываем в редакторе файл «index.php» и находим следующие коды:

Меняем надпись «Edit» на надпись «Правка». Обратите внимание на то, что при наведении курсора мыши на заголовок заметки нашего поста (на главной странице нашего блога), появляется всплывающее меню с текстом «Permanent Link to Привет мир». Его меняем здесь же, чуть выше. Получится так:

Все, наши надписи изменены.

Заменяем надписи в «подвале»:

 

За подвал отвечает файл «footer.php», открываем его в редакторе.

Удаляем все ненужные коды. Вместо них можете написать свой текст.

Как вы заметили, текст у меня написан с применением HTML кода (зеленый цвет). Вы можете вручную написать этот код, а можете делать как я (см. видеоурок). Вот так выглядит наша тема после редактирования:

На этом редактирование темы мы закончили. Если у нас обнаружатся еще какие-либо недочеты, мы их исправим в процессе создания нашего блога.

В следующем уроке мы перейдем к установке и настройке плагинов.

Видеоурок по редактированию темы «Wordpress»:

Если Вы хотите создать свой блог, но не знаете как, то рекомендую Вам скачать мой бесплатный видеокурс «Создание блога на WordPress». Подробности в статье «Как создать блог?».

С уважением, Александр Бобрин

Поделись с друзьями: