Page php

Всем привет! Сегодня мы с вами рассмотрим структуру любого шаблона WordPress сайта. Из каких базовых файлов и элементов она строится. Эти знания придадут вам уверенности в изменении и правке чужих шаблонов. А впоследствии, при наличии базовых знаний HTML, CSS, и PHP, создавать свои собственные темы. Но пока что мы так далеко заглядывать не будем, начнем с азов.

Основные файлы любого шаблона. Их назначение.

И так, любой шаблон по своей сути должен состоять из 10 базовых файлов. Так что давайте разбираться в них.

style.css — файл таблицы стилей шаблона. Этот файл должен быть у любой темы, так как именно он отвечает за ее объявление, а так же может хранить дополнительную информацию: имя автора шаблона, версию шаблона, домашнюю страницу автора и т.д. Ну и, конечно же, прямое назначение — это все CSS стили.

index.php — файл отвечает за отображение главной страницы WordPress шаблона. При верстке своего макеты всегда помните, что главная страница может быть как статичной, так и динамичной.

single.php — файл, отвечающий за вывод каждого отдельного поста вашей темы. В качестве примера можно привести данную статью, которую вы читаете.

page.php — файл отвечает за формирование статичных страниц. Обычно это страницы: контакты, об авторе, о ресурсе и т.д.

header.php — формирует шапку сайта, и хранит в себе все важные метатеги для продвижения.

footer.php — файл отвечает за отображение подвала сайта.

sidebar.php — формирует отображение сайдбара или по-русски боковой колонки блога или сайта.

functions.php — файл, отвечающий за дополнительный функционал шаблона. Например: вывод последних комментаторов на моем блоге формируется именно в этом файле.

comments.php — файл отвечает за отображение комментариев у шаблона.

404.php — отвечает за отображение страницы с 404 ошибкой.

search.php — файл, отвечающий за отображение страницы поиска.

Необязательные файлы. Но об их существовании нужно знать.

category.php — файл отвечает за отображение анонсов в категориях (если файла нет, то формирование осуществляется за счет файла index.php)

tag.php — файл отвечает за отображение анонсов на странице тегов (если файла нет, то формирование осуществляется за счет файла index.php)

taxonomy.php — файл отвечает за отображение анонсов на страницах таксономии (если файла нет, то формирование осуществляется за счет файла index.php)

author.php — файл отвечает за отображение анонсов статей определенного автора (если файла нет, то формирование осуществляется за счет файла index.php)

attachment.php — отвечает за вывод прикрепленного файла.

searchform.php — отвечает за формирование формы поиска.

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

А что хранится в папках?

Папки обычно служат для хранилища определенного типа файлов. Например: папка(image, images, img и тд) хранит в себе файлы изображений, которые относятся к данной теме. Папка JS хранит файлы скриптов. Папка inc хранит php файлы, которые инклюдятся (включаются) в существующие файлы темы.

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

Screenshot.png — это что за зверь?

Обычно этот файл содержит скриншот шаблона, чтобы в админке, когда вы выбирали тему для сайта или блога, могли видеть ее в качестве миниатюры. Размер этого файлика должен быть 880x660px.

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

Как видите, структура, которая на рисунке, соответствует структуре моего блога. Несмотря на то, что шаблоны разных авторов выглядят по-разному, все они имеют в своей основе вышеперечисленные файлы.

masalkin.name

Веб-сервер

Думается, не нужно говорить о том, что wordpress написан на PHP. Это значит, что для начала нам понадобится обзавестить каким-нибудь веб-сервером. Чаще всего в качестве оного выбирают apache либо связку apache+nginx. О настройке первого уже было сказано ранее. Чтобы не повторяться, да и просто ради разнообразия и быстроты, ниже даётся краткое описание установки и настройки уже готового сервера, что может сгодиться для локальной разработки: это xampp.

xampp

Загрузите соответствующий пакет для своей операционной системы на сайте apachefriends.org, распакуйте архив с xampp и выполните несколько несложных действий. Для linux они таковы:

По-умолчанию xampp ставится в директорию /opt/lampp/lampp, откуда его и следует запускать впоследствии. Но чтобы нам было удобнее вносить изменения в темы wordpress’a создадим символьную ссылку на документы веб-сервера и изменим пользователя и группу, от чьего имени будет работать сервер:

Что же, осталось только скачать последнюю версию самого wordpress и распаковать её в директорию /opt/lampp/htdocs, а затем дать файлам и каталогам необходимые права доступа:

В примере выше мы изменили владельца директории, создали символьную ссылку дабы не ходить далеко за файлами темы, а также выставили права на все файлы и каталоги:

  • каталоги 755
  • файлы 644

Отлично. После изменения файла конфигурации перезапустите xampp и переходите к установке wordpress, о которой даже нечего говорить в силу её простоты. Собственно, если читатель испытывает затруднения на этом шаге, радостно сообщу: руководств по установке предостаточно, в том числе встречаются они и на этом блоге.

Теоретические основы. Коротко

Чтобы тема корректно отображалась в административной панели, нам потребуется завести несколько файлов:

  • index.php
  • single.php
  • page.php
  • header.php
  • footer.php
  • style.css
  • screenshot.png
  • functions.php

На самом деле было бы достаточно одного файла стилей и индексной страницы, но давайте сразу идти по правильному пути и разделять тему на составные части.

wp-partials

Коротко о каждом: index.php представляет собой главную страницу сайта. В ней всегда содержится цикл вывода последних записей. Конечно, главная страница вашего ресурса может быть какой угодно (тогда создаётся отдельный шаблон), но шаблон index.php также будет использоваться при выводе всех категорий, всех статей автора и подобных вещей. Это лучше держать в уме.

Страница отдельной записи single.php призвана отображать одну публикацию. От page отличается тем, что вторая нужна для вывода статических страниц: страницы контактов, например.

header и footer обычно включаются в каждый шаблон каждой страницы, поскольку их содержимое не меняется от одной странице к другой (за редкими исключениями).

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

Стили располагаются в style.css, screenshot.png служит миниатюрой темы при её выборе в админке, а functions.php содержит всю магию: там прописываются пути к стилям, шрифтам и скриптам темы, настройки для виджетов, меню и многих других полезных вещей.

На этом предлагается закончить теоретическую часть и перейти к части практической.

Пишем тему для wordpress: практика

functions.php

Начнём с подключения css-файла и библиоткеи jquery. В данных ниже примерах mythemename — название вашей темы.

Регистрируем поддержку различных «плюшек»:

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

Кстати, вы вправе не показывать всему миру версию wordpress, а зарегистрированному пользователю меню управления, когда он находится вне админки.

Заодно сразу укажем максимально возможное количество символов при выводе excerpt: то есть начала статьи.

excerpt

Полезно при отображении всех постов на главной.

style.css

Чтобы wordpress понял и применил стили темы, сам файл, содержащий их, должен находиться в корневой директории темы, называться style.css и заключать в себе особый комментарий.

Название, описание, версия, метки, адрес темы. Имя и сайт автора темы. Дальше идут сами стили. Обязательное поле одно: имя темы. Остальные можно опустить.

header.php

Стандартное начало любого html-файла. Объявление doctype, вывод язвковых атрибутов в зависимости от выбранного пользователем языка. Далее указание браузеру Internet Explorer использовать самую распоследнюю версию, viewport для адаптивной вёрстки и путь к favicon.

Не забываем вставить <?php wp_head(); ?> и выводим пункты меню, пока тоже стандартно. Так, какими их представляет себе wordpress. Изменять вывод будем в следующий раз.

footer.php

Ничего особенного. Копирайт и текущий год, подключение какого-нибудь скрипта из каталога js в директории темы, закрытие html-тегов и вывод wp_footer.

index.php

К каждому шаблону подключаем шапку и подвал страницы. Если необходимо, включаем в страницу ещё какой-нибудь шаблон при помощи get_template_part и указания пути к нему.

Если и пока существуют записи, выводить их все (о постраничной навигации, конечно, будет упомянуто, но не всё сразу). В примере используется микроразметка, на которую в данном контексте можно не обращать внимания.

После вывода заголовка получаем миниатюру записи и начало статьи (об этом говорилось выше). Закрываем цикл и условие, вставляем сайдбар. Готово.

single.php

Отображение страницы одной записи. По порядку: получаем header, дату публикации, заголовок записи, её миниатюру со средним размером medium, контент и, если для single-страницы разрешены комментарии, то их шаблон будет выведен в самом конце article.

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

page.php

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

Кажется, этот код даже не нуждается в каких бы то ни было пояснениях.

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

Надеюсь, эта заметка послужит кому-то руководством к действию. И, поскольку, автор этих строк на данный момент занимается как раз таки разработкой сайтов (как достойных, так и не очень: такова жизнь) на указанном движке, надо ожидать, что это не последняя запись с тегом wordpress: здесь ещё появятся заметки-шпаргалки как со стандартными функциями, так и с различными трюками, помогающими изменить стандартный вывод. ⤧  Следующая запись Работа с изображениями: взгляд в будущее

www.unix-lab.org

Создайте файл с именем hello.php в корневом каталоге веб-сервера (DOCUMENT_ROOT) и запишите в него следующее:

Эта программа чрезвычайно проста, и для создания настолько простой странички даже необязательно использовать PHP. Все, что она делает, это вывод Hello World, используя инструкцию PHP echo. Заметьте, что файл не обязан быть выполняемым или еще как-то отличаться от других файлов. Сервер знает, что этот файл должен быть обработан PHP, так как файл обладает расширением ".php", о котором в настройках сервера сказано, что подобные файлы должны передаваться PHP. Рассматривайте его как обычный HTML-файл, которому посчастливилось заполучить набор специальных тегов (доступных также и вам), способных на кучу интересных вещей.

Если у вас этот пример не отображает ничего или выводит окно загрузки, или если вы видите весь этот файл в текстовом виде, то, скорее всего, ваш веб-сервер не имеет поддержки PHP или был сконфигурирован неправильно. Попросите вашего администратора сервера включить такую поддержку. Предложите ему инструкцию по установке: раздел Установка данной документации. Если же вы разрабатываете скрипты на PHP дома (локально), то также прочтите эту главу, чтобы убедиться, что вы все настроили верно. Убедитесь также, что вы запрашиваете файл у сервера через протокол http. Если вы просто откроете файл из вашей файловой системы, он не будет обработан PHP. Если проблемы все же остались, не стесняйтесь попросить помощи одним из » множества доступных способов получения поддержки по PHP.

Цель примера — показать формат специальных тегов PHP. В этом примере мы использовали <?php в качестве открывающего тега, затем шли команды PHP, завершающиеся закрывающим тегом ?>. Таким образом можно где угодно "запрыгивать" и "выпрыгивать" из режима PHP в HTML файле. Подробнее об этом можно прочесть в разделе руководства Основной синтаксис.

Замечание: Замечание о переводах строк

Переводы строк немногое означают в HTML, однако считается хорошей идеей поддерживать HTML в удобочитаемом виде, перенося его на новую строку. PHP автоматически удаляет перевод строки, идущий сразу после закрывающего тега ?>. Это может быть чрезвычайно полезно, если вы используете множество блоков PHP-кода или подключаете PHP-файлы, которые не должны ничего выводить. В то же время, это может приводить в недоумение. Можно поставить пробел после закрывающего тега ?> и тогда пробел будет выведен вместе с переводом строки, или же вы можете специально добавить перевод строки в последний вызов echo/print из блока PHP-кода.

Замечание: Пара слов о текстовых редакторах

Существует множество текстовых редакторов и интегрированных сред разработки (IDE), в которых вы можете создавать и редактировать файлы PHP. Список некоторых редакторов содержится в разделе » Список редакторов PHP. Если вы хотите порекомендовать какой-либо редактор, посетите данную страницу и попросите добавить редактор в список. Использование редактора с подсветкой синтаксиса может быть очень большим подспорьем в вашей работе.

Замечание: Пара слов о текстовых процессорах

Текстовые процессоры (StarOffice Writer, Microsoft Word, Abiword и др.) в большинстве случаев не подходят для редактирования файлов PHP. Если вы все же хотите использовать какой-либо из них для тестового скрипта, убедитесь, что сохраняете файл как простой текст (plain text), иначе PHP будет не в состоянии прочесть и запустить ваш скрипт.

Замечание: Пара слов о Блокноте Windows

При написании скриптов PHP с использованием встроенного Блокнота Windows необходимо сохранять файлы с расширением .php. (Блокнот автоматически добавит расширение .txt, если вы не предпримете указанные ниже меры.) Когда во время сохранения файла вас попросят указать его имя, введите имя файла в двойных кавычках (например, "hello.php"). Кроме этого, можно кликнуть на выпадающее меню "Текстовые документы" в диалоговом окне сохранения файла и выбрать в нем пункт "Все файлы". После этого можно вводить имя файла без кавычек.

Теперь, когда вы успешно создали работающий PHP-скрипт, самое время создать самый знаменитый PHP-скрипт! Вызовите функцию phpinfo() и вы увидите множество полезной информации о вашей системе и настройке, такой как доступные предопределенные переменные, загруженные PHP-модули и параметры настройки. Уделите некоторое время изучению этой важной информации.

Вернуться к: Простой учебник

php.ru

Введение

В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.

Добавление темы

Для начала в папке themes создадим папку нашего шаблона «whitesquare». В ней будет находиться папка images и два необходимых пустых файла index.php и style.css.

Page php

Следующим шагом нужно добавить скриншот нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы whitesquare с именем screenshot.png.

После этого мы уже можем использовать нашу тему. Зайдите в панель администратора по адресу http://{site-name}/wp-admin, а затем в управление темами (Appearance -> Themes). В списке уже должна появиться наша тема whitesquare. Наведитесь на тему и нажмите «Activate».

Page php

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

Предварительный осмотр

Page php

Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также на всех страницах, кроме главной, есть сайдбар слева. Для того чтобы руководство было более универсальным, давайте страницы главного меню оформим как «страницы WordPress» (page), а страницы подменю как «посты блога WordPress» (post) с комментариями. Главную же страницу сделаем как отдельную страницу (front-page) с собственной разметкой. Здесь надо отметить, что, несмотря на то, что страницы WordPress могут быть реализованы двумя способами (как страницы или как посты) в базе данных они различаются только типом, однако при создании шаблонов они обрабатываются немного по-разному. В этом вы сможете убедиться чуть ниже.

Структура страниц

Большинство руководств по созданию тем для WordPress ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на WordPress в рамках предоставленных макетов.

Давайте начнем со структуры страниц. Прежде чем добавлять страницы, нужно сначала зайти в настройки и указать стиль ссылок: Settings -> Permalink settings -> Post name. Это позволит сделать ссылки в виде «http://site_name/page_name».

Добавление страниц осуществляется через панель администратора: Pages -> Add new. Для каждой страницы в области Page Attributes в поле Order укажите цифрой порядок страницы в главном меню.

После добавления, список страниц должен выглядеть вот так:

Page php

Когда все страницы будут добавлены, нужно указать, что страница Home будет главной. Для этого зайдите в меню Settings -> Reading и в поле Front page displays укажите: A static page -> Home.

Header.php и Footer.php

Шапка в терминологии WordPress, это не только визуальная шапка на макете сайта. По сути, она содержит весь общий код, который встречается в начале всех страниц сайта. Давайте создадим файл header.php в папке нашего шаблона и наполним его содержимым.

<!doctype html> <html> <head> 	<meta http-equiv="Content-type" content="text/html; charset=<?php bloginfo('charset'); ?>"> 	<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 	<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title> 	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> 	<?php wp_head(); ?> </head> <body <?php body_class(); ?>> 	<div class="wrapper"> 

Внутри тега head мы установили кодировку, указанную в WordPress, заголовок страницы и pingback (для связи с другими сайтами). В последней строке вызываем команду wp_head(), которая добавляет заголовки WordPress. Также открываем блок «wrapper».

Кроме этого, нам нужно подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого откройте файл functions.php внутри нашей темы и добавьте в него следующий код:

function enqueue_styles() { 	wp_enqueue_style( 'whitesquare-style', get_stylesheet_uri()); 	wp_register_style('font-style', 'http://fonts.googleapis.com/css?family=Oswald:400,300'); 	wp_enqueue_style( 'font-style'); } add_action('wp_enqueue_scripts', 'enqueue_styles');  function enqueue_scripts () { 	wp_register_script('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js'); 	wp_enqueue_script('html5-shim'); } add_action('wp_enqueue_scripts', 'enqueue_scripts'); 

В функции enqueue_styles мы зарегистрировали и подключили нужные стили, а затем указали вордпрессу, что эта функция является подключением стилей. Аналогично и для js файла, который требуется для отображения html5 тегов в старых браузерах.

Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.

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

Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.

Шаблон страницы

Следующим шагом, нам нужно сделать шаблон обычной страницы WordPress.
Создайте в папке темы файл page.php и добавьте в него следующий код:

<?php get_header(); ?> <div class="main-heading"> 	<h1><?php the_title(); ?></h1> </div> <section> 	<?php if (have_posts()): while (have_posts()): the_post(); ?> 		<?php the_content(); ?> 	<?php endwhile; endif; ?> </section> <?php get_footer(); ?> 

Здесь мы подключили наши файлы шапки и футера, создали блок названия страницы и в теге section вставили стандартный блок вывода контента страниц и постов.

Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.png и images /h1-bg.png. Далее добавьте немного базовых стилей в файл style.css:

В результате должна получиться вот такая картина:

Page php

Логотип

Page php

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

<div class="wrapper"> 	<header> 		<a href="/"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="Whitesquare logo"></a> 	</header> 

Форма поиска

Page php

WordPress позволяет достаточно гибко сохранять блоки кода в отдельные файлы, а затем использовать их в нескольких разных местах. Рассмотрим пример на нашей форме поиска.
В папке темы создайте новый файл searchform.php и сохраните в него код формы поиска:

<form name="search" action="<?php echo home_url( '/' ) ?>" method="get" class="search-form"> 	<input type="text" value="<?php echo get_search_query() ?>" name="s" placeholder="<?php echo __('Search', 'whitesquare'); ?>" class="input"> 	<button type="submit" class="button"><?php echo __('GO', 'whitesquare'); ?></button> </form> 

А в файл стилей запишите стили для формы:

Всё, что осталось сделать – это подключить searchform.php внутри header.php.

<header> 	… 	<?php get_search_form(); ?>  </header> 

Навигация

Page php

Добавить навигацию на страницу можно разными способами, например через функцию wp_list_pages, но более современным способом будет добавление через админку. По умолчанию функционал добавления меню не активирован, для того, чтобы это сделать, добавьте в файл темы functions.php следующий код:

if (function_exists('add_theme_support')) { 	add_theme_support('menus'); } 

После этого, в панели администрирования в пукте меню Appearance появится подпункт Menus, в котором нужно нажать на ссылку Create new menu, ввести имя меню «top-menu», выделить страницы из левой колонки и добавить их в меню кнопкой Add to menu.

Теперь, когда меню создано, нужно его показать на страницах сайта. Для этого добавьте в конец header.php следующий код:

<nav class="main-navigation"> 	<? wp_nav_menu(array('menu' => 'top-menu', 'menu_class' => 'top-menu')); ?> </nav> 

Функция wp_nav_menu отобразит меню с именем «top-menu» и css классом «top-menu».

После этого меню уже появится на страницах но без стилей. Стилизуем его:

Футер

Page php

Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images

images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок

Далее делаем вёрстку в файле footer.php:

<footer> 	<div class="footer-content"> 		<div class="twitter"> 			<h3 class="footer-heading"><?php echo __('Twitter feed', 'whitesquare'); ?></h3> 			<time datetime="2012-10-23"><a href="#" class="twitter-time">23 oct</a></time> 			<p><?php echo __('In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug', 'whitesquare'); ?></p> 		</div> 		<div class="sitemap"> 			<h3 class="footer-heading"><?php echo __('Sitemap', 'whitesquare'); ?></h3> 			<div class="column first"> 				<a href="/home/"><?php echo __('Home', 'whitesquare'); ?></a> 				<a href="/about/"><?php echo __('About', 'whitesquare'); ?></a> 				<a href="/services/"><?php echo __('Services', 'whitesquare'); ?></a> 			</div> 			<div class="column"> 				<a href="/partners/"><?php echo __('Partners', 'whitesquare'); ?></a> 				<a href="/customers/"><?php echo __('Support', 'whitesquare'); ?></a> 				<a href="/contact/"><?php echo __('Contact', 'whitesquare'); ?></a> 			</div> 		</div> 		<div class="social"> 			<h3 class="footer-heading"><?php echo __('Social networks', 'whitesquare'); ?></h3> 			<a href="http://twitter.com/" class="social-icon twitter-icon"></a> 			<a href="http://facebook.com/" class="social-icon facebook-icon"></a> 			<a href="http://plus.google.com/" class="social-icon google-plus-icon"></a> 			<a href="http://vimeo.com/" class="social-icon-small vimeo-icon"></a> 			<a href="http://youtube.com/" class="social-icon-small youtube-icon"></a> 			<a href="http://flickr.com/" class="social-icon-small flickr-icon"></a> 			<a href="http://instagram.com/" class="social-icon-small instagram-icon"></a> 			<a href="/rss/" class="social-icon-small rss-icon"></a> 		</div> 		<div class="footer-logo"> 			<a href="/"><img src="<?php bloginfo('template_url'); ?>/images/footer-logo.png" alt="Whitesquare logo"></a> 			<p><?php echo __('Copyright © 2012 Whitesquare. A <a href="http://pcklab.com">pcklab</a> creation', 'whitesquare'); ?></p> 		</div> 	</div> </footer> 

И прописываем стили в style.css:

В итоге главная страница сайта должна выглядеть вот так:

Page php

Главная страница

Если вы посмотрите на psd макеты, то увидите, что разметка главной страницы отличается от внутренних. В частности, на главной странице нет сайдбара и заголовка страницы.

WordPress позволяет задавать разные шаблоны для разных страниц. Такой шаблон должен храниться в файле page-{название страницы}.php. Если шаблон не найден, то будет подключаться шаблон по умолчанию page.php.

Для главной страницы создайте новый файл front-page.php в папке темы. Добавьте в него следующий код:

<?php get_header(); ?> <section> 	<?php if (have_posts()): while (have_posts()): the_post(); ?> 		<?php the_content(); ?> 	<?php endwhile; endif; ?> </section> <?php get_footer(); ?> 

Он отличается от кода page.php только тем, что в нем нет заголовка страницы.

То, что мы будем делать дальше, уже выходит за рамки создания темы WordPress, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самой темы.

Прежде, чем добавить контент главной страницы – необходимо нарезать все изображения этой страницы и добавить их в библиотеку WordPress через меню Media -> Library. Назовём эти изображения так:

home-1.png
home-2.png
home-3.png
home-4.png
home-5.png
clients-1.png
clients-2.png
clients-3.png
clients-4.png
clients-5.png
clients-6.png
clients-7.png

Далее, перейдите в панели администратора к форме редактирования главной страницы Pages -> Home -> Edit Page и в поле text введите содержимое страницы:

Не забудьте поправить пути до картинок. Они зависят от даты добавления.

Теперь осталось стилизовать данный код.

Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехались. Это связано с тем, что редактор WordPress добавил пустые параграфы в наш код в местах перевода строк. Чтобы решить эту проблему, создайте в папке темы файл functions.php и поместите в него код:

<?php remove_filter('the_content', 'wpautop'); 

После этого, главная страница должна отобразиться правильно.

Сайдбар

Теперь, когда главная страница готова, давайте вернемся к шаблону внутренних страниц и добавим в него сайдбар.

Page php

Для этого создайте файл sidebar.php и поместите в него следующий код:

<aside> 	<nav class="aside-navigation"> 		<? wp_nav_menu(array('menu' => 'aside-menu', 'menu_class' => 'aside-menu')); ?> 	</nav> 	<h2 class="sidebar-heading"><?php echo __('Our offices', 'whitesquare'); ?></h2> 	<div class="map"> 		<img src="<?php bloginfo('template_url'); ?>/images/sample.png" width="230" height="180" alt="<?php echo __('Our offices', 'whitesquare'); ?>"> 	</div> </aside> 

Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов. Для полноты картины в качестве подменю предлагаем показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали меню. При создании подменю в разделе админки Appearance -> Menus создадим новое меню с именем aside-menu. Чтобы добавить в него посты, кликните наверху в Screen options и отметьте галочкой Show on screen: Posts. Блок карты особых вопросов не вызывает.

После того, как блок сайдбара готов, нужно его подключить для всех подстраниц в файле page.php:

<div class="main-heading"> 	… </div> <?php get_sidebar(); ?> <section> 	… 

Далее нам нужно добавить стили для вёрстки:

Ну и в заключение, добавьте несколько постов в наш блог. Делается это в панели администратора на вкладке Posts -> Add New. Мы добавили точно такие же названия, как были в psd макете.

Page php

Страница About us

Page php

Теперь, когда у нас готов шаблон для внутренних страниц, давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в в медиа библиотеку. Назовите изображения вот так:

about-1.png
about-2.png
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg

Далее перейдите в редактирование страницы в панели администратора и добавьте код:

И стили в style.css:

Шаблон поста

После предыдущих действий, на нашем сайте уже доступны все страницы, кроме страниц с постами. За отображение одиночных постов отвечает шаблон single.php. Создайте его со следующим содержимым:

<?php get_header();?> <div class="main-heading"> 	<h1><?php the_title(); ?></h1> </div> <?php get_sidebar();?> <section> 	<?php while (have_posts()): the_post();?> 		<?php the_content();?> 		<?php 			if ( comments_open() || get_comments_number() ) { 				comments_template(); 			} 		?> 	<?php endwhile; ?> </section> <?php get_footer(); ?> 

Этот шаблон аналогичен предыдущим шаблонам с той лишь разницей, что здесь мы сначала отображаем контент поста, а затем комментарии к нему.

Страница поиска

Page php

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

<?php get_header(); ?> <div class="main-heading"> 	<h1>Search</h1> </div> <?php get_sidebar(); ?> <section> 	<h2 class="content-heading"><?php printf( __('Search Results for: %s', 'default'), get_search_query() ); ?></h2> 	<?php if (have_posts()): while (have_posts()): the_post(); ?> 		<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> 		<p><?php the_excerpt(); ?></p> 	<?php endwhile;	else:?> 		<p><?php echo __('Sorry, no results found', 'whitesquare'); ?></p> 	<?php endif; ?> </section> <?php get_footer(); ?> 

От других шаблонов этот отличается тем, что мы выводим заголовок с текстом поиска, а затем список результатов поиска.

Страница архива

В WordPress помимо одиночных постов существуют страницы, на которых отображаются списки постов. Это могут быть категории, сортировка по дате, автору или по ключевым словам. В нашем макете такого функционала нет, но добавить его обязательно нужно, так как мы создаем шаблон, который может использоваться с разным контентом. Для каждого из указанных списков, существуют свои шаблоны, однако если они не найдены, WordPress пытается найти общий файл archive.php. Мы этим воспользуемся и создадим его. Поскольку его содержимое ничем не будет отличаться от содержимого обычной страницы – просто скопируйте page.php в archive.php.

404

Последний шаблон, который осталось добавить — это шаблон для 404 страницы, когда WordPress не смог найти запрошенную страницу. Он будет точно такой же, как page.php только вместо вывода постов будет написано сообщение об ошибке:

<?php get_header(); ?> <div class="main-heading"> 	<h1><?php the_title(); ?></h1> </div> <?php get_sidebar(); ?> <section> 	<p><?php echo __('It looks like nothing was found at this location.', 'whitesquare'); ?></p> </section> <?php get_footer(); ?> 

habr.com

Создание страниц PHP

От автора: вы когда-нибудь наблюдали за работой талантливых писателей? У меня есть один знакомый из «таких». Свои произведения он печатает на машинке: считает, что компьютер не способен принять всю «полноту его мыслей». А я ему в ответ говорю, что он так же, как и любая программа, всего лишь умело манипулирует строковыми значениями переменных. В общем, каждый остался при своем мнении. Сегодня мы рассмотрим создание страниц PHP, чтобы доказать, что этот язык программирования обладает огромным талантом.

Динамический талант

На проявление таланта любого автора (знаю по себе) могут влиять множество «сопутствующих» факторов: собственное настроение, погода и другие «ненастья». Но PHP «наплевать» на погоду за окном или ворчание жены за поломанный кран :) . Он выполняет заложенный в него код. Причем делает это не просто так, а динамично: формируя (собирая) страницы налету.
Сегодня я постараюсь на несложны примерах продемонстрировать часто применяемые методы реализации динамичности на основе PHP:

Начнем рассмотрение динамического создания страниц на PHP c последнего пункта. Поскольку для изучения первых двух требуется знание третьего. Стартуем!

Разметка основного примера

Сейчас за пару минут «набросаю» разметку самой простой страницы на HTML без особых «изысков».

Page php

Код разметки:

Cохраните этот файл на стороне сервера с расширением .php и поместите в него этот код. Дальнейшая демонстрация всех примером будет происходить на его основе.

Взаимосвязь PHP и разметки

Любой код на PHP, вставленный в разметку веб-документа, должен располагаться между специальными символами. Например:

Page php

Вставьте этот код в блок content, сохраните изменения и запустите файл в браузере. Вот что вы должны получить:

Page php

Как видите, содержимое абзаца было выведено с помощью серверного языка. Но код PHP может располагаться не только между тегами HTML, но и использоваться в качестве значения их атрибутов. Добавьте этот кусок рядом с предыдущим и запустите в браузере:

Page php

Один шаблон для всех

Теперь рассмотрим основы создания HTML страниц на языке PHP. Для этого скопируйте приведенную выше разметку и поместите ее в новый файл. Затем удалите с двух веб-страниц заголовок и вставьте его в новый файл header.php:

Page php

Теперь «привяжем» файл с заголовком. Для этого в самом верху веб-страниц разместите следующий код:

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

Page php

Динамическая загрузка контента

Теперь реализуем на нашей странице загрузку текстового контента из БД MySQL. Для этого нужно создать базу и таблицу на сервере СУБД, а затем реализовать функцию для выборки записей. Чтобы создать таблицу, я использовал утилиту phpMyAdmin. Вот ее структура с указанными типами данных столбцов.

Page php

Теперь нужно добавить какой-нибудь текстовый контент в БД. После чего создадим функцию для обращения к MySQL и выгрузки данных. Вот ее код:

Разместите определение функции в отдельном файле, и назовите его function. После этого подключите файл в test.php:
require(«function.php»);

Page php

А между тегами абзаца разместите вызов функции:

Сохраните все изменения и обновите test.php в браузере:

Page php

Этим примером мы доказали, что язык программирования PHP и создание динамических web страниц неразрывно связаны. А также убедились в его неоспоримом таланте построения «летучих» сайтов :)

Page php

webformyself.com

Представляем Вашему вниманию краткий мануал о том, как самостоятельно создать тему для ставшего многим любимым движка WordPress. Мне недавно приснился сон как я создаю тему под WordPress, но у меня ничего не получается, хотя все этапы мне знакомы, поэтому когда я проснулся решил написать эту статью. Позднее я посмотрел сонник, но к чему был этот сон я так и не по 🙂

Итак, чтобы создать тему, нужно сделать следующие шаги:

1. Понять как там чего где подключается, что за что отвечает и из чего(каких файлов) вообще состоит тема.
2. Создать платформу, площадку для будущей темы — пустые файлы в папке с названием темы.
3. Узнать все команды WP. В шаблонах почти все действия (вывод рубрик, меток, содержания и т.д.) выполняются посредством встроенных в WP PHP функций.
4. Постепенно наполнять файлы, шаг за шагом.
5. Смотреть, что получилось, делать многочисленные правки и устранять баги.

А теперь о каждом шаге поподробней. Перед тем, как читать дальнейший материал, заранее скачайте тему: mytheme. Данная тема не содержит ничего лишнего.

Шаг 1. Что из себя представляет тема WordPress.
Тема WordPress — это набор файлов, которые подключаются один за другим в зависимости от запроса пользователя. Внутри файла содержится помесь html и php кода, html (ну и css) код отвечает за визуализацию, php — за вывод необходимого содержимого. Если пользователь кликнул в меню сайта на какую-то категорию, то будет подключен файл archive.php, который, в свою очередь, посредством специальных команд-функций (о них мы узнаем позже), подключает другие файлы: шапку, подвал сайта, блок навигации. Конечным итогом данных несложных операций является готовая страница, которая отдается пользователю.

Шаг 2. Создаем каркас нашей темы.
Наша тема будет состоять из следующий файлов:

* Название файла — что отображается:
* header.php — “шапка”.
* footer.php — “подвал”.
* index.php — главная.
* archive.php — архив.
* page.php — страница.
* single.php — одиночная запись.
* sidebar.php — блок, на котором будет выводиться навигация: категории, страницы, архив и т.д.
* comments.php — комментарии.
* search.php — результаты поиска.
* 404.php — страницы 404 ошибки (”не найдено”). — данный файл не обязателен.
* function.php — php функции темы. — данный файл не обязателен.
* style.css — таблицы css стилей.

Теперь давайте создадим папку с названием MyTheme и созданим в ней все файлы, перечисленные выше, просто созданим, наполнять ничем пока не надо.

Теперь копируем эту папку в wp-content/themes/ установленного WP. Наполнять содержимым эти файлы мы будет уже из панели администрирования вордпресса — Дизайн -> Выбираете только что созданную тему -> Редактировать. Редактирование из админки, на мой взгляд, является наиболее удобным, и потом, изчезает опасность слетания кодировки (при редактировании обыкновенными блокнотопдобными программами, не поддерживающими UTF-8, русские символы превращаются в крякозабру).

Итак, каркас темы у нас есть, осталось только его наполнить.

Шаг 3 и 4. Наполняем каркас нашей темы.
Этот шаг следует разделить на несколько подшагов. Сейчас я буду приводить название файла, а следом PHP функции (команды), которые отвечают за вывод того или иного содержания.

Перед дальнейшим прочтением материала, создайте простой статичный html шаблон, где будет отображено то, как будет выглядеть сайт на главной страничке.

header.php
Думаю, не нужно объяснять, что шапка — это верхняя часть сайта, в которой, как правило, выводится логотип, краткое описание сайта, возможно — меню. В нашей шапке мы будем выводить название сайта и описание сайта.

Название сайта выводит функция

bloginfo('name');

За вывод описания отвечает функция

bloginfo('description');

Название сайта будет логично сделать кликабельным, тоесть сделать ссылкой на главную страницу. Ссылка на главную страницу сайта возвращается функцией

echo get_option('home');

Заметьте, некоторые функции выводят результат своего выполнения сразу, а некоторые просто возвращают значение и его нужно выводить командой echo.

В файл header.php мы также поместим технический html код . В <head> необходимо выводить заголовок (<title>) сайта. Нужный заголовок возвращается функцией

wp_title();

Также обязательной является подстановка кодировки, в которой будет отдана страница. Кодировка возвращается функцией

bloginfo('charset');

Разумеется, здесь же необходимо поместить ссылку на таблицу стилей, на rss и прочую техническую информацию. Для всего существуют свои функции.

Готовый файл header.php у нас будет выглядеть вот так (показано ниже), там вы сможете увидеть прочие функции и на интуитивном уровне понять что за что отвечает.

Заходим через админку в редактор файла header.php, вставляем код из нужного файла архива mytheme.

footer.php
В этом файле содержится подвал сайта. На нем мы выведем название сайта и год.
Заходим через админку в редактор файла footer.php, вставляем код из нужного файла архива mytheme.

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

Заранее приведу готовый sidebar.php, а потом расскажу о нем поподробнее.

<td width="20%" valign="top" id="menu">  <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar') ) : ?>  Настройте виджеты.  <?php endif; ?>  </td>

PHP код в сайдбаре создает новый блок для виджета под названием “Sidebar” (его мы установим в следующем файле), наполнить его содержимым можно в редакторе тем, в разделе виджеты. Там все должно быть понятно, позже, добавляя виджеты, вы сможете смотреть что именно добавляется на сайте с каждым новым виджетом и понять суть всего происходящего.

Для большей гибкости, навигацию часто делают не посредством виджетов, а посредством следующих функций:

wp_get_archives('type=monthly');  wp_list_pages('title_li=' . ('Страницы:'));  wp_list_categories('title_li=' . __('Категории:'));  wp_meta();

Думаю, вам должно быть интуитивно понятно, какая из функций что выводит.

functions.php
Данный файл содержит функции, которые автоматически подключаются к шаблону, а некоторые WP самостоятельно выполняет перед генерацией страницы.

В сайдбаре мы использовали виджет под названием “Sidebar”, теперь необходимо его установить в functions.php. Виджеты устанавливаются функцией register_sidebar, которой в качестве параметры передается массив значений, необходимый для управления отображением блоков.

В нашем случае, чтобы установить виджет, нужно добавить в functions.php следующий код:

<?php  if(function_exists('register_sidebar')) {    register_sidebar(  array(  'name'=>'Sidebar'  'before_widget' => '',  'after_widget' =>'',  'before_title' =&gt; '<h3>',  'after_title' => '</h3>',  )  );  }  ?>

Как видите, мы установили виджет под названием ‘name’=>’Sidebar’, до и после виджета нам не нужно никакого html кода, поэтому следующие 2 значения оставили пустыми, заголовок блока с элементом виджета мы помещаем в теги <h3>, что наглядно продемонстрировано в последних двух значениях.

Итак, виджет определен, немного позже вы сможете поиграться им и оценить по достоинству эту замечательную возможность WordPress.

index.php
Этот файл отвечает за вывод того, что пользователь видит на главной странице сайта. Сейчас мы впервые узнаем, как подключать другие шаблоны (шапку, подвал, сайдбар и т.д.). А подключаются другие шаблоны следующим образом:

Подключение шапки header.php:

get_header();

Подключение сайдбара sidebar.php:

get_sidebar();

Подключение подвала footer.php:

get_footer();

Откройте index.php из архива mytheme.

В коде index.php вы увидели некоторые новые функции. Думаю, и без разъяснения понятно, что каждая из них делает и какие параметры ей передаются. Самой важной функцией является

the_content('Читать далее');

В параметре этой функции — надпись, которая выводится в том случае, если содержание записи необходимо обрезать. Описывать остальные функции не считаю нужным, так как должно быть понятно, что, где и как. Главное — понять принцип подключения шаблонов функциями get_***();

archive.php, page.php, single.php
А теперь мы плавно переходим к следующим файлам. Во все файлы, кроме 404.php, style.css и comments.php можно вставить тот же код, что и в index.php. Да, да, тоже самое. Как так? Давайте разберемся. Все станет понятно, когда вы поглубже вникните в php код index.php. Давайте посмотрим, что же там происходит.

Мы видим функция <?php if (have_posts()) : ?> возвращает true в случае, если записи по существующему критерию существуют, в противном случае возвращается false. Мы также видим, что если WordPress есть что показать, он выполняет цикл <?php while (have_posts()) : the_post(); ?>, в котором он выводит все записи, удовлетворяющий критерию. Например, если пользователь кликнул на категорию “Авто”, WP вытаскивает из базы данных все записи этой категории, помещает в have_posts(), а если пользователь кликнул на какую-либо страницу, — WP вытаскивает из базы данных ту самую страницу и также помещает ее в функцию have_posts(), которую мы обходим циклом (в данном случае 1 раз) и выводим.

Если have_posts() вернет false, тоесть если ни 1 записи, подходящей под критерии нет, то отобразится

<h2 align="center">Не найдено</h2><p align="center">Извините, ничего не найдено.</p>

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

Хотя нет, просто код файлов page.php, single.php не полностью соответствует index.php, в эти файлы необходимо также добавить comments_template(); в то место, гле вы хотите видеть комментарии к записи. Эта функция подключает в шаблон comments.php, описанный ниже.

 

comments.php
На первых порах лучше всегда использовать стандартную форму комметариев, по этому возьмите ее из архива mytheme.

404.php
Этот файл подключается, если пользователь пришел на что-то несуществующее, например, несуществующую категориию. Сюда просто пишем любое сообщение об ошибке, если есть желание, старыми способами подключаем шапку, подвал и прочие части темы. Данный файл не обязателен!

style.css
Ну а тут совсем все просто. Здесь пишем таблицы стилей, они будут автоматически подключаться к каждой странице.

Шаг 5. Делаем дополнения и правки.
У вас есть готовая тема, которую вы можете самостоятельно переделывать и доделывать как хотите.

Источник: Блог вебмастера php.name

www.wp-info.ru

В этом уроке мы создадим простую тему для cвоего блога wordpress самостоятельно.

Введение.

Прежде чем начать, давайте взглянем на стандартную тему (тему по умолчанию, файлы index.php и single.php) WordPress и посмотрим как она устроена:

тема вордпресс

тема вордпресс

Исходный шаблон.
Предположим, что мы нарисовали в фотошопе вот такой шаблон (его исходник здесь), аналогично поделим его на блоки:

*

Сам процесс создания и верстки html-шаблона рассматривать в рамках этой статьи не будет, вы можете посмотреть видеокурс «Создаем сайт с нуля (фотошоп+верстка)» на сайте evgeniypopov.com в выпусках журнала 35 и 36, только следует учесть, что вордпресс генерирует некоторые классы, которые должны присутствовать в таблице стилей. К примеру классы aligncenter, alignleft и alignright служат для выравнивания изображений и блочных элементов, и их нужно включить в свою таблицу стилей (можно скопировать из таблицы стилей дефолтной темы):


.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}

 

Следующие классы используются для выравнивания изображений, которые имеют подписи (можно скопировать из дефолтной темы, в дальнейшем при необходимости поправить):


.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* необязательные параметры, которые сделают скругленные углы в поддерживаемых браузерах*/
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

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


.categories {...}
.cat-item /* Этот класс присваивается всем категориям */}
.current-cat {/* стиль текущей категории */}
.current-cat-parent {/* стиль для предка(ов) текущей категории */}
.children {/* класс для потомка */}
.pagenav {/* постраничная навигация */}
.page_item {/* любой элемент списка */}
.current_page_item {/* этот класс присваивается в списке страниц к текущей активной странице */}
.current_page_parent {/*класс для родительской страницы по отношению к текущей */}
.current_page_ancestor {/* любая страница верхних уровней по отношению к данной */}
.widget {/* все виджеты обворачиваются в этот класс */}

В процессе верстки используйте блоки и стили к ним, как это определено в скринах в начале статьи. Это не обязательно, но очень даже желательно.

К примеру в дальнейшем мы подключим поисковую форму на сайт через спец. тег wordpress <?php get_search_form() ?>, в результате чего wordpress выведет такую форму:

<form id="searchform" action="http://localhost/testblog/" method="get" role="search">
<div>
<label class="screen-reader-text" for="s">Найти:</label>
<input id="s" type="text" name="s" value="силами" gtbfieldid="2"/>
<input id="searchsubmit" type="submit" value="Найти"/>
</div>
</form>

Поэтому учитываем это при верстки темы.

И последнее, что нужно добавить в style.css это информацию о себе любимом и о созданной теме. Информация размещается в начале файла в коментах:

/*
Theme Name: Придумайте уникальное имя темы
Theme URI: http://ссылка-на-домашнюю-страницу-темы
Description: Описание темы
Author: Автор темы
Author URI: http://ссылка-на-страницу-автора
Template: название-темы-предка
Tags: теги темы - только из списка предлагаемого wordpress.org
Version: версия
Ну и здесь текст лицензии
*/

Также не забудьте сделать screenshot.png и положить его в папку с шаблоном (в корень). Информация, размещенная таким образом в таблице стилей, будет отображаться в админке в разделе Управление «темами». Сверстанный шаблон тестируем в браузерах, если все норм, можно идти далее.

Код страниц сверстанного шаблона приводить не буду, т.к. он достаточно большой, вы его просто скачайте, далее будем работать с ним.

Итак распакуйте архив, далее мы будем конвертировать index.html, single.html и page.html в wordpress тему (page.html такая же как и single.html, только без блока коментариев).

Принцип работы wp-темы:
Page php

Если вы откроете папку темы по умолчанию (wp-content/themes/default), вы увидите множество файлов PHP (файлы темы) и одного файла style.css. Когда мы просматриваем блог, WP подключает файлы темы ( index.php <<header.php, sidebar.php и footer.php) для создания страниц.

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

Шаг 1:
Для начала в директории тем вордпресса (wp-content/themes) создайте папку с именем нашей темы. Пусть это будет ruseller_lessons. Затем из папки темы по умолчанию (wp-content/themes/default) скопируйте файлы comments.php, search.php и 404.php в папку нашей темы. Эти файлы отвечают за комментарии и поиск на блоге. Затем в ruseller_lessons скопируйте таблицу стилей style.css нашего шаблона, screenshot.png (300×225) и папку images.

Теперь файлы нашего шаблона нужно «распилить», т.е. вытащить в отдельные файлы footer, sidebar и header. Схема показывает упрощенный вид файла index.php с метками, согласно которым будем его пилить:

*

Шаг 2Header.php
Открываем index.html и вырезаем все, что находится до коментария <!—/header —> , создаем новый файл header.php и вставляем в него вырезанный код, сохраняем в директории нашей темы ruseller_lessons:


<!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" />
<title>index.html</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="#">My Blog</a></h1>
<div class="description">Blog Description</div>
</div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!--/header -->

Теперь идем в папку с дефолтной темой, открываем header.php и копируем оттуда теги <title>, <link>, <h1>, and <div class=description> и ими заменям соответствующие строки в нашем header.php.

Затем все теги <li>, находящиеся id=»nav» (список страниц в верхней части блога) заменям на функцию вордпресса

<?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?>

В итоге получаем:

<!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" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body>
<div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
<ul id="nav">
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
</ul>
</div>
<!--/header -->

Шаг 3 — Sidebar.php
Возращаемся к файлу index.htm. Первым делом удаляем всю форму поиска, затем вырезаем из него все от <div id=»sidebar»> до <!—/sidebar —>. Вырезанный код вставляем в новый файл sidebar.php и сохраняем его в директории нашей темы. Теперь в полученном коде заменяем все, что между тегами <ul> вызовом сайдбаров, получаем следующий код:

	<div id="sidebar">
<ul class="ul-cat">
<?php dynamic_sidebar('sidebar1') ?>
</ul>
<ul class="ul-archives">
<?php dynamic_sidebar('sidebar2') ?>
</ul>
</div>
<!--/sidebar -->

Таким образом мы вызываем 2 сайдбара. Если вы смотрели Sidebar.php дефолтной темы, то заметили, что кода там гораздо больше. Дело в том, что там просто прописано дополнительное условие, которое по умолчанию выводит архив и категории, в случае, если админ не подключил ни одного виджета к сайдбару. Мы это условие прописывать не будем.

Чтобы наши сайдбары заработали, их необходимо зарегистрировать. Для этого в директории темы создаем файл functions.php и в нем пишем:

	<?php
register_sidebar(array('name'=>'sidebar1'));
register_sidebar(array('name'=>'sidebar2'));
?>

Осталось подключить форму поиска. Сделать это можно либо из админки путем добаления виджета в один из сайдбаров, а можно вызвать ее в sidebar.php, что мы и сделаем. В самом начале добавляем:

<?php get_search_form(); ?>
<div id="sidebar">
...............................................

Шаг 4 — Footer.php
Возращаемся к файлу index.html и вырезаем из него все от <div id=footer> до </html>. Вырезанный код вставляем в новый файл footer.php:


<div id="footer">
<div class="left-col">
<h4>Recent Posts </h4>
<ul class="recent-posts">
<li><a href="#">Blog Title Text</a><br />
10/23/2006</li>
<li><a href="#">Blog Title</a><br />
10/23/2006</li>
<li><a href="#">Title Text</a><br />
10/23/2006</li>
<li><a href="#">Sample Blog Title</a><br />
10/23/2006</li>
</ul>
</div>
<div class="left-col">
<h4>Recent Comments</h4>
<ul class="recent-comments">
<li><a href="#">Nick:</a> This is a test comment</li>
<li><a href="#">Jen:</a> Hello, nice day!</li>
<li><a href="#">Someone:</a> Wow, this is another test comment</li>
<li><a href="#">Admin:</a> This is a comment</li>
</ul>
</div>
<div class="right-col">
<h4>About</h4>
<p>Welcome to my design blog and portfolio showcase. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
<p>Feel free to <a href="#"> contact me.</a></p>
</div>
<hr class="clear" />
</div>
<!--/footer -->
</div>
<!--/page -->
</body>
</html>

По нашему шаблону здесь же мы должны вывести последние записи блога (Recent Posts) и последние коментарии (Recent Comments). Последние записи будем выводить в количестве 5 штук — showposts=5. Заменям все внутри <ul class=»recent-posts»> :

<ul class="recent-posts">
<?php query_posts('showposts=5'); ?>
<?php while (have_posts()) : the_post(); ?>
<li>
<strong><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent link to'); ?> <?php the_title(); ?>"><?php the_title(); ?></a></strong><br />
<small><?php the_time('m-d-Y') ?></small>
</li>
<?php endwhile;?>
</ul>

Вывод последних коментариев сделаем с помощью плагина simple_recent_comments.php, скачайте его и положите в папку нашей темы. Теперь в нужном месте его нам нужно вызвать (заменям содержимое блока <div class=»left-col»>):

<div class="left-col">
<?php include (TEMPLATEPATH . '/simple_recent_comments.php'); /* recent comments plugin by: www.g-loaded.eu */?>
<?php if (function_exists('src_simple_recent_comments')) { src_simple_recent_comments(5, 60, '<h4>Recent Comments</h4>', ''); } ?>
</div>

Шаг 5 — Index.php
Все что осталось в index.html сохраняем как index.php в папку с нашей темой, затем подключаем вызов header, sidebar и footer:

<?php get_header(); ?>
<div id="content">
<div class="post">
<div class="post-date"><span class="post-month">Oct</span> <span class="post-day">13</span></div>
<div class="post-title">
<h2><a href="#">Sample Blog Entry</a></h2>
<span class="post-cat"><a href="#">News</a></span> <span class="post-comments"><a href="#">3 comments</a></span>
</div>
<div class="entry">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">Read more...</a> </p>
</div>
</div>
<div class="navigation"> <span class="previous-entries"><a href="#">Previous Entries</a></span> <span class="next-entries"><a href="#">Next Entries</a></span> </div>
</div>
<!--/content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Шаг 6 — Вывод записей блога на странице index.php

Следующий рисунок демонстрирует принцип вывода записей блога. Сначала идет проверка, есть ли сообщения в базе, если нет выводит «Not Found». Если есть, выводит в цикле while

. *

Открываем наш index.php и заменям статичный текст между <div id=content>..</div> функциями (тегами) wordpresspost date, title, category, comments, next и previous. Ориентируясь на рисунок выше получаем:

<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) { ?>
<?php while (have_posts()) { the_post(); ?>
<div class="post">
<div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('j') ?></span></div>
<div class="post-title">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<span class="post-cat"><a href="#"><?php the_category(', ') ?></a></span> <span class="post-comments"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></span>
</div>
<div class="entry">
<?php the_content(); ?>
</div>
</div>
<?php } ?>
<div class="navigation">
<span class="previous-entries"><?php next_posts_link('Вперед') ?></span>
<span class="next-entries"><?php previous_posts_link('Назад') ?></span>
</div>
<?php } else { ?>
<h2>Ничего не найдено</h2>
<?php } ?>
</div>
<!--/content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

Мы использовали теги WordPress:

the_time(‘M’), the_time(‘j’) — вывод месяца и дня соответственно
the_permalink() — отображает постоянную ссылку записи
the_title_attribute() — заголовок текущей записи.
the_title() — заголовок записи или страницы
the_category(‘, ‘) — ссылку на категорию или категории, к которым принадлежит запись
comments_popup_link — выведет ссылку для комментариев во всплывающем окне если comments_ popup_script() используется, иначе выводит обычную ссылку на комментарии.
the_content — выводит содержание текущей записи. Если используется тег <!–more–> то сообщение показывается только до <!–more–> (только на главной странице, на странице записи будет показываться полностью).
next_posts_link — ссылка на предыдущие сообщения.
previous_posts_link — ссылка на следующие сообщения.

Шаг 7- Single.php
Этот файл мы создадим из только что законченного index.php , немного изменив его:

 <?php get_header(); ?>
<div id="content">
<?php if (have_posts()) { ?>
<?php while (have_posts()) { the_post(); ?>
<div class="post">
<div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('j') ?></span></div>
<div class="post-title">
<h2><?php the_title(); ?></h2> <!-- изменен из index.php -->
<span class="post-cat"><?php the_category(', ') ?></span> <!-- изменен из index.php -->
</div>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?><!-- изменен из index.php -->
</div>
<?php comments_template(); ?><!-- изменен из index.php -->
</div>
<?php } ?>
<div class="navigation">
<span class="previous-entries"><?php previous_post_link(' %link') ?></span>
<span class="next-entries"><?php next_post_link('%link') ?></span>

 


</div>
<?php } else { ?>
<h2>Ничего не найдено</h2>
<?php } ?>
</div>
<!--/content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

wp_link_pages  — Выводит ссылки на странице в многостраничном сообщении ( при использовании <!—nextpage—>). 
comments_template() — Подключает файл шаблона comments.php из текущей папки темы
previous_post_link(‘ %link’), next_post_link(‘%link’) — выведет заголовки предыдущей и следующей записи

Шаг 8 — page.php
Этот шаг проще предыдущего. Файл single.php сохраняем как page.php. Удаляем из page.php вывод даты, комменты, next/previous:

<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) { ?>
<?php while (have_posts()) { the_post(); ?>
<div class="post">

 


<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
<?php } ?>
<?php } else { ?>

<h2>Ничего не найдено</h2>
<?php } ?>
</div>
<!--/content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

На этом можно и закончить. Основные файлы темы мы собрали. Вероятно вы заметили, что в дефолтной теме больше файлов. Например archive.php, он не является обязательным. Однако если мы подключим виджет «Архивы» или «Календарь» в сайдбаре и перейдем в какой — нибудь архив по дате, записи по выбранной дате выведутся на индексной странице, поэтому вполне можно обойтись без archive.php 🙂

Финал.
Иногда нужно/полезно вывести на странице заголовки всех записей. Для этой цели воспользуемся тегом wordpress query_post:

<?php
/*
Template Name: Archives
*/
?><?php get_header(); ?>
<div id="content">
<h2><?php the_title(); ?></h2>
<?php query_posts('showposts=-1'); ?>
<ul>
<?php while (have_posts()) { the_post(); ?>
<li>
<h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<?php the_time('M d Y') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?>
</li>
<?php }?>
</ul>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

query_posts(‘showposts=-1’); — выведет все записи. Сохраним это в файл archives.php. Обратите внимание на комментарии в начале кода Template Name: Archives, он здесь обязателен (далее вы поймете почему)

Идем в админку и создаем новую страницу. Указываем только заголовок и указываем в «Атрибутах» шаблон Archives, сохраняем страницу. И теперь на этой странице у нас будут выводиться все записи по шаблону archives.php, который мы описали чуть выше:

*

На сегодня это все. Спасибо за внимание.

P.S собранная тема тестировалась на WordPress 2.8.5. Конечный результат скачать можно здесь. Аналогично попробуйте создать свою тему, уверен, у вас получиться!

Статья сборная, источники: http://www.webdesignerwall.com, http://themetation.com, http://codex.wordpress.org

 

ruseller.com

You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.