Создать шаблон для WordPress проще, чем можно подумать. Для этого не надо обладать огромным опытом разработки дизайна или программирования сайтов. В этой статье расскажем об основах создания с нуля собственных тем WordPress.
Зачем вообще может понадобиться создание собственного шаблона WordPress, когда можно воспользоваться имеющимися в базе заготовками? Вот какие причины могут подтолкнуть к этому:
- Можно получить уникальный сайт или лэндинг, отличный от конкурентов. Учитывая миллионы блогов, построенных на этой CMS, каждый типовой дизайн используется как минимум сотню раз.
- Полная свобода действий на этапе разработки. Можно добавлять собственный функционал с нужными именно вам рабочими элементами.
- Можно применять разные дизайны для разных разделов сайта, что невозможно при использовании готового шаблона.
- Можно сделать несколько видов и предоставить посетителям возможность переключаться между разными темами, что повысит интерес и лояльность к веб-ресурсу.
- Простота работы на Вордпресс делает ее доступной для многих (в помощь будут видео-уроки в интернете). А значит, собственноручная разработка главной или создание дочерней темы позволит сэкономить деньги на привлечении сторонних дизайнеров и программистов.
- Можно воспользоваться возможностью дочерних тем – когда корректировки вносятся в дублеры таблицы стилей style.css, а главный файл при этом остается нетронутым. Это позволяет быстро отменить изменения, если они окажутся неудачными, а также не терять наработки при обновлении основной темы.
Краткая инструкция
Конечно, пройти полное обучение тому, как создать шаблон страницы, с помощью одной статьи не получится. Для начала важно понять основы – как делаются самые простые темы. На основе них уже можно заняться «творчеством» и создать лэндинг или сайт по своим желаниям. Сейчас дадим вам краткую шпаргалку с поэтапными инструкциями – она поможет понять, как происходит создание сайта.
Шаг первый: подготовительные работы
Перед началом работ надо убедиться, что у вас есть текстовый редактор (самым простым является Блокнот или Nodepad++, тем более скачать их можно бесплатно). Следующий шаг – установка движка WordPress и набора Denwer на локальный компьютер. Денвер – это пакет важных инструментов для программистов. С помощью них значительно облегчается и ускоряется процесс разработки и внесения изменения сайтов. Как его устанавливать, подскажет это видео:
Шаг второй: создают папку новой темы
Переходим в нужную директорию. Она чаще всего имеет следующий путь: . Здесь хранятся все темы – и стандартные, и произвольные. Заходим в нее создаем новую папку. Называем ее, например, «MyFirstTheme».
Теперь переходим в новую папку и обязательно добавляем два файла, сделанных через Nodepad++ или другой редактор. Это index.php и style.css. Пока эти документы пусть останутся пустыми, потом мы еще займемся их наполнением. Еще добавьте в «MyFirstTheme» сюда папку images. куда можно будет добавлять картинки для оформления шаблона.
В последствии в «MyFirstTheme» можно добавлять шаблоны для отдельных частей сайта: боковой панели (sidebar.php), сайта (header.php), записей на страничках (single.php), комментариев (comments.php) и пр. Набор дополнительных файлов зависит от структуры, которую вы запланируете для своего веб-ресурса.
Шаг третий: наполнение index.php
Первое, что надо сделать – заполнить индексный файл (index.php). Вот пример самого простого кода, по которому у сайта будет четыре области: header, main, sidebar и footer.
Site Title
В файле можно прописать любые элементы, которые вы хотите видеть у себя на сайте. Больше информации о прописывании кода index.php для создания тем в WordPress можно получить из видео:
Шаг четвертый: заполняем и style.css
Теперь надо открыть style.css, добавить и заполнить следующие поля (вписать вместо *** собственную информацию о сайте и владельце). Введенные данные будут отображаться в админке.
/*Theme Name: ***
Theme URI: http:// ***
Author URI: http:// ***
Description: ***
В последствии в этот файл можно будет вводить разные данные и правила, определяющие внешний облик страниц. Например:
(информация в /**/ — это комментарии, а не части кода)
На данном этапе пока рано задавать строгие параметры стилей, но при дальнейшей работе с файлом вам пригодится этот видеоурок:
Шаг пятый: разбиваем файлы
Все элементы, указанные в index.php следует продублировать отдельными файлами. В шаге первом в примере помимо главной части main были указаны header, sidebar и footer – следовательно, для них создаем свои документы в формате.php.
Например, создаем файл header.php, открываем index.php. находим соответствующий участок кода и вставляем его в новый файл. Это будет:
Site Title
Тоже самое проделывается для остальных частей. Это надо сделать для более легкой навигации. Когда элементов будущего сайта будет много, то отдельные файлы помогут лучше ориентироваться для проверки или внесения изменений.
Чтобы главный индексный файл был согласован с дополнительными, в index.php под блоками для каждой части надо прописать следующее:
Ниже приведен список стандартных файлов шаблонов, используемых WordPress. Их можно не использовать или добавлять свои разделы:
- Header – стиль шапки вашего сайта.
- Comments – шаблон для создания комментариев.
- Home – тема для главной страницы.
- Page — определяет тему, если создадите отдельные странички на сайте
- Category – шаблон для разбивки на категории
- Date – определяет стиль вывода даты-времени.
- Archive – шаблон для архивного раздела со старыми материалами.
- Search – файл, в котором указываются параметры для поиска на сайте.
- 404 — шаблон для страницы, на которой сообщается об ошибке 404 Not Found.
- Footer – определяет стиль подвала вашего сайта.
Когда впоследствии вы будете дорабатывать каждый элемент, понадобится наглядный видеоурок. Вот несколько подборок, которые могут вам помочь:
Шапка в header.php:
Добавление контента:
Стилизация комментариев:
Подвал на сайте:
Как можно вносить изменения без опасений
Когда надо вносить изменения на страницы сайта, то есть риск что-то неправильно прописать и не суметь «откатить» назад. Также может случиться так, что внесения в таблицу стилей исчезнут при обновлении главной темы.
Чтобы этого не произошло, можно создать дочернюю тему WordPress (подтему) – это дублер файла стилей style.css, не затрагивающий главный файл (изменения в одном не отменяют обновления в другом).
Создание дочерней темы WordPress не составит никакого труда. Надо сделать новую папку в основном каталоге C:\WebServers\home\localhost\www\НАЗВАНИЕ_ЗАДАННОЕ_ПРИ_УСТАНОВКЕ\wp-content\themes . В новой папке делаем свой файл style.css с вот таким содержимым:
Theme Name: НАЗВАНИЕ ТЕМЫ
Template: НАЗВАНИЕ ПАПКИ В ДОЧЕРНЕЙ ТЕМОЙ
Theme URI: ЗАПОЛНИТЬ
Description: ЗАПОЛНИТЬ
Author URI: ЗАПОЛНИТЬ
/* импортируем стили родительской темы */
@import url(«../НАЗВАНИЕ/style.css»);
/* Свои дополнительные стили */
Foo{ color:red; }
Теперь можно в админке зайти во «Внешний вид›Темы» и активировать дочерний шаблон. В дальнейшем можно работать в новом файле. В дополнение небольшая видео-презентация на тему дочерних шаблонов:
В этой статье мы узнаем, как создать wordpress тему. Для начала мы создадим HTML + CSS шаблон, который поместим в структуру wordpress темы. После того, как вы дочитаете эту статью, вы сможете создать собственный шаблон для wordpress, а точнее вы его создадите по ходу чтения и выполнения практических заданий. Вы будете знать как устроена тема и сможете самостоятельно реализовать ядро wordpress темы из других HTML/CSS шаблонов. Начнем?
Вступление – структура wordpress темы
Структура wordpress темы, предельно проста. В теме мы имеем файл index. php, он отвечает за сборку кусков шаблона. К этому файлу подключены другие: header. php, footer. php . Эти файлы (куски шаблона) используются на любой странице сайта. Мы знаем, что не все страницы строятся по единому шаблону, поэтому wordpress тема имеет другие файлы, такие как archives. php или single. php . Также можно создать свой тип страниц, если вы хотите, чтобы он категорически отличался от других на сайте. Это очень удобно.
Если вы внимательно рассмотрите структуру темы, и прочитаете содержимое файлов, то интуитивно поймете что к чему. Но все же имеются некоторые моменты, которые мы рассмотрим. Вы всегда сможете вернуться к этой странице и прочитать, как все делается.
А теперь рассмотрим создание шаблона поэтапно:
Шаг 1 – style.css
CSS файл, это файл параметров и дизайнерских решений для HTML элементов шаблона. Вы должны переименовать главный css файл (если он у вас не один) на style. css . Далее вам необходимо добавить в начале этого файла следующую закомментированную информацию:
/* Theme Name: Typography Paramount Theme URI: http://сайт/ Description: An image-less template focusing on Typography..0 . General comments/License Statement if any. . */
Этот код будет показывать информацию о теме для администраторов. Убедитесь что он в начале файла, и нету никаких пробельных символов перед ним!
Далее я создал еще один файл, под именем 1. css , и поместил его в папку typography-paramount , которую создал в папке wordpress темы. Нужно четко соблюдать эту структуру, чтобы wordpress смог видеть этот файл.
Шаг 2 – header и footer
На этом этапе мы создадим два файла: header. php и footer. php , о которых упоминалось раньше. Хотя они не основные и включены в тему опционально, они используются в большинстве шаблонов, поэтому мы их создадим.
Header.php
Начнем с этого файла. Создайте файл и присвойте ему имя header. php , после чего вставьте в него поданный код и сохраните. Этот файл будет отображаться на всех страницах нашего шаблона.
An imageless template focusing on Typography.
Typography Paramount
До сих пор, не было ничего особенного в отличии от простой html/css темы. Но теперь мы заменим некоторые элементы на wordpress теги.
>
/">
Это только некоторые известные мне теги. Намного больше вы найдете на официальном сайте: codex.wordpress.org .
language_attributes() – Выводит тип языка для тега .
bloginfo() – Используется для вывода информации о сайте, все параметры можно найти в кодексе вордпресса.
wp_title() – Возвращает title страницы.
wp_head() – подключает javascript и другие необходимые элементы.
get_option() – получает необходимые опции для работы с базой данных.
Footer.php
Теперь создадим так званный «подвал сайта». Создайте файл footer. php и поместите в него следующий код. Этот футер, будет отображать год, название сайта, и ссылки на rss.
php the_ time(" Y"); ?> - отображает текущий год.
- название блога.
- добавление ссылки на rssленту блога.
wp_footer() – это необходимо для самого ядра wordpress, который добавляет туда нужные ему элементы.
Шаг 3 – основной файл wordpress шаблона
Пришло время создать основной файл wordpress шаблона, который будет подключать верхушку и низ сайта. Создайте файл index. php . Это один из двух обязательных файлов wordpress темы (другой style.css). Вставьте ново созданный файл следующий код:
Этот код, помогает wordpress получить информацию куда подключать header. php и footer. php . Давайте добавим еще несколько строк между этими тегами:
">
at | |
Woops...
Sorry, no posts we"re found.
Этот фрагмент кода получает информацию об имеющихся постах в блоге и если они есть, показывает их. Если они не обнаружены, то отображается часть кода после , которая дает нам знать, что блог еще пустой.
Также добавлен тег , который выводит навигационные ссылки, чтобы пользователи могли читать ранее добавленные посты.
Пример работы wordpress темы
Теперь у нас есть подобие темы, давайте посмотрим пример работы созданной wordpress темы.
Мы имеем четыре файла в нашей теме, для начала это вполне достаточно. В следующей статье добавим файл single. php , которые будет показываться при выводе конкретного поста. Этот файл будет включать в себя , в отличии от файла index. php.
Если у вас еще остались вопросы или недопонимания по поводу создание wordpress шаблона (темы), выразите свои проблемы в комментариях ниже!Здравствуйте, дорогие друзья и читатели – сайт!
Сегодня я покажу, как с ноля создать шаблон для WordPress.
Если честно, никогда не думал, что буду в этом разбираться, но жажда знаний взяла надо мной верх. Сильное желание понять устройство и воплотить кучу идей, заставило сесть и заполнить все пробелы в своей голове.
Каждый день появляются новые фишки и способы их реализации в шаблонах WordPress. Конечно, всё изучить и за всем уследить физически невозможно, но имея представление о том, как всё устроено будет намного легче ориентироваться в любой теме.
Подготовка к созданию шаблона для WordPress.
Перед тем, как начать создавать шаблон для WordPress, с помощью , нужно подключиться к действующему серверу в Интернете или локальному, установленному на Вашем компьютере.
Чтобы не мучиться с передачей файлов через FTP , советую и разрабатывать шаблоны на виртуальной машине.
С точки зрения редактирования и правки кода, настоятельно рекомендую использовать — Notepad++ . Благодаря подсветке кода и простому интерфейсу, этой программе отдаёт предпочтение наибольшее количество Веб-мастеров.
Зайдите в корневую директорию, содержащую установки WordPress, перейдите в wp-content => themes и создайте там папку с именем — «New Theme 3.0» . Внутри этой папки разместите следующие файлы (расширения – PHP, CSS, PN G):
Шаг-1 style.css
Файл , будет содержать в себе все элементы стиля шаблона для WordPress. Именно его мы будем использовать первым, чтобы объявить имя шаблона, имя автора, ссылку на сайт с описанием и номером версии:
Эта информация, может быть изменена в любое время. Главное, чтобы всё было закомментировано ().
Теперь, в этом файле, нужно создать несколько основных определений стилей, которые в дальнейшем будут реализовываться в некоторых PHP файлах темы WordPress:
В этом коде используется тег — body , только для спецификации (определения) шрифтов используемых на сайте и цвета фона (всё меняется на любой вкус). Затем, мы объявляем атрибуты стиля для связи, а также некоторые из заголовков, которые мы будем использовать на протяжении всей нашей темы.
#wrapper — будет отвечать за полный размер веб-страницы. С #header , всё очевидно, это заголовок, а #blog , это последние сообщения на главной странице.
Остальные стили колонтитулов # (заголовков) footer и sidebar , будут применяться к соответствующим их названию файлам, которые мы рассмотрим чуть позже.
Шаг-2 header.php.
Теперь, мы создадим файл — , который будет содержать логотип и обычную навигацию:
На самом деле, подробно этот код объяснять нет смысла. Просто нужно запомнить, что он должен присутствовать в , во всех темах WordPress. Но, если Вам интересно, то расскажу.
В самом начале, мы объявляем тип документа и стандартный код, который будет использоваться для отображения названия сайта, вводимое в настройках администратора WordPress. Далее, идёт и PHP код, позволяющий работать с древовидными комментариями.
Шаг-3 Добавление пользовательской навигации.
Теперь, когда мы закодировали в нашу основную информацию, можно добавить пользовательское меню навигации. Но, прежде, нужно открыть файл functions.php и прописать специальную функцию:
Как видите, я прокомментировал участки кода. Первая часть add_action , используется для добавления поддержки пользовательского меню, а вторая, регистрирует саму область первичного меню. Далее, переходим к самой реализации в шаблоне WordPress.
Чтобы создать меню, нужно, ниже ранее прописанного кода в файле добавить строчку:
Давайте, немного её разберём. Основной функцией, которая здесь используется, является wp_nav_menu . Переменные sort_column , container_class , и theme_location , применяются в качестве аргументов. Sort_column — гарантирует порядок отображения, который задаётся в админке. Container_class — позволяет выбрать Вашего меню. Ну, а theme_location , просто присваивает primary-menu те значения, которыми мы манипулируем в реальном времени.
Шаг-4 Стиль навигации шаблона для WordPress.
Благодаря произведённым ранее действиям, наша WordPress тема, обрела пользовательскую навигацию. Но, обычное меню выглядит просто и не привлекательно. Чтобы это исправить, мы создадим класс nav в файле .
Как видите в .nav , мы сделали основные заявления, такие, как цвет фона, ширина навигации, выравнивание и положение элемента на мониторе. Далее, мы задали порядок размещения основных элементов и всплывающих окон.
Завершающим действием, будет добавление стилей для ссылок из выпадающего меню:
В .nav ul ul , мы устанавливаем абсолютную позицию и первую выпадающую ссылку делаем 100% , чтобы она появлялась под основной. Так же, мы изменили фон выпадающего окна, чтобы он отличался от существующего. К общим значениям, был добавлен атрибут z-index:99999 , который заставляет раскрываться выпадающие ссылки, над другими объектами.
На этом, добавление стилей для пользовательского меню шаблона вордпресс закончено.
Шаг-5 index.php.
Файл index.php , будет отвечать за главную страницу нашего сайта. Он будет содержать в себе код для включения верхнего и нижнего колонтитула, а также боковой панели, о которой мы поговорим позже. Ещё, в нём будет присутствовать функция включения самых последних сообщений на блоге и вывода соответствующих им миниатюр.
Следующие строки кода, используются для вывода всей информации в , sidebar.php и footer.php там, где Вы их разместите в WordPress шаблоне:
В принципе, разобраться в этом коде, не так сложно. После вызова , мы используем наш #blog , который был создан изначально в . Затем, добавляем цикл вывода последних сообщений блога и код для заголовка, который оборачиваем в
.
Здесь, присутствует кусок кода, который выводит миниатюры в постах на главной странице блога. Пока, он неактивен, но следующим шагом используя functions.php , мы заставим его заработать.
В пятом шаге, мы добавили кусок кода, который отвечает за отображение миниатюр сообщений на главной странице блога. На данный момент, ничего такого не происходит, так как он деактивирован. Для его активации, нужно открыть файл functions.php и ниже ранее установленного кода меню навигации, прописать следующее:
Рассмотрев внимательно код, сразу становится очевидным его назначение. Первая строка, добавляет поддержку миниатюр в Вашей теме WordPress, а вторая, задаёт точные размеры изображения.
Шаг-7 sidebar.php.
Думаю, Вы догадались, что файл sidebar.php , будет отображать всю информацию, которую мы хотим видеть на боковой панели. Так как мы уже задействовали его в index.php , то осталось, только поместить код в файл и наша боковая панель, будет выведена на главной странице сайта:
Да, это весь код, который нужно добавить в sidebar.php , чтобы сделать его функциональным. Теперь, я поясню его значение.
С помощью div , мы вызываем стили из файла , а код ниже, даёт нам возможность размещать виджеты из админки WordPress, в желаемой последовательности.
Но, как и многие функции, чтобы заставить работать, нужно в файле functions.php , прописать следующий код:
Этот код, просто говорит WordPress, что нужно зарегистрировать боковую панель, о которой мы заявили в sidebar.php . Для общего ознакомления могу сказать, что WordPress может легко работать в одной теме с несколькими боковыми панелями.
single.php — это то, что будет использоваться для одной страницы поста. Представленный ниже код, будет очень похож на тот, который мы поместили в index.php . Отличие лишь в том, что мы добавили шаблон комментариев с div и код, который должен включить comments.php :
С выходом вордпресс 3.0 разработчики решили облегчить жизнь авторам тем и шаблонов для WordPress. Они перешли на единый стандарт форм комментариев.
Код ниже, нужно положить в Ваш файл comments.php :
Это добавит вашим сообщениям стандартную форму комментариев.
В файл page.php , мы поместим код, который будет отвечать за статические страницы нашего сайта. Он будет практически идентичен тому, который был размещён в single.php . Единственное изменение, это отсутствие шаблона комментариев и добавление кода, который обрабатывает страницы, а не должности. Всё остальное будет одинаковым:
Файл category.php , служит для вывода сообщений из определённой рубрики или архива, к которым обращается читатель. Здесь, основная часть кода будет похожа на page.php и single.php , которые мы закодировали выше, за исключением куска в самом начале:
Фрагмент кода ниже, это единственное, что мы добавили после основного цикла:
Здесь мы используем кучу заявлений if/elseif в PHP , которые показывают то, что Вы просматриваете на блоге. К примеру, если мы смотрим категорию под названием — «», то она будет показана в h2 Архив из категории: «» перед всеми записями, разбивая их по датам или авторам.
Шаг-12 Настройка заднего фона сайта.
С появлением WordPress 3.0 была создана функция, которая даёт возможность изменять фон сайта из панели администратора, используя изображение или обычный цвет. Для этого, в файл functions.php , нужно вставить следующий код:
Итак, пользовательские фоны включены. Бонусом, мы добавим ниже код, который делает доступными ссылки архивов, комментариев и тегов из RSS ленты:
В завершении создания вордпресс шаблона, мы добавим кусок кода в footer.php , использующий #footer , который был объявлен в . Наш подвал будет содержать, только основную информацию об авторском праве, а так же RSS ленту новостей и комментариев:
На этом, создание самого простого шаблона (темы) для WordPress окончено.
Чтобы проверить его работоспособность, Вы можете скачать архив с созданной темой и активировать на своём ресурсе:
А у Вас, получилось создать свой первый шаблон для WordPress?
Друзья, пока я буду писать новый пост, Вы можете почитать следующее:
На сегодня это всё.
Всем кому понравилась статья, могут подписаться на обновления блога, чтобы получать уведомления о выходе нового материала на свой электронный ящик.
До новых статей…
С уважением, Денис Черников!
Интересное по теме:
Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:
96 комментариевА что думаете Вы?
Спасибо огромное за статью! Очень полезная информация для юных верстальщиков! Читал статью по рэпчик... =)
Денис Черников ответил:
Ноябрь 3rd, 2012 at 14:38
Пожалуйста, Александр! Трое суток над ней пыхтел, хотелось, чтобы все всё поняли! Надеюсь, что у меня получилось! Рэпчик рулит!
Александр Красильный ответил:
Ноябрь 3rd, 2012 at 15:13
Да я заметил, что статья не маленькая и куча мелких нюансом. Если их не учесть, то все пойдет наперекосяк! У меня друг занимается чисто версткой, сидит в офисе и зарплата приличная, в районе 4000—5000 грн. При этом он самоучка! Вот и мну есть желание, но не хватает времени...=(
Архив не удалось установить. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature
Вот что пишется, после того, как я хотел протестить эту тему. В чём тут дело?
С уважением и благодарностью, Евгений!
Спасибо за полезную статью. По мне, лучше переделать готовую тему под себя.
Денис, шаблон получился слегка узковатым, на главной в футере много вопросительных знаков вместо надписи, ну и редактировать запись выводится тоже только вопросительными знаками. Так и должно быть? и еще нет в верхнем меню главной страницы и неудобно заходить в админку, только через редакцию статьи. А в принципе очень неплохо, и понятно, спасибо.
Юлия ответил:
Ноябрь 4th, 2012 at 6:47
Не знаю уж в чем дело в шаблоне, но установленный фон не просматривается на блоге.
И ещё кое-что. На скринах виден не весь код.
Но всё равно, спасибо за статью! Вы — молодец! Успехов в дальнейшем!
С уважением, Евгений!
Спасибо за информацию. Обязательно попробую.
Денис, я убрал свою старую тему, а установил какую- то сложную и новую. Многих файлов,которые ты описываешь нет, например, single.php,page.php и category.php. Поэтому трудно сооринтироваться, как поступать в такой ситуации. Но вот картинки с миниатюрами меня заинтересовали. Когда нахожусь на главной странице, картинок не видно. Но стоит в поиске ввести пробел и запустить поиск, то все миниатюры сразу появляются. Как ты считаешь, в чем может быть причина?
Привет, Денис! Ну это уже высший пилотаж! Верстать самому темы WordPress, а не тупо скачивать шаблон! Но самому пробовать такую тему, пока нет времени. Еще много надо реализовать то, что есть у тебя интересного в дизайне сайта (стрелочка"вверх",отгибающийся уголок и т.п.).
Денис, и тема полезная, и глаза боятся...
Пока забил в закладки...
Попала к Вам случайно, но очень рада!!! Спасибо большое за информацию.
Статья очень актуальна, ну по крайней мере для меня. Сам вот недавно задался вопросом, как создать свою собственную тему для ВордПресс (шаблон), и нашел вот такую программку — Artisteer. Правда эта прога платная, НО, не для русского человека если Вы понимаете о чем я.
Денис а вы не пробовали менять цвет сайдбаров? или как это сделать по подробней,в css
Большое спасибо за статью. Искал подходящую информацию для настройки шаблона WP. В большинстве случаев просто общие фразы и без конкретики, а у Вас — другое дело!
Денис, у Вас в некоторых местах код обрывается из-за размеров картинки... А счастье было так близко!
Отлично, спасибо большое! Я так и думала, что чего-то недопоняла.
Денис, здравствуйте!
Большое спасибо за урок. Удалось внедрить свой дизайн) Но вот почему-то возникла проблема со вставкой фото в посты — почему-то не функционирует обтекание текстом фотографий. Это прописывается где-то в шаблоне? Никак не пойму в чем дело... подобных проблем раньше не было.
Заранее спасибо!
Денис Черников ответил:
Март 19th, 2013 at 15:45
Здравствуйте, Людмила!
Специально для этого я написал отличный пост. В нём показано, как сделать обтекание картинкам и видео в постах. Посмотрите через поиск или в списке статей поищите.
Людмила ответил:
Март 19th, 2013 at 15:57
Ок, спасибо!
С точки зрения редактирования и правки кода, настоятельно рекомендую использовать - Notepad++.
Я пользуюсь Sublime Text 2 — что-то среднее между NotePad++ и небезызвестным TextMate (Mac OS). В окно перетаскиваю проект и он появляется в виде дерева. Очень удобно! Плюс еще куча фишек которые упрощают жизнь получше NotePad++! Очень рекомендую))
Денис, я ничего не поняла уже на первом этапе. Где брать все эти коды? переписывать с Ваших принт-скринов? Может можно где-то взять шаблон и отредактировать?
Большое спасибо! Попытаюсь всё сделать как написано! Индивидуальный вид намного лучше))
Добрый вечер.Я новичек,и мне не совсем понятно как в ""Создание необходимых папок и файлов "" мне «„ Внутри этой папки разместите следующие файлы (расширения – PHP, CSS, PNG)“» я напечатала их через Notepad++ а как перенести???
Еще раз здраствуйте...как мне зделать это????:
Внутри этой папки разместите следующие файлы (расширения – PHP, CSS, PNG):
Искомые файлы, создаются на рабочем столе компьютера при помощи обычного блокнота, с присвоением нужного расширения.
я не могу понять как разместить Файлы В ПАПКЕ.При их копировании из блокнота полцчается ерунда.Поясните пож. ивенно как перенести с Notepade++ в папку фаилы.
Почему у меня злобный аватар?Я вообще добрая .Как мне его сменить???
Здравствуйте Денис! Я новичок, подскажите пожалуйста как мне запилить тему в ворд пресс, во Внешнем виде/Темы моя тема не отображается...((((
Спасибо, статья очень помогла!
только добавьте в footer.php , а то без этого админ панель не видна.
Денис, доброго времени суток!
Если честно, я ничего не поняла из написанного...Заслуга в этом не Ваша — у меня знаний ноль абсолютно в этой области и для меня Ваши записи оказались китайской грамотой...Напрашиваюсь либо на некоторые разъяснения (если позволите), либо просто на удаление своего коммента:)
Как изменить название шаблона, которое для некоторых тем отображается в левом боковом меню админки?
Попробовала скачать Ваш шаблон — там ни фон, ни шапка не меняется — данные вводятся, цвет выбирается — только на сайте никаких изменений не происходит:)))))
Здравствуйте! А могли бы мне свертать тему за умеренную плату? Еть представление как хочу видеть вой сайт, есть фото для темы, но нет умений работать с фотошопом и HTML
Сергей ответил:
Март 23rd, 2014 at 1:50
Денис, Я прошу прощения зря вы не промышляете версткой вам всего за 3 вечера получилось нарисовать такой шедевр, года 2 назад я такую информацию по крупинкам собирал а тут такой клад ссылку на вас в контакт и низкий поклон вам за проделанную работу, есть правда кое какие недочёты. Но все ровно даже при условии всех мелочей эту статейку мне бы года 2 ох как бы мне это помогло с моим первым проектом. А что нибудь по яваскрипту в вашем арсенале имеется, просто у людей вашего уровня образованности всегда интереснее инфу читать изучать.
Денис Черников ответил:
Март 23rd, 2014 at 12:12
Сергей, я промышляю иногда вёрсткой, но не люблю копаться в уже загаженном коде пытаясь найти ту ниточку, которая убила весь сайт! Мне проще с ноля делать, чем искать ошибки на сайтах клиентов. А по скриптам у меня есть отличный мастер, который всё делает грамотно и красиво!
Сергей ответил:
Март 23rd, 2014 at 23:59
Да нет мне не программист нужен а информация для лик-беса я правда уже увидел у вас на сайте целый раздел по яваскрпт в общем спасибо за ваш ресурс, очень информативный.
Помогите, у меня не редактируется styles.css из админки. захожу «внешний вид — редактор», выбираю стилевой файл, но он открывается пустым. по фтп все редактируется, но это не удобно для меня.
помогите залить самописный сайт на WP (заплачу)
Денис, спасибо огромное за статью! Очень ценная и полезная информация. Обязательно ей воспользуюсь, когда буду создавать свой шаблон с нуля.
Но пока для сайта выбрана готовая тема, а я совсем «чайник»... Была бы Вам очень признательна за помощь!Итак, мне нужно было на страницу «А» вывести новости только из категории «А». Я скопировала страницу index.php, добавила на нее строку кода и выбрала в качестве шаблона для страницы «А». Теперь на ней отображаются только нужные записи, но все оформление слетело...) чтобы оформление этой страницы не отличалось от оформления сайта, нужно что-то добавить в таблицу стилей? или я изначально все сделала не так? Спасибо)
Денис Черников ответил:
Март 30th, 2014 at 21:35
Елена, я такие консультации не даю! Я понятия не имею что Вы там делаете, а по описанию не всегда понятно!
Елена ответил:
Апрель 1st, 2014 at 16:51
Денис, изменю вопрос: возможно ли выводить на страницу с названием «А» статьи только из рубрики «А», а на страницу с названием «В» статьи только из рубрики «В»? Спасибо.
Сергей ответил:
Март 30th, 2014 at 22:37
Елена Я не уверен что вам это подойдёт но вашу задачу я бы решил при помощи 2х плагинов Display Widgets это плагин который определяет отображение виджетов на любой вам нужной странице а этот Recent Posts Widget Extended делает красивый вывод новостей, но Я повторюсь что так сделал бы Я
Сергей ответил:
Март 30th, 2014 at 22:41
Все таки прочитав и переосмыслив ещё раз понял что этот вариант не очень для вашего Елена вопроса.
Елена ответил:
Апрель 1st, 2014 at 17:16
Сергей, спасибо за Ваш ответ! Попробовала плагин Recent Posts Widget Extended. Полезная вещь) Мне бы вот точно такой же вывод статей, но не в виджетах, а на основной странице) Спасибо!!
Денис, помогите разобраться с темой.
За основу была взята Ваша тема из поста. Переделал все под себя, все устраивает, но не видно комментариев. Форма комментов есть, они проходят на модерацию, но после апрува показывает только количество комментов к посту и саму форму, а комменты не видно.
Думал во время работы с файлами что то потер, но нет...
Установил Ваш оригинал, та же проблема, подскажите в чем может быть дело, буду очень признателен.
ЗЫ. Думаю может дело в том что движок обновлен и после обновы что то не так стало. Есть еще вариант попробовать сменить версию php у хостера.
Денис, спасибо большое за доступную для понимания инфу. Уже давно ищу сайт со стандартными заготовками, которые могли бы служить исходниками для любой темы. Везде описывается так: создается файл index.html, который затем кромсается и разрасывается частями по папкам.php. При этом в index.html для образца размещается обычный и точкованный текст. Но ведь ни в одной теме никакого текста изначально нет (он пишется уже пользователем после создания страницы или записи). После вашей статьи все стало на свои места. Отдельные фрагменты мозаики в голове сложились в единую картинку. Еще раз, спасибо!
Добрый день, Денис, прочитал статью сделал Всё как Вы написали, НО используя свои записи и цвета,ВСЁ ЗАРАБОТАЛО. Это хорошо))
ВОпрос: Как перенести сайдбар так чтоб он стал слева, и второй вопрос: а нет у вас статьи как в свой шаблон сунуть свои же картинки (то есть есть дизайн в PSD уже нарезанный, хочу его слить с шаблоном).
Заранее спасибо за ответ.
Сейчас объясню, как сделать из простого HTML-шаблона тему WordPress на примере дизайна из той статьи.
Адаптировать дизайн под WordPress может понадобиться по многим причинам, например, вы переносите на CMS свой некогда статичный сайт, или вам понравился дизайн, которого в коллекции WordPress ещё нет, или вы просто хотите разобраться, как устроены темы этой CMS изнутри.
Итак, приступим.
Распределяем код по файлам
1. Скачайте шаблон и распакуйте его в папку с темами WordPress (адрес вида адрес_блога_wordpress/wp-content/themes/ ). Если хотите, переименуйте папку с темой на свой вкус. Например, у меня шаблон располагается по адресу адрес_блога_wordpress/wp-content/themes/MyTheme/ .
2. Переименуйте файл styles.css в style.css .
3. Откройте style.css в редакторе кода (таком, как Notepad++) и в самое его начало вставьте следующие строки:
/* Theme Name: MyTheme Theme URI: http://test1.ru Author: NoName Author URI: http://test1.ru Description: Example of test Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
Как вы могли догадаться, это служебная информация о теме оформления: название, автор, описание, лицензия, версия и т. д. Правые части строк вы можете заменить на собственные, то есть задать свои авторство, версию, описание и прочие данные.
4. Создайте файлы header.php , index.php , sidebar.php , footer.php и распределите по ним код из index.html .
4.1. В header.php скопируйте код по строчку , так как этот файл отвечает за верх сайта. styles.css замените в коде на style.css - новое корректное имя файла.
4.2. В index.php вставьте код основного блока (со строки по строку ).
4.3. В sidebar.php скопируйте код бокового меню (с по ).
4.4. В footer.php вставьте оставшиеся строки (с до конца документа index.html ).
5. Удалите index.html .
6. Перейдите в админ-панель и убедитесь, что шаблон MyTheme появился в разделе Внешний вид -> Темы . Вы даже можете попробовать его просмотреть или активировать, но ничего хорошего из этого пока не получится, ведь шаблон с WordPress мы ещё никак не интегрировали.
Адаптируем header
Теперь мы начнём из статичного шаблона делать динамическую тему, в которую будут подгружаться данные и настройки WordPress.
В шаблоне будут встречаться PHP-вставки. Начинается такой код с . Между ними расположен PHP-код, чаще всего вызывающий функции CMS
1. Откройте файл header.php и замените содержащийся в нём код до блока
на следующий:
>
"> "> " type="text/css" media="screen" />Мы сделали динамическим блок
Код вызывает функцию, возвращающую языковые атрибуты в контейнер.
">
Вместо того, чтобы прописывать кодировку константой, мы вызвали функцию, которая берёт значение из настроек CMS и автоматически подставляет его в код, то есть для смены кодировки уже не придётся править файл темы.
Важная функция, обеспечивающая работу на странице стилей, плагинов и скриптов.
2. Перейдите к редактированию файла index.php. В самом его начале пропишите
,
Строчки вызывают файлы шапки, боковой панели и низа сайта.
Теперь вы можете просмотреть или даже активировать MyTheme. В результате браузер отобразит уже знакомый шаблон со статическим меню и одной-единственной страницей. Чтобы меню стало динамическим и настраиваемым, а вместо одной страницы отображались все помещённые на сайт материалы, нужно преобразовывать шаблон дальше.
Делаем динамическим верхнее меню
Пока мы имеем полностью статическую тему оформления, в том числе и с неизменным горизонтальным верхним меню. Пока его нельзя настроить из админ-панели, и если оставить код в нынешнем виде, то для вставки/удаления/переноса пунктов придётся каждый раз редактировать файл header.php , что крайне неудобно.
Чтобы не мудрствовать лукаво и не погружаться в пучину увлекательного мира программирования, зададим динамическому меню статичное название. Вместо таблицы горизонтального меню вставьте код
так, чтобы получилось следующее:
Для того, чтобы меню стало отображаться, в панели управления сайтом откройте Внешний вид -> Настроить -> Меню и либо переименуйте уже созданное меню в menu, либо создайте меню и настройте его на своё усмотрение, но обязательно присвойте ему имя menu.
Суть действий в том, что файл header.php функцией wp_nav_menu("menu=menu"); открывает меню под названием menu, которое, чтобы отобразиться, должно быть правильно названо и настроено в панели администрирования WordPress. Название menu вы можете поменять на любое другое, главное, чтобы имя совпадало и в настройках сайта, и в коде header.php .
Навигация явно куда-то съезжает, хоть и делает это красивой лесенкой. Так происходит потому, что меню нашего шаблона было неосмотрительно реализовано внутри таблицы, а надо было оформлять его списком. Частично исправить ситуацию можно, добавив в файл style.css следующий код:
#menu ul { margin: 0; /* Обнуляем значение отступов */ padding: 4px; /* Значение полей */ font-size: 18px; } #menu ul li { display: inline; /* Отображать как строчный элемент */ margin-right: 5px; /* Отступ слева */ padding: 3px; /* Поля вокруг текста */ }
Так как он прокомментирован, дополнительные объяснения вряд ли нужны. Остаётся обновить страницу и посмотреть, что список наконец-то стал горизонтальным.
Меню, конечно, можно сделать ровней и красивее, но к адаптации шаблона отношения это действо не имеет, зато крепко связано с CSS, который вы можете подробно изучить.
Завершаем «шапку»
Единственные элементы файла header.php , оставшиеся статическими - имя и описание сайта. Чтобы они брались из настроек, задаваемых в админ-панели, замените отвечающий за вывод текста в шапке код на следующие строки:
Обновите страницу - результат не заставил себя долго ждать.
Работа с файлом header.php на этом завершена, в итоге он имеет следующий код:
>
"> "> " type="text/css" media="screen" />Выводим посты
Переходим к части, содержащей основной контент страницы - редактироваться будет файл index.php .
Удалите содержимое блока right и вместо него вставьте код динамического отображения постов. Либо же удалите из файла весь код и вместо него вставьте следующее:
">
/ /А здесь нет ничего:(404
Начало цикла, благодаря которому страница будет выводить посты, пока они не закончатся.
">
Отображает заголовок поста.
/ /
Дата в формате день, месяц (сокращённо), год. Теги, комментарии.
Вывод поста.
Конец цикла при условии, что записи были.
Если же материалов нет, вывести об этом соответствующую надпись и покинуть цикл.
Вывод постраничной навигации при условии, что на одной они не помещаются.
Простой с виду код глобально изменил страницу - блог стал по-настоящему динамическим. Каждый пост можно посмотреть, ссылки работают.
Дальнейшее оформление и размещение элементов зависит только от вашей фантазии и навыков вёрстки - с отображением данных можно делать всё, что угодно, но работа над шаблоном ещё не завершена.
Добавляем виджеты
Слева от основного контента в шаблоне есть панель, на ней - блок Информация (своего рода виджет) и боковое меню. Информационный блок не должен быть статичен, а так как он очень напоминает виджет, предлагаю виджетом его и сделать. Для этого необходимо:
- зарегистрировать блок виджетов;
- вывести его в нужном месте.
Теперь подробнее.
1. В каталоге темы создайте файл functions.php. В нём хранятся функции, обеспечивающие работу шаблона. Также он может содержать и другие пользовательские процедуры.
2. Внесите в следующий код:
"MySidebar", "before_widget" => "", "after_widget" => "", "before_title" => "
", "after_title" => "
",)); ?>Этот код регистрирует блок виджетов. Вместо MySidebar вы можете вписать любое другое название. Примерно такой же функцией в этом файле можно регистрировать и меню, но я решил обойтись малой кровью и этого не делать, чтобы соприкосновение с PHP сделать минимальным, а заодно и показать два разных подхода к решению одной задачи.
3. В файле sidebar.php сотрите строки:
Информация
Далее...
и вместо них запишите:
Блок Информация ожидаемо исчез, сбоку осталось только пока ещё статическое меню.
4. Зато перемены к лучшему произошли в админ-панели - раздел Внешний вид обзавёлся подпунктами Виджеты и Меню . Перейдите в первый. Откройте его и посмотрите: внутри появился зарегистрированный в файле functions.php блок (у меня это MySidebar).
5. Чтобы воссоздать информационный блок, перетащите на сайдбар виджет Текст , в поле Заголовок введите Информация , в поле Текст - код
Мы предлагаем Вам праздничные скидки. Далее...
6. Обновите страницу блога - блок удалось воссоздать практически один в один (мелкие нюансы меняются в файле style.css и заострять на них внимание я не буду).
Адаптируем меню
Вторая часть боковой панели - вертикальное меню. Его тоже нужно переделать из статического в динамическое, чтобы редактировать затем прямо из админки.
1. Удалите огромный вложенный список меню в файле sidebar.php и вместо него введите код:
2. В панели управления WordPress откройте Внешний вид -> Настроить -> Меню , нажмите кнопку Добавить меню, назовите его так, чтобы имя в админ-панели совпадало с именем в коде страницы sidebar.php (у меня это left_menu ) и добавьте все необходимые пункты.
3. Сохраните изменения, обновите страницу и убедитесь, что динамическое меню левой части сайта работает и отображается правильно.
Код страницы sidebar.php по сравнению с исходным сильно уменьшился и в итоге стал таким:
Меню
Фактически статичной осталась только надпись Меню . И то потому, что меняться вряд ли будет, хотя и её легко можно «оживить», например, реализовав этот блок в виде ещё одной области виджетов и добавив на него блок Произвольное меню, но это, если внимательно читали статью, вы можете теперь легко сделать самостоятельно.
Работаем с файлом footer.php
Прежде чем верстать шаблон сайта в HTML/CSS, его надо проработать. Отрисовывать дизайн принято в программе Photoshop . Готовый макет сохраняется в файл формата .PSD .
В качестве примера создадим дизайн сайта на рисунке ниже.
1. Открываем Photoshop и создаём в нём новый документ (Файл -> Создать или Ctrl+N ).
2. Устанавливаем начальные параметры. На практике продумать дизайн с точностью до пикселя практически невозможно - в процессе вёрстки обязательно нужно будет что-то поменять, переместить, переделать. Поэтому размеры можно задавать приблизительные, причём ширину и высоту документа желательно указывать заведомо больше планируемых размеров сайта, чтобы в макете точно уместились все элементы. Наш документ сделаем 1000 пикселей шириной и 1500 пикселей высотой. Обратите внимание: пикселей, а не сантиметров. Другие параметры можно не трогать.
3. Включаем линейки. Во время работы они понадобятся, ведь линейки позволяют очень точно отмерять расстояния. Проверьте, включены ли линейки у вас. Если да, то вы увидите шкалы рядом с левой и под верхней панелью инструментов.
Если линеек нет - включите их (Просмотр -> Линейки или Ctrl+R ).
Линейки должны показывать величину в пикселях. Чтобы переключиться на них с другой меры длины, щёлкните на линейке правой кнопкой мыши и в открывшемся меню установите соответствующий флажок.
4. Проверяем, чтобы размер шрифта был указан в пикселях, а не в пунктах. Если настроено не так, идём в Редактирование -> Настройки -> Основные , в отобразившемся окне переходим на вкладку Единицы измерения и линейки , в выпадающем списке Текст выбираем Пиксели и нажимаем OK .
5. Сразу делаем подложку сайта. У нас это градиентная заливка оранжевого, переходящего в жёлтый цвет. На панели слева выбираем инструмент Градиент .
На появившейся вверху панели жмём кнопку Зеркальный градиент , выбираем цвет на палитре левее.
Используя инструменты открывшегося окна Редактор градиентов , выбираем нужные цвета. Чтобы задать точный цвет контрольной точки, щёлкните на ней, нажмите кнопку Цвет и в окне палитры цветов укажите его в формате RGB, HSB, CSS или любом другом из доступных.
В результате манипуляций градиент получился следующим.
Чтобы применить градиент к текущему слою, проводим над ним указателем, удерживая при этом нажатой левую кнопку мыши.
6. Сохраняем подложку в файл. То, что мы сделали, должно отображаться под основной страницей и занимать всё окно браузера целиком - своего рода подложка. Например, ширина сайта - 800 пикселей, а разрешение экрана у пользователя гораздо больше. Оставшееся пространство (всё, кроме тех самых 800px, которые будут заняты блоком страницы) заполнится градиентным фоном.
Так как разрешение экрана нельзя предугадать, из созданного фона можно вырезать полоску толщиной в один пиксель и сохранить как картинку. Браузер будет заполнять задний фон ею по всей ширине.
6.1. Выбираем инструмент Прямоугольная область .
6.2. Выделяем полоску произвольной ширины, но по всей длине слоя.
6.3. Копируем выделенную область (Ctrl+C ).
6.4. Создаём новый документ (Ctrl+N ), устанавливаем для него ширину 1 пиксель и вставляем скопированное (Ctrl+V ).
6.5. Сохраняем файл в JPG -формате.
7. Создаём фон страницы. Фоном будет простой белый цвет. Выбираем инструмент Прямоугольник и в окне свойств задаём нужные параметры. У нас получился прямоугольник 800x1100 пикселей, левый верхний угол которого лежит в точке 100,0.
8. Делаем фон шапки. Градиентная заливка, похожая на подложку, размерами 780x80px.
Сохраняем его отдельным графическим файлом шириной в 1 пиксель, как делали это с подложкой.
9. Создаём верхнее меню. С помощью инструмента Горизонтальный текст добавляем на макет первый пункт меню - Главная . Слой создастся и даже переименуется автоматически, так что с ним можно ничего не делать.
Здесь важно, чтобы все пункты распределились равномерно, поэтому крайне рекомендуется использовать линейки. Чтобы вытянуть вертикальную, проведите указателем, удерживая при этом нажатой кнопку мыши, слева направо. С помощью линеек отмеряйте расстояние, учитывая, что каждый пункт меню должен занимать в нашем случае 120 пикселей.
10. Аналогично вставляем остальные пункты меню.
11. Добавляем логотип. У нас уже есть готовый, поэтому его остаётся только аккуратно вставить в макет. Для этого нажимаем Файл -> Открыть , затем щёлкаем на изображении и, удерживая нажатой кнопку мыши, перемещаем его на заголовок документа-шаблона, когда он откроется, перетаскиваем картинку в нужное место макета и отпускаем кнопку мыши.
12. Пишем имя и слоган сайта. Уже известным нам инструментом дополняем уже почти созданный логотип надписями.
13. Переходим к боковой панели. Для начала создадим и сохраним отдельным файлом градиентную заливку для её заголовков. С инструментами знакомы, пояснения не требуются.
14. Добавляем на только что созданный градиент текст-заголовок информационного блока.
15. Рисуем обрамление области. Для этого достаточно использовать прозрачный прямоугольник с чёрными линиями контура. Выбираем инструмент Прямоугольник, задаём тип заливки фигуры Нет цвета, щёлкаем значок Задать тип штриха фигуры и выбираем чёрный цвет, иначе линий не будет. Если контур получился слишком толстым, устанавливаем ширине линий значение 0,5 пт.
16. Ниже добавляем заголовок блока с градиентной заливкой, как в п. 12-13.
17. Создаём блок меню левой панели. Добавляем оранжевый прямоугольник шириной 100px с жёлтым контуром 0,2 пт.
18. Добавляем на него текст.
19. С помощью дублирования слоёв и линеек создаём ещё пять пунктов меню левой панели.
20. Прописываем текст в основной части страницы, используя всё тот же инструмент .
21. Добавляем фото в основную часть страницы, как мы делали это с логотипом. Для копирования изображения просто перемещайте его мышью, удерживая при этом нажатой клавишу Alt . Если вдруг картинка не подходит по размеру, используйте инструмент Трансформация (Ctrl+T ).
22. Рисуем фон нижней части сайта - оранжевый градиент длиной 64 пикселя.
23. Сохраняем полоску нижнего фона шириной 1 пиксель в отдельный графический файл.
24. Уменьшаем высоту страницы. Получилось так, что все элементы уже прорисованы, а лишнее место ещё осталось. Вот тут-то нам и пригодились осмысленные имена слоёв. Среди прочих выбираем фоновый слой (у нас он так и называется - Фон) и с помощью инструмента Трансформация уменьшаем высоту нашего белого прямоугольника до нижнего края футера страницы.
25. Сохраняем шаблон в файл формата .PSD (Файл -> Сохранить ).
26. Результатом сего действа и стал ещё простой, но уже нормально выглядящий шаблон сайта.
Теперь из PSD-макета остаётся средствами HTML/CSS сверстать шаблон сайта, но об этом я расскажу уже в следующей статье.
