Шаг 1. Структура темы для WordPress
Если вы когда-либо редактировали файлы темы для вордпресс, то, наверное, заметили, что в разных темах есть похожие файлы. В любой теме обязательно должны быть два файла, которые лежат в корне папки с темой:
- index.php – основной шаблон страницы;
- style.css – файл стилей.
Это необходимый минимум для того, чтобы ваша тема работала. Но конечно же, кроме этих двух файлов, обычно есть и другие, такие как:
- header.php, для вывода шапки всех страниц;
- sidebar.php, для вывода боковой колонки;
- footer.php, который выводит подвал сайта;
- page.php, шаблон для статических страниц
- single.php, шаблон для страниц записей;
- archive.php, шаблон архивов и рубрик;
- comments.php, шаблон комментариев;
- functions.php, функции темы;
- и другие…
Наша основная задача при создании темы для вордпресс состоит в том, чтобы добавить необходимые функции, и содержимое одного HTML-файла разместить в нескольких PHP-файлах.
Удобно ли работать
Дочерняя тема WordPress представляет собой прекрасную идею, обладающую широким перечнем преимуществ. Лично мы бы рекомендовали ее в стандартном комплекте с продуктами премиального сегмента. Перечислим лишь некоторые плюсы:
- Они автоматически сохраняют внесенные корректировки. Благодаря этому можно вносить коррективы напрямую в код, без рисков, что настройки собьются или будут утрачены при обновлении.
- Работа с ними — прекрасная подготовка для перехода к написанию основного кода для родительских вариантов.
- Улучшается рабочий процесс. Имея в распоряжении всего одну тематическую основу, вы можете создавать сайты, различные по сложности и функционалу.
Настраиваем внешний вид
Шаг 1. Наведите курсор на раздел «Внешний вид» в левом меню и выберите подраздел «Настроить». Откроется редактор сайта.
Шаг 2. Сначала изменим название сайта в шапке страницы. Для этого выберите раздел «Свойства сайта». Здесь можно изменить название сайта и добавить в шапку логотип. В конце не забудьте нажать кнопку «Опубликовать» в верхнем левом углу.
Чтобы вернуться на предыдущую страницу редактора, нажмите стрелочку рядом с названием раздела. Если нажмёте на крестик, вернётесь в панель управления WordPress.
Шаг 3. Шапку страницы можно закрепить и сделать прозрачной, чтобы она не выделялась на фоне заглавного изображения.
Перейдите в раздел «Опции темы» и откройте подраздел «Верхний колонтитул». В выпадающем списке выберите значение «Фиксированный и прозрачный». Затем нажмите «Опубликовать».
Шаг 4. Отредактируем баннер. Вернитесь в главное меню редактора и перейдите в раздел «Разделы главной страницы». За баннер отвечает подраздел «Герой».
В начале будет поле, при помощи которого можно скрыть раздел. Если какой-то из разделов окажется лишним, установите в этом поле флажок и раздел пропадёт.
Чтобы изменить изображение и текст баннера, нажмите на выпадающий список с названием «Элемент».
Шаг 5. Добавим в шапку страницы ссылки на блог и форму обратной связи.
Ссылку на блог мы уже знаем — http://vashdomen.com/blog. Теперь узнаем ссылку на форму.
В нашей теме есть отдельный блок с формой. Он самый последний на главной странице. Значит нужно дать ссылку прямо на конкретный раздел.
У каждого раздела на главной странице есть свой идентификатор. Посмотреть его можно в разделе редактора, который посвящён этому блоку. Из основного меню перейдите в «Разделы главной страницы» и выберите подраздел «Контакты».
Идентификатор — это поле «ID раздела». Придумайте короткое слово латинскими буквами, чтобы потом в ссылке был только один язык.
Мы создали идентификатор и теперь можем составить ссылку на раздел. К обычной ссылке на главную страницу сайта нужно добавить дробь, символ решётки и идентификатор нужного блока. Получится такая ссылка: http://vashdomen.com/#contacts.
Если хотите добавить в шапку сайта ссылки на другие разделы, придумайте идентификаторы и для них.
Шаг 6. Добавим ссылки в шапку сайта. Для этого нужно создать меню.
Вернитесь на главную страницу редактора, перейдите в раздел «Меню» и нажмите кнопку «Создать новое меню».
Придумайте название для меню, поставьте галочку в поле «Основной» и нажмите «Далее».
На следующей странице нажмите «Добавить элементы» и нажмите на выпадающий список с названием «Произвольные ссылки».
В поле «URL» впишите ссылку на нужную страницу, а в поле «Текст ссылки» — слово, которое вы хотите видеть в шапке сайта. После этого нажмите «Добавить в меню».
Точно так же добавьте остальные ссылки. В конце нажмите «Опубликовать».
На сайте ссылку появятся в верхнем правом углу:
В остальных разделах редактора можно выбрать цвет текста и фона, отредактировать другие разделы. Отдельно можно изменить внешний вид страницы блога. Для этого перейдите на страницу блога прямо в редакторе.
Дальше разберёмся, как улучшить функционал сайта с помощью плагинов.
5 советов по созданию простого, но выдающегося сайта WordPress
Указанные темы WordPress с минимальным дизайном отлично работают и не подавляют начинающих настройками. Внешняя простота сайта не означает пустоты. Вот несколько советов, которые помогут вашему сайту выделиться:
1. Найдите звучание своего бренда
Звучание вашего бренда — это первое, что отличает вас от конкурентов. Независимо от назначения сайта, наполняйте его своей уникальной тональностью, по которой читатели будут узнавать ваш сайт.
Branding Brand Voice: How the Right Tone of Voice Can Boost Your Business Julia Melymbrose
2. Обозначьте свою личность
Не скрывайтесь за своим брендом, наоборот, наполняйте его своей личностью и делитесь причинами, почему вы начали свой блог или бизнес. Покажите, что движет вами, что вас мотивирует и что вам нужно. Посетители подключатся к вам гораздо быстрее, когда узнают вас лично.
Branding How to Define Your Core Brand Values (And Why You Should) Julia Melymbrose
4. Используйте свои иконки
Несколько тем в этом списке имеют свой набор значков для отдельных разделов или услуг. Они добавляют визуальной привлекательности и делают ваш сайт более запоминающимся.
5. Развивайте общение
Интерактивные веб-сайты поощряют людей к действию и вам необязательно быть кодировщиком, чтобы добавить немного общения. Подумайте о теме вроде Marshmallow с потрясающими hover эффектами, которые так и просят людей щёлкнуть по сообщению или снимку.
Добавьте список рассылки и подписку на рассылку
Многие люди, которые дают советы по ведению блога, говорят, что у вас должен быть список рассылки с первого дня запуска вашего блога, и я согласен с этим.
Я прочитал много сообщений от людей, которые сожалели, что не добавили список рассылки немедленно и поэтому пропустили жизненно важные подписки.
Sendpulse и MailChimp — популярные поставщики списков рассылки для блогеров.
У MailChimp есть уровень бесплатного пользования до 2000 подписок, а у Sendpulse есть бесплатный план до 2500.
Теперь я также рекомендую Mailerlite, у которого есть уровень бесплатного пользования до 1000 подписчиков с полной функциональностью.
После того, как у вас есть учетная запись, вам необходимо добавить в свой блог форму подписки.
Боковая панель — хорошее место для этого.
Вы также можете добавить одну в конце сообщений или создать всплывающее окно, чтобы привлечь людей к использованию чего-то вроде «Thrive Leads».
В Elementor Pro есть конструктор форм, который позволяет подключаться к популярным почтовым приложениям.
Дополнительные материалы для обучения
Статьи в блоге. Здесь вы найдёте подборки популярных плагинов и советы, которые помогут улучшить работу сайта. Вот некоторые статьи:
26 бесплатных тем для WordPress10 плагинов для SEO17 способов защитить сайт от взломщиков
Вики. Здесь есть руководства по работе с каждым разделом панели управления и ответы на общие вопросы. Несколько статей для примера:
Видеоуроки. Записали для вас серию видеоуроков по работе с WordPress. Если вам тяжело воспринимать длинные текстовые инструкции, попробуйте посмотреть видео.
Если что-то пошло не так, и вы не можете найти статью или видео, которое решит вашу проблему, задайте вопрос в чате. Мы работаем круглосуточно. Будем рады помочь!
Почему WordPress?
Всем, кто начинает делать сайты рекомендую именно WordPress, потому что он имеет легкоусвояемый и дружелюбный интерфейс. Достаточно просто понять — что куда нажимать и как действовать. А также он:
Бесплатен. На первом этапе инвестиции могут быть излишни.
Легко кастомизируется. Существуют тысячи готовых шаблонов и тем, тысячи разных плагинов для прокачки сайта как в качестве дизайна, так и в качестве функционала. Плагины и шаблоны есть как бесплатные, так и платные. Если есть немного денег на старте, то рекомендую приобрести русскоязычные темы Root или Reboot
Прост в управлении (администрировании) — редактор не сложнее ворда, всё (почти) на русском, разберется даже ребенок. Немного практики и вы интуитивно будете понимать, где что и как.
Наличие сообщества — если вдруг у вас найдется какая-то проблема, то на форуме, в блогах пользователей или даже просто через поиск можно найти решение. Также движок регулярно обновляется. Разработчики продолжают его совершенствовать. Именно у Вордпресс есть будущее, тогда как некоторые движки уже на ладан дышат.
Страница рубрики
Откройте файл category.php. Внесите туда код:
Код страницы category.php
<?php
// получаем верхнюю часть страницы
get_header();
// получаем информацию о категории
$cat = get_the_category();
// получаем название категории (например, Рыбалка)
$cat_name = $cat->cat_name;
// получаем ярлык категории (например, fishing)
$cat_slug = $cat->slug;
?>
<h1><?php
// выводим название категории
echo $cat_name;
?></h1>
<?php
// выводим последние 6 постов категории
// код такой же, как на главной странице, только название категории будет переменное
$posts = get_posts( array( ‘numberposts’ => ‘6’, ‘category_name’ => $cat_slug) );
// выводим записи. Код как на главной странице
foreach($posts as $post) {
setup_postdata($post);
echo ‘<div class=»card»>’;
$post_title = the_title(‘<h1 style=»color: gray»>’, ‘</h1>’, false);
$post_link = get_permalink();
$post_thumb = get_the_post_thumbnail(null, ‘large’, array(‘class’=>’card-img’) );
echo ‘ <a href=»‘.$post_link.'» class=»item_link item_link—lead»>’;
echo $post_title.$post_thumb;
echo «\n</a></div>»;
}
?>
</section>
</body>
</html>
|
1 |
<?php // получаем верхнюю часть страницы get_header(); // получаем информацию о категории $cat=get_the_category(); // получаем название категории (например, Рыбалка) $cat_name=$cat->cat_name; // получаем ярлык категории (например, fishing) $cat_slug=$cat->slug; ?> <h1><?php // выводим название категории echo$cat_name; ?><h1> <?php $posts=get_posts(array(‘numberposts’=>’6’,’category_name’=>$cat_slug)); // выводим записи. Код как на главной странице foreach($postsas$post){ setup_postdata($post); echo'<div class=»card»>’; $post_title=the_title(‘<h1 style=»color: gray»>’,'</h1>’,false); $post_link=get_permalink(); $post_thumb=get_the_post_thumbnail(null,’large’,array(‘class’=>’card-img’)); echo’ <a href=»‘.$post_link.'» class=»item_link item_link—lead»>’; echo$post_title.$post_thumb; echo»\n</a></div>»; } ?> <section> <body> <html> |
Откройте главную страницу, нажмите на любой раздел в меню. Теперь в каждом разделе выводятся все записи из этой рубрики:
Создайте файл category-fishing.php. Вместо кода напишите там любое слово, например РЫБА.
Откройте главную страницу, нажмите на раздел «Рыбалка» в меню. Вот что вы увидите:
В то время как раздел «Охота» будет выглядеть так же, как на предыдущем шаге.
Только в том случае, если файла category-fishing.php нет, WordPress обратится к файлу category.php.
Таким образом, в файле category.php вы можете разместить универсальный код для всех ваших рубрик по умолчанию. А если для какой-то из них понадобится более тонкая настройка, отдельный дизайн, создайте новый файл category-название_рубрики.php, и WordPress будет учитывать именно его.
Удалите файл category-fishing.php. Перейдем к последнему этапу создания сайта.
Добавляем плагины
Плагины — это дополнительные функции для сайта. Их нужно устанавливать отдельно. После этого в панели управления WordPress появится ещё один раздел, где можно будет настроить работу нового функционала.
Как и темы, плагины тоже бывают платными и бесплатными. Подходящий плагин можно поискать прямо в панели управления WordPress или скачать со сторонних сайтов. Подробнее на тему — в обзоре раздела «Плагины».
Сейчас на нашем сайте есть блок для обратной связи, но в нём нет контактной формы. Установим специальный плагин, который добавит её на сайт.
Шаг 1. Наведите курсор на раздел «Плагины» в левом меню и выберите подраздел «Добавить новый».
В этом разделе больше 50 тысяч плагинов с разными функциями. Чтобы добавить контактную форму, подойдёт плагин «Contact Form 7». Найдите его и нажмите «Установить» в правом верхнем углу, а затем «Активировать».
Шаг 2. Откроется страница с установленными плагинами. Найдите нужный плагин в списке и нажмите «Настройки» под его названием.
В списке уже будет контактная форма с названием «Контактная форма 1». Нажмите на её название, чтобы открыть редактор формы.
Удалите текст из поля «Шаблон формы». Будет проще научиться, если вы добавите нужные поля заново.
В разделе «Шаблон формы» есть кнопки. Каждая из них отвечает за свой тип поля.
Подумайте, какая информация вам нужна от клиентов. Предположим, это имя, электронная почта и телефон. Плюс поле для описания проблемы и кнопка «Отправить».
Для почты, телефона и отправки есть свои кнопки, а для имени и проблемы подойдёт обычное текстовое поле.
Шаг 3. Сначала нажмите кнопку «Текст». Появится всплывающее окно, в котором можно сделать поле обязательным, придумать для него имя и значение по умолчанию.
Имя поля — это служебный текст, пользователь не увидит его на сайте. Его можно вводить только латинскими буквами.
Вспомогательный текст, который стоит рядом с полем, вписывают отдельно после добавления тега. Этот текст появится над полем и будет занимать лишнее место. Поэтому рекомендуем использовать атрибут «Значение по умолчанию». Тогда текст появится не рядом с полем, а внутри него. Форма станет компактнее и будет выглядеть лучше.
Не забудьте поставить галочку, как на скриншоте. В конце нажмите «Вставить тег».
Шаг 4. По умолчанию поля формы будут занимать всю ширину экрана. Если хотите сделать их уже, добавьте перед квадратными скобками текст <label>, а после них — </label>. В конце не забудьте нажать кнопку «Сохранить» в правой части экрана.
Должно получиться так:
На вкладке «Уведомления при отправке формы» можно отредактировать сообщения, которые посетитель увидит, когда нажмёт кнопку «Отправить».
Шаг 5. Пока что форма не появилась на сайте — её нужно добавить в редакторе внешнего вида. Скопируйте текст из синей строки вверху страницы, наведите курсор на раздел «Внешний вид» и выберите подраздел «Настроить».
В редакторе сайта зайдите в раздел «Разделы главной страницы» и выберите «Контакты». Вставьте скопированный текст в поле «Описание раздела» и опубликуйте изменения.
Вот что получится в итоге:
На этом всё. Мы разобрали основные функции WordPress и создали простую страницу. Вам остаётся довести дело до конца: добавить контент в остальные разделы и отредактировать их внешний вид.
Теперь поделимся ссылками на материалы, которые помогут улучшить сайт и глубже освоить WordPress.
Эти плагины бесплатны и ОБЯЗАНЫ быть на каждом WordPress-сайте
SEO by yoast
Самый лучший плагин для SEO, который дает возможность даже упоротым чайникам немного продвинуть свой сайт в поиске. При условии нормальной настройки, правильного заполнения всех параметров и работы по сайту в других направлениях SEO станет костяком, который реально избавит от львиной доли геморроя и рутины. Кстати, плагин формирует даже микроразметку сайта (автоматом, красавчик!), что есть очень и очень хорошо.
Конечно не стоит ждать, что ваш сайт взлетит в выдаче до невиданных высот по всем регионам за месяц, но ларек с шаурмой на районе будет иметь свое представительство в ТОПе довольно быстро.
Google XML Sitemaps
Плагин вроде как от Google, который делает карту сайта. Он нужен для SEO. И нужен он прежде всего Google, поэтому пренебрегать им не стоит однозначно. Он должен быть.
Protected wp-login
Админка WordPress лежит через путь: вашдомен.хз/wp-admin, с этим же плагином к этому пути можно добавить что угодно, хоть название самого труднопроизносимого города в мире. Т.е. вы можете задать вашдомен.хз/wp-adminrazdvarazdvaraz. Это нужно для того, чтобы сложнее было подобраться к вашей админке и сделать с сайтом какую-нибудь гадость. Впрочем в более серьезных проектах, нежели сайт палатки с шаурмой (хотя бы федеральная сеть из палаток), защита стоит уже более сложная.
Rus filename and link translit
WordPress при той настройке, которую мы задали, формирует URL (ссылку) из заголовка страницы. Чтобы эти ссылки автоматом переводились в транслит, ставим этот плагин. Пусть лучше будет. Ну его нафиг эти русские урлы…
WP Retina 2x
Крутой бесплатный плагин, который автоматом делает так, чтобы картинки вашего сайта нормально смотрелись на всей технике Apple с экранами Retina. Кто не знает, эти экраны автоматом увеличивают разрешение всех изображений на 2, чтобы повысить качество отображения.
Шаг № 6: Создаем первые посты и страницы
На сайте с движком Вордпресс есть два редактора — классический, олдскульный, похожий на документ Word (подходит для авторов, кто мыслит категориями, терминами, текстами) и новый Гутенберг — блочный, визуальный редактор (подходит для авторов, кто мыслит клипами, модулями, образами). Вы можете освоить оба, если только начинаете — то попробуйте обязательно и тот и тот. Я больше тяготею к классическому варианту. Рассказ о создании постов и страниц сделаю на примере обоих. Пост будем создавать в классическом редакторе вордпресса, а страницу в Гутенберге
Как создать пост
Это достаточно просто. На первом шаге слева в меню ищем ссылку «записи» или жмем кнопку «добавить» в верхнем горизонтальном меню. Первый раз можно выбрать еще и ссылку на экране (см в на скрине)
Далее заполняете заголовок — название поста, пишите текст, вставляете картинки (смотрите шаг 7 ниже), выбираете рубрику и публикуете. Все пост можно читать.
Смотрите еще раз инструкцию по картинке:
- Добавить запись
- Вводим название (заголовок)
- Изменяем урл (если нужно)
- Вводим текст поста
- Загружаем изображения (читай ниже)
- Сохраняем черновик
- Делаем предспросмотр — как будет смотреться пост.
- Можем изменить дату и время публикации (отложить на завтра или месяц)
- Выбираем или добавляем рубрику (категорию)
- Загружаем изображение записи (заглавная картинка)
- Публикуем
Попробуйте, и через 2-3 поста вы будете понимать как все устроено и куда надо нажимать.
Редактор позволяем также делать текст жирным или курсивом, цветным, делать цитаты и выделять списки. Это сделано по аналогии с Вордом.
Как создать статическую страницу
Для создания статистической страницы будем использовать редактор Гутенберг (хотя можно делать по аналогии с постом в классическом редакторе).
- Выберите меню «Страницы – Добавить новую».
- Добавьте заголовок страницы. Затем следуйте подсказкам редактора. Пишите текст или нажмите на значок «Плюс», чтобы добавить блок контента.
- Например, чтобы вставить фотографию, выберите соответствующий блок.
- Выберите источник фото и положение картинки на странице.
- В Gutenberg доступны десятки вариантов блоков. Например, кнопки, произвольный код, встраивание публикаций из социальных сетей и так далее. Их можно использовать для оформления вашего блога.
Проверьте корректность отображения контента. Если нужно, отредактируйте страницу.
После редактирования опубликуйте страницу.
Добавление секции опций
Секции опций — это блоки опций выделенные заголовком. Вместо того, чтобы создавать новую страницу настроек, иногда разумнее добавить новую секцию на уже существующую страницу настроек WordPress — это сделает плагин более простым и WordPress не будет нагружен новой страницей настроек плагина.
add_settings_section( $id, $title, $callback, $page );
-
$id — идентификатор секции. К этому ID прикрепляются поля (см. add_settings_field()).
-
$title — заголовок секции (название блока).
-
$callback — функция обратного вызова, которая выполняется в начале секции, перед выводом полей. В ней можно вывести текст описывающий секцию, выводить нужно сразу на экран, используя echo.
- $page — тип страницы настроек, на которой будет показана секция (general, reading, writing, …).
Шаг № 5: Настойка плагинов для WordPress
Плагины — это программы модули, которые могут улучшить функциональность сайт в зависимости от задач. Есть очень важные, есть украшательские (улучшают юзабилити), есть такие которые дополняют функционал и создают дополнительную ценность, в общем плагинов много и ставить сразу «100 лучших плагинов» не стоит.
Необходимо понимать для чего нужен тот или иной программный модуль
Обращаю внимание, что избыток плагинов может значительно замедлить работу сайта. Поэтому изучайте их, оценивайте необходимость именно для вашего ресурса
Условно можно разделить все плагины на 4 направления: защита (улучшение безопасности), SEO (оптимизация работы), улучшения функциональности, улучшение юзабилити вашего сайта.
Представляю must have плагины для сайта на WordPress
Really Simple SSL. Плагин оптимизирует сайт для перевода на безопасный протокол соединения. Достаточно активировать плагин и установить сертификат SSL.
All in One SEO Pack. Создает XML-карту сайта и файл robots.txt, управляет каноническими URL. Добавляет форму редактирования и превью сниппета. Блокирует индексацию категорий и архивов. Реализует протокол Open Graph. Как альтернатива можно ставить Yoast SEO или SEO Framework
WP Super Cache. Позволяет кешировать страницы сайта, что делает более быстрой загрузку страниц и одновременно снижает нагрузку на хостинг. По сравнению с другими плагинами кеширования имеет достаточно простые настройки и больше подходит для начинающих. Альтернатив много, рассмотрите Total Cache или Fastest Cache.
Clearfy. Это комбайн по защите, оптимизации и ускорению сайта. Есть платная версия, но и бесплатной будет достаточно. Убирает лишний код, ошибки плагинов и шаблонов, делает транслитерацию и многое другое. Подробнее почитайте на странице разработчика (а если есть 970 рублей, то не пожалейте — купите)
Всё. Остальные плагины — по настроению и необходимому функционалу. Например в теме уже реализована страница контактов, то плагин контактных форм вам ни к чему. и наоборот, если шаблон темы не создает html-карту сайта для пользователей (пример), то требуется поставить такой плагин.
