Если вы хотите, чтобы ваш сайт wordpress стал перспективным, то для начала вам стоит задуматься о создании уникальной темы для него. Данный процесс является достаточно трудоемким, потому как напрямую связан с различными кодировками и скриптами. Разберем его с нуля.
Почти каждая тема на wordpress устанавливается в директорию wp-content/themes и состоит из 3 категорий файлов:
- файлы таблицы стилей;
- файлы дополнительного функционала;
- файлы шаблона.
Файлами таблицы стилей являются style.css. Они отвечают за цвет, размеры, шрифт и другие параметры элементов сайта. У каждого сайта есть только 1 файл style.css. Если открыть данный файл, то в самом верху можно увидеть информацию о названии, авторе и кратком описании темы. При создании собственной темы можете вписать в style.css информацию о себе.
Следующей категорией являются файлы дополнительного функционала. К таким относится functions.php, принцип работы которого делает его похожим на плагин. Благодаря этому файлу вы можете осуществить визуальную настройку темы прямо в панели администратора. Обычно перечень настроек не очень широкий (название сайта, цвет навигации и боковых панелей сайта и так далее). Если же тема является многофункциональной, то перечень настроек будет значительно шире.
Теперь перейдем к файлам шаблона. Их основной функцией является генерация страниц, которые запрашиваются посетителями сайта. Файлы шаблона имеют расширение «.php». Наиболее простые темы могут содержать только один файл шаблона под названием index.php. В таком случае все страницы сайта будут идентичны. Такой дизайн чаще всего используется для создания интернет-ресурсов с базами данных, когда дизайн не играет ключевую роль.
Если вы никогда не занимались созданием дизайна, то для начала вам стоит попробовать создать простую тему. Для ее нормальной работы понадобится хотя бы 2 следующих файла: style.css и index.php.
Файлы дополнительного функционала в данном случае можно не использовать, как вы поняли. Среди файлов шаблона index.php является одним из наиболее гибких. Он может самостоятельно генерировать заголовки, различные блоки, нижнюю часть (футер), контент и другие элементы сайта.
Стоит отметить, что те параметры, которые не генерируются файлом index.php, будут генерироваться стандартными файлами. Например, если ваша тема состоит только из 2 вышеперечисленных файлов, но у пользователя возникает потребность в генерации формы добавления комментариев, то в таком случае эту функцию будет выполнять стандартный comments.php. Поэтому, если хотите, чтобы ваша тема была более уникальной, то стоит сделать дополнительные файлы шаблона. Рассмотрим основные.
- Для добавления комментариев, как вы уже догадались, используется шаблон comments.php.
- Если же вы хотите сделать всплывающее окно с комментариями, то для таких целей вам понадобится comments-popup.php.
- Чтобы генерировать главную страницу, используется home.php.
- Файл single.php отвечает за отображение статей сайта. Если у вас отсутствует такой файл, то его функцию будет выполнять index.php.
- Файл page.php же осуществляет генерацию отдельных страниц сайта.
- Для вывода информации об авторе вам понадобится author.php.
- За категории отвечает category.php.
- Отображение архивов, даты и поиска осуществляется файлами archive.php, date.php и search.php соответственно.
- Чтобы ваш сайт выводил уникальную страницы ошибки номер 404, вам понадобится добавить свой 404.php.
- Верхняя и нижняя часть сайта генерируется файлами header.php и footer.php соответственно.
Создание уникальной темы вручную с нуля
Для начала нужно установить подходящий шаблон. Его можно найти как на официальном сайте wordpress.org, так и на каком-либо другом. Рекомендуется использовать официальный сайт, потому как любой сторонний может содержать вредоносные файлы и битые ссылки.
После того как определитесь с выбором, можно начать скачивание архива. По окончанию процесса вам нужно будет его распаковать и загрузить файлы в определенные папки сайта (в архиве обычно содержится небольшая инструкция). Загрузку можно осуществить с помощью программы FileZilla или же прямо с хостинга, если он поддерживает такую опцию. Теперь вам останется лишь перейти в раздел «Темы», выбрать ту, которую загрузили, и кликнуть по кнопке «Активировать».
Также ее можно выбрать прямо в панели администратора wordpress. При этом вам не потребуется ее скачивать. Вам нужно будет лишь кликнуть по клавише «Установить», а затем «Активировать». Перед установкой предлагается осуществить предварительный просмотр.
Теперь, когда тема активирована, можно перейти к ее уникализации. Первым делом стоит задуматься о верхней части сайта (шапке). Это первое, что бросится в глаза вашим посетителям, поэтому стоит отнестись ответственно. Обычно шапка состоит из названия сайта, логотипа и краткой информации о контенте. Шапку можно создать в любом графическом редакторе. Даже в стандартном Paint. Более продвинутые дизайнеры используют Adobe Photoshop.
Название сайта должно быть небольшим и легким для запоминания. В Adobe Photoshop можно подобрать множество различных стилей для него. При создании логотипа вам могут потребоваться различные фигуры. Их можно скачать на официальном сайте Adobe Photoshop.
После того как сделаете рисунок шапки в графическом редакторе, вам нужно будет загрузить его к себе на сайт. По окончанию загрузки справа от рисунка появится URL-адрес, которую нужно будет скопировать. Затем вам понадобится перейти в раздел «Редактор» и выбрать файл, который отвечает за генерирование шапки (header.php). В нем нужно будет найти URL-адрес текущего рисунка и заменить его на тот, который вы получили при загрузке рисунка шапки. После этого вам нужно будет обновить файл. Теперь можно перейти к проверке отображения шапки.
Если ваша шапка имеет не такие параметры, как стандартная, то их можно подогнать в header.php. Ширина регулируется атрибутом width, а высота - height. Настройка может производится в пикселях и процентах. Так что, если хотите просто растянуть шапку, то выставляйте 100%.
При желании в шапку можно добавить активные ссылки на страницы сайта wordpress. Это можно сделать с помощью различных сервисов. Их в интернете достаточно много. Большинство из них работает по одному и тому же принципу. Вы обводите желаемую область шапки, которая будет отводится под ссылку, а сервис выдаст вам нужный код. Затем этот код вам нужно будет добавить в файл header.php. Будьте внимательны при его добавлении. Каждая точка имеет значение. Если добавите код не в то место, в шапке не появятся активные ссылки.
После замены стандартной шапки можно заняться заменой стандартного фона сайта wordpress, виджетов, навигации, нижней части (футера) и других компонентов сайта wordpress. Их тоже можно нарисовать в каком-либо графическом редакторе и загрузить на сайт в виде рисунка.
При вам стоит учесть, что он не должен быть ярким. Большинство вебмастеров предпочитает использовать именно белый фон. Он не режет глаз и не отвлекает от основного контента.
Чтобы создать качественную навигацию с нуля, вам понадобятся небольшие знания о таких тегах, как
Первый отвечает за создание блоков сайта, второй - за добавление ссылок на сайт 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 столбцов для отображения материалов сайта, добавить различные теги, календарь и другие виджеты.
Прежде чем верстать шаблон сайта в 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 сверстать шаблон сайта, но об этом я расскажу уже в следующей статье.
В этой статье я расскажу о способах создания шаблонов для постоянных страниц WordPress. Каждый способ несет в себе плюсы и минусы. Но прежде чем начать, коротко о том, что такое страницы и чем они отличаются от записей.
В WordPress можно создавать страницы (page) и записи (post). Отличаются они тем, что записи: попадают в ленту на главной странице; для записей указываются категории; записи не могут быть древовидными, а страницы: используются для такого содержимого как "Обо мне", "Контакты", "Карта сайта"; не имеют категорий, а имеют древовидную структуру. Записи обычно предназначены для хронологической информации (по времени добавления), а страницы для древовидной структуры не зависимой от времени. Для примера, эта статья опубликована как "запись" в рубрике "Кодекс", а ссылки в меню шапки ведут на страницы: Функции .
Страницы похожи на записи - они расположены в одной таблице базы данных и данные у них почти одинаковы: заголовок, текст, дополнительные поля и т.д. И то и другое - это записи, но разных типов: страницы древовидные и организуются путем создания родительских и дочерних страниц, а записи объединяются рубриками и метками. В WordPress можно создавать дополнительные типы записей древовидные или нет.
Создание страниц в WordPress
Часто нужно создать отдельный шаблон страницы, чтобы вывод информации отличался от остальных страниц. Создавая шаблон страницы в WordPress, можно совершенно изменить страницу: удалить сайдбар, подвал, шапку, можно изменить страницу до неузнаваемости. Например, на этом сайте так изменяется страница на которой выводятся коды файлов WordPress .
Способ 1: шаблон страницы через файл с произвольным названием и подключением его в админ-панели (классический способ)
Это самый распространенный способ создать шаблон страницы в WordPress. Для этого нужно создать.php файл, например, tpl_my-page.php в папке темы и в самом начале файла вписать пометку, что созданный файл является шаблоном для страниц:
Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать "шаблон":
С версии WordPress 4.7. такие шаблоны страниц можно создать для любого типа записи, а не только для page. Для этого дополните комментарии строкой: Template Post Type: post, page , где post, page - это названия типов записей к которым относится шаблон.
/* Template Name: Мой шаблон страницы Template Post Type: post, page, product */
Преимущества:
- Можно получить только записи с указанным шаблоном. Например, можно вывести все страницы с шаблоном «Услуги» (файл servises.php). Иногда это удобно. Название файла шаблона хранится в метаполе _wp_page_template , поэтому чтобы вывести страницы с указанным шаблоном нужно создать запрос по метаполю (см. WP_Query).
Создав один шаблон, мы можем удобно применять его для разных страниц. Например, можно создать шаблон без боковой панели и использовать его на разных страницах.
Недостатки:
После создания файла шаблона в папке темы, нужно зайти в админ-панель и установить шаблон для страницы. При разработке это не всегда удобно. Поэтому если подразумевается использовать шаблон только для одной страницы, используйте второй метод.
Как это работает:
Когда вы заходите в админ-панель на страницу редактирования записи древовидного типа, WordPress просматривает все файлы шаблона на наличие в них строки:
Template Name: ***
Строка может располагаться где угодно и как угодно в файле.
Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок "Атрибуты страницы".
При публикации страницы, в произвольное поле _wp_page_template записывается название файла шаблона или default , если шаблон не указан:
Wp_page_template = default
_wp_page_template = tpl_my-page.phpДалее, когда пользователь посещает страницу, WordPress проверят метаполе _wp_page_template , если шаблон установлен, то используется файл шаблона. В противном случае поиск шаблона страницы продолжается по иерархии .
Способ 2: шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)
При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить:
Для создание шаблона этим способом, вам нужно узнать слаг страницы и создать файл в папке темы. Допустим, наш слаг как на картинке равен contacts , тогда создадим в теме файл page-contacts.php . и заполним его нужным кодом (можно скопировать содержимое из файла шаблона page.php и отредактировать под себя). Все, теперь при посещении страницы мы должны увидеть новый шаблон. Аналогично можно взять ID (пусть 12) страницы и создать файл page-12.php .
Достоинства:
Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке.
Недостатки:
Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID).
Практически бесполезен при написании шаблонов, а тем-более плагинов. Его можно использовать, когда правишь свой сайт, в котором слаг или ID страницы известны заранее.
Как это работает:
WordPeress подбирает какой файл использовать в следующем порядке (файлы должны быть в корне темы):
- {любое_название}.php (когда используется шаблон страницы)
- page-{ярлык_записи}.php
- page-{ID_записи}.php
- page.php
- singular.php
- index.php
Способ 3: шаблон страницы через фильтр "template_include" (коддинг)
Это продвинутый способ, он более сложный, но вместе со сложностью он открывает широкие возможности. С помощью этого способа можно задать шаблон любой странице, записи, категории, любой публикации на сайте или вообще группе любых публикаций. Смотрите примеры с описанием:
// фильтр передает переменную $template - путь до файла шаблона. // Изменяя этот путь мы изменяем файл шаблона. add_filter("template_include", "my_template"); function my_template($template) { # аналог второго способа // если это страница со слагом portfolio, используем файл шаблона page-portfolio.php // используем условный тег is_page() if(is_page("portfolio")){ if ($new_template = locate_template(array("page-portfolio.php"))) return $new_template ; } # шаблон для группы рубрик // этот пример будет использовать файл из папки темы tpl_special-cats.php, // как шаблон для рубрик с ID 9, названием "Без рубрики" и слагом "php" if(is_category(array(9, "Без рубрики", "php"))){ return get_stylesheet_directory() . "/tpl_special-cats.php"; } # шаблон для записи по ID // файл шаблона расположен в папке плагина /my-plugin/site-template.php global $post; if($post->ID == 12){ return wp_normalize_path(WP_PLUGIN_DIR) . "/my-plugin/site-template.php"; } # шаблон для страниц произвольного типа "book" // предполагается, что файл шаблона book-tpl.php лежит в папке темы global $post; if($post->post_type == "book"){ return get_stylesheet_directory() . "/book-tpl.php"; } return $template; }
Такой код нужно разместить в файл темы functions.php или в плагин, или подключить как-то еще. Как видно из примера во время фильтра template_include уже работают условные теги, установлены глобальные переменные: $wp_query , $post и т.д.
Достоинства:
- Можно создать шаблон при написании плагина.
Можно установить шаблон для любой страницы или группы страниц. Практически полный карт-бланш в действиях.
Недостатки:
Необходимость писать код и отдельно его подключать (например, в functions.php темы).
В этой статье я расскажу вам о том, как сделать шаблон для WordPress без знания программирования. На создание своей темы у вас уйдёт несколько минут. Работать мы будем с помощью одного бесплатного и простого сервиса.
Как сделать шаблон для WordPress самому
Перед тем, как сделать шаблон для WordPress через этот инструмент, вам следует ознакомиться с тем, за что отвечает каждая из опций. Вот их функции:
- Site name. В этом разделе можно выбрать цвет заголовка сайта, задать сам заголовок, а также указать URL к логотипу. Логотип можно оставить пустым.
- Body Size. Выбираем размер сайта в ширину. Для корректного отображения лучше оставить по умолчанию – 100%.
- Sidebar Location. В этой опции можно выбрать размер и расположение боковой колонки. Есть три варианта размера для левого и правого сайдбара, а также возможность сделать тему без боковых колонок.
- Third Column. Эта опция подключает третью колонку. Есть разные варианты.
- Menu Layout. Здесь выбирается макет меню – есть 4 разных варианта.
- Scheme Overall. Настраивается цветовая схема – фоны разных элементов, границы.
- Text Scheme. Схема оформления текста: настраиваются цвета, начертания и шрифты всех частей сайта – заголовков, меню, основного текста и других.
- Tag Cloud. Можно включить и выключить облако тегов в сайдбаре.
- Archives & Search. Настраивается отображение архивов и поиска – показывать полные версии теста или только анонсы.
- Выбираем копирайт.
Итак, теперь вы знаете, как сделать шаблон для WordPress. Осталось его получить. Для этого нажимаем внизу кнопку «Save», а затем там, где был предпросмотр, жмём на ссылку «Files packed: download theme ZIP file», чтобы скачать архив темы себе на компьютер. После этого можно установить её на свой сайт.
Рутинную работу с однотипными документами можно свести к минимуму, если формировать их на основе шаблонов 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. Добавляйте свои данные в соответствующие поля и наслаждайтесь автоматизацией.
