Создаем тему 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 и тем более в их адаптации есть уйма тонкостей, но общий принцип построения и вёрстки остаётся неизменным.

WordPress и статические html страницы

Янв 11 2020 Published by igor under WordPress

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

Зачем нам это все нужно?

Вопрос, конечно, интересный. Создавая статические странички вы можете создать профессиональный веб сайт (с блогом или без блога). Все функции и плагины будут работать и на наших страницах. Когда я сделал свой первый сайт, а был он на WordPress, то решил работать с одной партнеркой. Я хотел поставить витрину их магазина себе на сайт, но она никак не желала интегрироваться в вордпресовскую страницу. Обратился в суппорт с вопросом: как бы мне, господа хорошие, подключить витрину к вордпрессу? Последовал ответ: никак. Партнерку мне все-таки удалось прикрутить к блогу. Но сколько было лишнего гемороя, танцев с бубном. Сейчас с подобной проблемой я бы справился за 10 минут

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

Как редактировать CSS сайта WordPress

Вступление

Изменить оформление сайта, можно в файлах активной темы WordPress, а именно в файле под названием style.css. Это простой текстовой файл в расширении CSS. Переводится CSS как Cascading Style Sheets — каскадные таблицы стилей. Согласен, перевод мало о чем говорит. Какими способами можно редактировать CSS сайта WordPress пойдет речь далее.

CSS это

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

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

Я не собираюсь обучать основам CSS, это отлично делают на специальных сайтах. Нам понадобиться только справочник HTML: https://htmlbook.ru/ .

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

Где лежит файл style.css WordPress

Несколько прописных истин:

  • Каждая тема WordPress имеет свой файл определяющий ее внешний вид.
  • Редактирования файла style.css одной темы не затрагивает другие темы установленные на сайт;
  • Перед редактированием любых файлов активной темы, сделайте резервную копию сайта, на случай фатальных ошибок редактирования и возвращения сайту рабочего состояния.

А лежит файл style.css WordPress в папке с темой (шаблоном) WP. Полный адрес, одинаков для всех тем: wp-content/themes/название_темы/style.css.

Три способа редактировать CSS сайта WordPress

Предложу три варианта редактирования файла style.css.

Редактирование из панели администратора

Вам, наверное, известно, что система WordPress имеет внутренний редактор файлов установленных тем. Войти в него можно из консоли сайта через вкладку: Внешний вид→Редактор.

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

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

Редактирование файла style.css по FTP

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

  • Входите в каталог сайта по FTP;
  • Добираетесь до wp-content/themes/название_темы/style.css и копируете его на компьютер;
  • Далее редактируете его в текстовом редакторе типа Notepad++, сохраняете, оставляя оригинальную копию, и заливаете обратно в каталог. Согласен, немного дольше, но безопаснее и удобнее. Можно спокойно почитать файл и не спеша разобраться с его синтаксисом.

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

Дочерняя тема WordPress

Система WordPress позволяет создавать дочерние темы, для родительской активной темы. Дочерняя тема может полностью быть копией родительской темы или с помощью функции import, «забирать» и переопределять стиль родительской темы. То есть, после создания и активации темы наследницы редактируется файл style.css дочерней темы и изменения не пропадают после обновления шаблона. О дочерней теме я писал подробную статью: Зачем нужна дочерняя тема WordPress.

На этом принципе основан и третий способ редактирования стилей.

Редактирование файла style.css с помощью плагинов

Есть несколько плагинов для улучшения редактора файлов темы. Для редактирования стилей мне нравится плагин Jetpack. О плагине я писал подробную статью: Плагин Jetpack заменит 33 плагина WordPress. Плагин очень большой и для редактирования стилей темы нужно активировать модуль Custom CSS.

После его активации в меню консоли в пункте Внешний вид появляется вкладка «Редактировать CSS».

редактировать CSS сайта WordPress

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

Как понять, что нужно редактировать

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

Самый простой инструмент, это инструмент в любом браузере: «Просмотр кода элемента» в Chrom. В других браузерах название похожее. Доступ к инструменту через правую кнопку мыши или короткими клавишами (Ctrl+Shift+I).

Показываю, как им пользоваться:

Например, хотим поменять заголовок сайта.

  • Наводим на него мышь, через правую кнопку открываем «Код элемента»;

редактировать CSS сайта WordPress начало

  • Видим код HTML в правом поле и код CSS в левом поле;
  • Можно «наживую» поиграть с кодом CSS и сразу посмотреть, как это выглядит;
  • Чтобы открыть CSS в основном поле, жмем на название файла CSS (на фото цифра 2).
Мастер Йода рекомендует:  На смену элементарному блоку в РСЯ приходит два новых типа контекстных блоков

редактировать CSS сайта WordPress

Для примера, я поменял онлайн размер шрифта названия.

Создание простой темы для 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.

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

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

Необходимые условия

Вам нужен сайт WordPress и статический шаблон HTML.

Мы будем использовать эту простую целевую страницу и наш тестовый сайт, созданный на основе GPL WordPress шаблона WildRide.

Создайте пустую папку

Прежде всего необходимо создать новую пустую папку в корневом каталоге вашего сайта WordPress. Как правило, он находится здесь: /public_html/.

Наш пример является дополнительным доменом, поэтому имеет адрес /public_html/wildride1/. Таким образом, расположение нашего HTML шаблона будет /public_html/wildride1/landing/, где «landing» это имя папки с нашим шаблоном. Страница будет доступна на https://wildride1.trinqt.com/landing/.

Существует много способов для загрузки файлов на ваш хостинг. Вы можете использовать автономный файловый менеджер (например, Total Commander или FileZilla), однако в нашем примере мы будем использовать браузер на основе файлового менеджера, доступного в CPanel по умолчанию.

Шаг 1: Перейдите в CPanel и откройте файловый менеджер.

Шаг 2. Создайте пустую папку в корневом каталоге вашего сайта WordPress.

Загрузите свой статический HTML шаблон

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

Шаг 3: Извлечение только файлов шаблона без ресурсов, скриншотов, документации и т.д. В нашем случае нам необходимо содержимое папки «site».

Шаг 4. Переименуйте файл index.html в index.php.

Шаг 5. Добавьте все файлы в архив .zip.

Шаг 6. Теперь переходим в файловый менеджер и загрузите свой файл .zip в только что созданную папку.

Шаг 7. Когда все сделано, кликните правой кнопкой мыши на .zip файле и выберите «Извлечь».

Шаг 8. Удалите .zip файл.

Вы можете проверить окончательные результаты здесь : https://wildride1.trinqt.com/landing/.

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

В завершение

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

Как создать сайт на 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 вашей темы, но все делается прямо в браузере.

Мастер Йода рекомендует:  Создание приложения для шифрования файлов с помощью Javascript

Шаг № 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

Введение

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

Для начала в папке 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

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

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, вы можете попробовать разобраться в уже готовых (именно так делал я). Но дело в том, что в них иногда столько всего понапихано, что это не всегда бывает легко .

Основа любой темы — файлы 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(), а перед закрывающимся тегом

Как простой HTML шаблон сверстать под WordPress

Наконец то я решился сверстать уже наш тестовый шаблон из HTML в WordPress. Ура 🙂 Теперь я хочу рассказать и показать Вам, дорогие читатели, сам процесс вёрстки. Как оказалось, что он не такой уж и сложный. В общем я понял, что каждый новый шаблон даётся на много легче чем прошлый.

Перед тем чтобы начать давайте вспомним с чего всё начиналось:

Ну а теперь давайте посмотрим сам результат.

Демо ι Скачать

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

Локальный сервер

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

Подобных серверов на просторах интернета огромное количество. Я, например, пользуюсь сервером Денвер. Он прост в установке и в настройке. Как его установить и настроить Вы сможете найти на официальном сайте https://www.denwer.ru там же Вы сможете его и скачать.

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

Браузер Опера

После того как WordPress уже работает на Вашем компьютере, нам нужно установить, если у Вас её нет, Оперу не выше 12 версии, так как после того как Опера перешла на Вебкит, она лишилась HTML редактора, что очень плохо.

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

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

Вступление

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

Самый сложный был первый шаблон, в который нужно было вставлять код отдельно. Ох и намучился я. Но всё же получилось. А второй шаблон я уже делал по первому и так далее.

Файлы

Теперь нам нужно создать файлы в которые мы потом будем помещать весь код шаблона. Для начала создайте новую папку и назовите её как угодно Вам. Открываем папку и создаём ещё одну папку под названием images. В этой папке у нас будут храниться все изображения шаблона. А изображения нужно скопировать с нашего HTML шаблона в папку images будущего шаблона для WordPress.

После этого создаём следующие текстовые файлы и не забываем менять формат *txt на формат *php. Вот полный список файлов:

  • archive.php
  • comments.php
  • footer.php
  • functions.php
  • header.php
  • index.php
  • page.php
  • search.php
  • sidebar.php
  • single.php

И ещё не забываем создать файл style.css обратите внимание, что расширение у него должно быть именно CSS, в этом файле будут находиться все стили шаблона.

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

header.php

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

А вот сам код, который должен содержать этот файл:

отвечает за вывод заголовка для блога и заголовков записей которые Вы создаёте.

За вывод верхнего меню служит вот этот код:

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

Всё, пока с этим файлом закончили, переходим к следующему.

index.php

Этот php файл отвечает за вывод записей на главной странице блога. Вот, что в него входит:

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

sidebar.php

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

footer.php

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

single.php

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

archive.php

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

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

search.php

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

comments.php

Выводим комментарии на сайте

page.php

Выводим содержание страниц на блоге. Например, такие как «Контакты» или «Карта сайта»

Он такой же как и single.php.

functions.php

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

К каждому коду я оставил комментарии какой код за что отвечает.

Всё, теперь мы сделали большую часть работы, теперь нам осталось немного отредактировать стили CSS, а также добавить некоторые строчки.

Стили CSS

Берём все стили с шаблона, который мы недавно делали и копируем в файл под названием style.css.

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

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

Теперь нам нужно немного изменить стили выпадающего меню, ищем строчку

#dropdown_nav .sub_nav

И класс .sub_nav меняем на ul li ul в итоге вот что должно получиться:

Ну а теперь давайте я Вам представлю весь, уже готовый CSS код, который Вам нужно скопировать:

Установка шаблона

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

Выделите все файлы, затем нажмите правой кнопкой мыши и в выпадающем меню выбирайте «Добавить в архив»:

Затем выбираем разрешение .ZIP и нажимаем OK.

Всё! Наш шаблон готов для установки! Теперь Вы его можете установить и протестировать.

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

Демо ι Скачать

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

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

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

В WordPress можно:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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