Как создать шаблон в вордпресс для начинающих. Создание темы для WordPress с нуля

02.04.2019

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

Что выберете вы — это полностью ваше решение.

Данная статья лишь начертит примерную карту действий, чтобы вы поняли как сделать сайт на WordPress самостоятельно и что для этого понадобится.

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

Почему лучше писать сайт на движке Вордпресс

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

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

поддерживать PHP (уточняйте версию в зависимости от обновления движка);
MySQL (аналогично проверьте соответствие версии);
содержать модуль mod_rewrite для человекопонятных ссылок (по желанию);
хостинг должен принимать удаленные соединения.

Планирование перед запуском сайта

Вам необходимо создать собственную карту действий. Неважно, создаете вы сайт бесплатно или инвестируете в него деньги. Разработка будет безуспешной, если вы все не спланируете. Стоит расписать пошагово план действий. Первым делом убедитесь, что хостинг соответствует требованиям, что указаны выше. Если не получается разобраться в этом вопросе, можете отыскать в Интернете подходящий форум, где излагается список подходящих хостинг-провайдеров. Либо посоветуйтесь об этом со знакомыми, у которых уже есть свой сайт на WordPress.

После выполнения определенного пункта подготовительно плана вносите изменения на вашу карту действий, чтобы видеть ситуацию в общем. Следующим шагом придумайте логин и пароль как для сервера, так и для движка. Рекомендуется использовать разные пароли для разных аккаунтов: на движке один «пассворд», на сервере — другой. Иначе повысится вероятность взлома админки.

Далее подготовьте программную составляющую — скачайте все необходимое ПО на компьютер, чтобы потом не делать это в спешке. Во-первых, установите правильный текстовый редактор. Он может понадобиться для редактирования отдельных элементов вашего проекта. Не волнуйтесь, в Интернете есть инструкция для всех этапов создания чего-либо для сайта, будь то дизайн, плагин или виджет. Лучшие редакторы — это Kwrite, Notepad++, Website Editor, JEdit и Coda. Кроме программы для редактуры кода, вам понадобится также FTP-клиент для переноса и изъятия данных с сервера. Лучший в своем роде — это FileZilla. Установите его или какой-либо другой.

Установка Вордпресс

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

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

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

В распакованном дистрибутиве вы найдете файл wp-config-sample.php. Вам необходимо переименовать его, оставив только wp-config.php. Именно на этом этапе вы и воспользуетесь помощью предустановленного ранее текстового редактора. Чтобы сайт на движке заработал, необходимо правильно указать информацию о базе данных, созданной на хостинге. Вам предстоит кое-что добавить в файле wp-config.php (писать много не придется):

напротив DB_NAME впишите имя БД (базы данных);
возле DB_USER укажите имя пользователя;
там где DB_PASSWORD пропишите пароль;
около DB_HOST обычно нужно указывать localhost, но не всегда (воспользуйтесь помощью поддержки сервера, чтобы это узнать);
DB_CHARSET (также выясняйте в службе поддержки);
DB_COLLATE (если не требуется, то не меняйте эту строку).

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

Если вы следовали данным шагам, значит вы уже вплотную подобрались к завершающему пункту установки. Теперь вам следует перейти по ссылке http://доменное_имя.ру/ wp-admin/install.php. URL будет иметь такой вид, если вы разместили движок в корневой папке. Если это не так, то возможно в данную цепочку нужно будет добавить еще пару названий директорий, куда вы загрузили дистрибутив.

После перехода по указанной ссылке ядро окончательно закрепится на вашем хостинге и вы уже и сами сможете обучать тому, как сделать сайт на WordPress. Сразу после установки зайдите в админку платформы. Вы создадите свой аккаунт, введя заранее придуманные имя пользователя и пароль. Теперь постарайтесь не заблудиться в дебрях административной панели и понять что к чему. , как уже говорилось, тем и хороша, что легко дается новичку. Так что вам не придется платить кому-либо за обучение — вы и сами бесплатно сможете научиться пользоваться этим ядром.

Настройка движка после установки

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

К примеру, сразу определите — будет ли на вашем ресурсе комментарии. Если у вас блог, лучше активировать обсуждения, а вот для интернет-магазина они ни к чему. Также определите количество авторов и пользователей Вордпресс, а также права, какими вы их наделяете. Добавьте свои параметры публикаций, чтобы авторам сайта было максимально удобно размещать свои материалы. Учитывайте при этом особенности СЕО. Лучше с самого начала позаботиться о семантическом ядре, чтобы раскрутить площадку можно было бесплатно, не пользуясь платной «помощью» сеошников.

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

Добавление новой темы

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

Новая тема оформления устанавливается на сайт пошагово:

Скачайте и разархивируйте шаблон на компьютере.
Создайте на хостинге в разделе wp-content/themes папку с названием скачанной темы.
Переместите файлы шаблона при помощи FTP-клиента на хостинг.
Войдите в административную панель в профиль пользователя с правами админа.
Откройте вкладку «Внешний вид», раздел «Темы».
Выберите нужный шаблон из доступных тем.
Активируйте его.

Как создать форум, блог соавторов и другой формат сайта? Как добавить новые функции?

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

Как создать форум на Вордпресс при помощи плагинов

Нет ничего сложного в том, чтобы превратить ваш ресурс в форум. В Интернете есть ни один бесплатный плагин для этих целей. Разберем несколько модулей, которые вам подойдут (платные и бесплатные). Лидером среди подобных дополнений считается WP Symposium. Чтобы активировать его, вам даже не придется влазить в директории на сервере. Достаточно зайти в административную панель во вкладку «Плагины». Там вы увидите кнопку «Добавить новый» и «Загрузить». Нажимаете и указываете расположение модуля на компьютере. После его загрузки на движок вы сможете активировать его.

У каждого плагина есть свои особенности. Чтобы добавить форум при помощи WP Symposium, вам необходимо будет воспользоваться шорткодами. Это короткие коды-отсылки, которые активируют функции модуля в нужном месте на сайте. Инструмент сам сгенерирует такой код. Вам необходимо будет лишь разместить его в положенном месте в структуре страницы. После добавления шорткода на сайте появится форум с множеством категорий, веток и целым перечнем возможностей пользователя.

bbCode — это другой популярный инструмент, который поможет вам бесплатно создать форум на страницах сайта. Эта разработка вполне заменит целый комплекс плагинов, так как позволяет создать полностью автоматизированный сервис обсуждений и переписки людей. В модуле есть встроенная защита от взломов аккаунтов и функция борьбы со спамерами. Вы сможете добавить до 7 различных виджетов на сайт. Также есть функция прикрепления отдельных постов сверху страницы, для выделения важных тем. bbCode хорошо работает с интеграцией каких-либо БД, потому сможете загрузить в него любое содержимое. В итоге получите замечательный форум.

Еще один популярный формат форума, разработка, пришедшая в Рунет из Запада — это сайты вопросов/ответов. Ныне такие ресурсы пользуются огромной популярностью и хорошо индексируются поисковиками. Потому если создать хороший и интересный проект, вполне вероятно, что пользователи сами раскрутят его. А поможет в создании плагин CM Answers, который как раз и предназначен для генерации вопросно-ответного форума.

Как добавить карту и другие функциональные элементы на сайт WordPress

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

Главное, что вам необходимо усвоить — это то, что не имеет границ в своей функциональности. Как только вы поставите себе цель, загляните в Гугл в поисках решений — и наверняка найдете нужный ответ! Этот движок подходит для реализации любой задачи. Вы сможете справиться с достижением цели, какой бы сложной и непонятной она была! Теперь, когда вы знаете как создать сайт на WordPress, нет ничего невозможного. Приступайте!

Сегодняшний пост я решил посвятить созданию блога на движке — одном из лучших движков для создания сайтов, и ответить на вопрос: Как создать блог? Чуть ниже расскажу о самой простой схеме создания блога, которую с легкостью освоят даже новички в сайтостроении.

Почему именно WordPress?

Способов обзавестись личным блогом можно найти уйму. Это могут быть бесплатные сервисы вроде ( , LI и т.д.) или различные движки для создания сайтов, например, Drupal и, конечно же, WordPress и другие.

Описать и сравнить все эти способы в одной статье не представляется возможным. Поэтому я просто приведу вам несколько фактов о Вордпресс и вы поймете, что это тот самый движок, который вам нужен!

7 фактов и плюсов CMS WordPress:

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

Схема создания WP-блога за 10 минут

На самом деле создать блог на Вордпресс можно двумя путями:

На локальном сервере вашего компьютера с последующим переносом блога на хостинг в Интернет;
Непосредственно в Интернете, с помощью автоматической установки CMS, которую предоставляют некоторые Хостинг-фирмы.

Теперь чуть поподробнее, первый способ является более профессиональным, но и занимает на много больше времени. Суть в том, что вам необходимо будет установить локальный сервер на компьютер с помощью пакета Denwer , после чего вручную установить WordPress, и только полностью настроив блог переносить его в Интернет. Преимущество данного блога в том, что блог попадет в интернет полностью настроенным и оптимизированным. Недостатки: временные затраты, сложность.

Второй способ, если не учитывать время на регистрацию домена, займет не более 10 минут.

Тем кто решил осваивать основы сайтостроения пригодится знание первого способа. А для тех кто хочет завести блог и выкладывать на нем, например, кулинарные рецептики или свои личные заметки, я порекомендую лучше второй способ. Сэкономите уйму времени и сохраните кучу нервов.

Что потребуется для создания блога

Чтобы не вводить вас в заблуждение, я сразу разъясню, что и зачем нам понадобится.

10 минут вашего личного времени , не считая нескольких часов на активацию домена, как правило от 1 до 6.
Мозг, терпение и прямые руки. Это я так в шутку, но запомните, процесс создания сайта очень требователен к этим ресурсам. Раз уж решились вам придется запастись терпением, изучать много нового и не косячить.
Хостинг . Это то, где будет храниться ваш блог. Здесь стоит выбор между бесплатным хостингом и платным (грубо от 100 за месяц).
. Это адрес вашего блога в Интернете. Для его регистрации понадобятся ваши личные данные.

Это вроде все. Ну и по мелочам, вам могут понадобится телефон, электронная почта.

Хостинг Beget и WordPress

Создавать блог на WordPress мы будем именно на Хостинге Beget. По-моему мнению, это самый простой и удобный в использование хостинг. Если взять во внимание авторитетные рейтинги хостеров рунета, то Beget во всех без исключения будет в Топ 3.

Есть две возможности для создания тем WordPress . Самый простой и доступный вариант – это создание дочерней темы для уже существующей. Для этого необходимо создать в обязательном порядке всего один файл – style.css, в котором располагаются стили дочерней темы. WordPress поддерживает создание дочерних тем. Файл functons.php дочерней темы загружается раньше, чем основной, а это значит, что дочерняя тема может перезаписывать функции основной темы, кроме того основная тема может объявлять хуки WordPress , которыми будут пользоваться дочерние темы. Любой файл-шаблон основной темы может быть переобъявлен в дочерней теме и тогда подгружаться будет именно он, а те файлы, которые мы не создаем, берутся из шаблона основной темы. Это очень удобно, потому что у нас уже есть работающий сайт и мы можем изменять только дизайн по своему вкусу и добавлять функциональность, не нарушая общую структуру и работу темы WordPress. Таким образом можно создавать темы, отличные по внешнему виду, но имеющие всю функциональность основной, очень быстро и без затрат лишнего времени. Во втором случае мы можем создать свою тему WordPress с нуля , именно об этом написана эта статья. Файлы шаблона WordPress условно можно разделить на три категории:

Файлы стилей css и JavaScript файлы.
Файлы шаблонов php.
Файл functions.php.

Файлы стилей будут определять внешний вид сайта, js файлы добавляют динамику для страниц. Файлы шаблонов подчиняются иерархии, заданной WordPress, и служат для отображения разных частей сайт, например, можно создать отдельный шаблон для отображения записей, страниц, архивов записей, меток и так далее. В самом упрощенном случае сайт может состоять из двух файлов: основного файла стилей style.css и шаблона index.php, который будет отвечать за отображение всех страниц. Если мы добавим шаблон с именем page.php (это зарезервированное название), то при отображении страниц WordPress воспользуется именно этим шаблоном, а для записей и других страниц будет по-прежнему использовать index.php. Далее мы можем добавить шаблон для записей single.php и для категорий category.php и вот таким образом происходит сознание шаблонов для различных частей сайта. Эти названия я конечно же не придумываю, все они присутствуют в структуре WordPress и подчиняются правилам иерархии: когда WordPress хочет отобразить страницу, то сначала он ищет файл с название page.php, не найдя его, подчиняясь иерархии, он ищет следующий подходящий файл. В корне иерархии для всех страниц находится шаблон index.php. Третий тип файлов – functions.php ведет себя во многом как плагин, он подгружается всякий раз при открытии страницы сайта или административной панели WordPress. Этот файл так же может быть логически разделен на отдельные составляющие. Например, в стандартных темах есть отдельные файлы для отображения встроенных в тему виджетов, шапки сайта, настроек превью WordPress. Так же стоит иметь ввиду, что стандартные темы, которые включены в дистрибутив WordPress, обладают широкой функциональностью и могут быть использованы как пример и шаблон для изучения WordPress и создания своих тем почти с нуля, это пример хорошего тона программирования для WordPress, которому желательно придерживаться.

Простейший шаблон WordPress: создание темы WordPress с нуля

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

1. Файл style.css

В этом файле нам необходимо заполнить шапку, указав уникальное название темы, описание, имя автора, сайт темы и сайт автора, а так же указать, что тема лицензирована GPL лицензией. Эта информация будет отображаться при установке темы в админке WordPress и использоваться при поиске темы в базе данных WordPress, когда мы ее туда добавим. К названию сайт WordPress.org предъявляет свои требования, кроме того, что оно должно быть уникальным, оно не должно включать слова WordPress, theme и разный SEO спам. Вообщем, название должно быть нормальным и уникальным и может включать слово wp. Кстати, я пишу WordPress именно так не случайно, везде в теме это слово должно звучать правильно, никаких сокращений и маленьких букв, это копирайт и поэтому, из уважения к WordPress, оба слова написаны с большой буквы, если Вы любите WordPress, то я предлагаю Вам всегда делать тоже самое. Минимально необходимый файл css состоит из одного описания, выглядит это примерно так:

/* Theme Name: Simplest Site Theme URI: //ILoveWordPress.ru/ Author: Layka Author URI: //ILoveWordPress.ru/ Description: The 2014 simplest theme for WordPress. Version: 1.0 License: GNU General Public License v2 or later License URI: //www.gnu.org/licenses/gpl-2.0.html Tags: black Text Domain: simplestsite This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you"ve learned with others. */

2. Файл index. php

Продолжим создание темы для WordPress, нам нужно заполнить основной файл шаблона. В этом файле у нас будет находиться вся тема WordPress: шапка, подвал, подгрузка стилей, цикл WordPress, меню, навигация по записям, списки рубрик и меток, форма поиска и многое другое. Давайте по порядку, в начале файла index.php размещен комментарий, объявление доктайпа и инструкции для ie браузеров:

< !DOCTYPE html> > > >

Далее объявление секции head, внутри которой размещена служебная информация, мета теги, стили css (функция get_stylesheet_uri() возвращает url адрес нашего файла style.css) и в конце секции включен обязательный WordPress хук wp_head:

"> <?php wp_title("|", true, "right"); ?> ">

К основному контейнеру контента мы цепляем все классы текущей записи или страницы функцией post_class():

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

Если это запись или страница, то просто выводим заголовок, иначе это некий архив, тогда выведем заголовок в виде ссылки:

" rel="bookmark">

Под заголовком покажем список всех категорий текущей записи и список всех меток:

Если это результаты поиска, то отобразим только краткое описание записи:

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

→", "")); ?> "

" . __("P:", ""), "after" => "

")); ?>

На этом цикл WordPress по выводу страницы заканчивается:

Теперь внизу страницы прямо под контентом покажем навигацию к следующей и предыдущей записям:

max_num_pages > 1) : ?>

Далее идет кусочек кода, который предназначен для того случая, когда не найдены записи для отображения. То есть, на сайте нет ни одной записи или результаты поиска оказались пустыми, я не буду его сюда копировать, но он есть в исходном файле самой простейшей темы WordPress, который можно скачать в конце статьи. Ну и заканчивается файл темы объявлением подвала и традиционной ссылкой на официальный сайт WordPress.org, а перед закрывающим тегом идет обязательное объявление WordPress хука wp_footer, если эти два хука (wp_head и wp_footer) не объявить, то большинство плагинов не сможет работать с сайтом, на котором установлена тема, а если Вы не знаете, что такое хуки WordPress, то прочитайте об этом по ссылке обязательно, потому что создавать темы WordPress с нуля без этого никак не удастся, ведь фильтры и действия являются основным механизмом работы WordPress. А вот и заключительный код шаблона сайта:

Скриншот простого шаблона WordPress, созданного с нуля в этом уроке

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

Скачать простейший шаблон WordPress

Созданная Тема WordPress находится по этой ссылке. Архив состоит из трех файлов, к уже упомянутым ранее style.css и index.php я добавила скриншот сайта screenshot.png, его размер 880 на 660 пикселей – это рекомендуемое значение для скриншота и называться этот файл должен screenshot.png, чтобы WordPress мог распознать его и отображать в админке при выборе темы.

Чего в простейшем шаблоне WordPress нет

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

Произвольный заголовок (в WordPress есть опция для подключения пользователем баннера, чтобы он мог сделать свой сайт уникальным);
Миниатюру записи ;
Сайдбары для виджетов ;
Соответственно, виджеты ;
Произвольные таксономии;
Произвольный фон;
Дополнительные шрифты Google;
Дополнительные настройки живого превью сайта;
Переменная $content_width не задана;
Перевод темы на другие языки;
Иерархические меню ;
Всевозможные форматы для записей ;
Уникальные шаблоны для разных страниц.

Все выше перечисленное как и многое другое можно добавлять в шаблон WordPress, чтобы сделать его красивым, многофункциональным и дружественным к пользователю. Вместе с WordPress можно создавать шаблоны с большим количеством опций и настроек, что дает возможность пользователям этих тем настраивать свои блоги и сайты не используя css/html/php редактирование, делает WordPress простым и доступным для широкой аудитории, поэтому более 60 миллионов человек пользуются WordPress, а сама система CMS разрабатывается несколькими сотнями добровольцев и волонтеров на добровольной основе, любой желающий может помочь развитию WordPress, создав свой шаблон и разместив его на официальном сайте и вы можете стать одним из них. Примечание: данный шаблон Simplest Site не является законченным, style.css необходимо дополнить описанием стилей всех тегов.

Далее…

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

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

1 Знакомство с WordPress
Какие плюсы создания сайтов даёт эта CMS, чем она нравится людям, как выглядят сделанные на ней сайты и как выглядит движок изнутри.
2 Установка WordPress на localhost
Что такое локальный сервер, где его найти, как скачать и установить, а главное - как после всего этого инсталлировать туда саму WordPress. Воспользовавшись статьёй, вы сможете редактировать и открывать сайт прямо у себя на компьютере без подключения к Интернету. И не пугайтесь раньше времени - ничего сложного во всём этом нет.
3 Установка WordPress на хостинг
Переходим к настоящему хостингу, на котором разместится ваш сайт в Сети, чтобы на него смог зайти любой желающий. Из статьи вы узнаете, как зарегистрироваться на хостинге и каким образом установить на него WordPress.
4 Знакомство с админкой и базовые настройки
Приступаем к управлению сайтом и знакомству с административной панелью, через которое оно и осуществляется. Как в неё попасть? С каких параметров начать? Что скрывают все эти пункты? Какие возможности даёт WordPress администратору? Обзорная статья расскажет не только это.
5 Создание записей, страниц, разделов
Три кита любого блога - записи, которые обычно добавляют на сайт часто, страницы - отдельно стоящие элементы, которых не бывает много, и категории, по которым нужно раскладывать посты. Как создать каждый из этих трёх объектов и чем конкретно они друг от друга отличаются - читайте в материале.
6 Создание меню сайта
Без навигации не обходится ни один ресурс. Из данной статьи вы как раз узнаете, как её создать.
7 Создание формы обратной связи
Узнайте, как добавить на страницу контактную форму, чтобы любой посетитель мог связаться с вами.
8 Создание фотогалереи
Не надо быть фотографом, достаточно иметь хороший вкус, чтобы захотеть видеть у себя на сайте красиво оформленный контент. После прочтения статьи вам станет ясно, как легко сделать на сайте функциональный и радующий глаз просмотр картинок.
9 Что такое виджеты
А действительно: что это такое? Как они могут улучшить сайт и зачем нужны? Какие виджеты пользуются особой популярностью и почему? Материал пригодится не только в теории, но и на практике, так как в нём содержится полезная подборка.
10 Дизайн шаблона для WordPress
Урок расскажет, как полностью сменить внешней оформление интернет-ресурса. Речь пойдёт о темах оформления WordPress, о том, как их найти и установить.
11 Плагины WordPress
12 Изменение шаблона WordPress
Установить тему оформления не всегда достаточно - часто хочется внести в неё какие-то мелкие правки. Если такое желание возникло и у вас - этот урок поможет. Из него вы узнаете о структуре WordPress-шаблонов, а также получите возможность попрактиковаться благодаря большому количеству примеров.
13 Пример создания сайта WordPress на основе HTML-вёрстки
Пройдя курс, вы превратитесь из новичка в продвинутого пользователя WordPress, сможете поставить её на любой хостинг и переносить с места на место, настроить, наполнить контентом, плагинами и темами оформления. Пройдя уроки, вы даже научитесь адаптировать шаблоны под WordPress, а саму CMS - под мобильные устройства. Здесь вас ждут актуальные подборки виджетов и плагинов, масса наглядных примеров, пошаговых инструкций и подробных разъяснений.

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

Зачем вообще может понадобиться создание собственного шаблона WordPress, когда можно воспользоваться имеющимися в базе заготовками? Вот какие причины могут подтолкнуть к этому:

Можно получить уникальный сайт или лэндинг, отличный от конкурентов. Учитывая миллионы блогов, построенных на этой CMS, каждый типовой дизайн используется как минимум сотню раз.
Полная свобода действий на этапе разработки. Можно добавлять собственный функционал с нужными именно вам рабочими элементами.
Можно применять разные дизайны для разных разделов сайта, что невозможно при использовании готового шаблона.
Можно сделать несколько видов и предоставить посетителям возможность переключаться между разными темами, что повысит интерес и лояльность к веб-ресурсу.
Простота работы на Вордпресс делает ее доступной для многих (в помощь будут видео-уроки в интернете). А значит, собственноручная разработка главной или создание дочерней темы позволит сэкономить деньги на привлечении сторонних дизайнеров и программистов.
Можно воспользоваться возможностью дочерних тем – когда корректировки вносятся в дублеры таблицы стилей style.css, а главный файл при этом остается нетронутым. Это позволяет быстро отменить изменения, если они окажутся неудачными, а также не терять наработки при обновлении основной темы.

Краткая инструкция

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

Шаг первый: подготовительные работы

Перед началом работ надо убедиться, что у вас есть текстовый редактор (самым простым является Блокнот или 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. находим соответствующий участок кода и вставляем его в новый файл. Это будет:

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

Ниже приведен список стандартных файлов шаблонов, используемых WordPress. Их можно не использовать или добавлять свои разделы:

Header – стиль шапки вашего сайта.
Comments – шаблон для создания комментариев.
Home – тема для главной страницы.
Page — определяет тему, если создадите отдельные странички на сайте
Category – шаблон для разбивки на категории
Date – определяет стиль вывода даты-времени.
Archive – шаблон для архивного раздела со старыми материалами.
Search – файл, в котором указываются параметры для поиска на сайте.
404 — шаблон для страницы, на которой сообщается об ошибке 404 Not Found.
Footer – определяет стиль подвала вашего сайта.

Когда впоследствии вы будете дорабатывать каждый элемент, понадобится наглядный видеоурок. Вот несколько подборок, которые могут вам помочь:

Шапка в 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; }

Теперь можно в админке зайти во «Внешний вид›Темы» и активировать дочерний шаблон. В дальнейшем можно работать в новом файле. В дополнение небольшая видео-презентация на тему дочерних шаблонов: