Создать шаблон для WordPress проще, чем можно подумать. Для этого не надо обладать огромным опытом разработки дизайна или программирования сайтов. В этой статье расскажем об основах создания с нуля собственных тем WordPress.
Зачем вообще может понадобиться создание собственного шаблона WordPress, когда можно воспользоваться имеющимися в базе заготовками? Вот какие причины могут подтолкнуть к этому:
- Можно получить уникальный сайт или лэндинг, отличный от конкурентов. Учитывая миллионы блогов, построенных на этой CMS, каждый типовой дизайн используется как минимум сотню раз.
- Полная свобода действий на этапе разработки. Можно добавлять собственный функционал с нужными именно вам рабочими элементами.
- Можно применять разные дизайны для разных разделов сайта, что невозможно при использовании готового шаблона.
- Можно сделать несколько видов и предоставить посетителям возможность переключаться между разными темами, что повысит интерес и лояльность к веб-ресурсу.
- Простота работы на Вордпресс делает ее доступной для многих (в помощь будут видео-уроки в интернете). А значит, собственноручная разработка главной или создание дочерней темы позволит сэкономить деньги на привлечении сторонних дизайнеров и программистов.
- Можно воспользоваться возможностью дочерних тем – когда корректировки вносятся в дублеры таблицы стилей style.css, а главный файл при этом остается нетронутым. Это позволяет быстро отменить изменения, если они окажутся неудачными, а также не терять наработки при обновлении основной темы.
Краткая инструкция
Конечно, пройти полное обучение тому, как создать шаблон страницы, с помощью одной статьи не получится. Для начала важно понять основы – как делаются самые простые темы. На основе них уже можно заняться «творчеством» и создать лэндинг или сайт по своим желаниям. Сейчас дадим вам краткую шпаргалку с поэтапными инструкциями – она поможет понять, как происходит создание сайта.
Шаг первый: подготовительные работы
Перед началом работ надо убедиться, что у вас есть текстовый редактор (самым простым является Блокнот или Nodepad++, тем более скачать их можно бесплатно). Следующий шаг – установка движка WordPress и набора Denwer на локальный компьютер. Денвер – это пакет важных инструментов для программистов. С помощью них значительно облегчается и ускоряется процесс разработки и внесения изменения сайтов. Как его устанавливать, подскажет это видео:
Шаг второй: создают папку новой темы
Переходим в нужную директорию. Она чаще всего имеет следующий путь: . Здесь хранятся все темы – и стандартные, и произвольные. Заходим в нее создаем новую папку. Называем ее, например, «MyFirstTheme».
Теперь переходим в новую папку и обязательно добавляем два файла, сделанных через Nodepad++ или другой редактор. Это index.php и style.css. Пока эти документы пусть останутся пустыми, потом мы еще займемся их наполнением. Еще добавьте в «MyFirstTheme» сюда папку images. куда можно будет добавлять картинки для оформления шаблона.
В последствии в «MyFirstTheme» можно добавлять шаблоны для отдельных частей сайта: боковой панели (sidebar.php), сайта (header.php), записей на страничках (single.php), комментариев (comments.php) и пр. Набор дополнительных файлов зависит от структуры, которую вы запланируете для своего веб-ресурса.
Шаг третий: наполнение index.php
Первое, что надо сделать – заполнить индексный файл (index.php). Вот пример самого простого кода, по которому у сайта будет четыре области: header, main, sidebar и footer.
Site Title
В файле можно прописать любые элементы, которые вы хотите видеть у себя на сайте. Больше информации о прописывании кода index.php для создания тем в WordPress можно получить из видео:
Шаг четвертый: заполняем и style.css
Теперь надо открыть style.css, добавить и заполнить следующие поля (вписать вместо *** собственную информацию о сайте и владельце). Введенные данные будут отображаться в админке.
/*Theme Name: ***
Theme URI: http:// ***
Author URI: http:// ***
Description: ***
В последствии в этот файл можно будет вводить разные данные и правила, определяющие внешний облик страниц. Например:
(информация в /**/ — это комментарии, а не части кода)
На данном этапе пока рано задавать строгие параметры стилей, но при дальнейшей работе с файлом вам пригодится этот видеоурок:
Шаг пятый: разбиваем файлы
Все элементы, указанные в index.php следует продублировать отдельными файлами. В шаге первом в примере помимо главной части main были указаны header, sidebar и footer – следовательно, для них создаем свои документы в формате.php.
Например, создаем файл header.php, открываем index.php. находим соответствующий участок кода и вставляем его в новый файл. Это будет:
Site Title
Тоже самое проделывается для остальных частей. Это надо сделать для более легкой навигации. Когда элементов будущего сайта будет много, то отдельные файлы помогут лучше ориентироваться для проверки или внесения изменений.
Чтобы главный индексный файл был согласован с дополнительными, в index.php под блоками для каждой части надо прописать следующее:
Ниже приведен список стандартных файлов шаблонов, используемых WordPress. Их можно не использовать или добавлять свои разделы:
- Header – стиль шапки вашего сайта.
- Comments – шаблон для создания комментариев.
- Home – тема для главной страницы.
- Page — определяет тему, если создадите отдельные странички на сайте
- Category – шаблон для разбивки на категории
- Date – определяет стиль вывода даты-времени.
- Archive – шаблон для архивного раздела со старыми материалами.
- Search – файл, в котором указываются параметры для поиска на сайте.
- 404 — шаблон для страницы, на которой сообщается об ошибке 404 Not Found.
- Footer – определяет стиль подвала вашего сайта.
Когда впоследствии вы будете дорабатывать каждый элемент, понадобится наглядный видеоурок. Вот несколько подборок, которые могут вам помочь:
Шапка в header.php:
Добавление контента:
Стилизация комментариев:
Подвал на сайте:
Как можно вносить изменения без опасений
Когда надо вносить изменения на страницы сайта, то есть риск что-то неправильно прописать и не суметь «откатить» назад. Также может случиться так, что внесения в таблицу стилей исчезнут при обновлении главной темы.
Чтобы этого не произошло, можно создать дочернюю тему WordPress (подтему) – это дублер файла стилей style.css, не затрагивающий главный файл (изменения в одном не отменяют обновления в другом).
Создание дочерней темы WordPress не составит никакого труда. Надо сделать новую папку в основном каталоге C:\WebServers\home\localhost\www\НАЗВАНИЕ_ЗАДАННОЕ_ПРИ_УСТАНОВКЕ\wp-content\themes . В новой папке делаем свой файл style.css с вот таким содержимым:
Theme Name: НАЗВАНИЕ ТЕМЫ
Template: НАЗВАНИЕ ПАПКИ В ДОЧЕРНЕЙ ТЕМОЙ
Theme URI: ЗАПОЛНИТЬ
Description: ЗАПОЛНИТЬ
Author URI: ЗАПОЛНИТЬ
/* импортируем стили родительской темы */
@import url(«../НАЗВАНИЕ/style.css»);
/* Свои дополнительные стили */
Foo{ color:red; }
Теперь можно в админке зайти во «Внешний вид›Темы» и активировать дочерний шаблон. В дальнейшем можно работать в новом файле. В дополнение небольшая видео-презентация на тему дочерних шаблонов:
(систем управления контентом). Различных CMS очень много. Самой популярной, удобной и лёгкой в освоении для новичков по праву считается бесплатная CMS Wordpress . На Wordpress создаётся подавляющая часть автономных блогов, для простых информационных и новостных сайтов он также прекрасно подойдёт. Создать сайт на Wordpress - лучший способ рассказать о себе интернету.
Рассмотрим в этой статье, как быстро создать блог или сайт на Wordpress.
Для сайта на Wordpress необходим хостинг с поддержкой php и MySql. Лучше всего использовать платный (не слишком дешёвый) хостинг, т. к. Wordpress достаточно требователен к ресурсам сервера. Но если вы хотите просто попробовать вести блог и готовы смириться с различными ограничениями и наличием посторонней рекламы, можно зарегистрироваться и бесплатно получить блог на Wordpress .
Итак, предположим, что вы уже купили домен и хостинг. Что делать дальше?
1. Установка Wordpress
Т. к. Wordpress - популярная CMS, на большинстве современных хостингов он входит в список предустановленных CMS, т. е. можно установить сразу из панели управления хостингом. Панели управления хостингом могут выглядеть по-разному, но, как правило, нужную иконку легко можно найти. Например, в панели управления хостинга Бегет она выглядит так:
В популярной панели управления CPanel, которая установлена на многих хостингах, например, хостинге Авахост , она может выглядеть так:
Softaculous - популярный установщик скриптов и CMS (более 250 штук). Найти Вордпресс среди них нетрудно - он на самом видном месте:
Жмём на кнопку установки:
Вводим необходимую информацию и жмём "Install":
Обычно установка занимает не более 1-2 минут. После этого, зайдя на главную страницу вашего сайта, вы увидите стандартный пример поста "Hello world!" (который можно отредактировать или удалить) и пример комментария к нему. Нажав "войти" (или зайдя по адресу адресвашегосайта/wp-login.php либо адресвашегосайта/wp-admin/ ) и введя логин и пароль, заданные при установке, вы попадёте в административную панель Ворпдпресса.
В том случае, если на вашем хостинге нет предустановленного Вордпресса, вам придётся выполнить следующие шаги для его установки:
- Скачать дистрибутив Wordpress (например, с сайта mywordpress.ru)
- Закачать на хостинг (например, через ftp) и распаковать (либо сначала распаковать, а затем закачать на хостинг).
- Создать в панели управления хостингом базу данных Mysql, которая нужна для нормальной работы Wordpress.
- Отредактировать файл конфигурации WP-CONFIG-SAMPLE.php, внеся туда данные об имени созданной вами базы данных, логине и пароле для доступа к ней, затем переименовать его в WP-CONFIG.php
- Зайти на главную страницу сайта. Вы должны увидеть страницу установки Вордпресс. Введите на этой странице название сайта и ваш e-mail, поставьте галочку возле "Разрешить поисковым системам индексировать сайт" и нажмите кнопку "установить WordPress". На следующем шаге запишите пароль для доступа к админке вордпресса (иногда пароль предлагается ввести сразу).
2. Первоначальная настройка Wordpress
2.1 Настройка основных параметров
Итак, мы в админке Вордпресса. Для начала есть смысл изменить некоторые настройки. Нажмём "Параметры" в левом меню.
"Общие" - здесь имеет смысл проверить, правильно ли настроено время (часовой пояс) на сайте, выбрать формат отображения даты и времени по своему желанию.
"Написание" - обычно здесь ничего менять не нужно.
"Чтение". В зависимости от вашего желания можно выбрать, чтобы на главной странице отображались последние записи (формат блога), либо какая-то постоянная информация. Можно также выбрать количество записей на странице.
"Обсуждение". Здесь можно настроить комментарии и аватары. В зависимости от ваших целей можно разрешить или запретить по умолчанию комментарии к вашим записям. Если вы разрешаете комментарии, во избежание спама желательно поставить галочку напротив пункта "Автор должен иметь ранее одобренные комментарии". В этом случае комментарии от новых пользователей поступят к вам на модерацию прежде, чем появятся на сайте. Для предотвращения спама трэкбеками можно убрать галочку возле пункта "Разрешить оповещения с других блогов".
Наконец, обратим внимание на пункт "постоянные ссылки". По умолчанию адреса статей вашего сайта будут вида http://moysuperblog.ru/?p=123 Но лучше задать для них более осмысленный вид, выбрав "Название записи" (в поле "Произвольно" должно отобразиться "/%postname%/"). После каждого изменения настроек не забывайте нажимать "Сохранить изменения".
2.2 Установка плагинов
Плагины - дополнительные модули, расширяющие функциональность сайта на Wordpress. Для Wordpress существует огромное множество различных плагинов (с их помощью можно например, добавить на сайт форум, интернет-магазин, фотогалерею и т. д.). Установить плагин можно двумя способами. Можно вручную скачать плагин (желательно скачивать их, как и темы, о которых речь пойдёт ниже, только с проверенных сайтов), затем распаковать и загрузить по ftp в папку wp-content/plugins. Загруженные плагины будут видны в админке (пункт меню "плагины") и их можно будет активировать. Более простой способ установки плагинов - выбрать плагин из официального списка плагинов на сайте разработчиков Wordpress и установить их простым нажатием кнопки. Какие плагины можно установить для начала? Если вам не нужны какие-то плагины для специальных целей (например, создания интернет-магазина на сайте), можно установить, например, следующие плагины:
- RusToLat - этот плагин преобразует в латиницу адреса страниц.
- WP-DB-Backup - этот плагин позволяет регулярно делать резервные копии базы данных.
- WP Super Cache - этот плагин снижает нагрузку на сервер.
- Если вы разрешили комментарии на сайте, стоит установить плагин SI CAPTCHA Anti-Spam (или другой плагин, добавляющий капчу к форме комментария) для предотвращения автоматического спама в ваш блог.
Для установки плагина, который есть в официальной базе, выбираем "Плагины" - "Установить новый" и вводим название плагина в форму для поиска:
В списке найденных выбираем тот самый плагин, жмём на ссылку "Установить", а затем на ссылку "Активировать плагин".
Точно так же устанавливаем и активируем другие необходимые плагины.
Некоторые плагины требуют дополнительной настройки после их установки. Например, плагин WordPress Database Backup. Чтобы его настроить, нажмите "Инструменты", затем "Резервное копирование". Вы можете сами создавать копии вручную, время от времени, но если вы часто вносите на сайт изменения, добавляете новые материалы, есть смысл настроить автоматическое создание резервных копий и отсылку их на ваш e-mail. В этом случае в настройках введите e-mail, на который нужно отсылать резервные копии базы данных и задайте расписание (например, раз в неделю). Теперь, если вдруг с вашим сайтом что-то случится (например, его взломают хакеры и всё удалят или произойдёт авария на сервере), вы всегда сможете легко восстановить все записи из последней резервной копии.
2.3 Установка темы
При помощи темы можно задать дизайн и оформление вашего сайта. Самостоятельное создание темы может занять немало времени и потребует от вас определённых знаний и навыков. К счастью, для Wordpress существует огромнейшее количество готовых тем. Как и плагины, из можно установить двумя способами - скачать с какого-либо сайта (скачивайте темы только с проверенных сайтов), затем распаковать и загрузить в папку wp-content/themes. После этого тема появится в списке доступных тем в админке ("Внешний вид" - "темы") и вы сможете её активировать. Другой вариант - выбрать из официальной коллекции тем. Для этого выберите вкладку "Установить темы", задайте необходимые фильтры и нажмите "найти темы".
Выберите понравившуюся тему, установите её, а затем активируйте. Дизайн и оформление вашего сайта сразу же поменяется.
Многие темы имеют собственные настройки, которые позволяют видоизменить оформление сайта тем или иным образом.
2.4 Настройка виджетов
Виджеты - удобный способ настроить отображение тех или иных элементов сайта в нужном порядке и в нужных местах.
Просто перетаскивайте мышкой нужные элементы в те блоки сайта, где вы хотите, чтобы они отображались (например, в левую или правую колонку, блоки внизу страницы и т. д.). Для многих виджетов, раскрыв их, можно задать дополнительные настройки:
2.5 Robots.txt для Wordpress
Для того, чтобы поисковые системы не индексировали служебные файлы и страницы вашего сайта, желательно создать файл под названием robots.txt, который нужно загрузить в корневой каталог сайта. Такой файл можно создать в блокноте, его содержание должно быть примерно таким:
User-agent: YandexBlog
Disallow:
User-agent: *
Disallow: /wp-login.php
Disallow: /wp-register.php
Disallow: /xmlrpc.php
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content
Disallow: /tag
Disallow: /trackback
Disallow: /feed
Disallow: /comments
Disallow: */trackback
Disallow: */feed
Disallow: */comments
Disallow: /?feed=
Disallow: /?s=
Allow: /wp-content/uploads/
3. Добавление материалов на сайт
Основной тип материалов в Wordpress - это записи. Записи обычно располагаются в хронологическом порядке (т. е. пользователь, зашедший на сайт, видит в первую очередь самые свежие записи и, перелистывая страницы сайта, может посмотреть их все в том порядке, в котором они были опубликованы). Кроме того, можно создать страницы, которые не будут находиться в общей хронологически упорядоченной ленте. Они обычно используются для размещения важной, редко меняющейся информации (например, можно создать страницу с информацией об авторе сайта).
Для того, чтобы рассортировать записи и помочь посетителям вашего сайта легче находить нужную информацию, в Wordpress можно использовать рубрики и метки (или, как их ещё называют, теги). Рубрики - это разделы вашего сайта, содержащие записи на определённую тему. Целесообразно при публикации каждой записи помещать её в тут или иную рубрику (или создать новую рубрику, если ещё нет подходящей). Метки дополнительно позволяют отметить записи, в которых затрагивается какой-то вопрос или предмет. При необходимости в рубриках можно сделать подрубрики, более точно выделяющие тематики записей.
Текст записи можно создать в несложном визуальном редакторе (при необходимости можно переключиться в режим html-кода).
В текст можно вставить картинку или видео, в т. ч. загрузив их со своего компьютера. В редакторе есть полезная кнопка, вставляющая тег "more". С её помощью можно отделить анонс записи от основного текста. Обычно нецелесообразно размещать полные тексты записей на главной странице и страницах рубрик. Если вставить в запись тег "more", на главной странице будут лишь анонсы записей, а полный текст можно будет прочитать, кликнув на заголовок или ссылку "подробнее".
После того, как запись готова, её можно опубликовать сразу, нажав на соответствующую кнопку, сохранить, но не публиковать, либо задать нужное время для публикации. Вы можете назначить публикацию записи, например, на завтра, и до завтрашнего дня она не появится на сайте, посетители увидят её лишь в назначенное время.
Вордпресс - очень дружественная к пользователю CMS, и, надеюсь, вам не составит труда разобраться во всех не затронутых в статье особенностях работы с ней самостоятельно. Если же это окажется для вас слишком сложным, вы можете посмотреть видеокурс по работе с этой CMS.
Вам всё ещё непонятно, как создать сайт на wordpress? Задайте вопрос на !
Сейчас объясню, как сделать из простого 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++) и в самое его начало вставьте следующие строки:
/* Theme Name: MyTheme Theme URI: http://test1.ru Author: NoName Author URI: http://test1.ru Description: Example of test Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
Как вы могли догадаться, это служебная информация о теме оформления: название, автор, описание, лицензия, версия и т. д. Правые части строк вы можете заменить на собственные, то есть задать свои авторство, версию, описание и прочие данные.
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 и замените содержащийся в нём код до блока
на следующий:
>
"> "> " type="text/css" media="screen" />Мы сделали динамическим блок
Код вызывает функцию, возвращающую языковые атрибуты в контейнер.
">
Вместо того, чтобы прописывать кодировку константой, мы вызвали функцию, которая берёт значение из настроек CMS и автоматически подставляет его в код, то есть для смены кодировки уже не придётся править файл темы.
Важная функция, обеспечивающая работу на странице стилей, плагинов и скриптов.
2. Перейдите к редактированию файла index.php. В самом его начале пропишите
,
Строчки вызывают файлы шапки, боковой панели и низа сайта.
Теперь вы можете просмотреть или даже активировать MyTheme. В результате браузер отобразит уже знакомый шаблон со статическим меню и одной-единственной страницей. Чтобы меню стало динамическим и настраиваемым, а вместо одной страницы отображались все помещённые на сайт материалы, нужно преобразовывать шаблон дальше.
Делаем динамическим верхнее меню
Пока мы имеем полностью статическую тему оформления, в том числе и с неизменным горизонтальным верхним меню. Пока его нельзя настроить из админ-панели, и если оставить код в нынешнем виде, то для вставки/удаления/переноса пунктов придётся каждый раз редактировать файл header.php , что крайне неудобно.
Чтобы не мудрствовать лукаво и не погружаться в пучину увлекательного мира программирования, зададим динамическому меню статичное название. Вместо таблицы горизонтального меню вставьте код
так, чтобы получилось следующее:
Для того, чтобы меню стало отображаться, в панели управления сайтом откройте Внешний вид -> Настроить -> Меню и либо переименуйте уже созданное меню в menu, либо создайте меню и настройте его на своё усмотрение, но обязательно присвойте ему имя menu.
Суть действий в том, что файл header.php функцией wp_nav_menu("menu=menu"); открывает меню под названием menu, которое, чтобы отобразиться, должно быть правильно названо и настроено в панели администрирования WordPress. Название menu вы можете поменять на любое другое, главное, чтобы имя совпадало и в настройках сайта, и в коде header.php .
Навигация явно куда-то съезжает, хоть и делает это красивой лесенкой. Так происходит потому, что меню нашего шаблона было неосмотрительно реализовано внутри таблицы, а надо было оформлять его списком. Частично исправить ситуацию можно, добавив в файл style.css следующий код:
#menu ul { margin: 0; /* Обнуляем значение отступов */ padding: 4px; /* Значение полей */ font-size: 18px; } #menu ul li { display: inline; /* Отображать как строчный элемент */ margin-right: 5px; /* Отступ слева */ padding: 3px; /* Поля вокруг текста */ }
Так как он прокомментирован, дополнительные объяснения вряд ли нужны. Остаётся обновить страницу и посмотреть, что список наконец-то стал горизонтальным.
Меню, конечно, можно сделать ровней и красивее, но к адаптации шаблона отношения это действо не имеет, зато крепко связано с CSS, который вы можете подробно изучить.
Завершаем «шапку»
Единственные элементы файла header.php , оставшиеся статическими - имя и описание сайта. Чтобы они брались из настроек, задаваемых в админ-панели, замените отвечающий за вывод текста в шапке код на следующие строки:
Обновите страницу - результат не заставил себя долго ждать.
Работа с файлом header.php на этом завершена, в итоге он имеет следующий код:
>
"> "> " type="text/css" media="screen" />Выводим посты
Переходим к части, содержащей основной контент страницы - редактироваться будет файл index.php .
Удалите содержимое блока right и вместо него вставьте код динамического отображения постов. Либо же удалите из файла весь код и вместо него вставьте следующее:
">
/ /А здесь нет ничего:(404
Начало цикла, благодаря которому страница будет выводить посты, пока они не закончатся.
">
Отображает заголовок поста.
/ /
Дата в формате день, месяц (сокращённо), год. Теги, комментарии.
Вывод поста.
Конец цикла при условии, что записи были.
Если же материалов нет, вывести об этом соответствующую надпись и покинуть цикл.
Вывод постраничной навигации при условии, что на одной они не помещаются.
Простой с виду код глобально изменил страницу - блог стал по-настоящему динамическим. Каждый пост можно посмотреть, ссылки работают.
Дальнейшее оформление и размещение элементов зависит только от вашей фантазии и навыков вёрстки - с отображением данных можно делать всё, что угодно, но работа над шаблоном ещё не завершена.
Добавляем виджеты
Слева от основного контента в шаблоне есть панель, на ней - блок Информация (своего рода виджет) и боковое меню. Информационный блок не должен быть статичен, а так как он очень напоминает виджет, предлагаю виджетом его и сделать. Для этого необходимо:
- зарегистрировать блок виджетов;
- вывести его в нужном месте.
Теперь подробнее.
1. В каталоге темы создайте файл functions.php. В нём хранятся функции, обеспечивающие работу шаблона. Также он может содержать и другие пользовательские процедуры.
2. Внесите в следующий код:
"MySidebar", "before_widget" => "", "after_widget" => "", "before_title" => "
", "after_title" => "
",)); ?>Этот код регистрирует блок виджетов. Вместо 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
От автора:
приветствую вас, друзья, в очередной статье, посвященной работе с WordPress. Из этой статьи вы узнаете, как создать сайт на WordPress с нуля. И это не просто слова, под фразой «с нуля» я действительно имею в виду ровно то, что и сказал. Итак, давайте приступим.
Как создать сайт на платформе WordPress
Сразу стоит отметить, что данная статья написана в первую очередь для новичков а также для тех, у кого пока что нет собственного сайта, но кто безумно хочет создать свой сайт с помощью WordPress.
Итак, представьте себе, что вы совсем еще новичок в сфере сайтостроения и никогда в жизни не слышали или имеете смутное представление о таких словах, как хостинг, ftp, html и так далее. При этом, когда вы общаетесь со знакомым вебмастером на тему создания сайта, он то и дело сыплет вот такими вот малопонятными словечками. Казалось бы впору загрустить и отказаться от идеи создать сайт самому… Но отчаиваться рано, выход есть. Можно создать сайт на базе WordPress. При этом вам не нужны знания верстки и тем более программирования, не нужно даже платить за домен и хостинг, поскольку можно создать сайт на платформе WordPress. Давайте узнаем, как это сделать.
Как создать сайт через WordPress
Итак, приступим к созданию сайта на базе WordPress. Уже через несколько минут вы получите готовый сайт, который можно наполнять, вести блог, через который можно делиться своими мыслями с друзьями и знакомыми. Идем на официальный сайт WordPress .
На главной странице мы видим заголовок, в котором действительно предлагается создать сайт на WordPress бесплатно. При этом мы можем выбрать дизайн будущего сайта из сотен тем и сайт изначально будет совместим с мобильными устройствами, что очень классно, поскольку доля просмотров сайтов через мобильные устройства растет с каждым днем.
Ну что же, воспользуемся предложением и нажмем кнопку Создать сайт. После этого мы попадаем на страницу, которая позволит привязать сайт к домену. Для тех, кто пока не знает значение слова домен, пару слов об этом. Собственно, определение домена вы можете найти в интернете. Если же говорить просто и в двух словах, то домен — это уникальное имя сайта, то самое, которое мы вводим и можем увидеть в адресной строке. Например, адрес (домен) официального сайта WordPress — wordpress.com. Именно по домену сайты и отличаются друг от друга.
Что же конкретно мы увидим на новой странице? А увидим мы варианты названий нашего будущего сайта.
Мы видим, что есть возможность как бесплатных, так и платных доменов. Второй случай нас пока что не интересует, поскольку мы договорились создать сайт бесплатно. Поэтому будем выбирать бесплатные варианты доменов, в этом случае к ним будет приписываться адрес платформы WordPress.
В строку поиска вводим желаемое название сайта, например, я введу wfm. Поскольку платформа позволяет создавать сайт бесплатно, вполне понятно, что желающих воспользоваться услугой — немало, поэтому приготовьтесь к тому, что желаемый адрес может быть уже занят или просто недоступен. В моем случае WordPress предложил такой вариант домена: wfm2015.wordpress.com
Ну что же, как говорится, дареному коню в зубы не смотрят, возьмем что дают Жмем кнопку Выбрать. На новой странице выбираем тарифный план, опять-таки, нас интересует бесплатное решение.
На новой странице создаем учетную запись, заполняя поля формы.
Как и для многих продуктов с регистрацией, от нас требуют подтвердить факт регистрации, перейдя по ссылке в письме, которое мы должны получить на указанную электронную почту.
Зайдите в свой почтовый ящик и перейдите по ссылке подтверждения. После успешного подтверждения мы должны увидеть сообщение об успехе.
Давайте опубликуем первую запись в нашем блоге, нажав кнопку Начать запись. Мы перейдем в редактор, в котором и можем писать текст статьи.
После публикации можем перейти на наш сайт — wfm2015.wordpress.com — и посмотреть написанную статью. Все получилось
Напоследок давайте попробуем сменить стандартный дизайн на что-нибудь более яркое. Для этого достаточно изменить тему, выбрав из сотен доступных. Кликаем по ссылке Мой сайт в левом верхнем углу и переходим на главную страницу управления сайтом. В меню слева выбираем меню Тему из раздела Персонализировать и подбираем тему (обратите внимание, здесь есть как бесплатные, так и платные темы).
После установки новой темы можем перейти на сайт, чтобы увидеть изменения дизайна.
Как видите, все достаточно просто. Буквально пара минут — и вы счастливый обладатель сайта на платформе WordPress, при этом не вложили в создание этого сайта ни копейки. Можете приступать к написанию статей для сайта и давать ссылку на свой личный сайт на WordPress своим друзьям.
Ну а я на этом с вами прощаюсь. Успехов!
Из этой статьи вы узнаете, как создать сайт на WordPress. С помощью пошагового руководства сделаете качественный и функциональный ресурс, пригодный для привлечения и конвертации трафика.
Почему WordPress – что это такое и 5 причин его использовать для сайта или блога
WordPress - это самая популярная система управления контентом (CMS). По данным Web Technology Surveys , на этом движке по состоянию на ноябрь 2018 года работает 32,3 % от общего числа существующих сайтов, а также 59,5 % сайтов, использующих CMS. В 2015 году WordPress использовали только 24 % ресурсов на CMS. Ниже перечислены основные причины популярности WordPress.
Бесплатный «движок» CMS WordPress распространяется по открытому лицензионному соглашению (GNU GPL). Вы можете свободно использовать этот продукт в любых целях, включая коммерческие. Практически неограниченные возможности С помощью WordPress можно создать интернет-магазин, личный блог, корпоративный сайт, информационный портал, отраслевой ресурс, галерею мультимедиа. Гибкая настройка внешнего вида и функциональности Владельцам сайтов на WordPress доступны платные и бесплатные шаблоны, с помощью которых можно кастомизировать внешний вид. А с помощью плагинов можно решать технические задачи, обеспечивать необходимую функциональность сайта. Простота администрирования Чтобы работать с WordPress, не нужны специальные знания. Принципы работы с движком понятны на интуитивном уровне. Возможность создать сайт и опубликовать первый контент в течение 5 минут Конечно, придется потратить гораздо больше времени, чтобы превратить шаблонный продукт во что-то новое и интересное. Но на первую публикацию потратите не больше 5 минут.
Ну что, решили сделать сайт на WordPress? Тогда переходите к пошаговому руководству.
Шаг № 1: как выбрать хостинг и зарегистрировать домен
Если у вас некоммерческий проект, выбирайте бесплатный хостинг. Например, делиться с миром фотографиями котиков или вести дневник молодого бодибилдера можно на платформе WordPress. Адрес сайта будет выглядеть так: primer.wordpress.com. Если реализуете коммерческий проект, например, создаете тематический блог, корпоративный сайт или планируете зарабатывать с помощью ресурса любым способом, выбирайте платный хостинг.
Чтобы выбрать надежного хостинг-провайдера, . Если на это нет времени, воспользуйтесь услугами одной из перечисленных ниже компаний:
Выбор доменной зоны не влияет на технические характеристики ресурса или позиции в поисковой выдаче. Однако теоретически этот параметр может влиять на доверие аудитории. При прочих равных пользователи охотнее верят сайтам с адресом 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 и скачайте дистрибутив.
Распакуйте архив.
Как русифицировать тему WordPress
Русифицировать тему удобно с помощью бесплатной программы Poedit . Скачайте и установите ее на компьютер. Затем скачайте на компьютер языковые файлы выбранного шаблона. Для этого потребуется доступ к FTP. Его можно получить с помощью 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 . После установки и активации надстройки интерфейс для перевода шаблонов появляется прямо в админке сайта.
Шаг № 5: решаем практические задачи с помощью плагинов для WordPress
Плагины – одна из болезней начинающих владельцев сайтов на WordPress. Едва зарегистрировав ресурс, новоиспеченные вебмастера ищут в «Яндексе» статьи типа «100 лучших плагинов для WordPress» . Они устанавливают десятки расширений. Это негативно влияет на развитие ресурса. Дело не в замедлении работы сайта, хотя избыточное число плагинов может вызывать такую проблему.
Вопрос в концентрации внимания и усилий владельца сайта. Вместо создания и публикации качественного контента он часами ищет плагины, устанавливает их и настраивает. Такой вебмастер не видит леса за деревьями: он забывает, что плагины нужны для решения конкретных практических задач.
Чтобы успешно развивать сайт, пользуйтесь плагинами с осторожностью. Устанавливайте расширения только тогда, когда хотите решить конкретную задачу. С помощью плагинов можно сделать следующее:
- Обеспечить безопасность сайта.
- Бороться со спамом.
- Оптимизировать ресурс к требованиям поисковых систем.
- Повысить функциональность и улучшить юзабилити.
Как с помощью плагинов обеспечить безопасность сайта на WordPress
Сайт подвергается двум глобальным угрозам. Первая – вы сами. Стремление к совершенству и инновациям может заставить вебмастера пойти на рискованные эксперименты с кодом и программами, которые могут привести к потере информации. Защититься от этого можно с помощью плагинов, создающих резервные копии сайта.
Вторая угроза – несанкционированный доступ к ресурсу. Злоумышленники могут пытаться получить доступ к вашему сайту, чтобы установить на него вредоносный код или просто украсть его.
Чтобы регулярно создавать резервные копии сайта, воспользуйтесь одним из перечисленных плагинов:
Чтобы установить выбранный плагин, войдите в меню «Плагины – Добавить новый». Введите название расширения в поле поиска в правом верхнем углу и нажмите «Ввод». Также вы можете скачать плагин с сайта разработчика и установить его с помощью функции «Загрузить плагин» в верхней части экрана административной панели.
Нажмите кнопку «Установить». После установки активируйте плагин. Теперь настройте параметры резервного копирования. Выберите меню «Инструменты – WP DB BackUp». Нажмите Create New Database BackUp. Вы создали резервную копию по требованию.
Настройте регулярное создание резервных копий по расписанию. Перейдите на вкладку Sheduler, включите автоматическое создание резервных копий, выберите частоту создания архивов.
На вкладке Destination включите автоматическое сохранение архива на Google Drive или отправку на электронную почту.
Чтобы защитить сайт от несанкционированного доступа, воспользуйтесь плагином Loginizer Security . Надстройка надежно защищает сайт от взлома методом перебора или брутфорсинга.
Как бороться со спамом на сайте WordPress
Плагины для борьбы со спамом актуальны, если вы пользуетесь дефолтной системой комментирования WordPress. Сторонние системы комментирования , например, Disqus, защищаются от спама самостоятельно.
Защититься от спама можно с помощью плагинов, например, Akismet или Antispam Bee . После установки Antispam Bee плагин работает в фоновом режиме. Обычно подходят дефолтные настройки, но если нужно что-то поменять, перейдите в меню админки «Настройки – Antispam Bee».
Как обеспечить SEO сайта на WordPress
WordPress – SEO-дружественная CMS по умолчанию. Но есть задачи, без которых сайт нельзя считать полностью соответствующим требованиям поисковых систем. Вот они:
- Создание и обновление карты сайта.
- Канонизация URL.
- Оптимизация title страниц.
- Автоматическая генерация мета-данных страниц.
- Блокирование индексации дублированного контента.
- Создание микроразметки страниц .
Чтобы решить эти задачи, вы установите по одному SEO-плагину из трех групп: программы для создания карты сайта, программы для технической оптимизации ресурса и программы для создания микроразметки. Для создания карты сайта используйте один из следующих плагинов:
- Google XML Sitemaps.
- Simple WP Sitemap.
- Google Sitemap.
Google XML Sitemap . Для настройки плагина перейдите в меню «Настройки – XML-Sitemap».
Начинающим вебмастерам лучше оставить настройки по умолчанию. После активации плагин создал карту сайта, добавил ее адрес в файл robots.txt и приготовился уведомлять поисковые системы об обновлениях ресурса.
Если вы считаете себя опытным вебмастером, можете изменить настройки плагина. В разделе «Дополнительные страницы» можно вручную включить в карту сайта URL, которые не были включены в нее автоматически. В разделе «Приоритет статьи» определите способ вычисления приоритетности индексирования контента. В разделах «Изменить частоты» и «Приоритеты» можете рекомендовать поисковым роботам наиболее приоритетные по вашему мнению типы контента.
Для технической оптимизации ресурса воспользуйтесь одним из следующих плагинов:
- All in One SEO Pack.
- WordPress SEO by Yoast.
- Platinum SEO Pack.
Установите и активируйте выбранный плагин, например, 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 JSON-LD Generator .
Установите и активируйте плагины 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, если публикуете обзоры, аналитические статьи, руководства. Вот пример: для публикаций в блоге «Текстерры» подходит тип разметки Article, а для дневника Екатерины Безымянной в ЖЖ подходит тип BlogPosting. Для статических страниц и страниц медиафайлов укажите тип разметки WebPage.
После сохранения настроек плагин будет автоматически добавлять на страницы сайта выбранный тип разметки. В том числе семантические данные появятся на существующих страницах. Убедиться в этом можно с помощью инструмента проверки структурированных данных Google.
Что делать, если вы публикуете материалы разного типа: лонгриды, небольшие заметки и новости? В этом случае для каждой публикации лучше выбрать подходящую разметку. Вместо надстройки WPSSO JSON воспользуйтесь плагином WP SEO Structured Data Schema.
После установки и активации плагина на странице редактирования постов появится дополнительный раздел. С его помощью можно выбрать тип разметки и указать структурированные данные.
Недостаток плагина – необходимость размечать каждую публикацию вручную. А к преимуществам можно отнести поддержку дополнительных типов разметки, например, Review, Product и Aggregate Ratings. Бесплатная версия WPSSO JSON не поддерживает эти типы.
Как повысить функциональность и юзабилити ресурса
Повышать функциональность и юзабилити можно и нужно постоянно. Как отмечалось выше, некоторые владельцы сайтов на WordPress так увлекаются этим процессом, что устанавливают десятки и даже сотни плагинов. Чтобы избежать этой ошибки, начинайте повышение функциональности и улучшение юзабилити не с плагинов, а с определения проблем и задач, которые хотите решить.
-
Где Itunes хранит резервные копии
Резервная копия Iphone необходима для сохранности данных при переустановке ОС, поломке устройства, сбоя ПО или облачного сервиса. Обеспечить синхронизацию информации: Адресной книги (всех контактов) и истории вызовов. Полного списка календарей,...
Советы начинающим -
Эксплуатация, зарядка и маркировка аккумуляторов для планшета Где купить аккумулятор для планшета
Найти подходящий аккумулятор для планшета непросто для пользователя, который слабо осведомлен о том, где в его таблете находится отсек для АКБ. Впрочем, если гаджет неожиданно «поправился» в размерах и демонстрирует все признаки готовности треснуть...
Компьютерная грамотность -
Samsung Galaxy Note8 SD835 - Технические характеристики
Информация о марке, модели и альтернативных названиях конкретного устройства, если таковые имеются. ДизайнИнформация о размерах и весе устройства, представленная в разных единицах измерения. Использованные материалы, предлагаемые цвета,...
Компьютерная грамотность