Создание простой Wordpress темы. Плагин Cyr to Lat enhanced
Приветствую. Эта статья ответит на вопрос как создать уникальный шаблон для wordpress, красивым и непохожим. Надо будет постараться и маленько напрячь мозги.
Как создать уникальный шаблон для wordpress-начинаем
Ниже приведу список действий как создать уникальный шаблон для wordpress своими руками и бесплатно.
- Сменить картинки.
- Изменить название шаблона.
- Сделать мелкие правки в стилях.
Начнём разбор каждого пункта по порядку.
Меняем картинки
Самый простой момент, разберу на примере шаблона twenty eleven. Заменяем стоковые изображения на свои переделанные. Надо менять в шапке, подвале, фон и остальные мелкие.
Но особого решения я вывести не могу, в моём шаблоне минимум картинок (а те что есть громадные). В общем, надо большинство изображений заменить на свои. Давайте разберу два элемента, которые заменяются:
- Первый через саму админку.
- Второй через код.
Если принцип поймёте, то вам большой респект.
Через саму административную панель
В современных темах есть хорошая функция настроек через сам вордпресс, почему бы ими не воспользоваться? Заходим в административную панель блога, внешний вид и настроить.
Если тема сделана для людей, то глобальные настройки дизайна будут здесь, а с мелочами разберёмся ниже. В разделе покау на примере Twenty eleven.
- Общие цвета темы. Настройки основных элементов (заголовков, надписей и тому подобного).
- Изображение заголовка, то есть в шапке.
- Фоновое изображение. Присутствует не на всех темах, можно настроить как картинкой, так и просто цветом.
На этом этапе вот что у меня получилось. Едем дальше.
Меняем картинки вручную
Предположим картинка какого-то элемента в шаблоне вас не устраивает, и вам хочется её поменять. Что же делать? Будем разбираться. Для примера я возьму вывод картинки количества комментаторов.
Система действует для всех тем.
Нажимаем правой кнопкой мыши на элементе и ищем его вывод в коде, с помощью инструмента “просмотреть код”.
- Сам элемент, нажимаем на нём правой кнопкой мыши.
- Выбираем пункт “просмотреть код”.
- Это сам код вывод HTML, на него внимания не обращаем.
- Вот тот заветный адрес, куда надо идти с заменой. Искомый файл bubble.png, находящийся в папке images в самой теме.
То есть надо создать такой же файл, с таким же названием и заменить его. Я надеюсь вы знаете как пользоваться файловыми менеджерами типа FileZilla. Я захотел сделать картинку, выводящую количество комментариев звездой с обводкой. Сделал ее в фотошопе, и сохранил как картинку с названием bubble и расширением png.
Сделано, я открыл файлзиллу, и зашёл в активную тему twenty eleven в папку images (которую узнали выше). и простым перетаскиванием нового изображения вставляем в папку, с заменой. Все подробности на скриншоте.
Если все сделано хорошо, то новая картинка отобразиться на сайте, вот снимок.
Как понимаете, то таким методом можно сменить любую картинку, если нет настроек в административной панели.
Изменяем название шаблона
Менять можно только на бесплатных темах, это важно.
Есть два пункта и их надо сделать:
- Переделываем название в файле style.css
- Меняем название папки с темой.
Переделываем названия в style.css
Для этого заходим в редактор (напоминаю внешний вид-редактор ), и находим style.css.
На cкрине видим надпись, тут все надо изменить. В начале любого файла style.css в самом начале содержится информация о шаблоне. Её и надо изменить как минимум на эти строки.
Theme Name: moi-shablon Description: Standard version 1.. License: GPL
Должно получиться так, после замены.
Вы прописывайте свои данные, мои не берите, потому что шаблон делаем уникальным. Смените как минимум имя, автора и сайт.
Разобрались, переходим к следующему пункту.
Меняем название папки с темой
Делаем через файловый менеджер, у меня Filezilla. В предыдущем пункте меняли имя темы в строчке:
Theme Name: moi-shablon
Надо оригинальное имя twentyeleven изменить на новое, в моём случае, moi-shablon. Идём в FileZilla папку themes , и находим исходное название twentyeleven.
И меняем его на новое.
Если всё было сделано правильно, то заработает. Тема для поисковиков будет уже не стандартная, а уникальная.
Мелкие правки в стилях
Единого решения как создать уникальный шаблон для wordpress вывести не могу, надо просто посмотреть на шаблон чисто визуально и увидеть то, что вам не нравится. Гляжу на сайдбар.
Правда, не очень? Я хочу сделать покрупнее шрифт заголовков, потому что мелкие и сливаются с фоном. Все шаги смотрим ниже на снимке.
- Выбираем тот элемент, который хотим править. Нажимаем правой кнопкой мыши.
- Нажимаем на “посмотреть код”.
- Весь стиль этого заголовка.
- Искомое название стиля.
Открываем файл style.css. Ищем название стиля с помощью комбинации клавиш CNTRL+F.
Я хочу сделать шрифт крупнее, под ним сделать сплошную линию, сменить цвет и толщину текста. Для этого я меняю либо добавляю вот такие параметры.
Color: #1a1a1a; font-size: 15px; font-weight: 600; border-bottom: 2px solid #271eb1;
Разберём строчки кода.
- Изменение цвета.
- Изменение размера.
- Изменение ширины текста.
- Добавление линии подчёркивания.
Соответственно меняем либо добавляем параметры в стиль. Должно получиться так.
Все изменения сразу покажутся на сайте.
Моя задача сейчас не научить верстать, это займёт много времени и статей, а показать сам принцип как сделать шаблон уникальным.
Так со всеми остальными элементами, доводите до идеала. Показываю что получилось в рамках этой статьи.
Эта статья ответила на вопрос как создать уникальный шаблон для wordpress. И стандартную тему можно будет назвать вашей авторской.
Если будут вопросы, то прошу в комментарии. Успехов.
Только следует учесть, что вордпресс генерирует некоторые классы, которые должны присутствовать в таблице стилей. К примеру классы 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. Первым делом удаляем всю форму поиска, затем вырезаем из него все от