От автора: вместе с выходом WordPress 3.0 появилась реализация множества новых свойств этой популярной системы управления контентом. В этом учебнике мы покажем вам, как закодировать тему WordPress 3.0 с самого начала, чтобы воспользоваться преимуществами новых свойств, а также создать готовую к блоггингу маленькую тему.
Устанавливаем Work Station
Для начала работы с этим учебником нужно установить на свой компьютер сервер, используя XAMPP или WAMP (особенно если вы работаете на PC) или MAMP, если вы работаете на Mac’е. Эти инструменты дают возможность создать для WordPress локальную тестовую среду и сделать так, чтобы вам не приходилось во время работы над проектом постоянно пересылать файлы через FTP.
С точки зрения редактирования кода я особенно рекомендовал бы Notepad++. При наличии выделяемого синтаксиса, простого и легкого пользовательского интерфейса для кодирования, я утверждал бы, что он – мой личный любимчик (плюс нельзя отрицать того, что он бесплатный), но Notepad или Notepad 2 тоже будут работать хорошо.
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курсПодготовка необходимых папок и файлов
В папке с установочным файлом своего WordPress’а перейдите к wp-content/themes/ и создайте папку с названием "New 3.0 Theme" (новая тема 3.0). Именно тут в течение работы с учебником мы будем держать все свои файлы. Теперь создайте следующие файлы и папки:
| 1 2 3 4 5 6 7 8 9 10 | /images style.css header.php index.php single.php footer.php archive.php page.php sidebar.php functions.php |
Шаг 1 — Style.css
В style.css будут находиться все элементы стилей нашего шаблона WordPress. Однако сначала мы используем его для объявления названия своего шаблона, а также имени автора и ссылки, описания и версии. При создании темы WordPress помните о том, что style.css – это один из двух файлов, нужных для работы темы, а второй, который мы создадим попозже – это index.php.
| 1 2 3 4 5 6 7 8 | /* Theme Name: New WP 3.0 Theme URI: http://www.onextrapixel.com Description: A clean and minimal theme that is completely compatible with WordPress 3.0 Author: Keenan Payne Author URI: http://slackrmedia.com Version: 1.0 */ |
Эту информацию можно в любое время поменять, важно то, что она вся содержится в комментариях, так что не влияет ни на какие создаваемые описания.
Теперь создадим несколько основных описаний, которые позже реализуем в нескольких PHP-файлах шаблона.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | body{ font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px; background: #d9d9d9; color: #000000; } a:link, a:visited{ text-decoration: none; color: #000000; } a:hover{ color: #5f5f5f; } h1 { font-size: 54px; } h3 { font-size: 24px; } #wrapper{ margin: 0 auto; width: 750px; text-align: left; background: #fff; padding: 20px; } #header{ width: 750px; height: 100px; } #blog{ float: left; width: 520px; padding: 0 10px 10px 10px; } .sidebar{ float: left; width: 200px; margin: 0 0 0 10px; font-size: 14px; list-style: none; } #footer{ clear: both; text-align: center; height: 50px; background: #ccc; padding: 10px; } |
Тэг используется только для объявления спецификаций используемых на вебсайте шрифтов, а также цвета фона (можно менять на свое усмотрение). Далее мы объявляем атрибуты стилей для ссылок, а также некоторые заголовки, которые будем использовать в своей теме.
Упаковщик #wrapper будет размером во всю страницу, #header, что ясно из названия, будет заголовком, а #blog содержит последние посты в блог сайта. Наконец, у нас есть .sidebar и #footer, оба из которых будут содержать основные определения данных областей, о которых мы более подробно поговорим позже.
Шаг 2 — Header.php
Далее мы создадим header.php, который в настоящий момент будет содержать логотип нашего вебсайта, а также пользовательскую навигацию.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php wp_title ( '|', true,'right' ); ?></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 /* * Add this to support sites with sites with threaded comments enabled. */ if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); wp_head(); wp_get_archives(' type=monthly&format=link'); ?> </head> <body> <div id="wrapper"> <div id="header"> <h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1> </div> |
На самом деле этот код не нуждается в подробных объяснениях, просто помните о том, что он должен присутствовать в header.php всех ваших тем. Сначала мы объявляем doctype, а также используем стандарт, который применяется для показа названия вебсайта таким, каким вы его пишете в установках своего WordPress’а, а затем style.css и код PHP, который активирует перекрестные ссылки WordPress 3.0.
Шаг 3 – Добавляем пользовательскую навигацию
Теперь, когда мы закодировали свой header.php со всей основной информацией и названием блога, можно добавить пользовательское навигационное меню – свойство, представленное в WordPress 3.0. Однако до фактического добавления кода в header.php нам нужно открыть functions.php и внести код, необходимый для активации пользовательских меню.
| 1 2 3 4 5 6 7 8 9 10 11 | <?php //Add support for WordPress 3.0's custom menus add_action( 'init', 'register_my_menu' ); //Register area for custom menu function register_my_menu() { register_nav_menu( 'primary-menu', __( 'Primary Menu' ) ); } ?> |
Как видно из комментируемых отрывков кода, первая часть с add_action используется для добавления поддержки пользовательских меню, а далее мы регистрируем пользовательское меню и называем его "Primary Menu" (Основное меню). Теперь мы переходим к реализации меню в своей теме.
Чтобы это сделать, нам придется добавить нижеприведенную строку кода в конец документа header.php.
| 1 | <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?> |
Теперь разберемся, что она в точности означает. Основная примененная функция – это wp_nav_menu, с sort_column, container_class и theme_location в качестве используемых аргументов. Sort_column гарантирует, что команда, выбранная вами в инструментальной панели WordPress выполняется, container_class позволит выбрать класс CSS, созданный вами для применения стилей к своему меню. Наконец, theme_location просто устанавливает меню туда, куда нам нужно, в данный момент это primary-menu.
Шаг 4 – Определяем стили навигации
Наша пользовательская навигация заголовка готова и работает, но в данный момент выглядит всего лишь как скучный устаревший список ссылок, к сожалению, эстетически непривлекательный. Чтобы исправить это, мы создадим в ourstyle.css класс с названием nav.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .nav{ width:750px; background: #000; display:block; float:left; position:relative; } .nav ul{ list-style:none; } .nav li{ float:left; position:relative; } |
Как видно, в .nav мы сделали некоторые основные объявления, такие как ширина навигации, фон, в котором она будет выровнена, а также значение display. Далее мы назначаем стили основному неупорядоченному списку, просто убедившись, что маркеры абзаца с нашими ссылками не показываются. Для списка мы перемещаем пункты влево, а также располагаем их относительно.
Теперь закончим определение стилей навигации, добавив их к ссылкам и выпадающим меню.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | .nav a{ display:block; text-decoration:none; color:#fff; padding:0 15px 10px 0; font-size:13px; font-weight:bold; } .nav ul ul{ display:none; position:absolute; top:100%; left:0; float:left; z-index:99999; background: #212121; } .nav ul ul ul{ top: 30%; left:100%; background: #343434; } .nav ul ul a{ height:auto; line-height:1em; padding:10px; width:130px; } .nav li:hover > a,.nav ul ul:hover > a{ color:#ccc; } .nav ul li:hover > ul{ display:block; } |
Как видно, мы начинаем с назначения стилей ссылкам меню, а сейчас занимаемся назначением стилей выпадающим меню. В .nav ul ul мы устанавливаем position (положение) на absolute (абсолютно) и устанавливаем свойство верха top на 100%, так что он находится прямо под свой исходной ссылкой. Мы также изменили фон, чтобы выпадающая ссылка немного выделялась, и установили z-index на 99999, так что неважно, что находится под ней или на пути нашего меню, она всегда будет находиться поверх всех прочих элементов.
Для третьего выпадающего меню мы снова слегка изменили цвет фона так, чтобы оно выделялось, установили left (левый край) на 100%, чтобы ее левый край всегда находился справа от первого выпадающего меню, и установили top (верх) на 30% так, чтобы он все еще был прикреплен ко второму выпадающему меню, но отделен от целого меню.
Наконец, назначаем стили ссылкам выпадающих меню, а также тому, как наша навигация будет смотреться, когда пользователь проведет мышью над данной ссылкой и ее выпадающим меню.
Шаг 5 — Index.php
Index.php станет домашней страницей нашего вебсайта и будет содержать код, включающий заголовок, нижний колонтитул и боковую колонку, о чем я расскажу ниже, и код, включающий последние посты из блога, а также мы воспользуемся в своих интересах свойством WordPress 3.0 для размещения контрольных изображений (thumbnail).
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <?php get_header(); ?> <div id="blog"> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <div class="post"> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <div class="entry"> <?php the_post_thumbnail(); ?> <?php the_content(); ?> <p class="postmetadata"> <?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br /> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?> </p> </div> </div> <?php endwhile; ?> <div class="navigation"> <?php posts_nav_link(); ?> </div> <?php endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> |
Эти строки кода использованы для вывода всей информации в header.php, sidebar.php и footer.php, куда бы вы ни поместили их в файлах темы.
| 1 2 3 | <?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?> |
Кроме того, код здесь довольно прост для понимания. После вызова header.php мы пользуемся чуть ранее созданным #blog и вызываем цикл, применяемый для вывода последних постов в блог WordPress. После этого обертываем название своих постов в div, которому мы ранее также назначили стили.
Единственный фрагмент кода здесь, показывающий, как мы собираемся воспользоваться преимуществами свойства WordPress 3.0 размещать контрольные изображения – это … Оно означает, что данный код не будет делать ничего до тех пор, пока мы не активируем свойство в functions.php, что мы и проделаем в следующем шаге.
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курсШаг 6 – Активация «контролек» постов
Мы добавили код показа контрольных изображений постов на домашней странице, но в данный момент ничего не происходит, так как в действительности мы не дали свойству возможности работать. Сейчас откройте functions.php, над которым мы трудились до этого, и добавьте после кода навигации меню следующее.
| 1 2 3 | // Активируйте контрольные изображения постов add_theme_support('post-thumbnails'); set_post_thumbnail_size(520, 250, true); |
Код вверху поясняет сам себя, так как почти в точности разъясняет то, что выполняется. Вторая строка добавляет в нашу тему поддержку контрольных изображений постов, в то время как третья строка определяет точные размеры нашей контрольки, которые в этой статье установлены на ширину в 520 пикселей и высоту в 250 пикселей.
Шаг 7 — Sidebar.php
Как вы догадались, sidebar.php – это файл, который будет демонстрировать нужную нам информацию в боковой колонке. Так как мы уже включили файл в свой index.php, то все, что нужно сделать – это вставить в него код, и наша боковая колонка покажется на домашней странице.
| 1 2 3 4 5 | <div class="sidebar"> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?> <?php endif; ?> </div> |
Да, это весь код, добавленный для функциональности sidebar.php. Мы вызываем div, созданный в style.css, а указанный внизу код даст возможность добавлять виджеты в боковую колонку в нужном порядке и нужным образом через прикладную часть WordPress’а. Однако, как со многими свойствами, нам приходится сначала модифицировать файл functions.php, чтобы это свойство работало нормально.
| 1 2 3 | //Простой код для боковой колонки с виджетом if ( function_exists('register_sidebar') ) register_sidebar(); |
Код всего лишь указывает WordPress’у регистрировать боковую колонку, вызываемую нами в sidebar.php. WordPress довольно легко может создавать множество боковых колонок, если они вам нужны в количестве более одной, но ради сокращения этого и так уже длинного учебника, давайте дадим возможность Google’у ответить на вопрос о том, как это сделать.
Шаг 8 — Single.php
Single.php мы уже используем для отдельной страницы с постом, и большая часть кода должна выглядеть довольно похоже, так как мы уже кодировали index.php. На самом деле, отличие всего одно – мы добавили div шаблона комментариев и код для присоединения comments.php.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <?php get_header(); ?> <div id="blog"> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <div class="post"> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <div class="entry"> <?php the_post_thumbnail(); ?> <?php the_content(); ?> <p class="postmetadata"> <?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br /> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?> </p> </div> <div class="comments-template"> <?php comments_template(); ?> </div> </div> <?php endwhile; ?> <div class="navigation"> <?php previous_post_link('< %link') ?> <?php next_post_link(' %link >') ?> </div> <?php endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> |
Шаг 9 — Comments.php
При выпуске WordPress 3.0 подразумевалась стандартизация формы комментариев для всех тем WordPress, облегчая задачу авторам тем и разработчикам плагинов, так как форма для комментариев могла корректироваться при помощи ловушек-хуков (hooks).
Внизу находится код, который вам нужно будет вставить в свой файл comments.php в шаблоне темы.
| 1 | <?php comment_form(); ?> |
Он покажет отлично подходящую к нашей теме форму для комментариев, но если вы захотите узнать больше о ее подстройке под требования заказчика.
Шаг 10 — Page.php
При создании страницы в WordPress для отображения написанного на ней используется другой файл — page.php. Код будет выглядеть почти полностью так, как тот, что мы написали в oursingle.php, за исключением того, что это страница, на которой мы собираемся пропустить шаблон комментариев и слегка изменить навигацию постов, чтобы вместо поста управлять страницей. За этим исключением код будет точно таким же.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <?php get_header(); ?> <div id="blog"> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <div class="post"> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <div class="entry"> <?php the_content(); ?> <p class="postmetadata"> <?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br /> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?> </p> </div> </div> <?php endwhile; ?> <div class="navigation"> <?php posts_nav_link(); ?> </div> <?php endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> |
Шаг 11 — Category.php
Category.php послужит в качестве файла, который предоставляет информацию для отображения постов всякий раз, когда пользователь смотрит специальную категорию поста, время написания постов или отдельного автора. Как в случае с page.php, большая часть кода здесь будет совершенно такой же, как в созданном нами до того single.php, кроме фрагмента в самом начале.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <?php get_header(); ?> <div id="blog"> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?> <?php /* If this is a category archive */ if (is_category()) { ?> <h2>Archive for the ‘<?php single_cat_title(); ?>’ Category:</h2> <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?> <h2>Posts Tagged ‘<?php single_tag_title(); ?>’</h2> <?php /* If this is a daily archive */ } elseif (is_day()) { ?> <h2>Archive for <?php the_time('F jS, Y'); ?>:</h2> <?php /* If this is a monthly archive */ } elseif (is_month()) { ?> <h2>Archive for <?php the_time('F, Y'); ?>:</h2> <?php /* If this is a yearly archive */ } elseif (is_year()) { ?> <h2>Archive for <?php the_time('Y'); ?>:</h2> <?php /* If this is an author archive */ } elseif (is_author()) { ?> <h2>Author Archive</h2> <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?> <h2>Blog Archives</h2> <?php } ?> <div class="post"> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <div class="entry"> <?php the_content(); ?> <p class="postmetadata"> <?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br /> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?> </p> </div> </div> <?php endwhile; ?> <div class="navigation"> <?php posts_nav_link(); ?> </div> <?php endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> |
Фрагмент кода здесь станет единственным добавлением, мы включили его сразу после цикла WordPress.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?> <?php /* If this is a category archive */ if (is_category()) { ?> <h2>Archive for the ‘<?php single_cat_title(); ?>’ Category:</h2> <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?> <h2>Posts Tagged ‘<?php single_tag_title(); ?>’</h2> <?php /* If this is a daily archive */ } elseif (is_day()) { ?> <h2>Archive for <?php the_time('F jS, Y'); ?>:</h2> <?php /* If this is a monthly archive */ } elseif (is_month()) { ?> <h2>Archive for <?php the_time('F, Y'); ?>:</h2> <?php /* If this is a yearly archive */ } elseif (is_year()) { ?> <h2>Archive for <?php the_time('Y'); ?>:</h2> <?php /* If this is an author archive */ } elseif (is_author()) { ?> <h2>Author Archive</h2> <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?> <h2>Blog Archives</h2> <?php } ?> |
Он занимается тем, что использует группу предложений if/elseif в PHP для показа того, что мы в данный момент просматриваем в своем блоге. Таким образом, если мы смотрим отдельную категорию с названием "Test Category 1" (тестовая категория 1), он покажет нам заголовок h2 — "Archive for the ‘Test Category 1′ Category:" (архив тестовой категории 1) перед всеми постами, и станет делать это для отдельных дат, авторов и так далее.
Шаг 12 – Пользовательские фоны, ссылки загрузки
Как уже объяснялось, одно из свойств, реализованных в WordPress 3.0 – это способность создавать или модифицировать фон своего сайта, будь то изображение или основной цвет, прямо при помощи внутреннего интерфейса WordPress. Что нужно нам для работы этого свойства? Эта коротенькая строчка кода:
| 1 2 | //Код поддержки пользовательского фона add_custom_background(); |
И таким образом, теперь подключаются пользовательские фоны. Далее мы собираемся добавить такой же простой код для того, чтобы везде на сайте были доступны важные ссылки. Будь это стандартный источник, комментарии, тэги, категории – все они будут добавлены в заголовок без дополнительного кода.
Давайте в functions.php добавим следующий код, чтобы это свойство заработало должным образом.
| 1 2 | //Включите ссылки загрузок RSS-читалок постов и комментариев add_theme_support( 'automatic-feed-links' ); |
Шаг 13 — Footer.php
Для окончания работы мы собираемся создать файл footer.php, который использует #footer, объявленный в style.css, а также будет содержать основную информацию о копирайте, а также ссылку на RSS-читалку историй и комментариев внизу страницы.
| 1 2 3 4 5 6 7 8 9 10 11 | <div id="footer"> <p> <strong>Copyright 2011 <?php bloginfo('name'); ?> | All Rights Reserved.</strong> </a> Designed by <a href="http://slackrmedia.com">SlackrMedia</a> </p> <p><a href="<?php bloginfo('rss2_url'); ?>">Latest Stories RSS</a> | <a href="<?php comments_rss_link('comment feed'); ?>">Comments RSS</a></p> </div> </div> </body> </html> |
Шаг 14 – Прочие свойства?
Вот пара свойств, не таких уж необходимых, но способных оказаться полезными. Сначала о том, как включить свойство мультисайтов для WordPress 3.0, чтобы можно было вести множество сайтов с одной установки WordPress. И снова нам нужно добавить в functions.php этот код.
| 1 2 | //Включить свойство мультисайт (WordPress 3.0) define('WP_ALLOW_MULTISITE', true); |
Заключение
Итак, что касается нашего учебника. К этому моменту вы успешно закодировали «с нуля» тему WordPress 3.0, обладающую всеми преимуществами самых популярных свойств, но достаточно маленькую, чтобы ее можно было модифицировать во что-то более графически впечатляющее.
Автор: Keenan Payne
Источник: http://www.onextrapixel.com/
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курс
Основы создания тем WordPress
Научитесь создавать мультиязычные темы с нестандартной структурой страниц
Смотреть
Спасибо за материал
Спасибо ребята, действительно классная тема
Отличная статья! Молодцы!
Все всем 5!
Блин я кокраз ввожусь, подстаиваюсь под уже сосществующие темы, немного меняя ксс, а мой диз так и стоит без реализации, ибо в пхп я 0.
А по статье сделал!!
Спасибо!
Cпасибо! Очень полезный материал!
Блоги — тема актуальная. Спасибо за статью!
Дочитал до этого места:
«становить на свой компьютер сервер,XAMPP или WAMP» — дальше читать не стал.
А что с Денвером сталось? Перестал работать?
А по стеме: в инете тем не одного нормального ВИДЕО УРОКА по зданию тем под ВП. Зато в инете есть куча гавна про верстку, хтмл, цсс и т.д. И вы туда же……..
Сделайте видео по верстке шаблона под ВП !!!
XAMPP или WAMP или денвер — это на любителя, я лично предпочитаю денвер, но XAMPP по мощнее будет
Согласен. Видео про создание тем был бы нагляднее.
Но альтернатив для нелюбителей кода, а любителей web дизайна всё же остаётся artisteer. У самого блог на этой машине сделан. Сколько не пытался грабить темы и перекодить, всё таки нудное это дело.
Вау! Долго писали такую «статейку»?
пост шикарен
Это перевод;)
Спасибо, очень пригодилась статья. Если даже и перевод — все равно отлично.
Всё гениальное просто. Спасибо за открывание «глаз».
С уважением Алексей.
IMHO вы не вправе требовать, чтобы я переустановил мой браузер, заходя на Ваш сайт. Если я чего-то не увижу, это мои проблемы, но заворачивать меня принудительно с сайта только потому что мой браузер якобы «устарел» — это уже слишком. Не создавайте неудобств для пользователей. Это правило Интернет маркетинга Номер Один.
спасибо — информация полезная
Тема установки WP действительно как то обходится всеми: училась в школе, так дали азы- как залить тему.Центрование,подгонка
так нужны…Пробовала установить готовую тему от Гудвина, так объяснения явно для опытных.Ну что, дерзнете дать тему установки WP комплексно?Ждем!
Причем совсем скоро;)
Да, неплохо бы учитывать, что некоторые русские программы типа Denwer не работают с иностранным софтом .
Конкретизируйте, пожалуйста, какой именно софт имеется в виду? Насколько знаю, Денвер — отличный сервер, который идеально подходит, скажем так, для «домашних нужд».
единственное с чем не работает денвер одновременно так это скайп
Да, кстати, раньше так и было, поскольку, если не изменяет память, занимали одинаковый порт. А сейчас заметил, что конфликта у меня уже не возникает — Денвер и скайп мирно сосуществуют ))
На человеческий варез залить никак чтоли, я в шоке от вашего народа!
С пятого раза скачал архив, вообще жесть!
По моему на народе нормально качается. За материал спасибо большое
Какой?
Спасибо, огромное!
Отличный материал.
Спасибо, за труды перевода, но , действительно, ребята, сделайте урок по верстке темы для ВП с ПСД. Ведь — такая статья будет куда интереснее!)))
Виктор,спасибо за статью.У меня к Вам вопрос, как вывести дату в index.php?
Дату статьи можно вывести, например, функцией the_date_xml() — просто вызовите ее в нужном месте.
Здравствуйте! У меня вот какой вопрос, мы объявили доктайп отличный от xhtml, все сделали , у нас валидация полная, а потом пишем пост, например, при использовании плагина tinymce advanced и к примеру вставили пустую строку — тут же появился тег br со слешем — и вся валидность рухнула, может уж и доктайп делать как всегда — xhtml?
Здравствуйте! Если валидность для Вас важна, то делайте, как всегда.
А вообще, лучший валидатор — это браузер
Да, в данной теме указан доктайп HTML 5. Вообще, что касается валидации — очень непростая задача сделать сложный сайт кроссбраузерно и чтобы он еще и прошел валидацию. Поэтому между валидностью и кроссбраузерностью выбирают всегда кроссбраузерность. Очень не многие сайты могут похвастаться зеленой полоской на валидаторе.
Здравствуйте Андрей Кудлай и Андрей Бернацкий! Большое вам спасибо и за ответ, и за то что ответили быстро, и за то, что не посмеялись над возможно забавными для вас моими вопросами, но для нас, новичков, любой пустяк вырастает в эверест. мечешься со своей проблемой — и даже размер ее оценить не можешь — и тут ваша бесценная помощь. А я давно заглядываю на ваш сайт, учусь, и очень вам благодарна.
Всегда пожалуйста
И Вам удачи в покорении вершин
Вопрос по Уроку 7 для Андрей Кудлай, одного из создателей видеокурса, там где переносили на wp блог путешественника.Или кто в курсе, подскажите.
Где взять стандартный код для index.php, Вы его ещё копировали на 30 мин. урока 7 из файла start.txt
Заранее спасибо!
В исходниках. Открываете header.php и копируете.
У меня вопрос тоже по созданию темы для блога на движок WordPress. Подскажите пожалуйста как реализовать вывод постов для такого макета kso.16mb.com/img.png.
За ранее благодарен за ответ
При помощи стилей задаете вывод контента не в 1 поток, а в 2. Например, каждый пост заключаете в блок с классом post. При ширине макета, к примеру, 1000 пикселей, блоку post задаете ширину пикселей 450 и свойство float:left (обтекание). После этого посты будут выводиться в 2 колонки.
Спасибо что откликнулись. Если объяснить поподробнее то смысл шаблона в том что свежая статья выводится в верху, а устаревшие выводятся ниже. Если не затруднит подкинуть пример кода. Можно даже на email.
За ранее благодарен за ответ.
Пожалуйста
А код я же уже расписал, весь смысл заключается в правильном оформлении статей в CSS. Просто для каждого блока с постом задается обтекание с расчетом, чтобы в каркас поместилось только 2 таких блока. Пример можно посмотреть в уроке — в этом уроке посты выводятся даже не в 2, а в 4 колонки.
Спасибо за предложение просмотреть урок по созданию интернет магазина. Но, Вы там выводите все посты в четыре колонки.
У меня ситуация следующая.
К примеру возьмем блок 650рх свежая запись идет в верху на всю ширину блока то есть 650рх, а устаревшие записи идут в две строки и две колонки по 300рх плюс margin-right:50px.
Вопрос состоял в следующем как вывести верхний блок 650рх и нижние.
За ранее благодарю за ответ.
Сергей, переносите Ваши вопросы на форум:
Спасибо буду пробовать
Я так понял, что Вы не можете помочь. Значит будем обращаться на форум что бы помогли другие
Так это наш форум. И суть не в том, что мы не можем Вам помочь, а в том, чтобы в комментариях не писать огромные «вопросы-ответы».
Поэтому переносите Ваше сообщение на форум и будьте терпимее. Прошу Вас.
Сергей, с таким отношением, складывается впечатление, что Вам кто-то что-то должен… просто пропадает желание помочь…
По теме: Ваш вопрос легко решается при помощи мультицикла. В первом цикле отбирается и выводится последний пост с нужным стилевым оформлением, во втором цикле — другие посты со своим оформлением, кроме последнего.
C каким отношением?
С моей стороны было хамство, я настаивал или просто попросил. Но Вы сочли это плохим отношением. А что говорить о Вашем отношении. Когда Вы посылаете на урок в котором и близко это не реализовано. Я считаю так, если ваша команда взялась за инфобизнес и делаете уроки для начинающих программистов, то доводите дело до конца с поддержкой. Не сочтите за хамство но я написал реальные действия вашей команды.
Вы можете не пропустить мой ответ Вам Андрей для общего рассмотрения, это решать Вам. Но в любом бизнесе надо доводить дело до конца.
С уважением Сергей
Сергей, спасибо за Ваше мнение, мы его учтем. Удачи Вами и успехов.
Нет, Вы не настаивали, Вы просто неизвестно с чего сделали вывод, что мы не в состоянии Вам помочь… это после двух моих ответов, решающих суть вопроса в том виде, как он был подан изначально.
Вы говорите: «Вы посылаете на урок в котором и близко это не реализовано»… это почему же? Изначально Ваше описание вопроса выглядело так: «Подскажите пожалуйста как реализовать вывод постов для такого макета». Далее следует скрин, где посты выведены в 2 колонки. Я дал ссылку на урок, где посты выведены в 4 колонки и рассказал, как их вывести в 2. Это разве не ответ?
И только после моей ссылки на урок (проследите еще раз последовательность комментариев, чтобы увидеть это) следует уточнение от Вас, что первым во всю ширину должен выводиться последний пост, а далее в 2 колонки — оставшиеся.
На этот вопрос Вам не дали мгновенный ответ… уж извините, но Вы не один, мы не можем работать над решением только Вашей проблемы. Ответ я Вам дал — необходимо использовать мультиязычный цикл… кстати, чем-то ответ не понравился этот, минусонули его… впрочем, как и предыдущие ответы мои и Виктора Вам…
Ну а на форум Вас попросил Виктор перенести вопрос, поскольку задача, хоть и простая, но неординарная и комментарии для ее решения мало подходят.
Вроде в вп есть обязательные пункты css, как выравневание по правому краю, по левому. Разве нет?
Спасибо за статью. Очень помогла.
А, что делает строка ?
Александр, в комментариях очень неудобно демонстрировать код. Насколько я понимаю, Ваш код из комментария был удален движком. Можете задать вопрос на , там без проблем можно выложить код.