varve
intelligent solutions for e-business

Главная

ПреГлавная ЧаВо

События

Новости Статьи Архив

Проекты

ФОРУМ уроки проверка сайта ПОРТФОЛИО Youtube megainformatic

Контакты

О Проекте Автор

Сегодня

27 апреля 2024
9:26

Вход Sign In Регистрация Sign Up Забыли пароль ? Forgot password ?

VARVE - Уроки Photoshop - текстуры

подробнее...

Поиск

карта сайта

sitemap.xml

Добавить Ваш проект

Программы

Антивирусы

drweb

Графика

Уроки Photoshop - Чудеса

Уроки Photoshop - Рисуем и анимируем

Дорога в город + source

Нечто Необъяснимое

Нечто Необъяснимое в плену желаний

donuts3d + source

Веселый буквоежка

комиксы

Костя Коробкин - Как я провел Лето

Костя Коробкин - С Новым годом

Веселый буквоежка комикс

игровые движки

движок игры Веселый буквоежка - fle

Статьи сайта


	Создание своих Тем для WordPress

	Введение

	Начнём с того, что, как мне кажется, будет вам интересно узнать из области сайтостроения. Итак, даже если у Вас есть собственная CMS (самописная, как говорят), то всегда полезно знать, как устроены профессиональные CMS. Их великое множество - Joomla, Drupal, ModX, Dle, WordPress и т. д. Стоит ли осваивать их все или достаточно выбрать какую то одну и прорабатывать её ? Если Вы новичок в сайтостроении, каким был совсем недавно и я, то лучше для начала остановить свой выбор на чём-то одном, и заняться его изучением. На данном этапе я хотел бы познакомиться с созданием простого шаблона для CMS WordPress. Собственно этим мы сейчас и займёмся.

	Для начала конечно вам необходимо установить denver и wordpress. Ну а далее - вы займётесь собственно изучением данного урока.

	Предположим, что Вы установили wordpress локально на свой компьютер в следующую папку - C:\WebServers\home\localhost\www\wordpress_ru

	Если заглянуть в папку установленного wordpress, то там вы найдёте такой путь - wp-content\themes

	Это и есть папка, внутри которой Вы можете размещать собственные шаблоны сайтов для WordPress. В WordPress они именуются Темами.

	Так что же нужно для того, чтобы создать собственную тему для WordPress ? А нужно нам следующее:

	внутри папки themes создаем папку, например, mytheme

	Открываем эту созданную папку и внутри неё создаем такие файлы - index.php header.php sidebar.php footer.php style.css loop.php functions.php

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

	Далее, вооружившись каким либо редактором, например, DreamWeaver или даже обычным Блокнотом добавляем в наши файлы следующий код

	В файл index.php

	<?php /** * Главный файл шаблона темы * * Это изменяемый файл шаблона для темы WordPress * и один из 2 обязательных файлов для темы (второй - это style.css). * Используется для отображения страницы, в том случае, когда * неопределены другие дополнительные варианты * т. е., он совмещает вывод главной страницы, когда нет файла home.php. * Более подробно: http://codex.wordpress.org/Template_Hierarchy * * @package WordPress * @subpackage MyTheme * @since MyTheme 1.0 / get_header(); ?> <div id="container"> <div id="content" role="main"> <?php / Запуск цикла вывода постов блога. * Если нужно переопределить данную возможность в дочерней теме тогда * включите в папку новой темы файл loop-index.php для использования особенностей, описанных в нём. */ get_template_part( 'loop', 'index' ); ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>

	В файл style.css мы добавим такой код

	style.css

	Файлы loop.php и functions.php также можете взять в готовом виде -

	loop.php

	functions.php

	В файл header.php

	<?php /** * Заголовок (Header) для нашей темы. * * Отображает содержимое секции <head> и всё до блока <div id="main"> * * @package WordPress * @subpackage MyTheme * @since MyTheme 1.0 / ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php / * Выводим тег <title> в зависимости от содержимого страницы. / global $page, $paged; wp_title( '\|', true, 'right' ); // Имя нашего сайта (блога). bloginfo( 'name' ); // Добавляем описание для домашней/начальной страницы. $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() \|\| is_front_page() ) ) echo " \| $site_description"; // Если нужно - добавляем номер страницы: if ( $paged >= 2 \|\| $page >= 2 ) echo ' \| ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php / Мы добавим немного JavaScript на страницы с комментариями для * формирования поддержки сайтов с подпроцессными (threaded) комментариями (когда они используются). / if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); / Всегда ставим вызов wp_head() до закрытия тега </head> * вашей темы, либо вы нарушите подключаемость многих плагинов (plugins), которые обычно используют этот обработчик (hook) * для добавления элементов в <head> таких как * стили (styles), скрипты (scripts), и мета теги (meta tags). / wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="wrapper" class="hfeed"> <div id="header"> <div id="masthead"> <div id="branding" role="banner"> <?php $heading_tag = ( is_home() \|\| is_front_page() ) ? 'h1' : 'div'; ?> <<?php echo $heading_tag; ?> id="site-title"> <span> <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a> </span> </<?php echo $heading_tag; ?>> <div id="site-description"><?php bloginfo( 'description' ); ?></div> <?php // Проверка условия, что это пост или страница, имеет сокращенное представление (thumbnail), либо располагается целиком if ( is_singular() && has_post_thumbnail( $post->ID ) && ( / $src, $width, $height / $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) && $image[1] >= HEADER_IMAGE_WIDTH ) : //Изображение в заголовке страницы echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' ); else : ?> <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /> <?php endif; ?> </div><!-- #branding --> <div id="access" role="navigation"> <?php / Разрешить экранным ридерам (screen readers)/ текстовым браузерам (text browsers) пропустить отображение меню навигации и получить все равно корректный вариант отображения/ ?> <div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div> <?php / Наше навигационное меню. Если оно не заполнено, wp_nav_menu переключается к состоянию wp_page_menu. К меню применяется основная позиция из возможных. Если ничего не присвоено, используется меню с наименьшим ID*/ ?> <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?> </div><!-- #access --> </div><!-- #masthead --> </div><!-- #header --> <div id="main">

	В файл sidebar.php

	<?php /** * Сайдбар (Sidebar) включает области для основных и вторичных виджетов (widget). * * @package WordPress * @subpackage MyTheme * @since MyTheme 1.0 / ?> <div id="primary" class="widget-area" role="complementary"> <ul class="xoxo"> <?php / Когда мы вызываем функцию dynamic_sidebar(), она будет разделять * виджеты на области для этих виджетов. Если вместо этого функция возвратит false, * тогда sidebar просто не существует, поэтому будет отображен * сайдбар с содержимым по умолчанию. */ if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?> <li id="search" class="widget-container widget_search"> <?php get_search_form(); ?> </li> <li id="archives" class="widget-container"> <h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3> <ul> <?php wp_get_archives( 'type=monthly' ); ?> </ul> </li> <li id="meta" class="widget-container"> <h3 class="widget-title"><?php _e( 'Meta', 'twentyten' ); ?></h3> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <?php wp_meta(); ?> </ul> </li> <?php endif; // end primary widget area ?> </ul> </div><!-- #primary .widget-area --> <?php // A second sidebar for widgets, just because. if ( is_active_sidebar( 'secondary-widget-area' ) ) : ?> <div id="secondary" class="widget-area" role="complementary"> <ul class="xoxo"> <?php dynamic_sidebar( 'secondary-widget-area' ); ?> </ul> </div><!-- #secondary .widget-area --> <?php endif; ?>

	В файл footer.php

	<?php /** * Шаблон для отображения подвала (footer). * * Содержит закрывающий блок id=main тег и весь контент * после него. Вызывает sidebar-footer.php для нижележащих виджетов. * * @package WordPress * @subpackage MyTheme * @since MyTheme 1.0 / ?> </div><!-- #main --> <div id="footer" role="contentinfo"> <div id="colophon"> <?php / Сайдбар в футере? Вы можете настроить * ваш футер на 4 столбца виджетов. / get_sidebar( 'footer' ); ?> <div id="site-info"> <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <?php bloginfo( 'name' ); ?> </a> </div><!-- #site-info --> <div id="site-generator"> <?php do_action( 'twentyten_credits' ); ?> <a href="<?php echo esc_url( __('http://wordpress.org/', 'twentyten') ); ?>" title="<?php esc_attr_e('Semantic Personal Publishing Platform', 'twentyten'); ?>" rel="generator"> <?php printf( __('Proudly powered by %s.', 'twentyten'), 'WordPress' ); ?> </a> </div><!-- #site-generator --> </div><!-- #colophon --> </div><!-- #footer --> </div><!-- #wrapper --> <?php / Всегда используем функцию wp_footer() до закрывающего тега </body> * вашей темы, иначе вы повредите многие плагины, которые * обычно используют этот обработчик (hook) для обращения к JavaScript файлам. */ wp_footer(); ?> </body> </html>

	Теперь Вам остается только активировать созданную тему через админку WordPress и увидеть результат !

	В следующем нашем уроке мы разберем как создается меню навигации.

Оставленные комментарии

(с) ВАРВЕ точка РУ (varve.ru) 2002-2024
Все права защищены. Если Вы хотите использовать статьи нашего сайта на своём блоге или сайте, просим связаться с нами и опубликовать обратную ссылку на наш проект, во избежание недоразумений и нарушения авторских прав.
обратная связь карта сайта sitemap.xml

megainformatic.ru webinformatic.ru

Посетили страницу: 3310

Поиск

Теги

Добавить Ваш проект

Программы

Статьи сайта

Оставьте свой комментарий

Оставленные комментарии