Шаг №6 Редактирование шаблона WordPress(Часть 1)

Приветствую Вас мои дорогие читатели, в прошлом уроке мы с Вами установили и активировали шаблон wordpress.
Но как очень часто бывает, Вас может что то не устроить в шаблоне.Вам не нравится цвет фона?Хотите поменять элементы местами?Шаблон сильно узкий? Не стоит расстраиваться,я спешу Вас обрадовать, что шаблон можно изменить так, что все элементы встанут на свои места и как Вы пожелаете.
Итак этим мы сегодня и займемся.
Нам понадобится:
1)Браузер Google Chrome
2)Текстовый редактор Notepad2
Итак приступим.

Для начала я расскажу Вам о очень удобном инструменте для Web-разработчика.

Запустите установленный браузер Google Chrome и нажмите Ctrl+Shift+I или в правом верхнем углу браузера нажмите на гаечный ключ и перейдите в Инструменты->Инструменты разработчика

Перед нами открывается панель с разнообразными опциями (в последующих шагах я Вас ознакомлю более детально).

В данный момент нас интересует вкладка «Elements».

Присмотритесь повнимательнее.

В тот момент, когда мы водим мышкой по строкам <body><div> экран подсвечивается светло синим цветом.

Например как на вот этом рисунке:

Итак, что мы имеем:

1)Мы видим структуру разметки сайта в том числе и шаблона WordPress.

2)Мы видим какой блок, за что отвечает

3)В правом нижнем окошке мы видим CSS свойства нужного нам блока.

4)А также строку, в которой находится нужное свойство CSS у нас в шаблоне.

На этом моменте я считаю нам нужно остановиться,и советую Вам изучить структуру выбранного Вами шаблона.

В следующем уроке мы поговорим о том как при помощи этого удобного инструмента,нам произвести изменения в шаблоне WordPress.

До скорых встреч.

  • http://polydancer.com Алексей

    Информация полезная, но мне лично кажется не многим будет практически полезна. Даже при том, что вордпресс прост у сотен людей, которые с компами не очень дружат, имеют сотни вопросов по плагина, шаблоном и тд. А тут еще и код какой-то)))

    Скорее для общего развития информация.

  • http://wpcreate.ru Артем Петрусенко

    Прелесть интернета в том,что в нем можно найти любую информацию)
    Для кого то и эта информация будет полезна,и возможно даст толчок для изучения материала в этом направлении.

  • http://prodvizenie.info/ Сергей

    есть у меня ошибочка одна в коде, не могу найти, как её исправить. Появилась после русификации вордпресса. Первая строка начинается так :

    ru_RU<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    первых букв быть не должно, а как убрать, даже не представляю. Может есть идеи какие?

    • http://wpcreate.ru Артем Петрусенко

      Поподробнее,напишите на почту admin@wpcreate.ru попробуем разобраться.

  • http://prodvizenie.info/ Сергей

    Спасибо, уже нашел, в файле wp-config в самом начале появились буквы ru_RU, которые должны были по идее находится в середине. Удалил. Тема стала на английском,но зато пропала ошибка и сразу без проблем подключился feedburner, а раньше не получалось это сделать

  • Anna

    Ребятки! А вот именно этого и нет практически нигде! Т.ч. вы не правы! Спасибо автору!

  • Глеб

    расскажите пожалуйста как вырезать из шаблона дату публикаций постов автора и прочее

    • http://wpcreate.ru Артем Петрусенко

      Вам нужно найти в файлах шаблона вывода постов на сайт строку в моей теме она находится в файле loop.php но может находиться в файлах index.php single.php page.php home.php когда ее найдете удаляете и проверяете,если изменилось на сайте,тогда вы на правильном пути,если нет = вы удалили что то не то,нужно сделать отмену изменений и искать в другом месте.Надеюсь алгоритм понятен,если конкретнее то сбросьте название темы.я посмотрю и скажу конкретнее.

  • http://site.kstu.kz Максат

    вопрос такой почему у меня в файле style.css только такой текст?
    /*
    Theme Name: Afterburner WordPress Theme
    Theme URI: http://www.rockettheme.com/wordpress-themes/afterburner
    Description: Afterburner balances speed and search engine optimisation with a full feature set. The template is based on the standard SEO layout used in club templates, and is therefore fully dynamic and collapsible.
    Version: 1.3
    Author: RocketTheme, LLC
    Author URI: http://www.rockettheme.com
    */

    • http://wpcreate.ru Артем Петрусенко

      Не знаю,может он битый?Попробуйте еще раз шаблон скачать!

      • http://site.kstu.kz Максат

        так в том то и дело все работает

  • http://uhodzadetmi.ru/ ильдар

    у меня вопрос по поводу шрифтов. как сделать такой же шрифт как у вас в комментариях, очень хочеться иметь такой же на моем новом блоге http://uhodzadetmi.ru
    и второй вопрос насчет того же шрифта у меня в каментах имена(ники) людей какие то маленькие никак не могу их увеличить.. как это можно сделать?
    буду очень благодарен если напишите как

    • http://wpcreate.ru Артем Петрусенко

      в файл стилей нужно добавить несколько свойств, которые изменят, можете посмотреть через Chrome какие свойства отвечают за вывод моих комментариев, и добавить соответствующие строки в свой файл стилей.

  • http://mes-blog.com.ua Евгений

    NotePad — это сила сильная, было бы еще очень хорошо, если бы Вы рассказали, как сжимать СSS и HTML.

  • Андрей

    У меня после всего проделанного по вашей инструкции на сайте появилось такое сообщение «Warning: Cannot modify header information — headers already sent by (output started at /home/u822824782/public_html/wp-config.php:1) in /home/u822824782/public_html/wp-includes/pluggable.php on line 876»

    Я так понимаю это какая-то ошибка в 876 строке. Как её исправить?

    • http://wpcreate.ru Артем Петрусенко

      От чего конкретно появилась такая надпись?По идее тут мы код не меняем шаблона!

  • Сергей

    Привет. Возможно ли изменить шаблон темы с помощью плагина, т.е при установке плагина в шаблон добавлялся код

    • http://wpcreate.ru Артем Петрусенко

      Привет Сергей, я с таким не сталкивался!

  • http://www.newness-of-life.ru/ Алена

    Артем, добрый день!
    Вопрос немного не то теме. проблема с шаблоном.. на главной в 3х окошках с ссылками на статичные страницы, текст у меня отображается полностью всей страницы, получается длинное-длинное окно…. как сделать, что б текст отражался частично, а не полностью? как в примере темы: http://www.elegantthemes.com/preview/InStyle/

    • http://wpcreate.ru Артем Петрусенко

      Добрый день.Попробуйте в режиме редактирования HTML вставить код в выводимых записях после 1 абзаца

      <!--more-->
      • http://www.newness-of-life.ru/ Алена

        АААААААААААА!!! Артем! Вы гений!!!!!!!! Я 2 дня с этим мучилась!!!СПАСИБО!!!!!!!! ОГРОМНОЕ!!!

        • http://wpcreate.ru Артем Петрусенко

          Пожалуйста, рад что Вам помог!

  • http://www.modnoodeta.ru Елена

    Артем, добрый день. Хотела с помощью Вашего урока изменить ширину колонки wrap в теме wordPress, зашла в коды элементов, все просмотрела и ничего с таким названием не нашла, wrapper тоже нет. Помогите пожалуйста)))

    • http://wpcreate.ru Артем Петрусенко

      Елена, а как шаблон называется? Я гляну, и отвечу.

    • http://wpcreate.ru Артем Петрусенко

      В шаблоне girls_shopping_wp3 ширина шаблона изменяется в файле style.css в 105 строке. Там не wrapper а art-Sheet.

  • http://yarovaya-travel.ru/ Ирина

    Добрый вечер, Артем!

    У меня возник такой вопрос: я установила один шаблон, а потом по Вашим урокам делала все как написано (дошла до 17 урока). Затем решила поменять шаблон, потому что глаза от него уставали. Нужно ли заново проходить уроки на новом шаблоне и все переустанавливать или все автоматически перенесется на новый шаблон? Спасибо за ответ!

    • http://wpcreate.ru Артем Петрусенко

      Автоматически подойдут к новому шаблону!

      • http://yarovaya-travel.ru/ Ирина

        Отлично! спасибо!

  • Наталья В

    Какое же Вы мне, Артем, дело благое сделали,оказав помощь в установке вордпресс и помощь в регистрации!еще раз спасибо!
    Выбрала тему,установила,теперь разбираюсь в в уроках,с особым интересом к комментариям. Подскажите, что делать если в админке вверху присутствует вот эта строка; Warning: Invalid argument supplied for foreach() in /home/detkista/detkistar.ru/www/wp-content/themes/toyzine_fleximag/functions.php on line 19
    Собственно она также мелькает при загрузке в браузере, как убрать?

  • http://soccerenglish.com S.D.

    Здравствуй Брат. Спасибо тебе за то, что ты есть, я тобой горжусь. Твой сайт мне сильно помог, но не до конца. Я не понял как создавать меню ну вот например я захожу на сайт и у меня была главная страница а на ней другие страницы мне не нравятся рубрики. Или только для блоггеров а не для обичних сайтов. Я хочу в теме Изменить всю карту. И как сделать лист на 70% прозрачнее???

  • http://samopazvitie.ru Наталья

    Спасибо огромное Артем! Мне очень помогли ваши советы в редактировании моего шаблона на WordPress. Удачи в дальнейшей работе. Еще раз спасибо

  • http://kinotonic.com Мирослав

    Может ты подскажешь, Артем.
    Вижу Xenu ссылки на левые ресурсы (распространители тем постарались)) )
    Вижу что в футере. Но в редакторе, в футере пусто — куда могли зашить?

  • http://investvremia.ru/ igor

    Здравствуйте Артем!Я так и не могу разобраться с главной страницей и как распределяются статьи !Хостинг сам обновил версию темы и статьи разбились на рублики,что я только не делал,как не эксперементировал добавлял страницу ,приклеплял статьи ,оставлял по умолчанию все равно входишь в сайт в пустой или делал главной карту сайта чтоб посетитель не уходил с сайта!Что мне делать?Менять тему боюсь так как раз поменял теперь потерял плагин анонсов и контент у меня не сокращается,вводил код РОТОВАН все появилось но фон в теме не меняется и вообще не управляется,потратил уйму времени все безрезультатно

  • http://vk.com Петро

    Скажите пожалуста как поменять url силок в wordpres!!<

  • Петро

    Доброго время суток! Скажите пожалуста как поменять url силок в wordpres!!

  • http://wp-forday.ru/ AAMix

    Я также пользуюсь CMS wordpress, но браузер использую FireFox. И также легко определяю необходимые элементы в этом браузере.
    Трудно в самом начале, а там придет опыт, и все вопросы покажутся очень смешными.

    Желаю все успеха в освоении увлекательного занятия, как сайтостроение на WP.
    С уважением Александр Афанасьев.

  • http://art-shkola.com Елена

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

  • Валерий

    Здравствуйте, Артём! У меня есть одна проблема. На моём сайте lerikof.ru появился внизу дополнительный элемент (блок) с надписью «Сайт размещается на хостинге Спринтхост» и прикреплённой реф-ссылкой. К сожелениию упустил момент — когда. В окне «Просмотр кода элемента» я этот элемент вижу. Он прописан в теле (). Я перекопал в редакторе все папки шаблона, но такого элемента там нет. Единственное, что нашёл — строчку в Подвале с функцией . Если её удалить, то проподает этот элемент. Я не против. Но перестают работать плагины. Буду вам очень благодарен, если подскажете, где этот элемент может находиться, как его найти и как его отредактировать? Или куда можно обратиться с этой проблемой. Спасибо.

    • http://wordpressnotes.ru Дамир

      если не можете удалить, то пропишите в CSS файле следующий код
      center a {display:none;}
      Данный код скроет ссылку

      • Валерий

        Спасибо, Дамир. Ваш код мне обязательно пригодится. Вопрос заключался не в том, что бы стереть надпись.
        Мне нужно было найти в каком именно месте прописан весь блок, где находится эта надпись. Я нашёл, где он
        прописан. Оказалось совсем не в шаблоне, как я думал. Я убрал оттуда чужую реферальную ссылку и вставил свою.