Первый отвечает за создание блоков сайта, второй - за добавление ссылок на сайт wordpress. С помощью третьего могут создаваться столбцы. Последний нужен для настройки ячеек. Первым делом нужно определиться с местом, где будет располагаться навигация. Обычно она находится прямо под шапкой. Верстка навигации это достаточно быстрый процесс. Ниже представлен небольшой пример того, как можно сверстать небольшой блок навигации.
Как вы уже поняли, условным названием блока с навигацией является navigacia. Блок состоит из одной ячейки «название страницы». Обратите внимание на то, что каждый тег закрывается с помощью символа «/». Если теги не закрывать, то могут возникнуть сбои в работе сайта.
Не должны быть большими. Наиболее популярными являются календарь, облако меток, мета, архивы, поиск, rss, видео и последние новости. Чтобы их добавить, вам понадобится перейти во вкладку «Внешний вид» и кликнуть по полю «Виджеты». Затем вы увидите перечень доступных вариантов. Также виджеты можно устанавливать с помощью плагинов. Их можно скачивать как с официального сайта, так и прямо через панель администратора вордпресс. Для добавления видео, которое есть в YouTube, вам достаточно будет лишь вставить ссылку на него в желаемое место на сайте. В ином случае видео нужно будет загружать на сайт. Если вы увлекаетесь программированием, то можете добавить на сайт свой собственный виджет. Для этого вам потребуется кликнуть по опции «Текст» и ввести туда необходимый код.
В настройках каждого виджета вам будет предоставлена возможность изменить стандартные заголовки. Также вы можете выбрать место отображение виджета (правая или левая боковая панель) и так далее. С удалением виджета проблем не должно возникнуть. Для этого вам достаточно будет кликнуть в настройках по кнопке «Удалить».
Создание уникальной темы при помощью специальных программ и сервисов с нуля
1. Наиболее популярной является программа Artisteer. Для работы с ней вам не понадобятся особые знания в области программирования. Процесс создания происходит в визуальном режиме. То, что вы нарисуете, будет представлено с помощью кода, который соответствует международному стандарту «XHTML 1.0 Transitional». Благодаря этому тема вашего будущего сайта будет поддерживаться всеми браузерами.
Для работы вам будет предложен широкий выбор различных эффектов, стилей и многое другое. Данная программа поддерживает русский, английский, немецкий и другие языки. Стоит отметить, что данная программа имеет некоторые недостатки. Наиболее значительным является то, что программа стоит около 50 долларов. Есть также бесплатная версия, но она содержит совсем немного опций. Для увеличения уникальности шаблона вам придется дополнительно покопаться в кодировке.
Перейдем непосредственно к инструкции по работе с данной программой Artisteer. Как только вы откроете программу, первой появится опция под названием «Идеи». Она предложит вам различные комбинации стандартных элементов. Если вы хотите, чтобы ваш дизайн был уникальным, то
вам эта опция не понадобится. Для того чтобы освоить программу, вам достаточно покликать по опциях и просмотреть параметры. Эта программа легкая, поэтому проблем с этим не должно возникнуть.
Обратите внимание на опцию «Верхний колонтитул». Она отвечает за отображение шапки сайта. У вас есть возможность использовать стандартную шапку или же загрузить свою. Как сделать уникальную шапку, вы уже знаете.
Для настройки ширины сайта, вам нужно будет использовать опцию «Лист». Ширина задается в пикселях. Данная программа изначально предложит вам ширину в 900 пикселей. Также с помощью данной опции можно настроить различные эффекты (тень, закругленные края и так далее).
Опция «Фон» отвечает за настройку фона, как вы уже догадались. Его можно выбрать среди стандартных вариантов или же загрузить собственный.
Если вы хотите настроить расположение элементов сайта, то вам стоит использовать опцию «Макет».
Не менее важной опцией является «Статьи». В ней происходит верстка дизайна статей сайт. Сюда входит расположение картинки, текста, комментариев, различных блоков и так далее.
Чтобы выбрать цвет, размер или шрифт текста, вам понадобится опция «Цвета и шрифты».
После проделанных действий вы можете сохранить ваше творение. Для этого нужно кликнуть по палитре, которая находится в верхнем левом углу. Перед вами появится окно. В нем нужно кликнуть «Сохранить как». После этого вам останется лишь выбрать имя файла и место его расположения. Обратите внимание, что файл должен иметь расширение «.artx». При дальнейшей работе с программой для сохранения вам понадобится лишь 1 раз кликнуть «Сохранить».
Когда ваша тема будет полностью доработана, можно перейти к ее экспорту. Чтобы это сделать, вам потребуется кликнуть по вкладке «Экспорт» и выбрать «Тема WordPress».
2. Если вы в совершенстве владеете Adobe Photoshop, то вам стоит установить к нему дополнение Divine Elemente. Благодаря нему вы сможете с легкостью конвертировать файл формата «.psd» в тот формат, который будет поддерживаться всеми браузерами.
3. Если у вас нет денег на Artisteer, то можно использовать бесплатный сервис Lubith. Он доступен в онлайн режиме на официальном сайте lubith.com. Сервис содержит много полезных опций и отличается особой быстротой работы. Всего за пару минут вы полностью овладеет всеми его опциями.
4. Аналогом предыдущего сервиса является WordPress Theme Generator. Он также является легким в работе и содержит широкий выбор различных опций. Данный сервис является абсолютно бесплатным. Единственным недостатком является то, что данный сервис поддерживает только английский язык.
5. XTemplate Generator является русифицированным генератором тем для сайта. Его опции находятся в левом окне, а в правом вы можете увидеть визуальный результат ваших работ. Этот генератор также является бесплатным.
6. WPTheme Generator намного мощнее, чем предыдущие, потому как содержит в несколько раз больше опций. Единственным нюансом будет то, что данный сервис платный. Цена составляет 30 долларов. Стоит также отметить, что верстка в нем осуществляется полностью на английском языке.
7. CSSEZ является не менее популярным, чем предыдущий. Перед началом работы, вам потребуется пройти небольшую регистрацию. В данном сервисе вы можете сверстать до 4 столбцов для материалов сайта. Фон можно загрузить собственный.
8. Dotemplate предоставить вам около 11 различных шаблонов wordpress, которые можно будет изменить. Единственным недостатком является отсутствие возможности загружать свой графический файл. Поэтому шапку придется загружать самостоятельно через файловый менеджер сайта.
9. Weebly отличается от остальных наличием опции добавления видео прямо с YouTube или Google в любое место сайта. Сайт, на котором есть видео, пользуется успехом, потому как визуально информация быстрей и проще воспринимается.
10. В сервисе Eris’ Template Generator вы сможете добавить до 3 столбцов для отображения материалов сайта, добавить различные теги, календарь и другие виджеты.
Эта статья поведает вам о том, как создать самую простую тему для WordPress. Хотя Codex и предоставляет обширную документацию по этому вопросу, но мне она кажется несколько сложной для новичка. Поэтому в данном «туториале» я расскажу принципы работы тем для WordPress и покажу как адаптировать под них сырой HTML-шаблон. При этом от вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна.
1. Frontend блога
До того, как мы начнём, давайте взглянем на стандартную тему WordPress и разберёмся из чего она состоит. Отметим элементы (шапка, заголовок поста, форма поиска, навигация, подвал и т. д.).
Стандартный Frontpage (index.php
)
Стандартный Single (single.php
)
2. Photoshop-макеты
Основываясь на внешнем виде стандартной темы, разработайте Photoshop-макеты для вашего блога. Для примера я использую GlossyBlue — одну из моих бесплатных тем. Скачайте demo.zip , чтобы увидеть готовый файл Photoshop.
3. HTML и CSS
Когда PSD-дизайн готов, создайте HTML+CSS шаблон каждой страницы. Следуя шагам этой инструкции, вы можете использовать мои HTML файлы GlossyBlue из demo.zip
. Распаковав архив, вы увидите index.html, single.html
и page.html
. Далее я буду использовать их для превращения в шаблон.
Зачем сперва создавать статический HTML?
Главным образом это нужно потому, что это значительно упростит процесс разработки. Обычно я создаю HTML файл для каждого шаблона, проверяю их валидность (HTML и CSS разметку) во всех браузерах. После этого остаётся лишь вырезать и вставить код WordPress. Так что можно уже не беспокоиться об ошибках в HTML или CSS.
4. Как работает тема WordPress
Если вы перейдёте к папке стандартной темы (wp-content/themes/default
), то увидите много php-файлов (называемых файлами шаблонов) и один файл style.css
. Для формирования страницы WordPress обычно использует несколько файлов шаблонов (index.php
, header.php, sidebar.php,
и footer.php
).
Подробнее в Codex: «Архитектура сайта» и «Иерархия шаблонов» .
5. Дублирование файлов шаблонов
Скопируйте папку HTML
из GlossyBlue
в папку wp-content/themes
. После этого перейдите в директорию темы default
, скопируйте comments.php
и searchform.php
в папку glossyblue
.
6. Style.css
Перейдите в папку темы default
, откройте файл style.css
. Скопируйте закомментированный в начале файла текст и вставьте в style.css
темы GlossyBlue
. Если хотите, можете изменить название и данные об авторе.
7. Разделение файлов
Теперь нам нужно понять где разделить HTML-файлы на части: header.php
, sidebar.php
, и footer.php
. На скриншоте ниже видно упрощённую версию моего index-файла, а также принцип его деления.
8. Header.php
Откройте index.html
. Вам нужно вырезать участок от верха до места, где заканчивается , вставить его в новый php-файл и сохранить как header.php
.
Перейдите в папку темы default
, откройте новый header.php
. Скопируйте и замените теги, где этого требует php-код: title, link, таблицы стилей, h1 и div class=description.
Меню навигации
(wp_list_pages
) Замените тэги li
в ul id=nav
на ;
9. Sidebar.php
Вернитесь к index.html
, вырежьте код с того места, где начинается form id=searchform
и до закрытия тега div id=sidebar
, поместите его в новый php-файл и сохраните как sidebar.php
.
- Замените form id=searchform
со всем содержимым на .
- Замените теги li
категорий на
- Замените теги li
архивов на
10. Footer.php
Вернитесь к index.html
. Извлеките оттуда код от div id=footer
включительно с тегом div id=footer
и до конца /html
затем поместите в новый footer.php
.
Недавние записи
Тут я использовал query_post для отображения 5 последних записей в блоге.
«Последние комментарии»
«Последние комментарии» сгенерированы плагином (включён в папку темы)
11. Index.php
Теперь в вашем index.html
должен остаться только div id=content
. Сохраните файл как index.php
. Впишите строки: get_header
, get_sidebar
, и get_footer
в том порядке, как они встречаются в шаблоне.
12. Разбор цикла
Цикл последовательно отображает записи блога в зависимости от ваших настроек. Скриншот ниже иллюстрирует его работу. Изначально цикл проверяет наличие записей и если таковых не находит, то выдает сообщение «Not Found»
.
13. Копирование цикла
Перейдите к директории темы default
, откройте index.php
. Скопируйте цикл из стандартного index.php
в свой — между div id=content../div
. После этого замените статический текст тегами шаблона WordPress: post date, title, category, comments, next и previous link.
14. Предпросмотр темы
Поздравляю! Вы создали публичную часть (основную часть шаблона). Теперь зайдите в административную панель, перейдите к закладке Design
, вы должны увидеть тему GlossyBlue
. Активируйте её и перейдите к публичной части, чтобы посмотреть результат в действии.
15. Single.php
Пришло время создать шаблон single.php
. Если хотите, можете повторить шаги, перенося код из стандартной темы. Но мне кажется более простым использовать только что созданный index.php
, сохранив его как single.php
. Откройте single.php
из стандартной темы и скопируйте теги шаблона в нужные места. Далее подключите comments_template
. На следующем скриншоте отображены внесенные мною изменения:
16. Page.php
Теперь новый single.php
сохраните с названием page.php
. Уберите дату записи, форму комментариев, ссылки следующий/предыдущий. Вот, собственно, и всё — ваш шаблон page.php
готов
.
17. Удаление файлов HTML
Удалите все файлы HTML из папки glossyblue
(они нам больше не понадобятся). Технически этого достаточно для создания базовой темы WordPress. Вы, наверное, заметили, что в стандартной теме больше PHP-файлов. Что же, на самом деле, они вам не так уж необходимы, если требуется простая тема. Например, если search.php
или 404.php
не будет в папке темы, WordPress автоматически использует index.php
для отображения страницы. Читайте Template Hierarchy для более подробного рассмотрения.
18. Шаблон страницы WordPress
А теперь последний пример — я покажу вам как использовать Page Template для создания страницы Архива, которая будет содержать список всех записей на вашем блоге (удобно для карты сайта). Скопируйте archives.php
из папки стандартной темы. Удалите ненужный код и получите что-то вроде этого:
Здравствуйте, дорогие друзья и читатели – сайт!
Сегодня я покажу, как с ноля создать шаблон для 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 уже нарезанный, хочу его слить с шаблоном).
Заранее спасибо за ответ.
Допустим, мы открыли новую и пока пустую презентацию в Powerpoint. И что мы видим?
А у вас есть корпоративные цвета и шрифты, которые придется каждый раз настраивать заново. Шаблон позволит вам сделать это 1 раз и на всю жизнь.
И 1-й слайд в вашей презентации автоматически будет выглядеть, например, так ВСЕГДА без дальнейших усилий.
Шаблон включает в себя:
- Цвета
- Шрифты
- Заполнители (разделы, где мы вставляем текст, изображение, диаграмму и т.п.)
Ниже вы найдете пошаговую инструкцию для создания собственного шаблона в Powerpoint.
1. Создайте новый файл в Powerpoint.
2. Выберите в верхнем меню во вкладке Вид «Образец слайдов».
Слева появится стандартный образец слайдов.
Вот с ним мы и будем работать. И сделаем из стандартного нестандартный.
3. Выбираем нужную шрифтовую тему или создаем новую.
Шрифтовая тема - это те шрифты, которые вы используете в презентации. Поверьте, помимо Calibri есть масса других хороших шрифтов. Укажите их всего 1 раз, и они автоматом заменятся во всей презентации или шаблоне.
4. Выберите нужный вам фон (цвет или рисунок). Вы можете выбрать фон сразу для всех слайдов одинаковый или для одного особенный.
5. Как мы видим, слева много вариантов расположения текста, заголовка и т.д. Но что делать, если нам нужен, такой, которого нет? Например, чтобы было 3 картинки с подписями.
Тогда нам поможет функция Вставить макет + Вставить заполнитель.
После того, как нажимаем «Вставить макет» создается пустой слайд. И его мы можем заполнить как хотим.
7. Теперь, если мы собираемся создать новый слайд, то мы видим варианты из нашего шаблона.
8. Создаете новую презентацию и «потеряли» ваш шаблон? Заходите во вкладку Дизайн и ищите его там.
Рутинную работу с однотипными документами можно свести к минимуму, если формировать их на основе шаблонов Word. О том, что они из себя представляют, и как их создавать, наш сегодняшний материал.
Достаточно часто в процессе своей деятельности мы создаем однотипные документы: акты, приказы, письма, договоры, курсовые работы и т.п. Все эти документы, как правило, содержат некие текстовые или графические элементы - заголовки, реквизиты, логотипы, текстовые блоки, повторяющиеся из документа в документ.
Обычный пользователь текстового редактора Word, создавая очередной документ, вынужден использовать и править уже кем-то созданный и содержащий в себе все эти элементы документ либо просто копировать в новый документ необходимые элементы, опять же, из старого файла, притом осознавая, что и в этом случае редактирование неизбежно.
Шаблон определяет основную структуру документа и содержит настройки документа, такие как элементы автотекста, шрифты, назначенные сочетания клавиш, макросы, меню, параметры страницы, форматирование и стили. (Из справки Word)
Эта рутину можно свести к минимуму, если создавать документ на основе шаблона. Иногда еще шаблоны называют "рыбами". Впрочем, как ни называй, а шаблоны действительно позволяют в разы повысить эффективность работы.
Шаблон можно создать двумя способами, взяв за основу какой-либо документ со всеми присутствующими элементами, или начав с чистого листа, самостоятельно включая в него необходимые элементы.
Я расскажу, как создавать шаблон с чистого листа, и, таким образом, будет легче понять весь процесс, нежели модифицировать имеющийся файл. Для примера мы создадим простой шаблон официального письма. Ничего сложного в этом нет, если следовать моим пошаговым указаниям.
Итак, приступим.
1. Создадим пустой документ.
2. Сразу сохраним его. Зайдем в меню "Файл" (File) и выберем команду "Сохранить как..." (Save as...). Откроется диалоговое окно "Сохранение документа", в котором нам надо выбрать в поле "Тип файла" (Save as type) тип "Шаблон документа" (*.dot) (Document Template (*.dot).
Будет открыта папка "Шаблоны", в которой по умолчанию сохраняются все шаблоны. Присвойте файлу имя и нажмите кнопку "Сохранить".
3. Определяем, какие элементы (текст и графика) и где именно будут располагаться в документе.
Как правило, все официальные письма содержат такие элементы, как название организации, логотип, реквизиты. В самом тексте письма может быть вежливое обращение к получателю письма и, собственно, сам текст письма. В конце письма приводится наименование должности руководителя организации с его подписью. Возьмем и мы за основу подобную структуру письма.
4. Название организации мы разместим в верхней части документа по центру. Для этого напечатаем название нашей организации прописными буквами, например, ООО "БЕЛЫЕ НОЧИ". Нажимаем клавишу Enter и переходим на новую строку.
5. Ниже можем вставить разделительную линию. Для этого нужно кликнуть мышкой на кнопке "Рисование" (Drawing). В нижней части экрана появится панель рисования с управляющими кнопками. Нас интересуют линии, поэтому выбираем соответствующую кнопку "Линия" (Line). Курсор мыши превращается в крестик.
Обратите внимание: возможно, у вас будет вставлено так называемое полотно - пунктирная область вставки фигур/рисунков. Чтобы предусмотрительно избавиться от вставки полотна, зайдите в меню "Сервис" (Tools) и выберите команду "Параметры" (Options). Щелкните вкладку "Общие" (General) и снимите галочку с опции автоматического создания полотна при вставке автофигур (Automatically create drawing canvas when inserting AutoShapes). Щелкаем "OK" и закрываем окно "Параметров" (Options).
6. Подводим курсор в форме крестика к названию организации и чуть ниже проводим линию от мигающего курсора до правого края поля, нажимая и удерживая левую кнопку мыши. Линия нарисована.
7. Можно оставить линию как есть, а можно придать ей более элегантный вид. Для этого на панели рисования есть соответствующая кнопка "Тип линии" (Line Style). Щелкаете на ней и выбираете любой тип.
8. После того как вы остановитесь на каком-либо типе линии, дважды щелкните ниже этой линии - в этом месте будут напечатаны адрес и реквизиты организации. Впечатайте те данные, которые считаете необходимыми: юридический и фактический адрес, телефон, факс, URL сайта, E-mail, банковские реквизиты.
9. Теперь отформатируйте набранный текст в соответствии с вашими представлениями. Название организации, например, я выделил и присвоил ему стиль "Заголовок 1" (Heading 1). Я также выровнял заголовок по центру и сделал между буквами разреженный интервал в пять пунктов.
Размер шрифта текста под линией я уменьшил до девяти пунктов и выровнял по центру. Образец вы можете наблюдать ниже на скриншоте.
Таким образом, мы создали постоянную (неизменяемую) часть нашего шаблона, так называемую "шапку". Теперь двинемся дальше и создадим поля, в которые позже вы будете подставлять свои данные.
В левой части шаблона под "шапкой" дважды щелкаем мышкой и печатаем название города, например, Москвы. Затем в противоположной (правой) части шаблона опять дважды щелкаем мышью и в месте мигания курсора вставляем дату. Для этого:
1. В меню "Вставка" (Insert) выбираем команду "Дата и время" (Date and Time). Откроется окно, в котором вы выбираете необходимый формат отображения даты, например 18 июля 2006 г.
2. Отмечаем галочкой поле "Обновлять автоматически" (Update automatically). Теперь при создании нового документа на базе этого шаблона дата уже будет проставлена в соответствии с текущим временем на вашем компьютере.
3. В правой части шаблона ниже даты - с отступом от левого края примерно на 10 см по горизонтальной линейке - дважды щелкаем мышкой. Замигает курсор, и в этом месте мы вставим поле для подстановки данных получателя письма.
4. В меню "Вставка" (Insert) выбираем команду "Поле" (Field). Откроется окно как на скриншоте ниже:
5. В области "Категории" (Categories) выберите "Автоматизация" (Document Automation). В области "Поля" (Field names) выберите команду MacroButton. В области "Сообщение" (Display text) наберите текст "Вставить ФИО получателя" и нажмите OK.
Строго говоря, в области "Имя макроса" следовало было бы указать NoMacro (то есть команда без макроса), но такового в списке не оказалось. Поэтому оставляем как есть, по крайней мере, я никогда не встречал никаких ошибок.
6. Получаем поле с нашим текстом.
Если у вас это поле отображается как обычный текст без затенения, то я рекомендую сделать такое затенение. Это позволит вам впоследствии легко определять в документе нужные поля для ввода данных. Для этого зайдите в меню "Сервис" (Tools) и выберите команду "Параметры" (Options) и на вкладке "Вид" (View) в группе "Показывать" (Show) выберите из списка затенение полей (Field shading) опцию всегда (Always).
Ниже можно дополнительно вставить аналогичное поле адреса получателя и его должности.
У нас осталось вставить приветственное обращение к получателю данного письма, сам текст обращения и подпись отправителя внизу. Попробуйте самостоятельно вставить в ваш шаблон эти поля, опираясь на те указания, которые приведены выше, и не забудьте сохранить получившийся шаблон.
Для примера вы можете взглянуть на скриншот шаблона, который получился у меня:
Теперь, чтобы воспользоваться этим шаблоном для создания письма, вам надо зайти в меню "Файл" (File) и выбрать команду "Создать" (New). Справа появится область задач, в которой нужно выбрать опцию "Общие шаблоны" (On my computer). Откроется окно со всеми доступными шаблонами. Выбираете созданный вами шаблон и нажимаете "OK". Новый документ на основе вашего шаблона будет загружен в Word. Добавляйте свои данные в соответствующие поля и наслаждайтесь автоматизацией.
