Воскресенье , Декабрь 17 2017

Как сделать шаблон для wordpress?

В последние года в нашей стране интернет развивается неимоверными шагами. Поэтому, наверное, в России с каждым годом становится все больше блогеров. Многие знаменитые люди, политики и артисты уже имеют свой блог. Наряду с ними малоизвестные люди тоже создают свою страничку в интернете. Многие это делают на общедоступных блог платформах (жж, блог.ру, ли, блоггер.ком), но некоторые люди хотят иметь свой сайт, с которым они могут делать все, что захотят. Большинство людей для этих целей выбирают cms wordpress. В этой статье пойдёт речь о том, как сделать шаблон для wordpress.

В Интернете у блогеров, которые пишут о wordpress, очень много статей, посвященных созданию своего дизайна с нуля. Т.е. идёт описание создания шаблона в фотошопе, затем идёт рассказ о том, как правильно сверстать psd макет в html + css шаблон, а уже затем описывается создание wordpress шаблона из html шаблона. Я же хочу посмотреть на создание шаблона для вп под другим углом. Создавать свой шаблон для вп с нуля – это очень хорошо, но бывают такие случаи, когда человек не владеет фотошопом (например, я), или просто нет времени, чтобы с нуля рисовать psd макет, а затем верстать его. Поэтому, я опишу создание темы для wordpress из уже готового html+css шаблона.

Сначала я хотел бы вам рассказать о том, из чего состоит стандартный шаблон для wordpress. Он состоит из нескольких php файлов: index.php, header.php, footer.php, sidebar.php, 404.php, comments.php, archive.php, functions.php, single.php, page.php, search.php, файла стилей style.css, папки с картинками images. Я думаю, что если вы создаёте свою тему для вордпресс, то уже знаете, что делает каждый файл, но если это не так, то прочитайте ниже об этом.

  • index.php – является основным файлом темы, cms изначально подгружает этот файл, если, конечно, не указан в .htaccess другой файл. С помощью этого файла «собирается» основная страница блога, возможно, собираются и другие (если нет второстепенных файлов). В нем прописывается основной код, который потом лишь редактируется при надобности.
  • header.php – хедер содержит весь код сайта до </head> и верхняя часть сайта.
  • footer.php – футер содержит в себе нижнюю часть сайта, так сказать копирайты.
  • sidebar.php – сайдбар – это файл, который содержит боковую часть сайта (боковое меню).
  • 404.php – страница, которая подгружается, когда не найдена какая-то страница.
  • comments.php – шаблон комментариев сайта.
  • archive.php – файл, который обычно содержит шаблон для отображения рубрик, архивов по дате, тегов, авторов.
  • functions.php – файл, в котором прописываются функции для блога. Обычно, это регистрация сайдбара.
  • single.php – сингл – это файл, который является шаблоном для одиночной записи.
  • page.php – Пейдж – файл, являющийся шаблоном простой страницы.
  • search.php – шаблон поиска.
  • Style.css – основной файл стилей.

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

Итак, у нас с вами есть готовый html+css шаблон, в котором есть картинки, которые лежат в папке images, таблица стилей style.css и основной файл index.html. Для начала, вы должны создать все основные файлы темы, о которых я написал выше. После этого, нам нужно разделить index.html на части. В header.php пишем вернюю часть сайта (логотип, часть кода, которая находится в <head>…</head>). К счастью, часть кода до <body> всегда одинакова, поэтому, вы можете её просто скопировать и вставить к себе на сайт.

header.php

<!DOCTYPE HTML PUBLIC "/W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="generator" content="WordPress <?php echo $wp_version ?>">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon"
   href="<?php echo get_settings('siteurl'); ?>/favicon.ico"
   type="image/x-icon">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
   type="text/css" media="screen">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0"
   href="<?php bloginfo('rss2_url'); ?>">
<?php wp_head(); ?>
</head>
<body>
<!-- end header -->

В этом файле с помощью функций, о которых вы можете прочитать на официальном сайте, выполняются следующие действия: вместо wp_title(); в тайтел подставляется заголовок страницы, вместо переменной $wp_version подставляется версия вп, с помощью функции get_settings(‘siteurl’); выводится адрес сайта, например, fsportal.ru, дальше делаем rss в строке url браузера.

В файл footer.php вставляется нижняя часть index.html: копирайты, закрытие хтмл тегов и др. информация. При желание можно вывести дату, название блога или ещё что-то с помощью стандартных функций wordpress. Обычно, в футер выводят значок RSS подписки с помощью следующего кода:

<a href=»<?php bloginfo(‘rss2_url’); ?>» title=»RSS»></a>

Классу art-rss-tag-icon задаются все нужны атрибуты: бг, выравнивание и т.д. Важно помнить, что перед </body></html> обязательно должна стоять функция

<?php wp_footer(); ?>

Сразу хочу отменить, что вместо кода, который вы удалили из index.html и вставили в какой-либо файл (хедер.пхп, футер. Пхп или другой), нужно ставить функцию подгруздки этого файла. Для header.php – нужно прописывать функцию <?php get_header(); ?> , для футер – <?php get_footer(); ?>, для сайдбара – <?php get_sidebar(); ?>. Ещё раз. Удалили кусок кода на с 95 строки до 120, поставьте соответствующую функцию на 95 строку.

В сайдбар, как я уже писал выше, вы выносите боковое меню. Вместо него в индексе прописываем  <?php get_sidebar(); ?>.

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

/*
Theme Name: fsportal.ru
Theme URI:
Description: opisanie shablona
Version: 1.1
Author: fsportal.ru
Author URI: http://fsportal.ru/
*/

Если будут другие комментарии, то удалите их, а оставьте только этот.

Теперь перейдём к основному файлу index.php Во-первых, вам нужно поменять разрешение у файла с html на php. Теперь, когда у вас прописаны 3 функции вызова футера, хедера и сайдбара, отредактирован файл style.css, вы можете положить папку с темой к вам на хостинг (wp-content\themes\) и увидеть рабочую тему уже в админке блога. Для этого перейдите в раздел темы в вп. Если вы сделали все верно, то вы увидите там свою тему, которую теперь можно активировать. Активировали? Зайдите на свой блог и посмотрите, работает ли тема. У вас не должны отображаться записи, должен быть просто дизайн, такой же, как и был при открытие первоначального index.html. Если у вас возникнут ошибки, то обязательно пишите в комментарии, я вам помогу с этой частью.

Смотрите также

Keywords и Description для чайников

Никто и не спорит с тем, что эти теги уже не оказывают магического воздействия на …

2 комментария

  1. Здравствуйте. У наших статьях все подробно описано. Будьте внимательны.

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

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