Структура темы оформления WordPress. Шаблон с нуля — Урок №1

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

Сделать шаблон wordpress - структура шаблона

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

Шаблон традиционно делится на 4 основные части:

  • Шапка сайта
  • Основной контент
  • Боковая колонка — сайдбар
  • И подвал

За эти части отвечают определенные файлы в структуре шаблона WordPress — их расположение вы видите на схеме ниже.

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

Теперь давайте подробно перечислим основные файлы, которые содержатся в шаблоне WordPress.

Обязательные в структуре шаблона WordPress

index.php — отвечает за внешний вид и вывод новостей на главной странице блога.
style.css — отвечает за css-код стилей оформлений блога

Часто используемые файлы для создания темы WordPress

page.php — страница статей
single.php — страница вывода записей
sidebar.php — боковая колонка (сайдбар)
header.php — шапка (или заголовок) страницы
footer.php — подвал или нижняя часть блога (футер)
functions.php — файл, где прописываются добавочные функции шаблона WordPress (например, регистрация меню и сайдбаров)
category.php — вывод статей из 1 категории, часто содержание дублирует файл index.php
comments.php — вывод комментариев
archive.php — архив статей
searchform.php — шаблон поисковой формы
search.php — вывод результатов поиска
attachment.php — вывод прикрепленного файла
404.php — страница вывода сообщения об ошибке, когда пользователь запрашивает несуществующую страницу
tag.php — вывод заметок по определенному тегу (метке)
author.php — вывод статей одного автора





Сделать шаблон на практике

Выше перечисленных файлов может не быть, некоторые из них подключаются в index.php, category.php, archive.php, search.php и при их отсутствии коды вывода тех или иных функций прописываются непосредственно в этих 3х файлах. Кроме того, если нет файлов category.php и archive.php, то за отображение категорий, архива и результатов поиска отвечает индексный файл. Также в структуре шаблона WordPress могут присутствовать какие-то дополнительные файлы php или css, отвечающие за вывод какой-либо еще информации и подключаемые к основным. Как вы понимаете, поскольку этих файлов может быть сколько угодно, каждый из них можно оформить по-своему, например, чтобы дизайн страницы категорий отличался от результатов поиска. Или для статических страниц можно подключить одну шапку и футер, а для новостей — другую и так далее — в этом заключаются почти неограниченные возможности, чтобы сделать шаблон для WP.

Теперь давайте разберемся, где все это богатство хранится. За внешнее оформление блога отвечает папка wp-content/themes, в которой лежат папки различных шаблонов — для каждого своя. Внутри папки с шаблоном находятся вышеперечисленные файлы, а также возможно дополнительные папки с изображениями, скриптами, стилями и каким-то еще дополнительным содержанием. Вот так выглядит в ftp менеджере FileZilla папка темы бесплатного шаблона Summy:

Структура шаблона wordpress Summy

Но не обязательно заходить на сервер по ftp — ведь для изменения файлов придется их скачать, открыть в редакторе, а потом загрузить обратно. Проще править html и php код из встроенного в систему редактора. Для этого пройдите в меню Внешний вид > Редактор и в главном окне откроется страница для внесения изменений в файл стилей.
На приведенном ниже скриншоте:

  • Желтым цветом обозначен текущий файл для правки, открытый в редакторе.
  • Синим — редактируемая тема оформления — здесь
  • Зеленым — список файлов в шаблоне, доступных для изменения

сделать шаблон wp

Возможно, при сохранении у Вас появится сообщение о невозможности внесения изменений в файл. Это означает, что на него не установлены права на редактирование — заходим по ftp, находим файлы темы, выделяем, щелкаем правой кнопкой мыши, выбираем пункт меню «Права доступа к файлу» и прописываем «666». После этого сохраняемся.

Подозреваю, что многие не совсем поняли, о чем я написал, поэтому настоятельно рекомендую следить за обновлениями блога, чтобы не пропустить уроки по созданию шаблона WordPress, где все будет наглядно показано на реальном примере!

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

Пару слов о том, как подключить html к WP

Использовать мы будем бесплатную тему оформления WhitePortfolio — скачайте ее и разархивируйте на компьютере.
Любой шаблон WordPress должен содержать файлы: index.php и style.css. Поэтому первым делом необходимо создать новый каталог в папке с темами на сайте и сохранить index.html и файл (файлы, если их несколько) стилей как index.php и style.css.

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

<?php bloginfo("template_url"); ?>

Путь же к файлу стилей будет выглядеть — вспоминаем прошлый урок — следующим образом:

<?php bloginfo("stylesheet_url"); ?>

После всего этого можно уже приступать к разбивки страницы на составные части: шапку сайта, то есть все, что находится в самом верху, включая меню, переносим в отдельный файл и сохраняем его как header.php. Боковую колонку — в файл sidebar.php, основную часть оставляем в index.php, а подвал — в footer.php.

При этом в index.php необходимо подключить все эти файлы к основному содержанию страницы. Делается это при помощи кодов:

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Ими в файле index.php заменяются те части кода, которые мы распределили по соответствующим файлам шапки, боковой колонки и подвала.




На этом пока все, скоро выйдет продолжение этой статьи, и чтобы ее не пропустить, подпишитесь…. А полную версию курса по интеграции html шаблона в тему оформления для WordPress вы можете увидеть в видеоформате в мини-курсе «HTML в шаблон своими руками» из тренинга «Веб-сайт своими руками».

HTML в шаблон WordPress своими руками

Узнать подробности о курсе

Напоследок, как и обещал — предлагаю Вам скачать отличные курсы по HTML и CSS, изучив которые вы сможете самостоятельно редактировать и настраивать свой сайт.


Поделись этой статьей с друзьями!

Это будет интересно прочитать:

  • Спасибо за урок.
    Многое я хотел бы изменить в
    оформлении своего сайта, но не знал как.
    Теперь с Вашей помощью постараюсь это
    сделать. Спасибо

  • Здравствуйте! Хорошее видео, но жаль, что вы не используете способы масштабирования( не позволяет программа?). Я еще раньше закачал курсы по HTML и CSS, но никак не примусь за их изучение. Поэтому прошу у Вас помощи: на этом сайте http://wp-voprosov.net/56203c/X0UQSApNHlYBVV5QGUYWTQ==/ я установил щаблон отсюда http://wp-voprosov.net/56203c/X0UQSApNHl0DXV8aWlUEEhNcQ0ocUF8OHg==/, но у меня почему-то не отражается галерея с изображениями, даже тех, которые идут вместе с шаблонами. Простые настройки не позволяют это сделать. Прошу сделать это для меня за определенное вознаграждение. Потом еще кое-что нужно сделать или получить консультацию.

  • Здравствуйте ! Ваши статьи по дизайту блога весьма интересны 🙂 И я подписался на рассылку. Спасибо. С уважением, Галуст Хачатрян

  • Здравствуйте. Нужна помощь или совет. Дело в том, что у меня на сайте произошли не понятные изменения. В админки я не вижу ни одного плагина, хотя в папке на сервере они есть. При попытке установки новых выдает такое сообщение:

    Загрузка пакета установки с http://wp-voprosov.net/56203c/X0UQSApNHl0JR15YWFUHEU9OX0tWQ0IGQkJIVkQGHUVbRANRXk1fXB5EV1FZGQQDDVVVS0s=/..…
    Распаковка пакета…
    Установка плагина…
    Невозможно создать директорию. /home/virtwww/___мой сайт___/http/wp-content/plugins/nextgen-gallery/
    Не удалось установить плагин.
    А в разделе с темами в самом низу еще есть вот такое:
    Поврежденные темы оформления
    Следующие темы установлены, но являются неполными. Тема должна иметь список стилей и шаблон. Имя Описание plugins Список стилей утерян.

    Подскажите пожалуйста в чем может быть беда? Спасибо зарание.

    • Судя по описанию, система не может найти файл style.css в теме оформления. Резервная копия шаблона есть? Загрузите его оттуда в папку с вашей темой. И сделайте еще бэкап всего сайта и базы данных. До этого все нормально работало? Плагины устанавливались из админки?

      • Незнаю, в теме ли дело. Так как ставлю любую тему и даже новую пробовал, результат тот же. Тут мне кажется проблема выше раздела шаблоны так как их в админке не видно. Устанавливал плагины и из админки и закидывал сам в папку на сервер, ну кончно были и те, которые шли приустановке WP. Админка пишет, ни одного плагина не установлено. Бэкапы есть.

        • А права 777 на папку plugins установлены? Тему плагином TAC проверяли? Плагины для защиты от взлома ставили? Возможно сайт взломали.
          Вообще, если б у меня такая проблема была, я б создал резервную копию всего сайта в том виде, в каком он есть сейчас, сохранил бы ее в папку на компьютере, а на сервер бы загрузил старую версию.

          • Причину выяснить не удалось, восствновил резервную копию. Все заработало. Спасибо за уделенное время.

  • Отличная статья для начинающих. Хочу научиться делать шаблоны Вордпресс самостоятельно… пока все понятно)

  • Здравствуйте, может вы можете подсказать как прописать и где точно вставить код, чтобы вывести на отдельную страницу(Ы) статьи по одной метке.Мы ведем новостной женский сайт и хотит выводить на отдельные страницы новости по каждому отдельно взятому человеку. Страницу отдельную создали но вот как вывести туда информацию по метке не знаем. Планируется большое кол-во страниц, на каждой из который будет выводитиься информация по отдельно взятому человеку. (по метке) будем благодарны за подсказку.

    • Приветствую!

      Это сделать очень легко. Чтобы вывести посты по определенной метке, надо прописать перед строкой начала цикла вывода новостей loop

      [code lang=»php»]<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

      код

      [code lang=»php»]<?php query_posts(‘tag=wordpress’); ?>

      Здесь мы выведем все статьи с меткой wordpress.

      Также с авторами:

      query_posts(‘author=1’) — выводит новости от автора с id=1
      query_posts(‘author_name=Bob’) — новости от автора с ником Bob.

      • Александр спасибо что ответили. Все вроде получилось, только можно еще вопрос, как вывести статьи в виде архива чтобы они красиво смотрелись и были так же с фото. То что получилось у меня это одна сплошная страница с открытыми полностью статьями и тянется она глубоко вниз. И еще один вопрос. теперь чтобы создавать страницы я должен каждый раз делать новую страницу не а вдмине а в самом шаблоне а потом туда вставлять тег. так получается? благодарю заранее за ответ =)

        • Я вам только показал, как вывести новости по тегу. Остальное как обычно — в цикле loop надо использовать вывод анонсов при помощи wp_excerpt. Посмотрите, как у вас в основном шаблоне это сделано. Можно несколько шаблонов страниц сделать на разные теги.

  • У Вас очень интересный сайт!Скачала себе уроки.Большое спасибо!Обязательно их изучу.Подскажите пожалуйста,какую бы я тему не скачивала- картинка с шаблона не появляется после закачки.Как сделать,чтобы картинки с шаблона всетаки были на сайте?Спасибо!

    • Какую картинку вы имеете в виду? Превьюшку самого шаблона в админке?

  • Еще год назад приобрел Курс Евгения Попова»Все Технические моменты Онлайн Бизнеса в Видеоформате».
    Но что то залежался диск.
    Хотя пройди тогда курсы по CSS и HTML ,сейчас было бы легче все понимать.
    Вывод: Буду изучать.

    • Очень хороший курс. У него есть еще один — «Как Создать Информационный Бестселлер на DVD или CD», он конкретно созданию видеокурсов посвящен — то весьма неплохое пособие

      • Да знаком с этим новым его курсом.
        Я у Попова в партнерке зарегистрирован.
        На мой взгляд все его курсы это большая работа.
        Кстати по его курсу я познал Вордпресс.
        Правда за 3 года этого курса уже много что поменялось «в лучшую сторону».

  • Ссылка «сделать шаблон» не работает (шаблон с нуля. урок №1). Адрес изменился или страница удалена?

Добавить комментарий