Вдохните в свой статический сайт новую жизнь с помощью WordPress конвертации (Часть 1)

2020-10-20 0 ∞

Веб-дизайн и разработка являются одними из самых востребованных специальностей в последние годы. Согласны?

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

На первый взгляд, существует несколько причин, почему люди останавливались на варианте статического HTML (и CSS) сайта.

Почему люди выбирали статические веб-сайты?

Почему люди выбирали статические веб-сайты?

Статический сайт поддерживается почти любым браузером;
Легкая настройка.

Но когда дело доходит до функциональности, динамический сайт, например, на WordPress, это более верный путь.

Почему?

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

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

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

Если вы запустили статический (только HTML и CSS) сайт, вам не нужно бросать начатое если вы хотите перейти на WordPress. Тем не менее, конвертирование HTML-CSS сайта на WordPress требует некоторых навыков программирования - таких как знания PHP и JQuery - чтобы перевести статический сайт на динамическую платформу WordPress.

В этой серии из двух частей я расскажу об основных принципах преобразования HTML в полностью функциональную тему WordPress с использованием темы NeoBlog HTML and CSS.

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

Ресурсы, необходимые для выполнения заданий данной статьи

Тема NeoBlog HTML and CSS;
Базовые знания из Кодекса WordPress;
Некоторые навыки PHP и jQuery.

Что мы создаем

Что нужно знать о коде

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

При создании темы WordPress, стоит обратить внимание на следующее:

Будьте осторожны с именами файлов шаблонов, которые вы создаете. По умолчанию WordPress распознает такие имена файлов шаблонов, как single.php и page.php. Прежде чем называть или создать новый пользовательский файл, я рекомендую проверить имена шаблонов WordPress по умолчанию;
Ознакомьтесь с разделами Кодекса WordPress, посвященными определенным функциям, тегам или другим элементам перед тем, как использовать их в файлах шаблонов. Это подскажет вам верное направление для развития вашей темы;
В некоторых случаях вам потребуются внешние файлы JQuery, чтобы улучшить внешний вид темы WordPress или добавить некоторые функции. WordPress не предоставляет все необходимые ресурсы в базовой комплектации;
Убедитесь в том, что вы используете надлежащим образом структурированный, без ошибок PHP-код и валидный HTML-код. Для получения более подробной информации ознакомьтесь со стандартами кодирования WordPress;
Используйте чистый, валидный CSS. Смотрите стандарты кодирования CSS.
При разработке дизайна и макета сайта следуйте основным принципам дизайна.
Сохраняйте резервные копии файлов. Вы никогда ничего не потеряете, если будете создавать резервные копии файлов. В качестве дополнительных мер предосторожности, вы должны создавать резервные копии всех файлов темы, плагинов, которые вы используете, а также некоторых других файлов, связанных с разработкой темы.

Для чего вам нужны знания PHP?

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

WordPress использует PHP в качестве языка скриптов. Он имеет лицензию с открытым исходным кодом, заверенную Open Source Initiative. Некоторые части структуры кода WordPress для PHP-разметки противоречат друг другу, поэтому важно, чтобы у вас были базовые навыки PHP.

Тем не менее, чтобы создать тему WordPress, вам не обязательно быть PHP-разработчиком. Вам достаточно иметь базовые знания по HTML, CSS, JavaScript, а также PHP.

Как это работает?

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

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

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

Приступаем к работе

Для начала вам нужно создать папку темы в папке WordPress wp-content/themes.

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

Файлы шаблонов

По сравнению со статическим HTML-CSS сайтом тема WordPress состоит из кучи файлов шаблонов.

Это файлы, которые содержат код, обеспечивающий функционирование темы WordPress. Поэтому создайте в папке темы NeoBlog следующие файлы:

Папка CSS - эта папка содержит все таблицы стилей. Скопируйте эту папку из темы NeoBlog HTML and CSS;
Папка fonts - эта папка содержит все внешние шрифты, используемые в разметке. Скопируйте эту папку из темы NeoBlog HTML and CSS;
Папка images - эта папка содержит все изображения, такие как логотип и так далее. Эта папка должны быть скопирована из темы NeoBlog HTML and CSS;
Папка JS - эта папка содержит все скрипты JavaScript. Ее также скопируйте из темы NeoBlog HTML and CSS;
header.php - этот файл будет содержать код для раздела заголовка темы;
footer.php - этот файл будет содержать код для раздела подвала темы;
index.php - это главный файл для темы. Он будет содержать код для главной страницы, и указывать, где будут включаться другие файлы;
functions.php - этот файл работает как плагин WordPress, добавляя новые возможности и функционал для сайта на WordPress;
single.php - этот файл будет содержать основную компоновку страницы блога;
page.php - основной макет страницы;
page-about.php - это встроенный шаблон типа записи WordPress. Если конкретные страницы или группы страниц сайта должны вести себя или отображаться по-другому, это легко сделать с помощью шаблона страницы. Он используется для вывода страницы «О нас»;
page-contact.php - еще один встроенный шаблон типа записи WordPress. Он будет выводить контактную форму на страницах, где это было задано;
content-search.php - этот файл будет запускать цикл для поиска необходимых результатов;
search.php - этот файл отвечает за отображение страницы результатов поиска;
searchform.php - этот файл содержит макет формы поиска;
comments.php - этот файл содержит код для отображения комментариев;
sidebar.php - этот файл содержит область виджетов боковой панели;
404.php - этот файл будет возвращать уведомление "Not Found", если по конкретному поисковому запросу ничего не найдено или соответствующий объект не существует в базе данных;
style.css - этот файл будет включать в себя все стили и информацию темы NeoBlog;
screenshot - файл PNG-изображения, который должен представлять дизайн темы или заголовок темы. Для получения дополнительной информации посетите эту страницу.

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

В этой части серии статей нам нужно будет заняться следующим:

Скопировать файлы в папку NeoBlog WP;
style.css;
screenshot.png;
Активировать тему.

ШАГ 1 - Копирование необходимых файлов в тему NeoBlog WP

Для начала скопируйте папки CSS, шрифтов, изображений и JS из темы NeoBlog HTML and CSS в папку темы NeoBlog WP:

ШАГ 2 - Нейминг вашей темы WordPress с помощью файла style.css

Прежде чем начать работу с файлами шаблонов, добавьте ссылки на таблицы стилей темы NeoBlog HTML and CSS в тему NeoBlog WP. Затем создайте файл style.css в теме NeoBlog WP и скопируйте в него приведенный ниже код:

/*
Theme Name: NeoBlog
Theme URI: http://www.1stwebdesigner.com/
Author: Sam Norton
Author URI: http://www.1stwebdesigner.com/
Description:  A Simple Blog Theme for 1stwebdesigner.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url("css/reset.css");
@import url("css/bootstrap.css");
@import url("css/style.css");

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

Также в этом коде содержится ряд тегов @import. Они связывают стили из папки CSS с основными стилями темы NeoBlog WP, которые содержатся в этом файле.

ШАГ 3 - Добавление файла изображения скриншота

Теперь, когда тема была успешно проименована через файл style.css, нам нужно добавить скриншот темы. Создайте в Photoshop файл изображения с размерами 880 на 660 пикселей и поместите в него тексты с заголовком, кратким описанием и именем автора темы.

На самом деле в панели администрирования WordPress скриншот будет выводиться в разрешении 387 на 290 пикселей, но увеличенный более чем в два раза размер изображения позволяет просматривать его в высоком разрешении на HiDPI дисплеях:

ШАГ 3 - Добавление файла изображения скриншота

После этого сохраните только что созданный файл под именем screenshot.png в корневом каталоге темы NeoBlog WP.

ШАГ 4 - Активация темы

После добавления скриншота нам нужно активировать тему NeoBlog WP.

Но прежде чем сделать это, нужно проверить, работает ли тема или нет. Для этого создайте в корневом каталоге темы NeoBlog WP пустой файл index.php (не волнуйтесь, коды мы добавим в него позже).

Далее, активируйте тему, перейдите в панель администрирования и в главном меню WordPress выберите раздел Дизайн -> Темы. Наведите мышь на иконку, соответствующую нашей теме, и нажмите кнопку Активировать:

Если вы сейчас захотите проверить внешний вид темы NeoBlog WP, то увидите пустую страницу, потому что мы еще ничего не добавили в файл index.php.

Основные трудности, с которыми вы можете столкнуться

Во время работы у вас могут возникнуть проблемы с совмещением PHP- и HTML-кодов.

Что следует сделать

Дважды проверьте код. Это первое, что вы должны сделать. Может случиться, что вы забыли закрыть оператор if или while внутри цикла WordPress.

Приведенный ниже код будет выдавать ошибку, так как в операторе отсутствует end if:
Например:

<?php
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();
        //
        // Контент записи
        //
    } end while;
} // end if должен быть здесь
?>

В приведенном ниже коде эта проблема решена:

<?php
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();
        //
        // Контент записи
        //
    } end while;
} end if;
?>

Также проверьте, везде ли вы расставили закрывающиеся теги; в противном случае, при смешивании с HTML-кодом PHP может не работать.

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

Какие существуют ограничения?

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

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

Заключение

Отлично! Мы закончили первую часть этой серии статей. Из этой статьи вы узнали, как создать файлы шаблонов, и на что стоит обратить особое внимание при создании темы WordPress.

Послесловие

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

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

Наш HTML теперь готов и его можно конвертировать в набор файлов темы. В следующей статье мы поработаем с файлами шаблонов и добавим функции для вашей темы WordPress.

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

РедакцияПеревод статьи «Energize Your Static Website with This WordPress Conversion Tutorial (Part 1)»