Главная Часть 1. Создание блога Глава 3. Дизайн Урок 12. Настройка и редактирование темы WordPress (в картинках)

Урок 12. Настройка и редактирование темы WordPress (в картинках)

Редактирование wordpress шаблона

Всем привет!

В этом уроке мы будет редактировать тему. Урок этот будет довольно большой, уж точно больше всех предыдущих, однако очень интересный. Я буду настраивать и редактировать тему, выбранную для своего будущего блога. И так, начнем.

Прежде всего нам надо избавиться от всего лишнего на блоге.

Настройка темы WordPress. Шаг 1:

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

Настройка и редактирование тем WordPress

  1. Убираем заголовок «SlyArt» и описание сайта, т.к. название мы сделаем в виде картинки.
  2. В сайдбаре блоки мы будем выводить потом вручную, какие захотим, такие и выведем. А сейчас, нам они только мешают, поэтому убираем и их.
  3. В подвале сайта тоже много лишнего. Во-первых, год на дворе давно не 2008, во-вторых, под копирайтом стоят внешние ссылки, которые необходимо убрать.
  4. Убираем этот квадратик, без понятия зачем разработчики его туда налепили, но он точно лишний. 🙂
  5. И избавляемся от формы поиска, его мы сделаем отдельно в сайдбаре, а шапку лучше сделаем подлиннее за его счет.

Настройка темы WordPress. Шаг 2:

Для начала убираем заголовок. Вспоминайте из предыдущего урока, какой файл отвечает за шапку сайта? Правильно! «header.php», идем в папку с темой.

Папка с темой расположена в папке «themes», которая в свою очередь расположена в «Z:\home\localhost\www\blog\wp-content\themes\modxblog» Где «Z» - название локального сервера, «blog» - папка, в которую лично я установил WordPress, и «modxblog» - название моей темы.

Находим и открываем файл «header.php». Лично я люблю редактировать веб файлы с помощью программы «Adobe Dreamweaver», Вы же можете скачать любые другие редакторы, благо их не мало, среди популярных - названная выше программа, а так же: «Notepad++» и «Akelpad».

Как узнать новичку, какой тег php языка отвечает за вывод заголовка? Сейчас покажу. Заходите на блог, выделяете заголовок и копируете его.

Заголовок сайта

Теперь нажимаем на сайте правой кнопкой мыши, и находим «Исходный код страницы». Открывается окно с кодом блога. Нажимаем комбинацию «ctrl+g» и открывается поиск, в него и вставляем заголовок блога. В моем случае это «SlyArt».

Настройка и редактирование тем WordPress

Как видим, за вывод заголовка отвечает идентификатор «header». Открываем «header.php» и ищем там данный идентификатор.

Настройка и редактирование тем WordPress

Удаляем выделенные строки. Теперь сохраняем файл. Переходим на блог и нажимаем «обновить». Как видим, заголовок исчез.

Настройка и редактирование тем WordPress

Теперь надо удалить строчку «Блог о программировании». Для этого переходим в админку «Параметры» -> «Общие».

Настройка и редактирование тем WordPress

И удаляем эту строчку. И нажимаем «Сохранить изменения» Все! Теперь удалим поиск и подписка на RSS которые находятся слева от названия. Снова открываем «header.php» и находим строчку «

» и удаляем строчку, выделенную на картинке:

Осталось удалить поиск. Снова открываем файл «header.php», и находим «div class="search">» и удаляем строку, которая выделена на картинке.

Настройка и редактирование тем WordPress

Все! С шапкой разобрались. Теперь удалим тот самый квадратик, что вылезает перед картинкой постов.

Настройка и редактирование тем WordPress

Вспоминайте, за содержимое главной страницы отвечает файл «index.php». Открываем его, находим и удаляем строчку, что выделена на картинке:

Настройка и редактирование тем WordPress

Вот и все! Наш результат:

Настройка и редактирование тем WordPress

Как видите, квадратик исчез! Переходим к блокам. Все манипуляции с ними — в разделе Виджетов. Заходим в админку «Внешний вид» -> «Виджеты». Как видите, у меня 3 сайдбара:

Настройка и редактирование тем WordPress

Сейчас я Вам наглядно на сайте покажу, какой сайдбар и где находится.

Настройка и редактирование тем WordPress

  1. Sidebar_top
  2. Sidebar_left
  3. Sidebar_right

Теперь настроим поиск по сайту. Поставим его в «SIDEBAR_TOP», а в другие блоки просто перетащим виджет «Тест». Результат у Вас должен быть таким:

Настройка и редактирование тем WordPress

Заходим на блог и обновляем страницу. Вот, как теперь выглядит наш сайдбар:

Настройка и редактирование тем WordPress

Осталось отредактировать подвал сайта. Его выводит файл «footer.php». Находим строчку как на картинке:

Настройка и редактирование тем WordPress

  1. Пишем нынешний год
  2. Удаляем эту строку

Сохраняем файл и видим, что ссылки удалились, и год теперь стоит какой и должен стоять.

Мы удалили все лишнее из темы, теперь переходим к следующему пункту:

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

Начинаем редактирование темы. Сперва нарисуем новую шапку для блога. Я буду пользоваться программой Adobe Photoshop.

Переходим в папку с темой, открываем папку «images» и находим в ней картинку «header-bg.png». Нажимаем правой кнопкой мыши и «Открыть с помощью фотошопа». Кто не умеет пользоваться программой - в интернете достаточное количество курсов по ней. В принципе картинку, которую я сделаю сейчас, может сделать любой новичок.  Вот какая шапка у меня получилась:

Настройка и редактирование тем WordPress

Как видите - ничего сложного. Для редактирования подвала сайта открываем картинку «footer.png». Ее так же редактируем с помощью фотошопа. Вот, что у меня вышло:

Настройка и редактирование тем WordPress

Для редактирования цвета кнопок страниц сайта, при наведении на них, открываем файл «menu-hover.png» и закрашиваем нужным цветом.

Чтобы изменить цвет сайдбара, редактируем файл «side-h2-bg.png»

Теперь посмотрим на сайт целиком.

Настройка и редактирование тем WordPress

Как видите, фон серый, а шапка и футер белые. Сейчас расскажу, как изменить цвет фона на белый.

Для этого откройте картинку «body-bg.gif» и просто перекрасьте ее в тот цвет, который хотите видеть в качестве фона сайта.

Финальный результат:

Настройка и редактирование тем WordPress

Вот и подошел к концу наш урок. Теперь Вы научились редактировать и настраивать шаблоны WordPress. Теперь Вы знаете, что у каждой темы картинок много, и все находятся в папке «images». Изменив эти картинки, можно до неузнаваемости изменить вид блога. А уж более глубокие настройки темы wordpress, такие как смена цвета букв, изменение расположения и прочее зависят от Вашего знания html, css, php. Это языки программирования, базовую часть которых мы разберем. Зная базу, можно изменить 70-80% сайта. А зная эти языки в совершенстве, можно манипулировать сайтом на все 100 !

Но не стоит пока засорять пока мозги этой информацией, когда придет время, мы все это разберем. А теперь можно и отдохнуть 🙂

До новых встреч!

Полезные статьи Вам на почту!

Нас более 700 человек!

Комментарии

Михаил
0

Спасибо за блог, много и трудно, но полезно!

29.03.2013
Sly
0

Успехов Вам в освоении материала 🙂

29.03.2013
Юрий
0

Хороший материал, но я так и не смог найти, где же моя шапка сайта редактируется - у меня не WP, а PHP-nuke, в файлах header.php, index.php я так и не понял, где подключается шапка, каким файлом, где редактировать...

07.11.2013
Sly
0

Вообще статья разбирается именно с учетом WP. Но судя по файлам, которые Вы назвали выше, редактируется шапка именно в файле header.php. Вообще на любом движке, где бы Вы не встретили слово header, знайте, что речь идет о шапке.

07.11.2013
Игорь
0

Если у вас не движок не WP, то это отдельная тема для разговора. Хотя, в целом принцип работы у всех похожий, но в каждом движке есть свои нюансы. Освоить PHP-nuke по урокам для WP будет весьма не просто.

23.12.2015
Руслан
0

Доброе утро! Скажите пожалуйста. Как зайти в папку «images», чтобы сделать картинку заголовка. Если не устанавливал Denwer. С уважением, Руслан.

18.05.2014
Sly
0

Доброе! Как я уже написал Вам в предыдущем Вашем комментарии - Denwer, это всего лишь хостинг. Поэтому он не влияет ни на файлы, ни на что-либо другое. Папка images находится у всех по такому пути:
wp-content/themes/название_вашей_темы/images.
Единственное, в некоторых темах папка с картинками может называться не images, а, к примеру, img или pic. Это в редких случаях, но стоит принять ко вниманию.

18.05.2014
Лёля
0

Описание удалилось, а название нет

21.07.2014
Sly
0

В смысле?

21.07.2014
Татьяна
0

Добрый день! Помогите пожалуйста разобраться: пытаюсь полностью удалить заголовок и форму поиска в самом верху сайта. Исходный код нашла, файл header тоже, но он у меня выглядит так:

<html class="no-js" >

<body id="top" >

Я так понимаю что тут я ничего отредактировать не смогу. Что можно сделать, чтобы убрать этот злостный заголовок и форму поиска? =) Заранее спасибо, если найдете возможность ответить мне!

08.04.2015
Татьяна
0

<html class="no-js" >

<body id="top" >

08.04.2015
Sly
0

Добрый день, Татьяна!
Был в отпуске, только вернулся, поэтому извиняйте за долгий ответ 🙂 Если проблема все еще актуальна, я бы попросил у Вас ссылку на сайт. По двум строчкам очень сложно сказать, где и что убирать.

25.04.2015
Аня.
0

Добрый день.
А как изменять шрифт в рубриках?

И еще не могу найти ответ на вопрос вот то поле где у вас написанны "главная, обо мне и блоге, и пр" - сделано в черном цвете? А где именно это редактировать?

03.08.2015
Sly
0

Добрый! Все, что связано со стилями - редактируется в файле style.css.

12.08.2015
vladimir
0

Шикарная статья! Просто шикарная! Никогда не видел, чтобы кто-нибудь так подробно описывал каждый шаг. Получилось все отлично! Постоянно сверял свои результаты с Вашими, пока не отредактировал весь шаблон. Спасибо огромное!

20.12.2015
Sly
0

Благодарю)

21.12.2015

У вас приятный красочный блог, да и от цветовых оттенков глаза не устают. Респект!

21.04.2016
0

Благодарю =)

23.04.2016
СВЕТЛАНА
0

Очень красивый сайт и очень много полезной информации! Спасибо автору огромное! Но в данной статье я не смогла ни чего понять и даже не дочитала до конца. Статья не для новичков. Лично у меня в коде страницы другие символы и названия и куда именно вставить название шапки я так к сожалению и не поняла(

30.11.2016

Спасибо! Настраиваю сайт по вашим урокам. Ещё не смотрела дальше, а есть рекомендации о настройке интернет-магазина с блогом?

31.03.2017
0

Добрый вечер!
Увы, про интернет магазин я всегда пишу, что на вордпрессе его делать не стоит. Конечно движок не сложный, но результат всегда выходит очень несерьезным во всех отношениях (внешний вид, качество работы, скорость работы, логистика) - все очень примитивно. Если хотите действительно серьезный интернет-магазин, то как минимум - обратитесь к другим движкам (opencart, prestashop), а как максимум ко мне, или другим программистам, которые сделают движок специально под Вас.

01.04.2017
Денис
0

Добрый день! Изменил файл header-bg.png, но на странице сайта вижу оригинальную картинку. Причём в папке images находится отредактированный файл.В чём может быть проблема?

02.09.2017

Оставить комментарий

Поделиться