Как «с нуля» кодировать тему WordPress 3.0

тема wordpress 3.0

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

тема wordpress 3.0

скачать исходники

Устанавливаем Work Station

Для начала работы с этим учебником нужно установить на свой компьютер сервер, используя XAMPP или WAMP (особенно если вы работаете на PC) или MAMP, если вы работаете на Mac’е. Эти инструменты дают возможность создать для WordPress локальную тестовую среду и сделать так, чтобы вам не приходилось во время работы над проектом постоянно пересылать файлы через FTP.

С точки зрения редактирования кода я особенно рекомендовал бы Notepad++. При наличии выделяемого синтаксиса, простого и легкого пользовательского интерфейса для кодирования, я утверждал бы, что он – мой личный любимчик (плюс нельзя отрицать того, что он бесплатный), но Notepad или Notepad 2 тоже будут работать хорошо.

Подготовка необходимых папок и файлов

В папке с установочным файлом своего WordPress’а перейдите к wp-content/themes/ и создайте папку с названием "New 3.0 Theme" (новая тема 3.0). Именно тут в течение работы с учебником мы будем держать все свои файлы. Теперь создайте следующие файлы и папки:

дерево папок

/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.

/*
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-файлах шаблона.

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, который в настоящий момент будет содержать логотип нашего вебсайта, а также пользовательскую навигацию.

header

<!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 и внести код, необходимый для активации пользовательских меню.

<?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.

<?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.

стили навигации

.nav{
    width:750px;
    background: #000;
    display:block;
    float:left;
    position:relative;
}
 
.nav ul{
    list-style:none;
}
 
.nav li{
    float:left;
    position:relative;
}

Как видно, в .nav мы сделали некоторые основные объявления, такие как ширина навигации, фон, в котором она будет выровнена, а также значение display. Далее мы назначаем стили основному неупорядоченному списку, просто убедившись, что маркеры абзаца с нашими ссылками не показываются. Для списка мы перемещаем пункты влево, а также располагаем их относительно.

Теперь закончим определение стилей навигации, добавив их к ссылкам и выпадающим меню.

.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).

<?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&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
                <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
                </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, куда бы вы ни поместили их в файлах темы.

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Кроме того, код здесь довольно прост для понимания. После вызова header.php мы пользуемся чуть ранее созданным #blog и вызываем цикл, применяемый для вывода последних постов в блог WordPress. После этого обертываем название своих постов в div, которому мы ранее также назначили стили.

Единственный фрагмент кода здесь, показывающий, как мы собираемся воспользоваться преимуществами свойства WordPress 3.0 размещать контрольные изображения – это … Оно означает, что данный код не будет делать ничего до тех пор, пока мы не активируем свойство в functions.php, что мы и проделаем в следующем шаге.

Шаг 6 – Активация «контролек» постов

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

Активация «контролек» постов

// Активируйте контрольные изображения постов
add_theme_support('post-thumbnails');
set_post_thumbnail_size(520, 250, true);

Код вверху поясняет сам себя, так как почти в точности разъясняет то, что выполняется. Вторая строка добавляет в нашу тему поддержку контрольных изображений постов, в то время как третья строка определяет точные размеры нашей контрольки, которые в этой статье установлены на ширину в 520 пикселей и высоту в 250 пикселей.

Шаг 7 — Sidebar.php

Как вы догадались, sidebar.php – это файл, который будет демонстрировать нужную нам информацию в боковой колонке. Так как мы уже включили файл в свой index.php, то все, что нужно сделать – это вставить в него код, и наша боковая колонка покажется на домашней странице.

<div class="sidebar">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
 
<?php endif; ?>
</div>

Да, это весь код, добавленный для функциональности sidebar.php. Мы вызываем div, созданный в style.css, а указанный внизу код даст возможность добавлять виджеты в боковую колонку в нужном порядке и нужным образом через прикладную часть WordPress’а. Однако, как со многими свойствами, нам приходится сначала модифицировать файл functions.php, чтобы это свойство работало нормально.

//Простой код для боковой колонки с виджетом
if ( function_exists('register_sidebar') )
    register_sidebar();

Код всего лишь указывает WordPress’у регистрировать боковую колонку, вызываемую нами в sidebar.php. WordPress довольно легко может создавать множество боковых колонок, если они вам нужны в количестве более одной, но ради сокращения этого и так уже длинного учебника, давайте дадим возможность Google’у ответить на вопрос о том, как это сделать.

Шаг 8 — Single.php

Single.php мы уже используем для отдельной страницы с постом, и большая часть кода должна выглядеть довольно похоже, так как мы уже кодировали index.php. На самом деле, отличие всего одно – мы добавили div шаблона комментариев и код для присоединения comments.php.

<?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&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
                <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
                </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 в шаблоне темы.

<?php comment_form(); ?>

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

Шаг 10 — Page.php

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

<?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&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
                <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
                </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, кроме фрагмента в самом начале.

категории

<?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 &#8216;<?php single_cat_title(); ?>&#8217; Category:</h2>
      <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
        <h2>Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</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&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
                <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
                </p>
 
            </div>
 
        </div>
 
<?php endwhile; ?>
 
    <div class="navigation">
        <?php posts_nav_link(); ?>
    </div>
 
<?php endif; ?>
 
</div>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

<?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 &#8216;<?php single_cat_title(); ?>&#8217; Category:</h2>
      <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
        <h2>Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</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. Что нужно нам для работы этого свойства? Эта коротенькая строчка кода:

фоны, ссылки загрузки

//Код поддержки пользовательского фона
add_custom_background();

И таким образом, теперь подключаются пользовательские фоны. Далее мы собираемся добавить такой же простой код для того, чтобы везде на сайте были доступны важные ссылки. Будь это стандартный источник, комментарии, тэги, категории – все они будут добавлены в заголовок без дополнительного кода.

Давайте в functions.php добавим следующий код, чтобы это свойство заработало должным образом.

//Включите ссылки загрузок RSS-читалок постов и комментариев 
add_theme_support( 'automatic-feed-links' );

Шаг 13 — Footer.php

Для окончания работы мы собираемся создать файл footer.php, который использует #footer, объявленный в style.css, а также будет содержать основную информацию о копирайте, а также ссылку на RSS-читалку историй и комментариев внизу страницы.

<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 этот код.

фоны, ссылки загрузки

//Включить свойство мультисайт (WordPress 3.0)
define('WP_ALLOW_MULTISITE', true);

Заключение

Итак, что касается нашего учебника. К этому моменту вы успешно закодировали «с нуля» тему WordPress 3.0, обладающую всеми преимуществами самых популярных свойств, но достаточно маленькую, чтобы ее можно было модифицировать во что-то более графически впечатляющее.

Автор: Keenan Payne

Источник: http://www.onextrapixel.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (52)

  1. Андрей

    Спасибо за материал

  2. Арман

    Спасибо ребята, действительно классная тема

  3. Артур

    Отличная статья! Молодцы!

  4. Вадим

    Все всем 5! :)
    Блин я кокраз ввожусь, подстаиваюсь под уже сосществующие темы, немного меняя ксс, а мой диз так и стоит без реализации, ибо в пхп я 0.

    А по статье сделал!!
    Спасибо!

  5. Николай

    Cпасибо! Очень полезный материал!

  6. Игорь

    Блоги — тема актуальная. Спасибо за статью!

  7. Алексей

    Дочитал до этого места:
    «становить на свой компьютер сервер,XAMPP или WAMP» — дальше читать не стал.
    А что с Денвером сталось? Перестал работать?

    А по стеме: в инете тем не одного нормального ВИДЕО УРОКА по зданию тем под ВП. Зато в инете есть куча гавна про верстку, хтмл, цсс и т.д. И вы туда же……..
    Сделайте видео по верстке шаблона под ВП !!!

    • aka_voly

      XAMPP или WAMP или денвер — это на любителя, я лично предпочитаю денвер, но XAMPP по мощнее будет

    • Роман

      Согласен. Видео про создание тем был бы нагляднее.

      Но альтернатив для нелюбителей кода, а любителей web дизайна всё же остаётся artisteer. У самого блог на этой машине сделан. Сколько не пытался грабить темы и перекодить, всё таки нудное это дело.

  8. Павка

    Вау! Долго писали такую «статейку»?
    пост шикарен

  9. eugene_lit

    Спасибо, очень пригодилась статья. Если даже и перевод — все равно отлично.

  10. Алексей

    Всё гениальное просто. Спасибо за открывание «глаз».
    С уважением Алексей.

  11. Alex

    IMHO вы не вправе требовать, чтобы я переустановил мой браузер, заходя на Ваш сайт. Если я чего-то не увижу, это мои проблемы, но заворачивать меня принудительно с сайта только потому что мой браузер якобы «устарел» — это уже слишком. Не создавайте неудобств для пользователей. Это правило Интернет маркетинга Номер Один.

  12. Юрий

    спасибо — информация полезная

  13. Natalia

    Тема установки WP действительно как то обходится всеми: училась в школе, так дали азы- как залить тему.Центрование,подгонка
    так нужны…Пробовала установить готовую тему от Гудвина, так объяснения явно для опытных.Ну что, дерзнете дать тему установки WP комплексно?Ждем!

  14. Natalia

    Да, неплохо бы учитывать, что некоторые русские программы типа Denwer не работают с иностранным софтом .

    • Андрей Кудлай

      Конкретизируйте, пожалуйста, какой именно софт имеется в виду? Насколько знаю, Денвер — отличный сервер, который идеально подходит, скажем так, для «домашних нужд».

      • refer9

        единственное с чем не работает денвер одновременно так это скайп

        • Андрей Кудлай

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

  15. Kirill

    На человеческий варез залить никак чтоли, я в шоке от вашего народа!

  16. harry

    Спасибо, огромное!
    Отличный материал.

  17. Александр

    Спасибо, за труды перевода, но , действительно, ребята, сделайте урок по верстке темы для ВП с ПСД. Ведь — такая статья будет куда интереснее!)))

  18. Иван

    Виктор,спасибо за статью.У меня к Вам вопрос, как вывести дату в index.php?

    • Андрей Кудлай

      Дату статьи можно вывести, например, функцией the_date_xml() — просто вызовите ее в нужном месте.

  19. Вера

    Здравствуйте! У меня вот какой вопрос, мы объявили доктайп отличный от xhtml, все сделали , у нас валидация полная, а потом пишем пост, например, при использовании плагина tinymce advanced и к примеру вставили пустую строку — тут же появился тег br со слешем — и вся валидность рухнула, может уж и доктайп делать как всегда — xhtml?

    • Андрей Кудлай

      Здравствуйте! Если валидность для Вас важна, то делайте, как всегда.
      А вообще, лучший валидатор — это браузер :)

    • Andrey Bernacki

      Да, в данной теме указан доктайп HTML 5. Вообще, что касается валидации — очень непростая задача сделать сложный сайт кроссбраузерно и чтобы он еще и прошел валидацию. Поэтому между валидностью и кроссбраузерностью выбирают всегда кроссбраузерность. Очень не многие сайты могут похвастаться зеленой полоской на валидаторе.

  20. Вера

    Здравствуйте Андрей Кудлай и Андрей Бернацкий! Большое вам спасибо и за ответ, и за то что ответили быстро, и за то, что не посмеялись над возможно забавными для вас моими вопросами, но для нас, новичков, любой пустяк вырастает в эверест. мечешься со своей проблемой — и даже размер ее оценить не можешь — и тут ваша бесценная помощь. А я давно заглядываю на ваш сайт, учусь, и очень вам благодарна.

  21. Данил

    Вопрос по Уроку 7 для Андрей Кудлай, одного из создателей видеокурса, там где переносили на wp блог путешественника.Или кто в курсе, подскажите.
    Где взять стандартный код для index.php, Вы его ещё копировали на 30 мин. урока 7 из файла start.txt
    Заранее спасибо!

  22. Сергей

    У меня вопрос тоже по созданию темы для блога на движок WordPress. Подскажите пожалуйста как реализовать вывод постов для такого макета kso.16mb.com/img.png.
    За ранее благодарен за ответ

    • Андрей Кудлай

      При помощи стилей задаете вывод контента не в 1 поток, а в 2. Например, каждый пост заключаете в блок с классом post. При ширине макета, к примеру, 1000 пикселей, блоку post задаете ширину пикселей 450 и свойство float:left (обтекание). После этого посты будут выводиться в 2 колонки.

      • Сергей

        Спасибо что откликнулись. Если объяснить поподробнее то смысл шаблона в том что свежая статья выводится в верху, а устаревшие выводятся ниже. Если не затруднит подкинуть пример кода. Можно даже на email.
        За ранее благодарен за ответ.

        • Андрей Кудлай

          Пожалуйста :)
          А код я же уже расписал, весь смысл заключается в правильном оформлении статей в CSS. Просто для каждого блока с постом задается обтекание с расчетом, чтобы в каркас поместилось только 2 таких блока. Пример можно посмотреть в уроке http://webformyself.com/sozdanie-internet-magazina-na-cms-wordpress-ustanovka-maketa-na-wordpress/ — в этом уроке посты выводятся даже не в 2, а в 4 колонки.

          • Сергей

            Спасибо за предложение просмотреть урок по созданию интернет магазина. Но, Вы там выводите все посты в четыре колонки.
            У меня ситуация следующая.
            К примеру возьмем блок 650рх свежая запись идет в верху на всю ширину блока то есть 650рх, а устаревшие записи идут в две строки и две колонки по 300рх плюс margin-right:50px.
            Вопрос состоял в следующем как вывести верхний блок 650рх и нижние.
            За ранее благодарю за ответ.

          • Виктор Рог

            Сергей, переносите Ваши вопросы на форум: http://webformyself.com/forum/

  23. Сергей

    Спасибо буду пробовать

  24. Сергей

    Я так понял, что Вы не можете помочь. Значит будем обращаться на форум что бы помогли другие

    • Виктор Рог

      Так это наш форум. И суть не в том, что мы не можем Вам помочь, а в том, чтобы в комментариях не писать огромные «вопросы-ответы».
      Поэтому переносите Ваше сообщение на форум и будьте терпимее. Прошу Вас.

    • Андрей Кудлай

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

      • Сергей

        C каким отношением?
        С моей стороны было хамство, я настаивал или просто попросил. Но Вы сочли это плохим отношением. А что говорить о Вашем отношении. Когда Вы посылаете на урок в котором и близко это не реализовано. Я считаю так, если ваша команда взялась за инфобизнес и делаете уроки для начинающих программистов, то доводите дело до конца с поддержкой. Не сочтите за хамство но я написал реальные действия вашей команды.
        Вы можете не пропустить мой ответ Вам Андрей для общего рассмотрения, это решать Вам. Но в любом бизнесе надо доводить дело до конца.
        С уважением Сергей

        • Виктор Рог

          Сергей, спасибо за Ваше мнение, мы его учтем. Удачи Вами и успехов.

        • Андрей Кудлай

          Нет, Вы не настаивали, Вы просто неизвестно с чего сделали вывод, что мы не в состоянии Вам помочь… это после двух моих ответов, решающих суть вопроса в том виде, как он был подан изначально.
          Вы говорите: «Вы посылаете на урок в котором и близко это не реализовано»… это почему же? Изначально Ваше описание вопроса выглядело так: «Подскажите пожалуйста как реализовать вывод постов для такого макета». Далее следует скрин, где посты выведены в 2 колонки. Я дал ссылку на урок, где посты выведены в 4 колонки и рассказал, как их вывести в 2. Это разве не ответ?
          И только после моей ссылки на урок (проследите еще раз последовательность комментариев, чтобы увидеть это) следует уточнение от Вас, что первым во всю ширину должен выводиться последний пост, а далее в 2 колонки — оставшиеся.
          На этот вопрос Вам не дали мгновенный ответ… уж извините, но Вы не один, мы не можем работать над решением только Вашей проблемы. Ответ я Вам дал — необходимо использовать мультиязычный цикл… кстати, чем-то ответ не понравился этот, минусонули его… впрочем, как и предыдущие ответы мои и Виктора Вам…
          Ну а на форум Вас попросил Виктор перенести вопрос, поскольку задача, хоть и простая, но неординарная и комментарии для ее решения мало подходят.

  25. sergey

    Вроде в вп есть обязательные пункты css, как выравневание по правому краю, по левому. Разве нет?

  26. Александр

    Спасибо за статью. Очень помогла.
    А, что делает строка ?

    • Андрей Кудлай

      Александр, в комментариях очень неудобно демонстрировать код. Насколько я понимаю, Ваш код из комментария был удален движком. Можете задать вопрос на форуме, там без проблем можно выложить код.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree