23 Февраль 2012

Создание сайта на WordPress. Введение

Приветствую вас, уважаемый читатель.

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

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

Я планирую раскрыть следующие темы:

  • Основные моменты разработки дизайн-макета.
  • HTML-верстка в соответствии с требованиями семантического HTML5.
  • Настройка движка WordPress, установка необходимых плагинов.
  • Адаптация верстки для движка WordPress.
  • Подготовка SEO-продвижения проекта.
  • Осмысление возможных каналов привлечения трафика.
  • Аналитика развития проекта.

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

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

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

Итак, начнем вносить конкретику не откладывая в долгий ящик.

Программы, необходимые интернет-разработчику

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

В важности описанного шага можно убедиться, прочитав статью Вадима aka Wildo.

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

Что стоит на ноутбуке

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

Операционная система. В качестве операционной системы я применяю Windows 7. Если вы сидите на Windows XP (как это долгое время делал я из-за кажущейся тяжести семерки и «ужасности» интерфейсов) — переходите на семерку. Она хороша. Хороша шрифтами: мой любимый Georgia стал просто замечательным. Хороша интерфейсом, продуманными и красивыми его элементами (я люблю красивые вещи). Хороша скоростью загрузки (мне кажется или она реально быстрее XP). Хороша дополнительной защитой, не позволяющей работать всем программам от имени администратора.

Кстати, Windows 7 на моем ноуте лицензионный, ну это так, на всякий случай.

Локальная среда разработки. Здесь я остался верным устанавливаемым в ручную Apache + PHP + MySQL. Не верю я всем этим Денверам и XAMPP-ам.

Я уже много раз рассказывал о том, зачем нужна локальная среда разработки и как устанавливаются и настраиваются ее компоненты (ссылка 1, ссылка 2 с видеоуроком). Жаль, что старые посты уже несколько устарели, поэтому придется рассказать об актуальных корректировках процесса установки и настройки.

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

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

Для Windows 7 алгоритм установки несколько изменился.

Я проиллюстрирую процесс видеоуроком.

Принципы работы динамического сайта

Скачать видеоурок (5.38 МБ, *.wmv).

Установка Apache + PHP + MySQL в Windows 7

Скачать видеоурок (8.24 МБ, *.wmv).

Настройка Apache + PHP + MySQL в Windows 7

Скачать видеоурок (26.1 МБ, *.wmv).

Скачать дистрибутивы Apache + PHP + MySQL (72.5 МБ, *.zip).

Инструкции для конфигурации Apache

Как я говорил в видеуроке, Apache нужно разрешить доступ к папке, хранящей сайты. В моем случае это папка d:\sites. Соответствующие конфигурационные директивы для файла Apache2\conf\httpd.conf будут выглядеть следующим образом:

<Directory "d:/sites">
    AllowOverride All
    Options Indexes FollowSymLinks
    Order allow,deny
    Allow from all
</Directory>

Директива для подключения PHP, указываемая в конце файла httpd.conf:

#BEGIN PHP INSTALLER EDITS - REMOVE ONLY ON UNINSTALL
PHPIniDir "C:/Program Files/PHP/"
AddHandler application/x-httpd-php .php .html
LoadModule php5_module "C:/Program Files/PHP/php5apache2_2.dll"
#END PHP INSTALLER EDITS - REMOVE ONLY ON UNINSTALL

Для подключения тестового сайта я прописывал в файле Apache2\conf\extra\httpd-vhosts.conf следующие директивы:

<VirtualHost *:80>
    DocumentRoot "d:/sites/test/www"
    ServerName test.loc
    ErrorLog "d:/sites/test/logs/error.log"
    CustomLog "d:/sites/test/logs/access.log" common
</VirtualHost>

Файловый менеджер. Как вы могли заметить из предыдущего видео, я использую файловый менеджер Total Commander. На мой взгляд, это отличная программа, позволяющая оперировать файлами и архивами, работать с FTP.

Браузер. В качестве основного браузера я использую Google Chrome. Люблю его за быстроту и замечательные дополнения, которые серьезно помогают в работе:

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

MeasureIt! — еще одно замечательное дополнение в помощь верстальщику. Это линейка, позволяющая измерять размеры объектов в браузере.

Eye Dropper — пипетка, анализирующая цвет в браузере под курсором и отображающая его код.

Web Developer — данное расширение использую только из-за ссылок, позволяющие проверить HTML и CSS на валидность.

HTTP Headers — удобный плагин для просмотра заголовков, отправляемых сервером.

RDS bar — отличный SEO-плагин, позволяющий анализировать тИЦ и PR, количество проиндексированных страниц, наличие данной страницы в индексе поисковиков, проверять регистрацию сайта в авторитетных каталогах.

LiveInternet — удобный плагин для просмотра статистики загруженного сайта.

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

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

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

Работа с SVN. Для удобной командной работы с применением SVN-сервера, в качестве клиента рекомендую использовать свободную программу TortoiseSVN (подробнее о системе контроля версий, применяемой в групповых проектах, можно прочитать здесь).

Редакторы для написания кода. В основном код пишу посредством редактора NotePad++. В качестве IDE (за умение автодополнять теги и их свойства) использую NetBeans.

Графические редакторы. В качестве простенького графического редактора стараюсь использовать PixBuilder. Но, чувствую, от Photoshop никуда не деться, он все равно понадобится.

Снятие скриншотов. Очень часто в моей блоггерско-вебмастерской деятельности приходится снимать скриншоты экрана и делать на них какие-то пометки. Для данных целей, по совету Максима, я использую программу PicPick и она мне нравится.

Запись видеоуроков. Для записи видеоуроков я использую программу Camtasia Studio. Я написал два поста о своих наработках в записи видео: один пост, второй пост.

Заметки. Evernote — это прекрасная программа для сохранения заметок и доступа к ним с компьютера, телефона, планшета, через браузер.

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

Фотографии я тоже храню в облаке при помощи Google Picassa. В Пикасса есть более или менее адекватные инструменты для выгрузки фотографий в облако. Потом фотки приятно просматривать на iPad.

7 zip. Частенько ко мне попадают файлы, сжатые данным архиватором и встроенных свойств Total Commander уже не хватает.

Офисный пакет. OpenOffice.

Написание постов в блог. Посты пишу в OpenOffice и перевожу их в адекватный HTML при помощи Windows Live Writer.

Антивирус. Бесплатный Касперский на пол года от Яндекса.

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

Следующая публикация курса →

С уважением, Андрей Морковин.