Дневник Предпринимателя "inDV"
УстановитеFlash player
On-Line Радио от автора Дневника Предпринимателя "inDV" для действующих и начинающих предпринимателей и бизнесменов.

Формат радиостанции: All Talk

Жанры: House, Trap, Dubstep, Drum&Bass

Сейчас в эфире: Загрузка ...

  • Подписаться на статьи

    Введите свой Email-адрес:

    Подписавшись, вы будете получать все новые статьи себе на почту сразу после их публикации.
Рубрики: Интернет-Бизнес | Разработка | 26.01.2017 | 12:49 | 1 775 Просмотров

Создать сайт

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

Где лучше создать свой сайт?

Начнем с теории, как и во всех учебных пособиях. Первое, с чего просто необходимо начинать рассказ, это с ответа на вопрос: “Где лучше создать свой сайт?“, поскольку у читателей в последнее время слишком много мнений на этот счет. В частности, кто-то предпочитает прописывать проект, его составляющие дизайна, скрипты и сам движок (CMS) вручную, а поскольку 95% этому не обучены, то интернет-проекты получаются с огромнейшим количеством ошибок в коде. Как правило, такие ошибки мешают дальнейшему продвижению ресурса.

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

Программы.

Многих, задающихся вопросом: “Где создать сайт?“, интересуют в интернете специальные программы, которые, как правило, также не отличаются гениальностью. Исходя из моей практики, ни одна автоматическая программа не может удовлетворить потребность “зеленого” вебмастера. Если это автоматическая программа, то она еще хуже и страшнее, чем самонаписание кодов. Бесплатные даже могут внедрять свои какие-то элементы в сайт, от которых не избавиться, из-за чего можно попасться на крючок, продвигая их скрытую внедренную ссылку в ваш проект.

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

Хостинг.

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

Хостинг – это компания, имеющая в своем арсенале группу серверов, на которых располагаются интернет-проекты их клиентов.

Я пользуюсь недорогим и качественным хостингом – это ссылка на него (пройдите по ссылке, она вам пригодится для дальнейшей работы). Предупреждаю, что, как и любая компания, предоставляющая услуги, хостинг требует ежемесячные или ежегодные платежи, ведь фактически он вам дает место размещения вашего сайта и поддерживает его доступность всегда. Сам хостинг вам обойдется в 110 рублей в месяц или, если пожелаете оплатить год, то 1176 рублей за год. Для регистрации доменного имени потребуется сумма в размере 140 рублей (оплата ежегодная). На самом деле, суммы пустяшные, если понимать, что через какое-то время ваш сайт будет приносить клиентов в ваш бизнес или, если вы создаете сайт для себя, то начнете зарабатывать, продавая трафик.

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

Создать сайт на вордпресс с нуля.

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

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

Итак, первым делом, чтобы создать сайт на WordPress, мы зарегистрируемся на хостинге, ссылка была вам предоставлена. Выберем самый простой и дешевый тариф “Восток-1”, а также поставим помесячную оплату, чтобы не платить за год вперед, вдруг, вас что-то не устроит в этом хостинге или вы не захотите продолжать работать со своим детищем. Функции и возможности на этом тарифе абсолютно те же, что и на других, окромя почты.

где лучше создать свой сайт

После нажатия на кнопку “Поехали”, вам нужно будет ввести свой Email адрес и нажать также кнопку “Есть промокод или код партнера?”, в открывшемся поле вписать эту цифру (можете скопировать): 11094. После нажмите “Получить аккаунт”.

создать сайт на вордпресс с нуля

Проверьте, после нажатия на кнопку “Получить аккаунт”, у вас должна появиться такая надпись.

создать сайт по шаблону

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

создать сайт для заработка

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

создать сайт самостоятельно

Вход в аккаунт и оплата хостинга.

Итак, теперь вам нужно вернуться на почту, чтобы получить персональные логин и пароль.

создать сайт как вконтакте

Пройдите по ссылке, скопируйте логин и пароль (Я выделил нужное) и вставьте в эти поля:

создать сайт компании

Перед вам будет такая картинка:

где создать сайт

Далее, чтобы иметь возможность сразу пользоваться хостингом, необходимо пополнить баланс. Сделать это можно, кликнув по ссылке “Внесите оплату”, тогда вы окажитесь на странице с выбором способа оплаты. Способ оплаты выбирайте тот, что не сложен для вас. Период оплаты услуг выбирайте (1 месяц Восток-1), а вот сумму лучше поставьте 250. Почему лучше сделать таким образом? Просто потому, чтобы не совершать этот платеж дважды, ведь нам скоро предстоит регистрация домена, а она, как вы помните, стоит 140 рублей.

где лучше создать свой сайт

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

создать сайт

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

Персонифицирование аккаунта.

Все начинается с ввода паспортных данных. Для чего они нужны? Для того, чтобы, в случае кражи, взлома, недоступности и прочих неурядиц, вы смогли доказать, что этот аккаунт принадлежит вам. Паспортные данные также важны еще для того, чтобы оформить на ваше имя доменное имя (адрес сайта), ваши данные никуда не уйдут, а сама регистрация схожа с оформлением сим-карты – она ведь тоже оформляется на ваше имя. Тут ничего страшного нет! Итак, войдите в боковой панели в раздел “Владелец”.

В этом разделе вам нужно вручную вписать свои данные и нажать на кнопку “Сохранить”.

создать сайт визитку

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

Как впишите данные и сохраните их, откроется страница, где вам будет предложено отправить копию паспорта. Я заранее отсканировал два разворота перед написанием статьи. Итак, как сделаете сканы, так нажмите на кнопку “Загрузить копию паспорта”.

создать сайт с доменом ru

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

создать сайт на вордпресс с нуля

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

создать сайт вордпресс

Регистрация доменного имени.

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

создать сайт на вордпресс

Вводить все заново не нужно. Нажмите на кнопку “Заполнить автоматически” и ваши паспортные данные будут внесены автоматически, а вот адрес с номером телефона придется вписать заново. Как заполните, нажмите кнопку “Сохранить”.

создать сайт на WordPress

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

Далее вам нужно будет пройти в раздел “Добавить сайт” и по этой ссылке (там вы сможете проверить ваш домен на существование, если он уже был зарегистрирован другим лицом, существующий переоформить на вас никто не позволит (для абсолютных новичков))

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

создать сайт легко

Обратите внимание на изображение, программа, проверяющая существование домена, ответила, что моего домена еще не существует.

создать сайт по шаблону

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

создать сайт за 5 минут

Все! Домен зарегистрирован! Далее вам предстоит немного подождать, пока обновится DNS (от 2 до 8 часов), когда он обновится, вы сможете управлять своим сайтом. Далее нам предстоит создать сайт на вордпресс, к чему мы так долго и шли.

Установка WordPress.

Так уж получилось, что написание этой статьи совпало с акцией хостинга, стоимость домена при регистрации немного снизилась и составила 98 рублей. Пишу это, чтобы вы не подумали, что можно было положить на хостинг меньше, в нашем случае: 98+110=208 рублей. Для подтверждения прикладываю скриншот обращения в консультант онлайн хостинга.

создать сайт и зарабатывать на нем

Итак, теперь приступим к самой установке CMS WordPress на наш сайт. В панели своего аккаунта на хостинге зайдите в раздел “Установка приложений”, сразу увидите заветную систему управления сайтом, поэтому без промедления нажимайте на кнопку “Установить WordPress”.

создать сайт для заработка

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

создать сайт чтобы он приносил деньги

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

Окно с сообщением будет выглядеть так.

создать сайт самостоятельно с нуля

Сообщение на почте будет выглядеть так.

создать сайт с нуля

По сути, я сумел создать сайт вордпресс, но это не то, чего ждет предвзятый новичок, поэтому я продолжу. Что мы сделали и что нас ждет впереди? Вот, на какие вопросы действительно нужно ответить. Сам сайт уже выглядит так.

создать сайт самому

Что нас ждет впереди?

Чтобы вы в будущем не терялись и не путались: домен, сайт и CMS – это разные вещи. Домен – это адрес, который “прилипает” к сайту, сайт – это комплекс взаимосвязанных файлов и баз данных, которые не могут работать раздельно. Так вот, этот комплекс создается автоматически при установке CMS (движка сайта). CMS – это инструмент управления страницами, файлами, установками и пр. для удобства пользователей, не обладающих знаниями программирования, тем самым, является инструментом экономии вашего времени.

Что нас ждет? В ближайшее время нам необходимо настроить сайт, установить шаблон дизайна, настроить его на свой лад, установить необходимый пакет плагинов, установить несколько инструментов для отслеживания трафика и начать публиковать статьи на своем сайте. Создать сайт – не проблема, гораздо сложнее его вести, следить за ним, “холить и лелеять”, “удобрять и поливать”. 🙂

Таким образом, ваш сайт уже создан. Чтобы приступить к его настройке, необходимо зайти в административную панель сайта. Используйте данные, которые вы получили при установке движка: логин и пароль, зайти в админку можно по ссылке (ваш сайт/wp-admin/).

создать сайт как вконтакте

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

создать сайт компании

Скоро потребуется удалить ненужную “тестовую” страницу, одну “тестовую” запись, а также комментарий и шаблоны дизайнов, но пока мы это делать не будем, позже объясню, почему. Итак, пройдемся по разделам.

Разделы админки.

Как вы поняли, создать сайт за 5 минут, а то и меньше, все-таки возможная действительность. За что отвечают разделы административной панели WordPress, давайте разберемся. Чтобы вы не запутались, я поставлю каждому разделу порядковый номер.

создать сайт ru

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

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

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

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

5. Внешний вид. Это центр управления внешним видом вашего сайта. В разделе имеется возможность установки нового дизайна, редактирования содержания боковых колонок “Виджетов”, а также создание собственного меню.

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

7. Пользователи. Раздел для добавления, удаления пользователей. Есть функция антирегистрации на сайте (никто не сможет им управлять кроме вас). Не рекомендую его использовать в блогах, а если вы желаете создать Соцсеть, то WordPress для таких целей не предназначен.

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

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

Первоначальные настройки.

Давайте зададим название и описание сайту. Делается это в разделе “Настройки” – “Общие”.

где лучше создать свой сайт

Чтобы изменения вступили в силу, вам нужно спуститься вниз этой страницы и сохранить настройки – кнопка “Сохранить изменения”. Далее спуститесь в раздел “Постоянные ссылки” и выберите “Название записи”.

создать сайт на вордпресс с нуля

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

Создать сайт по шаблону.

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

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

создать сайт по шаблону

Чтобы исправить ситуацию, воспользуемся встроенным поиском. Нажмите на кнопку “Добавить новую”, откроется каталог шаблонов, выбирайте, какую хотите. Понравившуюся тему установите – кнопка “Установить”.

создать сайт для заработка

Далее активируйте шаблон:

создать сайт самостоятельно

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

создать сайт как вконтакте

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

Кроме внедренного поиска в WordPress, шаблоны можно найти также и в интернете. Достаточно просто в поиск Яндекс или Google вписать “бесплатные шаблоны вордпресс”, так перед вами откроется несколько огромнейших порталов, предлагающих свои работы. Иногда можно встретить и те, которые имеются в каталоге WordPress, но преимущество таких порталов в том, что там имеется функция демонстрации темы, т.е. вы увидите, как будет выглядеть тот или иной шаблон на вашем сайте, зайдя на демонстративную страницу. Поэкспериментируйте, поустанавливайте, а как найдете подходящий, удалите неиспользуемые. Каким образом? Сейчас расскажу.

Удаление неиспользуемых шаблонов.

Зайдите в файловый менеджер на хостинге и проделайте следующий путь к месту нахождения всех шаблонов: /domains/testindv.ru/public_html/wp-content/themes/.

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

создать сайт компании

Создать сайт для заработка.

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

В основном, такие сайты, как тот, который я также, как и вы, сегодня создал, могут зарабатывать, размещая контекстную и баннерную рекламу. Самые лучшие сервисы контекстной и баннерной рекламы: Рекламная Сеть Яндекса (РСЯ) и Google Adsense. В добавок ко всему, хочу сказать, что размер доходов, который может пойти с вашего проекта, невозможно предугадать, если не знать его тематику. Да, разные тематики имеют разную монетизацию, собственно, как и конкуренцию. Думаю, вам стоит трижды подумать прежде, чем вы приступите к оптимизации и наполнению своего новосозданного ресурса.

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

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

Рекомендации к ведению сайта – блога:

  • Сначала изучите всю информацию по правильному наполнению сайта, потом приступайте к работе (я изучал то, что рассказываю вам в статьях, на протяжении 5 лет, этой информации в полном объеме больше нигде нет или она платная);
  • Не останавливайтесь, пока не увидите первый результат;
  • Любой бизнес требует вложений. Если вы желаете создать сайт чтобы он приносил деньги, то это уже интернет-бизнес (куда и как вкладывать, чтобы продвигать ваше детище, я рассказываю в своих статьях);
  • Не воруйте (не копируйте) чужой контент (тексты с других сайтов), это может привести к санкциям со стороны поисковых систем и ваш сайт выйдет из индекса, следовательно посещаемости вам не дождаться;
  • Выбирайте тематику сайта, в которой себя считаете экспертом. Если нет такой тематики, в которой вы разбираетесь, выберите ее для углубленного изучения, чтобы была возможность самостоятельного написания статьи;
  • Некоторые системы рекламы не приветствуют сайты с материалом, защищаемым авторским правом (в основном, это программы, игры, фильмы/сериалы и музыка);
  • Если вы понимаете, что не способны что-то придумать, писать самостоятельно, можете опираться на чужие раскрученные сайты и делать рерайт опубликованных на нем статей, кроме того, вы можете заказывать или покупать уже готовые статьи. Единственный минус – вы не сможете установить достоверность написанной информации, если хоть немного не разбираетесь в тематике.

Если вы не знаете, что такое рерайт и копирайт, сейчас объясню.

Копирайт – это написание авторской статьи без использования источников, аналогов которой не существует.

Рерайт – это изменение существующей статьи с доведением ее до стопроцентной уникальности.

Создать сайт самостоятельно.

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

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

Создать сайт как вконтакте.

Итак, иду в аккаунт на хостинге и прямиком иду туда, где мы с вами остановились в прошлый раз перед рекомендациями. Ну, и создам пустую папку с названием VKblog Shimolin Pavel, сразу в нее зайду.

где создать сайт

Создам несколько файлов:

  1. Index.php (настрою его, как шаблон статьи)
  2. Page.php (шаблон страницы)
  3. Archive.php (шаблон рубрики)
  4. Home.php (шаблон главной страницы)
  5. 404.php (шаблон несуществующей страницы)
  6. Header.php (шапка сайта)
  7. Footer.php (подвал сайта)
  8. Functions.php (файл функций, использую для вывода боковых колонок, для остального не нужен)
  9. Sidebar_l.php (боковая колонка, где обычно вконтакте сообщения, друзья и т.д.)
  10. Sidebar_ava.php (тоже боковая колонка, где находится аватар иии… далее вниз…)
  11. Search.php (страница поиска)
  12. Searchform.php (создам здесь форму для поиска, обойдусь стандартной)
  13. Comments.php (форма комментирования, тоже обойдусь стандартной)
  14. Папка Images (туда помещу изображения, которые используются в стиле)
  15. Ну, и как же без Style.css (файл стилей, отвечает за внешний вид того или иного на сайте)

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

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

где лучше создать свой сайт

Итак, стоит начать с файла функций. Я пропишу только одну функцию в нем, чтобы вордпресс включил мне две боковые колонки.

Код:


<?php
if ( function_exists('register_sidebars') )
    register_sidebars(2);
?>

создать сайт

Все, сохраняю.

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

Код:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="distribution" content="global" />
<meta name="robots" content="follow, all" />
<meta name="language" content="en, sv" />
<meta name="viewport" content="width=device-width">

<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

<link rel="icon" href="http://testindv.ru/favicon.png" type="image/x-icon" /> <!-- Пропишите путь до файла иконки -->
<link rel="shortcut icon" href="http://testindv.ru/favicon.png" type="image/x-icon" /> <!-- Пропишите путь до файла иконки -->
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" media="screen" href="<?php bloginfo( 'template_url' ); ?>/style.css" />

<?php wp_head(); ?>

</head>

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

Фавикон – это маленькая иконка, отображаемая во вкладке браузера.

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

Код:

<body> <!-- Открываем содержание страницы -->

<div id="menu"> <!-- Длинная синяя полоса свехру -->
<div id="conteinermenu"> <!-- Контейнер для составляющих меню, чтобы ничего не плавало по шаблону -->
    
<div id="logo"> <!-- Логотип -->
<a href="http://testindv.ru"><img src="http://testindv.ru/logo.png"></a>
</div> <!-- Закрывашка логотипа -->

<div id="search"> <!-- Поиск -->
<?php include(TEMPLATEPATH."/searchform.php");?>
</div> <!-- Закрывашка поиска -->

<div id="navigation"> <!-- Навигационное меню -->
<ul>
<li><a href="#" rel="nofollow">главная</a></li> <!-- Кнопка, ведущая на страницу -->
<li><a href="#" rel="nofollow">все статьи</a></li>
<li><a href="#" rel="nofollow">о блоге</a></li>
<li><a href="#" rel="nofollow">об авторе</a></li>
<li><a href="#" rel="nofollow">связаться с автором</a></li>
</ul>
</div> <!-- Закрывашка меню -->

</div> <!-- Закрывашка контейнера -->
</div> <!-- Закрывашка верхней полосы -->

Зайдя в файл Style.css, пропишу там стиль фон сайта:

Код:

/************************************************
Главный экран
************************************************/
body {
	background: #edeef0; /* Фон сайта */
	text-align:center; /* Распределение текста по середине */
	margin: 0px auto 0px; /* Распределение объектов по середине */
	padding: 0px; /* Внутренние объекты никак не отступают от границ объекта */
	}

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

создать сайт визитку

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

создать сайт с доменом ru

Далее займусь стилем, чтобы исправить эту картинку. Меню верхнее раньше было как-то красивей, поэтому на новый дизайн вк опираться при его разработке сильно не буду. Возвращаюсь в место хранения моего шаблона “public_html/wp-content/themes/VKblog Shimolin Pavel/” и в style.css прописываю это:

/************************************************
Верхнее меню
************************************************/
#menu {
    height:42px; /* Высота синей полосы */
    width: 100%; /* Полоса на всю ширину экрана */
    background: #507299; /* Цвет полосы */
    margin: 0px auto; /* Распределение по середине от верхего края */
    position:fixed; /* Позиция фиксированная, при прокрутке  сайта, будет оставаться на месте */
    }

#conteinermenu {
    height:42px; /* Высота контейнера */
    width: 961px; /* Ширина контейнера */
    margin: 0px auto; /* Распределение по середине внутри полосы */
    text-align:left; /* Текст слева */
}

#logo {
    float: left; /* Позиционирование слева от предыдущего объекта (в нашем случае это первый объект) */
    height:42px; /* Высота контейнера под логотип */
    width: 165px; /* Ширина контейнера под логотип */
    margin: 11px 0px 0px 0px; /* Отступ на 11 пикселей от верхнего края */
    }
    
    #logo img {
        height:19px; /* Высота картинки логотипа */
        width: auto; /* Ширина автоматическая */
    }

#search {
    float: left; /* Позиционирование слева от логотипа */
    border: none; /* Границы поиска выключены */
    margin: 7px 0px 0px 0px; /* Отступ на 7 пикселей от верхнего края */
    }

    form {
        position: relative; /* Положение поиска устанавливается относительно его исходного места */
        width: 230px; /* Ширина */
        }
        .d1 {}
        .d1 input {
            width: 222px;
            height: 28px;
            padding: 0px 0px 0px 10px; /* Отступ текста от края формы поиска */
            border: 0px solid #7BA7AB; /* Выключение границ поиска */
            border-radius: 14px; /* Округление поля поиска */
            outline: none;
            background: #305075; /* Фон поиска */
            border: 0px;
            color: #e8eff7; /* Цвет текста поиска */
            }

#navigation { 
    float: left; /* Позиционирование слева от поиска */
    width: 541px; /* Ширина меню */
    text-align: right; /* Позиционирование текста справа */
    margin: 0px 0px 0px 10px; /* Отступ от другого объекта */
    padding: 0px 0px 0px 0px;
    height:42px; /* Высота навигации */
    font-size: 11px; /* Размер шрифта */
    font-family: Tahoma, Georgia, "Times New Roman", Times, serif; /* Шрифты */
    }

        #navigation ul {  
            width: 541px;
            margin: 0px 0px 0px 0px;
            padding: 13px 0px 0px 0px;
            }

        #navigation li { 
            display: inline;
            font-weight:bold;
            }

        #navigation a:link, #navigation a:visited { /* Стиль ссылки без навода курсором */
            color:#e8eff7;
            text-decoration:none;
            padding: 13px 9px 15px 9px;
            }

        #navigation a:hover, #navigation a:active { /* Стиль ссылки при наводе курсором */
            color:#ffffff; 
            text-decoration:none; 
            padding:12px 9px 15px 9px;
            background: #486991;
            }

Издалека, да напоминает уже дизайн Вконтакте, не так ли?

создать сайт на вордпресс с нуля

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

<div id="sidebar_l">

<ul>

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>
	
<?php endif; ?>
</ul>
	
</div>

В файле Home.php вызову левую колонку – пропишу следующее:

<div id="conteiner">
<?php include(TEMPLATEPATH."/sidebar_l.php");?>
</div>

Сразу говорю, что данное меню лучше создавать в WordPress (Внешний вид/Меню) и при вставке этого меню в виджет, не указывать заголовок меню, я его настраивать не буду. Так, а вот в style.css обозначу, обозначение ставить уже не буду, все функции те же, обозначение то же, если вы изучили прежние коды, то без труда разберетесь, что тут за что отвечает, да, и в любом случае, я вам предоставлю скоро готовый файл шаблона, который можно будет установить на свой сайт и настроить:

/************************************************
Контейнер под сайт
************************************************/
#conteiner { /* Контейнер под сайт*/
    height: auto;
    width: 961px;
    margin: 0px auto;
    text-align:left;
    }
            
/************************************************
Левая боковая колонка
************************************************/
#sidebar_l { 
    float: left;
    color: #285473;
    font: 13px/15px tahoma, Times new roman, Arial, Helvetica, sans-serif; 
    width: 154px;
    margin: 63px 11px 0px 0px;
    padding: 0px 0px 0px 0px;
    }
	
    #sidebar_l ul {
        color: #000000;
	    list-style: none;
	    margin: 0px 0px 0px 0px;
	    padding: 0px 0px 0px 0px;
	    }

    #sidebar_l ul li {
	    background: none;
	    display: block;
	    padding: 0px 0px 0px 0px;
	    margin: 0px 0px 0px 0px;
	    }

    #sidebar_l ul li ul li {
	    background: transparent url("images/bullet.png") 0px 1px no-repeat;
	    margin: 0px 0px 13px 0px;
	    padding: 0px 0px 0px 24px;
	    }

    #sidebar_l p{
	    padding: 0px 0px 0px 0px;
	    margin: 0px;
	    line-height: 0px;
	    }

    #sidebar_l li {
        list-style: none;
        }
        
    #sidebar_l a:link, #sidebar_l a:visited {
        color:#285473;
        text-decoration:none;
        }

    #sidebar_l a:hover, #sidebar_l a:active { 
        color:#507299; 
        text-decoration:none; 
        }

Уж очень хочется посмотреть, как теперь это выглядит.

создать сайт вордпресс

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

Скачать шаблон

Посмотреть результат

Так вот, несколько рекомендаций:

  1. В файле Home.php можно редактировать информацию, там написано предварительное описание и таблица, можете редактировать, но осторожно, ничего из кода не удаляйте, если не разбираетесь особо;
  2. В файл внедрено описание рубрик, поэтому необходимо сделать описание рубрик через редактор WordPress: Записи/Рубрика/редактировать;
  3. В файле Header.php не забудьте прописать ссылки на страницы, их также можно редактировать;
  4. Логотип у вас должен быть свой, загрузите его в корневую папку в файловом менеджере, я говорил выше;
  5. Чтобы изменить аватарку и миниаватарку (к записи), зайдите в папку шаблона “IMAGES” и замените файлы на свои;

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

создать сайт на вордпресс

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

Создать сайт компании.

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

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

Наверняка вы задались вопросом: “Зачем мне блог?”, хочу сказать, что он, в принципе, и не нужен. Чтобы главная страница вашего сайта не имела вид ленты последних новостей, вам нужно изменить настройки Вордпресс. Делается это в разделе “Настройки/Чтение”, просто измените статическую страницу на одну из созданных. Смотрите, как это делается.

создать сайт на WordPress

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

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

Заключение.

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

C этой статьей также читают следующие:

Оставить комментарий

Наверх