ruSKweb.ru

"Самая хорошая работа – это высокооплачиваемое хобби"

Генри Форд

Настройка шаблона WordPress (структура php)

sostav shablona 2

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

Думаю раз вы дошли до этой ступени, то уже имеете представление о WordPress, и сможете разобраться с кнопками, на которых все написано по русски :-) Мы же пойдем на чуть более продвинутый уровень настройки шаблона wordpress.

Для чего нужно изменять шаблон, думаю, все понимают.  Кроме вас его наверняка скачали тысячи людей (особенно бесплатные темы), и нам бы не хотелось, что бы наш сайт был похож на чей-то чужой, правда же? :-)

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

Каким образом происходит настройка шаблона WordPress?

Как мы помним на статических сайтах для настройки внешнего вида нам достаточно открыть  нужную страницу, скажем index.html и привязанные к ней css-файлы в текстовом  редакторе(или html редакторе) , и просто внести необходимые изменения в коде страницы.

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

Но у такой динамической страницы есть своя структура, зная которую можно вносить изменения в ее настройки. Я не знаток php и целенаправленно его не изучал, но для общей настройки шаблона для WordPress глубоких знаний и не нужно, достаточно будет немножко вникнуть в тему, так что сильно не пугайтесь)

Из чего состоит тема оформления для WordPress?

Главным образом из php-файлов, css-файлов, изображений и скриптов, используемых в теме. Все эти файлы находятся в папке  \wp-content\themes\название_вашей_темы\

Список php-файлов а так же основной css стиль темы можно так же увидеть перейдя в админ. панель на вкладку Дизайн – Редактор, там же можно и редактировать их. Однако для серьезных изменений советую использовать Notepad++ он заметно облегчает работу с кодом. При сохранении не забывайте ставить кодировку файла utf_8

настройка темы WordPress

Я буду рассматривать структуру на примере своей темы, у вас детали  могут отличаться, но общий принцип думаю поймете..

 настройка темы WordPress

На этом  скриншоте я разбил тему на 4 условных составляющих, за генерацию которых отвечают свои php-файлы.  Очень похоже на блоковую модель статичных страничек, не так ли. Однако есть свои нюансы.

Шапка сайта.

За шапку в стандартизированных темах отвечает файл header.php В состав шапки обычно входят такие элементы как Меню, Название сайта, логотипы, баннеры, может входить навигация, поиск, слайдшоу и т.д. Все зависит от конкретного шаблона. Так же там прописываются доктайпы, меты и прочие значения тэга <head> html странички.

Основной контент

Далее идет центральная часть сайта в котором и содержится основной контент. В него входит приличный список php-файлов, в моем случае это:

  • 404.php который отвечает за вывод страницы с ошибкой 404.
  • archive.php который отвечает за страницы с архивами такими как рубрики, метки, календарь и т.д.
  • index.php - главная страница сайта
  • page.php отвечает за вывод страницы “Страницы” пардон за каламбур) ее вы видите если кликаете  у меня вверху на  “Об авторе”, “Карта сайта” “Гостевая” и т.д.
  • single.php отвечает за вывод конкретной записи, наподобие той, которую вы читаете в данный момент :-)
  •  comments.php  нетрудно догадаться отвечает за блок с комментариями
  • recent-comments.php недавние комментарии
  • и т.д.

Далее у каждой темы могут быть свои индивидуальный настройки и php файлы но думаю вы поняли смысл.

Боковая колонка (sidebar)

За вывод боковой колонки нашего блога отвечает sidebar.php . В некоторых темах их может быть несколько, у меня одна. Сайдбар это важная часть сайта, в нее как правило помещают виджеты, баннеры, навигацию, и прочую полезную информацию которая должна быть у посетителя всегда на виду, вне зависимости на какой бы он странице не открыл ваш сайт.  В моей теме так же на боковой панели находится поиск.search.php и searchform.php отвечают за поиск и все что с ним связано.

Подвал сайта (footer)

 footer.php отвечает за вывод нижней части сайта – подвала. Там обычно находятся копирайты, информация о создателях и дизайнерах, счетчики, и т.д. иногда туда помещают какой-то функционал сайта, который не стали помещать в верхние части сайта, что бы он не отвлекал внимания посетителя.

Особняком стоит functions.php в нем перечислены различные функции вашего сайта, в том числе и доступные только администратору.

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

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

Кстати о поисках нужного элемента – рекомендую использовать браузер Mozilla Firefox  с установленным на него плагином Firebug.

Пост получился довольно большой, поэтому о CSS-стилях темы и картинках я напишу в следующем уроке. Там же мы и посмотрим как  Firebug облегчает работу с кодом  страниц.

Тема довольно сложная для новичка, поэтому если есть какие-то вопросы или что-то осталось непонятным, то не стесняйтесь,задавайте вопросы в комментариях.

Понравилась статья? Жми лайк:

28 комментариев

  1. belyan пишет:

    Не firebug’ом едины, во всех современных браузерах есть средства разработки, которые сильно похожи друг на друга. хотя если прокачать firebug то все изменения css могут сразу вноситься в исходные файлы, не забудь рассказать об этом в следующей статье :) для тех кто уже немного ориентируется в CSS не лишним будет ознакомиться с правилами хорошего кода – http://belyan.in/2013/01/sovety-po-uluchsheniyu-css-koda/

    [Ответить]

    Сергей Кобзарь отвечает:

    я советую то, чем пользуюсь =) Хотя для справедливости наверное и правда стоит сказать, что и в Хроме и в Опере есть аналогичные инструменты.
    Однако в Опере мне не понравился, Хромовским не пользовался, как то привык уже к фаербагу) про изменения ты имеешь ввиду cssUpdater?

    [Ответить]

    belyan отвечает:

    он самый :) еще плагин Web Developer неплохо помогает при разработке.

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

  2. Расширение FireBug-очень полезный инструмент и его также можно скачать для Google Chrom:)

    [Ответить]

    Сергей Кобзарь отвечает:

    я бы даже сказал незаменимый, особенно для новичков, которые только знакомятся с версткой)

    [Ответить]

  3. Дмитрий пишет:

    Всем привет!
    Сергей, спасибо за ваш труд на сайте! все толково и понятно.
    У меня вопрос: в моем проекте , в форме подачи объявления нужно поменять местами два блока ( категории и теги) , а один блок ( введите адрес своего сайта) удалить. Я чет не могу найти нужный файл для изменения. подсажите в каком направлении искать. Просмотр кода не показывает адрес папки php. Спасибо

    [Ответить]

    Сергей Кобзарь отвечает:

    Дмитрий для того что бы ответить на ваш вопрос, мне нужно увидеть эти блоки, киньте ссылку на эту страницу)

    [Ответить]

  4. Лилия пишет:

    Здравствуйте, Сергей. Я новичок, потому мне не понятно, а для чего нужен плагин Firebug? И будет ли он на Мозиле, который закачаю в планшет с ОС Андроид? Спасибо.

    [Ответить]

    Сергей Кобзарь отвечает:

    Здравствуйте Лилия. Можно и без фаербага конечно, если вы спец по CSS и способны лишь взглянув на код понять как это будет выглядеть визуально)
    Насчет андроида не знаю, но думаю что должно все работать.

    [Ответить]

  5. Артем пишет:

    У огнелиса в последних версиях появился отличный аналого Файрбага, в меню по правой кнопке появляется Исследовать элемент. Там даже 3Д модель сайта позывают.

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

    Артем отвечает:

    Ну я то тоже файрбагом пользуюсь, но вот с помощью 3Д обнаружил у себя срытые ссыли, теперь думаю как их удалить

    [Ответить]

    Сергей Кобзарь отвечает:

    ого, где всплыли? шаблон?

    [Ответить]

    Артем отвечает:

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

    [Ответить]

    Сергей Кобзарь отвечает:

    TACом проверял?

    [Ответить]

    Артем отвечает:

    А как же, проверял. Только TAC не ищет зашифрованный ссылки, помниться у Татьяны такая же фигня была, ссылка оказалась в точке зашифрована.

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

    Артем отвечает:

    В плагине?! А-н-тересно… И как искать в плагине?

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

  6. Лилия пишет:

    Здравствуйте, Сергей! А как узнать, что в шаблоне можно поменять, а что нет? Я про виджеты и т.п.

    [Ответить]

    Сергей Кобзарь отвечает:

    Приветствую. Лилия не совсем понял вопрос, оформление вы можете поменять где угодно по сути, все зависит от вашего желания, умения и вкусов =)
    Если вы хотите всерьез заняться CSS то советую сначала изучить это дело хорошенько, что бы понимать что и как.
    Тут хороший самоучитель и шпаргалки по CSS http://htmlbook.ru/samcss
    А тут бесплатный и подробный видеокурс по CSS http://1popov.ru/bonuscourse/cssform/

    Если же вы про сам php код, то тут дело куда сложнее, и менять там без хороших знаний или четких инструкций ничего не стоит =)

    [Ответить]

  7. Лилия пишет:

    Да, я не совсем понятно написала, прошу прошения. В смысле поменять местами виджеты, если не нужное, то убрать, поменять цвета и фон в оформлении. В программировании я ничего не мыслю ))).

    [Ответить]

    Сергей Кобзарь отвечает:

    Убрать лишние и поменять местами можно в админке вордпресса, вкладка Дизайн – Виджеты.
    Оформление менять через CSS стили

    [Ответить]

  8. Игорь пишет:

    А как изменить кнопку “read mor” на читать дальше например… поставил англ шаблон, не могу найти где это поменять. И так само в поле поиска написан англ текст, в виджетах не меняет….

    [Ответить]

    Сергей Кобзарь отвечает:

    Игорь в каждом шаблоне это индивидуально. Вам нужно найти фрагмент кода в php файлах темы, где прописан текст кнопки read more и изменить его на вашу надпись

    [Ответить]

  9. Алекс пишет:

    Подскажите пожалуйста установил вордпресс, скачал тему woobizness, установил плагин ecommerce, захожу на главную страницу сайта и ничего нет, я полагаю по идее должно отображаться то что на демке темы или я ошибаюсь? И ещё без правки самого кода чтото создать нереально?

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: