Как создать свою тему на вордпресс. Создание уникальной темы при помощью специальных программ и сервисов с нуля
Как создать свою тему на вордпресс. Создание уникальной темы при помощью специальных программ и сервисов с нуля
14.05.2019
Только следует учесть, что вордпресс генерирует некоторые классы, которые должны присутствовать в таблице стилей. К примеру классы aligncenter, alignleft и alignright
служат для выравнивания изображений и блочных элементов, и их нужно включить в свою таблицу стилей (можно скопировать из таблицы стилей дефолтной темы):
Следующие классы используются для выравнивания изображений, которые имеют подписи (можно скопировать из дефолтной темы, в дальнейшем при необходимости поправить):
Кроме того, существует еще несколько классов 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:
Для начала в директории тем вордпресса (wp-content/themes) создайте папку с именем нашей темы. Пусть это будет ruseller_lessons
. Затем из папки темы по умолчанию (wp-content/themes/default) скопируйте файлы comments.php, search.php
и 404.php
в папку нашей темы. Эти файлы отвечают за комментарии и поиск на блоге. Затем в ruseller_lessons
скопируйте таблицу стилей style.css
нашего шаблона, screenshot.png (300x225)
и папку images
.
Теперь файлы нашего шаблона нужно "распилить", т.е. вытащить в отдельные файлы footer, sidebar и header. Схема показывает упрощенный вид файла index.php
с метками, согласно которым будем его пилить:
Шаг 2
- Header.php
Открываем index.html
и вырезаем все, что находится до коментария , создаем новый файл header.php
и вставляем в него вырезанный код, сохраняем в директории нашей темы ruseller_lessons
:
index.html
My Blog
Blog Description
Home
About
Portfolio
Links
Contact
Теперь идем в папку с дефолтной темой, открываем header.php
и копируем оттуда теги , ,
, and
и ими заменям соответствующие строки в нашем header.php
.
Затем все теги
, находящиеся id="nav"
(список страниц в верхней части блога) заменям на функцию вордпресса
В итоге получаем:
" type="text/css" media="screen" /> " />
/">
Шаг 3 - Sidebar.php
Возращаемся к файлу index.htm. Первым делом удаляем всю форму поиска, затем вырезаем из него все от
до sidebar.php
и сохраняем его в директории нашей темы. Теперь в полученном коде заменяем все, что между тегами
вызовом сайдбаров, получаем следующий код:
Таким образом мы вызываем 2 сайдбара. Если вы смотрели Sidebar.php
дефолтной темы, то заметили, что кода там гораздо больше. Дело в том, что там просто прописано дополнительное условие, которое по умолчанию выводит архив и категории, в случае, если админ не подключил ни одного виджета к сайдбару. Мы это условие прописывать не будем.
Чтобы наши сайдбары заработали, их необходимо зарегистрировать. Для этого в директории темы создаем файл functions.php
и в нем пишем:
Осталось подключить форму поиска. Сделать это можно либо из админки путем добаления виджета в один из сайдбаров, а можно вызвать ее в sidebar.php
, что мы и сделаем. В самом начале добавляем:
...............................................
Шаг 4 - Footer.php
Возращаемся к файлу index.html и вырезаем из него все от
По нашему шаблону здесь же мы должны вывести последние записи блога (Recent Posts) и последние коментарии (Recent Comments). Последние записи будем выводить в количестве 5 штук - showposts=5
. Заменям все внутри
:
" rel="bookmark" title=" ">
Вывод последних коментариев сделаем с помощью плагина simple_recent_comments.php , скачайте его и положите в папку нашей темы. Теперь в нужном месте его нам нужно вызвать (заменям содержимое блока
):
Recent Comments", ""); } ?>
Шаг 5 - Index.php
Все что осталось в index.html
сохраняем как index.php
в папку с нашей темой, затем подключаем вызов header
, sidebar и footer
:
Oct13
Sample Blog Entry
News3 comments
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...
Previous EntriesNext Entries
Шаг 6 - Вывод записей блога на странице index.php
Следующий рисунок демонстрирует принцип вывода записей блога. Сначала идет проверка, есть ли сообщения в базе, если нет выводит "Not Found". Если есть, выводит в цикле while
.
Открываем наш index.php и заменям статичный текст между
..
функциями (тегами) wordpresspost date, title, category, comments, next и previous
. Ориентируясь на рисунок выше получаем:
">
Ничего не найдено
Теперь тема должна уже быть доступна из админки в списке тем, ее можно активировать и посмотреть, что вышло.
Мы использовали теги Wordpress:
the_time("M"), the_time("j") -
вывод месяца и дня соответственно the_permalink()
- отображает постоянную ссылку записи the_title_attribute()
- заголовок текущей записи. the_title()
- заголовок записи или страницы the_category(", ")
- ссылку на категорию или категории, к которым принадлежит запись comments_popup_link -
выведет ссылку для комментариев во всплывающем окне если comments_ popup_script() используется, иначе выводит обычную ссылку на комментарии. the_content
- выводит содержание текущей записи. Если используется тег то сообщение показывается только до (только на главной странице, на странице записи будет показываться полностью). next_posts_link
- ссылка на предыдущие сообщения. previous_posts_link -
ссылка на следующие сообщения.
Шаг 7- Single.php Этот файл мы создадим из только что законченного index.php
, немного изменив его:
"
Pages: ", "after" => "
", "next_or_number" => "number")); ?>
Ничего не найдено
wp_link_pages
- Выводит ссылки на странице в многостраничном сообщении (при использовании ). comments_template()
- Подключает файл шаблона comments.php
из текущей папки темы previous_post_link(" %link"), next_post_link("%link")
- выведет заголовки предыдущей и следующей записи
Шаг 8 - page.php
Этот шаг проще предыдущего. Файл single.php
сохраняем как page.php
. Удаляем из page.php
вывод даты, комменты, next/previous:
"
Pages: ", "after" => "
", "next_or_number" => "number")); ?>
Ничего не найдено
На этом можно и закончить. Основные файлы темы мы собрали. Вероятно вы заметили, что в дефолтной теме больше файлов. Например archive.php
, он не является обязательным. Однако если мы подключим виджет "Архивы" или "Календарь" в сайдбаре и перейдем в какой - нибудь архив по дате, записи по выбранной дате выведутся на индексной странице
, поэтому вполне можно обойтись без archive.php
:)
Финал
. Иногда нужно/полезно вывести на странице заголовки всех записей. Для этой цели воспользуемся тегом wordpress query_post
:
/* Template Name: Archives */ ?>
" title="">
|
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, а именно Theme Customizer. Мощный инструмент, встроенный в ядро WP, для настройки тем.
Предисловие
Недавно закончил делать верстку для заказчика и появилась необходимость установить ее на WP. Провел предварительные работы, сделал базовый скелет для темы и решил протестить на локальном сервере. И тут я заметил интересный пункт в меню админки «Настроить». да, я замечал этот пункт и раньше и даже видел как в других темах он применяется, но сам относился к нему скептически. Но тут закралась мысль, что сделать настройки нативными, т.е. встроенными в ядро WordPress не такая плохая идея. И тут я начал разбираться в вопросе.
Собственно все, что я узнал по теме я описал в статье. Кому интересно сразу почитать о плюсах/минусах и моем мнении прошу в конец статьи или .
Экшн!
Итак, если у вас нет пункта меню «Внешний вид — Настроить» при активации вашей темы, то нужно его добавить. Делается это так:
Для этого создадим и откроем в корне темы файл functions.php и добавим туда такой код:
В массиве $args может быть несколько позиций, а именно:
default — значение настройки по-умолчанию
type — тип настройки
capability — права пользователя, необходимые для изменения данного параметра. Т.е. разные параметры могут видеть разные группы пользователей. Круто! (необязательно)
theme_supports — указывает на то, что текущая тема должна поддерживать описанную в параметре функцию (необязательно)
transport — как изменение настройки будет отображаться в окне предпросмотра. Обновление страницы или AJAX. По умолчанию страница обновляется при каждом обновлении настройки, но если вам интересно могу рассказать, как реализовать это на AJAX, без перезагрузки страницы. Пишите в комментах свои пожелания.
sanitize_callback — имя функции для фильтрации входных данных, в БД
sanitize_js_callback — имя функции для фильтрации выходных данных, из БД
Теперь добавим контрол к настройкам
. Ниже добавим такой код:
Тоже самое, что загрузка файлов, только ставятся ограничения на разрешения файлов. Принмаются только картинки. Удобно. если надо грузить только изображения. К примеру, для заднего фона. Работает по той же схеме, что пример выше, только используется класс WP_Customize_Image_Control.
Если вы думаете, что на этом возможности встроенных настроек ограничиваются, то вы ошибаетесь. В них много чего интересного: добавление собственных настроек, обновление страницы через AJAX. Можете покопаться сами или пишите в комментариях, если хотите продолжения.
Плюсы и минусы
А теперь подведем итоги и рассмотрим подводные камни и преимущества данного метода.
Плюсы:
Настройки встроены в ядро WordPress. Это значит, что при переносе сайта или его обновлении на новую версию у нас сразу будут настройки без скачки обновлений фрейморков и несовместимости
Очень легко добавить. Достаточно базовых знаний по WP и PHP, чтобы добавить настройки в тему. Гораздо проще, чем подключать сторонние решения
Добавление своих типов настроек. Можно расширить функционал. Есть такая возможность, что очень радует.
Изменения появляются сразу в окне предпросмотра.
Минусы:
Нет поддержки визуального редактора для текста. Это серьезный минус для сложных проектов.
Недостаточно типов настроек. Очень много чего нет, а хотелось бы. К примеру, тот же слайдер с неограниченным количеством слайдов. Отчасти решается возможностью добавить свой контрол. Но это лишние телодвижения.
Нет импорта/экспорта. Если вы захотите переустановить тему. то все настройки придется заново вбивать вручную! Что крайне неудобно.
Вы ограничены в свободе размещения блоков. За простоту надо платить. Вы не можете разместить блок с предупреждением или информацией где вздумается, все в рамках заданного формата. Для кого-то неважно, для других критично. Каждый реашет сам.
Заключение
Что касается моего мнения, то я считаю, что Theme Customizer пока сыроват. Да. у него большой потенциал и я уверен в будущем мы увидим много расширений и улучшений для него. Но сейчас разрабатывать сложные проекты на нем не получится.
Если вы делаете простенькую тему или тренируетесь, то обратите внимание на эту «фишку» WP. Если же вы уже серьезно работаете с каким либо и думаете, стоит, переходит или нет, то лучше не стоит. Пока, не стоит. Но определенно стоит посмотреть, что это за «зверь». Ведь потенциал у него большой.
Но, как говорится, каждый решает сам по своему опыту и сложности проектов. На этом я с вами прощаюсь до следующей статьи. Всего вам доброго. И да прибудет с вами терпение в нелегком изучении WordPress.
Это главная страница руководства по созданию тем (шаблонов) для WordPress. Основная информация взята из официального руководства и из личного опыта.
Что такое тема?
Тема WordPress - это набор css, js, php файлов, которые в связке с WordPress и плагинами выводят информацию из базы данных на экран в красивом и удобном виде (дизайне). Ну или в некрасивом и неудобном, тут смотря какую тему выбрать... В других движка тему еще называют "шаблоном", но в WordPress принято говорить именно тема - theme, а не шаблон - template. Хотя и то и другое по сути одно и тоже...
Таким образом, если вы меняете тему, то сайт меняет свой вид, выглядит иначе. На WordPress.org есть тысячи бесплатных тем . Несмотря на широкой выбор тем, многие предпочитают создавать свои темы. Связанно это в первую очередь с тем, что создать простую тему не сложно.
Необходимые файлы
Чтобы создать тему необходимы лишь два файла:
index.php - главный файл темы, отвечает за вывод содержимого
style.css - главный файл стилей, отвечает за css стили
Но ни одна тема по факту не состоит всего из двух файлов. Их больше: PHP, языковые файлы, файл CSS и JS, текстовые файлы. Тему начинают с двух файлов, а затем, чтобы было удобнее, её расширяют, добавляя такие файлы как:
header.php - отвечает за вывод шапки
footer.php - отвечает за вывод подвала
sidebar.php - отвечает за вывод боковой панели
page.php - отвечает за вывод отдельной страницы (записи)
и т.д. смотрите полный список .
Возможности темы
Возможности темы по сути безграничны, ведь там можно полностью использовать PHP. НО! Тема, как призвана отображать содержимое сайта определенным образом, а не добавлять функционала сайту. Поэтому возможности темы принято ограничивать до тех, которые отвечают за внешний вид, а все остальные возможности: голосование, рейтинги, редиректы, СЕО и т.п. принято выносить в плагины...
Таким образом, тема может:
Отвечать за вывод содержимого сайта под разные типы устройств: мониторы и смартфоны. Такие темы называются адаптивные. Также темы могут быть фиксированные, одноколоночные, двухколоночные и т.п.;
Тема может выводить любое содержимое;
Может указать, какой контент будет отображаться для разных пользователей;
Может использовать любые элементы дизайна (картинки, видео).
Как и на любом сайте, тема - это не только цветовое решение, макет и красивая картинка. По-настоящему качественные темы еще и очень функциональны. Функциональность темы, заключается в её гибкой настройке. Т.е. она не добавляет ничего нового на сайт, но отлично настраивается по вкусу владельца. Например: устанавливается фоновая картинка, меняется цвета элементов, настраивается меню и блоки с контентом (виджеты).
Чем тема отличается от плагина?
С точки зрения кода, можно сказать, ничем - в теме можно создать полноценный плагин. А вот с точки зрения логики - всем! Задача плагина, добавить что-то новое на сайт, например добавить опрос. Задача темы - вывод содержимого, в том числе, этого опроса...
Таким образом, тема отвечает за показ контента на странице, а плагин нужен для реализации функционала сайта.
Никогда не добавляйте функциональность в саму тему, если только на это нет веских причин. Если это сделать, то при смене темы функциональность потеряется в месте с ней. Например, в вашей теме есть крутая фотогалерея. И если поменять тему, то эта крутая фотогалерея потеряется...
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Функционирование дочерних тем («дочерей») основывается на их взаимоотношениях с родительскими («родителями»). Важно учитывать, что бесплатные и платные themes изначально являются родителями, следовательно, дочь копирует их параметры и свойства, а также получает стандартный комплект своих функций. В будущем, с учетом потребностей конкретного интернет-ресурса, набор этих опций может быть расширен.
Если коснуться терминологии, то речь идет об особой теме, принимающей значения другой, которая выступает в качестве родительской. Для чего они создаются? Чтобы модифицировать уже имеющиеся themes ВордПресса и таким образом увеличить их количество.
Чем отличается «дочь»
Дочерняя тема ВордПресс открывает возможность вносить необходимые изменения и коррективы. Далее мы рассмотрим, как ее создать, но перед этим разберем ее ключевые отличия:
Изменения, внесенные в родительскую модификацию, не касаются дочерней. Из этого следует, что после разработки они независимы друг от друга.
Производная функционирует исключительно при условии установки родителя, при этом ее активация происходит позднее.
Дочерние привязаны только к своей основе и не взаимосвязаны ни с одной, нри с другой.
Удобно ли работать
Дочерняя тема WordPress представляет собой прекрасную идею, обладающую широким перечнем преимуществ. Лично мы бы рекомендовали ее в стандартном комплекте с продуктами премиального сегмента. Перечислим лишь некоторые плюсы:
Они автоматически сохраняют внесенные корректировки. Благодаря этому можно вносить коррективы напрямую в код, без рисков, что настройки собьются или будут утрачены при обновлении.
Работа с ними - прекрасная подготовка для перехода к написанию основного кода для родительских вариантов.
Улучшается рабочий процесс. Имея в распоряжении всего одну тематическую основу, вы можете создавать сайты, различные по сложности и функционалу.
Так как это продолжение родительской, набор особенностей и функций здесь идентичен. Главные составляющие:
«style.css», где прописаны основные и дополнительные свойства.
«functions.php», где прописано определение функций.
На добавление шаблонов нет ограничений, но перечисленные составляющие в обязательном порядке присутствуют в любой.
Функционирование
«Дочери» локализуются в самостоятельной папке и могут похвастаться отдельными «functions.php» и «style.css». Всегда можно написать вспомогательные файлы, но эта пара отвечает за правильное функционирование - без сбоев и проблем.
При правильном использовании указанных форматов можно отредактировать практически любые исходные параметры, включая стиль, отдельные пункты макетов, скрипты и прочее.
Устройство theme аналогично редакторским слоям фоторедакторов. Если пользователь посещает ваш интернет-ресурс, перед ним открывается «дочь», а потом уже отсутствующие опции и стили загружаются из родительской. В конечном итоге большая часть кода передается от родителя, но перед использованием его нужно модифицировать с учетом настроек «дочери».
Как создать
Сначала проверьте, есть ли у вас в распоряжении все необходимое. А именно доступ к FTP или файловому менеджеру, открытый доступ к самой панели управления ВордПресс. Итак, приступим.
Шаг No1. Создание дочерней темы WordPress
Это достаточно простой процесс. Если будет детально следовать инструкции, его освоит любой пользователь.
Прежде всего создаем папку для дочери в стандартном каталоге. Чтобы в каталоге был порядок и содержимое было систематизировано, лучше назвать папку по образцу «Наименование родителя + окончание child». Для удобства можно добавить наименование того или иного проекта, для которого мы создаем theme. Главное, чтобы название каталога не имело пробелов, в противном случае это может привести к появлению ошибок. Файловый менеджер или FTP-клиент поможет создать новую папку. На сегодняшний день хорошо зарекомендовал себя такой FTP-клиент как FileZilla.
Для примера возьмем за основу «Twenty Seventeen», которая многим знакома. Работать я предпочитаю с Файловым менеджером, поэтому у меня путь до созданной папки выглядит таким образом:
Делаем следующее:
Наверняка, вы убедились, что создание представляет собой легкий процесс. Необходимо только четко следовать инструкции и работать с правильным подходом.
Шаг No2. Настройка
Чтобы приступить к работе, видоизменять, дополнять, адаптировать под запросы и требования вашего сайта «дочь», необходимо правильно выполнить настройки. Будем разбираться по порядку.
Сначала нужно настроить внешний вид.
Для этого мы внесем коррективы в «custom.css», который расположен в каталоге. Сделать это можно через FTP-клиента, обычный текстовый редактор, файловый менеджер или специальный редактор ВордПресс (найти его можно, открыв «Внешний вид», после этого «Редактор»). Здесь понадобятся хотя бы минимальные знания правил использования CSS, а также навык проверки через браузер элементов сайта. Например, чтобы изменить цвет фона в «style.css», мы прописываем следующее правило CSS:
На следующей картинке представлено, как изменится дизайн сайта после внесенных корректировок. Фон стал салатовым:
Таким образом можно отредактировать любые имеющиеся элементы на сайте.
2.Работа с функциями.
Применение и работа с «дочерьми» дает и такое преимущество, как возможность ведения двух независимых «functions.php». Напомним, что данные файлы применяются для удаления старых и добавления новых функций. Если они имеются, можно не беспокоиться о сохранности или проблемах в работе документа. Даже если основа обновится, он сохранится в неизменном состоянии.
Для добавления новой опции в файл вписывается и новый PHP-код. Например, код, представленный ниже, удалит опцию поиска WordPress.
Специальные сервисы для облегчения труда разработчика
Облегчить процесс создания можно путем использования ряда специальных плагинов. Библиотека WordPress представляет широкий выбор плагинов, большинство из них можно использовать бесплатно. Использование плагинов в разы облегчает процесс разработки. Рассмотрим наиболее популярные плагины.
Child Themify.
Это максимально простой и легкий в использовании плагин с интуитивно понятным интерфейсом. Многие настройки здесь можно выполнять одним нажатием кнопки.
2. Child Theme Configurato.
Здесь также можно сформировать «дочь», причем на это понадобится всего пара кликов. Редактор CSS здесь достаточно мощный, что позволяет выполнять настройки расширенного функционала. Плагин автоматически производит идентификацию ключевых правил CSS и не затрагивает их при редактировании.
3. _child Theme Boilerplate.
Здесь представлены готовые шаблоны для формирования «дочерей». Шаблон назван просто - «_child» - и разработан специально для упрощения работы. Шаблон предлагает интуитивную тему, от вас требуется только указать ссылку на «родителя». Шаблон данного типа позволяет создавать профессиональные варианты - здесь уже созданы 2 готовых файла, стандартные «functions.php» и «style.css».
Первый из них обладает особенной функцией под названием «aa_enqueue_styles()». Опция позволяет создавать очередь таблиц стилей, где сначала идут родительские, а затем дочерние. В результате стиль последних всегда определяется первыми.
Большинство разработчиков связывают эти таблицы между собой в CSS, но это приносит больше вреда, чем пользы. Браузер начинает долго загружать сайт, потому что нужно осуществлять загрузку стилей сначала из «родителя», а потом уже из производной. Если же поставить таблицы стилей отдельно, задача браузера облегчится, а скорость загрузки увеличится.
Вот код, с помощью которого можно добавить данную опцию:
Второй файл имеет базовый хедер, содержащий особую информацию. Данные сведения позволяют WordPress распознать его как таблицу стилей «дочери». Поэтому особенно важно прописать код для «style.css»:
Подытожим
Не имеет значения уровень владения программированием, а также опыт работы с ВордПресс. Создать дочернюю тему WordPress не составит особого труда, при этом нет риска, что настройки удалятся после выхода. Путем написания небольшого кода или внесения изменений в уже написанный и проведения простых действий с каталогом вы можете изменить свой сайт. Главное - соблюдать инструкцию, постепенно переходя от одного пункта к другому. Не забывайте следующее: если появляются обновления для «родителя», «дочери» не изменяются, это правило касается вносимых изменений в контент, настройки и так далее.
Экспериментируйте, пробуйте различные варианты и ищите оптимальный для себя.
Этой статьей я продолжаю серию уроков о создании сайтов на движке WordPress. После установки новой темы на блог, нам надо будет настроить ее под свои нужды. Это сделать совсем не сложно. А вот для редактирования шаблона WordPress
, нужно, как минимум, знать, как он устроен и какие его файлы за что отвечают. Изучив структуру шаблона WordPress
и имея базовые знания HTML и CSS, Вы уже сможете редактировать шаблон темы, изменяя ее внешний вид и функциональность. Но обо всем по порядку.
Сразу после установки новой темы, вряд ли Ваш блог будет иметь привлекательный вид. Чтобы это исправить, надо настроить тему WordPress, добавив и упорядочив на страницах блога все необходимые элементы. Итак, приступим к настройке шаблона темы WordPress
.
Настройка темы (шаблона) WordPress.
Войдем в Панель инструментов
() WordPress и продолжим ее изучение, подробно разобрав все пункты раздела “Дизайн
“, который отвечает за внешний вид и редактирование шаблона WordPress:
Следующая вкладка “Виджеты
“. При переходе на нее перед нами откроется такая картина:
В левой части мы видим все “Доступные виджеты
“: RSS, Архивы, Календарь, Найти, Облако меток, Последние записи, Рубрики, Текст и т. д. Справа схематически обозначен сайдбар блога. В зависимости от строения структуры шаблона WordPress, сайдбар может быть один или несколько. На блоге он выглядит как боковая колонка, расположенная справа или слева, а, возможно, и с обеих сторон одновременно.
Для того чтобы заполнить сайдбар необходимыми нам виджетами, надо просто выделить требуемый виджет левой кнопкой мыши и, удерживая ее, перетащить виджет на нужный нам сайдбар. Таким же образом можно перемещать виджеты вверх или вниз в самом сайдбаре.
Что обозначает каждый из виджетов, достаточно понятно из их названий. Особого внимания заслуживает виджет “Текст
“. Переместив его в сайдбар, откроются поля для ввода данных и заголовка. Сюда Вы можете вставить как обычный текст с картинками, так и различные HTML-коды. Например, счетчики статистики, рекламные блоки и банеры, формы подписки и др. После заполнения или редактирования виджета “Текст
“, нажмите кнопку “Сохранить
“, чтобы изменения вступили в силу. Не нужные виджеты можно удалить, нажав кнопку “Удалить
” или перетащив их обратно в раздел “Доступные виджеты
“. Если надо временно отключить виджет, сохранив при этом все его настройки для дальнейшего использования, перетащите этот виджет влево вниз в раздел “Неактивные виджеты
“. В любой момент Вы сможете вернуть его обратно.
Далее идет вкладка “Меню
“. Открыв ее, мы попадаем на страницу создания собственного меню блога с подробным описанием, как это сделать. В меню можно включить рубрики, страницы и произвольные ссылки расположив их в требуемом порядке простым перетаскиванием. Нажав кнопку “Сохранить меню
“, меню блога будет создано.
Чтобы созданное меню появилось в сайдбаре, надо перейти на вкладку “Виджеты
” и перетащить виджет “Собственное меню
” в сайдбар. Соответственно, если у Вас на блоге были активированы виджеты “Рубрики
” и “Страницы
“, то их можно будет деактивировать. Надо сказать, что мало кто использует меню на блоге.
Последняя вкладка “Редактор
” позволяет редактировать файлы шаблона WordPress. Открыв ее, справа Вы увидите список всех файлов шаблона WordPress, то есть его структуру. При нажатии на любом из этих файлов, его содержимое откроется в окне для редактирования. После внесения необходимых изменений не забудьте подтвердить их, нажав кнопку “Обновить файл
“.
Итак, мы изучили раздел “Дизайн
” в админке нашего блога и разобрались с настройками темы (шаблона) WordPress.
Стоит отметить, что почти каждая современная тема имеет свои собственные настройки. Обычно они вынесены в админ.панель отдельным разделом с названием темы.
Иногда индивидуальные настройки шаблона темы WordPress находятся в виде отдельных пунктов в разделе “Дизайн
“.
Как настроить ту или иную тему должно быть подробно описано на сайте разработчика или локализатора шаблона, с которого Вы ее скачали. Индивидуальные настройки темы WordPress позволяют с легкостью, не вмешиваясь в исходный код шаблона, изменять элементы дизайна сайта (логотип, фон, шрифты, расположение сайдбаров и др.), вставлять банеры, кнопки социальных сетей и RSS, счетчики статистики, рекламные блоки и многое другое. Советую внимательно изучить эти настройки, особенно если Вы плохо знакомы с HTML и CSS.
Внимание!
Важно знать, что если Вы делали изменения в индивидуальных настройках шаблона, то при установке новой темы, эти настройки надо вернуть в исходное состояние. Обычно для этих целей существуют кнопки “Сбросить
” или “Восстановить по умолчанию
“, в зависимости от выбранной Вами темы WordPress.
А теперь давайте посмотрим, из каких файлов состоит шаблон темы, изучим его структуру.
Каждый из файлов шаблона WordPress отвечает за оформление отдельных блоков на веб-странице сайта. Потом, подобно конструктору, из этих блоков собираются в единое целое страницы блога. Так как темы (шаблоны) WordPress создают разные разработчики, то и структура этих шаблонов может быть различной. Некоторые файлы шаблона темы в обязательном порядке присутствуют на каждой веб-странице, другие выводятся только в определенных случаях.
На рисунке ниже Вы можете видеть примерную структуру шаблона WordPress.
Вот список файлов, которые обычно присутствуют во всех шаблонах и их краткое описание:
header.php
(шапка) – присутствует на всех веб-страницах и отвечает за вывод верхней части сайта.
index.php
– отвечает за вывод содержимого главной страницы.
archive.php
– временной архив статей (за месяц или за год). Иногда этот файл заменяет собой category.php и tag.php.
search.php
– вывод записей результатов поиска по сайту.
comments.php
– файл шаблона комментариев.
sidebar.php
– боковая колонка сайта, в которой располагаются виджеты. Сайдбаров, в зависимости от структуры шаблона WordPress, может быть несколько. Этот файл присутствует на всех страницах сайта.
404.php
– файл ошибки 404, которая появляется, если вводится неправильный адрес веб-страницы или ее не существует.
functions.php
– в этом файле обычно прописаны функции, которые вызываются при отображении сайта или при работе с админ.панелью.
footer.php
(подвал) – нижняя часть сайта, присутствует на всех его страницах. Этот файл шаблона WordPress мы уже рассматривали, когда удаляли в нем нежелательные .
style.css
– файл таблицы стилей, отвечающий за внешнее оформление сайта.
Теперь, зная структуру шаблона WordPress
и за что отвечает каждый из его файлов, можно изменять внешний вид и функциональность определенной части сайта.
Важно понимать, что, не имея хотя бы начальных знаний HTML и CSS , лучше не пытаться редактировать файлы темы (шаблона) WordPress. А в случае, если Вам все-таки необходимо отредактировать какой-нибудь файл шаблона, обязательно предварительно сделайте его резервную копию. Тогда, если что-то пойдет не так, Вы всегда сможете восстановить исходный файл.
От себя замечу, что редактировать шаблон WordPress
удобнее не из админки блога, а открыв файл в программе Notepad++, используя для этого соединение с сервером хостинга через FTP-клиент. О том, как это сделать, можно почитать в статье “ “.
А на сегодня все. Теперь созданный Вами сайт будет выглядеть гораздо привлекательнее. До встречи на страницах блога .
Оставляйте свои комментарии и не забывайте нажимать на кнопки соц.сетей внизу статьи, тем самым Вы поможете развитию этого блога. Заранее спасибо!
Всем привет! В данной статье речь пойдет о том, как можно добавлять данные в таблицу
в Microsoft SQL Server, если Вы уже хоть немного знакомы с языком T-SQL, то наверно поняли, что сейчас мы будем разговаривать об инструкции INSERT, а также о том,...
Привет всем читателям блога. Скажите друзья, задумывались ли вы, какой большой функционал таит в себе клавиатура? Большинство людей даже не подозревает, что с её помощью можно выполнять действия, которые могут облегчить и . Не печально ли, что...
В современном мире все стремительно меняется. Фотоаппараты всех моделей, от самых дешевых «мыльниц» до профессиональных «зеркалок», умеют снимать видеоролики качества HD. Такое видео возможно и для дорогих моделей мобильных телефонов. Стандарты...