Только следует учесть, что вордпресс генерирует некоторые классы, которые должны присутствовать в таблице стилей. К примеру классы aligncenter, alignleft и alignright служат для выравнивания изображений и блочных элементов, и их нужно включить в свою таблицу стилей (можно скопировать из таблицы стилей дефолтной темы):
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
Следующие классы используются для выравнивания изображений, которые имеют подписи (можно скопировать из дефолтной темы, в дальнейшем при необходимости поправить):
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* необязательные параметры, которые сделают скругленные углы в поддерживаемых браузерах*/
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
Кроме того, существует еще несколько классов 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:
Теперь файлы нашего шаблона нужно "распилить", т.е. вытащить в отдельные файлы footer, sidebar и header. Схема показывает упрощенный вид файла index.php
с метками, согласно которым будем его пилить: Шаг 2
- Header.php
Теперь идем в папку с дефолтной темой, открываем header.php
и копируем оттуда теги Затем все теги
В итоге получаем:
Шаг 3 - Sidebar.php
Таким образом мы вызываем 2 сайдбара. Если вы смотрели Sidebar.php
дефолтной темы, то заметили, что кода там гораздо больше. Дело в том, что там просто прописано дополнительное условие, которое по умолчанию выводит архив и категории, в случае, если админ не подключил ни одного виджета к сайдбару. Мы это условие прописывать не будем. Чтобы наши сайдбары заработали, их необходимо зарегистрировать. Для этого в директории темы создаем файл functions.php
и в нем пишем:
register_sidebar(array("name"=>"sidebar1")); Осталось подключить форму поиска. Сделать это можно либо из админки путем добаления виджета в один из сайдбаров, а можно вызвать ее в sidebar.php
, что мы и сделаем. В самом начале добавляем:
Шаг 4 - Footer.php
Welcome to my design blog and portfolio showcase. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Feel free to contact me. По нашему шаблону здесь же мы должны вывести последние записи блога (Recent Posts) и последние коментарии (Recent Comments). Последние записи будем выводить в количестве 5 штук - showposts=5
. Заменям все внутри
Вывод последних коментариев сделаем с помощью плагина simple_recent_comments.php , скачайте его и положите в папку нашей темы. Теперь в нужном месте его нам нужно вызвать (заменям содержимое блока
Шаг 5 - Index.php
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... Шаг 6 - Вывод записей блога на странице index.php
Следующий рисунок демонстрирует принцип вывода записей блога. Сначала идет проверка, есть ли сообщения в базе, если нет выводит "Not Found". Если есть, выводит в цикле while
. Открываем наш index.php и заменям статичный текст между
Теперь тема должна уже быть доступна из админки в списке тем, ее можно активировать и посмотреть, что вышло. Мы использовали теги Wordpress:
the_time("M"), the_time("j") -
вывод месяца и дня соответственно Шаг 7- Single.php
Pages: ", "after" => " wp_link_pages
- Выводит ссылки на странице в многостраничном сообщении (при использовании ). Шаг 8 - page.php
Pages: ", "after" => " На этом можно и закончить. Основные файлы темы мы собрали. Вероятно вы заметили, что в дефолтной теме больше файлов. Например archive.php
, он не является обязательным. Однако если мы подключим виджет "Архивы" или "Календарь" в сайдбаре и перейдем в какой - нибудь архив по дате, записи по выбранной дате выведутся на индексной странице
, поэтому вполне можно обойтись без archive.php
:) Финал
.
/* 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
Итак, вы, наконец, решили создать свой собственный веб-сайт на вордпресс. Например, чтобы создать выгодный бизнес-блог в интернете. Это замечательные новости! Но, знаете ли вы, как создать сайт на wordpress и как его правильно настроить? Конечно же нет. Ведь иначе вы бы не читали эту статью:) Итак, вы пришли в правильное место. Как только вы закончите работу с этим полным руководством, у вас будет собственный сайт WordPress, который будет работать правильно и уже через 60 минут. Да, это действительно так просто! Девяностые годы позади, и сейчас уже не нужно быть супер-хакером, чтобы создать свой собственный сайт. После этого руководства даже бабушка сможет создать шедевральный сайт. Мы проведем вас шаг за шагом через весь процесс, а также покажем лайф-хак — как бесплатно поставить премиальную тему. Во-первых, добавьте эту страницу в закладки, чтобы вы могли быстро вернуться к этому руководству, если случайно закроете браузер. Затем сядьте, расслабьтесь и начните читать. Примечание
: для целей демонстрации мы выбрали конкретные доменные имена и хостинг-провайдеров, потому что мы считаем, что они предлагают услуги самого высокого качества по доступным ценам и для начинающих. Это не означает, что для выполнения данного руководства необходимо выбрать тех же поставщиков услуг что и мы. Если вы предпочтете других, не стесняйтесь использовать их вместо наших. Это руководство по настройке и созданию wordpress сайта для всех: от начинающих до продвинутых пользователей Интернета. Вам не нужно никакого опыта в системе CMS-wordpress, веб-дизайне или программировании, чтобы следовать этому руководству. Существует множество руководств «how-to», которые пытаются научить людей создавать веб-сайт, но большинство из этих руководств содержат слишком много технической информации или просто недостаточно подробностей для понимания новичком. Именно поэтому мы решили создать этот новаторский Ultimate Guide с более подробными пошаговыми инструкциями по настройке собственного сайта на вордпресс. Несмотря на то, что некоторые люди (особенно веб-разработчики) преподносят этот процесс как работу только для экспертов, но, на самом деле создать собственный сайт не так уж сложно. Любой, кто имеет некоторые базовые знания в Интернете, может легко сделать это. На самом деле это простой процесс из пяти шагов:
Поговорим о каждом шаге более подробно. Итак, приступим. Прежде чем мы перейдем к самой увлекательной части этого руководства, важно
, чтобы вы получили общее представление о том, что на самом деле такое WordPress и что это за программное обеспечение. У нас есть отдельная статья про то, . Прочитайте и вернитесь сюда. Здесь мы будет говорить конкретно про CMS WordPress. WordPress
— это система управления контентом (CMS), и сегодня она является самой популярной CMS в мире. CMS — это программное обеспечение, которое вы можете использовать для простого управления содержимым вашего сайта, например изображениями, видеороликами и статьями из простой в использовании панели инструментов. Хотя WordPress является наиболее предпочтительной CMS в Интернете, есть несколько других программ, которые также подходят для создания сайтов, таких как Drupal и Joomla. Но будьте готовы к тому, что вам придется самостоятельно привлекать программистов для разработки дополнительного функционала. Однако эти программы CMS имеют несколько более сложные функции, которые более подходят для продвинутых пользователей. Именно поэтому мы всегда рекомендуем вордпресс начинающим. Потому что для вордпресс есть тысячи уже готовых плагинов, которые устанавливаются как дополнение и расширяют базовый функционал, поэтому не придется нанимать программиста и платить ему деньги — все уже готово. Простота использования — не единственная причина, за что все любят WordPress. Это также мощное ПО, которое можно использовать для создания практически любого сайта, от простого личного блога до интернет-магазина или даже собственной социальной сети. «WordPress используется в 27,4% всех сайтов в интернете». — по данным W3Techs Даже некоторые из крупнейших корпоративных компаний в мире используют WordPress для включения своих официальных сайтов. Некоторые из этих крупных включают Quartz, Target, Bloomberg, Forbes, Bata и многие другие. Вордпресс также имеет огромное сообщество пользователей, которые постоянно создают темы, плагины и надстройки, чтобы еще больше расширить возможности популярной CMS. Самая важная причина, почему люди выбирают WordPress, — это проект с открытым исходным кодом. Это означает, что вы можете скачать WordPress и использовать его, как вам нравится, чтобы построить столько сайтов, сколько вы хотите, бесплатно! Automattic, разработчик под вордпресс, постоянно выкатывает новые обновления для платформы, чтобы исправить ошибки и еще больше улучшить платформу. Ну вот и все, теперь, когда мы закончили скучный материал, давайте перейдем к самой интересной части: созданию сайта! Поиск идеального доменного имени — самая сложная часть создания веб-сайта, потому что, проще говоря, все хорошие доменные имена уже давно заняты. При выборе имени домена разумно получить доменное имя с расширением.ru для России, .ua для Украины, .kz для Казахстана и.by для Белоруссии. Они признаны как авторитетные расширения имени домена для этих стран, и мгновенно дают вашему сайту хорошую репутацию. Например в России, при прочих равных, сайты с зоной ru имеют преимущество. Но, в России это самое популярное расширение, поэтому подобрать имя в зоне.ru иногда непросто. Но, если вы достаточно креативны, найти отличное доменное имя не составит труда. Например, если вы все названия уже заняты, попробуйте добавить дополнительное короткое слово к основному названию. Не используйте цифры, точки и прочие символы в названии. Если у вас нет выбора, вы можете проверить имя в друзой зоне, например.com, .biz или.Blog. Не используйте зоны для России такие как: .рф и.su. Ну и на последок, не забудьте проверить историю домена. Может быть так что, хотя это имя свободно, но в прошлом под этим именем мог уже быть сайт, и он мог наработать плохую карму, например использую плохие методы продвижения. Тогда, как бы вы не старались, вы будете заведомо иметь плохие позиции и вам будет тяжело продвинуть сайт. Для проверки истории есть такие сервисы как recipdonor.com. Когда вы готовы купить домен, вам необходимо обратиться к регистратору доменных имен, зарегистрировать его на свое имя и подобрать оптимальный хостинг. Чтобы создать свой сайт на wordpress, вам нужно место для хранения его файлов. На помощь приходят хостинг-провайдеры. Эти поставщики услуг предоставят вам пространство на своих мощных серверах для размещения вашего сайта и позволят людям со всего мира получать доступ к вашему сайту. Хостинг-провайдеры предлагают несколько различных типов хостинга для создания различных типов сайтов: Управляемый, VPS и выделенные хостинги обойдутся вам дорого. Для новичков мы рекомендуем выбрать обычный тип хостинга. Когда ваш сайт начинает получать тысячи посетителей в день, вы можете перейти на лучший план. Многие хостинг-провайдеры предлагают вам бесплатное доменное имя при покупке пакета хостинга, в замен лишая вас свободы и полного контроля над вашим доменным именем. Поэтому мы мы рекомендуем Beget.ru , у бегет все чисто и прозрачно. Beget является одним из наших любимых хостинг-провайдеров, и не только из-за хорошей скорости и надежного обслуживания, а также благодаря их невероятно отзывчивому обслуживанию клиентов. Скорость ответов техподдержки впечатляет. Кроме того, Бегет поддерживает водрпресс для блоггеров с множеством полезных функций, таких как автообновление вордпресс, бесплатный SSL, бесплатные ежедневные резервные копии и многое другое. Даже если злоумышленники взломают ваш сайт и поменяют пароль, вы сможете сделать бекап из резервной копии. Именно поэтому мы выбрали Beget.ru для себя и для этой инструкции. Вот как вы можете приобрести доменное имя и хостинг на Beget: Шаг 1
: откройте сайт регистратора бегет по этой ссылке и введите в поле имя домена для регистрации: Шаг 2
: Если ваше доменное имя доступно, и перейдите к выбору тарифа хостинга. Для первого сайта более чем достаточно выбрать виртуальный хостинг на тарифе: «Blog». Данного тарифа более чем достаточно пока на вашем сайте нет посещаемости в несколько тысяч посетителей в сутки. Далее укажите ФИО, логин, телефон, email и нажмите кнопку «Зеригистрироваться». Затем вам на телефон придет sms с кодом для подтверждения аккаунта. Шаг 3
: после успешной регистрации, вы получите доступ к панели управления Beget, из которой, как за бортом самолета, можете управлять всеми функциями: доменом, хостингом, тарифами, создавать дополнительные сайты, воспользоваться файловым менеджером, выбрать и установить CMS и многое другое. Меню простое и интуитивно понятное. Кстати. Если бы вы регистрировали хостинг и домен в разных местах, то вам пришлось бы настраивать еще и DNS параметры, чтобы связать домен с сайтом. Но, на бегет этого делать не нужно, все уже в комплекте и автоматически друг к другу привязывается! После того, как ваш домен успешно зарегистрирован и выбран хостинг вы можете установить WordPress. Вы можете сделать это на бегет несколькими супер простыми шагами. Шаг 1
. Перейдите на вкладку «Хостинг», а затем в раздел «Сайты». Шаг 2
. В разделе сайты создайте новый сайт, в качестве имени укажите ваш домен. Шаг 4
. Перейдите на вкладку «Хостинг», а затем в раздел «CMS»: Шаг 5
. Перед вами откроется список всех самых популярных CMS, найдите среди них установщик WordPress и щелкните по нему. Шаг 6
. Заполните все необходимое поля и щелкните по кнопке «Установить». После установки вы можете открыть окно, в котором будут все данные, а также логин и пароль для входа в административную панель только что созданного сайта. Все готово!
Теперь вы можете увидеть свой новый сайт WordPress изнутри. Чтобы получить доступ к панели администратора WordPress, перейдите по ссылке yourdomain.com/wp-admin
и введите имя пользователя и пароль, которые вы получили ранее. Если для вас задача установки сайта на хостинг кажется сложной, то вы можете за небольшую сумму удаленно обратиться к специалистам для настройки хостинга на бирже фриланс услуг Kwork . Ваш сайт почти готов, единственная проблема заключается в том, что дизайн вашего сайта выглядит не очень профессионально. Это потому, что ваш вордпресс сайт в настоящее время использует тему по умолчанию. Но, не волнуйтесь, вы можете легко изменить эту тему на более красивую. В каталоге WordPress доступны тысячи бесплатных тем, которые вы можете скачать и использовать бесплатно. Тем не менее, большинство из этих тем имеют уродливые конструкции и используются тысячами других блогов по всему Интернету, что не зделает вас уникальным среди них. Чтобы сделать ваш сайт более профессиональным, важно, чтобы вы использовали премиум-тему WordPress для своего сайта. Темы WordPress Premium могут стоить от $ 19 до $ 59, в зависимости от того, где вы их покупаете. Лучшее место для поиска красивых тем WordPress по доступным ценам — ThemeForest. ThemeForest имеет более 8500 тем, разработанных и закодированных профессиональными веб-разработчиками. Эти темы не только сделают ваш сайт более профессиональным, но также помогут вашему сайту повысить рейтинг в Google и Yandex, потому что темы уже оптимизированы для поисковых систем. Для разных типов веб-сайтов существуют разные темы, для богов свои, для интернет-магазинов свои. Выбирайте мудро и покупайте тему, соответствующую вашей отрасли и теме вашего сайта. Лайф-хак. Прежде чем покупать и тратить большие деньги на тему, которая вам может не понравиться или не подойди, хорошо бы испробовать ее. Для этого я использую сайт wpnull_org. На котором любую из премиальных тем с Themeforest, можно купить всего за 250 рублей. Таким образом на на своей шкуре испробовал десяток тем, и выбрал лучшую, и только потом купил ее на тимфоресте. Например, для создания интернет-магазина на wordpress для продажи электроники и гаджетов, я испробовал десятки тем, лучшей для меня оказалась тема «Electro». Кстати, темы, которые вы можете купить для вордпресс, могут обойтись вам всего в 5000-6000 тысяч рублей, при этом аналогичные темы на битрикс стоят порядка 50 000 — 200 000 тысяч рублей. При этом битрикс давно морально и технологически устарела. Но все продолжают стать, думая: «если сосед поставил битрикс, значит и я поставлю» Важно!
Не используйте бесплатные темы, которые есть в интернете. В бесплатных зачастую вшиты вирусы или другое вредоносное ПО, а также ссылки на чужие ресурсы, по которым будет передавать «вес» сайта. Пришло время начать практическую работу и начать настройку своего сайта WordPress. Перед тем как создавать новые статьи и загружать контента на сайт нужно сделать несколько крайне важных вещей. Начнем с основных настроек сайта. Настройка базовых параметров
Шаг 1
: Откройте панель управления WordPress, перейдя по ссылке вида: yourdomain.com/wp-admin
и введите ваше имя пользователя и пароль. Шаг 2
. Перейдите в раздел «Настройки». На вкладках общее
и написание
интуитивно все понятно, на них вам нужно выбрать свой часовой пояс, формат даты или даже можете изменить имя своего сайта. А вот на вкладке чтение есть свои ньюансы. Здесь нужно установить опции RSS как на картинке: Если оставить опцию RSS — полный текст
, то боты будут воровать ваш контент. Шаг 3
: перейдите к настройкам постоянных ссылок, чтобы изменить способ отображения URL-адресов вашего сайта. Я себе сделал так как показано на скриншоте. Такой формат позволяет формировать простые и короткие URL, рекомендую сделать также. И не беспокойтесь, мои статьи выходят в топ с такими короткими ссылками. Установка бесплатных тем вашего сайта в WordPress проста. Вам просто нужно перейти в «Внешний вид
»> «Темы
», найти свою тему среди огромной базы и нажать «Установить
». Но когда вы покупаете премиум-тему, вам нужно вручную установить ее самостоятельно. После загрузки темы премиум-класса вы получите файл.ZIP, содержащий файл темы и документацию по теме, с инструкциями по настройке темы. Не спешите и прочитайте эти инструкции, прежде чем двигаться дальше, чтобы не допустить ошибок при установке. Затем установите свою новую тему через панель инструментов WordPress. Для этой демонстрации мы будем использовать тему бесплатного блога, Карен. Шаг 1
: Перейдите на страницу темы на панели управления WordPress и выберите Добавить новую. Затем нажмите кнопку «загрузить тему
«. Шаг 2
. Найдите на своем компьютере файл темы.ZIP. Выберите его и нажмите «Установить сейчас
». Шаг 3
: после завершения установки нажмите кнопку активировать
. Теперь на вашем сайте появилась новая тема. Теперь вам нужно настроить тему в соответствии с вашим . Разные темы имеют различные способы настройки дизайна. Премиум темы имеют свой собственный визуальный редактор, в котором вы можете легко изменить настройки и дизайн темы. Большинство бесплатных тем не позволяют делать такие расширенные настройки. Но, вы все равно можете изменить внешний вид вашей темы. Шаг 1
: Перейдите в раздел Внешний вид и выберите Настроить на панели управления WordPress. Шаг 2
: здесь вы можете изменить цвета, добавить фоновые изображения, изменить макет, и персонализировать вашу тему, как вам нравится. Теперь вам нужно меню для вашего сайта, чтобы люди могли легко перемещаться по разделам вашего сайта. Давайте создадим одно. Шаг 1
. зайдем в меню «Внешний вид» > и создать новое меню. Шаг 2
: затем вы можете добавить свои страницы, категории и ссылки в меню. Шаг 3
: Выберите область отображения меню. Шаг 4
: Сохраните изменения. Откройте сайт и посмотрите на изменения. Теперь вы должны увидеть свое новое меню. Установка плагинов — отличный способ добавить больше возможностей на ваш сайт. В каталоге WordPress есть тысячи плагинов. Вот как вы можете их установить. Шаг 1: Перейдите к плагинам и выберите добавить новый
. Шаг 2: Найдите плагин, который вы хотите установить, и нажмите установить
. Шаг 3: Теперь нажмите кнопку Активировать
, чтобы инициализировать работу плагина. Шаг 4: Вот и все! Обязательно прочитайте ниже список плагинов WordPress, которые жизненно необходимы, и если не установить их вначале, могут быть негативные последствия в продвижении сайта в будущем. Плагин Cyr to Lat enhanced
Плагин расширяет функционал вордпресс, тем что он делает транслитерацию названий рубрик и записей из кирилицы в латиницу. Это позволяет автоматически формировать URL-ссылки с правильным ЧПУ. Это очень удобно! Broken Link Checker
— плагин для отслеживания битых ссылок Google XML Sitemap s
— плагин для создания визуальной карты сайта Yoast SEO
— плагин расширяющий возможности настроек SEO-параметров. Title, все теги, description и другое. WP Super Cache
— плагин кеширования, для ускорения работы сайта. Table of Content Plus
— плагин для автоматического формирования содержания статей iThemes Security
— плагин для защиты сайта от хакерских атак и взлома. Боковая панель вашего сайта (сайдбар) является одной из ключевых областей, которая позволяет вам показывать важный контент для посетителей, например реклама, социальный кнопки, формы подписки и другое Чтобы настроить боковую панель, перейдите в меню Внешний вид
> Виджеты
. Оттуда вы можете добавлять новые виджеты на боковую панель или даже удалять ненужные виджеты. Количетво и виды виджетов зависят от темы. Премиальные темы включают в себя большой набор виджетов, которые значительно расширяют возможности сайта Теперь вы можете начать создавать новые страницы и записи (статьи) на своем сайте WordPress. Но, перед этим, вы должны создать набор категорий для структуризации ваших публикаций и страниц. В чем отличие записей от страниц? Записи
— это публикации, статьи, основной способ создания контента. Страницы
— это служебные страницы, такие как «Контакты», «Служебная информация». Чтобы создать Категорию, перейдите в раздел все записи
> рубрики
. Просто введите название категории и нажмите кнопку создать
. Вы также можете добавить только что созданные категории в меню. Чтобы создать новую запись, перейдите в раздел все записи
> добавить новую
. Введите имя и содержимое. Перед публикацией выберите категорию для новой записи, чтобы упорядочить статьи. На этом наше руководство подошло к концу Поздравляем! Теперь вы являетесь гордым владельцем сайта на вордпрессе. Итак сейчас пришло ваше время, чтобы начать развивать свой сайт. И не важно как вы планируете использовать свой сайт, как блог, как интернет-магазин или просто сайт для друга. И так, чего же вы ждете? Приступайте прямо сейчас и превратите ваш сайт в произведение искусства! Чтобы в интернете стало еще на один шедевр больше! И не забудьте оставить комментарий и рассказать нам, каково это было, сделать сайт на wordpress в первый раз. Вот кстати новые актуальные видео, в которых неплохо наглядно показывается процесс создания сайта на вордпресс. Подобных видео много, но эти я отобрал среди кучи плохих и устаревших. Из этой статьи вы узнаете, как создать сайт на WordPress. С помощью пошагового руководства сделаете качественный и функциональный ресурс, пригодный для привлечения и конвертации трафика. WordPress - это самая популярная система управления контентом (CMS). По данным Web Technology Surveys , на этом движке по состоянию на ноябрь 2018 года работает 32,3 % от общего числа существующих сайтов, а также 59,5 % сайтов, использующих CMS. В 2015 году WordPress использовали только 24 % ресурсов на CMS. Ниже перечислены основные причины популярности WordPress. Бесплатный «движок»
CMS WordPress распространяется по открытому лицензионному соглашению (GNU GPL). Вы можете свободно использовать этот продукт в любых целях, включая коммерческие.
Практически неограниченные возможности
С помощью WordPress можно создать интернет-магазин, личный блог, корпоративный сайт, информационный портал, отраслевой ресурс, галерею мультимедиа.
Гибкая настройка внешнего вида и функциональности
Владельцам сайтов на WordPress доступны платные и бесплатные шаблоны, с помощью которых можно кастомизировать внешний вид. А с помощью плагинов можно решать технические задачи, обеспечивать необходимую функциональность сайта.
Простота администрирования
Чтобы работать с WordPress, не нужны специальные знания. Принципы работы с движком понятны на интуитивном уровне.
Возможность создать сайт и опубликовать первый контент в течение 5 минут
Конечно, придется потратить гораздо больше времени, чтобы превратить шаблонный продукт во что-то новое и интересное. Но на первую публикацию потратите не больше 5 минут.
Ну что, решили сделать сайт на WordPress? Тогда переходите к пошаговому руководству. Если у вас некоммерческий проект, выбирайте бесплатный хостинг. Например, делиться с миром фотографиями котиков или вести дневник молодого бодибилдера можно на платформе WordPress. Адрес сайта будет выглядеть так: primer.wordpress.com. Если реализуете коммерческий проект, например, создаете тематический блог, корпоративный сайт или планируете зарабатывать с помощью ресурса любым способом, выбирайте платный хостинг. Чтобы выбрать надежного хостинг-провайдера, . Если на это нет времени, воспользуйтесь услугами одной из перечисленных ниже компаний: Выбор доменной зоны не влияет на технические характеристики ресурса или позиции в поисковой выдаче. Однако теоретически этот параметр может влиять на доверие аудитории. При прочих равных пользователи охотнее верят сайтам с адресом vasya-pupkin.ru или vasya-pupkin.com, чем ресурсам типа vasya-pupkin.wordpress.com или vasya-pupkin.blogspot.com. Поэтому для коммерческих проектов старайтесь выбирать домены верхнего уровня, например, .com, .info, .org, .net, .ru, .ua, .by и т.п. Обратите внимание на появившиеся недавно домены первого уровня, например, .club, .guru, .ninja, .expert и другие. После покупки хостинга и регистрации доменного имени установите WordPress. Обратите внимание, некоторые хостинг-провайдеры предлагают тарифные планы с предустановленной CMS. Если вы выбрали один из них, сразу переходите к третьему шагу руководства. Если вы приобрели хостинг без установленного движка, следуйте инструкциям: Перейдите на сайт WordPress и скачайте дистрибутив. Распакуйте архив. Русифицировать тему удобно с помощью бесплатной программы Poedit . Скачайте и установите ее на компьютер. Затем скачайте на компьютер языковые файлы выбранного шаблона. Для этого потребуется доступ к FTP. Его можно получить с помощью FTP-клиента, например, FileZilla, а также с помощью плагинов, например, File Manager . Если вы установили данный плагин, действуйте по описанному ниже алгоритму. В консоли выберите меню FileManager – Configuration. Настройте конфигурации, как указано на иллюстрации. В меню FileManager – FileManager выберите папку wp-content – themes. Выберите папку темы, которую хотите русифицировать. В ней откройте папку languages. Скачайте на компьютер файлы en.mo и en.po. Если таких файлов нет, скачайте на компьютер файл с расширением.pot. Откройте программу Poedit и выберите опцию «Создать новый перевод». Откройте файл перевода и укажите код языка. Приступайте к переводу. В поле «Исходный текст» программа отображает текст на английском языке. В поле «Перевод» нужно добавить текст на русском. Сохраните перевод. Программа загрузит на жесткий диск вашего ПК два файла: ru_Ru.mo и ru_RU.po. С помощью функции Upload files загрузите файлы в папку languges вашего шаблона. Вы русифицировали шаблон. Вместо программы для ПК Poedit можно использовать плагин Loco Translate . После установки и активации надстройки интерфейс для перевода шаблонов появляется прямо в админке сайта. Плагины – одна из болезней начинающих владельцев сайтов на WordPress. Едва зарегистрировав ресурс, новоиспеченные вебмастера ищут в «Яндексе» статьи типа «100 лучших плагинов для WordPress» . Они устанавливают десятки расширений. Это негативно влияет на развитие ресурса. Дело не в замедлении работы сайта, хотя избыточное число плагинов может вызывать такую проблему. Вопрос в концентрации внимания и усилий владельца сайта. Вместо создания и публикации качественного контента он часами ищет плагины, устанавливает их и настраивает. Такой вебмастер не видит леса за деревьями: он забывает, что плагины нужны для решения конкретных практических задач. Чтобы успешно развивать сайт, пользуйтесь плагинами с осторожностью. Устанавливайте расширения только тогда, когда хотите решить конкретную задачу. С помощью плагинов можно сделать следующее: Сайт подвергается двум глобальным угрозам. Первая – вы сами. Стремление к совершенству и инновациям может заставить вебмастера пойти на рискованные эксперименты с кодом и программами, которые могут привести к потере информации. Защититься от этого можно с помощью плагинов, создающих резервные копии сайта. Вторая угроза – несанкционированный доступ к ресурсу. Злоумышленники могут пытаться получить доступ к вашему сайту, чтобы установить на него вредоносный код или просто украсть его. Чтобы регулярно создавать резервные копии сайта, воспользуйтесь одним из перечисленных плагинов: Чтобы установить выбранный плагин, войдите в меню «Плагины – Добавить новый». Введите название расширения в поле поиска в правом верхнем углу и нажмите «Ввод». Также вы можете скачать плагин с сайта разработчика и установить его с помощью функции «Загрузить плагин» в верхней части экрана административной панели. Нажмите кнопку «Установить». После установки активируйте плагин. Теперь настройте параметры резервного копирования. Выберите меню «Инструменты – WP DB BackUp». Нажмите Create New Database BackUp. Вы создали резервную копию по требованию. Настройте регулярное создание резервных копий по расписанию. Перейдите на вкладку Sheduler, включите автоматическое создание резервных копий, выберите частоту создания архивов. На вкладке Destination включите автоматическое сохранение архива на Google Drive или отправку на электронную почту. Чтобы защитить сайт от несанкционированного доступа, воспользуйтесь плагином Loginizer Security . Надстройка надежно защищает сайт от взлома методом перебора или брутфорсинга. Плагины для борьбы со спамом актуальны, если вы пользуетесь дефолтной системой комментирования WordPress. Сторонние системы комментирования , например, Disqus, защищаются от спама самостоятельно. Защититься от спама можно с помощью плагинов, например, Akismet или Antispam Bee . После установки Antispam Bee плагин работает в фоновом режиме. Обычно подходят дефолтные настройки, но если нужно что-то поменять, перейдите в меню админки «Настройки – Antispam Bee». WordPress – SEO-дружественная CMS по умолчанию. Но есть задачи, без которых сайт нельзя считать полностью соответствующим требованиям поисковых систем. Вот они: Чтобы решить эти задачи, вы установите по одному SEO-плагину из трех групп: программы для создания карты сайта, программы для технической оптимизации ресурса и программы для создания микроразметки. Для создания карты сайта используйте один из следующих плагинов: Google XML Sitemap . Для настройки плагина перейдите в меню «Настройки – XML-Sitemap». Начинающим вебмастерам лучше оставить настройки по умолчанию. После активации плагин создал карту сайта, добавил ее адрес в файл robots.txt и приготовился уведомлять поисковые системы об обновлениях ресурса. Если вы считаете себя опытным вебмастером, можете изменить настройки плагина. В разделе «Дополнительные страницы» можно вручную включить в карту сайта URL, которые не были включены в нее автоматически. В разделе «Приоритет статьи» определите способ вычисления приоритетности индексирования контента. В разделах «Изменить частоты» и «Приоритеты» можете рекомендовать поисковым роботам наиболее приоритетные по вашему мнению типы контента. Для технической оптимизации ресурса воспользуйтесь одним из следующих плагинов: Установите и активируйте выбранный плагин, например, All in One SEO Pack . Используйте настройки по умолчанию, если вы только знакомитесь с WordPress. Если считаете себя продвинутым веб-мастером, можете изменить некоторые настройки SEO-модуля. Для этого выберите меню All in One SEO в консоли движка. Обратите внимание на перечисленные ниже настройки. В разделе «Основные настройки» уберите флажок напротив пункта Use Schema.org Markup. Размечать страницу лучше с помощью отдельного плагина. Если в качестве главной используете страницу записей, в разделе «Настройки главной страницы» укажите title, description и keywords. Если в качестве главной используется статическая страница, установите флажок в поле «Включить». В разделе «Настройки для вебмастера» укажите код верификации ресурса в кабинете для вебмастеров Google. Для этого добавьте в «Инструменты для вебмастеров» новый ресурс, выберите альтернативные методы верификации. Скопируйте часть кода HTML, указанную на иллюстрации. Вставьте ее в поле «Инструменты вебмастера Google» на странице настройки плагина. Сохраните параметры плагина. В кабинете для вебмастеров нажмите кнопку «Подтвердить». Для разметки страниц воспользуйтесь одним из следующих плагинов: Связка WPSSO и WPSSO JSON
Первый плагин базовый, а второй представляет собой расширение . С помощью базового решения на сайт можно добавить разметку Open Graph. С помощью второго с помощью JSON-LD реализуется разметка Schema.org.
WP SEO Structured Data Schema
С помощью данного плагина на сайт можно добавить несколько типов разметки Schema.org, включая Article, BlogPosting и Review. Разметка реализуется с помощью JSON-LD.
Плагин Schema App
С помощью этой программы на сайт можно добавить разные типы разметки Schema.org. Она реализуется через JSON-LD. Бесплатная версия поддерживает базовые типы разметки. Также разметку можно реализовать с помощью онлайн-генератора Schema.org JSON-LD Generator .
Установите и активируйте плагины WPSSO и WPSSO JSON. В консоли на странице настроек плагинов в разделе Essential Settings укажите информацию о сайте, а также сведения для разметки Open Graph. Не меняйте другие настройки. Перейдите в раздел Schema Markup. В полях Organization Logo Image URL и Organization Banner URL укажите URL логотипа и баннера сайта. Эти изображения могут использоваться на странице поисковой выдачи. С помощью выпадающего меню выберите базовый тип разметки для страницы записей блога, статической главной страницы. Вам нужны следующие типы: Blog и Website соответственно. Выберите тип разметки для страниц публикаций, статических страниц и страниц медиафайлов. Для страниц записей подходят типы разметки Article и BlogPosting. Выбор зависит от формата публикаций в блоге. Тип разметки BlogPosting – производное Article. Кроме BlogPosting, к частностям Article относится тип разметки News Article или «Новость». То есть BlogPosting содержит все семантические данные разметки Article. Используйте тип BlogPosting, если публикуете небольшие заметки, личные наблюдения и впечатления. Используйте тип Article, если публикуете обзоры, аналитические статьи, руководства. Вот пример: для публикаций в блоге «Текстерры» подходит тип разметки Article, а для дневника Екатерины Безымянной в ЖЖ подходит тип BlogPosting. Для статических страниц и страниц медиафайлов укажите тип разметки WebPage. После сохранения настроек плагин будет автоматически добавлять на страницы сайта выбранный тип разметки. В том числе семантические данные появятся на существующих страницах. Убедиться в этом можно с помощью инструмента проверки структурированных данных Google. Что делать, если вы публикуете материалы разного типа: лонгриды, небольшие заметки и новости? В этом случае для каждой публикации лучше выбрать подходящую разметку. Вместо надстройки WPSSO JSON воспользуйтесь плагином WP SEO Structured Data Schema. После установки и активации плагина на странице редактирования постов появится дополнительный раздел. С его помощью можно выбрать тип разметки и указать структурированные данные. Недостаток плагина – необходимость размечать каждую публикацию вручную. А к преимуществам можно отнести поддержку дополнительных типов разметки, например, Review, Product и Aggregate Ratings. Бесплатная версия WPSSO JSON не поддерживает эти типы. Повышать функциональность и юзабилити можно и нужно постоянно. Как отмечалось выше, некоторые владельцы сайтов на WordPress так увлекаются этим процессом, что устанавливают десятки и даже сотни плагинов. Чтобы избежать этой ошибки, начинайте повышение функциональности и улучшение юзабилити не с плагинов, а с определения проблем и задач, которые хотите решить. WordPress – самый популярный движок для сайтов в мире. По разным данным на нем работают 70-90% всех интернет-ресурсов. В связи с этим очень многим людям приходится работать с этой CMS (системой управления сайтом). Но прежде всего нужно знать, как создать сайт на wordpress, а уже потом настраивать все остальное. На этом сайте вы найдете полезные статьи по настройке этого движка. Один из главных плюсов этого движка – простота в установке. Конечно, нельзя вот просто так скачать WordPress и сразу начать создавать на нем свой сайт. Перед этим необходимо пройти очень важные шаги по регистрации доменного имени вашего будущего проекта. Также нужно купить услуги у одной из хостинг-компаний. Если сайт вам нужен для серьезных целей, лучше выбирайте надежного хостера. Я не буду останавливаться на этих шагах, потому что описал их в . Здесь же я хотел описать именно процесс установки WordPress на ваш сервер. Итак, если вы уже протестировали свой новый сайт и он успешно работает, самое время прямо сейчас установить на него движок. Если сейчас на вашем сервере есть какие-то файлы, то смело удаляем все это. Будем начинать все с чистого листа! Перейдите на официальный сайт WordPress-а.
Скачайте самую свежую версию движка. Полученный архив нужно будет распаковать в корень вашего сайта. Это можно сделать через FTP или CPanel (панель управления сайтом). Распаковали? Отлично, двигаемся дальше. Теперь перейдите на свой сайт. Если архив распаковался правильно, вы увидите окно приветствия от WordPress. Разработчики движка немного введут вас в курс дела, а именно что будет от вас требоваться для установки. А требуется от вас немного – имя базы данных, с которой будет интегрироваться движок, а также имя и пароль пользователя БД. Не спешите хвататься за голову, если ничего не поняли. Все это легко создается в панели управление, в пункте “Базы данных MySQL”
, там же создается и пользователь для БД (базы данных). Показываю скриншот, как это выглядит на моем хостинге. У вас может быть немного по-другому, но название инструментов примерно такие же. Также создать новую БД можно через утилиту phpMyAdmin. Вот так выглядит этот процесс в ней: Соответственно, просто скопируйте в установщик WordPress имя новой базы данных, а также введите имя пользователя и пароль, который вы задали. Еще одна настройка, которая есть на этом этапе – префикс таблиц. Настоятельно рекомендую сменить его на любой другой. По умолчанию стоит wp, поставьте любой другой. Например, wd, cy или xb . Следующий шаг. Тут вам нужно будет ввести имя пользователя и пароль от админки WordPress. Этим паролем вы будете пользоваться чаще всего, так как именно он нужен для входа в администраторскую часть WordPress, из которой вы и будете управлять сайтом. Тут же вы можете отметить галочкой опцию, которая нужна для запрета индексации сайта поисковиками. Впрочем, я не знаю, зачем вам это. Обычно сайты создают как раз для того, чтобы они индексировались поисковиками и из поиска на ресурс заходили люди. Эту настройку также можно выполнить позже уже из панели управления WordPress. Вот вы и поняли, как создать сайт на wordpress с нуля. Было не сложно, правда ведь? После окончания установки перед вами откроется страница входа, а после этого админка WordPress. Если вы видите ее перед собой первый раз, то едва ли сможете моментально разобраться. Впрочем, движок является одним из самых простых в плане визуального управления. Формально у вас уже действительно есть сайт. Он доступен в сети по определенному url-адресу и полностью работоспособен, он установлен в базу данных, и теперь вы можете в визуальном редакторе добавлять на сайт статьи, медиафайлы, страницы, а другие пользователи смогут оставлять на вашем ресурсе комментарии. Но тут есть одно но: устроит ли вас то оформление, которое по умолчанию поставил вам движок? Тысячи сайтов на wordpress каждый день появляются в сети, и у всех их по умолчанию стоит такой дизайн, и у многих он таким и останется. Это ничего страшного, если вы завели сайт чисто для эксперимента, но для WordPress созданы десятки тысяч шаблонов, и если создавать проект для серьезных целей, то вам нужен свой, уникальный. Вот тут мы и приходим к необходимости создания или переделки готового шаблона. Разработку собственного шаблона я вижу двумя способами. Первый способ А теперь минусы: В принципе, это все недостатки. Все упирается в то, есть ли у вас время, желание и хорошие знания, чтобы сделать эту тему. Хорошо, скажете вы, я хочу научиться создавать шаблоны, хотя бы самые простые, а где мне обучиться этому? Я хочу порекомендовать вам видеокурс от команды Webformyself
, в котором вы сможете пошагово создать шаблон для WordPress, даже если вы полный ноль в сайтостроении, а от слова “код”
вас тошнит. Я уверен, таких подробных и разжеванных пояснений не найдете больше нигде. По-моему, курс стоит около 5 тысяч рублей. Думаете, много? А я скажу вам, что если научиться создавать темы для WordPress, то на хлеб с маслом всегда сможете заработать. Даже создав один полностью уникальный шаблон вы полностью отобьете цену за курс. Мне кажется, это даже более привлекательный вариант. Суть его в следующем: вы скачиваете в сети так называемые темы-болванки и на их основании делаете свою. Что такое тема-болванка? Это специальный шаблон, который создан для того, чтобы на его основании делать новые, уникальные темы. Этот вариант мне больше нравится, потому что не нужно создавать ничего с нуля. Все файлы и стили уже прописаны, вам остается только менять все это на свое усмотрение, добавлять новый функционал и т.д. Я думаю, что процесс создания уникального шаблона таким образом можно ускорить и упростить. Недавно я обнаружил в сети как раз одну такую замечательную тему, которая заточена то, чтобы изменить ее под свои нужды. Скачать ее можно, перейдя по этой ссылке
. Называется она Bones, но вы легко можете переименовать ее, я даже рекомендую это сделать сразу же. Кроме этого в сети есть и другие пустышки, например: Итак, сейчас я установлю ее на свой локальный сервер. Жмем в админке – темы – добавить новую – загрузить. Находим скачанный архив, он установится и можно сразу же активировать. Вот что мне сразу нравится в этой теме, так это то, что она изначально выглядит достаточно неплохо. Но, конечно же, это пока неуникальный шаблон, осталось изменить его под свои нужды. Как изменить, это другой вопрос, давайте на нем немного остановимся. Если вы умеете создавать собственные темы, то редактирование готовых вообще не должно вызывать у вас вопросов. Но если вы новичок, конечно, вам придется потратить какое-то время на освоение базовых принципов. Что желательно знать для изменения темы: На Php работает подавляющее большинство динамических сайтов. Html – это язык разметки гипертекста, с него начинается создание любого сайта (подробнее о нем ). Css – отвечает за внешний вид элементов на веб-страницах. Хорошее знание этого языка без проблем позволит вам изменить дизайн, но саму структуру страниц вы с его помощью не измените. На самом деле в WordPress можно взять практически любую тему и переделать ее под себя, просто вышеприведенные шаблоны созданы специально для этого, специально для их изменения и доработки. О том, где и как выучить html и css я написал в . WordPress вы можете изучать по тому курсу, который я вам предложил, а можете и бесплатно, в сети есть два замечательных сайта с русской документацией движка и я пользуюсь ими очень часто: Конечно, некоторые самые простые настройки вы можете сделать чисто в визуальном режиме с помощью админки WordPress. Например, определить общий цвет фона страницы, а также поставить фоновые изображение, favicon, вставить логотип в шапку, добавить собственные уникальные виджеты. Все это первые шаги на пути к собственному уникальному и неповторимому дизайну. Я вам скажу, что это не оптимальный вариант. Не смертельный, но и не оптимальный. Вам нужно добавить хоть какие-то уникальные фрагменты на сайт, хотя бы логотип и шапку изменить, потому что если в сети ваш проект по внешнему виду будет полной копией другого – это плохо. В конце концов, в интернете также продаются премиум-темы. На самом деле в большинстве случаев их могут купить многие, но такие темы обладают простой визуальной настройко и разными цветовыми схемами, чтобы даже полный новичок, не разбирающийс в коде, мог легко внести изменения. Одним из таких шаблонов считается Sahifa. Когда-то мне он достался бесплатно при покупке сайта на telderi. А вообще за премиум-тему вам придется заплатить от 20 долларов, в зависисмости от потребностей. В любом случае, это уже будет не самостоятельное создание шаблона для WordPress, поэтому это тема для отдельного разговора. Короче говоря, чтобы самостоятельно сделать уникальный сайт на wordpress, нужно обладать определенной квалификацией, полный новичок этого сделать не сможет. В то же время, не стоит думать, что это слишком тяжело и не стоит даже браться. Как я уже и говорил, это начало. Если вы планируете развивать свой ресурс, вам предстоит еще огромная работа. Настройка внешнего вида, подбор шаблона или разработка нового с нуля, наполнение сайта, оптимизация его скорости, улучшение безопасности, дополнительные возможности (интернет-магазин, форум, фотохостинг). Сегодня на WordPress можно создать практически все! Десятки тысяч шаблонов, плагинов, сотни настроек – изучать движок нужно постепенно. Конечно, можно отдать все это знающему человеку и он все вам настроит один раз, так что останется только добавлять на сайт новые товары, тексты или что там еще у вас есть. Никто не отговаривает вас от такого пути. Иногда это даже разумнее – если есть деньги, но нет желания разбираться, а получить результат нужно быстро. Но любое дело приятно осваивать самостоятельно. И все равно найдутся люди, желающие освоить все самостоятельно, разобраться что к чему. Тем более, что 95% проблем можно решить не обладая огромными знаниями в программировании. Иногда нужного результата можно достичь с помощью нужного плагина. Иногда можно взять готовый код, скопировать его в нужное место и получить то, что требовалось. А еще чаще проблема решается чисто в визуальном режиме с помощью базовых настроек WordPress. Как видите, лезть в дебри движка нам не придется. Таким образом WordPress стал системой, которую выбирает для своих сайтов подавляющее количество людей. Работу с движком нужно осваивать постепенно. Для начала пройдитесь по панели управление, создайте свои первые записи и страницы, потом попробуйте добавить на страницы виджеты, изменить внешний вид, поменять шаблон, установить плагин и т.д. Создать шаблон для WordPress проще, чем можно подумать. Для этого не надо обладать огромным опытом разработки дизайна или программирования сайтов. В этой статье расскажем об основах создания с нуля собственных тем WordPress. Зачем вообще может понадобиться создание собственного шаблона WordPress, когда можно воспользоваться имеющимися в базе заготовками? Вот какие причины могут подтолкнуть к этому: Конечно, пройти полное обучение тому, как создать шаблон страницы, с помощью одной статьи не получится. Для начала важно понять основы – как делаются самые простые темы. На основе них уже можно заняться «творчеством» и создать лэндинг или сайт по своим желаниям. Сейчас дадим вам краткую шпаргалку с поэтапными инструкциями – она поможет понять, как происходит создание сайта. Шаг первый: подготовительные работы
Перед началом работ надо убедиться, что у вас есть текстовый редактор (самым простым является Блокнот или 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. В файле можно прописать любые элементы, которые вы хотите видеть у себя на сайте. Больше информации о прописывании кода 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. находим соответствующий участок кода и вставляем его в новый файл. Это будет: Тоже самое проделывается для остальных частей. Это надо сделать для более легкой навигации. Когда элементов будущего сайта будет много, то отдельные файлы помогут лучше ориентироваться для проверки или внесения изменений. Ниже приведен список стандартных файлов шаблонов, используемых WordPress. Их можно не использовать или добавлять свои разделы: Когда впоследствии вы будете дорабатывать каждый элемент, понадобится наглядный видеоурок. Вот несколько подборок, которые могут вам помочь: Шапка в 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; } Теперь можно в админке зайти во «Внешний вид›Темы» и активировать дочерний шаблон. В дальнейшем можно работать в новом файле. В дополнение небольшая видео-презентация на тему дочерних шаблонов:
Для начала в директории тем вордпресса (wp-content/themes) создайте папку с именем нашей темы. Пусть это будет ruseller_lessons
. Затем из папки темы по умолчанию (wp-content/themes/default) скопируйте файлы comments.php, search.php
и 404.php
в папку нашей темы. Эти файлы отвечают за комментарии и поиск на блоге. Затем в ruseller_lessons
скопируйте таблицу стилей style.css
нашего шаблона, screenshot.png (300x225)
и папку images
.
Открываем index.html
и вырезаем все, что находится до коментария , создаем новый файл header.php
и вставляем в него вырезанный код, сохраняем в директории нашей темы ruseller_lessons
:
My Blog
, and
" type="text/css" media="screen" />
" />
/">
Возращаемся к файлу index.htm. Первым делом удаляем всю форму поиска, затем вырезаем из него все от вызовом сайдбаров, получаем следующий код:
register_sidebar(array("name"=>"sidebar2"));
?>
...............................................
Возращаемся к файлу index.html и вырезаем из него все от
Recent Posts
10/23/2006
10/23/2006
10/23/2006
10/23/2006Recent Comments
About
:
" rel="bookmark" title=" ">
Recent Comments", ""); } ?>
Все что осталось в index.html
сохраняем как index.php
в папку с нашей темой, затем подключаем вызов header
, sidebar и footer
:Sample Blog Entry
News 3 comments
">
Ничего не найдено
the_permalink()
- отображает постоянную ссылку записи
the_title_attribute()
- заголовок текущей записи.
the_title()
- заголовок записи или страницы
the_category(", ")
- ссылку на категорию или категории, к которым принадлежит запись
comments_popup_link -
выведет ссылку для комментариев во всплывающем окне если comments_ popup_script() используется, иначе выводит обычную ссылку на комментарии.
the_content
- выводит содержание текущей записи. Если используется тег то сообщение показывается только до (только на главной странице, на странице записи будет показываться полностью).
next_posts_link
- ссылка на предыдущие сообщения.
previous_posts_link -
ссылка на следующие сообщения.
Этот файл мы создадим из только что законченного index.php
, немного изменив его:
"
Ничего не найдено
comments_template()
- Подключает файл шаблона comments.php
из текущей папки темы
previous_post_link(" %link"), next_post_link("%link")
- выведет заголовки предыдущей и следующей записи
Этот шаг проще предыдущего. Файл single.php
сохраняем как page.php
. Удаляем из page.php
вывод даты, комменты, next/previous:
"
Ничего не найдено
Иногда нужно/полезно вывести на странице заголовки всех записей. Для этой цели воспользуемся тегом wordpress query_post
:
Template Name: Archives
*/
?>
" title="">
|
Для кого это руководство?
Основные шаги по созданию сайта
Что такое CMS?
Почему Стоит Выбрать WordPress?
Найдите идеальное доменное имя
Покупка доменного имени и хостинга
Как установить вордпресс на хостинг
Поиск темы для вашего сайта
Где найти лучшие темы WordPress
Настройка сайта WordPress
Установка темы вашего сайта
Настройка Темы
Настройка Меню
Установка Плагинов
Настройка боковой панели (сайдбар) сайта
Создание новых категорий, страниц и записей
Напутствие
Почему WordPress – что это такое и 5 причин его использовать для сайта или блога
Шаг № 1: как выбрать хостинг и зарегистрировать домен
Шаг № 2: как установить WordPress своими руками
Как русифицировать тему WordPress
Шаг № 5: решаем практические задачи с помощью плагинов для WordPress
Как с помощью плагинов обеспечить безопасность сайта на WordPress
Как бороться со спамом на сайте WordPress
Как обеспечить SEO сайта на WordPress
Как повысить функциональность и юзабилити ресурса
Как создать сайт на wordpress с нуля – установка за 5 минут
Следующие шаги установки
Имя базы может быть любой, но начинаться должно с латинской буквы.
Логин вводите сами, а пароль а рекомендую генерировать автоматически. Установщик отлично с этим справляется и предлагает очень сложные пароли. Сразу же сохраните свой пароль в надежное место. Также нужно ввести имя сайта. К этой настройке можно отнестись не так серьезно – все равно потом сможете поменять. Также нужно указать адрес электронной почты. И лучше указывать надежный.WordPress установлен!
Попробуйте перейти на свой сайт. Теперь вы увидите там не белый экран, а что-то намного более похожее на нормальный сайт. На этом работа только начинается. WordPress по умолчанию установил вам тему, сгенерировал первую тестовую запись и страницу, чтобы вы могли видеть, как выглядит содержимое и как его можно оформить.Что делать дальше?
Создание своей темы – как?
Абсолютно с нуля, с чистого листа. Какие преимущества у такого способа:Где получить знания
Второй способ
Тема-болванка Bones
Устанавливаем Bones
Редактирование шаблонов WordPress
Уникализация в визуальном режиме
А если я все-таки буду использовать полностью шаблонный дизайн без изменений?
Настройка WordPress
Краткая инструкция
Site Title
Site Title
Чтобы главный индексный файл был согласован с дополнительными, в index.php под блоками для каждой части надо прописать следующее:
Как можно вносить изменения без опасений