Учебники

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

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

Если вы начали с веб-сайта 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

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>How To Convert HTML Template to WordPress Theme </title> <link rel="stylesheet" type="text/css" media="all" href="style.css"/> </head> <body> <div id="wrap"> <header class="header"> <p>This is header section. Put your logo and other details here.</p> </header><!-- .header --> <div class="content"> <p>This is the main content area.</p> </div><!-- .content --> <div class="sidebar"> <p>This is the side bar</p> </div><!-- .sidebar --> <footer class="footer"> <p>And this is the footer.</p> </footer><!-- .footer --> </div><!-- #wrap --> </body> </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:

<head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php wp_head(); ?> </head>

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

) в свой header.php сразу под тегами , как показано ниже:
<html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php wp_head(); ?> </head> <body> <header class="header"> <p>This is header section. Put your logo and other details here.</p> </header>

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

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

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

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

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

<?php get_header(); ?>

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

<?php get_sidebar(); ?> <?php get_footer(); ?>

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

<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>

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

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

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

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

и

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

<div class="content"> <?php if (have_posts() ): ?> <?php while (have_posts() ): the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="post-header"> <div class="date"><?php the_time( 'M j y' ); ?></div> <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <div class="author"><?php the_author(); ?></div> </div><!--.post-header--> <div class="entry clear"> <?php if (function_exists( 'add_theme_support') ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?> </div><!--. entry--> <footer class="post-footer"> <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </footer><!--.post-footer--> </div><!-- .post--> <?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <nav class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </nav><!--.navigation--> <?php else: ?> <?php endif; ?> </div><!--.content-->

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

<head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php wp_head(); ?> </head>

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

<?php dynamic_sidebar( 'sidebar' ); ?>

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

<footer class="footer"> <p>And this is the footer</p> </footer> <?php wp_footer(); // Crucial core hook! ?> </body> </html>

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

Ваш 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 должен выглядеть примерно так:

<?php get_header(); ?> <div class="content"> <?php if (have_posts() ): ?> <?php while (have_posts() ): the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="post-header"> <div class="date"><?php the_time( 'M j y' ); ?></div> <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <div class="author"><?php the_author(); ?></div> </div><!--.post-header--> <div class="entry clear"> <?php if (function_exists( 'add_theme_support') ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?> </div><!--. entry--> <footer class="post-footer"> <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </footer><!--.post-footer--> </div><!-- .post--> <?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <nav class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </nav><!--.navigation--> <?php else: ?> <?php endif; ?> </div><!--.content--> <?php get_sidebar(); ?> <?php wp_footer(); // Crucial footer hook! ?> <?php get_footer(); ?>

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

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

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

Похожие сообщения
Учебники

Как отображать похожие сообщения по категориям в WordPress

Учебники

Как получить отличный поиск для вашего блога WordPress

Учебники

Как начать успешный блог о еде с WordPress

Учебники

Как вручную загрузить шрифты Google в WordPress

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

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