Архив категорий Создание сайта

Автор:human

Создаем свой сайт на node js. Полная инструкция

Создаем свой сайт на node js. Полная инструкция.

Как установить ноду описано в предыдущей статье.
Для работы я использовал ubuntu 16.04 x 64 — моя любима ОС на Linux

Для начала установим ноду

Далee. Будем использовать готовый репозиторий гита

Теперь у нас приложение будет ругаться на зависимости. делаем

Автор:human

Как создать свой веб-сервер. Установка wordpress

Как создать свой веб сервер. Установка wordpress

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

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

Удобнее всего для создание веб-сервера использовать ubuntu — свою локальную систему или ubuntu в виртуальной машине. Я буду использовать веб-сервер в виртуальной машине. О том, как установить ubuntu server на виртуальную машину можете посмотреть здесь или найти статью в интернете (благо их вдоволь).

Установка web-сервера на ubuntu server

Подключаемся к своему серверу по ssh(как настроить ssh, ищите в интернете):

Введем и пароль и все. Мы в системе сервера.

как создать сайт на wordpress в ubuntu4

Установим веб-сервер apache2

Включаем модуль php

Далее установим базу данных mysql-server

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

12

13

Далее установим phpmyadmin для удобства администрирования( импорта и экспорта) баз данных

Выйдет окно с выбором веб-сервера для php — выбираем apache2(ставим галочку, выбираем с помощью кнопки tab)

14

Далее выйдет окно с на тройкой базы данных с помощью dbconfig-common. Выбираем ДА

15

Выйдет окно с требованием внести пароль для доступа к базе данных mysql, вводим тот, который вы вводили при установке mysql (выше)

17

Теперь введите пароль для доступа к phpmyadmin через web интерфейс — надо придумать новый.

18

Теперь повторим пароль19

Сделаем рестарт сервиса apache2

Теперь проверяем доступность веб-сервера, переходим в браузер и вводим ип адрес сервера, у меня ip 192.168.1.7

веб сервер на ubuntu

Проверяем работает ли phpmyadmin — вводим ip и phpmyadmin у меня https://192.168.1.7/phpmyadmin

пользователь — root

пароль — тот который вы указали при настройка phpmyadmin

веб сервер на ubuntu2

Теперь можем развертывать любое cms. Давайте попробуем установить cms wordpress,самую свежую версию.

Установка и настройка WordPress на ubuntu

Перейдем в директорию где должны быть расположены файлы cms(директория web сервера)

Удалим дефолтный файл index.html

Скачаем последнюю версию с сайта wordpress( на сегодня это wordpress-4.4.2-ru_Ru.zip)

Распакуем архив в данной директории

Перенесем распакованные файлы в папку веб-сервера apache

Поменяем владельца файлов и права доступа

Создадим новую базу данных и пользователя для нашего сайта на wordpress.

Можно сделать это через phpmyadmin или через консоль. Давайте рассмотрим процесс создания базы через phpmyadmin.

Зайдем в phpmyadmin

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

как создать сайт на wordpress в ubuntu

Создание пользователя и базы данных

имя  пользователя — db1.

Хост — оставляем пустой

пароль — придумаем пароль для пользователя

подтверждение — введем подтверждение

создать пароль — ничего не вводим

Ставим галочки в пунктах:

создать базу данных с именем пользователя…

предоставить полные привилегии на базы данных подпадающие под шаблон

!!!ОБЯЗАТЕЛЬНО!!! в ГЛОБАЛЬНЫХ ПРИВИЛЕГИЯХ ЩЕЛКАЕМ по «ОТМЕТИТЬ ВСЁ».

как создать сайт на wordpress в ubuntu2

Нажимаем ОК

как создать сайт на wordpress в ubuntu3

Теперь нам необходимо добавить доменное имя(для удобства и ассоциации сайта) в файл hosts на свое компьютере. Например назовем новый сайт test.local. Правим наш файл hosts

sudo nano /etc/hosts

Добавляем туда строку следующего вида (shift+ctrl+v)

Сохраняем (ctrl+o) и выходим (ctrl+x).

Теперь переходим в браузер и вводим в окно ввода доменного имени наш адрес

Появится окно с первоначальной настройка wordpress

как создать сайт на wordpress в ubuntu5

Нажимаем «Вперед».

как создать сайт на wordpress в ubuntu6

Появится окно для ввода информации

Имя базы данных — db1

Имя пользователя — db1

Пароль — введем наш пароль, который мы придумали, когда создавали пользователя и базу данных для нашего сайта wordpress. Всё остальное оставим без изменений. Нажмем отправить. Если у вас вылезет окно, что файл wp-config.php недоступен для записи и вам необходимо будет скопировать данные из окна и встаить их в него то проделаем следующие манипуляции.

Вставим туда данные, скопированные из окна, у меня они выглядят так


/**
* Основные параметры WordPress.
*
* Скрипт для создания wp-config.php использует этот файл в процессе
* установки. Необязательно использовать веб-интерфейс, можно
* скопировать файл в "wp-config.php" и заполнить значения вручную.
*
* Этот файл содержит следующие параметры:
*
* * Настройки MySQL
* * Секретные ключи
* * Префикс таблиц базы данных
* * ABSPATH
*
* @link https://codex.wordpress.org/Editing_wp-config.php
*
* @package WordPress
*/
// ** Параметры MySQL: Эту информацию можно получить у вашего хостинг-провайдера ** //
/** Имя базы данных для WordPress */
define('DB_NAME', 'db1');
/** Имя пользователя MySQL */
define('DB_USER', 'db1');
/** Пароль к базе данных MySQL */
define('DB_PASSWORD', 'cbrt32456');
/** Имя сервера MySQL */
define('DB_HOST', 'localhost');
/** Кодировка базы данных для создания таблиц. */
define('DB_CHARSET', 'utf8mb4');
/** Схема сопоставления. Не меняйте, если не уверены. */
define('DB_COLLATE', '');
/**#@+
* Уникальные ключи и соли для аутентификации.
*
* Смените значение каждой константы на уникальную фразу.
* Можно сгенерировать их с помощью {@link https://api.wordpress.org/secret-key/1.1/salt/ сервиса ключей на WordPress.org}
* Можно изменить их, чтобы сделать существующие файлы cookies недействительными. Пользователям потребуется авторизоваться снова.
*
* @since 2.6.0
*/
define('AUTH_KEY', 'e)YA$IwPQh|-OK:QL&A%Mq$xsW~M?9t)7Z8ec/|:!R+{+fYZJW<v,w1hrx3Ssfw6'); define('SECURE_AUTH_KEY', '*%>&<r*M*?e,qkEo>jOA#<pVBj_j:F|!0N+-WvG3%EV:g%(U5acsK.|tpo,y^P;|'); define('LOGGED_IN_KEY', 'Q|o[lV-aF%|xx>Si:V,^+EJ)(,-mzyu8?V:v4q;y|[gns4U-cGX?MI|?l+(P5^$P');
define('NONCE_KEY', '9,-usW)|p6~uCGAgE-!#^B<+NL{oC@-Oe{k:bWm&zC1bt8qy5.tu5;}]l@KAZ9Lj'); define('AUTH_SALT', '&O2!{~].S|dNDzh%^S!J tYKW4ne,4{XZa:W9=fphdDyA+|K[!]oDr.Pi2c-f |Q'); define('SECURE_AUTH_SALT', 'fF+8%-qP.3yp(9y}gQ/n3%QZ6W+Oko InO5-]&K08k5(P qRP6 _d=NM|Nc;'); define('LOGGED_IN_SALT', '+ 3|pL}4t0t27_|-x=4~o|+(0|]DkH#Hn39SYd ed/qY@VBFnx*&IwBNI|lJw>Bi');
define('NONCE_SALT', '-|u)=]|O9O?m.MM<p?GKQR:r~WAWV%L3VUIk:j?T#,4f+_QobM|Hs_ig&Aj h=fJ');
/**#@-*/
/**
* Префикс таблиц в базе данных WordPress.
*
* Можно установить несколько сайтов в одну базу данных, если использовать
* разные префиксы. Пожалуйста, указывайте только цифры, буквы и знак подчеркивания.
*/
$table_prefix = 'wp_';
/**
* Для разработчиков: Режим отладки WordPress.
*
* Измените это значение на true, чтобы включить отображение уведомлений при разработке.
* Разработчикам плагинов и тем настоятельно рекомендуется использовать WP_DEBUG
* в своём рабочем окружении.
*
* Информацию о других отладочных константах можно найти в Кодексе.
*
* @link https://codex.wordpress.org/Debugging_in_WordPress
*/
define('WP_DEBUG', false);
/* Это всё, дальше не редактируем. Успехов! */
/** Абсолютный путь к директории WordPress. */
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(__FILE__) . '/');
/** Инициализирует переменные WordPress и подключает файлы. */
require_once(ABSPATH . 'wp-settings.php');

Еще раз поменяем владельца папки и установим разрешения

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

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

как создать сайт на wordpress в ubuntu7

В окно «Требуется информация» введем данные:

Название сайта — Придумайте свое

Имя пользователя — придумайте пользователя

Пароль -придумайте пароль для доступа к панели администрирования wordpress

Ваш email — введите ваш email

Нажимаем — «Установить WordPress»

как создать сайт на wordpress в ubuntu8

Все на этом установка WordPress закончена. Нажимаем войти. Появится окно с вводом пользователя и пароля.  Введем имя пользователя и пароль. Всё мы оказались в панели управления сайтом. Что делать дальше.

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

Распаковываем и переносим в нашу папку с сайтом wordpress

Поправим права на каталоги сайта

Все теперь мы установили тему и необходимые плагины в наш новый сайт с wordpress.

Теперь перейдем в панель управления сайтом и активируем плагины. Затем перейдем во вкладку «Внешний вид» и выберем тему «ColorNews». В итоге получим вот такой сайт. Он пустой и вам надо будет настраивать и наполнять его.

как создать сайт на wordpress в ubuntu9

 

Автор:human

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

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

Теги:создать сайт, wordpress,создать сайт самостоятельно, вордпресс, wordpress, установить сайт на хостинг

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

Сегодня я расскажу как создать сайт  на выделенном хостинге. Мы будем создавать сайт на WordPress, так как это CMS(система управления контентов №1 для блогеров). Сайт можно разместить или у себя на компьютере(понадобится свой web сервер), или на выделенном сервере, или на виртуальном хостинге. Самый простой и не затратный способ это использование виртуального хостинга. Для хостинга я использую хостинг оператора Beget.ru . Это не реклама, я пользуюсь услугами этого оператора с 2014 года и никаких нареканий у мена не возникло. Вы можете выбрать любого другого хостинг оператора, после того как усвоите мой урок по установке и настройке сайта на wordpress.  Самый дешевый тарифный план в 2016 году обойдется
в 880 рублей в год, оплачивать можете как хотите, деньги снимаются каждый день. При оплате за год экономия.

beget

Итак переходим на сайт beget.ru  и выбираем «Виртуальный хостинг». В виртуальном хостинге выбираем тарифный план и нажимаем заказать. Вводим ваши данные

beget2

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

beget3

Нажимаем «НАЧАТЬ РАБОТУ». НАС ПЕРЕКИНЕТ В ПАНЕЛЬ УПРАВЛЕНИЯ.

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

Как мы видим из картинки, первый месяц нам предоставляется бесплатно, далее будет сниматься по 4,44 рублей/день, этого достаточно для того чтобы ознакомиться и решить нужен ли вам данный хостинг или нет. Далее мы можем создать свой домен(имя вашего будущего сайта). Для этого перейдем в «Домены» и выберем «Зарегистрировать новый домен»

создать сайт на wordpress itc-life.ru

Вам будет предложено ввести имя для вашего нового домена. Выбирайте любое незанятое имя домена. Узнать свободен ли домен можете на сервисе www.whois-service.ru. Стоимость доменного имени в зоне ru,рф — 120 рублей, есть конечно и дешевле, например ластриадомейнс, на я думаю что 25 рублей разницы не такие уж большие деньги.

Вводи имя и нажимаем продолжить (предварительно закиньте денег на хостинг — минимум 120 рублей для покупки)

создать сайт на wordpress itc-life.ru

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

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

создать сайт на wordpress itc-life.ru

Переходим опять на главную страницу панели управления  и Выбираес СМС

создать сайт на wordpress itc-life.ru2

Далее выбираем домен в который вы хотите установить WORDPRESS.

создать сайт на wordpress itc-life.ru

Нажимаем установить CMS!

Выбираем WORDPRESS

Далее необходимо заполнить данные

создать сайт на wordpress itc-life.ru3

Придумываем логин администратора, пароль, вводим свой email и описание сайта(только на английском) и нажимаем установить на сайт.

Будет выдана форма с вашими данными. Ничего не меняем и переходим по ссылке где есть вашсайт/wp-admin — это админка(панель управления сайтом).

создать сайт на wordpress itc-life.ru4

Перейдя по ссылке https://вашсайт/wp-admin мы попадем в панель управления. Она выглядит так.

создать сайт на wordpress itc-life.ru4

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

Переходим в «файловый менеджер» через «панель управления»

 создать сайт на wordpress itc-life.ru4

Откроется окно, перейдем в папку с нашим сайтом

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

В ней будет папка public_html, зайдем в нее и увидим следующие папки

wp-admin

wp-content

wp-includes

и различные файлы. Нас пока интересует папка wp-content

зайдем в нее и загрузим наш файл со сборкой

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

Выберем наш скаченный файл через кнопку «Browse»

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

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

И потом нажмём кнопку загрузка

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

Подождем пока она завершится и нажмем кнопку «Закрыть».

Теперь нам надо распаковать загруженный архив. Для этого выберем наш файл в файловом менеджере и нажмем «Распаковать Архив» и нажимаем «ОК»

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

После распаковки архива нам нужно перейти обратно в панель управления сайтом:

https://вашсайт/wp-admin

Переходим в меню «Плагины»

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

Отмечаем все плагины галочками и нажимаем активировать

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

Может вылезти ошибка. НЕ обращаем пока внимания на нажимаем на клавишу F5 — обновить страницу.

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

Теперь перейдем в вкладку «внешний вид» > «Темы» активируем тему Aueduct.

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

ВСЁ ПРОФИТ!!!

Теперь мы можем переходить на сайт и наполнять его содержимым.

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

ВОТ ТАК ВЫГЛЯДИТ НАШ САЙТ НА WORDPRESS СОЗДАННЫЙ С НУЛЯ!!!!

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

Конечно, теперь его надо будет настроить, наполнить, добавить в поисковики. Обо всем об этом я расскажу вам позже в моих видеоуроках и в рубрике «Настройка WordPress»

Автор:human

Создаем адаптивный шаблон для WordPress используя Bootstrap

Сегодня мы  будем создавать адаптивный шаблон для WordPress, при этом некоторые элементы мы создавать с нуля не будем, вместо этого используем Bootstrap. Для кого это понятие ново, может узнать много интересного здесь.Если же в двух словах, то Bootstrap – это удобный фреймворк для разработчиков, который помогает сократить время на создание шаблона.

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

Адаптивным (responsive) же называется тот шаблон, который адекватно отображается на различных девайсах: ноутбуках, мониторах, нетбуках, планшетах, смартфонах и других мобильных устройствах. Учитывая, что в последнее время, прогресс развивается семимильными шагами в плане технологий, то данный вид шаблонов весьма актуален и удобен.

Создавать мы будем простую WordPress тему, так сказать, макет с самым необходимым набором функций:

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

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

Весь процесс создания темы, для удобства, разобьем по шагам:

Шаг 1. Устанавливаем WordPress и скачиваем Bootstrap.

Шаг 2. В папке с темами wp-content\themes создаем новую папку, которой даем название  нашей новой темы, к примеру MyTheme. В эту папку закачиваем папку bootstrap, предварительно разархивировав.

Шаг 3. Теперь, в созданной нами папке MyTheme, создаем новый документ index.php. К слову, теперь все работы будут происходить только в папке темы – MyTheme.

Шаг 4. Нам необходим html код будущего сайта и за основу мы возьмем один из образцов, которые предложены на сайте Bootstrap – Basic marketing site. Главная страница сайта выглядит следующим образом:

 

 

Код сайта-образца.

Код слишком длинный для публикации в записи, поэтому открываем ссылку, копируем его из текстового документа и вставляем в наш index.php.

Шаг 5.  Итак, html страница у нас есть, теперь займемся созданием CSS документа.

Особенность WordPress заключается в том, что CSS документ обязательно должен присутствовать в корне темы и он должен носить имя style.css. Этот документ будет носить в себе информацию о теме: авторство, версию и т.д.

Поэтому создаем документ style.css, при этом не забываем, что создаем мы все новые файлы и документы в папке MyTheme. Размещаем в нем текст:

 

Шаг 6. Теперь, прежде чем мы активируем создаваемую нами тему в админ-панели, добавим скриншот под именемscreenshot.png Мы можем использовать для начала образец с сайта Bootstrap, а позже, после завершения работы над сайтом, добавить скрин собственного сайта. Скриншот должен иметь размеры 300х225 пикселей.

На данный момент наша тема MyTheme содержит: index.php, style.css, screenshot.png и папку bootstrap.

Шаг 7. Заходим в Админ-панель/Дизайн/Темы и видим нашу тему в списке тем. Активируем ее.

 

Я занимаюсь созданием темы на локальном хостинге, надеюсь, и вы тоже. Но если Вы решили поэкспериментировать на реальном хостинге, на действующем сайте, то вам стоит использовать плагин Theme Test Drive.

Перейдя на свой сайт мы увидим, что он принял вот такой облик:

Шаг 8. Перейдем непосредственно к созданию файлов, которые должны быть в WordPress теме:

  • index.php
  • style.css
  • header.php
  • footer.php
  • sidebar.php

WordPress шаблон содержит в себе гораздо большее количество файлов, но в данном случае мы будем создавать не все из них, так как у нас должен получиться простой минималистичный шаблон. И на данном этапе нам нужны лишь те пять файлов, которые указаны в списке. Поскольку index.php и style.css у нас уже есть, мы создадим пустые header.php, footer.php и sidebar.php. Чуть позже мы добавим еще некоторые файлы, которые важны и необходимы для работы темы.

Где же взять код для наших новых файлов? Все необходимое мы возьмем из нашего html кода, который мы раннее добавили в index.php. Смотрим на код и разбиваем его на части: шапку сайта, основной контент и футер, которые и будем размещать по соответствующим файлам. Сайдбар у нас пока что остается пустым, ним мы займемся позже.

Код для каждого файла берем по ссылкам (код длинный, поэтому экономим пространство и копируем код из текстовых файлов):

 

Шаг 9. С этого шага мы начнем вводить в код WordPress теги.

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

Эти теги: get_header() и get_footer(). Вставлять эти теги в код необходимо в тех местах, где должны находиться футер и шапка. После добавления этих тегов, index.php принимает следующий вид:

 

Шаг 10. На данном этапе нам необходимо поменять ссылки к CSS и JavaScript файлам. Вместо статичных ссылок используем специальный WordPres тег для подключения таблиц стилей ко всем страницам — bloginfo(). Начнем их менять в header.php.

 

Находим код

и меняем его на

Также чистим header.php от ненужных для WordPress темы тегов и добавляем один из ключевых тегов wp_head(), который важен тем, что без него не смогут работать подключаемые к сайту плагины. Также над wp_head() добавим функцию wp_enqueue_script()для подключения jQuery. После проделанных изменений наш header.php приобретает вот такой вид:

 

Шаг 11. Теперь в файле style.css произведем изменения, добавим код, который подключит к нашей основной таблице стилей (style.css) стили из bootstrap. Делаем мы это с помощью тега  @import.

Обновляем главную страницу нашего сайта и наблюдаем произошедшие изменения: таблицы стилей творят чудеса

Шаг 12. Нечто похожее, что мы делали в header.php проделаем и в файле footer.php – уберем статичные ссылки на JavaScrip файлы. Мы заменим их специальным тегом wp_footer(), который, как и wp_head(),  необходим для того, чтобы впоследствии мы могли использовать на нашем сайте различные плагины и они корректно работали.

Найдем код

и зменим его на

Теперь footer.php принял более краткий, но и более функциональный вид:

Шаг 13. Создадим новый файл в папке MyThemes – functions.php из которого и будут подгружаться JavaScript. Разместим в нем следующий код:

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

 

Если у вас не срабатывает выдающее меню, то проверьте корректность кода в functions.php и убедитесь, что в папке bootstrap загружены javascript файлы.

Шаг 14. Начнем работу над главной страницей нашей темы. Отправляемся в админ-панель и создаем страницу под именемHome или Главная. Переключаемся в режим HTML редактора и вырезав весь код, который касается главной страницы, из нашегоindex.php, переносим его на эту страницу и сохраняем.

Теперь index.php содержит в себе лишь вывод футера и шапки:

 

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

 

Теперь мы сделаем динамичными вывод контента и заголовка. В этом нам помогут два тега: the_title() для вывода названия иthe_content() для вывода контента. После строки <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> добавляем код:

 

После того, как изменения были внсены в код файлов темы, переходим в Админ-панель/Настройки/Чтение и выбираем постоянную страницу для отображения на главной. И, соответсвенно, в списке выбираем созданную нами страницу “Home”.

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

 

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

Шаг 15. Добавим информационные страницы.

Для этого в админке создадим несколько страниц: About, News и Contact. Почему именно эти страницы? Потому, что они по умолчанию стоят в используемом нами шаблоне с Bootstrap. Если хотите, в можете смело называть их иначе, и не обязательно на английском. Заполните их любой тестовой информацией, например, тем же Lorem Ipsum или Fillerati, а позже наполните их необходимым контентом или даже удалите и добавите совсем другие страницы.

Шаг 16. Поработаем над навигацией.

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

 

и меняем их на очень короткий код, который выведет список страниц:

 

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

Немного подкорректировав меню, мы сможем добиться того, чтобы в нем остались только нужные страницы и чтобы располагались они в нужном порядке. Для этого “Пример страницы” просто удаляем, а остальным страницам, в Атрибутах страницы или при Быстром редактировании, устанавливаем порядок сортировки. При этом учитываем, что есть нулевое значение, которое в данном случае, можно присвоить странице “Home”.

И проверяем изменения на сайте:

Шаг 17. Сделаем наш логотип ссылкой на главную.

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

Для этого мы используем тег wp_title().

Внутрь тегов <title></title> (файл header.php)  добавляем код, который поможет нам давать нам имя сайту не посредством кода, а просто из админки.

Вместо

используем

 

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

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

на

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

  • узнаем ID страницы

 

  • в header.php находим код, отвечающий за вывод списка меню, который мы добавляли раннее

 

 

  • и используем функцию exclude, которая исключит страницу из списка. Если же мы хотим добавить какую-то страницу, то используем функцию include. Итак, вид кода теперь у нас следующий:

 

Шаг 18. Изменим стили нашего меню, а точнее, добавим.

Для этого нам необходимо открыть файл wp-content\themes\MyTheme\bootstrap\css\bootstrap.css[/service] и перейти к строке 4589. Здесь заданы стили для нашего меню, мы же их немного усовершенствуем, добавив еще несколько стилей:

Обновляем сайт и походим по вкладкам меню:

Цвет активной кнопки мы можем менять в зависимости от гаммы нашего сайта, так же и цвет шрифта меню. По умолчанию, в botstrap.css для фона кнопки был указан серый цвет #E5E5E5, но я изменила его на такой цвет, какой использован на главной странице – цвет кнопки “Learn more” – #007CCC.

Шаг 19. Вернемся к созданию файлов и создадим файл, который отвечает за вывод страниц – page.php.

  • Заходим в index.php и копируем все его содержимое и вставим весь этот код в page.php.
  • Изменим текст “Sorry, no posts matched your criteria.”, во-первых переведем его на русский язык, во-вторых по смыслу этот текст подходит для главной страницы, а не для информационных страниц. Можем написать “К сожалению, такой страницы не существует.”. А в index.php этот текст мы можем перевести как-то так: “К сожалению, ничего не найдено по Вашему запросу.” Не забываем преобразовывать кодировку в utf-8!
  • Добавим вывод названия страницы (на главной мы его удаляли раннее).
  • Разобьем страницу на две колонки, для того, чтобы у нас наконец-то мог появиться сайдбар. Для этого мы используем классы из bootstrap.css: “span8″ для контента страницы и “span4″ для сайдбара. Вы можете найти точные размеры всех классов span в bootstrap.css начиная со строки 294. А контейнером для span будет класс “row”.
  • Подключим сайдбар с помощью тега get_sidebar().
  • Пересохраним  index.php как front-page.php, так как именно этот название WordPress позволяет использовать для главной страницы, если она не блоговая (убедиться в этом можно в wp-includes/template.php). Если же файл не переименовать, то он использует свойства файла page.php. НО index.php не удаляем, иначе тема не будет работоспособной.

 

Код страницы page.php – окончательный вариант:

 

Шаг 20. Создаем файл sidebar.php.

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

В sidebar.php размещаем код, который мы позже изменим (сделаем его динамичным), но пока, для наглядности, он нам необходим хотя бы в таком виде:

И теперь страницы имеют сайдбар, пока что пустой, но он есть. Не забываем менять кодировку.

Шаг 21. Один из самых важных шагов – создание страницы с записями. Ведь какой блог может обойтись без записей?

  • В админ-панели создадим страницу для вывода записей – “Блог”.
  • Создадим новый файл home.php, который и будет блоговой страницей.
  • Скопируем весь код page.php и заполним ним home.php.
  • Пропишем название страницы и поместим название в теги <h1></h1>.
  • Используем тег the_permalink() для связи краткой записи (анонса) в блоге непосредственно с самой записью. И выведем название записи тегом the_title(). Всю конструкцию поместим в теги <h2></h2>
  • Выведем дату публикации тегом the_time(). Формат даты: число, месяц, год. Если хотите использовать дату в другом формате, то можете сменить порядок вывода данных.
  • Исправим фразу “К сожалению, такой страницы не существует.”.

 

Окончательный код home.php выглядит так:

 

Шаг 22. Установим нашу страницу “Блог” как страницу по умолчанию для вывода записей.

Идем в Админ-панель/Настройки/Чтение и в выпадающем списке “Страница записей” выберем созданную нами страницу “Блог”.

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

Шаг 23.  Создадим файл отвечающий за вывод отельной записи.

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

Пересохраним файл page.php как single.php, так как именно single.php является файлом для каждого отдельного поста в WordPress.

Внесем некоторые изменения в код:

 

  • После вывода заголовка (title) выведем дату публикации, как мы это делали для блоговой страницы:

 

 

  • Используя тег comments_template() создадим возможность комментирования записи.

 

Окончательный вид single.php:

 

Шаг 24.  Вернемся к сайдбару.

Раннее мы создали файл sidebar.php, но кроме заголовка в него ничего не добавили. И прежде, чем заполнить его необходимым кодом, откроем файл functions.php и добавим в него код, который будет отвечать за динамичность сайдбара – за добавление виджетов из админ-панели в сайдбар. После добавления кода sidebar.php принимает следующий, уже окончательный, вид:

Теперь вернемся к sidebar.php и, удалив

вставим в него код:

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

 

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

В завершении, созданная нами тема, имеет в себе следующие файлы: footer.php, front-page.php, functions.pfp, header.php, home.php, page.php, sidebar.php, single.php, style.css, screenshot.png и папку bootstrap.

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

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

Скачать готовую тему можно здесь: MyTheme.

Источник идеи создания урока: www.blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial#comments

Яндекс.Метрика