Гаджеты

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

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

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

Как создать уникальный шаблон для wordpress-начинаем

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

  1. Сменить картинки.
  2. Изменить название шаблона.
  3. Сделать мелкие правки в стилях.

Начнём разбор каждого пункта по порядку.

Меняем картинки

Самый простой момент, разберу на примере шаблона twenty eleven. Заменяем стоковые изображения на свои переделанные. Надо менять в шапке, подвале, фон и остальные мелкие.

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

  • Первый через саму админку.
  • Второй через код.

Если принцип поймёте, то вам большой респект.

Через саму административную панель

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

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

  1. Общие цвета темы. Настройки основных элементов (заголовков, надписей и тому подобного).
  2. Изображение заголовка, то есть в шапке.
  3. Фоновое изображение. Присутствует не на всех темах, можно настроить как картинкой, так и просто цветом.

На этом этапе вот что у меня получилось. Едем дальше.

Меняем картинки вручную

Предположим картинка какого-то элемента в шаблоне вас не устраивает, и вам хочется её поменять. Что же делать? Будем разбираться. Для примера я возьму вывод картинки количества комментаторов.

Система действует для всех тем.

Нажимаем правой кнопкой мыши на элементе и ищем его вывод в коде, с помощью инструмента “просмотреть код”.

  1. Сам элемент, нажимаем на нём правой кнопкой мыши.
  2. Выбираем пункт “просмотреть код”.
  3. Это сам код вывод HTML, на него внимания не обращаем.
  4. Вот тот заветный адрес, куда надо идти с заменой. Искомый файл bubble.png, находящийся в папке images в самой теме.

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

Сделано, я открыл файлзиллу, и зашёл в активную тему twenty eleven в папку images (которую узнали выше). и простым перетаскиванием нового изображения вставляем в папку, с заменой. Все подробности на скриншоте.

Если все сделано хорошо, то новая картинка отобразиться на сайте, вот снимок.

Как понимаете, то таким методом можно сменить любую картинку, если нет настроек в административной панели.

Изменяем название шаблона

Менять можно только на бесплатных темах, это важно.

Есть два пункта и их надо сделать:

  • Переделываем название в файле style.css
  • Меняем название папки с темой.

Переделываем названия в style.css

Для этого заходим в редактор (напоминаю внешний вид-редактор ), и находим style.css.

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

Theme Name: moi-shablon Description: Standard version 1.. License: GPL

Должно получиться так, после замены.

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

Разобрались, переходим к следующему пункту.

Меняем название папки с темой

Делаем через файловый менеджер, у меня Filezilla. В предыдущем пункте меняли имя темы в строчке:

Theme Name: moi-shablon

Надо оригинальное имя twentyeleven изменить на новое, в моём случае, moi-shablon. Идём в FileZilla папку themes , и находим исходное название twentyeleven.

И меняем его на новое.

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

Мелкие правки в стилях

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

Правда, не очень? Я хочу сделать покрупнее шрифт заголовков, потому что мелкие и сливаются с фоном. Все шаги смотрим ниже на снимке.

  1. Выбираем тот элемент, который хотим править. Нажимаем правой кнопкой мыши.
  2. Нажимаем на “посмотреть код”.
  3. Весь стиль этого заголовка.
  4. Искомое название стиля.

Открываем файл style.css. Ищем название стиля с помощью комбинации клавиш CNTRL+F.

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

Color: #1a1a1a; font-size: 15px; font-weight: 600; border-bottom: 2px solid #271eb1;

Разберём строчки кода.

  1. Изменение цвета.
  2. Изменение размера.
  3. Изменение ширины текста.
  4. Добавление линии подчёркивания.

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

Все изменения сразу покажутся на сайте.

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

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

Эта статья ответила на вопрос как создать уникальный шаблон для wordpress. И стандартную тему можно будет назвать вашей авторской.

Если будут вопросы, то прошу в комментарии. Успехов.

Здравствуйте, дорогие друзья и читатели – сайт!

Сегодня я покажу, как с ноля создать шаблон для WordPress.

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

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

Подготовка к созданию шаблона для WordPress.

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

Чтобы не мучиться с передачей файлов через FTP , советую и разрабатывать шаблоны на виртуальной машине.

С точки зрения редактирования и правки кода, настоятельно рекомендую использовать — Notepad++ . Благодаря подсветке кода и простому интерфейсу, этой программе отдаёт предпочтение наибольшее количество Веб-мастеров.

Зайдите в корневую директорию, содержащую установки WordPress, перейдите в wp-content => themes и создайте там папку с именем — «New Theme 3.0» . Внутри этой папки разместите следующие файлы (расширения – PHP, CSS, PN G):

Шаг-1 style.css

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

Эта информация, может быть изменена в любое время. Главное, чтобы всё было закомментировано ().

Теперь, в этом файле, нужно создать несколько основных определений стилей, которые в дальнейшем будут реализовываться в некоторых PHP файлах темы WordPress:

В этом коде используется тег — body , только для спецификации (определения) шрифтов используемых на сайте и цвета фона (всё меняется на любой вкус). Затем, мы объявляем атрибуты стиля для связи, а также некоторые из заголовков, которые мы будем использовать на протяжении всей нашей темы.

#wrapper — будет отвечать за полный размер веб-страницы. С #header , всё очевидно, это заголовок, а #blog , это последние сообщения на главной странице.

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

Шаг-2 header.php.

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

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

В самом начале, мы объявляем тип документа и стандартный код, который будет использоваться для отображения названия сайта, вводимое в настройках администратора WordPress. Далее, идёт и PHP код, позволяющий работать с древовидными комментариями.

Шаг-3 Добавление пользовательской навигации.

Теперь, когда мы закодировали в нашу основную информацию, можно добавить пользовательское меню навигации. Но, прежде, нужно открыть файл functions.php и прописать специальную функцию:

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

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

Давайте, немного её разберём. Основной функцией, которая здесь используется, является wp_nav_menu . Переменные sort_column , container_class , и theme_location , применяются в качестве аргументов. Sort_column — гарантирует порядок отображения, который задаётся в админке. Container_class — позволяет выбрать Вашего меню. Ну, а theme_location , просто присваивает primary-menu те значения, которыми мы манипулируем в реальном времени.

Шаг-4 Стиль навигации шаблона для WordPress.

Благодаря произведённым ранее действиям, наша WordPress тема, обрела пользовательскую навигацию. Но, обычное меню выглядит просто и не привлекательно. Чтобы это исправить, мы создадим класс nav в файле .

Как видите в .nav , мы сделали основные заявления, такие, как цвет фона, ширина навигации, выравнивание и положение элемента на мониторе. Далее, мы задали порядок размещения основных элементов и всплывающих окон.

Завершающим действием, будет добавление стилей для ссылок из выпадающего меню:

В .nav ul ul , мы устанавливаем абсолютную позицию и первую выпадающую ссылку делаем 100% , чтобы она появлялась под основной. Так же, мы изменили фон выпадающего окна, чтобы он отличался от существующего. К общим значениям, был добавлен атрибут z-index:99999 , который заставляет раскрываться выпадающие ссылки, над другими объектами.

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

Шаг-5 index.php.

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

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

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

.

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

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

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

Шаг-7 sidebar.php.

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

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

С помощью div , мы вызываем стили из файла , а код ниже, даёт нам возможность размещать виджеты из админки WordPress, в желаемой последовательности.

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

Этот код, просто говорит WordPress, что нужно зарегистрировать боковую панель, о которой мы заявили в sidebar.php . Для общего ознакомления могу сказать, что WordPress может легко работать в одной теме с несколькими боковыми панелями.

single.php — это то, что будет использоваться для одной страницы поста. Представленный ниже код, будет очень похож на тот, который мы поместили в index.php . Отличие лишь в том, что мы добавили шаблон комментариев с div и код, который должен включить comments.php :

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

Код ниже, нужно положить в Ваш файл comments.php :

Это добавит вашим сообщениям стандартную форму комментариев.

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

Файл category.php , служит для вывода сообщений из определённой рубрики или архива, к которым обращается читатель. Здесь, основная часть кода будет похожа на page.php и single.php , которые мы закодировали выше, за исключением куска в самом начале:

Фрагмент кода ниже, это единственное, что мы добавили после основного цикла:

Здесь мы используем кучу заявлений if/elseif в PHP , которые показывают то, что Вы просматриваете на блоге. К примеру, если мы смотрим категорию под названием — «», то она будет показана в h2 Архив из категории: «» перед всеми записями, разбивая их по датам или авторам.

Шаг-12 Настройка заднего фона сайта.

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

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

В завершении создания вордпресс шаблона, мы добавим кусок кода в footer.php , использующий #footer , который был объявлен в . Наш подвал будет содержать, только основную информацию об авторском праве, а так же RSS ленту новостей и комментариев:

На этом, создание самого простого шаблона (темы) для WordPress окончено.

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

А у Вас, получилось создать свой первый шаблон для WordPress?

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

На сегодня это всё.

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

До новых статей…

С уважением, Денис Черников!

Интересное по теме:

Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:

96 комментариевА что думаете Вы?

    Спасибо огромное за статью! Очень полезная информация для юных верстальщиков! Читал статью по рэпчик... =)

    Денис Черников ответил:
    Ноябрь 3rd, 2012 at 14:38

    Пожалуйста, Александр! Трое суток над ней пыхтел, хотелось, чтобы все всё поняли! Надеюсь, что у меня получилось! Рэпчик рулит!

    Александр Красильный ответил:
    Ноябрь 3rd, 2012 at 15:13

    Да я заметил, что статья не маленькая и куча мелких нюансом. Если их не учесть, то все пойдет наперекосяк! У меня друг занимается чисто версткой, сидит в офисе и зарплата приличная, в районе 4000—5000 грн. При этом он самоучка! Вот и мну есть желание, но не хватает времени...=(

    Архив не удалось установить. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

    Вот что пишется, после того, как я хотел протестить эту тему. В чём тут дело?

    С уважением и благодарностью, Евгений!

    Спасибо за полезную статью. По мне, лучше переделать готовую тему под себя.

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

    Юлия ответил:
    Ноябрь 4th, 2012 at 6:47

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

    И ещё кое-что. На скринах виден не весь код.

    Но всё равно, спасибо за статью! Вы — молодец! Успехов в дальнейшем!

    С уважением, Евгений!

    Спасибо за информацию. Обязательно попробую.

    Денис, я убрал свою старую тему, а установил какую- то сложную и новую. Многих файлов,которые ты описываешь нет, например, single.php,page.php и category.php. Поэтому трудно сооринтироваться, как поступать в такой ситуации. Но вот картинки с миниатюрами меня заинтересовали. Когда нахожусь на главной странице, картинок не видно. Но стоит в поиске ввести пробел и запустить поиск, то все миниатюры сразу появляются. Как ты считаешь, в чем может быть причина?

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

    Денис, и тема полезная, и глаза боятся...

    Пока забил в закладки...

    Попала к Вам случайно, но очень рада!!! Спасибо большое за информацию.

    Статья очень актуальна, ну по крайней мере для меня. Сам вот недавно задался вопросом, как создать свою собственную тему для ВордПресс (шаблон), и нашел вот такую программку — Artisteer. Правда эта прога платная, НО, не для русского человека если Вы понимаете о чем я.

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

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

    Денис, у Вас в некоторых местах код обрывается из-за размеров картинки... А счастье было так близко!

    Отлично, спасибо большое! Я так и думала, что чего-то недопоняла.

    Денис, здравствуйте!

    Большое спасибо за урок. Удалось внедрить свой дизайн) Но вот почему-то возникла проблема со вставкой фото в посты — почему-то не функционирует обтекание текстом фотографий. Это прописывается где-то в шаблоне? Никак не пойму в чем дело... подобных проблем раньше не было.

    Заранее спасибо!

    Денис Черников ответил:
    Март 19th, 2013 at 15:45

    Здравствуйте, Людмила!

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

    Людмила ответил:
    Март 19th, 2013 at 15:57

    Ок, спасибо!

    С точки зрения редактирования и правки кода, настоятельно рекомендую использовать - Notepad++.

    Я пользуюсь Sublime Text 2 — что-то среднее между NotePad++ и небезызвестным TextMate (Mac OS). В окно перетаскиваю проект и он появляется в виде дерева. Очень удобно! Плюс еще куча фишек которые упрощают жизнь получше NotePad++! Очень рекомендую))

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

    Большое спасибо! Попытаюсь всё сделать как написано! Индивидуальный вид намного лучше))

    Добрый вечер.Я новичек,и мне не совсем понятно как в ""Создание необходимых папок и файлов "" мне «„ Внутри этой папки разместите следующие файлы (расширения – PHP, CSS, PNG)“» я напечатала их через Notepad++ а как перенести???

    Еще раз здраствуйте...как мне зделать это????:

    Внутри этой папки разместите следующие файлы (расширения – PHP, CSS, PNG):

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

    я не могу понять как разместить Файлы В ПАПКЕ.При их копировании из блокнота полцчается ерунда.Поясните пож. ивенно как перенести с Notepade++ в папку фаилы.

    Почему у меня злобный аватар?Я вообще добрая .Как мне его сменить???

    Здравствуйте Денис! Я новичок, подскажите пожалуйста как мне запилить тему в ворд пресс, во Внешнем виде/Темы моя тема не отображается...((((

    Спасибо, статья очень помогла!

    только добавьте в footer.php , а то без этого админ панель не видна.

    Денис, доброго времени суток!

    Если честно, я ничего не поняла из написанного...Заслуга в этом не Ваша — у меня знаний ноль абсолютно в этой области и для меня Ваши записи оказались китайской грамотой...Напрашиваюсь либо на некоторые разъяснения (если позволите), либо просто на удаление своего коммента:)

    Как изменить название шаблона, которое для некоторых тем отображается в левом боковом меню админки?

    Попробовала скачать Ваш шаблон — там ни фон, ни шапка не меняется — данные вводятся, цвет выбирается — только на сайте никаких изменений не происходит:)))))

    Здравствуйте! А могли бы мне свертать тему за умеренную плату? Еть представление как хочу видеть вой сайт, есть фото для темы, но нет умений работать с фотошопом и HTML

    Сергей ответил:
    Март 23rd, 2014 at 1:50

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

    Денис Черников ответил:
    Март 23rd, 2014 at 12:12

    Сергей, я промышляю иногда вёрсткой, но не люблю копаться в уже загаженном коде пытаясь найти ту ниточку, которая убила весь сайт! Мне проще с ноля делать, чем искать ошибки на сайтах клиентов. А по скриптам у меня есть отличный мастер, который всё делает грамотно и красиво!

    Сергей ответил:
    Март 23rd, 2014 at 23:59

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

    Помогите, у меня не редактируется styles.css из админки. захожу «внешний вид — редактор», выбираю стилевой файл, но он открывается пустым. по фтп все редактируется, но это не удобно для меня.

    помогите залить самописный сайт на WP (заплачу)

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

    Но пока для сайта выбрана готовая тема, а я совсем «чайник»... Была бы Вам очень признательна за помощь!Итак, мне нужно было на страницу «А» вывести новости только из категории «А». Я скопировала страницу index.php, добавила на нее строку кода и выбрала в качестве шаблона для страницы «А». Теперь на ней отображаются только нужные записи, но все оформление слетело...) чтобы оформление этой страницы не отличалось от оформления сайта, нужно что-то добавить в таблицу стилей? или я изначально все сделала не так? Спасибо)

    Денис Черников ответил:
    Март 30th, 2014 at 21:35

    Елена, я такие консультации не даю! Я понятия не имею что Вы там делаете, а по описанию не всегда понятно!

    Елена ответил:
    Апрель 1st, 2014 at 16:51

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

    Сергей ответил:
    Март 30th, 2014 at 22:37

    Елена Я не уверен что вам это подойдёт но вашу задачу я бы решил при помощи 2х плагинов Display Widgets это плагин который определяет отображение виджетов на любой вам нужной странице а этот Recent Posts Widget Extended делает красивый вывод новостей, но Я повторюсь что так сделал бы Я

    Сергей ответил:
    Март 30th, 2014 at 22:41

    Все таки прочитав и переосмыслив ещё раз понял что этот вариант не очень для вашего Елена вопроса.

    Елена ответил:
    Апрель 1st, 2014 at 17:16

    Сергей, спасибо за Ваш ответ! Попробовала плагин Recent Posts Widget Extended. Полезная вещь) Мне бы вот точно такой же вывод статей, но не в виджетах, а на основной странице) Спасибо!!

    Денис, помогите разобраться с темой.

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

    Думал во время работы с файлами что то потер, но нет...

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

    ЗЫ. Думаю может дело в том что движок обновлен и после обновы что то не так стало. Есть еще вариант попробовать сменить версию php у хостера.

    Денис, спасибо большое за доступную для понимания инфу. Уже давно ищу сайт со стандартными заготовками, которые могли бы служить исходниками для любой темы. Везде описывается так: создается файл index.html, который затем кромсается и разрасывается частями по папкам.php. При этом в index.html для образца размещается обычный и точкованный текст. Но ведь ни в одной теме никакого текста изначально нет (он пишется уже пользователем после создания страницы или записи). После вашей статьи все стало на свои места. Отдельные фрагменты мозаики в голове сложились в единую картинку. Еще раз, спасибо!

    Добрый день, Денис, прочитал статью сделал Всё как Вы написали, НО используя свои записи и цвета,ВСЁ ЗАРАБОТАЛО. Это хорошо))

    ВОпрос: Как перенести сайдбар так чтоб он стал слева, и второй вопрос: а нет у вас статьи как в свой шаблон сунуть свои же картинки (то есть есть дизайн в PSD уже нарезанный, хочу его слить с шаблоном).

    Заранее спасибо за ответ.

Привет, друзья! Вы решили создать свой сайт, но не знаете с чего начать? А обращаться к профессиональным разработчикам слишком дорого? Не унывайте! Я помогу вам, подробно рассказав, как создать сайт на WordPress бесплатно. У вас есть 2 варианта: сделать все самим по инструкции ниже либо пойти на бесплатный тренинг и сделать все с тренером и командой поддержки.

Если вы выбрали первый вариант, то читаем инструкцию и делаем все по шагам. Если выбрали второй, то приходите на мой бесплатный 4-х дневный курс по созданию сайтов и я открою для вас множество секретов! Чтобы записаться на обучение — переходите по ссылке: и регистрируйтесь. Моя инструкция – пошаговая. Поэтому у вас не возникнет проблем с тем, чтобы воплотить в жизнь свою мечту. Единственное, о чем хотел бы вас предупредить – будьте готовы к тому, что вам придется много работать. Успех просто так никому не дается!

Как создать сайт на WordPress бесплатно и почему именно WordPress?

Я буду рассказывать вам, как создать сайт на WordPress бесплатно. Но, вероятно, у наиболее любопытных обязательно возникнет вопрос – а почему, собственно, WordPress? Ведь есть и другие системы, позволяющие создавать веб-ресурсы. Например, Drupal или Joomla.

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

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

Кстати! Если вы умеете работать в текстовых редакторах, у вас не возникнет проблем с публикацией и оформлением текстов. А вот на таких движках, как Drupal или Joomla есть некоторые сложности даже с этой простой опцией.

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

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

1. Регистрация в хостинге

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

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

Пошаговая инструкция как зарегистрироваться в хостинге (видео):

Для регистрации в хостинге TimeWeb перейдите по ссылке

2. Подбираем доменное имя

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

Обратите внимание! Если вы ведете личный блог, то можно использовать просто фамилию. Например, доменное имя будет иметь следующий вид petrenko.com. Но это не значит, что если сайт посвященным мобильным телефонам, в качестве имени нужно использовать название телефона – такой вариант заведомо проигрышный.

Для названия сайта можно писать русские слова латиницей. Например – futbol.ru. Хотя, конечно, в идеале рекомендуется использовать правильные английские слова, написанные без ошибок. Это придаст солидности сайту. Регистрация доменного имени проводится на специальных сайтах. Ничего сложного в этом нет – следуйте инструкция сайта и все у вас получится.

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

Пошаговая инструкция как подобрать и зарегистрировать доменное имя (видео):

Но! Важный момент: если вы хотите сторонний домен с какой-то необычной доменной зоной (к примеру.com.ua), то смотрим видео как купить отдельный домен и привязать его к хостингу:

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

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

Шаг 1

Шаг 2

4. Устанавливаем тему оформления

Найти тему для WordPress не проблема – их полно в Интернете в свободном доступе. Среди них можно найти массу интересного и необычного.

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

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

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

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

Инструкция по подбору и установке темы для сайта (видео):

5. Контент и структура сайта

Рассказывая о том, как создать сайт на WordPress бесплатно, нельзя пройти мимо наполнения сайта контентом.

Под контентом подразумевается любая информация, представленная в разных формах:

  • статьи;
  • фотографии;
  • диаграммы;
  • видео и т.д.

Работать в административной панели просто. Не нужно ничего бояться – вы не испортите и не сломаете сайт!

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

  • страницы и записи;
  • рубрики;
  • виджеты.

К страницам относятся те разделы, что являются статическими элементами общей структуры – это:

  • Главная;
  • О сайте (О нас, О авторе);
  • Контакты.

Обратите внимание! Страницы «О сайте» и «Контакты» — обязательны. Их наличие, а также адекватная информация формируют доверие пользователя к сайту.

О главной

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

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

  • Футбол;
  • Волейбол;
  • Баскетбол;
  • и т.п.

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

О виджетах

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

  • Прогноз погоды;
  • Календарь;
  • Свежие записи;
  • Форму авторизации;
  • и многое др.

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

Что нужно продумать перед тем, как создавать сайт

Рассказывая о том, как создать сайт на WordPress, хочу отметить следующее – перед тем, как делать свой веб-ресурс, определитесь со следующим:

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

Постарайтесь максимально полно описать все пункты. Это поможет вам сделать действительно функциональный и полезный сайт.

6. Плагины для WordPress: какие выбрать

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

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

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

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

WordPress SEO от Yoast

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

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

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

RusToLat

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

Пожалуй, его нужно устанавливать вторым после Akismet.

Anti-XSS attack

Плагин, необходим для повышения уровня безопасности сайта. Он защитит от XSS-атак.

MaxSite Russian Date

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

Russify Comments Number

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

Subscribe to Comments

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

Dagon Design Sitemap Generator

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

Google XML Sitemaps

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

WP-NoRef

Все ссылки, которые будут публиковаться на вашем сайте, автоматически закрываются от индексации поисковыми системами. Они помещаются в специальный тег теги noindex с добавлением атрибута rel со значением nofollow. Благодаря этому вы не будете передавать «вес» своего ресурса сайтам, на которые стоят ссылки. Что благоприятно скажется на продвижении.

Disable WordPress Updates

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

Hyper Cache

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

WordPress Related Posts

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

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

Video Embedder

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

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

WordPress Audio Player

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

Advertising Manager

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

Использование плагина позволит вам помещать рекламные блоки фактически в любых частях сайта:

  • в шаблоне;
  • в статьях;
  • и т.д.

Он помогает в размещении любых блоков. Даже от сервиса Google Adsense – все будет выполняться быстро и просто.

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

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

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

После установки понравившегося вам плагина вы сможете:

  • выбрать кнопки определенных сетей;
  • выбрать их размер;
  • выбрать их месторасположение на сайте.

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

7. Оптимизация ускорения загрузки страниц

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

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

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

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

8. Финансирование и прибыль

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

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

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

А для этого потребуются определенные знания, умения. Опыт – не обязателен, его вы получите в процессе работы, а вот знания обязательны.

Что нужно знать для создания успешного сайта на WordPress

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

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

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

  • текстовыми редакторами;
  • графическими редакторами.

Обратите внимание! Для более глубокой проработки сайта потребуются знания кодировки – html, css и php. Хотя на начальном этапе можно обойтись и без них, но в будущем желательно все же изучить код.

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

Кстати! SEO весьма интересное направление. Потратив время и деньги на его изучение, вы узнаете много нового и полезного для вас. А впоследствии сможете даже зарабатывать деньги, продвигая чужие сайты.

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

  • Яндекс Вебмастер;
  • Google AdWords‎.

Поможет в этом и специальная программа KEYCollector.

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

Как создать сайт на WordPress: подводя итог

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

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

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

Если у вас еще остались вопросы, то пишите их внизу в комментариях.

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

Что выберете вы — это полностью ваше решение.

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

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

Почему лучше писать сайт на движке Вордпресс

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

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

  • поддерживать PHP (уточняйте версию в зависимости от обновления движка);
  • MySQL (аналогично проверьте соответствие версии);
  • содержать модуль mod_rewrite для человекопонятных ссылок (по желанию);
  • хостинг должен принимать удаленные соединения.

Планирование перед запуском сайта

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

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

Далее подготовьте программную составляющую — скачайте все необходимое ПО на компьютер, чтобы потом не делать это в спешке. Во-первых, установите правильный текстовый редактор. Он может понадобиться для редактирования отдельных элементов вашего проекта. Не волнуйтесь, в Интернете есть инструкция для всех этапов создания чего-либо для сайта, будь то дизайн, плагин или виджет. Лучшие редакторы — это Kwrite, Notepad++, Website Editor, JEdit и Coda. Кроме программы для редактуры кода, вам понадобится также FTP-клиент для переноса и изъятия данных с сервера. Лучший в своем роде — это FileZilla. Установите его или какой-либо другой.

Установка Вордпресс

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

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

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

В распакованном дистрибутиве вы найдете файл wp-config-sample.php. Вам необходимо переименовать его, оставив только wp-config.php. Именно на этом этапе вы и воспользуетесь помощью предустановленного ранее текстового редактора. Чтобы сайт на движке заработал, необходимо правильно указать информацию о базе данных, созданной на хостинге. Вам предстоит кое-что добавить в файле wp-config.php (писать много не придется):

  • напротив DB_NAME впишите имя БД (базы данных);
  • возле DB_USER укажите имя пользователя;
  • там где DB_PASSWORD пропишите пароль;
  • около DB_HOST обычно нужно указывать localhost, но не всегда (воспользуйтесь помощью поддержки сервера, чтобы это узнать);
  • DB_CHARSET (также выясняйте в службе поддержки);
  • DB_COLLATE (если не требуется, то не меняйте эту строку).

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

Если вы следовали данным шагам, значит вы уже вплотную подобрались к завершающему пункту установки. Теперь вам следует перейти по ссылке http://доменное_имя.ру/ wp-admin/install.php. URL будет иметь такой вид, если вы разместили движок в корневой папке. Если это не так, то возможно в данную цепочку нужно будет добавить еще пару названий директорий, куда вы загрузили дистрибутив.

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

Настройка движка после установки

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

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

Один из основополагающих моментов — это разработка структуры сайта. Загляните в вашу карту (план) действий — какой вы планировали создать проект? Определите несколько ключевых идей, какие вы планируете продвигать и создайте под них родительские рубрики. А уже к этим категориям добавьте дочерние разделы и подразделы, которые будут находиться ниже по иерархии. Настройте главную страницу, определив ее как динамичную (с размещением последних записей) либо как статическую.

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

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

Новая тема оформления устанавливается на сайт пошагово:

  1. Скачайте и разархивируйте шаблон на компьютере.
  2. Создайте на хостинге в разделе wp-content/themes папку с названием скачанной темы.
  3. Переместите файлы шаблона при помощи FTP-клиента на хостинг.
  4. Войдите в административную панель в профиль пользователя с правами админа.
  5. Откройте вкладку «Внешний вид», раздел «Темы».
  6. Выберите нужный шаблон из доступных тем.
  7. Активируйте его.

Как создать форум, блог соавторов и другой формат сайта? Как добавить новые функции?

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

Как создать форум на Вордпресс при помощи плагинов

Нет ничего сложного в том, чтобы превратить ваш ресурс в форум. В Интернете есть ни один бесплатный плагин для этих целей. Разберем несколько модулей, которые вам подойдут (платные и бесплатные). Лидером среди подобных дополнений считается WP Symposium. Чтобы активировать его, вам даже не придется влазить в директории на сервере. Достаточно зайти в административную панель во вкладку «Плагины». Там вы увидите кнопку «Добавить новый» и «Загрузить». Нажимаете и указываете расположение модуля на компьютере. После его загрузки на движок вы сможете активировать его.

У каждого плагина есть свои особенности. Чтобы добавить форум при помощи WP Symposium, вам необходимо будет воспользоваться шорткодами. Это короткие коды-отсылки, которые активируют функции модуля в нужном месте на сайте. Инструмент сам сгенерирует такой код. Вам необходимо будет лишь разместить его в положенном месте в структуре страницы. После добавления шорткода на сайте появится форум с множеством категорий, веток и целым перечнем возможностей пользователя.

bbCode — это другой популярный инструмент, который поможет вам бесплатно создать форум на страницах сайта. Эта разработка вполне заменит целый комплекс плагинов, так как позволяет создать полностью автоматизированный сервис обсуждений и переписки людей. В модуле есть встроенная защита от взломов аккаунтов и функция борьбы со спамерами. Вы сможете добавить до 7 различных виджетов на сайт. Также есть функция прикрепления отдельных постов сверху страницы, для выделения важных тем. bbCode хорошо работает с интеграцией каких-либо БД, потому сможете загрузить в него любое содержимое. В итоге получите замечательный форум.

Еще один популярный формат форума, разработка, пришедшая в Рунет из Запада — это сайты вопросов/ответов. Ныне такие ресурсы пользуются огромной популярностью и хорошо индексируются поисковиками. Потому если создать хороший и интересный проект, вполне вероятно, что пользователи сами раскрутят его. А поможет в создании плагин CM Answers, который как раз и предназначен для генерации вопросно-ответного форума.

Как добавить карту и другие функциональные элементы на сайт WordPress

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

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

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

В WordPress можно создавать страницы (page) и записи (post). Отличаются они тем, что записи: попадают в ленту на главной странице; для записей указываются категории; записи не могут быть древовидными, а страницы: используются для такого содержимого как "Обо мне", "Контакты", "Карта сайта"; не имеют категорий, а имеют древовидную структуру. Записи обычно предназначены для хронологической информации (по времени добавления), а страницы для древовидной структуры не зависимой от времени. Для примера, эта статья опубликована как "запись" в рубрике "Кодекс", а ссылки в меню шапки ведут на страницы: Функции .

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

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

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

Способ 1: шаблон страницы через файл с произвольным названием и подключением его в админ-панели (классический способ)

Это самый распространенный способ создать шаблон страницы в WordPress. Для этого нужно создать.php файл, например, tpl_my-page.php в папке темы и в самом начале файла вписать пометку, что созданный файл является шаблоном для страниц:

Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать "шаблон":

С версии WordPress 4.7. такие шаблоны страниц можно создать для любого типа записи, а не только для page. Для этого дополните комментарии строкой: Template Post Type: post, page , где post, page - это названия типов записей к которым относится шаблон.

/* Template Name: Мой шаблон страницы Template Post Type: post, page, product */

Преимущества:

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

  • Можно получить только записи с указанным шаблоном. Например, можно вывести все страницы с шаблоном «Услуги» (файл servises.php). Иногда это удобно. Название файла шаблона хранится в метаполе _wp_page_template , поэтому чтобы вывести страницы с указанным шаблоном нужно создать запрос по метаполю (см. WP_Query).

Недостатки:

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

Как это работает:

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

Template Name: ***

Строка может располагаться где угодно и как угодно в файле.

Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок "Атрибуты страницы".

При публикации страницы, в произвольное поле _wp_page_template записывается название файла шаблона или default , если шаблон не указан:

Wp_page_template = default
_wp_page_template = tpl_my-page.php

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

Способ 2: шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)

При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить:


Для создание шаблона этим способом, вам нужно узнать слаг страницы и создать файл в папке темы. Допустим, наш слаг как на картинке равен contacts , тогда создадим в теме файл page-contacts.php . и заполним его нужным кодом (можно скопировать содержимое из файла шаблона page.php и отредактировать под себя). Все, теперь при посещении страницы мы должны увидеть новый шаблон. Аналогично можно взять ID (пусть 12) страницы и создать файл page-12.php .

Достоинства:

Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке.

Недостатки:

Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID).

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

Как это работает:

WordPeress подбирает какой файл использовать в следующем порядке (файлы должны быть в корне темы):

  • {любое_название}.php (когда используется шаблон страницы)
  • page-{ярлык_записи}.php
  • page-{ID_записи}.php
  • page.php
  • singular.php
  • index.php

Способ 3: шаблон страницы через фильтр "template_include" (коддинг)

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

// фильтр передает переменную $template - путь до файла шаблона. // Изменяя этот путь мы изменяем файл шаблона. add_filter("template_include", "my_template"); function my_template($template) { # аналог второго способа // если это страница со слагом portfolio, используем файл шаблона page-portfolio.php // используем условный тег is_page() if(is_page("portfolio")){ if ($new_template = locate_template(array("page-portfolio.php"))) return $new_template ; } # шаблон для группы рубрик // этот пример будет использовать файл из папки темы tpl_special-cats.php, // как шаблон для рубрик с ID 9, названием "Без рубрики" и слагом "php" if(is_category(array(9, "Без рубрики", "php"))){ return get_stylesheet_directory() . "/tpl_special-cats.php"; } # шаблон для записи по ID // файл шаблона расположен в папке плагина /my-plugin/site-template.php global $post; if($post->ID == 12){ return wp_normalize_path(WP_PLUGIN_DIR) . "/my-plugin/site-template.php"; } # шаблон для страниц произвольного типа "book" // предполагается, что файл шаблона book-tpl.php лежит в папке темы global $post; if($post->post_type == "book"){ return get_stylesheet_directory() . "/book-tpl.php"; } return $template; }

Такой код нужно разместить в файл темы functions.php или в плагин, или подключить как-то еще. Как видно из примера во время фильтра template_include уже работают условные теги, установлены глобальные переменные: $wp_query , $post и т.д.

Достоинства:

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

  • Можно создать шаблон при написании плагина.

Недостатки:

Необходимость писать код и отдельно его подключать (например, в functions.php темы).