• Как создать тему для WordPress самому: уроки с видео

    Рутинную работу с однотипными документами можно свести к минимуму, если формировать их на основе шаблонов 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. Добавляйте свои данные в соответствующие поля и наслаждайтесь автоматизацией.

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

    Шаблон, создаваемый в ворде, сохраняется в форматах DOT, DOTX или DOTM. Последний разрешает работу с макросами.

    Шаблон — это особый тип документа, при его открытии и последующем изменении создается копия файла. Исходный (шаблонный) документ при этом остается неизменным, как и его местоположение на диске.

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

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

    Документ, сохраненный в качестве шаблона, можно открыть и заполнить необходимыми данными, текстом. При этом, сохраняя его в стандартных для Word форматах DOC и DOCX, исходный документ (созданный шаблон), будет оставаться неизменным, как уже было сказано выше.

    Большинство шаблонов, которые могут вам понадобиться для работы с документами в Ворде, можно найти на официальном сайте (). Кроме того, в программе можно создавать собственные шаблоны, а также изменять уже существующие.

    Примечание: Часть шаблонов уже встроена в программу, но часть из них, хоть и отображается в списке, на самом деле находится на сайте Office.com. После того, как вы нажмете на такой шаблон, он будет мгновенно скачан с сайта и доступен для работы.

    Создание собственного шаблона

    Проще всего будет начать создание шаблона с пустого документа, для открытия которого достаточно просто запустить Word.

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

    И все же, если вы сами хотите создать шаблон, выберите “Новый документ” . Будет открыт стандартный документ с установленными в нем параметрами по умолчанию. Эти параметры могут быть, как программными (заданными разработчиками), так и созданными вами (если ранее вы сохраняли те или иные значения в качестве используемых по умолчанию).

    Используя наши уроки, внесите необходимые изменения в документ, который в дальнейшем будет использоваться в качестве шаблона.

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

    Уроки по работе с Ворд:

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

    1. Нажмите кнопку “Файл” (или “MS Office” , если используете старую версию Word).

    3. В выпадающем меню “Тип файла” выберите подходящий тип шаблона:

    • Шаблон Word (*.dotx): обычный шаблон, совместимый со всеми версиями Ворда старше 2003 года;
    • Шаблон Word с поддержкой макросов (*.dotm): как понятно из названия, данный тип шаблонов поддерживает работу с макросами;
    • Шаблон Word 97 — 2003 (*.dot): совместим со старыми версиями Ворд 1997 — 2003.

    4. Задайте имя файла, укажите путь для его сохранения и нажмите “Сохранить” .

    5. Созданный и настроенный вами файл будет сохранен в качестве шаблона в заданном вами формате. Теперь его можно закрыть.

    Создание шаблона на основе существующего документа или стандартного шаблона

    1. Откройте пустой документ MS Word, перейдите во вкладку “Файл” и выберите пункт “Создать” .

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

    2. Выберите подходящий шаблон в разделе “Доступные шаблоны” .

    Примечание: В последних версиях Word ничего выбирать не нужно, список доступных шаблонов появляется сразу после нажатия на кнопку “Создать” , непосредственно над шаблонами находится перечень доступных категорий.

    3. Внесите в документ необходимые изменения, воспользовавшись нашими советами и инструкциями, представленными в предыдущем разделе статьи (Создание собственного шаблона).

    Примечание: Для разных шаблонов стили оформления текста, которые доступны по умолчанию и представлены во вкладке “Главная” в группе “Стили” , могут быть разными и заметно отличаться от тех, что вы привыкли видеть в стандартном документе.

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

    4. После того, как вы внесете необходимые изменения в документ, выполните все те настройки, которые посчитаете нужными, сохраните файл. Для этого нажмите на вкладку “Файл” и выберите “Сохранить как” .

    5. В разделе “Тип файла” выберите подходящий тип шаблона.

    6. Задайте имя для шаблона, укажите через “Проводник” (“Обзор” ) путь для его сохранения, нажмите кнопку “Сохранить” .

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

    Добавление стандартных блоков к шаблону

    Стандартными блоками называют многократно используемые элементы, содержащиеся в документе, а также те компоненты документа, которые хранятся в коллекции и доступны для использования в любое время. Хранить стандартные блоки и распространять их можно с помощью шаблонов.

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

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

    2. Откройте шаблонный документ, к которому необходимо добавить стандартные блоки.

    3. Создайте необходимые стандартные блоки, которые в дальнейшем будут доступны для других пользователей.

    Примечание: При введении сведений в диалоговое окно “Создание нового стандартного блока” введите в строке “Сохранить в” имя шаблона, к которому их необходимо добавить (это тот файл, который вы создали, сохранили и закрыли согласно первому пункту данного раздела статьи).

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

    Добавление элементов управления содержимым к шаблону

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

    Если в таком шаблоне будут присутствовать элементы управления содержимым, второй пользователь сможет подкорректировать список под себя, оставив его неизменным в самом шаблоне. Чтобы добавить в шаблон элементы управления содержимым, необходимо включить вкладку “Разработчик” в MS Word.

    1. Откройте меню “Файл” (или “MS Office” в более ранних версиях программы).

    2. Откройте раздел “Параметры” и выберите там пункт “Настройка ленты” .

    3. В разделе “Основные вкладки” установите галочку напротив пункта “Разработчик” . Для закрытия окна нажмите “ОК” .

    4. Вкладка “Разработчик” появится на панели управления Ворд.

    Добавление элементов управления содержанием

    1. Во вкладке “Разработчик” нажмите на кнопку “Режим конструктора” , расположенную в группе “Элементы управления ”.

    Вставьте в документ необходимые элементы управления, выбрав их из представленных в одноименной группе:

    • Форматированный текст;
    • Обычный текст;
    • Рисунок;
    • Коллекция стандартных блоков;
    • Поле со списком;
    • Раскрывающийся список;
    • Выбор даты;
    • Флажок;
    • Повторяющийся раздел.

    Добавление пояснительного текста к шаблону

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

    1. Включите “Режим конструктора” (вкладка “Разработчик” , группа “Элементы управления” ).

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

    Примечание: Пояснительный текст по умолчанию находится в небольших блоках. Если “Режим конструктора” отключен, эти блоки не отображаются.

    3. Измените, отформатируйте замещающий текст.

    4. Отключите “Режим конструктора” повторным нажатием на эту кнопку на панели управления.

    5. Пояснительный текст будет сохранен для текущего шаблона.

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

    Здравствуйте, дорогие друзья и читатели – сайт!

    Сегодня я покажу, как с ноля создать шаблон для 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" /> <?php bloginfo("name"); ?>

    Мы сделали динамическим блок

    Код вызывает функцию, возвращающую языковые атрибуты в контейнер.

    ">

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

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

    2. Перейдите к редактированию файла index.php. В самом его начале пропишите

    ,

    Строчки вызывают файлы шапки, боковой панели и низа сайта.

    Теперь вы можете просмотреть или даже активировать MyTheme. В результате браузер отобразит уже знакомый шаблон со статическим меню и одной-единственной страницей. Чтобы меню стало динамическим и настраиваемым, а вместо одной страницы отображались все помещённые на сайт материалы, нужно преобразовывать шаблон дальше.

    Делаем динамическим верхнее меню

    Пока мы имеем полностью статическую тему оформления, в том числе и с неизменным горизонтальным верхним меню. Пока его нельзя настроить из админ-панели, и если оставить код в нынешнем виде, то для вставки/удаления/переноса пунктов придётся каждый раз редактировать файл header.php , что крайне неудобно.

    Чтобы не мудрствовать лукаво и не погружаться в пучину увлекательного мира программирования, зададим динамическому меню статичное название. Вместо таблицы горизонтального меню вставьте код

    так, чтобы получилось следующее:

    Читать еще: