TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Учебник по WordPress: Как создать тему WordPress из HTML (часть 1)

1 389

Если вы начали с веб-сайта HTML (+ CSS), вам не нужно все бросать при переходе на WordPress. Вы можете преобразовать свой HTML в WordPress и запустить свой (теперь более мощный) веб-сайт на динамической платформе WordPress.

А может, дело не в этом. Возможно, вам просто интересно, как преобразовать HTML-дизайн клиента в полноценную тему WordPress. Или, может быть, вы хотите изучить основы программирования WordPress (+ PHP) с более знакомой стороны HTML.

Какой бы ни была причина, по которой вы здесь сегодня, это руководство по WordPress познакомит вас с основами создания темы WordPress из HTML. Вы можете следовать этому руководству, чтобы создать свою тему с нуля, или вы можете перейти на Github и загрузить стартовую тему WPExplorer, которая предоставляет «пустой холст» для создания вашей темы со всеми необходимыми файлами шаблонов и кодом для начала работы. Так что, если вы один из тех людей, которые предпочитают учиться, читая код, загрузите стартовую тему, пропустите руководство и посмотрите, как все работает … В противном случае получите редактор кода (я использую и рекомендую Notepad ++ или SublimeText) и готовый браузер., а затем следуйте этому простому руководству до конца.

Именование вашей темы WordPress

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

Общие предположения на данный момент:

  • У вас есть index.html и таблица стилей CSS.
  • У вас есть рабочая установка WordPress с хотя бы одной темой, например Twenty Fourteen.
  • Вы уже создали папку с темой, в которой будете сохранять новую тему WordPress ?

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

/* Theme Name: Your theme's name Theme URI: Your theme's URL Description: A brief description of your theme Version: 1.0 or any other version you want Author: Your name or WordPress.org's username Author URI: Your web address Tags: Tags to locate your theme in the WordPress theme repository */

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

Разбиение вашего HTML-шаблона на файлы PHP

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

Следующий шаг включает создание четырех файлов PHP. С помощью редактора кода создайте index.php, header.php, sidebar.php и footer.php и сохраните их в папке своей темы. На данный момент все файлы пусты, поэтому не ждите от них каких-либо действий. В целях иллюстрации я использую следующие файлы таблиц стилей index.html и CSS:

INDEX.HTML

CSS СТИЛЬНЫЙ ЛИСТ

#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;} .header{width:99.8%; border:1px solid #999;height:135px;} .content{width:70%; border:1px solid #999;margin-top:5px;} .sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;} .footer{width:99.8%;border:1px solid #999;margin-top:10px;}

Вы можете взять оба кода, если вам не с чем работать. Просто скопируйте и вставьте их в свой редактор кода, сохраните, создайте четыре файла PHP, о которых мы только что упомянули, и приготовьтесь к следующей части. Откройте ваш вновь созданный (и пустой) header.php. Войдите в существующую установку WordPress, перейдите в раздел Внешний вид – >> Редактор и откройте header.php. Скопируйте весь код между тегами и вставьте его в файл header.php. Ниже приведен код, который я получил из файла header.php в теме Twenty Fourteen:

Затем откройте файл index.html и скопируйте код заголовка (т.е. код из раздела

) в свой header.php сразу под тегами , как показано ниже:

Затем добавьте…

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

Скопируйте второй раздел (т.е. <div class = “content”>…

из index.html во вновь созданный index.php и добавьте…

… На самом верху и…

… До абсолютного дна. Эти три строки извлекают header.php, sidebar.php и footer.php (в указанном порядке) и отображают их в index.php, который объединяет ваш код. Сохраните все изменения. На этом этапе ваш файл index.php должен выглядеть так:

Затем скопируйте содержимое из разделов боковой панели и нижнего колонтитула в index.html в sidebar.php и footer.php соответственно.

Добавление постов

Ваш HTML-шаблон скоро превратится в тему WordPress. Нам просто нужно добавить свои сообщения. Если у вас есть сообщения в блоге, как бы вы отобразили их в своей настраиваемой теме «HTML-to-WordPress»? Вы используете особый тип функции PHP, известный как цикл. Цикл – это просто специализированный фрагмент кода, который отображает ваши сообщения и комментарии, где бы вы его ни разместили.

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

и

, как показано ниже:

Это позаботится о ваших сообщениях. Легко, как азбука. На данном этапе (и с использованием примеров файлов, представленных в этом руководстве) ваш header.php должен выглядеть следующим образом:

Ваш sidebar.php должен выглядеть так:

Ваш footer.php должен выглядеть так:

Вы заметили закрывающие теги и в нижнем колонтитуле? Не забудьте включить их тоже.

Ваш style.css должен выглядеть примерно так:

/* Theme Name: Creating WordPress Theme from HTML Theme URI: http://wpexplorer.com Description: This theme shows you how to create WordPress themes from HTML Version: 1.0 Author: Freddy for @WPExplorer Author URI: http://WPExplorer.com/create-wordpress-theme-html-1/ Tags: wpexplorer, custom theme, HTML to WordPress, create WordPress theme */ body { font-family: arial, helvetica, verdana; font-size: 0.8em; width: 100%; height: 100%; } .header { background-color: #1be; margin-left: 14%; top: 0; border-width: 0.1em; border-color: #999; border-style: solid; width: 72%; height: 250px; } .content { background-color: #999; margin-left: 14%; margin-top: 5px; float: left; width: 46%; border-width: 0.1em; border-color: #999; border-style: solid; } .sidebar { background-color: #1d5; margin-right: 14%; margin-top: 5px; float: right; border-width: 0.1em; border-color: #999; border-style: solid; top: 180px; width: 23%; } .footer { background-color: red; margin-left: 14%; float: left; margin-top: 5px; width: 72%; height: 50px; border-width: 0.1em; border-color: #999; border-style: solid; }

И ваш index.php должен выглядеть примерно так:

Опять же – это основано на веб-сайте слева направо с заголовком, контентом, боковой панелью и макетом нижнего колонтитула. Вы следите? Все пять файлов должны быть сохранены в папке вашей темы. Назовите папку как хотите и сожмите ее в ZIP-архив с помощью WinRar или аналогичной программы. Загрузите новую тему в свою установку WordPress, активируйте ее и посмотрите, как преобразованная тема работает!

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

Источник записи: https://www.wpexplorer.com

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