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

Содержание

Как создать сайт на WordPress самостоятельно

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

Как CMS с открытым кодом, WordPress удобен тем, что вокруг него существует и сообщество, поэтому легко найти ответы на вопросы на форумах, прочитать в одном из многочисленных мануалов или посмотреть видеоуроки на ютубе.

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

Подписывайтесь на наш Telegram-канал

Домен и хостинг

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

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

Далее следует выбрать домен и заказать его. Регистрация домена займет несколько минут. Самое простое – если адрес сайта вы будете бронировать там же, где хостинг. Тогда привязка одного к другому не потребует времени и усилий.

Настройка движка

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

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

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

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

Полезные решения для сайта

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

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

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

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

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

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

Если нужно создать интернет-магазин, то используют расширение WooCommerce, которое разработано специально для организации торговли в этой CMS.

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

Как создать сайт на WordPress, простая инструкция для начинающих

Вы решили все сделать самостоятельно? Отличный выбор! Эта статья научит вас тому, как создать сайт на WordPress. Простая пошаговая инструкция. Давайте начнем…

Но для начала пару слов о том, что такое WordPress и почему на нем. Вордпресс — это бесплатная и самая популярная в мире система управления сайтом (CMS). На ней можно создать 90% всех сайтов, которые вы когда-либо видели в интернете. Сайты на WordPress создаются легко, не надо быть программистом 80-го уровня 🙂 Поэтому мы и выбрали его.

 Приступим.

Хостинг и домен для сайта

  • Хостинг — место в интернете под ваш сайт
  • Домен — имя вашего сайта (например имя этого сайта — bizlek.ru)

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

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

1. Переходим на сайт хостинга, нажимаем «Виртуальный хостинг», выбираем понравившийся тариф и нажимаем на кнопку «Попробовать бесплатно». (Для нашего сайта можно использовать самый дешевый тариф.)

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

2. Переходим по ссылке из письма в панель управления, вводим логин и пароль и попадаем в панель управления хостингом.

3. В панели управления переходим на вкладку «Финансы» и оплачиваем услуги хостинга любым удобным способом.

Как пополнить баланс максимально выгодно

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

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

4. Регистрация домена для сайта

Переходим во вкладку «Домены | Сайты» (1), далее переходим на вкладку «Регистрация / Продление» (2), после чего нажимаем на «Создать новую анкету» (3)

Заполняем все поля в анкете. Анкета нужна для оформления домена на ваше имя или на имя компании. Это как оформить недвижимость, необходимо заполнить все поля реальными данными, чтобы в будущем, в случае чего, не возникли проблемы с правами на домен. После заполнения не забываем нажать на кнопку сохранения анкеты.

Анкета создана. Отлично! Нажимаем на зеленую кнопку «Зарегистрировать домен».

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

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

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

5. Переходим на вкладку «Прикрепление домена | Создание сайта» и жмем на зеленую кнопку «Прикрепить домен | Создать сайт».

В появившемся окне пишем название своего домена (точно так же как при регистрации). Тип прикрепления выбираем «Как домен с собственной папкой» и сохраняем изменения.

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

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

Установка WordPress

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

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

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

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

Нажимаем на кнопку «Выбрать».

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

Настройки WordPress

7. Мы уже знаем как создать сайт на WordPress, теперь нам остается привести его в порядок и наполнить информацией. У нас есть логин и пароль для доступа к сайту. Чтобы попасть в админскую часть нужно в строке браузера набрать адрес_сайта/wp-admin/ , где адрес_сайта — это название вашего домена. (Например, для этого сайта нужно набрать bizlek.ru/wp-admin/)

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

Слева в админке располагаются все основные пункты для работы с сайтом. Заходим в «Пользователи», подпункт «Ваш профиль» и заполняем информацию о себе. Заполнять всё необязательно, но укажите свой E-mail, а также можете поменять Ник и пароль. Не забудьте сохранить изменения, нажав на кнопку внизу «Обновить профиль».

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

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

Выбор темы оформления

8. Заходим во вкладку «Внешний вид — Темы». У нас есть несколько предустановленных тем для внешнего вида сайта. Можно выбрать любую понравившуюся.

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

Нажимаем на кнопку «Добавить» в верхней части на странице «Темы»

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

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

Для примера мы выбрали стандартно установленную тему Twenty Twenty.

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

Плагины

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

Мы всегда используем несколько плагинов, независимо от того, какие возможности нужны на конкретном сайте. Вот они:

  • Antispam Bee — плагин, защищающий ваш сайт от спама;
  • Google XML Sitemaps — для создания XML-карты сайта. Полезно для продвижения в поисковых системах;
  • Rus filename and link translit — (или подобные) производит транслитерацию загружаемых файлов и постоянных ссылок, создаваемых из заголовков страниц и записей, имеющих русские символы в названии;
  • Yoast SEO — плагин для SEO-оптимизации.

Стандартно установленные плагины мы, обычно, удаляем.

9. Как добавить плагин

В меню заходим в «Плагины — Добавить новый»

В строку поиска пишем название плагина и нажимаем Enter или ждем когда страница обновится сама. Находим наш плагин и Нажимаем «Установить», а затем «Активировать».

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

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

Добавление страниц

10. Заходим на вкладку «Страницы», наводим курсор мыши на стандартную страницу (появятся несколько ссылок) и удаляем ее.

Затем нажимаем на кнопку «Добавить новую». Попадаем в редактор, где можно добавить информацию на страницу.

Сейчас в Вордпресс используется редактор блоков, но еще не так давно использовался классический редактор, в котором, по мнению многих, все более понятно. Можно установить классический редактор в виде плагина, но скорее всего в дальнейшем он будет использоваться все реже и реже. Решать вам. Называется плагин классического редактора — Classic Editor. (Введите его название в поиске на странице добавления нового плагина установите и активируйте.) Ну а если вы хотите продолжить, используя редактор блоков, то ничего устанавливать не нужно.

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

Справа вверху есть две кнопки:

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

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

Записи

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

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

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

Добавляем меню

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

11. Заходим в «Внешний вид — Меню». Пишем название нашего меню на английском (любое удобное название, например menu). Сохраняем, нажав на кнопку «Создать меню».

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

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

Виджеты

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

12. В админке переходим на вкладку «Внешний вид — Виджеты». Слева мы видим доступные виджеты, справа место, куда эти виджеты могут быть добавлены.

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

Заключение

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

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

Также будем рады почитать ваши комментарии, пишите…

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

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

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

Получите содержимое, доставленное прямо в ваш почтовый ящик

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

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

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

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

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

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

  • Ваш собственный веб-сайт WordPress
  • Качественный хостинг

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

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

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

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

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

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

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

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

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

Шаг 1. Настройка локальной среды

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

Есть много способов создать локальную среду, но мы будем использовать Local. Это быстрый и простой способ бесплатно установить локальную версию WordPress, совместимый как с Mac, так и с Windows:

Чтобы получить запущен, выберите бесплатную версию Local, выберите свою платформу, добавьте свои данные и загрузите установщик. Когда установка будет завершена, вы можете открыть программу на своем компьютере.

Здесь вам будет предложено настроить новую локальную среду:

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

Шаг 2. Загрузите и установите начальную тему

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

Если хотите, вы можете нажать Дополнительные параметры , чтобы настроить базовую тему дальше:

Здесь вы можете ввести дополнительную информацию, например, имя автора, и дать описание темы:

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

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

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

Шаг 3: Узнайте о различных компонентах темы WordPress

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

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

Например, header.php используется для создания заголовка, а comments.php позволяет отображать комментарии.

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

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

  1. Файлы, соответствующие слагу, например this-post
  2. Файлы, соответствующие идентификатору сообщения
  3. Универсальный одиночный почтовый файл, например single.php
  4. Архивный файл, например archive.php
  5. файл index.php

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

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

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

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

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

Добавление функциональности с помощью «хуков»

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

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

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

Эти крючки уже будут включены в вашу тему Underscores. Тем не менее, мы по-прежнему рекомендуем посетить Базу данных хуков, чтобы увидеть все доступные хуки и узнать о них больше.

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

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

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

 a {
цвет: королевский синий;
} 

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

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

 a {
красный цвет;
} 

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

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

 a:visited {
цвет: фиолетовый;
} 

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

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

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

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

Когда вы тщательно протестировали свою тему и убедились, что она соответствует требуемым стандартам, остается только экспортировать ее.

Во-первых, вам нужно найти местоположение вашего веб-сайта на локальном компьютере. Скорее всего, вы найдете его в папке с именем Websites, внутри вашего стандартного каталога Documents .

Откройте папку веб-сайта и войдите в /wp-content/themes/ , где вы найдете свою тему:

Теперь вы можете использовать инструмент сжатия, например WinRAR, для создания .zip файл на основе папки. Просто щелкните папку правой кнопкой мыши и выберите параметр, позволяющий заархивировать ее, например, Сжать «папку» :

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

Создание пользовательской темы WordPress

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

Напомним, вот как разработать тему WordPress за пять простых шагов:

  1. Настройте локальную среду, используя Local.
  2. Загрузите и установите стартовую тему, например Underscores.
  3. Узнайте о различных компонентах темы WordPress.
  4. Настройте свою тему.
  5. Экспортируйте тему и загрузите ее на свой сайт.

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

Как создать веб-сайт WordPress от начала до конца

Логотипы, веб-сайты и многое другое…

Логотипы, веб-сайты, обложки книг и многое другое…

Получить дизайн

WordPress.org является одним из старейших, самых надежных и широко используемых конструкторов веб-сайтов, поскольку более 35 % веб-сайтов работают на его технологии. Это в основном бесплатное программное обеспечение с открытым исходным кодом позволяет любому создать веб-сайт WordPress, независимо от его навыков программирования или дизайнерского таланта. И все же, несмотря на то, что он удобен для любителей, его возможности достаточно широки и гибки, чтобы привлечь продвинутых пользователей, включая крупные компании, такие как Disney, MTV и Sony.

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

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

Как создать сайт на WordPress за 6 шагов


  1. Подготовьте содержимое сайта
  2. Зарегистрировать домен и хостинг
  3. Установить WordPress
  4. Настройте свой веб-сайт WordPress
  5. Настройте свой дизайн WordPress
  6. Запустите готовый веб-сайт WordPress

Шаг 1. Подготовьте содержимое веб-сайта


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

Перед созданием веб-сайта убедитесь, что ваш контент собран воедино. Дизайн Константин Костенко

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

  • Логотип и брендинг (включая фирменные цвета и типографику)
  • Медиа (фотография, иллюстрации, пиктограммы, видео)
  • Письменное содержание
    • Заголовки
    • Подзаголовки
    • CTA и другая копия кнопки
    • Копия тела
В киоске с бананами всегда есть деньги, через Netflix

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

Шаг 2: Зарегистрируйте домен и хостинг


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

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

Нажмите кнопку  Начать  , чтобы настроить учетную запись Bluehost. Изображение через Bluehost

 

Выберите уникальный доменный адрес для своего веб-сайта. Изображение через Bluehost

В большинстве случаев вам придется платить за домен и хостинг. Например, Bluehost предлагает регистрацию домена за 12,99 долларов США и взимает 7,99 долларов США в месяц в течение первого года (оплачивается ежегодно, а не ежемесячно). После того, как вы нажмете ссылку Get Started на домашней странице Bluehost, введите выбранный адрес домена, и, если он доступен, вы можете купить его на странице оформления заказа.

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

Шаг 3. Установите WordPress


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

Перейдите к  Мои сайты  >  Войдите в систему . Изображение через bluehost

После установки WordPress нажмите кнопку Войти с логотипом WordPress (также на вкладке Мои сайты ). Это приведет вас к WordPress.

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

WordPress.
  • Bluehost (или другая интеграция хостинга) : Нажав на это, вы вернетесь в свою учетную запись на Bluehost. Здесь вам не нужно ничего делать, кроме как в конечном итоге запустить свой сайт (пока вы не запустите, ваш сайт не будет работать, а выбранный вами домен будет отображать сообщение  Coming Soon  ).
  • Dashboard : общий центр WordPress для управления и просмотра вашего сайта. Он включает в себя пошаговые действия, журнал текущего содержимого вашего сайта и рекомендации по дополнительным функциям.
  • Сообщения : Здесь вы можете добавлять страницы блога и управлять ими.
  • Медиа : Ваша медиатека, где хранятся все ваши загруженные изображения и видео.
  • Страницы : Где вы можете добавлять и управлять страницами на вашем сайте.
  • Комментарии : модерировать, отвечать на комментарии или экранировать их, если они включены.
  • Внешний вид : Ваш основной центр редактирования темы вашего сайта.
    • Темы : Здесь вы можете просматривать и устанавливать бесплатные и премиальные темы.
    • Настроить : изменить стиль выбранной темы. Здесь можно редактировать многие другие элементы подменю.
  • Плагины : Здесь вы можете управлять плагинами вашего веб-сайта (интеграциями стороннего программного обеспечения, которые добавляют дополнительные специфические функции на ваш веб-сайт).
    • Установленные плагины : Здесь вы можете просматривать, активировать, деактивировать и удалять плагины, которые уже установлены на вашем сайте.
    • Добавить новый : Здесь вы можете просматривать и устанавливать бесплатные и платные плагины.
  • Пользователи : Здесь вы можете управлять своим паролем и профилем пользователя, а также просматривать/добавлять членов команды и управлять их уровнем доступа к вашему администратору WordPress.
  • Настройки : Управление определенными параметрами для вашего веб-сайта WordPress

Шаг 4. Настройте свой веб-сайт WordPress


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

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

Создание сайта WordPress с нуля

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

Во-первых, вам нужно настроить свои страницы и добавить свой контент. Перейдите к Pages > Add New , и вы попадете в редактор страниц WordPress.

Редактор страниц для WordPress. Указанные вкладки позволяют переключаться между визуальной и текстовой (или кодовой) версиями вашей веб-страницы.

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

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

Если вы решите работать с фрилансерами: 99designs может связать вас с пулом дизайнеров WordPress, которые, наряду с 9Партнеры по кодированию 9designs спроектируют и разработают ваш индивидуальный веб-сайт WordPress по доступной цене. Зайдите сюда, чтобы получить бесплатную консультацию.

Библиотека тем WordPress позволяет выбирать из тысяч готовых тем. Внешний вид  Настройка  предоставляет ограниченные возможности редактирования выбранной вами темы. Изображение через WordPress

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

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

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

Создание сайта WordPress на основе шаблона

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

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

Перейдите к Плагины > Добавить новый . Используя строку поиска, введите такой термин, как «начальные сайты» или «шаблоны». Мы решили работать с конструктором веб-сайтов Elementor, но не стесняйтесь просматривать ваши варианты. Нажмите Кнопка «Установить» и перейдите к «Плагины» > «Установленные плагины ». Прокрутите вниз, чтобы найти новый подключаемый модуль конструктора, и нажмите ссылку  See Library  . Это приведет вас к отображению бесплатных и премиальных шаблонов, которые вы можете просматривать.

Установите конструктор сайтов, чтобы создать начальный сайт. Изображение через WordPressМы выбрали шаблон ресторана, соответствующий цели нашего сайта. Изображение через WordPress

Здесь следует обратить внимание на то, насколько хорошо шаблон соответствует объему и характеру вашего контента. Например, если ваш контент насыщен текстом, не начинайте с чего-то основанного на изображениях, такого как шаблон художественного портфолио. . При этом вы всегда можете протестировать шаблон, удалить страницы и начать заново столько раз, сколько вам нужно, чтобы найти хорошее соответствие. Для Bluth Banana Stand мы выбрали итальянский шаблон Fresco, поскольку веб-сайт ресторана ближе всего к тому, что мы делаем.

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

Шаг 5. Настройте свой дизайн WordPress


(Дальше в этой статье мы предполагаем, что вы создали свой сайт с помощью шаблона.)

Чтобы настроить свой шаблон, перейдите к Pages страницу, над которой вы хотите работать (мы будем работать над домашней страницей ) и нажмите кнопку Редактировать с помощью Elementor  на следующем экране.

Выберите Редактировать с помощью Elementor в редакторе страниц WordPress. Изображение через WordPress

Редактирование темы WordPress

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

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

Перейдите к гамбургер-меню на боковой панели и выберите 9.0311 Настройки сайта
. Изображение через WordPress

Установите свой логотип и идентификатор сайта

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

Как добавлять, редактировать и удалять разделы страницы

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

Разделы основаны на столбцах и элементах. Синяя вкладка в самом верху позволяет редактировать расположение и стиль всего раздела. Изображения через WordPress и Netflix
  • Значок плюса позволяет добавить раздел над текущим. Для этого вам будет предложено выбрать количество столбцов. Затем вы можете перетащить виджеты с боковой панели в новый раздел.
  • Значок с точечной сеткой отображает свойства всего раздела на боковой панели.
    • 9Вкладка 0311 Макет позволяет изменить интервал и выравнивание всех элементов в этом разделе.
    • Вкладка  Стиль  позволяет изменить фоновое изображение и другие варианты темы для этого раздела.
  • Значок x удаляет раздел.

Как редактировать копию веб-сайта и медиафайлы

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

Выбор элемента также вызывает его свойства на боковой панели, где вы можете изменить содержимое. Каждый виджет будет иметь свои собственные свойства, разделенные вкладками Content и Style . Чтобы удалить элементы, щелкните правой кнопкой мыши и выберите Удалить .

Выбор изображения справа позволяет изменить его на боковой панели слева. Изображения через WordPress и Netflix

 

Медиатека  – это место, где вы можете добавлять изображения и видео и управлять ими. Изображения через WordPress и Netflix 

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

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

Шаг 6: Запустите готовый веб-сайт WordPress


— Просто нажмите кнопку  Запустите свой сайт  , чтобы ваш сайт заработал. Изображение через WordPress

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

Вернитесь на вкладку Bluehost и нажмите кнопку Запустить сайт . (Кнопка изменится на  Восстановить скоро на случай, если вы передумали и вам нужно отключить свой сайт.) Введите домен своего веб-сайта в URL-адрес, и вы попадете на готовый веб-сайт WordPress.

Вот и готов наш готовый веб-сайт на WordPress. Мы сделали семью Блут гордой. Изображения через Netflix

Ваш веб-сайт WordPress запущен


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

Оставить комментарий

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *