WordPress

Как натянуть html шаблон на WordPress

zippers21.06.2021
1 288 Время чтения: 6 мин.

Шаблон HTML после быстрого поиска я выбрал вот этот — Simple Factorial. Дизайн конечно простоват, но в целях эксперимента подойдет. Есть заголовок, меню, футер, сайд бар.

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

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

ПОДКЛЮЧАЕМ ТЕМУ В АДМИНКУ
Чтобы тема заработала и появилась в админке 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.

Теперь будем адаптировать файл 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 между хэдером и футером.

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

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

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

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

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(); ?>

Сохраняем файл, проверяем работу. 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.

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

РЕГИСТРИРУЕМ ДИНАМИЧЕСКОЕ МЕНЮ В 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’ )); ?>
В итоге должно получиться вот так:

Можно уже создавать страницы в 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(); ?> — выводит дату, можно задавать формат, по умолчанию берет его из настроек

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

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

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

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

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

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

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

СДЕЛАЕМ ШАБЛОН ДЛЯ СТРАНИЦЫ ОШИБКИ 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.

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

Теги
zippers21.06.2021
1 288 Время чтения: 6 мин.

Одно Сообщение

  1. Спасибо. Информация мне очень помогла. Немного возникла проблема с созданием фаила FOOTER.PHP

    Ответить

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

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

© Copyright 2018-2024, designer EMANO. Запрещается использование материалов сайта без письменного разрешения со стороны администрации.
Любой файл может быть удален по требованию правообладателя.
Кнопка «Наверх»