Этот туториал покажет, как создать новый шаблон страницы для шаблонов WordPress Cherry Framework .
Войдите в админ панель WordPress.
Откройте меню Страницы -> Добавить новую (Pages -> Add New) и создайте новую страницу с новым шаблоном страницы.
Введите заголовок страницы и сохраните изменения. В правой колонке в панели вы можете выбрать один из используемых в вашей теме шаблонов страницы. Вам необходимо добавить новый шаблон станицы в этот список. Все эти шаблоны находятся в папке на вашем сервере. Но вам необходимо добавить новый шаблон страницы в папку wp-content/themes/theme##### .
Создайте новый.php файл в любом редакторе, например, Dreamweaver или Notepad++, и назовите его, например, new.php . Добавьте в этот файл следующий код:
Сохраните файл и загрузите его в папку wp-content/themes/theme##### на ваш сервер.
Теперь вернитесь к странице, которую вы создали в админ панели WordPress. В панели Атрибуты страницы (Page Attributes) вы можете выбрать новый шаблон страницы под названием “Пользовательский” (“Custom”).
Cнова откройте файл new.php file и начните добавлять свой контент. Файл может содержать все, что вы захотите, включая неизменяемый контент или элементы макета страницы, которые будyт выводить ее контент.
Вы можете использовать элементы кода других шаблонов страницы из папки wp-content/themes/CherryFramework , чтобы создать специфическую страницу.
Давайте сначала добавим хедер и футер в новый шаблон страницы:
Если вы сохраните изменения, то сможете увидеть их на странице:
Теперь необходимо выбрать вид контента, который вы хотите использовать на этой странице. Допустим, у вас нет отдельного шаблона страницы для пользовательских постов “Наша команда” (“Our Team”). И вам нравится дизайн шаблона страницы Отзывов (Testimonials) и вы бы хотели использовать этот дизайн для постов “Наша команда” (“Our Team”). Для этого в меню Дизайн -> Редактор (Appearance -> Editor ) вы легко найдете файл, который содержит код шаблона страницы Отзывов (Testimonials). Его название page-testi.php .
Откройте этот файл для редактирования. Скопируйте только код контента, так как вы уже добавили хедер и футер (ниже приведен пример данного кода, ваш код может выглядеть иначе):
Вставьте скопированный код в файл new.php. Замените Template Name: Custom на Template Name: Team
И замените page-testi.php на new.php в этом коде.
Данный код также содержит ссылку на файл loop/loop-testi.php . Это еще один файл, который вам необходимо скопировать и редактировать. Скопируйте файл loop-testi.php из папки wp-content/themes/CherryFramework/loop и вставьте его в папку wp-content/themes/theme#####/loop (если в папке вашей темы отсутствует папка loop , вам следует создать ее). Переименуйте этот файл, например, на loop-new.php и откройте его для редактирования. Замените слово “testi” на слово “team” во всех строчках файла и сохраните изменения. (Для замены слов вы можете использовать комбинацию клавиш Control (Command) + F).
Когда файл loop-new.php создан и отредактирован, снова откройте файл new.php и замените loop/loop-testi.php на loop/loop-new.php в его коде. В результате ваш код будет выглядеть следующим образом:
Сохраните изменения и проверьте вашу новую страницу. Теперь она должна содержать пользовательские посты “Наша команда” (“Our Team”) с дизайном страницы Отзывов (Testimonials).
В этой статье я расскажу вам о том, как сделать шаблон для 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», чтобы скачать архив темы себе на компьютер. После этого можно установить её на свой сайт.
Приветствую вас, друзья.
Сегодня мы затронем очень интересную, для многих, тему. Возможно, вы заметили, что совсем недавно я обновил дизайн своего блога, не знаю как вам, а мне очень нравится. Этот шаблон я создал буквально за несколько десятков минут, причем мне не потребовалось ни знание HTML, CSS и PHP ни информации на тему создания шаблонов.
Итак, как сделать шаблон для wordpress самому, без каких либо знаний?
Прежде чем я начну, не могу не упомянуть про различные способы создания шаблонов, чтобы картина была наиболее полная.
Способ №1 – вы изучаете HTML, изучаете структуру шаблонов. Конечно, при таком подходе есть свои плюсы, если у вас есть время и желание начните с него. Знание HTML еще ни кому не помешало.
Способ №2 – заказать шаблон у фрилансера. Если есть свободные деньги, то, обязательно, выбирайте именно этот способ. Стоимость создания качественного шаблона от 15 000 до 70 000 рублей.
Способ №3 – воспользоваться специальным программным обеспечение для создания шаблонов. Сразу уточню, это не создание однотипных шаблонов, в программе вполне возможно создать уникальный, красивый шаблон. Пример этот блог. Все зависит от вашей фантазии.
Как вы, наверно, уже поняли речь, в этой статье, пойдет о способе №3.
Встречаем, программа для создания шаблонов – (версия не имеет значения, я пользуюсь второй, по-моему, уже четвертая вышла). Программа платная, но мы с вами русские люди (вы поняли, о чем я). Я знаю, что в сети много уроков по этой программе, но я уже устал отвечать на один и тот-же вопрос своих подписчиков.
Скачиваем программу, запускаем ее.
1. В заглавном окне программы выбираем “WordPress”.
2. В окне предпросмотра появляется заготовка шаблона, конечно, вся кривая, но в процессе работы от нее и следа не останется.
3. Переходим на вкладку “Цвета и шрифты”, выбираем цветовую схему (в последующем мы ее немного подкорректируем), я люблю светло серую гамму цветов. Жмем на кнопку “Наборы шрифтов”, выбираем шрифты (я использую везде вердану).
4. Переходим на вкладку “Макет”, здесь нам предлагается выбрать количество и расположение колонок, а также расположение верхнего колонтитула (по простому хедера). Я всегда выбираю “Две колонки->Правая средняя сторона”.
5. На следующей вкладке нам предлагается выбрать фон будущего шаблона. С помощью данной вкладки вы можете создать свой или выбрать уже существующий фон.
6. Следующая вкладка предлагает нам настроить лист шаблона.
Задайте ширину листа (желательно не меньше 1000 px), его тень и границу.
7. На следующей вкладке нам предлагается настроить верхний колонтитул (хедер или шапка). Настройте колонтитул с помощью настроек.
1. Настройка ширины и высоты шапки.
2. С помощью этого меню вы можете загрузить в программу ранее заготовленный хедер, а также добавить к нему эффекты.
3. С помощью этого меню вы можете добавить на хедер стороннюю картинку.
4. Название вашего сайта и его слоган.
5. Расположение названия и слогана.
8. На следующей вкладке нам предлагается настроить меню (оно, обычно, располагается под шапкой). Выберите стиль меню и его заливку.
9. На следующей вкладке — “Статьи”, нам предлагается настроить внешний вид области расположения контента (текста, видео, картинок, таблиц). Настройте его с помощью приведенных настроек.
1. Изображение статьи (этот параметр ни на что не влияет, может оставить как есть).
2.С помощью этого меню вы сможете задать стиль области контента (с обводкой или без).
3. Настройка отображение текста внутри статьи.
4. Редактирование различных параметров области контента.
5. Настройка верхнего колонтитула.
6. Настройка нижнего колонтитула.
10. С помощью следующей вкладки — “Блоки”, вы можете настроить внешний вид боковых блоков (сайдбара).
НАСТРОЙКИ И ЭКСПОРТ ШАБЛОНА
1. Нажмите на кнопку “Файл” (находится в левом верхнем углу окна программы).
2. Выберите пункт “Экспорт->Настройки экспорта”. Перейдите на вкладку “Свойства” и укажите необходимые данные. Перейдите на вкладку “Footnote” и снимите все галочки.
3. Повторите шаг номер один. Выберите пункт “Экспорт->Тема WordPress”.
4. Экспортируйте шаблон как ZIP папку.
Все. Теперь вы знаете как сделать шаблон для WordPress своими руками. Удачи в создании.
Не забываем комментировать статью. Автор лучшего, по моему мнению, комментария (по итогам недели), получит мою платную книгу «Как продавать партнерские товары в интернете и получать 200% прибыли» совершенно бесплатно.
ВИДЕО-УРОК “Как сделать шаблон для WordPress без знаний HTML?
Только следует учесть, что вордпресс генерирует некоторые классы, которые должны присутствовать в таблице стилей. К примеру классы aligncenter, alignleft и alignright служат для выравнивания изображений и блочных элементов, и их нужно включить в свою таблицу стилей (можно скопировать из таблицы стилей дефолтной темы):
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
Следующие классы используются для выравнивания изображений, которые имеют подписи (можно скопировать из дефолтной темы, в дальнейшем при необходимости поправить):
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* необязательные параметры, которые сделают скругленные углы в поддерживаемых браузерах*/
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
Кроме того, существует еще несколько классов WordPress, которые необязательно описывать в таблице стилей, но, т.к. WordPress генерирует страницы с их использованием, можно и им задать стиль:
.categories {...}
.cat-item /* Этот класс присваивается всем категориям */}
.current-cat {/* стиль текущей категории */}
.current-cat-parent {/* стиль для предка(ов) текущей категории */}
.children {/* класс для потомка */}
.pagenav {/* постраничная навигация */}
.page_item {/* любой элемент списка */}
.current_page_item {/* этот класс присваивается в списке страниц к текущей активной странице */}
.current_page_parent {/*класс для родительской страницы по отношению к текущей */}
.current_page_ancestor {/* любая страница верхних уровней по отношению к данной */}
.widget {/* все виджеты обворачиваются в этот класс */}
В процессе верстки используйте блоки и стили к ним, как это определено в скринах в начале статьи. Это не обязательно, но очень даже желательно.
К примеру в дальнейшем мы подключим поисковую форму на сайт через спец. тег wordpress , в результате чего wordpress выведет такую форму:
Поэтому учитываем это при верстки темы.
И последнее, что нужно добавить в style.css это информацию о себе любимом и о созданной теме. Информация размещается в начале файла в коментах:
/*Theme Name: Придумайте уникальное имя темы
Theme URI: http://ссылка-на-домашнюю-страницу-темы
Description: Описание темы
Author: Автор темы
Author URI: http://ссылка-на-страницу-автора
Template: название-темы-предка
Tags: теги темы - только из списка предлагаемого wordpress.org
Version: версия
Ну и здесь текст лицензии
*/
Также не забудьте сделать screenshot.png и положить его в папку с шаблоном (в корень). Информация, размещенная таким образом в таблице стилей, будет отображаться в админке в разделе Управление «темами» . Сверстанный шаблон тестируем в браузерах, если все норм, можно идти далее.
Код страниц сверстанного шаблона приводить не буду, т.к. он достаточно большой, вы его просто скачайте , далее будем работать с ним.
Принцип работы wp-темы
:
Если вы откроете папку темы по умолчанию (wp-content/themes/default), вы увидите множество файлов PHP (файлы темы) и одного файла style.css. Когда мы просматриваем блог, WP подключает файлы темы (index.php < На этом предварительная подготовка закончена и мы можем перейти к созданию темы из имеющегося исходного материала. Шаг 1:
Теперь файлы нашего шаблона нужно "распилить", т.е. вытащить в отдельные файлы footer, sidebar и header. Схема показывает упрощенный вид файла index.php
с метками, согласно которым будем его пилить: Шаг 2
- Header.php
Теперь идем в папку с дефолтной темой, открываем header.php
и копируем оттуда теги Шаг 3 - Sidebar.php
Для начала в директории тем вордпресса (wp-content/themes) создайте папку с именем нашей темы. Пусть это будет ruseller_lessons
. Затем из папки темы по умолчанию (wp-content/themes/default) скопируйте файлы comments.php, search.php
и 404.php
в папку нашей темы. Эти файлы отвечают за комментарии и поиск на блоге. Затем в ruseller_lessons
скопируйте таблицу стилей style.css
нашего шаблона, screenshot.png (300x225)
и папку images
.
Открываем index.html
и вырезаем все, что находится до коментария , создаем новый файл header.php
и вставляем в него вырезанный код, сохраняем в директории нашей темы ruseller_lessons
:
My Blog
" type="text/css" media="screen" />
" />
/">
Возращаемся к файлу index.htm. Первым делом удаляем всю форму поиска, затем вырезаем из него все от