Создаем тему WordPress на базе статического HTML Добавляем цикл


Оглавление (нажмите, чтобы открыть):

Верстка шаблона WordPress из HTML макета

В одной из статей я рассказывал, как делать шаблон сайта средствами HTML и CSS. Сейчас объясню, как сделать из простого HTML-шаблона тему WordPress на примере дизайна из той статьи.

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

Распределяем код по файлам

1. Скачайте шаблон и распакуйте его в папку с темами WordPress (адрес вида адрес_блога_wordpress/wp-content/themes/). Если хотите, переименуйте папку с темой на свой вкус. Например, у меня шаблон располагается по адресу адрес_блога_wordpress/wp-content/themes/MyTheme/.

2. Переименуйте файл styles.css в style.css.

3. Откройте style.css в редакторе кода (таком, как Notepad++) и в самое его начало вставьте следующие строки:

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

4. Создайте файлы header.php, index.php, sidebar.php, footer.php и распределите по ним код из index.html.

4.1. В header.php скопируйте код по строчку , так как этот файл отвечает за верх сайта. styles.css замените в коде на style.css — новое корректное имя файла.

4.2. В index.php вставьте код основного блока (со строки по строку ).

4.3. В sidebar.php скопируйте код бокового меню (с по ).

4.4. В footer.php вставьте оставшиеся строки (с до конца документа index.html).

5. Удалите index.html.

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

Адаптируем header

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

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

1. Откройте файл header.php и замените содержащийся в нём код до блока

Мы сделали динамическим блок

— код вызывает функцию, возвращающую языковые атрибуты в контейнер.

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

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

2. Перейдите к редактированию файла index.php. В самом его начале пропишите

Строчки вызывают файлы шапки, боковой панели и низа сайта.

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

Делаем динамическим верхнее меню

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

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

так, чтобы получилось следующее:

Для того, чтобы меню стало отображаться, в панели управления сайтом откройте Внешний вид -> Настроить -> Меню и либо переименуйте уже созданное меню в menu, либо создайте меню и настройте его на своё усмотрение, но обязательно присвойте ему имя menu.

Суть действий в том, что файл header.php функцией wp_nav_menu(‘menu=menu’); открывает меню под названием menu, которое, чтобы отобразиться, должно быть правильно названо и настроено в панели администрирования WordPress. Название menu вы можете поменять на любое другое, главное, чтобы имя совпадало и в настройках сайта, и в коде header.php.

Теперь обновите страницу и оцените результат.

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

Так как он прокомментирован, дополнительные объяснения вряд ли нужны. Остаётся обновить страницу и посмотреть, что список наконец-то стал горизонтальным.

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

Завершаем «шапку»

Единственные элементы файла header.php, оставшиеся статическими — имя и описание сайта. Чтобы они брались из настроек, задаваемых в админ-панели, замените отвечающий за вывод текста в шапке код на следующие строки:

Обновите страницу — результат не заставил себя долго ждать.

Работа с файлом header.php на этом завершена, в итоге он имеет следующий код:

Выводим посты

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

Удалите содержимое блока right и вместо него вставьте код динамического отображения постов. Либо же удалите из файла весь код и вместо него вставьте следующее:

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

— отображает заголовок поста.

— дата в формате день, месяц (сокращённо), год. Теги, комментарии.

— конец цикла при условии, что записи были.

— если же материалов нет, вывести об этом соответствующую надпись и покинуть цикл.

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

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

Дальнейшее оформление и размещение элементов зависит только от вашей фантазии и навыков вёрстки — с отображением данных можно делать всё, что угодно, но работа над шаблоном ещё не завершена.

Добавляем виджеты

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

  1. зарегистрировать блок виджетов;
  2. вывести его в нужном месте.

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

2. Внесите в следующий код:

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

3. В файле sidebar.php сотрите строки:

и вместо них запишите:

Блок Информация ожидаемо исчез, сбоку осталось только пока ещё статическое меню.

4. Зато перемены к лучшему произошли в админ-панели — раздел Внешний вид обзавёлся подпунктами Виджеты и Меню. Перейдите в первый. Откройте его и посмотрите: внутри появился зарегистрированный в файле functions.php блок (у меня это MySidebar).

5. Чтобы воссоздать информационный блок, перетащите на сайдбар виджет Текст, в поле Заголовок введите Информация, в поле Текст — код

и нажмите кнопку Сохранить.

6. Обновите страницу блога — блок удалось воссоздать практически один в один (мелкие нюансы меняются в файле style.css и заострять на них внимание я не буду).

Адаптируем меню

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

1. Удалите огромный вложенный список меню в файле sidebar.php и вместо него введите код:

2. В панели управления WordPress откройте Внешний вид -> Настроить -> Меню, нажмите кнопку Добавить меню, назовите его так, чтобы имя в админ-панели совпадало с именем в коде страницы sidebar.php (у меня это left_menu) и добавьте все необходимые пункты.

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

Код страницы sidebar.php по сравнению с исходным сильно уменьшился и в итоге стал таким:

Фактически статичной осталась только надпись Меню. И то потому, что меняться вряд ли будет, хотя и её легко можно «оживить», например, реализовав этот блок в виде ещё одной области виджетов и добавив на него блок Произвольное меню, но это, если внимательно читали статью, вы можете теперь легко сделать самостоятельно.

Работаем с файлом footer.php

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

1. Откройте файл function.php и перед дескриптором ?> вставьте такой код:

Тем самым вы регистрируете блок виджетов с именем foot, которое как бы намекает на его расположение.

2. В файле footer.php весь код внутри контейнера footer замените одной строкой:

Она выводит зарегистрированный в файле functions.php блок foot.

3. Перейдите в админ-панель WordPress, откройте страницу настройки виджетов, перетащите в область foot блок Текст, в поле Текст: введите что угодно, например, нижеследующее.

Поле Заголовок можно оставить пустым.

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

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

3 способа построения циклов в WordPress

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

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

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

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

  1. Стандартный цикл и цикл на основе query_posts();
  2. Дополнительный цикл на основе WP_Query();
  3. Дополнительный цикл на основе get_posts().

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

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

1) Стандартный Цикл и цикл на основе query_posts()

Я объединил 2 вида циклов (с query_posts() и начинающийся с if( have_posts() ), потому что технически они абсолютно одинаковые.

Давайте вспомним, как выглядит стандартный Цикл WordPress:

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

Обратите внимание: в стандартном Цикле мы не указываем никаких данных для выборки записей, а сразу начинаем цикл с if( have_posts() )< while( have_posts() )<… Это говорит о том, что данные уже существуют и их нужно просто обработать и вывести на экран.

«Уже существующие» данные сохраняются в глобальную переменную $wp_query и для каждого типа страниц WordPress определяются автоматически, т.е. WordPress заранее делает запрос к БД, на основе того какой тип страницы сейчас отображается (категория, метка, статья, постоянная страница и т.д.) и результат запроса записывается в $wp_query , а затем от туда выводится в цикле. Интересно, что такой запрос делается функцией query_posts(), которую мы разберем ниже.

Обычный Цикл WordPress используется для базовых страниц WP (категории, метки, архивы по дате).

Цикл на основе query_posts()

query_posts() позволяет изменить базовый запрос и вывести нужный нам вариант записей.

Вариант 1

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

В этом примере мы создали новый запрос к БД, в котором использовали параметры базового запроса + свои параметры: исключили категории 6 и 9 ( cat=-6,-9 ), а также отсортировали записи по порядку ( order=ASC ) и вывели 20 записей на странице вместо, установленных в настройках 10 ( posts_per_page=20 ). Полный список параметров, которыми можно сформировать нужный нам вывод, смотрите в описании функции query_posts().

Преимущества такого изменения в том, что если мы, например, изменим количество выводимых записей на странице с 10 (по умолчанию) на 20, то пагинация на странице автоматически подстроится под это изменение, потому что query_post() меняет данные глобальной переменной $wp_query, а пагинация строится именно на основе этих данных. Это лишь один из примеров, показывающий что query_posts() и поведение других функций на странице взаимосвязаны.

Изменять базовый запрос WP рекомендуется через фильтр pre_get_posts

Вариант 2

Можно не использовать параметры базового запроса ( $query_string ), а полностью переписать базовый запрос:

Однако, такой подход по сути сотрет базовый запрос и создаст новый, который может быть составлен неправильно, поэтому полностью переписывать базовый запрос нужно аккуратно, со знанием дела.

Необходимость wp_reset_query()

Сбрасывать измененный запрос при использовании query_posts() нужно, потому что query_posts() переписывает глобальную переменную $wp_query которая отвечает за некоторые свойства страницы. Давайте посмотрим на примере.

Предположим нам на странице категории 6 (ID категории), нужно вывести данные только поста 9 (ID поста):

В этом примере мы не сбросили запрос и функция query_posts() переписала глобальную переменную $wp_query . Теперь, кода мы проверим какая это страница (а это страница категории: is_category() == true ), мы увидим, что это уже совсем не страница категории, а страница поста: is_single() == true . Т.е. следующий код вернет нам «Это страница поста», хотя на самом деле это страница категории:

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

Когда использовать query_posts()?

Когда нужно немного изменить основной (базовый) запрос WordPress. В идеале: для исключения рубрики/метки (например, на главной странице); изменение направления сортировки; ограничения количества выводимых постов; исключения определенных постов из категории/метки и т.п.

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

2) Цикл на основе WP_Query()

Для вывода записей никак не связанных со страницей или создания множественных (дополнительных) циклов можно использовать циклы на основе класса WP_Query. Выглядят они аналогично циклам с использование query_posts() . Для WP_Query используются те же самые параметры, что и для query_posts().

Интересно, что WP_Query является ядром функций query_posts() и get_posts() , т.е. обе эти функции работают на основе этого класса.

Пример цикла: выведем все записи из категории 9:

Пример создания множественных циклов на основе WP_Query() :

Особенность циклов на WP_Query() в том, что мы создаем новый объект $query , который никак не связан с аналогичным глобальным объектом $wp_query и поэтому мы никак не нарушаем структуру текущей страницы.

Также, мы можем использовать новый объект в других целях, не только для вывода записей, но и для различного рода проверок: например, записи какого типа страницы используются в этом новом объекте; можем узнать общее количество записей удовлетворяющих запросу ( $query->found_posts ) и т.д. Такие данные могут пригодится при создании дополнительных запросов с пагинацией или где-то еще (пример в комментариях).

Зачем нужно использовать wp_reset_postdata() ?

В глобальной переменной $post хранятся данные текущего поста (если показывается страница поста, то данные этого поста). Когда срабатывает часть кода $query->the_post() , то в переменную $post записываются данные текущего поста в цикле и в конце цикла в этой переменной остаются данные последнего поста из этого цикла, а нужно чтобы $post всегда содержала данные текущего поста страницы. Т.е. получается до использования цикла $post->ID (ID текущего поста) было равно, допустим, 10, а после срабатывания цикла, та же самая переменная $post->ID уже равна, допустим, 56 (ID последнего поста из цикле), а нужно чтобы она по-прежнему равнялась 10.

wp_reset_postdata() используется как раз для того, чтобы вернуть правильные данные в переменную $post.

Когда использовать WP_Query() ?

Если нужно вывести записи не затрагивая основной цикл (допустим записи в боковой панели), если нужно создать множественные запросы. Вообще, я не вижу никаких преимуществ циклов на WP_Query() над циклами с использованием get_posts() и поэтому рекомендую использовать get_posts() вместо WP_Query() .

3) Цикл на основе get_posts()

Самый удобный вариант выводить нужные записи в нужном порядке — это выводить их с помощью get_posts() (см. описание). get_posts() в 99% случаев полностью заменяет WP_Query(): нужно вывести 10 последних постов в сайдбаре или 10 случайных записей в подвале — пожалуйста; нужно вывести все картинки прикрепленные к посту или вывести записи с определенным произвольным полем — get_posts() прекрасно справится с этой задачей.

get_posts() так же как и query_posts() работает на основе класса WP_Query() и поэтому передаваемые параметры одинаковые (см. их здесь).

#1. Пример цикла на основе get_posts() . Выведем 5 записей из рубрики 9:

Код выведет именно 5 записей, хотя в аргументах мы указали только номер рубрики. Вызвано это тем, что у функции get_posts() есть параметры по умолчанию (см. описание), о которых нужно помнить. Например, если нам нужно вывести все записи из рубрики 9, то мы должны добавить еще параметр ‘nopaging’ => 1 или ‘posts_per_page’ => -1 (разницы нет).

Мастер Йода рекомендует:  Пароль на страницу PHP

Когда использовать get_posts()

Всегда, когда нужно просто вывести записи из БД в любом месте шаблона. Когда нужно создать несколько циклов. Так как get_posts() принимает те же параметры что и query_posts(), её очень удобно использовать для вывода записей по самым разным критериям.

Выводы

Где и какой из 3-х вариантов циклов использовать:

query_posts() — если нужно изменить/подправить стандартный вывод записей на страницах WordPress. Можно использовать 1 раз на странице;

get_posts() — если нужно вывести записи из Базы Данных. Можно использовать сколько угодно раз на странице;

  • WP_Query() — во всех других случаях когда не подошли query_posts() и get_posts(). Класс WP_Query() является ядром query_posts() и get_posts() и может быть использован для каких-либо сложных случаев вывода.
  • Помните, что параметры для всех вариантов одинаковые и описаны они на этом блоге.

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

    Создание простой темы для WordPress

    На днях я перевёл полезную статью и хочу поделиться ею со всеми. Итак, статью написал товарищ Nick La и далее повествование будет от его лица.

    Эта статья поведает вам о том, как создать самую простую тему для WordPress. Хотя Codex и предоставляет обширную документацию по этому вопросу, но мне она кажется несколько сложной для новичка. Поэтому в данном «туториале» я расскажу принципы работы тем для WordPress и покажу как адаптировать под них сырой HTML-шаблон. При этом от вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна.

    1. Frontend блога

    До того, как мы начнём, давайте взглянем на стандартную тему WordPress и разберёмся из чего она состоит. Отметим элементы (шапка, заголовок поста, форма поиска, навигация, подвал и т. д.).

    Стандартный Frontpage ( index.php )

    Стандартный Single ( single.php )

    2. Photoshop-макеты

    Основываясь на внешнем виде стандартной темы, разработайте Photoshop-макеты для вашего блога. Для примера я использую GlossyBlue — одну из моих бесплатных тем. Скачайте demo.zip, чтобы увидеть готовый файл Photoshop.

    3. HTML и CSS

    Когда PSD-дизайн готов, создайте HTML+CSS шаблон каждой страницы. Следуя шагам этой инструкции, вы можете использовать мои HTML файлы GlossyBlue из demo.zip. Распаковав архив, вы увидите index.html, single.html и page.html. Далее я буду использовать их для превращения в шаблон.

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

    4. Как работает тема WordPress

    Если вы перейдёте к папке стандартной темы ( wp-content/themes/default ), то увидите много php-файлов (называемых файлами шаблонов) и один файл style.css . Для формирования страницы WordPress обычно использует несколько файлов шаблонов (index.php , header.php, sidebar.php, и footer.php).

    Подробнее в Codex: «Архитектура сайта» и «Иерархия шаблонов» .

    5. Дублирование файлов шаблонов

    Скопируйте папку HTML из GlossyBlue в папку wp-content/themes . После этого перейдите в директорию темы default , скопируйте comments.php и searchform.php в папку glossyblue .

    6. Style.css

    Перейдите в папку темы default , откройте файл style.css . Скопируйте закомментированный в начале файла текст и вставьте в style.css темы GlossyBlue . Если хотите, можете изменить название и данные об авторе.

    7. Разделение файлов

    Теперь нам нужно понять где разделить HTML-файлы на части: header.php , sidebar.php , и footer.php . На скриншоте ниже видно упрощённую версию моего index-файла, а также принцип его деления.

    8. Header.php

    Откройте index.html . Вам нужно вырезать участок от верха до места, где заканчивается , вставить его в новый php-файл и сохранить как header.php . Перейдите в папку темы default , откройте новый header.php . Скопируйте и замените теги, где этого требует php-код: title, link, таблицы стилей, h1 и div >

    Меню навигации ( wp_list_pages ) Замените тэги li в ul > на ;

    9. Sidebar.php

    Вернитесь к index.html , вырежьте код с того места, где начинается form > и до закрытия тега div > , поместите его в новый php-файл и сохраните как sidebar.php .

    • Замените form > со всем содержимым на .
    • Замените теги li категорий на
    • Замените теги li архивов на

    10. Footer.php

    Вернитесь к index.html . Извлеките оттуда код от div > включительно с тегом div > и до конца /html затем поместите в новый footer.php .

    Недавние записи Тут я использовал query_post для отображения 5 последних записей в блоге.

    «Последние комментарии» «Последние комментарии» сгенерированы плагином (включён в папку темы)

    11. Index.php

    Теперь в вашем index.html должен остаться только div > . Сохраните файл как index.php . Впишите строки: get_header , get_sidebar , и get_footer в том порядке, как они встречаются в шаблоне.

    12. Разбор цикла

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

    13. Копирование цикла

    Перейдите к директории темы default , откройте index.php . Скопируйте цикл из стандартного index.php в свой — между div > . После этого замените статический текст тегами шаблона WordPress: post date, title, category, comments, next и previous link.

    14. Предпросмотр темы

    Поздравляю! Вы создали публичную часть (основную часть шаблона). Теперь зайдите в административную панель, перейдите к закладке Design, вы должны увидеть тему GlossyBlue . Активируйте её и перейдите к публичной части, чтобы посмотреть результат в действии.

    15. Single.php

    Пришло время создать шаблон single.php . Если хотите, можете повторить шаги, перенося код из стандартной темы. Но мне кажется более простым использовать только что созданный index.php , сохранив его как single.php . Откройте single.php из стандартной темы и скопируйте теги шаблона в нужные места. Далее подключите comments_template . На следующем скриншоте отображены внесенные мною изменения:

    16. Page.php

    Теперь новый single.php сохраните с названием page.php . Уберите дату записи, форму комментариев, ссылки следующий/предыдущий. Вот, собственно, и всё — ваш шаблон page.php готов .

    17. Удаление файлов HTML

    Удалите все файлы HTML из папки glossyblue (они нам больше не понадобятся). Технически этого достаточно для создания базовой темы WordPress. Вы, наверное, заметили, что в стандартной теме больше PHP-файлов. Что же, на самом деле, они вам не так уж необходимы, если требуется простая тема. Например, если search.php или 404.php не будет в папке темы, WordPress автоматически использует index.php для отображения страницы. Читайте Template Hierarchy для более подробного рассмотрения.

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

    А теперь последний пример — я покажу вам как использовать Page Template для создания страницы Архива, которая будет содержать список всех записей на вашем блоге (удобно для карты сайта). Скопируйте archives.php из папки стандартной темы. Удалите ненужный код и получите что-то вроде этого:

    Тут я использовал query_post ( showposts=-1 означает «отобразить все записи»), чтобы перечислить все записи.

    Теперь зайдите в панель администратора, создайте новую страницу и назовите её Archives. В выпадающем списке шаблонов выберите Archives.

    Дополнительная литература:

    Просмотрите список Плагины WordPress, возможно, они покажутся вам полезными. Для более углублённого изучения читайте WordPress Theme Hacks.

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

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

    Для начала работы понадобится базовое знание HTML и CSS. Если вы знаете азы языка программирования PHP , будет легче. Но если нет, в тексте будет пара подсказок и вы сможете сориентироваться.

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

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

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

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

    Когда вы установили WordPress, зайдите в панель администратора. Скорее всего, она будет по адресу:

    Давайте создадим новую запись:

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

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

    Создаем минимально возможную тему WordPress

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

    Чтобы приступить к созданию темы, откройте на компьютере папку с WordPress. Например,

    Создаем там папку для нашей темы. Например, назовем ее tema1 .

    Откройте редактор кода Geany — он находится по адресу C:\Prog\Geany\GeanyPortable.exe

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

    Как сверстать тему для WordPress

    Введение

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

    Для начала в папке themes создадим папку нашего шаблона «whitesquare». В ней будет находиться папка images и два необходимых пустых файла index.php и style.css.

    Следующим шагом нужно добавить скриншот нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы whitesquare с именем screenshot.png.

    После этого мы уже можем использовать нашу тему. Зайдите в панель администратора по адресу https:///wp-admin, а затем в управление темами (Appearance -> Themes). В списке уже должна появиться наша тема whitesquare. Наведитесь на тему и нажмите «Activate».

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

    Предварительный осмотр

    Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также на всех страницах, кроме главной, есть сайдбар слева. Для того чтобы руководство было более универсальным, давайте страницы главного меню оформим как «страницы WordPress» (page), а страницы подменю как «посты блога WordPress» (post) с комментариями. Главную же страницу сделаем как отдельную страницу (front-page) с собственной разметкой. Здесь надо отметить, что, несмотря на то, что страницы WordPress могут быть реализованы двумя способами (как страницы или как посты) в базе данных они различаются только типом, однако при создании шаблонов они обрабатываются немного по-разному. В этом вы сможете убедиться чуть ниже.

    Структура страниц

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

    Давайте начнем со структуры страниц. Прежде чем добавлять страницы, нужно сначала зайти в настройки и указать стиль ссылок: Settings -> Permalink settings -> Post name. Это позволит сделать ссылки в виде «https://site_name/page_name».

    Добавление страниц осуществляется через панель администратора: Pages -> Add new. Для каждой страницы в области Page Attributes в поле Order укажите цифрой порядок страницы в главном меню.

    После добавления, список страниц должен выглядеть вот так:

    Когда все страницы будут добавлены, нужно указать, что страница Home будет главной. Для этого зайдите в меню Settings -> Reading и в поле Front page displays укажите: A static page -> Home.

    Header.php и Footer.php

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

    Внутри тега head мы установили кодировку, указанную в WordPress, заголовок страницы и pingback (для связи с другими сайтами). В последней строке вызываем команду wp_head(), которая добавляет заголовки WordPress. Также открываем блок «wrapper».

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

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

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

    Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.

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

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

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

    Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.png и images /h1-bg.png. Далее добавьте немного базовых стилей в файл style.css:

    В результате должна получиться вот такая картина:

    Логотип

    После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.png. В шаблон шапки, в файле header.php вставьте разметку для логотипа:

    Форма поиска

    WordPress позволяет достаточно гибко сохранять блоки кода в отдельные файлы, а затем использовать их в нескольких разных местах. Рассмотрим пример на нашей форме поиска.
    В папке темы создайте новый файл searchform.php и сохраните в него код формы поиска:

    А в файл стилей запишите стили для формы:

    Всё, что осталось сделать – это подключить searchform.php внутри header.php.

    Навигация

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

    После этого, в панели администрирования в пукте меню Appearance появится подпункт Menus, в котором нужно нажать на ссылку Create new menu, ввести имя меню «top-menu», выделить страницы из левой колонки и добавить их в меню кнопкой Add to menu.

    Теперь, когда меню создано, нужно его показать на страницах сайта. Для этого добавьте в конец header.php следующий код:

    Функция wp_nav_menu отобразит меню с именем «top-menu» и css классом «top-menu».

    После этого меню уже появится на страницах но без стилей. Стилизуем его:

    Футер

    Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images

    images/footer-logo.png – логотип футера
    images/social.png – спрайты больших иконок
    images/social-small.png – спрайты маленьких иконок

    Далее делаем вёрстку в файле footer.php:

    И прописываем стили в style.css:

    В итоге главная страница сайта должна выглядеть вот так:

    Главная страница

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

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

    Для главной страницы создайте новый файл front-page.php в папке темы. Добавьте в него следующий код:

    Он отличается от кода page.php только тем, что в нем нет заголовка страницы.

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

    Прежде, чем добавить контент главной страницы – необходимо нарезать все изображения этой страницы и добавить их в библиотеку WordPress через меню Media -> Library. Назовём эти изображения так:

    home-1.png
    home-2.png
    home-3.png
    home-4.png
    home-5.png
    clients-1.png
    clients-2.png
    clients-3.png
    clients-4.png
    clients-5.png
    clients-6.png
    clients-7.png

    Далее, перейдите в панели администратора к форме редактирования главной страницы Pages -> Home -> Edit Page и в поле text введите содержимое страницы:

    Не забудьте поправить пути до картинок. Они зависят от даты добавления.

    Теперь осталось стилизовать данный код.

    Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехались. Это связано с тем, что редактор WordPress добавил пустые параграфы в наш код в местах перевода строк. Чтобы решить эту проблему, создайте в папке темы файл functions.php и поместите в него код:

    После этого, главная страница должна отобразиться правильно.

    Сайдбар

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

    Для этого создайте файл sidebar.php и поместите в него следующий код:

    Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов. Для полноты картины в качестве подменю предлагаем показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали меню. При создании подменю в разделе админки Appearance -> Menus создадим новое меню с именем aside-menu. Чтобы добавить в него посты, кликните наверху в Screen options и отметьте галочкой Show on screen: Posts. Блок карты особых вопросов не вызывает.

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

    Далее нам нужно добавить стили для вёрстки:

    Ну и в заключение, добавьте несколько постов в наш блог. Делается это в панели администратора на вкладке Posts -> Add New. Мы добавили точно такие же названия, как были в psd макете.

    Страница About us

    Теперь, когда у нас готов шаблон для внутренних страниц, давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в в медиа библиотеку. Назовите изображения вот так:

    about-1.png
    about-2.png
    team-Nobriga.jpg
    team-Pittsley.jpg
    team-Rousselle.jpg
    team-Shoff.jpg
    team-Simser.jpg
    team-Tondrea.jpg
    team-Venuti.jpg
    team-Wollman.jpg

    Далее перейдите в редактирование страницы в панели администратора и добавьте код:

    И стили в style.css:

    Шаблон поста

    После предыдущих действий, на нашем сайте уже доступны все страницы, кроме страниц с постами. За отображение одиночных постов отвечает шаблон single.php. Создайте его со следующим содержимым:

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

    Страница поиска

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

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

    Страница архива

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

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

    Заключение

    На этом создание шаблона WordPress закончено. Готовый проект можно скачать здесь.

    WordPress. Основы создания тем

    • Тема: WordPress
    • Время ролика: 16:31
    • Cложность: легкая
    • Автор: Андрей Кудлай

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

    Мастер Йода рекомендует:  Материалы по криптографии

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

    Урок 2. Стили и скрипты. Меню

    • Тема: WordPress
    • Время ролика: 30:46
    • Cложность: легкая
    • Автор: Андрей Кудлай

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

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

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

    Урок 3. Фреймворк Unyson

    • Тема: WordPress
    • Время ролика: 06:58
    • Cложность: легкая
    • Автор: Андрей Кудлай

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

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

    Фреймворки для WordPress имеют в арсенале конструктор страниц и в данном уроке мы установим один из таких фреймворков – Unyson. Также мы установим необходимые расширения из его комплекта – это слайдер и конструктор страниц.

    Урок 4. Слайдер и секции Главной страницы

    • Тема: WordPress
    • Время ролика: 32:57
    • Cложность: легкая
    • Автор: Андрей Кудлай

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

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

    Урок 5. Страница About

    • Тема: WordPress
    • Время ролика: 21:28
    • Cложность: легкая
    • Автор: Андрей Кудлай

    Данный урок мы отведем под реализацию еще одной страницы, предполагающей наличие нескольких секций, — это страница About. При этом одна из секций однозначно предполагает использование сетки – это секция Our Team. В данной секции выводятся сотрудники команды.

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

    Урок 6. Страница контактов

    • Тема: WordPress
    • Время ролика: 30:44
    • Cложность: легкая
    • Автор: Андрей Кудлай

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

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

    Урок 7. Страница блога

    • Тема: WordPress
    • Время ролика: 19:37
    • Cложность: легкая
    • Автор: Андрей Кудлай

    В этом уроке мы поработаем с еще двумя шаблонами темы WordPress – это шаблоны index и single. Первый шаблон будет использован для показа последних записей (новостей, статей) сайта. Ну а второй шаблон используется WordPress для показа отдельной записи.

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

    Урок 8. Локализация темы

    • Тема: WordPress
    • Время ролика: 13:37
    • Cложность: легкая
    • Автор: Андрей Кудлай

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

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

    Видео презентация курса «WordPress-Мастер. Разработка тем для 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.

    Обязательно укажите хотя бы один надежный сервис слежения за обновлениями в разделе «Сервисы обновления». В этом случае движок будет автоматически уведомлять поисковые системы о публикации новых материалов. Например, выберите сервис https://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 доверьте специалистам «Текстерры».

    Создание темы для WordPress. Первые шаги.

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

    Основа любой темы — файлы style.css и index.php

    Для начала создайте какую-нибудь папку в /wp-content/themes — это и будет ваша будущая тема, я например создал misha123 . Каждая тема должна содержать по крайней мере 2 файла — это index.php и style.css — создаём их внутри этой папки.

    Если вы забили на style.css , то в админке во Внешний вид > Темы ожидайте такой ошибки:

    Если вы забили на index.php :

    Тут WordPress ещё что-то болтает про дочерние темы, не обращайте внимания, вам про них ещё рано читать.

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

    На самом деле ни один из этих параметров не обязателен! И так всё прокатит. Например как тут:

    Не исключаю, что кого-то такой вариант устроит, но только не меня, сейчас я просто скопирую предыдущий код в начало style.css темы и вот что у меня получится:

    Установка изображения темы

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

    Для того, чтобы это исправить, мы просто создаём файл screenshot.png и отправляем его прямиком в папку с темой (рекомендуемое разрешение 1200px на 900px).

    Что касается расширения файла, то сгодится и jpg и gif, и jpeg, но в официальном Кодексе WP рекомендуется всё же использовать screenshot.png .

    Вот, другое дело:

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

    Хоть и не обязательный, но по факту главный файл темы — functions.php

    Трудно представить тему для WordPress, в которой отсутствует файл functions.php , он используется для включения каких-либо функций темы, например регистрации сайдбаров, также он сам может содержать какой-то дополнительный функционал, ну либо файлы, подключенные в него через include() / require() .

    Ах да, я не упомянул? В этом уроке я предполагаю, что у вас есть базовые знания PHP, если нет, то идём читать это.

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

    Главное правило по functions.php — сам по себе файл не должен ничего выводить! �� То есть никогда! ��

    Это самый распространённый косяк.

    Хедер и футер (шапка и подвал)

    Теперь напишем что-нибудь в файле index.php

    Как видите, я просто указал кодировку, вставил таблицу стилей, хоть и не совсем правильно при помощи get_stylesheet_uri() и написал в теле документа «Привет мир!»

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

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

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

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

    В WordPress можно:

    • добавлять и редактировать текст;
    • размещать видео и фото в заданной части сайта;
    • настраивать воспроизведение видео.

    О том как это сделать, смотрите на видео и в текстовой инструкции ниже.

    Видео-инструкция по созданию страницы

    В этой статье рассмотрим как:

    Создание статической страницы в WordPress

    Чтобы создать новую страницу, нажимаем вкладку «Страницы» в колонке слева. По умолчанию создается образец страницы Sample page.
    Модифицируем страницу с помощью кнопки «Изменить». Изначально ссылки для управления страницей не видны. Чтобы ссылки отображались, наведем курсор мыши на строку Sample page.

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

    Как следить за изменениями на странице

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

    Изменяем текст и заголовки с помощью клавиш редактирования свойств текста.

    Как добавить картинку на страницу

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

    Чтобы загрузить файл с компьютера, нажимаем вкладку «Загрузить файлы». Файл сохранится в библиотеке.
    В нашем примере ограничение по размеру файла составляет 64 МВ. Но у каждого хостинг-провайдера установлено свое ограничение на максимальный размер файла. В cPanel, изменить ограничение можно с помощью редактирования upload_max_filesize в файле php.ini. Если у вас другая панель и возникли вопросы, обратитесь к своему хостинг-провайдеру.

    Если размер файла больше лимита, используем прямую ссылку с сайта, где лежит картинка или видео. Для этого на нужном изображении нажимаем правой клавишей мыши и выбираем «Копировать URL картинки».

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

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

    Как добавить видео на страницу

    В меню «Страницы» в колонке слева выбираем вкладку «Добавить новую» и создаем новую страницу.

    Добавляем название в раздел заголовка и вставляем ссылку на видео в окно визуального редактора.
    Нажимаем кнопку «Опубликовать».

    Как сделать страницу главной по умолчанию

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

    Как отключить комментарии и обсуждения к страницам

    WordPress по умолчанию добавляет возможность комментировать каждую страницу вашего сайта. Комментарии можно отключить:
    Выбираем нужную страницу и нажимаем ссылку для управления страницей «Изменить». Справа вверху нажимаем кнопку «Настройки Экрана»

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

    Вы можете заказать украинский хостинг или хостинг в США с программой Softaculous. Она автоматически устанавливает популярные CMS.

    WordPress для чайников

    Вторая версия курса по работе с WordPress для новичков

    Как сделать статическую главную страница сайта

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

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

    В материале этой инструкции поговорим о создании статической главной страницы. В конце будет ещё и видео! Поехали! ��

    Предупреждение

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

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

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

    Введение

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

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

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

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

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

    Тут есть нюанс: т.к. мы с вами убираем посты блога с главной страницы, нам ещё предстоит создать отдельную страницу с названием «Блог», например. Она будет использоваться для вывода ваших записей.

    Итого, после этих операций у вас будут две страницы: «Главная» и «Блог», ярлык можете выбрать сами. Я предпочитаю использовать «glavnaya» и «blog», просто и понятно.

    Установка главной страницы

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

    Настройка статической страницы

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

    Устанавливаем главную и блоговую страницы

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

    Советы

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

    Используйте существующую страницу

    На самом деле, можно не создавать специально главную страницу, а использовать для этого одну из существующих, например, «О компании» или «Услуги». Это оптимальный вариант для сайта-визитки.

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

    Ссылка на блоговую страницу

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

    Обещанное видео

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

    Буду рад услышать ваши вопросы в комментариях! ��

    Если вы нашли ошибку — выделите фрагмент текста и нажмите Ctrl+Enter.

    Добавить комментарий