Только следует учесть, что вордпресс генерирует некоторые классы, которые должны присутствовать в таблице стилей. К примеру классы 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
Таким образом мы вызываем 2 сайдбара. Если вы смотрели Sidebar.php
дефолтной темы, то заметили, что кода там гораздо больше. Дело в том, что там просто прописано дополнительное условие, которое по умолчанию выводит архив и категории, в случае, если админ не подключил ни одного виджета к сайдбару. Мы это условие прописывать не будем. Чтобы наши сайдбары заработали, их необходимо зарегистрировать. Для этого в директории темы создаем файл functions.php
и в нем пишем:
register_sidebar(array("name"=>"sidebar1")); Осталось подключить форму поиска. Сделать это можно либо из админки путем добаления виджета в один из сайдбаров, а можно вызвать ее в sidebar.php
, что мы и сделаем. В самом начале добавляем:
Шаг 4 - Footer.php
Welcome to my design blog and portfolio showcase. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Feel free to contact me. По нашему шаблону здесь же мы должны вывести последние записи блога (Recent Posts) и последние коментарии (Recent Comments). Последние записи будем выводить в количестве 5 штук - showposts=5
. Заменям все внутри
Вывод последних коментариев сделаем с помощью плагина simple_recent_comments.php , скачайте его и положите в папку нашей темы. Теперь в нужном месте его нам нужно вызвать (заменям содержимое блока
Шаг 5 - Index.php
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more... Шаг 6 - Вывод записей блога на странице index.php
Следующий рисунок демонстрирует принцип вывода записей блога. Сначала идет проверка, есть ли сообщения в базе, если нет выводит "Not Found". Если есть, выводит в цикле while
. Открываем наш index.php и заменям статичный текст между
Теперь тема должна уже быть доступна из админки в списке тем, ее можно активировать и посмотреть, что вышло. Мы использовали теги Wordpress:
the_time("M"), the_time("j") -
вывод месяца и дня соответственно Шаг 7- Single.php
Pages: ", "after" => " wp_link_pages
- Выводит ссылки на странице в многостраничном сообщении (при использовании ). Шаг 8 - page.php
Pages: ", "after" => " На этом можно и закончить. Основные файлы темы мы собрали. Вероятно вы заметили, что в дефолтной теме больше файлов. Например archive.php
, он не является обязательным. Однако если мы подключим виджет "Архивы" или "Календарь" в сайдбаре и перейдем в какой - нибудь архив по дате, записи по выбранной дате выведутся на индексной странице
, поэтому вполне можно обойтись без archive.php
:) Финал
.
/* query_posts("showposts=-1");
- выведет все записи. Сохраним это в файл archives.php
. Обратите внимание на комментарии в начале кода Template Name: Archives
, он здесь обязателен (далее вы поймете почему) Идем в админку и создаем новую страницу. Указываем только заголовок и указываем в "Атрибутах" шаблон Archives
, сохраняем страницу. И теперь на этой странице у нас будут выводиться все записи по шаблону archives.php
, который мы описали чуть выше: На сегодня это все. Спасибо за внимание. P.S собранная тема тестировалась на WordPress 2.8.5. Конечный результат скачать можно . Аналогично попробуйте создать свою тему, уверен, у вас получиться! Статья сборная, источники: http://www.webdesignerwall.com, http://themetation.com, http://codex.wordpress.org
Создать шаблон для WordPress проще, чем можно подумать. Для этого не надо обладать огромным опытом разработки дизайна или программирования сайтов. В этой статье расскажем об основах создания с нуля собственных тем WordPress. Зачем вообще может понадобиться создание собственного шаблона WordPress, когда можно воспользоваться имеющимися в базе заготовками? Вот какие причины могут подтолкнуть к этому: Конечно, пройти полное обучение тому, как создать шаблон страницы, с помощью одной статьи не получится. Для начала важно понять основы – как делаются самые простые темы. На основе них уже можно заняться «творчеством» и создать лэндинг или сайт по своим желаниям. Сейчас дадим вам краткую шпаргалку с поэтапными инструкциями – она поможет понять, как происходит создание сайта. Шаг первый: подготовительные работы
Перед началом работ надо убедиться, что у вас есть текстовый редактор (самым простым является Блокнот или Nodepad++, тем более скачать их можно бесплатно). Следующий шаг – установка движка WordPress и набора Denwer на локальный компьютер. Денвер – это пакет важных инструментов для программистов. С помощью них значительно облегчается и ускоряется процесс разработки и внесения изменения сайтов. Как его устанавливать, подскажет это видео:
Шаг второй: создают папку новой темы
Переходим в нужную директорию. Она чаще всего имеет следующий путь: . Здесь хранятся все темы – и стандартные, и произвольные. Заходим в нее создаем новую папку. Называем ее, например, «MyFirstTheme». Теперь переходим в новую папку и обязательно добавляем два файла, сделанных через Nodepad++ или другой редактор. Это index.php и style.css. Пока эти документы пусть останутся пустыми, потом мы еще займемся их наполнением. Еще добавьте в «MyFirstTheme» сюда папку images. куда можно будет добавлять картинки для оформления шаблона. В последствии в «MyFirstTheme» можно добавлять шаблоны для отдельных частей сайта: боковой панели (sidebar.php), сайта (header.php), записей на страничках (single.php), комментариев (comments.php) и пр. Набор дополнительных файлов зависит от структуры, которую вы запланируете для своего веб-ресурса. Шаг третий: наполнение index.php
Первое, что надо сделать – заполнить индексный файл (index.php). Вот пример самого простого кода, по которому у сайта будет четыре области: header, main, sidebar и footer. В файле можно прописать любые элементы, которые вы хотите видеть у себя на сайте. Больше информации о прописывании кода index.php для создания тем в WordPress можно получить из видео:
Шаг четвертый: заполняем и style.css
Теперь надо открыть style.css, добавить и заполнить следующие поля (вписать вместо *** собственную информацию о сайте и владельце). Введенные данные будут отображаться в админке. /*Theme Name: *** Theme URI: http:// *** Author URI: http:// *** Description: *** В последствии в этот файл можно будет вводить разные данные и правила, определяющие внешний облик страниц. Например: (информация в /**/ — это комментарии, а не части кода) На данном этапе пока рано задавать строгие параметры стилей, но при дальнейшей работе с файлом вам пригодится этот видеоурок:
Шаг пятый: разбиваем файлы
Все элементы, указанные в index.php следует продублировать отдельными файлами. В шаге первом в примере помимо главной части main были указаны header, sidebar и footer – следовательно, для них создаем свои документы в формате.php. Например, создаем файл header.php, открываем index.php. находим соответствующий участок кода и вставляем его в новый файл. Это будет: Тоже самое проделывается для остальных частей. Это надо сделать для более легкой навигации. Когда элементов будущего сайта будет много, то отдельные файлы помогут лучше ориентироваться для проверки или внесения изменений. Ниже приведен список стандартных файлов шаблонов, используемых WordPress. Их можно не использовать или добавлять свои разделы: Когда впоследствии вы будете дорабатывать каждый элемент, понадобится наглядный видеоурок. Вот несколько подборок, которые могут вам помочь: Шапка в header.php:
Добавление контента:
Стилизация комментариев:
Подвал на сайте:
Когда надо вносить изменения на страницы сайта, то есть риск что-то неправильно прописать и не суметь «откатить» назад. Также может случиться так, что внесения в таблицу стилей исчезнут при обновлении главной темы. Чтобы этого не произошло, можно создать дочернюю тему WordPress (подтему) – это дублер файла стилей style.css, не затрагивающий главный файл (изменения в одном не отменяют обновления в другом). Создание дочерней темы WordPress не составит никакого труда. Надо сделать новую папку в основном каталоге C:\WebServers\home\localhost\www\НАЗВАНИЕ_ЗАДАННОЕ_ПРИ_УСТАНОВКЕ\wp-content\themes
. В новой папке делаем свой файл style.css с вот таким содержимым: Theme Name: НАЗВАНИЕ ТЕМЫ Template: НАЗВАНИЕ ПАПКИ В ДОЧЕРНЕЙ ТЕМОЙ Theme URI: ЗАПОЛНИТЬ Description: ЗАПОЛНИТЬ Author URI: ЗАПОЛНИТЬ /* импортируем стили родительской темы */ @import url(«../НАЗВАНИЕ/style.css»); /* Свои дополнительные стили */ Foo{ color:red; } Теперь можно в админке зайти во «Внешний вид›Темы» и активировать дочерний шаблон. В дальнейшем можно работать в новом файле. В дополнение небольшая видео-презентация на тему дочерних шаблонов:
В силу того, что большинство разрабатываемых мною сайтов создается с использованием CMS Wordpress и приходится постоянно сталкиваться с нетривиальными задачами, решил делиться с вами опытом использования различных плагинов. Как бесплатных так и платных, причем попробую придерживаться такого формата: одна статья - один плагин. Постараюсь рассматривать только действительно заслуживающие внимания разработки, и вот в первом своем рассказе поведаю вам об OptionTree - прекрасное, на мой взгляд, решение для создания страницы с пользовательскими настройками сайта. Когда создается уникальный сайт (под уникальностью я имею ввиду сайт, который использует разработанный специально для клиента шаблон с уникальным дизайном и функционалом), то зачастую требуется создать возможность для администраторов менять те или иные параметры. Почти всегда необходимо дать возможность изменять файл логотипа, какие-то элементы на главной странице, иконки социальных сетей, цвет фона в «подвале» сайта и т.д. Именно такую возможность для разработчиков предоставляет плагин OptionTree, который можно бесплатно скачать с официального сайта Wordpress. Слева мы видим разделы, которые можно переключать, справа - набор настроек внутри раздела. Разделы создаются с помощью Theme Options UI Builder по кнопке «Add section», и для раздела необходимо ввести его заголовок и уникальный идентификатор. Давайте создадим раздел «Дополнительно» и добавим туда несколько настроек. Все изменения, конечно, фиксируются по нажатию на кнопку «Save Сhanges». Теперь добавим настройку для пользователя, ну, например, цвет заголовков. Нажимаем «Add setting» и, посмотрите, какой набор полей доступен для выбора. Можно сказать, огромный! Выберем «Colorpicker» и введем заголовок и уникальный идентификатор. Будьте внимательны с идентификаторами, именно по уникальному идентификатору затем в коде шаблона мы сможем получить доступ к значению этого поля. Давайте посмотрим, что же теперь доступно пользователю для редактирования: появился новый раздел и новая настройка, поле «Цвет заголовков», которое пользователь удобным способом может теперь редактировать. Смотрите, я не буду останавливаться на полном списке доступных для создания полей, он есть, конечно же, в документации к плагину и на официальном сайте разработчиков. Если все же какие-то поля вызовут у вас интерес - напишите, я сделаю обновление этой публикации с описанием того или иного типа предлагаемых полей. В принципе, по названию поля понятен его смысл, но, повторюсь, если что-то вызовет у вас трудности - смело обращайтесь, обязательно поясню. Т.е. за вывод значения поля отвечает функция ot_get_option($option_id, $default), параметрами которой являются идентификатор поля, который мы с вами, как разработчики, задаем сами, в нашем случае мы выводим значение поля h_color. Второй параметр функции - формат вывода, давайте на этом я остановлюсь чуть подробнее. Например, нам надо сделать опцию, которая позволит пользователю создавать свой набор иконок для социальных сетей. Для этого мы будем использовать поле List Item (на иллюстрации ниже). Это поле позволяет создавать уже набор повторяющихся полей, когда пользователь сможет добавлять одинаковые параметры внутри одной настройки. Немного непонятно, постараюсь объяснить и затем в коде показать, как это работает. В нашем случае присвоим полю List Item идентификатор social_icons и внутри этого поля (обратите внимание, есть еще одна кнопка «Add setting») добавим два поля: файл иконки и ссылка. Тип первого поля будет Upload, тип второго - Text. Идентификатор первого поля будет icon_image, идентификатор второго - icon_link. Что получит пользователь? Теперь он сможет добавлять несколько иконок социальных сетей, нажимая на кнопку «Add new» на странице настроек. Причем, обратите внимание, количество таких настроек теперь неограниченно и зависит только от пользователя. Чтобы вывести теперь в шаблоне такое сложное поле, необходимо использовать немного другой формат вывода, ниже - кусочек кода на PHP для такого случая. Комментариями постараюсь пояснить, что происходит. "; // выводим в шаблон поля
}
}
}
?>
Этой статьей я продолжаю серию уроков о создании сайтов на движке WordPress. После установки новой темы на блог, нам надо будет настроить ее под свои нужды. Это сделать совсем не сложно. А вот для редактирования шаблона WordPress
, нужно, как минимум, знать, как он устроен и какие его файлы за что отвечают. Изучив структуру шаблона WordPress
и имея базовые знания HTML и CSS, Вы уже сможете редактировать шаблон темы, изменяя ее внешний вид и функциональность. Но обо всем по порядку. Сразу после установки новой темы, вряд ли Ваш блог будет иметь привлекательный вид. Чтобы это исправить, надо настроить тему WordPress, добавив и упорядочив на страницах блога все необходимые элементы. Итак, приступим к настройке шаблона темы WordPress
. Войдем в Панель инструментов
() WordPress и продолжим ее изучение, подробно разобрав все пункты раздела “Дизайн
“, который отвечает за внешний вид и редактирование шаблона WordPress: Следующая вкладка “Виджеты
“. При переходе на нее перед нами откроется такая картина: В левой части мы видим все “Доступные виджеты
“: RSS, Архивы, Календарь, Найти, Облако меток, Последние записи, Рубрики, Текст и т. д. Справа схематически обозначен сайдбар блога. В зависимости от строения структуры шаблона WordPress, сайдбар может быть один или несколько. На блоге он выглядит как боковая колонка, расположенная справа или слева, а, возможно, и с обеих сторон одновременно. Для того чтобы заполнить сайдбар необходимыми нам виджетами, надо просто выделить требуемый виджет левой кнопкой мыши и, удерживая ее, перетащить виджет на нужный нам сайдбар. Таким же образом можно перемещать виджеты вверх или вниз в самом сайдбаре. Что обозначает каждый из виджетов, достаточно понятно из их названий. Особого внимания заслуживает виджет “Текст
“. Переместив его в сайдбар, откроются поля для ввода данных и заголовка. Сюда Вы можете вставить как обычный текст с картинками, так и различные HTML-коды. Например, счетчики статистики, рекламные блоки и банеры, формы подписки и др. После заполнения или редактирования виджета “Текст
“, нажмите кнопку “Сохранить
“, чтобы изменения вступили в силу. Не нужные виджеты можно удалить, нажав кнопку “Удалить
” или перетащив их обратно в раздел “Доступные виджеты
“. Если надо временно отключить виджет, сохранив при этом все его настройки для дальнейшего использования, перетащите этот виджет влево вниз в раздел “Неактивные виджеты
“. В любой момент Вы сможете вернуть его обратно. Далее идет вкладка “Меню
“. Открыв ее, мы попадаем на страницу создания собственного меню блога с подробным описанием, как это сделать. В меню можно включить рубрики, страницы и произвольные ссылки расположив их в требуемом порядке простым перетаскиванием. Нажав кнопку “Сохранить меню
“, меню блога будет создано. Чтобы созданное меню появилось в сайдбаре, надо перейти на вкладку “Виджеты
” и перетащить виджет “Собственное меню
” в сайдбар. Соответственно, если у Вас на блоге были активированы виджеты “Рубрики
” и “Страницы
“, то их можно будет деактивировать. Надо сказать, что мало кто использует меню на блоге. Последняя вкладка “Редактор
” позволяет редактировать файлы шаблона WordPress. Открыв ее, справа Вы увидите список всех файлов шаблона WordPress, то есть его структуру. При нажатии на любом из этих файлов, его содержимое откроется в окне для редактирования. После внесения необходимых изменений не забудьте подтвердить их, нажав кнопку “Обновить файл
“. Итак, мы изучили раздел “Дизайн
” в админке нашего блога и разобрались с настройками темы (шаблона) WordPress. Стоит отметить, что почти каждая современная тема имеет свои собственные настройки. Обычно они вынесены в админ.панель отдельным разделом с названием темы. Иногда индивидуальные настройки шаблона темы WordPress находятся в виде отдельных пунктов в разделе “Дизайн
“. Как настроить ту или иную тему должно быть подробно описано на сайте разработчика или локализатора шаблона, с которого Вы ее скачали. Индивидуальные настройки темы WordPress позволяют с легкостью, не вмешиваясь в исходный код шаблона, изменять элементы дизайна сайта (логотип, фон, шрифты, расположение сайдбаров и др.), вставлять банеры, кнопки социальных сетей и RSS, счетчики статистики, рекламные блоки и многое другое. Советую внимательно изучить эти настройки, особенно если Вы плохо знакомы с HTML и CSS. Внимание!
Важно знать, что если Вы делали изменения в индивидуальных настройках шаблона, то при установке новой темы, эти настройки надо вернуть в исходное состояние. Обычно для этих целей существуют кнопки “Сбросить
” или “Восстановить по умолчанию
“, в зависимости от выбранной Вами темы WordPress. А теперь давайте посмотрим, из каких файлов состоит шаблон темы, изучим его структуру. Каждый из файлов шаблона WordPress отвечает за оформление отдельных блоков на веб-странице сайта. Потом, подобно конструктору, из этих блоков собираются в единое целое страницы блога. Так как темы (шаблоны) WordPress создают разные разработчики, то и структура этих шаблонов может быть различной. Некоторые файлы шаблона темы в обязательном порядке присутствуют на каждой веб-странице, другие выводятся только в определенных случаях. На рисунке ниже Вы можете видеть примерную структуру шаблона WordPress. Вот список файлов, которые обычно присутствуют во всех шаблонах и их краткое описание: Теперь, зная структуру шаблона WordPress
и за что отвечает каждый из его файлов, можно изменять внешний вид и функциональность определенной части сайта. Важно понимать, что, не имея хотя бы начальных знаний HTML и CSS , лучше не пытаться редактировать файлы темы (шаблона) WordPress. А в случае, если Вам все-таки необходимо отредактировать какой-нибудь файл шаблона, обязательно предварительно сделайте его резервную копию. Тогда, если что-то пойдет не так, Вы всегда сможете восстановить исходный файл. От себя замечу, что редактировать шаблон WordPress
удобнее не из админки блога, а открыв файл в программе Notepad++, используя для этого соединение с сервером хостинга через FTP-клиент. О том, как это сделать, можно почитать в статье “ “. А на сегодня все. Теперь созданный Вами сайт будет выглядеть гораздо привлекательнее. До встречи на страницах блога . Оставляйте свои комментарии и не забывайте нажимать на кнопки соц.сетей внизу статьи, тем самым Вы поможете развитию этого блога. Заранее спасибо! Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд». Функционирование дочерних тем («дочерей») основывается на их взаимоотношениях с родительскими («родителями»). Важно учитывать, что бесплатные и платные themes изначально являются родителями, следовательно, дочь копирует их параметры и свойства, а также получает стандартный комплект своих функций. В будущем, с учетом потребностей конкретного интернет-ресурса, набор этих опций может быть расширен. Если коснуться терминологии, то речь идет об особой теме, принимающей значения другой, которая выступает в качестве родительской. Для чего они создаются? Чтобы модифицировать уже имеющиеся themes ВордПресса и таким образом увеличить их количество. Дочерняя тема ВордПресс открывает возможность вносить необходимые изменения и коррективы. Далее мы рассмотрим, как ее создать, но перед этим разберем ее ключевые отличия: Дочерняя тема WordPress представляет собой прекрасную идею, обладающую широким перечнем преимуществ. Лично мы бы рекомендовали ее в стандартном комплекте с продуктами премиального сегмента. Перечислим лишь некоторые плюсы: Так как это продолжение родительской, набор особенностей и функций здесь идентичен. Главные составляющие: На добавление шаблонов нет ограничений, но перечисленные составляющие в обязательном порядке присутствуют в любой. «Дочери» локализуются в самостоятельной папке и могут похвастаться отдельными «functions.php» и «style.css». Всегда можно написать вспомогательные файлы, но эта пара отвечает за правильное функционирование - без сбоев и проблем. При правильном использовании указанных форматов можно отредактировать практически любые исходные параметры, включая стиль, отдельные пункты макетов, скрипты и прочее. Устройство theme аналогично редакторским слоям фоторедакторов. Если пользователь посещает ваш интернет-ресурс, перед ним открывается «дочь», а потом уже отсутствующие опции и стили загружаются из родительской. В конечном итоге большая часть кода передается от родителя, но перед использованием его нужно модифицировать с учетом настроек «дочери». Сначала проверьте, есть ли у вас в распоряжении все необходимое. А именно доступ к FTP или файловому менеджеру, открытый доступ к самой панели управления ВордПресс. Итак, приступим. Это достаточно простой процесс. Если будет детально следовать инструкции, его освоит любой пользователь. Прежде всего создаем папку для дочери в стандартном каталоге. Чтобы в каталоге был порядок и содержимое было систематизировано, лучше назвать папку по образцу «Наименование родителя + окончание child». Для удобства можно добавить наименование того или иного проекта, для которого мы создаем theme. Главное, чтобы название каталога не имело пробелов, в противном случае это может привести к появлению ошибок. Файловый менеджер или FTP-клиент поможет создать новую папку. На сегодняшний день хорошо зарекомендовал себя такой FTP-клиент как FileZilla. Для примера возьмем за основу «Twenty Seventeen», которая многим знакома. Работать я предпочитаю с Файловым менеджером, поэтому у меня путь до созданной папки выглядит таким образом: Делаем следующее: Наверняка, вы убедились, что создание представляет собой легкий процесс. Необходимо только четко следовать инструкции и работать с правильным подходом. Чтобы приступить к работе, видоизменять, дополнять, адаптировать под запросы и требования вашего сайта «дочь», необходимо правильно выполнить настройки. Будем разбираться по порядку. Для этого мы внесем коррективы в «custom.css», который расположен в каталоге. Сделать это можно через FTP-клиента, обычный текстовый редактор, файловый менеджер или специальный редактор ВордПресс (найти его можно, открыв «Внешний вид», после этого «Редактор»). Здесь понадобятся хотя бы минимальные знания правил использования CSS, а также навык проверки через браузер элементов сайта. Например, чтобы изменить цвет фона в «style.css», мы прописываем следующее правило CSS: На следующей картинке представлено, как изменится дизайн сайта после внесенных корректировок. Фон стал салатовым: Таким образом можно отредактировать любые имеющиеся элементы на сайте. 2.Работа с функциями. Применение и работа с «дочерьми» дает и такое преимущество, как возможность ведения двух независимых «functions.php». Напомним, что данные файлы применяются для удаления старых и добавления новых функций. Если они имеются, можно не беспокоиться о сохранности или проблемах в работе документа. Даже если основа обновится, он сохранится в неизменном состоянии. Для добавления новой опции в файл вписывается и новый PHP-код. Например, код, представленный ниже, удалит опцию поиска WordPress. Облегчить процесс создания можно путем использования ряда специальных плагинов. Библиотека WordPress представляет широкий выбор плагинов, большинство из них можно использовать бесплатно. Использование плагинов в разы облегчает процесс разработки. Рассмотрим наиболее популярные плагины. Это максимально простой и легкий в использовании плагин с интуитивно понятным интерфейсом. Многие настройки здесь можно выполнять одним нажатием кнопки. 2. Child Theme Configurato. Здесь также можно сформировать «дочь», причем на это понадобится всего пара кликов. Редактор CSS здесь достаточно мощный, что позволяет выполнять настройки расширенного функционала. Плагин автоматически производит идентификацию ключевых правил CSS и не затрагивает их при редактировании. 3. _child Theme Boilerplate. Здесь представлены готовые шаблоны для формирования «дочерей». Шаблон назван просто - «_child» - и разработан специально для упрощения работы. Шаблон предлагает интуитивную тему, от вас требуется только указать ссылку на «родителя». Шаблон данного типа позволяет создавать профессиональные варианты - здесь уже созданы 2 готовых файла, стандартные «functions.php» и «style.css». Первый из них обладает особенной функцией под названием «aa_enqueue_styles()». Опция позволяет создавать очередь таблиц стилей, где сначала идут родительские, а затем дочерние. В результате стиль последних всегда определяется первыми. Большинство разработчиков связывают эти таблицы между собой в CSS, но это приносит больше вреда, чем пользы. Браузер начинает долго загружать сайт, потому что нужно осуществлять загрузку стилей сначала из «родителя», а потом уже из производной. Если же поставить таблицы стилей отдельно, задача браузера облегчится, а скорость загрузки увеличится. Вот код, с помощью которого можно добавить данную опцию: Второй файл имеет базовый хедер, содержащий особую информацию. Данные сведения позволяют WordPress распознать его как таблицу стилей «дочери». Поэтому особенно важно прописать код для «style.css»: Не имеет значения уровень владения программированием, а также опыт работы с ВордПресс. Создать дочернюю тему WordPress не составит особого труда, при этом нет риска, что настройки удалятся после выхода. Путем написания небольшого кода или внесения изменений в уже написанный и проведения простых действий с каталогом вы можете изменить свой сайт. Главное - соблюдать инструкцию, постепенно переходя от одного пункта к другому. Не забывайте следующее: если появляются обновления для «родителя», «дочери» не изменяются, это правило касается вносимых изменений в контент, настройки и так далее. Экспериментируйте, пробуйте различные варианты и ищите оптимальный для себя.
Для начала в директории тем вордпресса (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
, and
" type="text/css" media="screen" />
" />
/">
Возращаемся к файлу index.htm. Первым делом удаляем всю форму поиска, затем вырезаем из него все от вызовом сайдбаров, получаем следующий код:
register_sidebar(array("name"=>"sidebar2"));
?>
...............................................
Возращаемся к файлу index.html и вырезаем из него все от
Recent Posts
10/23/2006
10/23/2006
10/23/2006
10/23/2006Recent Comments
About
:
" rel="bookmark" title=" ">
Recent Comments", ""); } ?>
Все что осталось в index.html
сохраняем как index.php
в папку с нашей темой, затем подключаем вызов header
, sidebar и footer
:Sample Blog Entry
News 3 comments
">
Ничего не найдено
the_permalink()
- отображает постоянную ссылку записи
the_title_attribute()
- заголовок текущей записи.
the_title()
- заголовок записи или страницы
the_category(", ")
- ссылку на категорию или категории, к которым принадлежит запись
comments_popup_link -
выведет ссылку для комментариев во всплывающем окне если comments_ popup_script() используется, иначе выводит обычную ссылку на комментарии.
the_content
- выводит содержание текущей записи. Если используется тег то сообщение показывается только до (только на главной странице, на странице записи будет показываться полностью).
next_posts_link
- ссылка на предыдущие сообщения.
previous_posts_link -
ссылка на следующие сообщения.
Этот файл мы создадим из только что законченного index.php
, немного изменив его:
"
Ничего не найдено
comments_template()
- Подключает файл шаблона comments.php
из текущей папки темы
previous_post_link(" %link"), next_post_link("%link")
- выведет заголовки предыдущей и следующей записи
Этот шаг проще предыдущего. Файл single.php
сохраняем как page.php
. Удаляем из page.php
вывод даты, комменты, next/previous:
"
Ничего не найдено
Иногда нужно/полезно вывести на странице заголовки всех записей. Для этой цели воспользуемся тегом wordpress query_post
:
Template Name: Archives
*/
?>
" title="">
|
Краткая инструкция
Site Title
Site Title
Чтобы главный индексный файл был согласован с дополнительными, в index.php под блоками для каждой части надо прописать следующее:
Как можно вносить изменения без опасений
Что такое пользовательские настройки?
Шаблоны (темы) Wordpress, которые мы можем использовать на своем сайте, очень часто позволяют настраивать какие-то дополнительные параметры, например, цвет заголовков. Все платные темы, которые мне приходилось использовать, существенно расширяют функционал административной панели за счет отдельного интерфейса. Ниже я привожу пример такого расширения, посмотрите, пожалуйста.После установки...
Установив и активировав плагин, мы, условно, получаем две части: одна для разработчиков сайта, другая - для пользователей. Первая часть доступна из пункта меню «OptionTree»-«Settings», который появляется после активации плагина слева в административной части Wordpress. Смело жмем туда и получаем уникальный интерфейс для формирования набора пользовательских полей, который будет доступен для пользователей во второй части плагина - «Внешний вид» - «Theme Options».Theme Options UI Builder
Итак, как же создавать настройки? Под отдельной настройкой я буду иметь ввиду некоторое поле, которое будет доступно пользователю, администратору сайта для редактирования. UI Builder позволяет создавать секции или разделы, давайте назовем это лучше так, внутри которых будут располагаться те или иные настройки. На рисунке выше я привел пример настроек, состоящий из двух разделов: «Основное» и «Услуги». Т.е. подразумевается, что в разделе «Основное» будут размещены какие-то общие настройки сайта, а в разделе «Услуги» - специфичные для страницы услуг. Давайте посмотрим, как разделы выглядят для пользователя. Переходим во «Внешний вид» - «Theme Options» и - ура! Вот она страница настроек!Редактируем шаблон
Теперь нам с вами, как разработчикам, необходимо внести изменения в шаблон сайта для того, чтобы получить значение того или иного поля, которое ввел или выбрал пользователь. За это отвечает некая функция, пример использования которой для нашего выбора цвета заголовков я привожу ниже. Причем, отмечу, что вариантов использования этого плагина может быть огромное множество, в приводимом мною примере внутри файла header.php шаблона в секции head документа будет выводиться теперь стиль заголовков, а именно, их цвет, в зависимости от значения поля h_color.
В заключении
Типов полей, которые вы можете использовать, действительно много, разработчики плагина постарались на славу: это и выбор даты, выбор цвета, можно создавать галереи изображений, переключатели и т.д. Комбинируя такие поля и грамотно выводя их в шаблоне, разработчик сайта предоставит пользователю удобный интерфейс для изменения тех или иных настроек. Отмечу, что в одном из последних сайтов мне пришлось создать более 50 различных полей для того, чтобы клиенты смогли менять на сайте цвета заголовков, тексты на главной странице, изменять количество выводимых новостей на странице, редактировать контакты и карту проезда и множество других.
Настройка темы (шаблона) WordPress.
Чем отличается «дочь»
Удобно ли работать
Функционирование
Как создать
Шаг No1. Создание дочерней темы WordPress
Шаг No2. Настройка
Специальные сервисы для облегчения труда разработчика
Подытожим