Как сделать уникальный шаблон для wordpress своими руками за час. Создание простой Wordpress темы
08.07.2019
Только следует учесть, что вордпресс генерирует некоторые классы, которые должны присутствовать в таблице стилей. К примеру классы aligncenter, alignleft и alignright
служат для выравнивания изображений и блочных элементов, и их нужно включить в свою таблицу стилей (можно скопировать из таблицы стилей дефолтной темы):
Следующие классы используются для выравнивания изображений, которые имеют подписи (можно скопировать из дефолтной темы, в дальнейшем при необходимости поправить):
Кроме того, существует еще несколько классов WordPress, которые необязательно описывать в таблице стилей, но, т.к. WordPress генерирует страницы с их использованием, можно и им задать стиль:
.categories {...} .cat-item /* Этот класс присваивается всем категориям */} .current-cat {/* стиль текущей категории */} .current-cat-parent {/* стиль для предка(ов) текущей категории */} .children {/* класс для потомка */} .pagenav {/* постраничная навигация */} .page_item {/* любой элемент списка */} .current_page_item {/* этот класс присваивается в списке страниц к текущей активной странице */} .current_page_parent {/*класс для родительской страницы по отношению к текущей */} .current_page_ancestor {/* любая страница верхних уровней по отношению к данной */} .widget {/* все виджеты обворачиваются в этот класс */}
В процессе верстки используйте блоки и стили к ним, как это определено в скринах в начале статьи. Это не обязательно, но очень даже желательно.
К примеру в дальнейшем мы подключим поисковую форму на сайт через спец. тег wordpress , в результате чего wordpress выведет такую форму:
Поэтому учитываем это при верстки темы.
И последнее, что нужно добавить в style.css это информацию о себе любимом и о созданной теме. Информация размещается в начале файла в коментах:
/* Theme Name: Придумайте уникальное имя темы Theme URI: http://ссылка-на-домашнюю-страницу-темы Description: Описание темы Author: Автор темы Author URI: http://ссылка-на-страницу-автора Template: название-темы-предка Tags: теги темы - только из списка предлагаемого wordpress.org Version: версия Ну и здесь текст лицензии */
Также не забудьте сделать screenshot.png
и положить его в папку с шаблоном (в корень). Информация, размещенная таким образом в таблице стилей, будет отображаться в админке в разделе Управление «темами»
. Сверстанный шаблон тестируем в браузерах, если все норм, можно идти далее.
Код страниц сверстанного шаблона приводить не буду, т.к. он достаточно большой, вы его просто скачайте , далее будем работать с ним.
Принцип работы wp-темы
:
Если вы откроете папку темы по умолчанию (wp-content/themes/default), вы увидите множество файлов PHP (файлы темы) и одного файла style.css. Когда мы просматриваем блог, WP подключает файлы темы (index.php <
На этом предварительная подготовка закончена и мы можем перейти к созданию темы из имеющегося исходного материала.
Шаг 1:
Для начала в директории тем вордпресса (wp-content/themes) создайте папку с именем нашей темы. Пусть это будет ruseller_lessons
. Затем из папки темы по умолчанию (wp-content/themes/default) скопируйте файлы comments.php, search.php
и 404.php
в папку нашей темы. Эти файлы отвечают за комментарии и поиск на блоге. Затем в ruseller_lessons
скопируйте таблицу стилей style.css
нашего шаблона, screenshot.png (300x225)
и папку images
.
Теперь файлы нашего шаблона нужно "распилить", т.е. вытащить в отдельные файлы footer, sidebar и header. Схема показывает упрощенный вид файла index.php
с метками, согласно которым будем его пилить:
Шаг 2
- Header.php
Открываем index.html
и вырезаем все, что находится до коментария , создаем новый файл header.php
и вставляем в него вырезанный код, сохраняем в директории нашей темы ruseller_lessons
:
index.html
My Blog
Blog Description
Home
About
Portfolio
Links
Contact
Теперь идем в папку с дефолтной темой, открываем header.php
и копируем оттуда теги , ,
, and
и ими заменям соответствующие строки в нашем header.php
.
Затем все теги
, находящиеся id="nav"
(список страниц в верхней части блога) заменям на функцию вордпресса
В итоге получаем:
" type="text/css" media="screen" /> " />
/">
Шаг 3 - Sidebar.php
Возращаемся к файлу index.htm. Первым делом удаляем всю форму поиска, затем вырезаем из него все от
до sidebar.php
и сохраняем его в директории нашей темы. Теперь в полученном коде заменяем все, что между тегами
вызовом сайдбаров, получаем следующий код:
Таким образом мы вызываем 2 сайдбара. Если вы смотрели Sidebar.php
дефолтной темы, то заметили, что кода там гораздо больше. Дело в том, что там просто прописано дополнительное условие, которое по умолчанию выводит архив и категории, в случае, если админ не подключил ни одного виджета к сайдбару. Мы это условие прописывать не будем.
Чтобы наши сайдбары заработали, их необходимо зарегистрировать. Для этого в директории темы создаем файл functions.php
и в нем пишем:
Осталось подключить форму поиска. Сделать это можно либо из админки путем добаления виджета в один из сайдбаров, а можно вызвать ее в sidebar.php
, что мы и сделаем. В самом начале добавляем:
...............................................
Шаг 4 - Footer.php
Возращаемся к файлу index.html и вырезаем из него все от
По нашему шаблону здесь же мы должны вывести последние записи блога (Recent Posts) и последние коментарии (Recent Comments). Последние записи будем выводить в количестве 5 штук - showposts=5
. Заменям все внутри
:
" rel="bookmark" title=" ">
Вывод последних коментариев сделаем с помощью плагина simple_recent_comments.php , скачайте его и положите в папку нашей темы. Теперь в нужном месте его нам нужно вызвать (заменям содержимое блока
):
Recent Comments", ""); } ?>
Шаг 5 - Index.php
Все что осталось в index.html
сохраняем как index.php
в папку с нашей темой, затем подключаем вызов header
, sidebar и footer
:
Oct13
Sample Blog Entry
News3 comments
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more...
Previous EntriesNext Entries
Шаг 6 - Вывод записей блога на странице index.php
Следующий рисунок демонстрирует принцип вывода записей блога. Сначала идет проверка, есть ли сообщения в базе, если нет выводит "Not Found". Если есть, выводит в цикле while
.
Открываем наш index.php и заменям статичный текст между
..
функциями (тегами) wordpresspost date, title, category, comments, next и previous
. Ориентируясь на рисунок выше получаем:
">
Ничего не найдено
Теперь тема должна уже быть доступна из админки в списке тем, ее можно активировать и посмотреть, что вышло.
Мы использовали теги Wordpress:
the_time("M"), the_time("j") -
вывод месяца и дня соответственно the_permalink()
- отображает постоянную ссылку записи the_title_attribute()
- заголовок текущей записи. the_title()
- заголовок записи или страницы the_category(", ")
- ссылку на категорию или категории, к которым принадлежит запись comments_popup_link -
выведет ссылку для комментариев во всплывающем окне если comments_ popup_script() используется, иначе выводит обычную ссылку на комментарии. the_content
- выводит содержание текущей записи. Если используется тег то сообщение показывается только до (только на главной странице, на странице записи будет показываться полностью). next_posts_link
- ссылка на предыдущие сообщения. previous_posts_link -
ссылка на следующие сообщения.
Шаг 7- Single.php Этот файл мы создадим из только что законченного index.php
, немного изменив его:
"
Pages: ", "after" => "
", "next_or_number" => "number")); ?>
Ничего не найдено
wp_link_pages
- Выводит ссылки на странице в многостраничном сообщении (при использовании ). comments_template()
- Подключает файл шаблона comments.php
из текущей папки темы previous_post_link(" %link"), next_post_link("%link")
- выведет заголовки предыдущей и следующей записи
Шаг 8 - page.php
Этот шаг проще предыдущего. Файл single.php
сохраняем как page.php
. Удаляем из page.php
вывод даты, комменты, next/previous:
"
Pages: ", "after" => "
", "next_or_number" => "number")); ?>
Ничего не найдено
На этом можно и закончить. Основные файлы темы мы собрали. Вероятно вы заметили, что в дефолтной теме больше файлов. Например archive.php
, он не является обязательным. Однако если мы подключим виджет "Архивы" или "Календарь" в сайдбаре и перейдем в какой - нибудь архив по дате, записи по выбранной дате выведутся на индексной странице
, поэтому вполне можно обойтись без archive.php
:)
Финал
. Иногда нужно/полезно вывести на странице заголовки всех записей. Для этой цели воспользуемся тегом wordpress query_post
:
/* Template Name: Archives */ ?>
" title="">
|
query_posts("showposts=-1");
- выведет все записи. Сохраним это в файл archives.php
. Обратите внимание на комментарии в начале кода Template Name: Archives
, он здесь обязателен (далее вы поймете почему)
Идем в админку и создаем новую страницу. Указываем только заголовок и указываем в "Атрибутах" шаблон Archives
, сохраняем страницу. И теперь на этой странице у нас будут выводиться все записи по шаблону archives.php
, который мы описали чуть выше:
На сегодня это все. Спасибо за внимание.
P.S собранная тема тестировалась на WordPress 2.8.5. Конечный результат скачать можно . Аналогично попробуйте создать свою тему, уверен, у вас получиться!
Статья сборная, источники: http://www.webdesignerwall.com, http://themetation.com, http://codex.wordpress.org
Приветствую вас, мои уважаемые читатели! Рад вас видеть 🙂
Мы продолжаем серию статей, призванных помочь вам в создании сайтов с применением различных CMS. Для тех, кто не знает, что это такое и с чем его едят, рекомендую ознакомиться со статьей о .
В ней вы узнаете о том, как вообще можно сделать сайт не только своими руками, но и как их разрабатывают престижные веб-студии.
Но почему из всех способов я уделяю внимание созданию сайтов на CMS наибольшее внимание? Все предельно просто 🙂
Как я уже говорил в своих предыдущих публикациях, на сегодняшний день это один из самых перспективных и простых способов разработки сайтов, не требующих от разработчиков больших знаний и усилий.
А поскольку цель ведения данного блога – это помочь вам, мои читатели, в создании сайта своими руками, то и внимание данному способу я уделяю соответствующее. Ведь это идеальный вариант для вас, позволяющий обзавестись собственным веб-проектом максимально быстро, просто и без лишних затрат.
Я уже написал цикл статей, посвященных самостоятельному созданию Интернет-магазинов на базе — одного из самых популярных бесплатных движков для этих целей.
Данной статьей мы открываем новый цикл публикаций, посвященный самостоятельному созданию сайтов на WordPress, в котором будут рассмотрены особенности разработки различных типов сайта на данной платформе.
Также вас ждет обзор необходимых плагинов для достижения поставленных вами целей и различные примеры кода для ситуаций, когда можно обойтись без сторонних компонентов.
Откуда лучше всего скачивать дополнения для WordPress, как их правильно устанавливать, а также, зачем нужен код, если есть масса виджетов, тем и плагинов, — обо всем этом читайте далее.
Все, что от вас потребуется для получения этой полезной информации – подписаться на обновления , чтобы вам на email приходили уведомления о выходящих статьях. Будет очень интересно! 🙂
Переходим непосредственно к теме сегодняшней статьи, которая посвящена тому, как создать блог на WordPress
своими руками.
План статьи будет следующим. Вначале я расскажу вам немного о CMS WordPress, а потом нами будет рассмотрен непосредственно процесс установки данного движка, как самого первого и главного этапа .
Поэтому если вы уже наслышаны о данном движке и всё, что вам нужно – это создать свой блог на WordPress, то можете пропустить первую часть и перейти непосредственно к практическим действиям.
Поехали 🙂
Почему люди предпочитают создавать блоги на WordPress?
В Интернете при поиске информации по поводу создания собственного блога, наверное, на каждом сайте можно найти упоминания о данной CMS. При этом авторы иногда даже забывают сказать, что есть альтернативные способы обзавестись данным типом сайта.
В целом, их можно понять, т.к. WordPress – это очень простой и, в тоже время, мощный инструмент, чтобы завести блог всем желающим, не зависимо от их уровня знаний. Поэтому нет необходимости «изобретать велосипед» 🙂
Изначально WordPress разрабатывался как блоговый движок и остается таким по сей день. Поэтому все, что вам нужно для того, чтобы создать свой блог на WordPress – это установить его.
Сегодня существует огромное множество CMS и блоговых платформ как на платной, так и на бесплатной основе, прдназначенных для разработки блогов. Но, тем не менее, Вордпресс уже на протяжении длительного времени является лидером данного сегмента услуг, заслужив любовь и уважение пользователей по всему миру.
Причем, к данному движку при разработке сайтов прибегают не только неопытные пользователи, решившие побыстрее запустить свой первый сайт, но и профессиональные разработчики и веб-студии, что свидетельствует о серьезности данной CMS, делающей ее пригодной для сайтов любой сложности.
4 причины для создания блога на WordPress
Во-первых
, это простота использования.
Поскольку блог – это не самый сложный тип сайта, то разработчики WordPress выбрали правильный вектор развития своего творения, максимально успростив его интерфейс.
Это касается как пользовательской части (то, что видит пользователь при переходе на ваш сайт), так и кабинета администратора, где все элементы структурированы и не вызывают проблем с их нахождением.
Во-вторых
, это простота разработки и доработки существующих сайтов, что очень на руку разработчикам.
Иногда веб-программисты даже шутят по этому поводу, говоря, что сделать блог на WordPress может даже ребенок 🙂
Несмотря на то, что WordPress не имеет MVC-структуру кода, которая среди разработчиков считается чуть ли не эталонной, работать с ним весьма удобно.
Для всех, кто решил создать блог на Вордпресс, доступно огромное число функций. И их число пополняется с каждой новой версией движка.
К тому же в движке по умолчанию доступен редактор кода, позволяющий вносить правки на сайт прямо из админки, находясь при этом абсолютно в любой точке земного шара и не имея соответствующего набора программ.
Про себя могу сказать, что я начал свой путь веб-разработчика с CMS OpenCart, после которого WordPress мне показался детским лепетом – настолько просто с ним работать, причем, это касается как верстки, так и непосредственно программирования.
И это при том, что OpenCart- не самый сложный движок из существующих.
Так что если вы являетесь начинающим разработчиком, который в поисках CMS для старта, WordPress будет для вас идеальным вариантом, после которого вы, возможно, и не захотите пробовать что-то другое.
Тем более, что знание данной CMS поможет вам иметь хороший доход ввиду огромного числа сайтов на базе WordPress (на всех зарубежных фриланс-ресурсах заказы на доработку wordpress-базированных ресурсов составляют более 50% от общего числа).
Третьей причиной
создания блога на WordPress является огромное количество документации.Этот момент находится в прямой зависимости с популярностью самого движка. Чем больше спрос, тем больше и предложение 🙂
При поиске ответов на вопросы, возникающие у меня при создании данного блога (да, я не оригинален, — он тоже сделан на WordPress:-)) я нашел массу статей, чего не встречал при разработке на OpenCart, где их можно было найти только на форумах.
Причем, это были не пустые публикации с какими-то авторскими методиками и ссылками на партнерки, а реальные советы со списком рабочих плагинов и фрагментов кода.
Четвертой причиной
популярности WordPress является возможность создавать на базе данного движка различные типы сайтов.
Данный момент, как и предыдущий, является как причиной популярности данного движка, так и ее следствием.
Сегодня, кроме того, как сделать блог на WordPress, данный движок подойдет для создания интернет-магазинов, видеохостингов, форумов и каталогов.
Причем, из блога в другой тип сайта ресурс на WordPress превращается посредством установки всего одного-единственного, но правильно подобранного плагина или шаблона.
Поэтому созданию каждого типа ресурса, входящего в современную , на WordPress я посвящу отдельные статьи. Сейчас же самое время поговорить о том, с чего этот процесс начинается, — об установке WordPress.
Как создать свой блог на WordPress – подготовка к установке
Итак, как я сказал ранее, на данный момент WordPress подходит для создания различных типов сайтов. Но, независимо от типа ресурса, движок сначала нужно скачать и установить.
При скачивании установщика движка не нужно оригинальничать и искать какие-то ссылки на форумах и сторонних сайтах, рискуя скачать некачественный продукт или подцепить вирус.
Лучший вариант – скачать дистрибутив с официального сайта https://ru.wordpress.org
На его главной странице расположена кнопка «Скачать», при нажатии на которую вы получите установочные файлы самой последней версии данной CMS.
Теперь инсталлятор у вас есть. Что же делать дальше?
Сейчас у многих хостинг-провайдеров в перечне их услуг можно найти услуги хостинга для сайтов на различных CMS. Это значит, что они помогут вам в установке движка прямо на хостинг.
Если ваша цель – это сделать блог на WordPress, то вам нужно будет выбрать данную CMS из списка всех предложенных на экране автоматической установки, попасть на который вам поможет техническая поддержка вашего хостинг-провайдера.
В случае же, когда вы решили создать WordPress блог сперва на локальном сервере, а затем перенести его на хостинг (что является правильным подходом), то для этого вам необходимо будет произвести действия, описанные ниже.
Также данный алгоритм будет справедлив, если у вашего хостинг-провайдера нет автоматической установки или вы по каким-то причинам решили от нее отказаться.
Как создать блог на WordPress – установка движка
Шаг 1.
Копируем скачанный дистрибутив в папку проекта на локальном сервере или хостинге.
Лично я при создании сайтов предпочитаю использовать локальный сервер, а затем переносить готовый ресурс на хостинг. При этом я пользуюсь продуктом под названием OpenServer.
Итак, я создал папку под названием «MyWP», которое будет являться автоматически именем моего сайта, скопировал туда дистрибутив и распаковал его.
Заходим в распакованный каталог и копируем содержимое папки «wordpress» в каталог сайта. Не забываем удалить архив и распакованный каталог. В итоге у вас должно получиться следующее.
Шаг 2.
Создание БД сайта
– это хранилище, в котором будет храниться вся доступная на нем информация. Ее наличие – это обязательное условие при создании сайта любым способом.
Тем, кто решил создать блог на Вордпресс, как и с помощью других CMS, разрабатывать структуру БД самостоятельно нет надобности, т.к. установщик все сделает сам. Единственное, что требуется при установке — указать ее наименование.
Поэтому, чтобы не отвлекаться в процессе установки, создадим базу данных будущего сайта сейчас.
Для этого заходим в программу phpMyAdmin либо какой-то другой клиент БД, доступный на вашем локальном веб-сервере или хостинге.
Для создания новой БД перемещаемся на вкладку «Базы данных», вводим имя вашей БД в пустое поле и нажимаем «Создать»:
Если вы все сделали правильно, то в списке баз данных должно появиться наименование, которое вы только что ввели.
Шаг 3.
Автоматическая установка WordPress
Приятной отличительной особенностью создания сайтов на CMS является полная автоматизация процесса. Все, что нужно для получения готового сайта — это запустить процесс установки, а далее система все сделает сама.
Поэтому для того, чтобы создать блог на WordPress, мы заходим в любой веб-браузер и вводим в адресной строке доменное имя вашего сайта (имя папки на локальном сервере или хостинге, куда вы копировали дистрибутив). Если ничего не произошло, проверьте, запущен ли у вас локальный сервер и есть ли соединение с Интернетом.
Иногда, при использовании локального сервера и давая сайтам простые названия без доменных зон вроде.com, .ru, .com.ua браузер воспринимает такой адрес как поисковый запрос, поэтому ищет данное слово в поисковой системе, установленной по умолчанию.
При этом в браузере всплывает небольшое сообщение под адресной строкой с текстом: «Вы действительно хотите перейти на «имя сайта»?».
Если этого не произошло, для того, чтобы все-таки попасть на свой сайт, нужно либо ввести в адресную строку «http://доменное_имя_сайта», либо воспользоваться интерфейсом локальных веб-серверов.
Например, в OpenServer попасть на сайт, расположенный на нем, можно следующим способом:
Если в этом списке вашего сайта нет, перезапустите веб-сервер. Если он снова не появился – проверьте правильность выполнения предыдущих шагов.
Когда все выполнено верно, в браузере появится следующий экран:
Его появление значит, что запустилась автоматическая установка, позволяющая создать блог на WordPress в течении 5 минут.
Также для создания блога на WordPress вам необходимо будет узнать имя пользователя и пароль для доступа к БД. Эта информация предоставляется вашим хостинг-провайдером. При использовании локального сервера вам нужно найти ее в руководстве к продукту, которым вы пользуетесь или поискать ответа в Интернете (в большинстве случаев Пользователь – «root», Пароль пустое поле).
Адрес сервера БД понадобится только в случае, если у вас очень большой проект и для распределения нагрузки компоненты вашего сайта расположены на различных серверах или же такая структура сайтов характерна для вашего хостинг-провайдера.
В любом случае, при любых неясностях стоит обратиться в техническую поддержку хостинга, объяснив им, что вы хотите создать блог на WordPress и обрисовав характер вашей проблемы.
Во всех остальных случаях сервер БД будет «localhost».
На следующем экране установки нужно всю эту информацию ввести в соответствующие поля:
Как видите, ничего лишнего, только самые необходимые данные, поэтому проблем с заполнением возникнуть не должно.
Единственный вопрос, который может возникнуть у тех, кто решил создать блог на WordPress впервые, это назначение поля «Префикс таблиц».
Но здесь всё очень просто – данный префикс будет добавлен перед именами таблиц в БД, чтобы ассоциировать их с сайтом.
Благодаря этому механизму в одной БД может быть расположена информация для нескольких сайтов, таблицы которых будут отличаться друг от друга подобными префиксами. Поэтому менять значение по умолчанию не стоит.
После ввода необходимой информации нажимаем на кнопку «Отправить» и переходим к следующему этапу, позволяющему создать блог на WordPress:
Как видите, он не несет какой-то особой смысловой нагрузки и является промежуточным звеном между заполнением информации для создания БД и вводом настроек пользователя.
В принципе, можно было бы без него обойтись 🙂
Нажимаем кнопку «Запустить установку» и переходим на следующий экран:
Здесь вам необходимо ввести:
название вашего блога;
имя пользователя и пароль для учетной записи администратора сайта;
email, на который будут приходить уведомления о событиях на сайте (обновления версий движка, уведомления о комментариях);
разрешить или запретить индексацию сайта поисковыми системами.
Последний пункт имеет смысл отмечать только в случае, если вы решили создать блог на WordPress сразу на хостинге, и он еще длительное время будет, что называется «сырым», чтобы поисковики не «сформировали свое мнение» раньше времени, которое, кстати, может влиять на его позиции в дальнейшем.
После ввода информации нажимаем на кнопку «Установить WordPress».
Вот и все 🙂 У нас получилось создать блог на WordPress. Все, что теперь остается – это нажать на кнопку «Войти» и наслаждаться плодами своего труда.
Для этого входим в кабинет администратора под учетной записью, которую вы создали на этапе установки движка.
После входа мы видим админку созданного блога на WorPress.
Чтобы перейти в пользовательскую часть сайта, необходимо ввести в адресной строке веб-браузера «http://доменное_имя_сайта» или нажать на кнопку с изображением домика в левом верхнем углу кабинета администратора.
Вот и долгожданный блог!
Выглядит неказисто, но эта проблема разрешима с помощью шаблонов и плагинов, к которым прибегают все без исключения, кто решил создать блог на WordPress.
Данные этапы мы обязательно рассмотрим в следующих статьях, чтобы сделать ваш ресурс по-настоящему качественным и достойным внимания пользователей.
А сегодняшняя публикация, в которой я помог вам создать блог на WordPress, подходит к концу.
Надеюсь, что информация была для вас полезной.
Жду ваши отзывы и оценки в комментариях под статьей, а также не забывайте делиться записью со своими друзьями в соц. сетях, чтобы помочь создать блог на WordPress и им.
До новых встреч! 🙂
P.S.
: если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги. Более 5 лет опыта
профессиональной разработки сайтов. Работа с PHP
, OpenCart
, WordPress
, Laravel
,
Перед вами курс, рассказывающий о самой популярной системе управления сайтом, с помощью которой можно легко, без особых усилий и затрат на привлечение специалистов создать собственный, причём довольно большой веб-ресурс. Система управления сайтом называется WordPress, распространяется бесплатно и имеет множество плагинов, расширяющих её функционал.
1
Знакомство с WordPress
Какие плюсы создания сайтов даёт эта CMS, чем она нравится людям, как выглядят сделанные на ней сайты и как выглядит движок изнутри.
2
Установка WordPress на localhost
Что такое локальный сервер, где его найти, как скачать и установить, а главное - как после всего этого инсталлировать туда саму WordPress. Воспользовавшись статьёй, вы сможете редактировать и открывать сайт прямо у себя на компьютере без подключения к Интернету. И не пугайтесь раньше времени - ничего сложного во всём этом нет.
3
Установка WordPress на хостинг
Переходим к настоящему хостингу, на котором разместится ваш сайт в Сети, чтобы на него смог зайти любой желающий. Из статьи вы узнаете, как зарегистрироваться на хостинге и каким образом установить на него WordPress.
4
Знакомство с админкой и базовые настройки
Приступаем к управлению сайтом и знакомству с административной панелью, через которое оно и осуществляется. Как в неё попасть? С каких параметров начать? Что скрывают все эти пункты? Какие возможности даёт WordPress администратору? Обзорная статья расскажет не только это.
5
Создание записей, страниц, разделов
Три кита любого блога - записи, которые обычно добавляют на сайт часто, страницы - отдельно стоящие элементы, которых не бывает много, и категории, по которым нужно раскладывать посты. Как создать каждый из этих трёх объектов и чем конкретно они друг от друга отличаются - читайте в материале.
6
Создание меню сайта
Без навигации не обходится ни один ресурс. Из данной статьи вы как раз узнаете, как её создать.
7
Создание формы обратной связи
Узнайте, как добавить на страницу контактную форму, чтобы любой посетитель мог связаться с вами.
8
Создание фотогалереи
Не надо быть фотографом, достаточно иметь хороший вкус, чтобы захотеть видеть у себя на сайте красиво оформленный контент. После прочтения статьи вам станет ясно, как легко сделать на сайте функциональный и радующий глаз просмотр картинок.
9
Что такое виджеты
А действительно: что это такое? Как они могут улучшить сайт и зачем нужны? Какие виджеты пользуются особой популярностью и почему? Материал пригодится не только в теории, но и на практике, так как в нём содержится полезная подборка.
10
Дизайн шаблона для WordPress
Урок расскажет, как полностью сменить внешней оформление интернет-ресурса. Речь пойдёт о темах оформления WordPress, о том, как их найти и установить.
11
Плагины WordPress
12
Изменение шаблона WordPress
Установить тему оформления не всегда достаточно - часто хочется внести в неё какие-то мелкие правки. Если такое желание возникло и у вас - этот урок поможет. Из него вы узнаете о структуре WordPress-шаблонов, а также получите возможность попрактиковаться благодаря большому количеству примеров.
13
Пример создания сайта WordPress на основе HTML-вёрстки
Пройдя курс, вы превратитесь из новичка в продвинутого пользователя WordPress, сможете поставить её на любой хостинг и переносить с места на место, настроить, наполнить контентом, плагинами и темами оформления. Пройдя уроки, вы даже научитесь адаптировать шаблоны под WordPress, а саму CMS - под мобильные устройства. Здесь вас ждут актуальные подборки виджетов и плагинов, масса наглядных примеров, пошаговых инструкций и подробных разъяснений.
Создать шаблон для WordPress проще, чем можно подумать. Для этого не надо обладать огромным опытом разработки дизайна или программирования сайтов. В этой статье расскажем об основах создания с нуля собственных тем WordPress.
Зачем вообще может понадобиться создание собственного шаблона WordPress, когда можно воспользоваться имеющимися в базе заготовками? Вот какие причины могут подтолкнуть к этому:
Можно получить уникальный сайт или лэндинг, отличный от конкурентов. Учитывая миллионы блогов, построенных на этой CMS, каждый типовой дизайн используется как минимум сотню раз.
Полная свобода действий на этапе разработки. Можно добавлять собственный функционал с нужными именно вам рабочими элементами.
Можно применять разные дизайны для разных разделов сайта, что невозможно при использовании готового шаблона.
Можно сделать несколько видов и предоставить посетителям возможность переключаться между разными темами, что повысит интерес и лояльность к веб-ресурсу.
Простота работы на Вордпресс делает ее доступной для многих (в помощь будут видео-уроки в интернете). А значит, собственноручная разработка главной или создание дочерней темы позволит сэкономить деньги на привлечении сторонних дизайнеров и программистов.
Можно воспользоваться возможностью дочерних тем – когда корректировки вносятся в дублеры таблицы стилей style.css, а главный файл при этом остается нетронутым. Это позволяет быстро отменить изменения, если они окажутся неудачными, а также не терять наработки при обновлении основной темы.
Краткая инструкция
Конечно, пройти полное обучение тому, как создать шаблон страницы, с помощью одной статьи не получится. Для начала важно понять основы – как делаются самые простые темы. На основе них уже можно заняться «творчеством» и создать лэндинг или сайт по своим желаниям. Сейчас дадим вам краткую шпаргалку с поэтапными инструкциями – она поможет понять, как происходит создание сайта.
Шаг первый: подготовительные работы
Перед началом работ надо убедиться, что у вас есть текстовый редактор (самым простым является Блокнот или Nodepad++, тем более скачать их можно бесплатно). Следующий шаг – установка движка WordPress и набора Denwer на локальный компьютер. Денвер – это пакет важных инструментов для программистов. С помощью них значительно облегчается и ускоряется процесс разработки и внесения изменения сайтов. Как его устанавливать, подскажет это видео:
Шаг второй: создают папку новой темы
Переходим в нужную директорию. Она чаще всего имеет следующий путь: . Здесь хранятся все темы – и стандартные, и произвольные. Заходим в нее создаем новую папку. Называем ее, например, «MyFirstTheme».
Теперь переходим в новую папку и обязательно добавляем два файла, сделанных через Nodepad++ или другой редактор. Это index.php и style.css. Пока эти документы пусть останутся пустыми, потом мы еще займемся их наполнением. Еще добавьте в «MyFirstTheme» сюда папку images. куда можно будет добавлять картинки для оформления шаблона.
В последствии в «MyFirstTheme» можно добавлять шаблоны для отдельных частей сайта: боковой панели (sidebar.php), сайта (header.php), записей на страничках (single.php), комментариев (comments.php) и пр. Набор дополнительных файлов зависит от структуры, которую вы запланируете для своего веб-ресурса.
Шаг третий: наполнение index.php
Первое, что надо сделать – заполнить индексный файл (index.php). Вот пример самого простого кода, по которому у сайта будет четыре области: header, main, sidebar и footer.
Site Title
В файле можно прописать любые элементы, которые вы хотите видеть у себя на сайте. Больше информации о прописывании кода index.php для создания тем в WordPress можно получить из видео:
Шаг четвертый: заполняем и style.css
Теперь надо открыть style.css, добавить и заполнить следующие поля (вписать вместо *** собственную информацию о сайте и владельце). Введенные данные будут отображаться в админке.
/*Theme Name: ***
Theme URI: http:// ***
Author URI: http:// ***
Description: ***
В последствии в этот файл можно будет вводить разные данные и правила, определяющие внешний облик страниц. Например:
(информация в /**/ — это комментарии, а не части кода)
На данном этапе пока рано задавать строгие параметры стилей, но при дальнейшей работе с файлом вам пригодится этот видеоурок:
Шаг пятый: разбиваем файлы
Все элементы, указанные в index.php следует продублировать отдельными файлами. В шаге первом в примере помимо главной части main были указаны header, sidebar и footer – следовательно, для них создаем свои документы в формате.php.
Например, создаем файл header.php, открываем index.php. находим соответствующий участок кода и вставляем его в новый файл. Это будет:
Site Title
Тоже самое проделывается для остальных частей. Это надо сделать для более легкой навигации. Когда элементов будущего сайта будет много, то отдельные файлы помогут лучше ориентироваться для проверки или внесения изменений.
Чтобы главный индексный файл был согласован с дополнительными, в index.php под блоками для каждой части надо прописать следующее:
Ниже приведен список стандартных файлов шаблонов, используемых WordPress. Их можно не использовать или добавлять свои разделы:
Header – стиль шапки вашего сайта.
Comments – шаблон для создания комментариев.
Home – тема для главной страницы.
Page — определяет тему, если создадите отдельные странички на сайте
Category – шаблон для разбивки на категории
Date – определяет стиль вывода даты-времени.
Archive – шаблон для архивного раздела со старыми материалами.
Search – файл, в котором указываются параметры для поиска на сайте.
404 — шаблон для страницы, на которой сообщается об ошибке 404 Not Found.
Footer – определяет стиль подвала вашего сайта.
Когда впоследствии вы будете дорабатывать каждый элемент, понадобится наглядный видеоурок. Вот несколько подборок, которые могут вам помочь:
Шапка в header.php:
Добавление контента:
Стилизация комментариев:
Подвал на сайте:
Как можно вносить изменения без опасений
Когда надо вносить изменения на страницы сайта, то есть риск что-то неправильно прописать и не суметь «откатить» назад. Также может случиться так, что внесения в таблицу стилей исчезнут при обновлении главной темы.
Чтобы этого не произошло, можно создать дочернюю тему WordPress (подтему) – это дублер файла стилей style.css, не затрагивающий главный файл (изменения в одном не отменяют обновления в другом).
Создание дочерней темы WordPress не составит никакого труда. Надо сделать новую папку в основном каталоге C:\WebServers\home\localhost\www\НАЗВАНИЕ_ЗАДАННОЕ_ПРИ_УСТАНОВКЕ\wp-content\themes
. В новой папке делаем свой файл style.css с вот таким содержимым:
Theme Name: НАЗВАНИЕ ТЕМЫ
Template: НАЗВАНИЕ ПАПКИ В ДОЧЕРНЕЙ ТЕМОЙ
Theme URI: ЗАПОЛНИТЬ
Description: ЗАПОЛНИТЬ
Author URI: ЗАПОЛНИТЬ
/* импортируем стили родительской темы */
@import url(«../НАЗВАНИЕ/style.css»);
/* Свои дополнительные стили */
Foo{ color:red; }
Теперь можно в админке зайти во «Внешний вид›Темы» и активировать дочерний шаблон. В дальнейшем можно работать в новом файле. В дополнение небольшая видео-презентация на тему дочерних шаблонов:
(систем управления контентом). Различных CMS очень много. Самой популярной, удобной и лёгкой в освоении для новичков по праву считается бесплатная CMS Wordpress
. На Wordpress создаётся подавляющая часть автономных блогов, для простых информационных и новостных сайтов он также прекрасно подойдёт. Создать сайт на Wordpress - лучший способ рассказать о себе интернету.
Рассмотрим в этой статье, как быстро создать блог или сайт на Wordpress.
Для сайта на Wordpress необходим хостинг с поддержкой php и MySql. Лучше всего использовать платный (не слишком дешёвый) хостинг, т. к. Wordpress достаточно требователен к ресурсам сервера. Но если вы хотите просто попробовать вести блог и готовы смириться с различными ограничениями и наличием посторонней рекламы, можно зарегистрироваться и бесплатно получить блог на Wordpress .
Итак, предположим, что вы уже купили домен и хостинг. Что делать дальше?
1. Установка Wordpress
Т. к. Wordpress - популярная CMS, на большинстве современных хостингов он входит в список предустановленных CMS, т. е. можно установить сразу из панели управления хостингом. Панели управления хостингом могут выглядеть по-разному, но, как правило, нужную иконку легко можно найти. Например, в панели управления хостинга Бегет она выглядит так:
В популярной панели управления CPanel, которая установлена на многих хостингах, например, хостинге Авахост , она может выглядеть так:
Softaculous - популярный установщик скриптов и CMS (более 250 штук). Найти Вордпресс среди них нетрудно - он на самом видном месте:
Жмём на кнопку установки:
Вводим необходимую информацию и жмём "Install":
Обычно установка занимает не более 1-2 минут. После этого, зайдя на главную страницу вашего сайта, вы увидите стандартный пример поста "Hello world!" (который можно отредактировать или удалить) и пример комментария к нему. Нажав "войти" (или зайдя по адресу адресвашегосайта/wp-login.php
либо адресвашегосайта/wp-admin/
) и введя логин и пароль, заданные при установке, вы попадёте в административную панель Ворпдпресса.
В том случае, если на вашем хостинге нет предустановленного Вордпресса, вам придётся выполнить следующие шаги для его установки:
Скачать дистрибутив Wordpress (например, с сайта mywordpress.ru)
Закачать на хостинг (например, через ftp) и распаковать (либо сначала распаковать, а затем закачать на хостинг).
Создать в панели управления хостингом базу данных Mysql, которая нужна для нормальной работы Wordpress.
Отредактировать файл конфигурации WP-CONFIG-SAMPLE.php, внеся туда данные об имени созданной вами базы данных, логине и пароле для доступа к ней, затем переименовать его в WP-CONFIG.php
Зайти на главную страницу сайта. Вы должны увидеть страницу установки Вордпресс. Введите на этой странице название сайта и ваш e-mail, поставьте галочку возле "Разрешить поисковым системам индексировать сайт" и нажмите кнопку "установить WordPress". На следующем шаге запишите пароль для доступа к админке вордпресса (иногда пароль предлагается ввести сразу).
2. Первоначальная настройка Wordpress
2.1 Настройка основных параметров
Итак, мы в админке Вордпресса. Для начала есть смысл изменить некоторые настройки. Нажмём "Параметры" в левом меню.
"Общие" - здесь имеет смысл проверить, правильно ли настроено время (часовой пояс) на сайте, выбрать формат отображения даты и времени по своему желанию.
"Написание" - обычно здесь ничего менять не нужно.
"Чтение". В зависимости от вашего желания можно выбрать, чтобы на главной странице отображались последние записи (формат блога), либо какая-то постоянная информация. Можно также выбрать количество записей на странице.
"Обсуждение". Здесь можно настроить комментарии и аватары. В зависимости от ваших целей можно разрешить или запретить по умолчанию комментарии к вашим записям. Если вы разрешаете комментарии, во избежание спама желательно поставить галочку напротив пункта "Автор должен иметь ранее одобренные комментарии". В этом случае комментарии от новых пользователей поступят к вам на модерацию прежде, чем появятся на сайте. Для предотвращения спама трэкбеками можно убрать галочку возле пункта "Разрешить оповещения с других блогов".
Наконец, обратим внимание на пункт "постоянные ссылки". По умолчанию адреса статей вашего сайта будут вида http://moysuperblog.ru/?p=123 Но лучше задать для них более осмысленный вид, выбрав "Название записи" (в поле "Произвольно" должно отобразиться "/%postname%/"). После каждого изменения настроек не забывайте нажимать "Сохранить изменения".
2.2 Установка плагинов
Плагины - дополнительные модули, расширяющие функциональность сайта на Wordpress. Для Wordpress существует огромное множество различных плагинов (с их помощью можно например, добавить на сайт форум, интернет-магазин, фотогалерею и т. д.). Установить плагин можно двумя способами. Можно вручную скачать плагин (желательно скачивать их, как и темы, о которых речь пойдёт ниже, только с проверенных сайтов), затем распаковать и загрузить по ftp в папку wp-content/plugins. Загруженные плагины будут видны в админке (пункт меню "плагины") и их можно будет активировать. Более простой способ установки плагинов - выбрать плагин из официального списка плагинов на сайте разработчиков Wordpress и установить их простым нажатием кнопки. Какие плагины можно установить для начала? Если вам не нужны какие-то плагины для специальных целей (например, создания интернет-магазина на сайте), можно установить, например, следующие плагины:
RusToLat
- этот плагин преобразует в латиницу адреса страниц.
WP-DB-Backup
- этот плагин позволяет регулярно делать резервные копии базы данных.
WP Super Cache
- этот плагин снижает нагрузку на сервер.
Если вы разрешили комментарии на сайте, стоит установить плагин SI CAPTCHA Anti-Spam
(или другой плагин, добавляющий капчу к форме комментария) для предотвращения автоматического спама в ваш блог.
Для установки плагина, который есть в официальной базе, выбираем "Плагины" - "Установить новый" и вводим название плагина в форму для поиска:
В списке найденных выбираем тот самый плагин, жмём на ссылку "Установить", а затем на ссылку "Активировать плагин".
Точно так же устанавливаем и активируем другие необходимые плагины.
Некоторые плагины требуют дополнительной настройки после их установки. Например, плагин WordPress Database Backup. Чтобы его настроить, нажмите "Инструменты", затем "Резервное копирование". Вы можете сами создавать копии вручную, время от времени, но если вы часто вносите на сайт изменения, добавляете новые материалы, есть смысл настроить автоматическое создание резервных копий и отсылку их на ваш e-mail. В этом случае в настройках введите e-mail, на который нужно отсылать резервные копии базы данных и задайте расписание (например, раз в неделю). Теперь, если вдруг с вашим сайтом что-то случится (например, его взломают хакеры и всё удалят или произойдёт авария на сервере), вы всегда сможете легко восстановить все записи из последней резервной копии.
2.3 Установка темы
При помощи темы можно задать дизайн и оформление вашего сайта. Самостоятельное создание темы может занять немало времени и потребует от вас определённых знаний и навыков. К счастью, для Wordpress существует огромнейшее количество готовых тем. Как и плагины, из можно установить двумя способами - скачать с какого-либо сайта (скачивайте темы только с проверенных сайтов), затем распаковать и загрузить в папку wp-content/themes. После этого тема появится в списке доступных тем в админке ("Внешний вид" - "темы") и вы сможете её активировать. Другой вариант - выбрать из официальной коллекции тем. Для этого выберите вкладку "Установить темы", задайте необходимые фильтры и нажмите "найти темы".
Выберите понравившуюся тему, установите её, а затем активируйте. Дизайн и оформление вашего сайта сразу же поменяется.
Многие темы имеют собственные настройки, которые позволяют видоизменить оформление сайта тем или иным образом.
2.4 Настройка виджетов
Виджеты - удобный способ настроить отображение тех или иных элементов сайта в нужном порядке и в нужных местах.
Просто перетаскивайте мышкой нужные элементы в те блоки сайта, где вы хотите, чтобы они отображались (например, в левую или правую колонку, блоки внизу страницы и т. д.). Для многих виджетов, раскрыв их, можно задать дополнительные настройки:
2.5 Robots.txt для Wordpress
Для того, чтобы поисковые системы не индексировали служебные файлы и страницы вашего сайта, желательно создать файл под названием robots.txt, который нужно загрузить в корневой каталог сайта. Такой файл можно создать в блокноте, его содержание должно быть примерно таким:
Основной тип материалов в Wordpress - это записи. Записи обычно располагаются в хронологическом порядке (т. е. пользователь, зашедший на сайт, видит в первую очередь самые свежие записи и, перелистывая страницы сайта, может посмотреть их все в том порядке, в котором они были опубликованы). Кроме того, можно создать страницы, которые не будут находиться в общей хронологически упорядоченной ленте. Они обычно используются для размещения важной, редко меняющейся информации (например, можно создать страницу с информацией об авторе сайта).
Для того, чтобы рассортировать записи и помочь посетителям вашего сайта легче находить нужную информацию, в Wordpress можно использовать рубрики и метки (или, как их ещё называют, теги). Рубрики - это разделы вашего сайта, содержащие записи на определённую тему. Целесообразно при публикации каждой записи помещать её в тут или иную рубрику (или создать новую рубрику, если ещё нет подходящей). Метки дополнительно позволяют отметить записи, в которых затрагивается какой-то вопрос или предмет. При необходимости в рубриках можно сделать подрубрики, более точно выделяющие тематики записей.
Текст записи можно создать в несложном визуальном редакторе (при необходимости можно переключиться в режим html-кода).
В текст можно вставить картинку или видео, в т. ч. загрузив их со своего компьютера. В редакторе есть полезная кнопка, вставляющая тег "more". С её помощью можно отделить анонс записи от основного текста. Обычно нецелесообразно размещать полные тексты записей на главной странице и страницах рубрик. Если вставить в запись тег "more", на главной странице будут лишь анонсы записей, а полный текст можно будет прочитать, кликнув на заголовок или ссылку "подробнее".
После того, как запись готова, её можно опубликовать сразу, нажав на соответствующую кнопку, сохранить, но не публиковать, либо задать нужное время для публикации. Вы можете назначить публикацию записи, например, на завтра, и до завтрашнего дня она не появится на сайте, посетители увидят её лишь в назначенное время.
Вордпресс - очень дружественная к пользователю CMS, и, надеюсь, вам не составит труда разобраться во всех не затронутых в статье особенностях работы с ней самостоятельно. Если же это окажется для вас слишком сложным, вы можете посмотреть видеокурс по работе с этой CMS.
Вам всё ещё непонятно, как создать сайт на wordpress? Задайте вопрос на !