Ну вот, мы начинаем создание темы WordPress, то есть непосредственно создавать файлы для своей темы, или как говорит иерархия шаблонов WordPress – шаблоны WordPress тем. И начинаем с файла header.php. Создавать этот файл, как впрочем и все остальные мы будем в редакторе Dreamweaver. Не потому, что он лучше всего подходит для этой цели, потому что он Вам уже знаком и у него есть для этого все возможности.
Для этого запускаем редактор и из меню Создать выбираем PHP. Как видите, Dreamweaver уже создал небольшую заготовку для нашего php файла. Но прежде разбираться с этой заготовкой, нужно в редакторе выполнить кое-какие настройки. Их немного, но они важные. Для этого зайдем в меню Редактировать – Установки. В открывшемся окошке найдем пункт Создать документ, в окошке Кодировка по умолчанию выбираем Юникод (UTF-8). В том же окошке найдем пункт Шрифты и в окошке Параметры шрифта выбираем Юникод. Вот теперь все готово для создания темы WordPress сайта.
По поводу самой темы. Чтобы создавать тему WordPress, нужно определиться с тематикой темы. Я не буду выдумывать что-то новое и возьму тематику, структуру и дизайн с уже создаваемого простого сайта – Как создать свой сайт ну совсем простой и бесплатно
Ну и к делу. Значит, остановились мы на том, что Dreamweaver уже создал начальный код php файла. Спасибо ему за это, но мы удалим все это и вставим свой код, вот такой:
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»
«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Сайт о лошадях, история приручения лошади человеком" />
<meta name="keywords" content="лошадь, кони, племенные лошади, история лошади" />
<title><?php wp_title (' '); ?> | <?php if (wp_title (' ', false)) { echo ' | '; } ?><?php bloginfo ('name'); ?></title>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/ваш фид" />
<link rel="pingback" href="<?php bloginfo ('pingback_url'); ?>" />
<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" media="screen"/>
<?php wp_head (); ?>
</head>
<body>
<div id="cont">
<div id="header">
<div id="blogtitle"><?php bloginfo ('name'); ?></div>
<div id="subtitle"><h1><?php bloginfo ('description');?></h1></div>
<ul id="menu">
<li><a href="http://ваш сайт.com/">Главная</a></li>
<li><a href="http://ваш сайт.com/o sajte">О сайте</a></li>
<li><a href="http://ваш сайт.com/kontakty">Контакты</a></li>
</ul>
</div>
Собственно это и есть готовый код файла header. А теперь разберемся какая часть кода за что отвечает. Естественно, если создание темы WordPress для Вас не просто процесс слепого копирования и вставки кода.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»
«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> - это так называемый доктайп. Что это и зачем он нужен а так же какие бывают доктайпы Вы можете узнать из статьи - Уроки html. Что такое DOCTYPE
<html xmlns="http://www.w3.org/1999/xhtml"> — это открывающий тег html со ссылкой на w3c стандарт. Ссылка, в общем-то, не обязательна, но на всякий случай пусть будет.
<head> — Открывающий тег <head>. Между открывающим тегом <head> и закрывающим тегом </head> находится очень важная информация. Судите сами:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> — с помощью этого мета-тега прописана кодировка документа. Так как мы создаем сайт на движке WordPress, то и кодировка должна быть UTF-8. Это единственная кодировка, с которой работает этот движок.
<meta name="description" content="Сайт о лошадях, история приручения лошади человеком" /> — мета-тег description. То есть описание вашего сайта.
<meta name="keywords" content="лошадь, кони, племенные лошади, история лошади" /> — мета-тег keywords. То есть ключевые слова сайта.
<title><?php wp_title (' '); ?> | <?php if (wp_title (' ', false)) { echo ' | '; } ?><?php bloginfo ('name'); ?></title> — мета-тег title. Очень важный мета-тег. С помощью этого кода мета-тег title будет создан в виде: название рубрика – название статьи – название сайта.
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/ваш фид" /> — ссылка на RSS фид Вашего сайта
<link rel="pingback" href="<?php bloginfo ('pingback_url'); ?>" /> — ссылка отсылки пингбеков на другие сайты или блоги. Что такое пингбеки – разберемся как-нибудь в другой раз.
<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" media="screen"/> — ссылка на css лист стилей Вашего сайта
<?php wp_head (); ?> — код, обеспечивающий работу многих плагинов, которые добавляют в страницу сайта свой код
</head> — закрывающий тег <head>
Дальше идет тег <body>. Все, что находится в пределах этого тега, собственно и есть Ваш сайт, то есть все то, что видят на экране монитора посетители Вашего сайта.
Первым идет открывающий тег контейнера cont — <div id="cont">. Что это за контейнер. Как уже говорилось в начале статьи, я создаю тему с той же версткой, что и в разделе о создании простого сайта. В этом простом сайте, все контейнеры – header, sidebar, content и futer размещаются в общем контейнере cont. Подробнее о такой верстке Вы можете узнать на странице – Принципы создания страницы сайта в Dreamweaver
<div id="header"> — открывающий тег контейнера header
<div id="blogtitle"><?php bloginfo ('name'); ?></div> — контейнер blogtitle, с кодом вызова названия сайта. Название сайта Вы задаете в админпанели движка
<div id="subtitle"><h1><?php bloginfo ('description');?></h1></div> <ul id="menu"> — контейнер subtitle, с кодом вызова описания сайта. Описание сайта Вы задаете в админпанели движка
<ul id="menu">
<li><a href="http://ваш сайт.com/">Главная</a></li>
<li><a href="http://ваш сайт.com/o sajte">О сайте</a></li>
<li><a href="http://ваш сайт.com/kontakty">Контакты</a></li>
</ul>
Меню в хедере. Точно такое же, как и в созданном ранее простом сайте.
</div> — закрывающий тег контейнера header
Все понятно? Тогда сохраняем созданный файл header в заранее созданной папке темы, естественно под именем header и как php файл. И продолжаем создание темы WordPress для сайта. На очереди создание файла стилей css для нашей темы. Об этом в статье — Создаем файл стилей css WordPress темы
Я беру буржуйские и правлю.
Вполне разумный подход
ЧЕт не очень как то понятно
Здравствуйте, нужна помощь по редактированию шаблона на WP естественно не бесплатна ... Если вы готовы мне помоччь, то напишите пожалуйста на clinicofsport@mail.ru
Здравствуйте! Может и мне поможете отредактировать шаблон (за оплату). Даже на основе Ваших рекомендаций что-то не получается. Скачала плагин, все шаблоны зловредные. Непонятно, гд можно скачать хороший шаблон.
На сайте wordpresse.ru — нормальные шаблоны и выбор большой
С данного сайта скачала пару шаблонов. Но когда установила и нажала ТАС, то напротив шаблона появилась такая запись: 6 Static Link (s) Found... Что это значит?
Обычно это ссылки на сайты автора шаблона, которые он раскручивает. Так сказать плата за бесплатный шаблон. Работе шаблона они никак не мешают. Убрать такие ссылки, как правило, не составляет туда. Достаточно открыть файл шаблона, где находятся эти ссылки, в любом html редакторе и просто удалить их. Обычно они выглядят так: ...
Спасибо за пояснение. Все получилось
а как на счет моего предложения отредактировать шаблон?
Увы, нет времени!
Если не затруднит, может подскажете. Мне нужно в шапку вставить картинку. или несколько. Я уже пробовала зайти в Заголовок (header.php) и вставляла сохраненную картинку. Не получается. Как нужно сохранить картинку и куда ее нужно вставить в (header.php), чтобы она отразилась в шапке
Проще всего вставить картинку в header как фоновое изображение. Для этого нужно в html редакторе открыть файл стилей (style), найти стиль, определяющий свойства хедера, чаще всего он так и называется – header и добавить в него строку:
background-image: url (images/имя Вашей картинки.jpg);
естественно, что сама картинка должна находиться в папке images шаблона. Но проще всего это сделать в редакторе Dreamweaver. Нужно открыть стиль в режиме редактирования, выбрать категорию Фон, а там все понятно.
У Вас отличный сайт, для новичков, создающих свой сайт, то что надо. Спасибо за разъяснение.