Как сделать тему вордпресс самостоятельно

создание темы вордпресс

Тема сайта состоит из набора файлов и стилей. Они определяют внешний вид ресурса, как бы составляют его каркас, который наполняется контентом и дополнительными функциями. В каталоге WordPress есть множество готовых тем, разработанных для интернет проектов самых разных направлений. Но иногда веб мастера решают не использовать готовый макет, а создать свою тему.

Написание собственной темы осуществляется по разным причинам. Например, если есть желание сделать переключатель между двумя разными темами, чтобы пользователи могли вбирать внешний вид просматриваемых страниц. Другой вариант — появилась необходимость иметь отдельный шаблон для новых рубрик сайта. Ну и, конечно же, к разработке индивидуальной темы прибегают для того, чтобы сделать ресурс с уникальным неповторимым дизайном.

Есть еще одна причина, по которой делают темы с нуля — это желание проявить свои знания и умения, предоставить личный проект в сообществе WordPress, получить оценку коллег, а может быть даже, если макет получился хорошо, выставить его для платного скачивания.создание темы вордпресс

Правила создания тем

Приступая к процессу необходимо предусмотреть все тонкости и нюансы, связанные с принятыми стандартами WordPress. Если не учесть стандарты, можно после проделанной работы обнаружить, что новая тема не способна полноценно функционировать, так как не совместима с платформой или отдельными ее функциями.

Чтобы все получилось правильно, нужно изначально зайти на официальный сайт WordPress, и изучить информацию о основах дизайна (на странице «дизайн и раскладка блога»), о стандартах кодирования CSS, стандартах кодирования вордпресс.

Начало работы

WordPress имеет три главные темы, предоставляемые пользователям по умолчанию. Они сделаны в полном соответствии со всеми правилами и стандартами. К тому же они безотказно работают и при их написании них предусмотрены все базовые функции. Называются эти темы “Twenty Seventeen”, “Twenty Sixteen” и “Twenty Fifteen”. Можно открыть их коды и посмотреть что, как и в каком порядке в них присутствует. Обращаться к ним полезно и в процессе разработки собственного продукта как к своеобразной шпаргалке.

Важно предварительно установить на компьютер весь необходимый инструментарий. Во-первых, нужно установить текстовый редактор, если его нет. Лучше всего скачать Nodepad++, но можно пользоваться и обычным блокнотом. Чтобы иметь возможность полностью автономно заниматься разработкой, следует скачать и установить локальный сервер. Это может быть традиционный Denwer или ставший очень популярным в последнее время OpenServer. Далее скачиваем и устанавливаем на локальный сервер движок WordPress.создание темы вордпресс

После установки программ необходимо зайти в нужную директорию, где будут расположены файлы новой темы. Чаще всего найти ее можно по пути C:\WebServers\home\localhost\www\имя сервера заданное при установке\wp-content\themes. В этой директории уже хранятся стандартные файлы. Делаем новую папку и даем ей название. Можно назвать ее «MyTheme».

В новую папку помещаем два созданных текстовым редактором файла – style.css и index.php. На данном этапе это будут просто пустые папки, позже они будут наполнены соответствующим материалом. Еще нужно добавить папку, в которую будут помещении все картинки для сайта. Ее называют «images».

При дальнейшей работе все, что будет разработано специально для этой темы надо будет помещать именно в папку «MyTheme». Так, если для отдельных разделов, рубрик или элементов портала будут созданы дополнительные шаблоны, файлы для их функционирования следует помещать в данную папку.

Наполнение файла index.php

Сюда нужно поместить код, содержащий основные области сайта – header, main, sidebar и footer. На этом этапе можно использовать готовый код, характеризующийся простотой, отсутствием дополнительных элементов, правильностью составления. Например, есть вот такой вариант:

<!DOCTYPE html>

<html>

<head></head>

<body>

<div id=”header”>

<h1 class=”site-title”>Site Title</h1>

<div class=”nav-menu”></div>

</div>

<div id=”main”>

<div class=”post”></div>

</div>

<div id=”sidebar”>

<div class=”widget”></div>

</div>

<div id=”footer”></div>

</body>

</html>

Этот код можно просто скопировать и перенести в папку «index.php». Прежде чем сохранять, нужно проверить формат сохраняемого файла, это дожжен быть php формат. Дальше его будет несложно дополнять, вставляя те или иные элементы на нужные места. Важно помнить, что все внесения располагаются между значением <html> в начале кода, и значением </html> в конце. Все, что будет прописано за пределами этих рамок, не будет распознаваться как часть кода, то есть окажется нефункциональным.

При внесении новых кодов необходимо понимать куда именно их вставлять. Так, например, все, что касается технических данных, необходимых браузеру для обработки страниц, а также поисковым системам для анализа сайта, прописывается между значениями <head> </head>. Информация для выведения элементов страниц на экран, а именно контента, вносится между <body> и </body>.

Начинать наполнять этот файл будет несложно. Просто находится код для той или иной функции (его можно отыскать на форумах WordPress или на ресурсах, посвященных сайтостроению), и вставляется в нужную часть файла. Когда дополнительных значений будет много, появится необходимость более точного размещения отдельных кодов, и это потребует осторожности и внимательности, а также создания резервной копии сайта, чтобы при допущении ошибки его можно было вернуть к рабочему состоянию.

Разбивка файлов

Теперь нужно продублировать отдельными файлами все указанные в нем элементы. К основным элементам относятся header, main, sidebar и footer. Как пример возьмем файл header.php. Выполняем следующие действия. Сначала открываем папку index.php. Затем находим соответствующий кусок кода и копируем его с дополнением. В результате получится вот так:

<!DOCTYPE html>

<html>

<head></head>

<body>

<div class=”header”>

<h1 class=”site-title”>Site Title</h1>

<div class=”nav-menu”></div>

</div>

Тот же принцип действий применяется и для выделения остальных главных элементов. Данная процедура выполняется с целью облегчить навигацию по коду. Когда при помощи добавления кода будут внесены все функции, сам код превратится в огромный набор значений, и найти место поправок или дополнений будет очень сложно. Разбивка поможет сохранить структуру кода.

Осуществляя разбивку важно сохранить согласованность основного индексного файла и его дубликата. С этой целью под блоками отдельных элементов прописывается такая вставка:

<?php get_header(); ?>

<div class=”main”>

<div class=”post”></div>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Наполнение файла style.css

В папке style.css сначала вносятся данные, которые будут отображаться панелью админки сайта. Используется следующий набор пунктов:

/*Theme Name: …

Theme URI: http:// …

Author: …

Author URI: http:// …

Description: …

Version: 1.0

Вместо многоточий следует внести данные своего ресурса.

Дальше в процессе работы этот файл можно будет обновлять, добавляя значения, где кроме самого кода будут еще и комментарии. Комментарии необходимы для веб мастера, они позволяют не запутаться в большом количестве значений. На страницы сайта они не выводятся. Например:

* {

margin:0; /*Обнуление всех отступов, если отступы нужны, то просто проставляется размер шага */

padding:0;

}

body {

font-family: Arial, Helvetica, sans-serif; /*здесь указан ведущий шрифт текста*/

То, что помещено между знаками /**/ – это комментарии — удобный помощник разработчику.

Расшифровка стандартных файлов шаблонов в WordPress

В списке, приведенном ниже, можно найти основные значения, встречающиеся в коде ресурса. Их лучше запомнить или иметь в закладках, чтобы легко ориентироваться работая над сайтом.

Footer — файл, определяющий стиль подвала сайта;

404 — очень важный для разработки шаблон, применяемый для страниц с ошибкой 404 «Not Found». Нужен для корректного оповещения посетителей том, что страница не существует.

Search — файл, содержащий параметры для выполнения поиска по сайту или каталогу;

Archive — шаблон раздела с контентом, ушедшим в архив;

Date — определяет стиль вывода даты-времени;

Category — шаблон, применяемый для разделения контента на категории;

Page — тема для отдельных страниц;

Home — тема главной страницы;

Comments — форма размещения и отправления комментариев;

Header — стиль, отвечающий за дизайн шапки сайта.

Есть и другие значимые элементы. Не все они обязательно используются в каждом ресурсе, но они составляют базовый набор востребованных функций. Каждый такой элемент по мере разработки темы может быть преобразован при помощи кодов, скриптов или плагинов.

Делаем шапку сайта

Шапка сайта — это его визитная карточка. Она должна быть хорошо продумана и тщательно прописана в файлах. Для начала необходимо взять подходящее изображение, которое станет фоном шапки. Его нужно обработать, задав ширину, соответствующую ширине страницы и высоту по своему усмотрению. Дальше идем в папку «index.php», находим место расположения значения “header”, и вносим следующий код. Причем параметры ширины, высоты, фона и отступа снизу задаем свои.

#header{

width: 900px; – ширина

height: 200px; – высота

background-color: #25B33f; – фон

margin-bottom: 10px; – отступ снизу

}создание темы вордпресс

Далее перед закрывающейся скобкой вставляем картинку:

background-image: url(images/i8.png) – картинка

Фон должен иметь код из таблицы цветов, а картинка размещается в виде ссылки на нее. Фон задается для того, чтобы он появлялся в случае, если картинка будет долго загружаться или не откроется вообще.

Для описания и заголовка сайта создается в блоке <div id=”header”> прописывается 2 заголовка:

<div id=”header”>

<h1>Заголовок<h1>

<h3>Описание</h3>

</div>

Чтобы придать этой части презентабельный вид, прописываем определенные свойства:

h1{

color: #ffee00; – цвет заголовка

font: 40px Georgia; – шрифт

margin-left: 300px; – отступ слева

}

h3{

width: 200px; – ширина

color: #ffee00; – цвет

font-style: italic; – курсив

margin: 70px 0 0 30px; – расположение

}

Ширина задается, чтобы надпись не растянулась на всю ширину сайта. Отступы регулируются в зависимости от того, где именно должна располагаться надпись — на каком расстоянии от левого края поля шапки.

Делаем заголовок со ссылкой на главную

Заголовок при стандартном варианте оформления остается видимым на всех страницах. Может видоизменяться шапка, но основные ее элементы, в том числе и заголовок, сохраняется. В большинстве случаев на заголовок устанавливают кликабельную ссылку, чтобы через него можно было с любого места на сайте вернуться на главную страницу. Для этого используются различные коды, которые легко можно найти на специализированных ресурсах.

Подвал сайта

Нижняя часть ресурса, которая тоже видна на всех страницах — это footer. Здесь может быть минимум информации. Вносят ее по аналогии с шапкой, то есть все значения прописываются между соответствующими элементами кода.

Меню

Функциональность и привлекательность создаваемой темы во многом зависит от оформления меню. Данный элемент влияет на внешний вид ресурса и на удобство перемещения по его страницам. Меню может располагаться вертикально или горизонтально. Если оно содержит подпункты, имеет смысл устанавливать меню с выпадающими списками. При наведении курсора на отдельный пункт меню его цвет должен изменяться, чтобы было понятно, что ссылки пунктов работают.создание темы вордпресс

Вертикальное меню создается на основе маркировочного списка:

<ul id=”navbar”>

<li><a href=”#”>Главная</a></li>

<li><a href=”#”>Новости</a></li>

<li><a href=”#”>Контакты</a></li>

<li><a href=”#”>О нас</a></li>

</ul>

В стилях нужно установить параметры по умолчанию:

#navbar {

margin: 0;

padding: 0;

list-style-type: none;

width: 100px;

}

Дальше ссылкам меню придается эстетичный вид — задается цвет, эффект при наведении и т. д. Вот пример стилизованного меню:

#navbar a {

background-color: #949494;

color: #fff;

padding: 5px;

text-decoration: none;

font-weight: bold;

border-left: 5px solid #33ADFF;

display: block;

}

#navbar li {

border-left: 10px solid #666;

border-bottom: 1px solid #666;

}

Запуск сайта

Сразу после создания пустых основных папок темы, можно зайти в админ панель вордпресс и активировать ее. При этом появится ссылка, на сайт, перейдя по которой мы попадем на пустую страницу. Далее по степени наполнения кода портал будет преобразовываться. Проверять работу каждого нового кода следует по этой же ссылке. Все дополнения должны сразу отображаться. Если изменения не видны, нужно почистить память браузера, в котором открывается сайт.

Добавление страниц

Перед тем, как приступить к созданию новых страниц, рекомендуется зайти а админку и указать стиль для ссылок на них. Добавляются страницы тоже через админ панель. Чтобы все работало слаженно, и отображалось как положено, нужно в главном меню присвоить порядковый номер каждой страницы.

После добавления всех необходимых страниц, они будут представлены в админке как список. Каждая из них будет иметь стандартный набор инструментов для изменения. Очень важно не забыть указать, что страница Home должна быть главной.

Шаблон страницы

На обычном сайте все страницы, за исключением главной, имеют аналогичное оформление. Для них нужно создать единый шаблон. Есть варианты, когда страницы делятся на два или три вида. Например, интернет магазин может иметь страницы блогов и страницы каталога. В этом случае необходимо разработать два разных шаблона. Вариант кода простой страницы:

<?php get_header(); ?>

<div class=”main-heading”>

<h1><?php the_title(); ?></h1>

</div>

<section>

<?php if (have_posts()): while (have_posts()): the_post(); ?>

<?php the_content(); ?>

<?php endwhile; endif; ?>

</section>

<?php get_footer(); ?>

Основу страницы следует дополнить картинками, сохраненными в папке images и некоторыми стилями, внесенными в файл style.css.

Логотип

Картинку логотипа нужно подготовить и сохранить в images под названием /logo.png. Далее в шапку прописывается такой код:

<div class=”wrapper”>

<header>

<a href=”/”><img src=”<?php bloginfo(‘template_url’); ?>/images/logo.png” alt=”Whitesquare logo”></a>

</header>

Если у вас возникли вопросы по скаченному архиву или вы нашли неработающие ссылки, то напишите об этом в комментариях. Также, вы можете заказать установку, настройку или перевод этой темы WordPress.

    Комментарии и отзывы

    avatar
      Подписаться  
    На:
    Adblock
    detector