Блог

Перенос сайта на WordPress. Часть 2. Делаем свою тему.

Здравствуйте! В предыдущем уроке мы делали очень простую верстку сайта, сегодня займемся переносом сайта на WordPress. В уроке “установка wordpress на локальный сервер” мы установили WP и теперь давайте перейдем в корень админки, а потом сюда “путь к локальному серверу/site_test/www/wp-content/themes”. Мы попали в список всех тем админки. Чтобы не было путаницы скажу сразу что мы будем делать свою тему для WordPress, этот процесс и называется перенос сайта на WP. И так приступим. Создадим папку с нашей будущей темой, например test. В ней нужно создать такие файлы index.php, header.php, footer.php, style.css файл скопируйте с предыдущего проекта. Далее расскажу что делает каждый из них. Откройте файл index.html который мы сверстали ранее, нам нужно разбить его на части, и откройте на редактирование файл index.php. В index.php напишите такое:

Index.php – главный файл нашей темы, эти строчки кода подключают шапку и подвал темы, когда в браузере наберем site_test/ запустится сайт с WordPress а потом index.php. Но по умолчания в админке стоит другая тема. Нам нужно переключится на свою, заходим в админку и переходим в “Внешний вид/Темы/”, находим там нашу тему test и нажимаем активировать. Все наша тема запущена и работает файл index.php. Обновите страницу, будет белый экран так как наших файлах ничего нет. Начнем с файла header.php. Как видно с названия это файл для шапки нашей темы. В этот файл нужно скопировать вот такой код с файла index.html

и немножко изменить его.

и здесь

и перед тегом </head> нужно вставить

В целом вот такой header.php должен получится:

Сохраните и обновите страницу в браузере. Увидите только шапку сайта как при верстке. Мы изменили код, поменяли тег meta для того чтоб можно было изменять кодировку через админку, и путь к файлу css.

Теперь приступим к редактированию файла footer.php. В него нужно вставить вот такой код с файла index.html

и перед закрытием тега </body> вставить такое

Сохраните и обновите окно браузера, увидите что появился подвал. Теперь перейдем к самому интересному, index.php сделаем так чтобы можно было добавлять информацию через админку и она выводилась в контенте. Скопируем и вставим в index.php такой код между кодом php вот так:

Теперь нужно добавить главный цыкл и вставить его в тег <article></article>, вот так

Переходим в админку и берем в меню “Страницы/Добавить новую”. Потом пишем название и содержимое как на скриншоте:

Untitled-1

Нажимаем кнопку “Опубликовать”, только что мы создали страницу Контент которая будет показана на главной странице нашей темы, на скриншоте подчеркнуто id странички у меня 5, у вас может быть другой id, запомните его. Переходим к index.php. Перед цыклом нужно вставить вот такой код:

и вот сюда вместо page_id => 5 напишите id своей страницы. Переходим к цыклу, между тегом <h2></h2> нужно вставить такой код:

а в теге <h4></h4> вот такой:

И так мы создали страничку с названием и содержимым, в теле цыкла через php код “<?php the_title(); ?>” выводим ее название, и содержимое через “<?php the_content();?>”, перед цыклом указав к какой странице привязатся, думаю все просто. Вот полный код index.php

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

Спасибо, сообщение отправлено.