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

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

Поскольку интернет-бизнес растет, все больше и больше покупателей готовы тратить большие суммы на веб-сайты и на людей, имеющих нужные навыки. Вы, возможно, изучили, как создать веб-сайт на 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 конвертации(Часть 1)

Что необходимо знать о коде

Тема 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 :

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

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

По сравнению со статическим 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 :

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

ШАГ 2 — Нейминг темы WordPress при помощи файла style.css

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

/*Theme Name: NeoBlogTheme URI: http://www.1stwebdesigner.com/Author: Sam NortonAuthor URI: http://www.1stwebdesigner.com/Description: A Simple Blog Theme for 1stwebdesigner.comVersion: 1.0License: GNU General Public License v2 or laterLicense 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 дисплеях:

Вдохните в статический веб-сайт новую жизнь при помощи WordPress конвертации (Часть 1) После этого сохраните только что созданный файл под именем screenshot.png в корневом каталоге темы NeoBlog WP .

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

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

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

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

Вдохните в статический веб-сайт новую жизнь при помощи WordPress конвертации (Часть 1)
Вдохните в статический веб-сайт новую жизнь при помощи WordPress конвертации (Часть 1) Если вы теперь захотите проверить внешний вид темы NeoBlog WP , то увидите пустую страницу, так как мы ещё ничего не добавили в файл index.php .

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

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

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

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

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

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

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

<?phpif ( have_posts() ) {    while ( have_posts() ) {        the_post();        //        // Содержимое записи        //    } end while;} end if;?>

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

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

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

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

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

Заключение

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

Послесловие

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *