Создать тему wordpress с нуля

Создать тему wordpress с нуля

В интернете есть, конечно, информация на данную тему, но она так скудна.. и совсем не для новичков, которые стремятся к познаниям и в тоже время первый раз видят PHP-код.

Сейчас я расскажу о том, как создать свою тему для WordPress. Рассмотрим всё по пунктам, с картинками. Скажу лишь, что ничего придумывать не надо, все функции, которые здесь употребляются — уже встроены в движок.

Если вы понимаете HTML и CSS, что несложно будет перейти к созданию собственной темы для WordPress. В этом посте я расскажу, как создать полностью готовую Worpress-тему от скетча до полной боевой готовности. Мы увидим, как статичный дизайн превращается в полноценный сайт, который мы наполним функциональностью.

Работать мы сегодня будем с дизайном для марки Sticky. Главная фишка сайта — легкий сайдбар, который будет всегда находиться на своём месте, независимо от прокрутки. Также разные украшательства сделаны с помощью CSS3.

Не будем вдаваться в детали создания дизайна, скажу лишь, что здесь использовалось 12 колонок по 24px; мягкие цвета для основного цвета и коричневый и тёмно-красный — для акцентов; в тексте используем шрифт serif; в целом дизайн производит впечатления осязаемого и реалистичного.

Анатомия темы WordPress

Перед тем, как начинать создавать тему, важно знать, как же она устроена. Если посмотреть структуру большинства тем, то можно увидеть, что она состоит из примерно 12 корневых файлов.
Что это за файлы?

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

Базовый код

Так как наша тема использует в основном HTML и CSS, и немного PHP, очень важно создавать шаблон, как если бы это был старый добрый статичный сайт. Наметаем наш дизайн в виде первоначального шаблона:

Создание WP — темы

Теперь, когда у нас есть очертания будущей страницы, мы начнём превращать наш код в wordpress-тему. Начнём с создания папки для нашей темы и создания php — файлов (header.php, и тд.). Как вариант, можете из из темы Default, которая прилагается с движком, удалить содержимое и заменить на своё и залить свои скрипты и картинки..

Создание файла стилей

Каждая тема Worpress снабжена таким файлом, это обычный CSS. Так что в самом верху пропишем кое-что о себе:

Важно , чтобы все пути были прописаны правильно.

Загружаем Header

Открываем наш header.php и вставляем в него соответствующую часть кода из HTML. Теперь мы должные поменять код на корректный для WordPress. wp_title(); отображает title страницы, которое следует из bloginfo(‘name’), которая в свою очередь заменяется в админ-панели.

bloginfo(‘stylesheet_url’); подключает страницу стилей. Им заменяют обычный путь к стилю.
Другие файлы, такие как Javascript, подключает тег bloginfo(‘template_url’); он указывает путь до папки с темой.

Если вы хотите наполнить свою тему комментариями, что добавьте соответствующий javascript из ядра WordPress. Перед тем, как закроется тег /head>, вставляем wp_head();, это то место, куда будут добавляться дополнительные плагины.

Строим Index

Здесь начинается самое сочное) Сначала мы вставляем теги get_header(); и get_sidebar(), которые отвечают header.php и sidebar.php.
WordPress «закручивается» и начинает проверять контент, которые ему доступен. Внутри этого цикла мы видим различные теги, которые содержат информацию о посте, такие как the_title();, и the_permalink();. Они заключаются в теги HTML соответственно их цели. Так, тег the_permalink отвечает за путь к ядру темы и указывается 2 раза — в пути к картинке и в ссылке на сам пост в теге title.

the_post_thumbnail(); — дополнительная опция, этот код может добавить к посту иконку в WordPress 2.9. Ниже расположен контент, который вставляется через тег the_content(»);

В мета — секции можно увидеть такую специфическую информацию, как время написания, количество комментариев и тп.. Это всё подключается шаблонными тегами, такими как the_time(‘F jS, Y’);. Параметры их можно менять, например, отображение даты можно изменять в соответствующем разделе админки WordPress. (полезно будет почитать WordPress Codex).

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

После завершения цикла мы добавляем get_footer(); который подстоединяет footer.php

Заполняем Sidebar

В боковой панели отображаются такие вещи, как список категорий и список страниц.Sidebar подключается функцией get_sidebar();

Только три вещи в нашем sidebar’e — лого, список страниц и категорий. Лого поместим в тег h1, к которому подключены функции get_option(‘home’); и bloginfo(‘name’); для обозначения URL Блога и присвоения соответствующего имени в нужных местах. Список страниц обеспечивает wp_list_pages(‘title_li=’ );, который вылавливает названия всех страниц, которые были созданы. Список категорий вызвать столь же легко, wp_list_categories();.
Эта функция используется со многими параметрами, такими как show_count=0 ( предотвращает показ количества постов в каждой категории), hide_empty=0 (показывает категорию, даже если в той нет постов), и exclude=1 (исключает категорию с как правило это категория «Без рубрики «).

Читайте также:  Эхолот гармин страйк 4 плюс

Закругляемся на footer’е

Это самая простая часть, вставаляем wp_footer(); перед /body>. В него помещается такая информация, как последние записи, последние комментарии и что-нибудь в этом духе. Всё это можно сделать, используя шаблонные теги WordPress.

Создаём страницу архива

Архив содержит в себе список постов, рассортированных по автору, дате, категории и тп. Эта страница очень похожа на index.php, но в самом её верху публикуется тега с заголовком, чтобы юзер знал, в на какой странице он вообще находится. Например, «Архив». По желанию можно почистить цикл от текстов постов, количества комментариев и тд,, в этом случае будет выводиться просто список заголовков постов.

Конструируем страницу просмотра одного поста

Для создания страницы поста используется шаблонный файл single.php, которая очень похожа на page.php. Тут всё просто. Комментаррии подсоединяем comments_template();

Конфигурация комментариев

Чем придумывать код — надо взять комментарии с Default theme, и внести свои изменения.

Если создать шаблон для комментариев, то он пригодится очень надолго. Сложно писать CSS для комментариев, вернее, сложно разобраться в исходнике. На помощ придёт Firebug — Плагин для Мозиллы, который помогает разбираться с кодом. Хотя некоторые параметры можно поменять и в самом коде WordPress, например, размер аватара. (параметр avatar_size).

Завершаем страницей 404 и страницей поиска

Страница поиска — копия archive.php, но вручную нужно добавить:
Результаты поиска,

а в странице 404 может разгуляться ваша фантазия. Только не забудьте добавить get_header();, и get_footer(); где нужно

Вот и всё

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

Я надеюсь, вам помогла эта статья! Если что-то непонятно, не бойтесь спрашивать.

В этом уроке мы создадим простую тему для cвоего блога wordpress самостоятельно.

Введение.

Прежде чем начать, давайте взглянем на стандартную тему (тему по умолчанию, файлы index.php и single.php) WordPress и посмотрим как она устроена:

Исходный шаблон.
Предположим, что мы нарисовали в фотошопе вот такой шаблон (его исходник здесь), аналогично поделим его на блоки:

Сам процесс создания и верстки html-шаблона рассматривать в рамках этой статьи не будет, вы можете посмотреть видеокурс "Создаем сайт с нуля (фотошоп+верстка)" на сайте evgeniypopov.com в выпусках журнала 35 и 36, только следует учесть, что вордпресс генерирует некоторые классы, которые должны присутствовать в таблице стилей. К примеру классы aligncenter, alignleft и alignright служат для выравнивания изображений и блочных элементов, и их нужно включить в свою таблицу стилей (можно скопировать из таблицы стилей дефолтной темы):

Следующие классы используются для выравнивания изображений, которые имеют подписи (можно скопировать из дефолтной темы, в дальнейшем при необходимости поправить):

Кроме того, существует еще несколько классов WordPress, которые необязательно описывать в таблице стилей, но, т.к. WordPress генерирует страницы с их использованием, можно и им задать стиль:

В процессе верстки используйте блоки и стили к ним, как это определено в скринах в начале статьи. Это не обязательно, но очень даже желательно.

К примеру в дальнейшем мы подключим поисковую форму на сайт через спец. тег wordpress , в результате чего wordpress выведет такую форму:

Поэтому учитываем это при верстки темы.

И последнее, что нужно добавить в style.css это информацию о себе любимом и о созданной теме. Информация размещается в начале файла в коментах:

Также не забудьте сделать screenshot.png и положить его в папку с шаблоном (в корень). Информация, размещенная таким образом в таблице стилей, будет отображаться в админке в разделе Управление «темами». Сверстанный шаблон тестируем в браузерах, если все норм, можно идти далее.

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

Итак распакуйте архив, далее мы будем конвертировать index.html, single.html и page.html в wordpress тему (page.html такая же как и single.html, только без блока коментариев).

Читайте также:  Ремонт южного моста на материнской плате

Принцип работы wp-темы:

Если вы откроете папку темы по умолчанию (wp-content/themes/default), вы увидите множество файлов PHP (файлы темы) и одного файла style.css. Когда мы просматриваем блог, WP подключает файлы темы ( index.php ,
,

Затем все теги
, находящиеся id="nav" (список страниц в верхней части блога) заменям на функцию вордпресса

В итоге получаем:

Шаг 3 — Sidebar.php
Возращаемся к файлу index.htm. Первым делом удаляем всю форму поиска, затем вырезаем из него все от

Таким образом мы вызываем 2 сайдбара. Если вы смотрели Sidebar.php дефолтной темы, то заметили, что кода там гораздо больше. Дело в том, что там просто прописано дополнительное условие, которое по умолчанию выводит архив и категории, в случае, если админ не подключил ни одного виджета к сайдбару. Мы это условие прописывать не будем.

Чтобы наши сайдбары заработали, их необходимо зарегистрировать. Для этого в директории темы создаем файл functions.php и в нем пишем:

Осталось подключить форму поиска. Сделать это можно либо из админки путем добаления виджета в один из сайдбаров, а можно вызвать ее в sidebar.php, что мы и сделаем. В самом начале добавляем:

Шаг 4 — Footer.php
Возращаемся к файлу index.html и вырезаем из него все от

По нашему шаблону здесь же мы должны вывести последние записи блога (Recent Posts) и последние коментарии (Recent Comments). Последние записи будем выводить в количестве 5 штук — showposts=5. Заменям все внутри :

Вывод последних коментариев сделаем с помощью плагина simple_recent_comments.php, скачайте его и положите в папку нашей темы. Теперь в нужном месте его нам нужно вызвать (заменям содержимое блока

Шаг 5 — Index.php
Все что осталось в index.html сохраняем как index.php в папку с нашей темой, затем подключаем вызов header, sidebar и footer:

Шаг 6 — Вывод записей блога на странице index.php

Следующий рисунок демонстрирует принцип вывода записей блога. Сначала идет проверка, есть ли сообщения в базе, если нет выводит "Not Found". Если есть, выводит в цикле while

.

Открываем наш index.php и заменям статичный текст между

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

Мы использовали теги WordPress:

the_time(‘M’), the_time(‘j’) — вывод месяца и дня соответственно
the_permalink() — отображает постоянную ссылку записи
the_title_attribute() — заголовок текущей записи.
the_title() — заголовок записи или страницы
the_category(‘, ‘) — ссылку на категорию или категории, к которым принадлежит запись
comments_popup_link — выведет ссылку для комментариев во всплывающем окне если comments_ popup_script() используется, иначе выводит обычную ссылку на комментарии.
the_content — выводит содержание текущей записи. Если используется тег то сообщение показывается только до (только на главной странице, на странице записи будет показываться полностью).
next_posts_link — ссылка на предыдущие сообщения.
previous_posts_link — ссылка на следующие сообщения.

Шаг 7- Single.php
Этот файл мы создадим из только что законченного index.php , немного изменив его:

wp_link_pages — Выводит ссылки на странице в многостраничном сообщении ( при использовании ).
comments_template() — Подключает файл шаблона comments.php из текущей папки темы
previous_post_link(‘ %link’), next_post_link(‘%link’) — выведет заголовки предыдущей и следующей записи

Шаг 8 — page.php
Этот шаг проще предыдущего. Файл single.php сохраняем как page.php. Удаляем из page.php вывод даты, комменты, next/previous:

На этом можно и закончить. Основные файлы темы мы собрали. Вероятно вы заметили, что в дефолтной теме больше файлов. Например archive.php, он не является обязательным. Однако если мы подключим виджет "Архивы" или "Календарь" в сайдбаре и перейдем в какой — нибудь архив по дате, записи по выбранной дате выведутся на индексной странице, поэтому вполне можно обойтись без archive.php 🙂

Финал.
Иногда нужно/полезно вывести на странице заголовки всех записей. Для этой цели воспользуемся тегом wordpress query_post:

query_posts(‘showposts=-1’); — выведет все записи. Сохраним это в файл archives.php. Обратите внимание на комментарии в начале кода Template Name: Archives, он здесь обязателен (далее вы поймете почему)

Идем в админку и создаем новую страницу. Указываем только заголовок и указываем в "Атрибутах" шаблон Archives, сохраняем страницу. И теперь на этой странице у нас будут выводиться все записи по шаблону archives.php, который мы описали чуть выше:

На сегодня это все. Спасибо за внимание.

P.S собранная тема тестировалась на WordPress 2.8.5. Конечный результат скачать можно здесь. Аналогично попробуйте создать свою тему, уверен, у вас получиться!

Статья сборная, источники: http://www.webdesignerwall.com, http://themetation.com, http://codex.wordpress.org

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Евгений Стыценков
Урок создан: 2 Декабря 2009
Просмотров: 160045
Правила перепечатки

5 последних уроков рубрики "Wordpress"

Почему WordPress лучше чем Joomla ?

Этот урок скорее всего будет психологическим, т.к. многие люди работают с WordPress и одновременно с Joomla, но не могут решится каким CMS пользоваться.

Про шаблоны WordPress

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

Читайте также:  Попал песок в двигатель

Самые первые настройки после установки движка WordPress

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

10 стратегий эффективного продвижения статей в блогах на WordPress

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

Топ WordPress альтернатив для создания персонального сайта

Нужен персональный сайт, но вы не хотите задействовать WordPress? Тогда данная подборка для вас.

Это главная страница руководства по созданию тем (шаблонов) для WordPress. Основная информация взята из официального руководства и из личного опыта.

Чтобы сразу посмотреть общий принцип создания темы, перейдите к части учебника: Создание самой простой темы

Что такое тема?

Тема WordPress — это набор css, js, php файлов, которые в связке с WordPress и плагинами выводят информацию из базы данных на экран в красивом и удобном виде (дизайне). Ну или в некрасивом и неудобном, тут смотря какую тему выбрать. В других движка тему еще называют "шаблоном", но в WordPress принято говорить именно тема — theme, а не шаблон — template. Хотя и то и другое по сути одно и тоже.

Таким образом, если вы меняете тему, то сайт меняет свой вид, выглядит иначе. На WordPress.org есть тысячи бесплатных тем. Несмотря на широкой выбор тем, многие предпочитают создавать свои темы. Связанно это в первую очередь с тем, что создать простую тему не сложно.

Необходимые файлы

Чтобы создать тему необходимы лишь два файла:

  1. index.php — главный файл темы, отвечает за вывод содержимого
  2. style.css — главный файл стилей, отвечает за css стили

Но ни одна тема по факту не состоит всего из двух файлов. Их больше: PHP, языковые файлы, файл CSS и JS, текстовые файлы. Тему начинают с двух файлов, а затем, чтобы было удобнее, её расширяют, добавляя такие файлы как:

  • header.php — отвечает за вывод шапки
  • footer.php — отвечает за вывод подвала
  • sidebar.php — отвечает за вывод боковой панели
  • page.php — отвечает за вывод отдельной страницы (записи)
  • и т.д. смотрите полный список.

Возможности темы

Возможности темы по сути безграничны, ведь там можно полностью использовать PHP. НО! Тема, как призвана отображать содержимое сайта определенным образом, а не добавлять функционала сайту. Поэтому возможности темы принято ограничивать до тех, которые отвечают за внешний вид, а все остальные возможности: голосование, рейтинги, редиректы, СЕО и т.п. принято выносить в плагины.

Таким образом, тема может:

  • Отвечать за вывод содержимого сайта под разные типы устройств: мониторы и смартфоны. Такие темы называются адаптивные. Также темы могут быть фиксированные, одноколоночные, двухколоночные и т.п.;
  • Тема может выводить любое содержимое;
  • Может указать, какой контент будет отображаться для разных пользователей;
  • Может использовать любые элементы дизайна (картинки, видео).

Как и на любом сайте, тема — это не только цветовое решение, макет и красивая картинка. По-настоящему качественные темы еще и очень функциональны. Функциональность темы, заключается в её гибкой настройке. Т.е. она не добавляет ничего нового на сайт, но отлично настраивается по вкусу владельца. Например: устанавливается фоновая картинка, меняется цвета элементов, настраивается меню и блоки с контентом (виджеты).

Чем тема отличается от плагина?

С точки зрения кода, можно сказать, ничем — в теме можно создать полноценный плагин. А вот с точки зрения логики — всем! Задача плагина, добавить что-то новое на сайт, например добавить опрос. Задача темы — вывод содержимого, в том числе, этого опроса.

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

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

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

Где скачивать темы?

Каталог тем на сайте WordPress.org. — одно из самых безопасных мест, где можно скачать темы. Там все темы проверяются на соответствие требованиям и рекомендациям.

Есть и другие источники, но там темы обычно платные. Например, темы можно скачать на: Creative Market.

Старт

Теперь, когда мы разобрались в темах, можно приступать к созданию своей темы. Первым делом нужно:

Этот раздел в процессе разработки. И вообще, я его начал писать и забросил, неинтересное занятие получается. Будет время, желание продолжу.

Ссылка на основную публикацию
Сколько рублей получают ютуберы
Видеохостинг YouTube — не только развлекательная площадка, но и хороший источник дохода. Тысячи пользователей выкладывают ролики, пытаясь привлечь внимание аудитории....
Самый дорогой самсунг 2018
Samsung / Самсунг - южнокорейская компания, ведущий производитель смартфонов в мире. В первом квартале 2018 года доля Самсунг на мировом...
Самый лучший smart tv
Ежегодные обновления телевизионных технологий делают телевизоры уже больше, чем обычным экраном для демонстрации каналов. Растет популярность функции Smart TV, которая...
Сколько света мотает компьютер
Выбирая комплектующие для персонального компьютера (ПК) обычно обращают внимание на производительность и объем памяти, порой забывая о том, сколько же...
Adblock detector