Текст книги "Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете"

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

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

На этом этапе создания сайта у нас есть следующее.

• Доменное имя для сайта стрюсам.рф с DNS регистратора Reggi.ru. Соотвественно, нам придется изменить DNS домена аналогично тому, как мы это делали для домена траволечебник.рф.

• Хостинг от Best Hoster, то есть нам известны DNS: ns123.dns-rus.net и ns124.dns-rus.net.

• База данных wm41399_stroyu.

Перед тем как устанавливать движок, заходим в панель управления доменами и изменяем DNS домена строюсам.рф (рис. 4.22).

Рис. 4.22. Изменение DNS домена строюсам.рф

По прошествии четырех часов мы попробовали заглянуть по адресу www.строюсам.рф и вот что увидели в окне браузера (рис. 4.23).

Рис. 4.23. После смены DNS по адресу www.строюсам.рф отображается содержимое корневого каталога

Внимание!

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

Мы оказались в каталоге public_html, который является корневым для сайта строюсам.рф. Это говорит о том, что изменение DNS прошло успешно и можно приступить к установке CMS.

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

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

Шаг 1. Все файлы, находящиеся на данный момент в каталоге public_ html, можно удалить.

Шаг 2. Загружаем архив с русской версией WordPress с сайта http://ru.wordpress.org/.

Шаг 3. С помощью менеджера файлов переходим в каталог public_html и щелкаем на значке Загрузить (рис. 4.24).

Рис. 4.24. Для загрузки файлов используем значок Загрузить

Шаг 4. После загрузки архива необходимо его распаковать, выбрав команду Извлечь (рис. 4.25).

Рис. 4.25. Для распаковки архива предназначена команда Извлечь

Примечание

Все основные команды для работы с файлами есть в контекстном меню (вызывается правой кнопкой мыши).

Шаг 5. После распаковки архива в каталоге public_html появится каталог (папка) wordpress. Заходим в каталог wordpress, выделяем в нем все файлы и перемещаем их в каталог public_html (рис. 4.26).

Рис. 4.26. Перемещение файлов из каталога wordpress в каталог public_html

Шаг 6. Находим в списке файл wp-config-sample.php и переименовываем его в wp-config.php.

Шаг 7. Открываем файл wp-config.php с помощью встроенного в панель управления редактора исходного текста.

Шаг 8. Вносим в файл wp-config.php все необходимые изменения, касающиеся названия базы данных, пользователя БД и пароля к БД. На рис. 4.27 строки, в которые были внесены изменения, подчеркнуты.

Рис. 4.27. Файл конфигурации с изменениями

II способ загрузки файлов WordPress. Загрузка файлов с помощью файлового менеджера. Перед загрузкой файлов WordPress по FTP нужно распаковать архив с движком и внести необходимые изменения в файл конфигурации (см. рис. 4.27). Для правки файла конфигурации можно использовать программу Notepad++, о которой мы говорили в главе 3.

Для дальнейших действий понадобится программа, позволяющая подключаться к хостингу по протоколу FTP. С такой программой вы уже знакомы – это бесплатный FTP-клиент FileZilla, самую свежую версию которого можно загрузить с сайта http://filezilla-project.org.

Вся необходимая информация, которая может понадобиться для подключения к хостингу по FTP, содержится в письме хостера:

• FTP-логин: wm41399;

• FTP-пароль: v2Iz2SihJUJrt9c;

• FTP-URL: 91.219.194.32 (или ftp.строюсам.рф);

• FTP-порт: 21.

Запустив FileZilla, вводим необходимые данные и нажимаем кнопку Быстрое соединение. После этого должно произойти подключение к хостингу. Дальнейшие действия очевидны: необходимо выделить файлы на локальном компьютере (левая панель) и перетащить их мышью на хостиг в папку public_html (правая панель) (рис. 4.28).

Рис. 4.28. Копирование файлов на хостинг

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

Шаг 1. Заходим на наш сайт www.строюсам.рф и вводим всю необходимую информацию в стартовом окне установки WordPress (рис. 4.29). После этого нажимаем кнопку Установить WordPress.

Рис. 4.29. В стартовом окне установки WordPress нужно указать всю необходимую информацию

Шаг 2. На этом шаге нам остается лишь с удивлением узнать, что установка WordPress уже завершена (рис. 4.30).

Рис. 4.30. Сообщение о том, что установка WordPress уже завершена

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

Рис. 4.31. Блог на WordPress со стандартным шаблоном

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

• перейти по ссылке Войти в меню сайта (такой ссылки может и не быть);

• дописать после имени сайта через прямой слеш wp-admin и нажать клавишу Enter; в нашем случае в строке браузера должно быть прописано www.строюсам.рф/wp-admin.

Теперь можно переходить к самому главному – наполнению блога контентом.

Внимание!

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

• правильность написания имя базы данных и пользователя БД в файле wp-config.php;

• правильность написания пароля в файле wp-config.php;

• присвоение пользователю всех необходимых прав по работе с базой данных (ALL_PRIVELEGES).

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

Сразу начнем с главного – добавим новые записи.

Шаг 1. Выбираем в консоли команду Записи → Добавить новую (рис. 4.32).

Рис. 4.32. Добавление новой записи

Шаг 2. После запуска редактора прописываем название статьи. В нашем случае статья будет называться «Погреб своими руками. Перекрытие погреба». Работать с редактором можно как в визуальном режиме (вкладка Визуально), так и в режиме отображения HTML-кода (вкладка HTML). Во время работы можно переключаться между этими режимами.

Для примера в начале каждой статьи будем вставлять изображение размером примерно 250 х 250 пикселов. Размер выбран не случайно, а с таким расчетом, чтобы рядом с рисунком «хорошо смотрелся» рекламный блок Google AdSense прямоугольной формы.

Для добавления изображений и прочих мультимедийных объектов в новых версиях WordPress используется универсальная кнопка Добавить медиафайл (рис. 4.33).

Рис. 4.33. Для добавления изображений предназначена кнопка Добавить медиафайл

Изображение можно загрузить с локального компьютера или выбрать из библиотеки файлов, то есть из тех файлов, которые были загружены на хостинг ранее. Перед вставкой изображения необходимо прописать альтернативный текст, текст под картинкой, указать выравнивание картинки и т. д. (рис. 4.34).

Рис. 4.34. Перед добавлением изображения задаем необходимые настройки

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

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

Рис. 4.35. Для публикации записей предназначена кнопка Опубликовать

Сразу после публикации запись будет доступна для посетителей сайта.

Внимание!

Если нужно, чтобы на главной странице сайта публиковалась только часть записи, то необходимо в текст вставить тег <!–more–>, используя соответствующую кнопку редактора.

После публикации первой статьи стоит сразу сообщить «Яндексу» о появлении нового сайта. Это можно сделать, пройдя по ссылке http://webmaster.yandex.ru/addurl.xml. Что касается Google, то он и без подсказки проиндексирует ваш сайт.

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

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

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

По умолчанию установлена тема Twenty Eleven, а мы настроим вторую тему под названием Twenty Ten. Для этого достаточно щелкнуть на ссылке Активировать, расположенной под описанием интересующей нас темы. В этой теме можно настроить виджеты, меню, фон и заголовок, перейдя по соответствующей гиперссылке в строке Особенности.

В заголовке блога при использовании темы Twenty Ten могут отображаться заранее подготовленные изображения. Несколько рисунков предустановлены в комплекте с темой (рис. 4.36).

Рис. 4.36. Несколько различных изображений предусмотрены в комплекте с темой

Возможен показ одного и того же изображения на всех страницах или случайный показ изображений. Размер рисунков темы Twenty Ten составляет 940 х 198 пикселов – именно под него мы создали в Photoshop изображение для нашего сайта «Строю сам» (рис. 4.37).

Рис. 4.37. Изображение для шапки сайта «Строю сам»

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

Переходим по ссылке Заголовок в настройках выбранной ранее темы Twenty Ten и загружаем созданное нами изображение. После этого оно становится доступным для использования в шапке сайта (рис. 4.38).

Рис. 4.38. Загруженное на хостинг изображение доступно для использования на сайте

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

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

Рис. 4.39. Сайт «Строю сам» с созданным нами изображением для шапки

В Интернете можно найти большое количество тем для WordPress. При поиске учитывайте, что надо искать темы, переведенные на русский язык, иначе некоторые элементы интерфейса будут отображаться на английском языке. Для примера мы загрузили из Интернета журнальную тему Render Magazine в архивном виде (файл render.zip). Эта тема – находка для лентяев, так как она автоматически создает миниатюры (маленькие картинки на главной странице) для каждой записи и сама ограничивает количество текста для записей на первой странице (нет необходимости вставлять тег <!–more–>). Более того, в теме есть слайдер, позволяющий «прокручивать» с определенной частотой картинки и заголовки статей.

Для установки новой темы выполняем следующие шаги.

Шаг 1. Выбираем в консоли управления Внешний вид → Темы.

Шаг 2. Переходим на вкладку Установить темы и щелкаем на ссылке Загрузить.

Шаг 3. Выбираем архив с шаблоном темы на локальном компьютере и нажимаем кнопку Установить (рис. 4.40).

Рис. 4.40. Загрузка архива с темой WordPress и ее установка

После установки новая тема станет доступна для использования на вкладке Управление темами. Для запуска темы необходимо лишь щелкнуть на ссылке Активировать, расположенной под описанием. Вот как стал выглядеть сайт www.строюсам.рф после активизации журнальной темы Render magazine (рис. 4.41).

Рис. 4.41. Вид сайта www.строюсам.рф с темой Render magazine

Естественно, тема нуждается в доработке. К примеру, необходимо сменить надпись Render magazine на Строю сам. Для этого нужно лишь сменить изображение логотипа, хранящегося по адресу http://xn-80ayehece2h.xn-p1.ai/wp-content/themes/render/images/logo.gif.

Примечание

Узнать место хранения картинок можно в любом браузере.

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

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

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

В установочном комплекте WordPress уже идет плагин для борьбы со спамом – Akismet. Но, как показывает практика, он частенько пропускает сообщения спам-роботов, которые со временем «эволюционируют», становясь все умнее. По этой причине приходится усложнять им жизнь. Для эффективной работы со спамом мы рекомендуем использовать плагин Antispam Bee.

Зная название плагина, его очень просто найти и установить из консоли WordPress.

Шаг 1. В консоли управления выбираем команду Плагины → Добавить новый.

Шаг 2. В окне Установить плагины вводим название интересующего нас плагина в поисковое поле и нажимаем кнопку Поиск плагинов (рис. 4.42).

Рис. 4.42. Для поиска плагина вводим его название в поисковое поле

Шаг 3. В результатах поиска плагин Antispam Bee возглавляет список. Для установки плагина щелкаем на ссылке Установить (рис. 4.43).

Рис. 4.43. Для установки плагина нужно щелкнуть на ссылке Установить

Установка плагина проходит автоматически.

Шаг 4. После установки плагина остается его запустить, щелкнув на ссылке Активировать плагин (рис. 4.44).

Рис. 4.44. Для запуска плагина нужно щелкнуть на ссылке Активировать плагин

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

По умолчанию отображаются три похожих записи на основе категорий (рис. 4.45).

Рис. 4.45. По умолчанию под статьей выводятся три похожих записи

Автоматическая расстановка рекламных блоков. Рекламные блоки можно размещать вручную, как мы это делаем на сайте www.pcbee.ru, либо в автоматическом режиме, используя один из многочисленных плагинов. Мы можем посоветовать плагин Quick Adsense, который позволяет использовать рекламу не только Google AdSense, но и других рекламных сетей. Кроме того, есть возможность ротации рекламных блоков, то есть при обновлении страницы тот или иной рекламный блок будет загружаться в случайном порядке. Если рекламные блоки оформить по-разному, то у пользователя не будет привыкания к рекламе, что положительно скажется на количестве кликов.

Как вы помните, в начале каждой статьи мы намеренно использовали рисунки размером 250 х 250 пикселов, оставляя место для рекламных блоков. Забегая немного вперед, мы все же посмотрим, как благодаря плагину Quick Adsense реклама вписывается рядом с рисунками (рис. 4.46).

Рис. 4.46. Рекламный блок рядом с изображением

На первых порах трех перечисленных плагинов вполне достаточно для работы.

Примечание

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

Когда написано определенное количество статей (у нас их целых двадцать ), можно подумать и о статистике посещений, так как при раскрутке сайта она обязательно понадобится. Нельзя забывать и о рекламодателях, которые наверняка захотят узнать, какая посещаемость у вашего сайта. Для того чтобы получать подробную информацию о посетителях сайта и их количестве, необходимо установить на сайт код так называемого счетчика. На сайте www.pcbee.ruтаких счетчиков три (рис. 4.47).

Рис. 4.47. На сайте www.pcbee.ru установлено три счетчика

Первый счетчик относится к сервису www.liveinternet.ru, второй – www.metrika.yandex.ru, а третий – www.top100.rambler.ru. Глядя на счетчики, можно узнать количество посетителей и количество просмотренных ими страниц. Для того чтобы получить более подробную статистику, нужно зайти на сервис статистики.

Сразу заметим, что нет необходимости обвешивать свой сайт всеми возможными счетчиками. Более того, не стоит лишний раз показывать статистику посещений. Для сайта «Строю сам» мы воспользуемся услугами только двух сервисов: www.liveinternet.ru и www.metrika.yandex.ru, причем статистику «Яндекс.Метрика» скроем от посторонних глаз.

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

Для получения HTML-кода для работы со статистикой «Яндекс.Метрика» необходимо пройти по ссылке http://metrika.yandex.ru и войти со своим логином и паролем, единым для всех сервисов «Яндекса». Далее нужно щелкнуть на ссылке Добавить счетчик, после чего откроется страница с настройками счетчика (рис. 4.48).

Рис. 4.48. Страница для настройки счетчика

Совет

Рекомендуем на вкладке Фильтры установить флажок Не учитывать мои посещения.

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

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

Куда вставлять код счетчика «Яндекс.Метрика»? Рекомендуем добавлять его в файл footer.php перед закрывающим тегом </body>. Чтобы открыть этот файл, выберите в консоли команду Внешний вид → Редактор. С правой стороны в колонке Шаблоны щелкните на ссылке Подвал (footer.php).

Примечание

Большим плюсом «Яндекс.Метрики» является то, что на одной учетной записи можно вести статистику по всем своим сайтам. Таким образом, можно оперативно увидеть картину посещаемости по всем своим проектам.

Если вы поклонник сервисов Google, то можете использовать суперпродвинутую статистику Google Analytics. При вставке кода придерживайтесь рекомендаций, описанных выше для «Яндекс.Метрики».

Установка счетчика Liveinternet. Liveinternet – весьма популярный сервис статистики у веб-мастеров. Однако для скрытия счетчика придется заплатить деньги. В нашем примере мы разместим счетчик (информер) в правой колонке сайта «Строю сам».

Для получения кода счетчика зайдите на сайт www.liveinternet.ru и щелкните на ссылке Получить счетчик. После этого появится стартовая форма настройки счетчика, пример заполнения которой для сайта «Строю сам» приведен на рис. 4.49.

Рис. 4.49. Стартовая форма настройки счетчика Liveinternet

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

Для вставки кода нужно выполнить следующие шаги.

Шаг 1. Копируем код счетчика в буфер обмена.

Шаг 2. В консоли управления выбираем команду Внешний вид → Виджеты.

Шаг 3. В списке допустимых виджетов находим виджет Текст (произвольный текст или HTML-код) и переносим его мышью в дополнительную область виджетов.

Шаг 4. Вводим заголовок, который будет отображаться над счетчиком (мы написали Статистика), и вставляем код счетчика. Теперь осталось нажать кнопку Сохранить (рис. 4.50).

Рис. 4.50. Вставка кода счетчика с помощью виджета Текст

После этих действий счетчик Liveinternet стал отображаться в правой колонке сайта (рис. 4.51).

Рис. 4.51. Отображение счетчика на сайте

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