WordPress — Создание темы на WordPress


Содержание

Как создать собственную тему WordPress

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

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

Если вы понимаете HTML и CSS, что несложно будет перейти к созданию собственной темы для WordPress. В этом посте я расскажу, как создать полностью готовую Worpress-тему от скетча до полной боевой готовности. Мы увидим, как статичный дизайн превращается в полноценный сайт, который мы наполним функциональностью.

Работать мы сегодня будем с дизайном для марки Sticky. Главная фишка сайта — легкий сайдбар, который будет всегда находиться на своём месте, независимо от прокрутки. Также разные украшательства сделаны с помощью CSS3.

Не будем вдаваться в детали создания дизайна, скажу лишь, что здесь использовалось 12 колонок по 24px; мягкие цвета для основного цвета и коричневый и тёмно-красный — для акцентов; в тексте используем шрифт serif; в целом дизайн производит впечатления осязаемого и реалистичного.

Анатомия темы WordPress

Перед тем, как начинать создавать тему, важно знать, как же она устроена. Если посмотреть структуру большинства тем, то можно увидеть, что она состоит из примерно 12 корневых файлов.
Что это за файлы?

  • header.php — содержит всё то, что находиться в верхушке сайта.
  • index.php — самое ядро темы, к нему крепяться все остальные части.
  • sidebar.php — содержит боковую панель (меню)
  • footer.php — всё то, что находится в подвале темы.
  • archive.php — шаблонный файл, который отображает когда были сделаны записи, авторы и тп.
  • single.php — шаблонный файл, который отвечает за загрузку одного поста (когда вы переходите на него по ссылке).
  • comments.php — прикрепляется к концу single.php, чтобы дать людям возможность оставлять комментарии
  • page.php — подобная single.php, но используется для WordPress страниц.
  • search.php — шаблонный файл, используется для отображения результатов поиска..
  • 404.php — шаблонный файл, сообщает об ошибке 404
  • style.css — все CSS-стили вашей темы
  • functions.php — файл используется для изменения функционала WordPress без изменения ядра движка.

Базовый код

Так как наша тема использует в основном HTML и CSS, и немного PHP, очень важно создавать шаблон, как если бы это был старый добрый статичный сайт. Наметаем наш дизайн в виде первоначального шаблона:

Создание WP — темы

Теперь, когда у нас есть очертания будущей страницы, мы начнём превращать наш код в wordpress-тему. Начнём с создания папки для нашей темы и создания php — файлов (header.php, и тд.). Как вариант, можете из из темы Default, которая прилагается с движком, удалить содержимое и заменить на своё и залить свои скрипты и картинки..

Создание файла стилей

Каждая тема Worpress снабжена таким файлом, это обычный CSS. Так что в самом верху пропишем кое-что о себе:

Важно , чтобы все пути были прописаны правильно.

Загружаем Header

Открываем наш header.php и вставляем в него соответствующую часть кода из HTML. Теперь мы должные поменять код на корректный для WordPress. wp_title(); отображает title страницы, которое следует из bloginfo(‘name’), которая в свою очередь заменяется в админ-панели.

bloginfo(‘stylesheet_url’); подключает страницу стилей. Им заменяют обычный путь к стилю.
Другие файлы, такие как Javascript, подключает тег bloginfo(‘template_url’); он указывает путь до папки с темой.

Если вы хотите наполнить свою тему комментариями, что добавьте соответствующий javascript из ядра WordPress. Перед тем, как закроется тег /head>, вставляем wp_head();, это то место, куда будут добавляться дополнительные плагины.

Строим Index

Здесь начинается самое сочное) Сначала мы вставляем теги get_header(); и get_sidebar(), которые отвечают header.php и sidebar.php.
WordPress «закручивается» и начинает проверять контент, которые ему доступен. Внутри этого цикла мы видим различные теги, которые содержат информацию о посте, такие как the_title();, и the_permalink();. Они заключаются в теги HTML соответственно их цели. Так, тег the_permalink отвечает за путь к ядру темы и указывается 2 раза — в пути к картинке и в ссылке на сам пост в теге title.

the_post_thumbnail(); — дополнительная опция, этот код может добавить к посту иконку в WordPress 2.9. Ниже расположен контент, который вставляется через тег the_content(»);

В мета — секции можно увидеть такую специфическую информацию, как время написания, количество комментариев и тп.. Это всё подключается шаблонными тегами, такими как the_time(‘F jS, Y’);. Параметры их можно менять, например, отображение даты можно изменять в соответствующем разделе админки WordPress. (полезно будет почитать WordPress Codex).

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

После завершения цикла мы добавляем get_footer(); который подстоединяет footer.php

Заполняем Sidebar

В боковой панели отображаются такие вещи, как список категорий и список страниц.Sidebar подключается функцией get_sidebar();

Только три вещи в нашем s > Эта функция используется со многими параметрами, такими как show_count=0 ( предотвращает показ количества постов в каждой категории), h >

Это самая простая часть, вставаляем wp_footer(); перед /body>. В него помещается такая информация, как последние записи, последние комментарии и что-нибудь в этом духе. Всё это можно сделать, используя шаблонные теги WordPress.

Создаём страницу архива

Архив содержит в себе список постов, рассортированных по автору, дате, категории и тп. Эта страница очень похожа на index.php, но в самом её верху публикуется тега с заголовком, чтобы юзер знал, в на какой странице он вообще находится. Например, «Архив». По желанию можно почистить цикл от текстов постов, количества комментариев и тд,, в этом случае будет выводиться просто список заголовков постов.

Конструируем страницу просмотра одного поста

Для создания страницы поста используется шаблонный файл single.php, которая очень похожа на page.php. Тут всё просто. Комментаррии подсоединяем comments_template();

Конфигурация комментариев

Чем придумывать код — надо взять комментарии с Default theme, и внести свои изменения.

Если создать шаблон для комментариев, то он пригодится очень надолго. Сложно писать CSS для комментариев, вернее, сложно разобраться в исходнике. На помощ придёт Firebug — Плагин для Мозиллы, который помогает разбираться с кодом. Хотя некоторые параметры можно поменять и в самом коде WordPress, например, размер аватара. (параметр avatar_size).

Завершаем страницей 404 и страницей поиска

Страница поиска — копия archive.php, но вручную нужно добавить:
Результаты поиска,

а в странице 404 может разгуляться ваша фантазия. Только не забудьте добавить get_header();, и get_footer(); где нужно

Вот и всё

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

Я надеюсь, вам помогла эта статья! Если что-то непонятно, не бойтесь спрашивать.

Создаем тему WordPress на базе статического HTML: Создаем файлы шаблонов

Скачать исходный файл

Данная статья является 2 из 3 частей цикла «Создаем тему WordPress на базе статического HTML» :

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

В этой статье вы узнаете, как разделить ваш файл index.html на набор файлов шаблонов для использования в WordPress.

Что вам потребуется:

Для выполнения этого урока вам потребуются основные инструменты для редактирования HTML и PHP:

Редактор по вашему выбору.

Что такое файлы шаблонов?

Тема WordPress состоит из ряда файлов шаблонов. Как минимум для корректной работы тема должна содержать в себе два файла: index.php и style.css .

Однако в хорошо проработанной теме содержимое файла index.php должно быть разделено на основной файл шаблона (index.php) и набор включаемых файлов. Это файлы, содержащие код для заголовка, боковой панели и подвала страницы.

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

Данные файлы называются « включаемые », потому что вы вставляете в файл index.php код, который сообщает WordPress, что их содержимое нужно включить в страницу.

Наш файл index.html будет разделен на четыре PHP-файла:

  • index.php , который будет включать в себя основное содержание плюс код для размещения других файлов;
  • header.php , который будет включать в себя раздел плюс все, что находится в шапке и меню навигации;
  • sidebar.php , который будет содержать область боковой панели виджетов;
  • footer.php , который будет содержать (вы уже догадались!) подвал плюс закрытие тега ;

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

Если вы хотите получить больше базовой информации по данной теме, прочитайте раздел Кодекса WordPress Template Hierarchy .

Но сейчас все, что нам нужно сделать, это создать набор PHP-файлов и распределить между ними содержимое нашего файла index.php.

Создаем файлы PHP

Для начала мы создадим пустые файлы. Создайте четыре пустых файла со следующими названиями и откройте их в редакторе кода:

Убедитесь, что все они находятся в папке с названием вашей темы — в моем случае я назову папку ‘wptutsplus-demo-theme‘ . Скопируйте также в эту папку таблицы стилей. Мы не будем редактировать их в этом уроке, но займемся этим в следующей же части серии.

Заполнение файла Header

Далее вам нужно скопировать верхнюю часть ранее созданного файла index.html в файл header.php .

Откройте файл index.html и выберите все от объявления DOCTYPE до открытия тега div :

Скопируйте данный код и вставьте его в файл header.php.

Заполнение файла боковой панели

Теперь повторите все те же действия для файла боковой панели.

Если ваш файл index.html, имеет выделенный элемент as >, и все, что касается сайдбара, содержится в нем.

Скопируйте данный код в файл sidebar.php и сохраните изменения.

Заполнение файла футера

Процесс заполнения файла footer.php идентичен.

Скопируйте весь код, который располагается после сайдбара в вашем файле index.html:

Скопируйте данный код в файл footer.php .

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

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

Заполнение файла Index

И последним этапом будет непосредственно создание файла index.php. Сделать это будет немного сложнее, вам придется добавить некоторые функции PHP, которые WordPress использует для включения заголовка, боковой панели и подвала.

Откройте пустой файл index.php и добавьте код, приведенный ниже:

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

Теперь откройте файл index.html еще раз и выберите весь код между открывающимся блоком элемента > и боковой панелью:

Скопируйте этот код и вставьте его в свой файл index.php ниже строки get_header ( ) .

Сохраните изменения в файле index.php.

Подводим итоги

Теперь у нас есть основа для темы WordPress. Вы превратили ваш HTML-файл в набор файлов PHP и настроили их на совместную работу.

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

Данная публикация представляет собой перевод статьи « Creating a WordPress Theme From Static HTML: Creating Template Files » , подготовленной дружной командой проекта Интернет-технологии.ру

Как создать тему WordPress. Урок 1. Создание и наполнение Index.php и style.css

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

В предыдущем уроке, где мы рассматривали некоторые понятия, на которые стоит обратить внимание перед началом разработки шаблона WordPress, мы создали целый ряд файлов. Основным и главным файлом любой темы считается index.php, в помощь которому приходит style.css, отвечающий за настройку внешнего вида сайта.

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

Наполняем index.php темы WordPress

Хочу заметить что наполнять все файлы мы будем постепенно и если вы не увидите каких-то атрибутов или элементов, значит они будут добавлены в дальнейшем с подробным объяснением.

Итак, отрываем индексный файл и вписываем в него следующий код:

Как мы можем видеть мы поделили страницу на 4 основных части — header, main, sidebar и footer. Уже сейчас нашу тему можно активировать и посмотреть на белый экран с единственной надписью «Site Title».
Пока остановимся на этом и пойдем к style.css, шапку которого нужно оформить по некоторым правилам.

Файл style.css в WordPress, добавление базовой информации о теме

По правилам файл style.css в WordPress должен иметь следующий комментарий в начале:

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

Правила в файл стилей будем добавлять по мере рассмотрения каждого участка кода, по этому оставляем style.css и вернемся к нашему index.php.

Разбиваем index.php на несколько файлов

В WordPress существует большое количество встроенных функций, которые ускоряют создание шаблона. В данном случае мы поговорим о get_header(), get_sidebar(), get_footer().

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

Открываем файл header.php. Вырезаем с index.php следующий участок кода и вставляем его в header.php:

Аналогичную операцию проводим с sidebar.php участок кода следующий:

Последний момент с footer.php:

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

Теперь немного добавим функций в индексный файл и выведем названия постов с ссылками на их страницы.

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

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

Собственно обсуждать нам нужно только одну строчку, остальное сделайте так как написано:

Функция the_permalink() выводит URL поста, который в данный момент обрабатывается внутри цикла.

Следующая функция the_title() выведет заголовок поста, с этим думаю понятно.

Давайте подведем итог данного урока по созданию темы WordPress. Что же мы сделали сегодня:

  • Создали структуру страницы;
  • разбили индексный файл на несколько частей и поместили каждый из них в свой собственный файл;
  • подключили файлы шаблона к индексному;
  • запустили цикл WordPress;
  • вывели заголовки постов с ссылками на материал.

Создание различных тем WordPress вручную и с помощью программ

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

Почти каждая тема на wordpress устанавливается в директорию wp-content/themes и состоит из 3 категорий файлов:

  1. файлы таблицы стилей;
  2. файлы дополнительного функционала;
  3. файлы шаблона.

Файлами таблицы стилей являются style.css. Они отвечают за цвет, размеры, шрифт и другие параметры элементов сайта. У каждого сайта есть только 1 файл style.css. Если открыть данный файл, то в самом верху можно увидеть информацию о названии, авторе и кратком описании темы. При создании собственной темы можете вписать в style.css информацию о себе.

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

Теперь перейдем к файлам шаблона. Их основной функцией является генерация страниц, которые запрашиваются посетителями сайта. Файлы шаблона имеют расширение “.php”. Наиболее простые темы могут содержать только один файл шаблона под названием index.php. В таком случае все страницы сайта будут идентичны. Такой дизайн чаще всего используется для создания интернет-ресурсов с базами данных, когда дизайн не играет ключевую роль.

Если вы никогда не занимались созданием дизайна, то для начала вам стоит попробовать создать простую тему. Для ее нормальной работы понадобится хотя бы 2 следующих файла: style.css и index.php.

Файлы дополнительного функционала в данном случае можно не использовать, как вы поняли. Среди файлов шаблона index.php является одним из наиболее гибких. Он может самостоятельно генерировать заголовки, различные блоки, нижнюю часть (футер), контент и другие элементы сайта.

Стоит отметить, что те параметры, которые не генерируются файлом index.php, будут генерироваться стандартными файлами. Например, если ваша тема состоит только из 2 вышеперечисленных файлов, но у пользователя возникает потребность в генерации формы добавления комментариев, то в таком случае эту функцию будет выполнять стандартный comments.php. Поэтому, если хотите, чтобы ваша тема была более уникальной, то стоит сделать дополнительные файлы шаблона. Рассмотрим основные.

  1. Для добавления комментариев, как вы уже догадались, используется шаблон comments.php.
  2. Если же вы хотите сделать всплывающее окно с комментариями, то для таких целей вам понадобится comments-popup.php.
  3. Чтобы генерировать главную страницу, используется home.php.
  4. Файл single.php отвечает за отображение статей сайта. Если у вас отсутствует такой файл, то его функцию будет выполнять index.php.
  5. Файл page.php же осуществляет генерацию отдельных страниц сайта.
  6. Для вывода информации об авторе вам понадобится author.php.
  7. За категории отвечает category.php.
  8. Отображение архивов, даты и поиска осуществляется файлами archive.php, date.php и search.php соответственно.
  9. Чтобы ваш сайт выводил уникальную страницы ошибки номер 404, вам понадобится добавить свой 404.php.
  10. Верхняя и нижняя часть сайта генерируется файлами header.php и footer.php соответственно.

Создание уникальной темы вручную с нуля

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

После того как определитесь с выбором, можно начать скачивание архива. По окончанию процесса вам нужно будет его распаковать и загрузить файлы в определенные папки сайта (в архиве обычно содержится небольшая инструкция). Загрузку можно осуществить с помощью программы FileZilla или же прямо с хостинга, если он поддерживает такую опцию. Теперь вам останется лишь перейти в раздел “Темы”, выбрать ту, которую загрузили, и кликнуть по кнопке “Активировать”.

Также ее можно выбрать прямо в панели администратора wordpress. При этом вам не потребуется ее скачивать. Вам нужно будет лишь кликнуть по клавише “Установить”, а затем “Активировать”. Перед установкой предлагается осуществить предварительный просмотр.

Теперь, когда тема активирована, можно перейти к ее уникализации. Первым делом стоит задуматься о верхней части сайта (шапке). Это первое, что бросится в глаза вашим посетителям, поэтому стоит отнестись ответственно. Обычно шапка состоит из названия сайта, логотипа и краткой информации о контенте. Шапку можно создать в любом графическом редакторе. Даже в стандартном Paint. Более продвинутые дизайнеры используют Adobe Photoshop.

Название сайта должно быть небольшим и легким для запоминания. В Adobe Photoshop можно подобрать множество различных стилей для него. При создании логотипа вам могут потребоваться различные фигуры. Их можно скачать на официальном сайте Adobe Photoshop.

После того как сделаете рисунок шапки в графическом редакторе, вам нужно будет загрузить его к себе на сайт. По окончанию загрузки справа от рисунка появится URL-адрес, которую нужно будет скопировать. Затем вам понадобится перейти в раздел “Редактор” и выбрать файл, который отвечает за генерирование шапки (header.php). В нем нужно будет найти URL-адрес текущего рисунка и заменить его на тот, который вы получили при загрузке рисунка шапки. После этого вам нужно будет обновить файл. Теперь можно перейти к проверке отображения шапки.

Если ваша шапка имеет не такие параметры, как стандартная, то их можно подогнать в header.php. Ширина регулируется атрибутом width, а высота — height. Настройка может производится в пикселях и процентах. Так что, если хотите просто растянуть шапку, то выставляйте 100%.

При желании в шапку можно добавить активные ссылки на страницы сайта wordpress. Это можно сделать с помощью различных сервисов. Их в интернете достаточно много. Большинство из них работает по одному и тому же принципу. Вы обводите желаемую область шапки, которая будет отводится под ссылку, а сервис выдаст вам нужный код. Затем этот код вам нужно будет добавить в файл header.php. Будьте внимательны при его добавлении. Каждая точка имеет значение. Если добавите код не в то место, в шапке не появятся активные ссылки.

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

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

Чтобы создать качественную навигацию с нуля, вам понадобятся небольшие знания о таких тегах, как

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


Как вы уже поняли, условным названием блока с навигацией является navigacia. Блок состоит из одной ячейки “название страницы”. Обратите внимание на то, что каждый тег закрывается с помощью символа “/”. Если теги не закрывать, то могут возникнуть сбои в работе сайта.

Виджеты же сайта wordpress не должны быть большими. Наиболее популярными являются календарь, облако меток, мета, архивы, поиск, rss, видео и последние новости. Чтобы их добавить, вам понадобится перейти во вкладку “Внешний вид” и кликнуть по полю “Виджеты”. Затем вы увидите перечень доступных вариантов. Также виджеты можно устанавливать с помощью плагинов. Их можно скачивать как с официального сайта, так и прямо через панель администратора вордпресс. Для добавления видео, которое есть в YouTube, вам достаточно будет лишь вставить ссылку на него в желаемое место на сайте. В ином случае видео нужно будет загружать на сайт. Если вы увлекаетесь программированием, то можете добавить на сайт свой собственный виджет. Для этого вам потребуется кликнуть по опции “Текст” и ввести туда необходимый код.

В настройках каждого виджета вам будет предоставлена возможность изменить стандартные заголовки. Также вы можете выбрать место отображение виджета (правая или левая боковая панель) и так далее. С удалением виджета проблем не должно возникнуть. Для этого вам достаточно будет кликнуть в настройках по кнопке “Удалить”.

В футере чаще всего отображается ссылка на автора темы и текущий год. Также в футер можно добавить счетчик посещений. Его можно получить абсолютно бесплатно в Liveinternet и других подобных сервисах.

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

1. Наиболее популярной является программа Artisteer. Для работы с ней вам не понадобятся особые знания в области программирования. Процесс создания происходит в визуальном режиме. То, что вы нарисуете, будет представлено с помощью кода, который соответствует международному стандарту “XHTML 1.0 Transitional”. Благодаря этому тема вашего будущего сайта будет поддерживаться всеми браузерами.

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

Перейдем непосредственно к инструкции по работе с данной программой Artisteer. Как только вы откроете программу, первой появится опция под названием “Идеи”. Она предложит вам различные комбинации стандартных элементов. Если вы хотите, чтобы ваш дизайн был уникальным, то
вам эта опция не понадобится. Для того чтобы освоить программу, вам достаточно покликать по опциях и просмотреть параметры. Эта программа легкая, поэтому проблем с этим не должно возникнуть.

Обратите внимание на опцию “Верхний колонтитул”. Она отвечает за отображение шапки сайта. У вас есть возможность использовать стандартную шапку или же загрузить свою. Как сделать уникальную шапку, вы уже знаете.

Для настройки ширины сайта, вам нужно будет использовать опцию “Лист”. Ширина задается в пикселях. Данная программа изначально предложит вам ширину в 900 пикселей. Также с помощью данной опции можно настроить различные эффекты (тень, закругленные края и так далее).

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

Если вы хотите настроить расположение элементов сайта, то вам стоит использовать опцию “Макет”.

Не менее важной опцией является “Статьи”. В ней происходит верстка дизайна статей сайт. Сюда входит расположение картинки, текста, комментариев, различных блоков и так далее.

Чтобы выбрать цвет, размер или шрифт текста, вам понадобится опция “Цвета и шрифты”.

После проделанных действий вы можете сохранить ваше творение. Для этого нужно кликнуть по палитре, которая находится в верхнем левом углу. Перед вами появится окно. В нем нужно кликнуть “Сохранить как”. После этого вам останется лишь выбрать имя файла и место его расположения. Обратите внимание, что файл должен иметь расширение “.artx”. При дальнейшей работе с программой для сохранения вам понадобится лишь 1 раз кликнуть “Сохранить”.

Когда ваша тема будет полностью доработана, можно перейти к ее экспорту. Чтобы это сделать, вам потребуется кликнуть по вкладке “Экспорт” и выбрать “Тема WordPress”.

2. Если вы в совершенстве владеете Adobe Photoshop, то вам стоит установить к нему дополнение Divine Elemente. Благодаря нему вы сможете с легкостью конвертировать файл формата “.psd” в тот формат, который будет поддерживаться всеми браузерами.

3. Если у вас нет денег на Artisteer, то можно использовать бесплатный сервис Lubith. Он доступен в онлайн режиме на официальном сайте lubith.com. Сервис содержит много полезных опций и отличается особой быстротой работы. Всего за пару минут вы полностью овладеет всеми его опциями.

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

5. XTemplate Generator является русифицированным генератором тем для сайта. Его опции находятся в левом окне, а в правом вы можете увидеть визуальный результат ваших работ. Этот генератор также является бесплатным.

6. WPTheme Generator намного мощнее, чем предыдущие, потому как содержит в несколько раз больше опций. Единственным нюансом будет то, что данный сервис платный. Цена составляет 30 долларов. Стоит также отметить, что верстка в нем осуществляется полностью на английском языке.

7. CSSEZ является не менее популярным, чем предыдущий. Перед началом работы, вам потребуется пройти небольшую регистрацию. В данном сервисе вы можете сверстать до 4 столбцов для материалов сайта. Фон можно загрузить собственный.

8. Dotemplate предоставить вам около 11 различных шаблонов wordpress, которые можно будет изменить. Единственным недостатком является отсутствие возможности загружать свой графический файл. Поэтому шапку придется загружать самостоятельно через файловый менеджер сайта.

9. Weebly отличается от остальных наличием опции добавления видео прямо с YouTube или Google в любое место сайта. Сайт, на котором есть видео, пользуется успехом, потому как визуально информация быстрей и проще воспринимается.

10. В сервисе Eris’ Template Generator вы сможете добавить до 3 столбцов для отображения материалов сайта, добавить различные теги, календарь и другие виджеты.

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

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

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

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

Введение в разработку WordPress Theme

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

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

Я проведу вас через процесс создания вашей первой темы. Для начала вам понадобятся две вещи:

* Сразу хочу обрадовать вас, что при покупке хостинга от TimeWeb и оплаты на год – домен вам дается в подарок, можете сэкономить немного). Покупая хостинг через мою партнерскую ссылку я помогу вам настроить хостинг и установить WordPress.

Вам также будет полезно иметь опыт работы с локальными промежуточными средами, поскольку вы будете использовать их для создания своей темы. Наличие некоторого понимания CSS и PHP также поможет (это будет очень огромным плюсом).

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

Что такое стартовая тема (и почему вы должны ее использовать)

Начальная (стартовая) тема – это пустая тема WordPress, которую вы можете использовать для создания своей собственной темы. Использование стартовой темы позволяет вам построить прочную основу, не беспокоясь о сложностях, связанных с написанием темы с нуля. Это также поможет вам понять, как работает WordPress, показывая вам базовую структуру темы и то, как все ее части работают вместе.

Существует множество отличных сервисов для создания начальных тем, в том числе Underscores, FoundationPress, UnderStrap и Bones (это только некоторые из них).

Я буду использовать Underscores для нашего примера ниже. Это хороший выбор для начинающих, так как он содержит только основы. Кроме того, эта начальная тема разработана Automattic, что делает ее более безопасной, совместимой и хорошо поддерживаемой в долгосрочной перспективе.

Как разработать свою первую тему WordPress (за 5 шагов)

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

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

Шаг 1: Настройте локальную среду

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

Существует множество способов создания локальной среды, но я собираюсь использовать OpenServer (и вам его советую). Это быстрый, простой и бесплатный способ установки локальной версии WordPress, совместимый с Windows. Для начала выберите “PREMIUM” версию OpenServer (вам должно ее хватить за глаза), дождитесь скачивания, а затем установите это ПО себе на компьютер.

После того, как все будет установлено, вы можете запустить его.

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

Шаг 2: Загрузите и установите стартовую тему

Как и большинство начальных тем, с Underscores очень легко начать работу. На самом деле, все, что вам нужно сделать, это зайти на сайт и ввести название своей темы. Очень легко!

Если вы хотите, вы также можете нажать на “Advanced Options” (Дополнительные параметры) для дальнейшей настройки базовой темы. Здесь вы можете заполнить дополнительную информацию, такую как имя автора и дать описание темы.

Там также есть _sassify! опция, которая добавит файлы Syntaxically Awesome StyleSheets (SASS) в вашу тему. SASS – это язык предварительной обработки для CSS, который позволяет вам использовать переменные, вложения, математические операторы и многое другое.

Когда вы сделали свой выбор, вы можете нажать “Generate”, чтобы загрузить ZIP-файл, содержащий вашу начальную тему. Это ядро, вокруг которого вы будете разрабатывать свою собственную тему, поэтому установите ее на свой локальный сайт. После того, как вы установили свою тему, вы можете просмотреть свой сайт, чтобы увидеть, как он выглядит. Сейчас это очень просто, но это ненадолго!

Шаг 3: понять, как работает WordPress за кулисами

Прежде чем вы сможете настроить свою тему, вам необходимо понять назначение ее компонентов и то, как они сочетаются друг с другом. Во-первых, давайте обсудим файлы шаблонов, которые являются основными строительными блоками темы WordPress. Эти файлы определяют макет и внешний вид контента на вашем сайте. Например: header.php используется для создания шапки сайта, а comments.php позволяет отображать комментарии.

WordPress определяет, какие файлы шаблонов использовать на каждой странице, просматривая иерархию шаблонов. Это порядок, в котором WordPress будет искать подходящие файлы шаблонов при каждой загрузке страницы на вашем сайте. Например, если вы посещаете URL-адрес http://example.com/post/this-post, WordPress будет искать следующие файлы шаблонов в следующем порядке:

  • Файлы, которые соответствуют слагу, такие как этот пост.
  • Файлы, соответствующие идентификатору записи.
  • Общий файл с одним сообщением, например single.php.
  • Архивный файл, такой как archive.php.
  • Index.php файл.

Поскольку файл index.php требуется для всех тем, он используется по умолчанию, если другой файл не найден. Underscores уже содержит наиболее распространенные файлы шаблонов, и они будут работать прямо из коробки. Однако вы можете поэкспериментировать с их редактированием, если хотите почувствовать, как они работают вместе.

Еще один важный элемент, который вам нужно понять, это The Loop (Цикл WordPress). Это код, который WordPress использует для отображения контента, поэтому во многих отношениях это сердце вашего сайта. Он отображается во всех файлах шаблонов, в которых отображается содержимое публикации, например index.php или sidebar.php.

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

Шаг 4: Настройте тему

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

Добавьте функциональность с помощью “Hooks”

Hooks* (что в переводе означает “крючки, зацепы”) – это фрагменты кода, вставленные в файлы шаблонов, которые позволяют запускать действия PHP в различных областях сайта, вставлять стили и отображать другую информацию. Большинство хуков реализованы непосредственно в ядре WordPress, но некоторые полезны и для разработчиков тем.

Давайте рассмотрим некоторые из наиболее распространенных хуков и то, для чего они могут использоваться:

  • wp_head() – добавляется к элементу «head» в header.php и включает стили, сценарии и другую информацию, которая запускается при загрузке сайта.
  • wp_footer() – добавлен в footer.php прямо перед тегом «/body». Это часто используется для вставки кода Google Analytics.
  • wp_meta() – обычно появляется в sidebar.php для включения дополнительных скриптов (таких как облако тегов и другие).
  • comment_form() – добавляется в comments.php непосредственно перед закрывающим тегом «/div» файла для отображения данных комментариев.

Они уже будут включены в вашу тему от Underscores. Тем не менее, я по-прежнему рекомендую вам посетить базу данных хуков (естественно, на английском), чтобы увидеть все доступные хуки и узнать о них больше.

Добавьте стили с помощью CSS

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

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

Это контролирует цвет не посещенных гиперссылок, которые по умолчанию имеют цвет “royalblue”:

Давайте посмотрим, что произойдет, если мы попытаемся изменить это, заменив его следующим кодом:

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

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

Это очень простой пример того, как редактирование style.css повлияет на внешний вид вашего сайта. CSS – это обширная тема, которую я рекомендую вам изучить, если вы хотите больше узнать о создании веб-дизайна. Есть много ресурсов на эту тему для начинающих.

Шаг 5: Экспортируйте тему и загрузите ее на свой сайт

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

Когда вы тщательно проверите свою тему и убедитесь, что она соответствует требуемым стандартам, теперь остается только экспортировать ее. Самый простой способ сделать это – просто найти, где веб-сайт установлен на вашем локальном компьютере, скорее всего, в папке с именем «OSPanel», в папке «domains» по умолчанию, название вашего локального сайта. Откройте папку веб-сайта и перейдите в “/wp-content/themes/”, где вы найдете свою тему.

Теперь вы можете использовать инструмент сжатия, такой как WinRAR, для создания ZIP-файла на основе папки. Просто щелкните правой кнопкой мыши папку и выберите параметр, который позволяет вам сжать ее, например, “Добавить в архив”.

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

Заключение

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

Ну а если вам не охота, некогда или не охота забивать себе голову – обратитесь ко мне, и я вам сделаю классную, легкую и функциональную тему WordPress, которая принесет вам полное удовлетворение.

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

Ну а у меня на этом все – до скорых встреч!

WordPress — Создание темы на WordPress

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

Почему WordPress лучше чем Joomla ?

Этот урок скорее всего будет психологическим, т.к. многие люди работают с WordPress и одновременно с Joomla, но не могут решится каким CMS пользоваться.

Про шаблоны WordPress

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

Самые первые настройки после установки движка WordPress

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

10 стратегий эффективного продвижения статей в блогах на WordPress

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

Топ WordPress альтернатив для создания персонального сайта

Нужен персональный сайт, но вы не хотите задействовать WordPress? Тогда данная подборка для вас.

В поисках профессионального рабочего окружения для WordPress

За время работы проекта мы не раз рассказывали о настройках рабочего окружения для движка WordPress. WAMP для Windows, MAMP для Mac или XAMPP для обеих операционных систем. Сегодня мы бы хотели поговорить о минусах перечисленных инструментов, а также пролить свет на новые решения.

Работа с WordPress CLI

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

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

Создаем простую тему на wordpress

Здравствуйте, давайте попробуем создать простую wordpress тему с нуля.
Скачать исходники для статьи можно ниже

Первое, что нам нужно знать – это из чего состоят wordpress темы?

Если вы откроете любую скачанную wordpress тему (для примера возьму свою простенькую тему – glossyblue):

, то, наверняка, увидите в ней папку с названием images – здесь хранятся картинки темы, из которых состоит ее дизайн.
Также вы найдете файл стилей – style.css, который служит для описания внешнего вида страницы, написанный с помощью языков разметки HTML и XHTML, то есть в нем прописывается где должен располагаться тот или иной блок сайта, его размеры, границы, шрифт текста и многое другое.

Здесь же вы увидите скриншот темы – screenshot.png.

Все остальное документы – это php файлы – их у темы для WordPress сайта может быть разное количество с разными названиями. Все зависит от создателя темы. Но вот те, которые действительно необходимы для создания темы, то есть без которых она просто не будет работать, совсем немного.

А типичный комплект php файлов таков:

index.php
single.php
page.php
header.php
sidebar.php
footer.php
comments.php
archives.php
404.php
functions.php

Каждый из вышеуказанных php-файлов называется шаблоном.

Страницы WordPress сайта собираются подобно пазлу из файлов-шаблонов:

За шапку отвечает шаблон – header.php.

За подвал отвечает – footer.php.

За боковые колонки – sidebar.php.

За контент (центральная, основная часть сайта) – index.php, page.php, single.php и др. – в зависимости от того, что вы просматриваете.

Какие же шаблоны используются при выводе разных типов контента в WordPress, упрощенно (более подробно читайте на “codex.wordpress.org” статью “иерархия шаблонов”):

Отображение главной страницы – home.php или index.php

Отображение одиночной записи (поста) – single.php

Отображение статической страницы – page.php

Отображение рубрики – category.php

Отображение меток – tag.php

Отображение результатов поиска – search.php

Отображение ошибки 404 (Не найдено) – 404.php

Отображение комментариев – comments.php

Отображение архива записей – archives.php

Некоторые шаблоны (например header.php и footer.php) задействованы практически на всех страницах, другие используются только при определенных условиях (например шаблон ошибки – отсутствие нужной страницы – 404.php).

Остался еще один типичный файл-шаблон для большинства тем wordpress – это functions.php.

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

Но для создаваемой нами простенькой темы wordpress данный файл-шаблон не понадобиться (functions.php).

Какие же шаблоны-файлы мы будем создавать для нашей простенькой темы:

index.php
header.php
sidebar.php
footer.php
comments.php

Создание файла header.php.

Header, хедер или шапка страницы сайта.

Что входит в этот файл.

Обычные и необходимые каждой странице сайта части html-кода.

Это доктип (DOCTYPE), теги , и тег , мета-тег описывающий кодировку, мета-тег привязки стилей css, привязки rss фида, само собой разумеется, мета-теги title, description, keywords и другие. Здесь же по традиции находится так называемые «сквозные» элементы сайта, то есть те, которые применяются на каждой его странице. Это название сайта, и как Вы и сами могли заметить на многих сайтах – горизонтальное меню сайта.

Открываем бесплатный редактор кода – Notepad++ и вставляем следующий код:

Собственно это и есть готовый код файла header. А теперь разберемся какая часть кода за что отвечает.

«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> – это так называемый доктайп , он предназначен для указания типа текущего документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях (HTML 4.01, HTML 5), также имеется XHTML (XHTML 1.0, XHTML 1.1).

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

— с помощью этого мета-тега прописана кодировка документа. Так как мы создаем сайт на движке WordPress, то и кодировка должна быть UTF-8. Это единственная кодировка, с которой работает движок wordpress.


— мета-тег description, то есть описание вашего сайта.

— мета-тег keywords, то есть ключевые слова сайта.

| — мета-тег title. Очень важный мета-тег. С помощью этого кода мета-тег title будет создан в виде: название рубрика – название статьи – название сайта.

— ссылка на RSS фид Вашего сайта.

” /> — ссылка отсылки пингбеков на другие сайты или блоги. Что такое пингбеки – разберемся как-нибудь в другой раз.

” type=”text/css” media=”screen”/> — ссылка на css файл стилей Вашего сайта

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

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

Первым идет открывающий тег контейнера cont —

    – меню в хедере, созданное с помощью списков.

Правда, проще всего вставить меню с помощью функции wp_nav_menu – как это сделать читайте в моей предыдущей статье – Как создать и вывести меню в wordpress – это просто с функцией wp_nav_menu.

Далее сохраняем созданный файл header в заранее созданной папке темы, естественно под именем header и как php файл.

Создаем файл стилей для нашей простой темы wordpress – style.css.

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

Если Вы откроете любой файл стилей css – style.css – готовой темы, то сможете сами убедиться в том, что все они начинаются со служебной информации, закрытой знаками комментария.

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

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

Что здесь и к чему. Самый первый код со звездочкой это так называемые глобальные правила. Звездочка означает, что эти правила действуют для всего сайта. Зачем нужна такая «глобализация». Как видите, с помощью этих правил, заданы нулевые значения рамок, полей и отступов. То есть если в файле стилей css WordPress темы не указаны для какого-то элемента числовые значения этих параметров, то они будут равны нулю для всех браузеров. Что очень не помешает в кроссбраузерности создаваемого сайта.

Дальше выписаны правила для тега body . Здесь просто задан размер шрифта для всей страницы и его тип.

Задан размер шрифта для заголовков. Очень удобно.

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

Правила для контейнера header . Просто заданы ширина, высота контейнера и положение. Хотя куда ему деваться из контейнера.

Правила для контейнера blogtitle . В этом контейнере будет название сайта. Здесь заданы: ширина контейнера, далее размер шрифта и его цвет, положение контейнера – слева, размещение – слева 450.

Правила для контейнера subtitle . В этом контейнере будет описание сайта. Здесь заданы: предполагаемая ширина контейнера, выравнивание текста по ширине, положение контейнера – слева, размещение – слева 400, а так же размещение сверху – 60. Чтобы он не лег на blogtitle.

Правила для контейнера menu . Заданы позиционирование, ширина, положение и оступ слева – 800.

Вот пока и все по созданию файла стилей css WordPress темы. Это конечно далеко не все, естественно, что мы еще вернемся к файлу стилей.

Создание файла index.php.

Открываем редактор кода – Notepad++ и вставляем следующий код:

Ну и по строкам:

— код, отвечающий за вставку шапки сайта, то есть хедера или точнее шаблона header

— код цикла, отвечающий за вывод контента на страницу сайта

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

— код с условием, если не найдена страница сайта и строка, появляющаяся в результатах поиска

— закрывающий тег кода цикла

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

— код, отвечающий за вставку сайдбара или шаблона sidebar

— код, отвечающий за вставку футера или шаблона footer

Вот и весь код файла index.php. Как видите, потихоньку шаблоны сайтов WordPress открывают свои секреты… Да, чуть не забыл! В файл стилей добавим вот такой код:

Правила для контейнера content . Задана ширина контейнера, положение, отступы снизу и справа для того, чтобы не наезжал на сайдбар и футер, выравнивание текста записи по ширине

Правила для контейнера title . Заданы параметры шрифта заглавия страниц сайта: цвет, размер, полужирное начертание и тип шрифта

Правила для контейнера date . Заданы параметры шрифта даты создания записи: размер шрифта, отступы, фон

Во пока, на сегодня, и все о том, как создавать шаблоны сайтов WordPress и в частности как создавать файл index.php. Остались файлы sidebar и footer.

Создаем файл sidebar.php.

Чтобы создаваемая нами простая тема wordpress заработала, нам осталось сделать еще три файла, даже два – sidebar.php и futer.php. Файл 404.php на работоспособность темы не влияет. Просто если из файла index.php убрать код вывода этого файла, то он совсем пустой будет. Да и файл этот совсем простой. Итак – к делу!

Открываем редактор кода – Notepad++ и вставляем следующий код:

Категории

— тег перевода строки, чтобы не сбилось все в кучу.

— код вывода списка категорий.

И аналогично дальше заглавия списков новых записей и архивов по месяцам, с кодами их вывода.

Внесем изменения в файл стилей (style.css). Вставим вот такой код:

Правила для контейнера sidebar. Здесь просто задано положение контейнера sidebar, его ширина и отступ сверху, для красоты.

Открываем редактор кода – Notepad++ и вставляем следующий код:

Запись копирайта с названием и ссылкой на главную страницу сайта, что в общем-то и не обязательно.

Как создать свой шаблон в WordPress?

Приветствую вас на сайте Impuls-Web!

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

Для чего вам может это понадобится?

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

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

В зависимости от темы WordPress, список этих шаблонов будет у нас меняться.

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

Шаг 1. Скачиваем файл шаблона к себе на компьютер

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

    1. Подключаемся к нашему сайту и заходим в папку с активной темой:

Шаг 2. Вносим необходимые правки

После того, как файлы скачаны, переходим к следующему этапу, это переименование этих файлов и внесение в них определенных правок.

  1. 4. Переименовываем файл шаблона WordPress и открываем его в каком-либо редакторе кода типа Sublime Text, Notepad++ или любом другом.
  2. 5. Первое, что нам нужно сделать, это внести правки в описание, которое находится в самом верху.

Заменяем описание которое там есть на код:

Здесь название шаблона можно написать как на английском, так и на русском языке.
6. Итак, этими строчками мы добились того, что у нас теперь WordPress в админке, при редактировании страницы, в списке шаблонов будет предлагать еще один шаблон, который мы назвали «Шаблон без сайдбара».

Как создать сайт на WordPress: полное руководство для новичков – установка, настройка, работа с сайтом

Время чтения: 27 минут Нет времени читать? Нет времени?

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

Почему WordPress – что это такое и 5 причин его использовать для сайта или блога

WordPress – это самая распространенная, на сегодняшний день, CMS . По данным независимого агентства Web Technology Surveys за сентябрь 2020 года, этот движок используется в 34,6 % сайтов или 64,1 % из тех, что сделаны на основе CMS. Для сравнения, в 2015 году на WordPress работало лишь 24 % ресурсов с CMS. Вот главные причины его успеха:

Бесплатный «движок» CMS WordPress распространяется по открытому лицензионному соглашению (GNU GPL). Вы можете свободно использовать этот продукт в любых целях, включая коммерческие.

Как выбрать движок для сайта?

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

WordPress используют Sony Music, The New Yorker, Reuters, TechCrunch, Республиканская партия США, Fortune и многие другие крупные СМИ, корпорации и организации. Черт, даже Rolling Stones и Snoop Dogg оценили этот движок.

Ну что, решили сделать сайт на WordPress? Тогда переходим к пошаговому руководству.

Шаг № 1: как выбрать хостинг и зарегистрировать домен

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

Что такое хостинг? Как выбрать хостинг?

Чтобы выбрать хостинг-провайдера, посмотрите это видео или изучите гайд в блоге «Текстерры». Если на это совсем нет времени, можете обратиться, например, в Reg.ru, Beget или «Айхор». Качество их услуг вполне на уровне.

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

Следующие рекомендации помогут выбрать удачное доменное имя:

  • Выбирайте доменное имя, частично или полностью совпадающее с названием сайта. Например, для сайта «Одноклассники» хорошие доменные имена – odnoklassniki.ru или ok.ru. Понятно, что имя vk.com этому ресурсу не подходит.
  • Используйте максимально короткое доменное имя. Владельцам смартфонов сложно ввести в строку браузера длинный адрес. Поэтому лучше использовать имя vk.com, чем vkontakte.ru.
  • Убедитесь, что выбранный адрес сайта легко запоминается и имеет смысл. Как вы поняли, владельцы «Одноклассников» не случайно выбрали короткое название ok.ru, а не ass.ru, простите за грубый пример.

Выбор доменной зоны не влияет на технические характеристики ресурса или позиции в поисковой выдаче. Однако теоретически этот параметр может влиять на доверие аудитории. При прочих равных пользователи охотнее верят сайтам с адресом vasya-pupkin.ru или vasya-pupkin.com, чем ресурсам типа vasya-pupkin.wordpress.com или vasya-pupkin.blogspot.com. Поэтому для коммерческих проектов старайтесь выбирать домены верхнего уровня, например, .com, .info, .org, .net, .ru, .ua, .by и т.п. Обратите внимание на появившиеся недавно домены первого уровня, например, .club, .guru, .ninja, .expert и другие.

Шаг № 2: как установить WordPress своими руками

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

Перейдите на сайт WordPress и скачайте дистрибутив.

С помощью FileZilla или другого FTP-клиента загрузите файлы WordPress в корневую папку или в субдиректорию. В корневой папке находится файл index.html. Чтобы создать субдиректорию, нужно поместить папку с файлами сайта в корневой каталог. В первом случае сайт будет доступен по адресу www.vash-site.ru. Во втором случае вы установите WordPress на существующий сайт. Он будет доступен по адресу www.vash-site.ru/wordpress/.

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

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

Если все сделано верно, увидите следующее сообщение (см. иллюстрацию).

По основному URL должен открываться сайт.

Вы только что своими руками создали сайт на WordPress. Теперь можете войти в панель администрирования и приступить к настройке.

Шаг № 3: выберите подходящую тему для WordPress

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

– Лучше выбрать бесплатную или платную тему?

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

– Какая тема лучше: русскоязычная или англоязычная?

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

– Как найти подходящий шаблон в каталоге?

Воспользуйтесь фильтром в каталоге тем. Отметьте нужные опции и примените фильтр. Еще один вариант: используйте дизайн-шаблон из подборки «Текстерры».

– Как установить тему WordPress?

Есть два способа. Первый: в админке выберите раздел «Внешний вид – Темы». Нажмите кнопку «Добавить новую».

Найдите нужную тему по названию или с помощью фильтра характеристик.

Наведите курсор на выбранную тему и нажмите кнопку «Просмотреть». Движок включит режим предпросмотра. Если внешний вид сайта вас устраивает, установите и активируйте тему.

Второй способ: скачайте дистрибутив выбранной темы на компьютер. Это должен быть архив в формате .zip. В разделе админки «Внешний вид – Темы – Добавить новую» загрузите и установите шаблон. После загрузки активируйте его.

Вы установили и активировали понравившийся шаблон. Теперь можно приступить к настройке.

Шаг № 4: как настроить сайт на CMS WordPress и тему (шаблон)

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

Настраиваем CMS WordPress

Войдите в административную панель WordPress и выберите меню «Настройки». Укажите необходимые данные в каждом разделе настроек.

В разделе «Общие» укажите название и краткое описание сайта. Эта информация будет отображаться для пользователей. В полях «Адрес WordPress» и «Адрес сайта» укажите URL ресурса. Выберите часовой пояс, формат даты, язык сайта. Оставьте поле «Членство» пустым, так как на первом этапе развития сайта на нем захотят регистрироваться только боты и злоумышленники.

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

Обязательно укажите хотя бы один надежный сервис слежения за обновлениями в разделе «Сервисы обновления». В этом случае движок будет автоматически уведомлять поисковые системы о публикации новых материалов. Например, выберите сервис http://rpc.pingomatic.com/. Сохраните изменения.

Каждый раз при нажатии на кнопку «Обновить», оповещаются и выбранные сервисы. Чтобы домен не попал в списки ping-спамеров, есть плагин WordPress Ping Optimizer. Установите его и настройте частоту обмена данными об изменениях.

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

Укажите, сколько записей отображать на одной странице и в лентах RSS. Выберите отображение в ленте анонсов статей. Если по какой-то причине не хотите, чтобы поисковики начали сразу индексировать сайт, установите галочку в соответствующем поле. Позже ее можно будет убрать.

В разделе «Настройки обсуждения» выберите подходящие параметры. В большинстве случаев подойдут дефолтные настройки. Уделите внимание полям «Модерация комментариев» и «Черный список». Можете указать признаки, по которым комментарии будут перед публикацией поставлены в очередь на модерацию или окажутся в списке «Спам». Эти настройки сработают, если вы пользуетесь дефолтными комментариями WordPress.

В разделе «Медиафайлы» оставьте настройки по умолчанию.

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

Как настроить тему WordPress

Каждый шаблон имеет собственные настройки. Описание настроек дефолтной темы Twenty Nineteen поможет понять закономерности и настроить выбранный шаблон.

В консоли WordPress выберите меню «Внешний вид – Настроить». Откроется страница настройки темы или кастомайзер. Доступные пункты настройки можно увидеть в меню в левой части экрана.

В разделе «Свойства сайта» загрузите логотип, укажите название и краткое описание сайта, добавьте фавикон .

В разделе «Цвета» выберите цветовую схему шаблона, а также цвет фильтра закрепленного фото.

В разделе «Меню» настройте меню сайта. Нажмите кнопку «Создать меню».

Укажите название и область меню.

Добавьте в меню нужные страницы и нажмите кнопку «Опубликовать».

В разделе «Виджеты» добавьте на сайт виджеты. Обратите внимание, что в 2020 году в дефолтной теме WordPress снова появился сайдбар. Если он вам не нужен, просто удалите боковые виджеты.

Как русифицировать тему WordPress

Русифицировать тему удобно с помощью бесплатной программы Poedit. Скачайте и установите ее на компьютер, а затем загрузите с вашего сайта на компьютер языковые файлы выбранного шаблона с помощью FTP-клиента, например, FileZilla. Также это можно сделать с помощью плагинов, например, File Manager. Если вы его установили, действуйте по следующему описанному ниже алгоритму.

В консоли выберите меню FileManager – Configuration. Настройте конфигурации, как указано на иллюстрации.

В меню FileManager – FileManager выберите папку wp-content – themes.

Выберите папку темы, которую хотите русифицировать. В ней откройте папку languages.

Скачайте на компьютер файлы en.mo и en.po. Если таких файлов нет, скачайте на компьютер файл с расширением .pot.

Откройте программу Poedit и выберите опцию «Создать новый перевод».


Откройте файл перевода и укажите код языка.

Приступайте к переводу. В поле «Исходный текст» программа отображает текст на английском языке. В поле «Перевод» нужно добавить текст на русском.

Сохраните перевод. Программа загрузит на жесткий диск вашего ПК два файла: ru_Ru.mo и ru_RU.po. С помощью функции Upload files загрузите файлы в папку languges вашего шаблона.

Вы русифицировали шаблон.

Вместо программы для ПК Poedit можно использовать плагин Loco Translate. После установки и активации надстройки интерфейс для перевода шаблонов появляется в админке сайта. Он тоже работает с языковыми файлами .po и .mo вашей темы, но все делается прямо в браузере.

Шаг № 5: решаем практические задачи с помощью плагинов для WordPress

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

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

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

  • Обеспечить безопасность сайта.
  • Бороться со спамом.
  • Оптимизировать ресурс к требованиям поисковых систем.
  • Повысить функциональность и улучшить юзабилити.

Как с помощью плагинов обеспечить безопасность сайта на WordPress

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

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

Чтобы регулярно создавать резервные копии сайта, воспользуйтесь одним из перечисленных плагинов:

  • WP Database Backup – пока не переведен на русский;
  • BackUpWordPress – есть русская версия, но реже обновляется;
  • Backup and Restore WordPress – не русифицирован

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

Нажмите кнопку «Установить». После установки активируйте плагин. Теперь настройте параметры резервного копирования. Выберите меню «Инструменты – WP DB BackUp». Нажмите Create New Database BackUp. Вы создали резервную копию по требованию.

Настройте регулярное создание резервных копий по расписанию. Перейдите на вкладку Sheduler, включите автоматическое создание резервных копий, выберите частоту создания архивов.

На вкладке Destination включите автоматическое сохранение архива на Google Drive или отправку на электронную почту.

Чтобы защитить сайт от несанкционированного доступа, воспользуйтесь плагином Loginizer Security. Надстройка надежно защищает сайт от взлома методом перебора или брутфорсинга.

Как бороться со спамом на сайте WordPress

Плагины для борьбы со спамом актуальны, если вы пользуетесь встроенным механизмом комментариев WordPress. Сторонние системы, например, Disqus, защищаются от этого самостоятельно.

Защититься от спама можно с помощью плагинов, например, Akismet или Antispam Bee. После установки Antispam Bee плагин работает в фоновом режиме. Обычно подходят дефолтные настройки, а если нужно что-то поменять, перейдите в меню админки «Настройки – Antispam Bee».

Еще один хороший плагин, который использует технологию reCaptcha компании Google, называется Advanced noCaptcha & invisible Captcha. Теперь спам фильтруется с помощью искусственного интеллекта. Для настройки необходимо просто зарегистрировать свой сайт в Google, выбрать версию капчи и получить два ключа – обычный и секретный, чтобы использовать их с плагином.

Как обеспечить SEO сайта на WordPress

WordPress – SEO-дружественная CMS по умолчанию. Но есть задачи, без которых сайт нельзя считать полностью соответствующим требованиям поисковых систем. Вот они:

  • Создание и обновление карты сайта.
  • Канонизация URL.
  • Оптимизация title страниц.
  • Автоматическая генерация мета-данных страниц.
  • Блокирование индексации дублированного контента.
  • Создание микроразметки страниц.

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

Установите и активируйте выбранный плагин, например, Google XML Sitemaps.

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

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

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

  • All in One SEO Pack.
  • WordPress SEO by Yoast.

Установите и активируйте выбранный плагин, например, All in One SEO Pack. Используйте настройки по умолчанию, если вы только знакомитесь с WordPress. Если считаете себя продвинутым веб-мастером, можете изменить некоторые настройки SEO-модуля. Для этого выберите меню All in One SEO в консоли движка.

Обратите внимание на перечисленные ниже настройки.

В разделе «Основные настройки» уберите флажок напротив пункта Use Schema.org Markup. Размечать страницу лучше с помощью отдельного плагина.

Если в качестве главной используете страницу записей, в разделе «Настройки главной страницы» укажите title, description и keywords. Если в качестве главной используется статическая страница, установите флажок в поле «Включить».

В разделе «Настройки для вебмастера» укажите код верификации ресурса в кабинете для вебмастеров Google. Для этого добавьте в «Инструменты для вебмастеров» новый ресурс, выберите альтернативные методы верификации. Скопируйте часть кода HTML, указанную на иллюстрации.

Вставьте ее в поле «Инструменты вебмастера Google» на странице настройки плагина.

Сохраните параметры плагина. В кабинете для вебмастеров нажмите кнопку «Подтвердить».

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

Связка WPSSO и WPSSO JSON Первый плагин базовый, а второй представляет собой расширение. С помощью базового решения на сайт можно добавить разметку Open Graph. С помощью второго с помощью JSON-LD реализуется разметка Schema.org. WP SEO Structured Data Schema С помощью данного плагина на сайт можно добавить несколько типов разметки Schema.org, включая Article, BlogPosting и Review. Разметка реализуется с помощью JSON-LD. Плагин Schema App С помощью этой программы на сайт можно добавить разные типы разметки Schema.org. Она реализуется через JSON-LD. Бесплатная версия поддерживает базовые типы разметки. Также для разметки можно использовать онлайн-генератор, если вы хорошо понимаете базовые принципы разметки Schema.org.

Установите и активируйте плагины WPSSO и WPSSO JSON. В консоли на странице настроек плагинов в разделе Essential Settings укажите информацию о сайте, а также сведения для разметки Open Graph. Не меняйте другие настройки.

Перейдите в раздел Schema Markup. В полях Organization Logo Image URL и Organization Banner URL укажите URL логотипа и баннера сайта. Эти изображения могут использоваться на странице поисковой выдачи.

С помощью выпадающего меню выберите базовый тип разметки для страницы записей блога, статической главной страницы. Вам нужны следующие типы: Blog и Website соответственно.

Выберите тип разметки для страниц публикаций, статических страниц и страниц медиафайлов. Для страниц записей подходят типы разметки Article и BlogPosting. Выбор зависит от формата публикаций в блоге.

Тип разметки BlogPosting – производное Article. Кроме BlogPosting, к частностям Article относится тип разметки News Article или «Новость». То есть BlogPosting содержит все семантические данные разметки Article.

Используйте тип BlogPosting, если публикуете небольшие заметки, личные наблюдения и впечатления, как в «Живом Журнале». Тип Article больше подойдет для обзоров, аналитических статей, руководств, как в блоге «Текстерры». Для статических страниц и страниц медиафайлов нужно указывать тип WebPage.

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

Что делать, если вы публикуете материалы разного типа: лонгриды, небольшие заметки и новости? В этом случае для каждой публикации лучше выбрать подходящую разметку. Вместо надстройки WPSSO JSON воспользуйтесь плагином WP SEO Structured Data Schema.

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

Недостаток плагина – необходимость размечать каждую публикацию вручную. А к преимуществам можно отнести поддержку дополнительных типов разметки, например, Review, Product и Aggregate Ratings. Бесплатная версия WPSSO JSON не поддерживает эти типы.

Между прочим, TexTerra занимается комплексным продвижением в интернете. Помимо SEO, услуга включает работу по разным направлениям: SMM, контент- и видеомаркетинг, email-рассылки и др. На сегодняшний день не существует более эффективного метода для бизнеса.

Как повысить функциональность и юзабилити ресурса

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

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

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

Начните улучшение юзабилити с латинизации URL сайта. Обратите внимание на ссылку, которую CMS генерирует по умолчанию. В ней есть кириллические буквы.

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

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

Эту проблему можно решить с помощью WP Translitera или аналогичного плагина. Для этого достаточно установить и активировать выбранный модуль.

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

Выберите сервис шеринга, например, Pluso. Настройте блок «Поделиться» и скопируйте предложенный системой код. В админке сайта перейдите в меню «Настройки – Header and Footer». Откройте вкладку Posts. Вставьте код после или перед публикацией.

Сохраните изменения, проверьте, как отображаются кнопки.

Шаг № 6: как установить коды сервисов аналитики и подключить сайт к кабинетам для веб-мастеров

Обозначенная в подзаголовке задача решается разными способами. Например, при установке плагина All in One SEO Pack вы уже подключили ресурс к кабинету для вебмастеров Google. Подключить сайт к «Вебмастеру», «Метрике» и Google Analytics поможет установленный ранее плагин Head, Footer and Post Injections.

Зарегистрируйте сайт в указанных сервисах. Инструкции по регистрации можно найти в гайдах «Текстерры» по «Яндекс.Вебмастеру», «Метрике» и Google Analytics.

После регистрации в сервисах скопируйте коды отслеживания или теги верификации и вставьте их на сайт. Для этого перейдите по вкладке Head and footer на странице настроек плагина.

Подключить любой внешний сервис можно с помощью диспетчера тегов Google. Код Tag Manager нужно установить в разделы head и body каждой страницы сайта с помощью Head, Footer and Post Injections. О работе с диспетчером тегов можно прочитать в нашем руководстве.

Шаг № 7: как создавать страницы и записи на сайте под управлением WordPress

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

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

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

Как создать статическую страницу

Придерживайтесь описанного ниже алгоритма.

Выберите меню «Страницы – Добавить новую».

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

Например, чтобы вставить фотографию, выберите соответствующий блок.

Выберите источник фото и положение картинки на странице.

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

После редактирования опубликуйте страницу.

Проверьте корректность отображения контента. Если нужно, отредактируйте страницу.

Как создать публикацию

Создание публикации рассматривается на примере классического редактора. С пятой версии WordPress, его придется установить как отдельный плагин. Конечно, как и для страниц, можно использовать новый «Гутенберг», но он не настолько гибкий.

Чтобы добавить запись, выберите меню «Записи – добавить новую».

Большинство шаблонов поддерживает несколько форматов записи. Выберите подходящий.

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

Классический редактор поддерживает два формата редактирования: визуальный или WYSIWIG и «Текст» с возможностью использовать HTML. Выберите подходящий. Добавьте заголовок и контент.

Укажите title и description, выберите изображение записи. Опубликуйте страницу.

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

Вы создали и настроили сайт на WordPress и научились публиковать контент. Теперь вас ждет самая тяжелая и ответственная работа. Чтобы сайт был эффективным, вы должны регулярно создавать качественный и полезный для аудитории контент. Возможностей «движка» достаточно для реализации практически любого проекта: от информационного ресурса до интернет-магазина.

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

Сложно, не получается или просто нет времени? Делайте то, что умеете лучше, а профессиональное создание сайта на WordPress доверьте специалистам «Текстерры».

10 бесплатных фреймворков для создания тем WordPress

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

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

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

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

Cherry Framework от TemplateMonster

Несмотря на свою короткую историю, Cherry Framework успел заслужить много положительных отзывов.

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

Ключевые особенности Cherry:

  • Независимая модульная структура позволяет использовать компоненты Cherry в отдельности, как самостоятельные инструменты. Tom J. Nowell из команды Automattic убежден, что подобной возможностью должен обладать каждый приличный фреймворк;
  • Редактор и набор шорткодов, позволяющих добавлять различные объекты в любое место страницы;
  • Возможность фиксировать положение элемента (логотипа, меню или поисковой строки) относительно верхнего или нижнего колонтитулов;
  • Минимизатор CSS — инновационный инструмент, позволяющий объединить CSS из разных файлов в один и минимизировать его для ускорения загрузки;
  • Backup Option — очень удобная опция, позволяющая «откатиться» в предыдущее состояние, если вас не устроил результат редактирования;
  • Механизм плагинов, обеспечивающий быстрое решение различных задач. Это добавление слайдшоу, боковых панелей и различных типов заметок — для отзывов, портфолио и т.п.;
  • Совместимость с инструментами сторонних разработчиков;
  • Адаптивность и WPML-совместимость — два жизненно необходимых на сегоднящний день функционала, позволяющих создавать многоязычные сайты, адаптированные к любым устройствам, от смартфонов до ПК.

Hybrid Core от ThemeHybrid

Gantry от RocketTheme

Gantry — это попытка профессионалов из RocketTheme объединить все их достижения в разработке тем для WordPress в единый фреймворк. И попытка, надо сказать, весьма удачная. Построенный с использованием динамической сетки, этот весьма легкий фреймворк поддерживает SCSS, CSS и LESS.

Взгляните на перечень основных особенностей Gantry:

  • Менеджер разметки предоставляет полную свободу в разработке макета.
  • Система управления контентом, позволяющая создавать, редактировать и публиковать материалы.
  • Визуальный конструктор меню, поддерживающий многоуровневые меню и создание пунктов меню с иконками.
  • Мегаменю позволяет создавать нестандартные выпадающие меню, где в качестве подпунктов могут выступать не только ссылки, но и любой html – таблицы, формы, списки, отформатированный текст
  • Интерфейс администратора, созданный с использованием Ajax, и работающий с невероятной быстротой.
  • Мощный обработчик шаблонов Twig.
  • А еще Gantry может похвастаться YAML-ориентированным конфигуратором, скользящими боковыми панелями, мощными возможностями наследования и набором всевозможных иконок и шрифтов.

  • Скачать

Runway от Parallelus

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

Основные особенности Runway:

  • Генератор тем, предназначенный для создания, копирования и редактирования тем.
  • Конструктор тем — предназначен для создания админпанелей и записей нестандартного (пользовательского) типа.
  • Модульная структура, позволяющая добавлять требуемую функциональность при помощи плагинов буквально в один клик.
  • Скачать

Wonderflux от Jonny Allbut

Еще один фреймворк с открытым исходным кодом в нашей подборке — Wonderflux. Качественный продукт, который позволит вам сэкономить время разработки, при этом нисколько не потеряв эффективности.

Ключевые особенности Wonderflux:

  • Динамическая разметка, обеспечивающая адаптацию темы к любым размерам экрана.
  • Гибкие параметры разметки, которые можно изменять «на лету».
  • Коллекция из более чем 100 шорткодов, позволяющая внедрить в тему код или контент любого типа
  • Административные настройки, обеспечивающие легкую конфигурацию сайта.
  • Совместимость с плагинами WordPress позволяет решить практически любую поставленную задачу
  • Валидатор кода, обеспечивающий соблюдение веб стандартов, что является непременным условием качественной SEO оптимизации.

  • Скачать

Unyson от ThemeFuse

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

Ключевые особенности:

  • Конструктор страниц с поддержкой технологии drag-and-drop.
  • Content Demo Install — Расширение, позволяющее отображать контент именно так, как он выглядит при редактировании.
  • Более 20 параметров, упрощающих создание контейнеров, вкладок и форм для админпанели
  • Динамические боковые слайд-панели, которые могут настраиваться индивидуально для каждой страницы.
  • Автоматическое резервное копирование непосредственно из админпанели. Возможно регулярное копирование по расписанию (ежедневно, еженедельно, ежемесячно и т.д.).
  • Навигационные цепочки (a.k.a. «хлебные крошки»), добавляющие простую и понятную навигацию
  • Модуль слайд-шоу, поддерживающий как фото- так и видеоконтент.

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

PressWork

Бесплатный WordPress фреймворк, созданный с использованием HTML5 и CSS3 и ориентированный на широкий круг пользователей — разработчиков, дизайнеров, блогеров.

Вот некоторые его особенности:

  • Редактор Front-End — возможность редактирования frontend при помощи редактора с поддержкой drag-and-drop.
  • Набор плагинов, расширяющих базовую функциональность фреймворка для решения конкретной задачи.
  • Media Queries — модуль, отвечающий за оптимальный внешний вид на любых устройствах.
  • Присутствие в комплекте PSD-файлов для редактирования темы, например, изменения логотипа или графических элементов.

  • Скачать

Reverie от ThemeFortress

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

Ключевые особенности:

  • Фреймворк создан на базе ZURB Foundation и наследует всю его гибкость и мощь.
  • HTML5 и hNews microformat обеспечивают ясный, понятный и легко воспринимаемый код. Для HTML5 тэгов можно использовать пользовательские функции WordPress.
  • Имеет механизмы адаптации к размеру экрана, так что выглядит одинаково хорошо и на смартфонах и на ПК.
  • Следует концепции минимализма, предлагая только два виджета и два пользовательских меню.
  • При необходимости внести изменения в дизайн предлагается непосредственное редактирование SCSS и пользовательского CSS.

Из минусов стоит отметить частичную SEO-оптимизацию, поэтому для этой цели рекомендуется использовать дополнительный плагин.

Vafpress

С Vafpress создание административной (backend) части WordPress темы становится легким, как никогда.

Для этого в распоряжении разработчика имеются:

  • Скрипт управления загрузкой, позволяющий загружать только необходимые блоки, не перегружая frontend излишним кодом.
  • Поддержка различных типов полей: текстовых, списков со множественным выбором, флажков (checkbox), переключателей (radiobutton) и других
  • Мощный конструктор многоуровневых меню. Для построения использует XML, который затем можно преобразовать в массив PHP.
  • Metabox Builder — позволяет записывать metabox в массивы PHP.
  • Поддержка групп повторяющихся полей.

  • Скачать

Underscores

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

Основные особенности Underscore:

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

  • Скачать
Цукерберг рекомендует:  Делаем сайты клиента быстрее
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих