webinformatic
create your reality !

Главная

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

События

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

Проекты

ФОРУМ Youtube megainformatic уроки сайты ЧЕРНЫЙ СПИСОК

Контакты

О Проекте Рекламодателям

Сегодня

19 апреля 2024
14:21

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

Octane Racing | race
Octane Racing | race

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

игра Шарики на лифте / Balls on lift game

игра Шарики и Ямки - Каникулы Зеленого Шарика PC / Balls and Holes - Green Ball Holidays PC game

Поиск

карта сайта

sitemap.xml

Добавить новость / Add news

Программы

Антивирусы

Графика

Уроки 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 и увидеть результат !

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

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

Something: Unexplained 2 captive of desires / Нечто: Необъяснимое 2 в плену желаний

Костя Коробкин Комикс Коллекционное издание - 6 комиксов, 81 страница, 220 mp3 треков

(с) ВЕБИНФОРМАТИК (webinformatic) 2006-2024
Все права защищены. Использование материалов сайта только с разрешения администрации. Для этого свяжитесь с нами через форму комментариев. Ответственность за содержание рекламных материалов несут рекламодатели. All rights reserved. Use of site materials only with the permission of the administration. To do this, please contact us through the comments form. Responsible for the content of advertisements are advertisers.
карта сайта sitemap.xml Рекламодателям

megainformatic.ru http://megainformatic.ru/varve

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

Поиск

Теги

Добавить новость / Add news

Программы

Статьи сайта

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

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