Информация Как натянуть html шаблон на Wordpress

ponoroshca

Копии любых сайтов
Нарушитель
Регистрация
9 Дек 2012
Сообщения
183
Реакции
240
Шаблон HTML после быстрого поиска я выбрал вот этот — Simple Factorial. Дизайн конечно простоват, но в целях эксперимента подойдет. Есть заголовок, меню, футер, сайдбар.

Simple-Factorial-by-Bryant-Smith.png



ПОДГОТАВЛИВАЕМ ФАЙЛЫ ИСХОДНОГО ШАБЛОНА ДЛЯ ПЕРЕНОСА НА WORDPRESS
Создаем новую папку в каталоге с темами WordPress. Распаковываем и копируем туда шаблон Simple Factorial.

Первое, что я сразу сделал, перенес изображения, вызываемые из файла стилей в отдельный каталог img/, чтобы они не мешались в корневой папке. И отредактировал style.css соответствующим образом.

kak-natyanut-html-shablon-na-wordpress-1-shag-sozdanie-papki-temy.png



ПОДКЛЮЧАЕМ ТЕМУ В АДМИНКУ
Чтобы тема заработала и появилась в админке WordPress, надо в самом верху файла Style.css записать следующие строки:

Код:
/*
Theme Name: Simple Factorial
Theme URI: //www.quackit.com/html/templates/download/bryantsmith/SimpleFactorial/
Author: Bryant Smith
Author URI: //www.quackit.com/
Description: Simple Factorial is the same as Simple * Simple-1 * Simple-2 * Simple-3 ; or in other words, a whole lot of simple. This template is meant to be really simple to use, and really simple to naviagate. It should also do well with search engines for that reason.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: //www.gnu.org/licenses/gpl-2.0.html
*/


СОЗДАЕМ ФАЙЛ HEADER.PHP
Копируем в него из index.html следующий код:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Simple Factorial by Bryant Smith</title>
</head>

Обратите внимание, я не скопировал меню, идущее за тегом head, хотя оно будет также находиться в заголовке, и мы туда добавим полноценное динамическое меню WordPress.

kak-natyanut-html-shablon-na-wordpress-shag-2-zagolovok-sajta.png


Теперь будем адаптировать файл header.php. Вот готовый код, и я объясню как он работает.


PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<title><?php bloginfo('name'); ?></title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
В нем я вывел динамически тег title, и ссылку на файл стилей.


<?php bloginfo('stylesheet_url'); ?>
  • выводит ссылку файла стилей

<title><?php bloginfo('name'); ?></title>
  • динамически формирует title из названия сайта

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
  • возвращает URL файла xmlrpc.php

<?php wp_head(); ?>
  • очень важная функция wp_head(), которая обеспечивает работу плагинов, подключает стили и скрипты на страницы сайта.

СОЗДАЕМ ФАЙЛ FOOTER.PHP
Копируем в него следующий участок кода:

PHP:
<div id="footer"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> by <a href="#">My Site</a>
</div>


<?php wp_footer(); ?>
</body>
</html>


<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
  • вывожу название сайта с ссылкой на него

<?php wp_footer(); ?>
  • хук wordpess, аналогичный wp_head(), только для подвала.


СОЗДАЕМ ФАЙЛ INDEX.PHP, ОСНОВНОЙ ШАБЛОН ДЛЯ СТРАНИЦ САЙТА
Подключаем в него заголовок и подвал

1
<?php get_header(); ?> <?php get_footer(); ?>
Копируем оставшееся содержание из файла index.html и вставляем в index.php между хэдером и футером.

kak-natyanut-html-shablon-na-wordpress-shag-5-sozdanie-fajla-index.png


Теперь сделаем еще один шаг, перенесем код меню в header.php. Файл с изменениями выглядит вот так.

kak-natyanut-html-shablon-na-wordpress-perenos-menyu-v-fajl-header.png


В принципе, можно активировать тему, и смотреть что получилось.

kak-natyanut-html-shablon-na-wordpress-SHag-5-3-Vid-sajta.png


Вывелся наш шаблончик. Правда со статическим содержанием и сайдбаром. Теперь нужно сделать их динамическими.


ВЫВОДИМ ЗАПИСИ В СОДЕРЖАНИИ ДИНАМИЧЕСКИ
Вот код динамического вывода записей в основном содержании, ниже будут пояснения.


PHP:
<div id="contentColumn">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>




<div class="divider"></div>


<?php the_content(); ?>
<?php endwhile; else : ?>

<?php _e( 'Sorry, no posts were found.' ); ?>

<?php endif; ?>
</div>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>;
  • если записи найдены, и пока они есть, извлечь их из базы данных

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  • Вывести название записи с ссылкой ЧПУ в теге h2

<?php the_content(); ?>
  • вывести саму запись

<?php endwhile; else : ?>
  • завершение цикла, иначе

<?php _e( 'Sorry, no posts were found.' ); ?>
  • если записи не найдены, вывести информативное сообщение
Обратите внимание, я сохраняю начальную разметку и классы шаблона, чтобы стили правильно подключились.
Для проверки, я создаю несколько записей в админке WordPress, и убеждаюсь, что тема правильно работает.


ДОБАВИМ SIDEBAR/БОКОВУЮ КОЛОНКУ С ВИДЖЕТАМИ
Создаем файл sidebar.php, переносим в него весь участок кода, выводящий боковую колонку в шаблоне.

Вместо него вставляем php функцию:


<?php get_sidebar(); ?>
kak-natyanut-html-shablon-na-wordpress-sozdanie-sajdbara.png


Сохраняем файл, проверяем работу. Sidebar всё еще статический, просто он выводится из шаблона.

ЗАРЕГИСТРИРУЕМ SIDEBAR В FUNCTIONS.PHP
Файл functions.php позволяет дополнять WordPress новой функциональностью и возможностями, так же как и плагины. Он лежит в корне темы.

Создаем functions.php, и вписываем в него следующий код.


PHP:
if ( function_exists( 'register_sidebar' ) ) {
register_sidebar( array (
'name' => __( 'Primary Sidebar', 'primary-sidebar' ),
'id' => 'primary-widget-area',
'description' => __( 'The primary widget area', 'dir' ),
'before_widget' => '
<div class="subHeader">',
'after_widget' => '</div>

',
'before_title' => '
<h3>',
'after_title' => '</h3>

', )
);
}

Если функция существует, зарегистрировать sidebar, мы передаем ей название сайдбара, его ID, описание, html теги, которыми окружены его элементы. Обратите внимание на класс оборачивающего блока subHeader, он взят из шаблона Simple Factorial, чтобы стили наложились правильно.

Смотрим, что получилось, предварительно добавив несколько виджетов в появившейся области Primary Sidebar.

kak-natyanut-html-shablon-na-wordpress-dinamicheskij-sajdbar.png


Отлично. Теперь давайте разберемся с меню.


РЕГИСТРИРУЕМ ДИНАМИЧЕСКОЕ МЕНЮ В FUNCTIONS.PHP
В файл functions.php добавляем поддержку меню с помощью стандартных функций WordPress:


add_theme_support('nav-menus'); if ( function_exists('register_nav_menus')) { register_nav_menus( array( 'main' => 'Main Nav' ) ); }
Открываем файл header.php, заменяем блок статического меню строкой:


<?php wp_nav_menu( array('menu' => 'Main', 'container' => 'nav' )); ?>
В итоге должно получиться вот так:

kak-natyanut-html-shablon-na-wordpress-dinamicheskoe-menyu.png


Можно уже создавать страницы в WordPress, и через админку добавлять их в меню.

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

  • single.php — шаблон для вывода записи
  • page.php — шаблон для обычной страницы
  • 404.php — шаблон для страницы 404
  • searchform.php — шаблон для формы поиска
Создавать их уже будет проще, имея главную страницу. Но есть некоторые детали, на которые следует обратить внимание.

СДЕЛАЕМ ШАБЛОН ДЛЯ ВЫВОДА СТРАНИЦЫ ЗАПИСИ SINGLE.PHP

Просто скопируем файл index.php, и немного его адаптируем.
Во-первых, мы хотим убрать ссылку на запись из её названия, потому что мы уже внутри неё. Верно?


<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
Станет


<h2><?php the_title(); ?></h2>
Теперь, чтобы немного изменить вид шаблона single.php, давайте добавим под заголовком автора и дату публикации.

Нужно вставить следующий небольшой код.

<div class="postedby"> Posted by <?php the_author_posts_link(); ?> on <?php the_time(); ?></div>
<?php the_author_posts_link(); ?> — выводит имя автора с ссылкой на все его публикации

<?php the_time(); ?> — выводит дату, можно задавать формат, по умолчанию берет его из настроек

Вот как вывелась наша запись

kak-natyanut-html-shablon-na-wordpress-single.png


Получилось нормально. Просто нужно немного выровнять расположение блока с помощью следующего правила CSS


.postedby {padding-left: 15px;}


Не хватает на этой странице навигации на предыдущую и следующую записи. Нужно это также сделать и для главной.

Постраничная навигация для шаблона single.php


<div class="pagenavi"><?php previous_post_link(); ?> | <?php next_post_link(); ?></div>
Функции


<?php previous_post_link(); ?>
и


<?php next_post_link(); ?>
по умолчанию без задаваемых аргументов возвращают название (title) для предыдущей и следующей записи.

Постраничная навигация для главной страницы. Вставьте в index.php


<div class="pagenavi"><p><?php posts_nav_link(); ?></p></div>
Вот как выглядит результат. Я специально добавил еще записи через админку, чтобы образовались несколько страниц.


kak-natyanut-html-shablon-na-wordpress-index-pagenavi.png


Как финальный шаг, я бы выровнял эти ссылки по правому краю, с небольшим отступом:


.pagenavi {float: right; padding-right: 15px;}


СДЕЛАЕМ ШАБЛОН ДЛЯ СТРАНИЦ — PAGE.PHP
Во многом он будет совпадать с выводом записи, поэтому просто копируем single.php.

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

Думаю, вы знаете как это сделать. Если сомневаетесь, прочтите предыдущие абзацы, и/или посмотрите на скриншоте как выглядит готовый файл page.php.

kak-natyanut-html-shablon-na-wordpress-page.png




СДЕЛАЕМ ШАБЛОН ДЛЯ СТРАНИЦЫ ОШИБКИ 404
Снова копируем наш index.php и называем файл 404.php. Убираем код основного содержания, оставляем только хэдер, футер и сайдбар.

Вместо динамического вывода записи, выводим сообщение об ошибке, что запрашиваемая страница не найдена.

<h3>Ошибка 404!</h3> <p>Нет такой страницы, уважаемый. Вернитесь на <a href="<?php bloginfo('home'); ?>">Главную</a>.</p>
Можно задать отдельный класс (page404) в основной блок, чтобы выровнять сообщение по центру.


ТЕПЕРЬ ДАВАЙТЕ НАСТРОИМ РАБОТУ ФОРМЫ ПОИСКА
Добавим форму поиска через встроенный в WordPress виджет. Если есть файл searchform.php, виджет использует форму из него.

Создадим данный файл, и внесем в него код.


<div class="searchbar"> <form name="search" method="get" action="<?php bloginfo('url'); ?>"> <input type="text" name="s" value="Search&#x2026;" /> <input type="submit" name="submit" value="Search!" /> </form> </div>
Обратите внимание на функцию


<?php bloginfo('url'); ?>
, — иначе поиск может не сработать.


ПОДВЕДЕНИЕ ИТОГОВ
Итак, у нас есть вот такой шаблончик, который мы конвертировали в рабочую тему WordPress.


kak-natyanut-html-shablon-na-wordpress-tema-simplefactorial.png


Мы видим, что виджет поиска нуждается в доработке стилей. Но сейчас мы этого не будем делать. На самом деле, я рекомендую подключить другой поиск, от Яндекс или Google, для которых есть подробные руководства.
 

jebir

Писатель
Регистрация
9 Фев 2016
Сообщения
3
Реакции
5
Все привет!

"Курс «Темизация WordPress. Cоздание и установка уникальной темы» — это уникальный для Рунета курс. Уникальный по нескольким причинам: это был первый видеокурс в Рунете по созданию тем для WordPress, аналогов курса по комплексности подхода и качеству материала в Рунете просто нет.

В курсе «Темизация WordPress. Cоздание и установка уникальной темы» показано создание темы для WordPress с нуля.

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


Вот делюсь с Вами видео урок по переносу html на wordpress ссылка на Для просмотра ссылки Войди или Зарегистрируйся
 

rotorda

Писатель
Регистрация
6 Май 2014
Сообщения
3
Реакции
0
Есть ли еще курсы на эту тему?
 

majordon

Создатель
Регистрация
5 Дек 2008
Сообщения
14
Реакции
9
Так тема была обучающая для новичков
 

staseco

Постоялец
Регистрация
11 Авг 2011
Сообщения
57
Реакции
4
кто-то занимается переводом рипа в тему wordpress ?
 

Slava_wwb

Писатель
Регистрация
5 Май 2019
Сообщения
8
Реакции
0

kastiell93

Создатель
Регистрация
20 Фев 2018
Сообщения
9
Реакции
4
Рекомендую курсы HTML академии.

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

Relative07

Создатель
Регистрация
16 Июл 2019
Сообщения
8
Реакции
0
Хм... vim?
Довольно мало кто пользуется. Многие не понимают прелестей этого ЛУЧШЕГО редактора
 
Сверху