Wordpress обучение с нуля. Как создать тему для WordPress самому: уроки с видео. Аккаунт создан и подготовлен к работе

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Хостинг Beget и WordPress

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

Переходим на сайт Beget.ru . Откроется главная страница (снимок кликабелен):

Здесь и необходимо определится с выбором: На каком хостинге создавать блог: Платном или Бесплатном? Мой совет выбирайте между тарифами Blog и Start — это два самых дешевых и оптимальных тарифа, которые как раз подойдут для новичков. Итак, жмем на тариф Start .

1. Выбор тарифного плана

Загрузится вот такое окно, где нас снова проинформируют о тарифных планах, и что в них входит (снимок кликабелен):

2. Страница ввода персональных данных

Здесь указываем свои данные. ФИО, Email и номер телефона обязательны для указания.

Ставим галочку на согласие с публичной офертой и жмем на кнопку Зарегистрировать аккаунт.

Подтверждение телефонного номера

Жмем на кнопку Получить код.

Вводим его в появившиеся окошко и жмем на кнопку Завершить регистрацию.

3. Создание аккаунта

Здесь ждем пока по всем пунктикам поставятся галочки (это займет пару секунд).

4. Аккаунт создан и подготовлен к работе

Обратите внимание на поля ИМЯ ПОЛЬЗОВАТЕЛЯ и ПАРОЛЬ, их необходимо сохранить. Для более быстрого старта советую почитать инструкцию по работе с Панелью Управления хостинга Beget.

Здесь обратите внимание на дату блокировки — 30 дней. Это пробный период, который всем предоставляет хостинг Beget. По его истечению или сразу необходимо будет пополнить баланс. С Панелью Управления вам еще предстоит познакомиться, руководство вам в помощь. Я же вам лишь покажу, как создать блог на WordPress за 10 минут. Нажмите на вкладку Домены, загрузится вот такое окно:

Обратите внимание, что хостинг Beget также предоставляет бесплатный домен третьего уровня. С ним можно поработать, но я рекомендую сразу приступить к созданию полноценного блога, поэтому нам будет нужен домен второго уровня . Для его регистрации жмем на ссылку Зарегистрировать новый домен (регистрация домена платная — от 120 в год):

В первое поле вводите доменное имя для вашего блога, как его подобрать я писал в этой статье: . Там есть некоторые правила, которых необходимо будет придерживаться. Во втором поле выбираем доменную зону, рекомендую оставить RU . Стоимость регистрации домена второго уровня в данной зоне равняется 120 рублем за год. Жмем на кнопку Продолжить.

Если вы не пополняли счет, то появится вот такое окно:

жмем на кнопку Пополнить счет и пополняем его любым удобным вам способом:

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

Теперь я вам покажу, как создать блог. В Панели Управления (снимок выше) нажмите на вкладку CMS , загрузится вот такое окно:

Если вы все правильно сделали, то на этой странице отобразится ваш новый домен. Жмите на кнопку Установить CMS напротив вашего домена. Я же буду работать с бесплатным доменом.

Загрузится страница с движками доступными для автоматической установки. Что подразумевается под автоматической? А то, что все будет сделано за нас: установка и настройка CMS WordPress, подключение WP к базе данных MySQL и ряд других «непонятных» процессов). Кликаем по логотипу Вордпресса.

Появится вот такое окно:

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

Появится вот такое окно, которое говорит о том, что вы успешно создали свой первый блог. Эта так называемая Инсталляционная информация, здесь указаны данные, которые вам понадобятся при работе с вашим блогом.

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

В WordPress можно создавать страницы (page) и записи (post). Отличаются они тем, что записи: попадают в ленту на главной странице; для записей указываются категории; записи не могут быть древовидными, а страницы: используются для такого содержимого как "Обо мне", "Контакты", "Карта сайта"; не имеют категорий, а имеют древовидную структуру. Записи обычно предназначены для хронологической информации (по времени добавления), а страницы для древовидной структуры не зависимой от времени. Для примера, эта статья опубликована как "запись" в рубрике "Кодекс", а ссылки в меню шапки ведут на страницы: Функции .

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

Создание страниц в WordPress

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

Способ 1: шаблон страницы через файл с произвольным названием и подключением его в админ-панели (классический способ)

Это самый распространенный способ создать шаблон страницы в WordPress. Для этого нужно создать.php файл, например, tpl_my-page.php в папке темы и в самом начале файла вписать пометку, что созданный файл является шаблоном для страниц:

Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать "шаблон":

С версии WordPress 4.7. такие шаблоны страниц можно создать для любого типа записи, а не только для page. Для этого дополните комментарии строкой: Template Post Type: post, page , где post, page - это названия типов записей к которым относится шаблон.

/* Template Name: Мой шаблон страницы Template Post Type: post, page, product */

Преимущества:

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

  • Можно получить только записи с указанным шаблоном. Например, можно вывести все страницы с шаблоном «Услуги» (файл servises.php). Иногда это удобно. Название файла шаблона хранится в метаполе _wp_page_template , поэтому чтобы вывести страницы с указанным шаблоном нужно создать запрос по метаполю (см. WP_Query).

Недостатки:

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

Как это работает:

Когда вы заходите в админ-панель на страницу редактирования записи древовидного типа, WordPress просматривает все файлы шаблона на наличие в них строки:

Template Name: ***

Строка может располагаться где угодно и как угодно в файле.

Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок "Атрибуты страницы".

При публикации страницы, в произвольное поле _wp_page_template записывается название файла шаблона или default , если шаблон не указан:

Wp_page_template = default
_wp_page_template = tpl_my-page.php

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

Способ 2: шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)

При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить:


Для создание шаблона этим способом, вам нужно узнать слаг страницы и создать файл в папке темы. Допустим, наш слаг как на картинке равен contacts , тогда создадим в теме файл page-contacts.php . и заполним его нужным кодом (можно скопировать содержимое из файла шаблона page.php и отредактировать под себя). Все, теперь при посещении страницы мы должны увидеть новый шаблон. Аналогично можно взять ID (пусть 12) страницы и создать файл page-12.php .

Достоинства:

Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке.

Недостатки:

Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID).

Практически бесполезен при написании шаблонов, а тем-более плагинов. Его можно использовать, когда правишь свой сайт, в котором слаг или ID страницы известны заранее.

Как это работает:

WordPeress подбирает какой файл использовать в следующем порядке (файлы должны быть в корне темы):

  • {любое_название}.php (когда используется шаблон страницы)
  • page-{ярлык_записи}.php
  • page-{ID_записи}.php
  • page.php
  • singular.php
  • index.php

Способ 3: шаблон страницы через фильтр "template_include" (коддинг)

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

// фильтр передает переменную $template - путь до файла шаблона. // Изменяя этот путь мы изменяем файл шаблона. add_filter("template_include", "my_template"); function my_template($template) { # аналог второго способа // если это страница со слагом portfolio, используем файл шаблона page-portfolio.php // используем условный тег is_page() if(is_page("portfolio")){ if ($new_template = locate_template(array("page-portfolio.php"))) return $new_template ; } # шаблон для группы рубрик // этот пример будет использовать файл из папки темы tpl_special-cats.php, // как шаблон для рубрик с ID 9, названием "Без рубрики" и слагом "php" if(is_category(array(9, "Без рубрики", "php"))){ return get_stylesheet_directory() . "/tpl_special-cats.php"; } # шаблон для записи по ID // файл шаблона расположен в папке плагина /my-plugin/site-template.php global $post; if($post->ID == 12){ return wp_normalize_path(WP_PLUGIN_DIR) . "/my-plugin/site-template.php"; } # шаблон для страниц произвольного типа "book" // предполагается, что файл шаблона book-tpl.php лежит в папке темы global $post; if($post->post_type == "book"){ return get_stylesheet_directory() . "/book-tpl.php"; } return $template; }

Такой код нужно разместить в файл темы functions.php или в плагин, или подключить как-то еще. Как видно из примера во время фильтра template_include уже работают условные теги, установлены глобальные переменные: $wp_query , $post и т.д.

Достоинства:

    Можно установить шаблон для любой страницы или группы страниц. Практически полный карт-бланш в действиях.

  • Можно создать шаблон при написании плагина.

Недостатки:

Необходимость писать код и отдельно его подключать (например, в functions.php темы).

Здравствуйте, друзья! Сегодня я расскажу о принципах и технических моментах создания темы для WordPress с нуля. Эта статья написана для тех, кто имеет какой-то опыт работы с движком WordPress и, хотя бы на базовом уровне, разбирается в HTML и CSS.

Темы разрабатываются под разные задачи: интернет-магазин, фото или видео сайт и т.д., мы же рассмотрим обычную тему блога и алгоритм действий по ее созданию.

Если вы решили создать собственную уникальную тему оформления, то перед созданием темы нужно продумать дизайн и сверстать HTML шаблон сайта или заказать у фрилансеров, решать вам. В общем, у вас должен получиться сверстанный шаблон, например, вот с таким содержимым: файлы index.html и style.css , папка картинок images и папка js со скриптами. Из этого шаблона мы и будем делать тему оформления.

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

Для создания темы оформления необходимо знать функции или как их еще называют — теги WordPress. Мы разберем основные функции темы, со всеми тегами вы можете ознакомиться на официальном сайте codex.wordpress.org .

Структура темы WordPress

В папке themes создаем папку и называем ее, например, mytheme . Затем в нее переносим наш style.css и создаем необходимые файлы.

Создаем шаблоны блоков, которые отображаются на всех страницах:

  • header.php - шапка вашего сайта;
  • sidebar.php - боковая колонка с различными виджитами;
  • footer.php - подвал сайта.

Шаблоны контента:

  • Index.php - шаблон главной страницы, выводятся короткие анонсы статей;
  • single.php - шаблон постов (статей);
  • page.php - шаблон статических страниц;
  • category.php - шаблон категорий;
  • search.php - шаблон выдачи результатов поиска;
  • 404.php - шаблон сообщения о несуществующей странице;
  • comments.php - шаблон коментариев.

Дополнительные файлы:

  • functions.php - файл дополнительного функционала и изменения стандартного функционала движка WordPress;
  • searchform.php - код формы поиска;
  • screenshot.png - Изображение 880 х 660, превью отображается в админке во вкладке «темы».

Не обязательные шаблоны (по моему мнению):

  • author.php - шаблон страницы автора;
  • archive.php - шаблон архивов;
  • date.php - шаблон вывода дат;
  • tag.php - шаблон меток;
  • attachment.php - шаблон страниц вложения.

Лично я редко использую пять последних шаблонов, в основном делаю перенаправление на «главную» или на «404 ошибку» при запросе данных шаблонов. Информацию об авторе можно оформить на основе page.php , а остальные четыре только плодят дублированный контент на вашем сайте, организацию архивов можно реализовать намного продуктивнее.

Начинаем с файла style.css , делаем отступ и в самом верху вставляем закомментированный текст с названием и описанием темы.

/* Theme Name: Название темы Theme URI: УРЛ адрес, если есть отдельный сайт о теме Description: Описание темы оформления Version: Версия, например (1.0) Author: Ваше имя Author URI: УРЛ адрес автора темы */

Файл стилей придется редактировать при подключении функционала WordPress, который добавляет дополнительные участки кода.

Формируем header.php

Из HTML файла переносим сюда все, что находится в и элементы в , которые относятся к шапке сайта. У меня в шапке большое изображение с информацией о сайте и меню.

Код был таким.

Мой блог

После переноса и редактирования стал таким.

" /> <?php echo wp_get_document_title(); ?> " rel="stylesheet" type="text/css" />