Создать сайт в WordPress без знания языков программирования

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

Необходимые условия

1. Установить LAMP (Linux, Apache, MySQL, PHP) сервер. Если не установлен, кликните на ЭТУ ссылку и установите.

2. Установить WordPress по ЭТОЙ ссылке (опять же если не установлен).

3. Уметь печатать двумя пальцами (лучше конечно десятью).

4. Огромное желание сделать своими руками, что-то своё-неповторимое.

Если вышеперечисленные условия выполнены, тогда приступим.

Для вызова сайта(блога) введите в панели навигации брaузера:

http://localhost/wordpress/

Должна открыться следующая страница:

Я во время установки движка WordPress назвал его Мой сайт. Вы, естественно, дадите своё имя сайта. Это не так важно для начала (его потом всегда можно  переименовать). Как видно на снимке, в самом верху название сайта, ниже идёт так называемая шапка сайта с уже встроенной картинкой, кликните на ней и она будет меняться (выберите на ваше усмотрение). Ниже картинки размещена чёрная полоса рубрик сайта, где по умолчанию уже имеются две: Главная и Пример страницы (в дальнейшем я покажу как добавлять рубрики). И ещё ниже, содержание сайта (то о чём вы хотите поведать миру) и сайтбар с правой стороны, который отображает различные виджеты (рубрики, свежие страницы и мн. др., легко добавляемое и удаляемое по вашему желанию). Всё это называется-шаблон сайта. По умолчанию он состоит из шапки сайта и двух колонок: контент-колонка (содержание сайта) и сайтбар, но при желании его можно изменить на трёхколоночный или какой-то другой, коих огромное количество в сети, специально созданных для WordPress. Здесь сразу хочу предупредить, что чем больше колонок на сайте, тем менее он восприимчив пользователем, для которых вы и создаёте ваш сайт. Так что тут выбирать вам.

Закончив знакомство с основными параметрами страницы, перейдём в «творческую мастерскую» под названием Консоль. Кликните в левом верхнем углу на кнопке названия сайта и выберите Консоль. Снимок ниже.

После чего должна открыться эта самая Консоль с приветственным окном. Следующий снимок.

Познакомьтесь внимательно с содержанием и если хотите посетите » Первые шаги с WordPress» или «Помощь».

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

Перейдём к вкладке Записи. Подведите указатель к вкладке и сразу с правой стороны откроется контекстное меню:

Как видно, здесь четыре пункта на выбор: Все записи, Добавить новую, Рубрики и Метки. разберём их по порядку.

1. Все записи. Если вы кликните на этом пункте, то увидите только одну запись, составленную создателями WordPress для ознакомления-Привет, мир!, которую легко можно удалить, нажав на аналогичной кнопке.

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

2. Добавить новую. Кликните на строчке, после чего откроется «мольберт» творца, коим безусловно являетесь вы.

По умолчанию здесь только одна панель корректировки содержимым сайта. Добавим дополнительную панель, кликнув на последнем квадратике, указанном стрелкой и отметим Формат — Галерея, также отмечено стрелкой справа на «мольберте».  Должно получиться следующим образом.

Ну если с дополнительной панелью всё понятно — больше простора для корректировки содержимого, то почему Галерея? А вот почему. Когда вы делаете страницу в Записи, то после опубликования она переходит в рубрику Главная, что расположена внизу шапки сайта и при нажатии на данной рубрике посетитель попадает в галерею из десяти последних страниц, отображённых в виде анонса на материал, но кликнув на заголовке статьи или Продолжить чтение, откроется страница целиком. Сделано это для удобства пользователя и экономии места в рубрике.

3. Рубрики

Давайте добавим новую рубрику, ну, скажем, она будет называться Фото и нажмём Применить (почитайте внимательно анонсы к пунктам).

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

Таким образом добавляются рубрики по темам.

4. Метки. Порядок добавления Меток такой же как и рубрик. Снимок ниже.

Но Метки ни где не отобразятся до тех пор пока вы не создадите в них записи.

Перейдем к непосредственному созданию страницы.
Давайте создадим и опубликуем для примера запись с картинками или фото на сайте. Итак переходим: Записи ->Добавить новую. Должно открыться окно с «мольбертом» для нашего первого творчества.

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

Следует внимательно просмотреть текст и исправить все орфографические ошибки. Редактор подчёркивает только орфографические ошибки, стилистические же или знаки препинания он не расставляет. Это нужно делать правильно самому автору. Итак правим ошибки, внимательно читая подчёркнутое, так слово русский я написал с одной с, подставляем вторую (руками) и подчёркивание исчезло. Аналогично проделываем со словом Скончался, где первоначально было Сканчался.

Теперь настала очередь вставки картинки (фото) к тексту. Для этого у вас на компьютере в одной из папок должна быть заранее заготовлена надлежащая картинка или фото. Её просто так как она есть вставить нельзя. Прежде её нужно преобразовать в код, а уж затем вставить его в редактор. Для кодирования картинок (фото) в интернете есть много сайтов. которые этим специально занимаются. Вот некоторые из самых распространённых: http://www.radikal.ru/, http://www.pictureshack.ru/, http://www.pixshock.net/ и есть ещё много, но я пользуюсь и вам советую первый, указанный мной, т.е. http://www.radikal.ru/. Сейчас вы поймёте почему. Итак переходим по ссылке на сайт. Снимок ниже.

Прежде чем загрузить картинку, откорректируем параметры. По умолчанию здесь уже выставлены все параметры, но они слишком малы для отображении картинки на сайте, она получится слишком маленькой, а пользователю не нравится когда картинка микроскопических размеров. Прежде всего в строке Создать превью зачеркните цифру 180 и напечатайте свой размер, ну скажем 460 пикселей, затем в строке Увеличить до поменяйте размер максимум на 820, т.е. когда посетитель кликнет на картинке она увеличится до этого размера, который считается оптимальным для портативных компьютеров и будет вписываться в экран монитора, не выходя за его рамки (ведь ваш сайт будут просматривать пользователи разного «железа»). Галочку в строке Надпись на превью можно убрать, т.к. картинка достаточно большая. Теперь когда подготовка закончена, можно загрузить саму картинку. Кликаем на кнопке Обзор, откроется ваш файловый менеджер, отыскиваете нужную, клик на ней и Открыть.

После того как в строке Обзор отобразился путь к вашей картинке, нажмите Загрузить. Всё картинка загрузилась и преобразовалась в коды, расположенные ниже для разных вставок: на сайт, на форум и т.д. Но прежде чем скопировать код картинки, остаётся один штрих, а именно нужно чтобы она при увеличении отобразилась как графический файл. Кликните на кнопке Переход с превью и выберите На графический файл. Снимок ниже.

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

После того как код картинки скопирован, его нужно правильно расположить на вашем сайте. Что для этого нужно? В редакторе сайта справа на панели есть две  вкладки: Визуально — где вы сейчас находитесь и HTML. Нажмите на HTML и вы окажитесь в окне редактора кода. Вставьте скопированный код картинки в самое начало вашего поста, сместив ниже на два щелчка всё написанное ранее. Должно получиться как на снимке.

 Теперь вновь перейдите на вкладку Визуально, где будет ваша картинка. Снимок ниже.

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

 Я расположил снимок слева. Если вам не понравилось расположение, вы можете менять его пока не найдёте оптимальное расположение.
Теперь когда картинка на своём месте, текст написан и откорректирован, можно выделить жирным, курсивом, подчёркиванием, окрасить в другой цвет некоторые слова или целые фразы. для этого засините слово, предложение и нажмите одну из букв на панели редактора B, I, U, A-(выбор цвета) и действие тут же применится. Если что-то не понравилось в правке нажмите стрелку указывающую влево на панели редактора.
Если вас всё устраивает в создании страницы, её можно публиковать. Для этого справа в редакторе есть две кнопки: Посмотреть и Опубликовать. При нажатии Посмотреть, рядом откроется соседняя вкладка браузера с готовой страницей без публикации на хостинге, что даёт возможность ещё раз посмотреть и проверить содержимое уже глазами пользователя.  И если теперь вы оцениваете всё положительно нажимайте кнопку Опубликовать.

Вот что получилось у меня.

Моя запись получилась как аннотация к странице и стоит выше предыдущей от разработчиков — Привет мир! Но если нажать Читать далее, то откроется страница целиком с картинками и окном Добавить комментарий. Снимок ниже.

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

Далее. Страницы