WordPress. 10 полезных приемов разработки

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

В этой статье, мы собрали 10 полезных кодовых сниппетов, хаков и советов WordPress, которые помогут вам создать уникальную WordPress-тему, не похожую на остальные.

1. Индивидуальная стилизация записей

Проблема

В вашем блоге есть множество записей, но все они разного типа. Для того чтобы назначить специальный стиль одной или множеству записей, вы можете использовать возможности функции post_class() и ID записи.

Решение

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

<?php if (have_posts()) : ?>  
<?php while (have_posts()) : the_post(); ?>  
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">  
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>  
<?php the_content(); ?>  
</div>  
<?php endwhile; else: ?>  
<?php _e('Sorry, no posts matched your criteria.'); ?>  
<?php endif; ?>  

Разъяснение

Самая важная часть распложена в третьей строке. Здесь, мы добавляем PHP-функцию post_class(). Представленная в WordPress 2.8, эта функция добавляет CSS-классы к записи. Например, она может добавить:

• .hentry
• .sticky
• .category-tutorials
• .tag-wordpress

Благодаря этим CSS-классам, мы легко сможете назначить персональный стиль для всех записей с тэгом sticky, или для записей из рубрики tutorials.

Другая, важная часть кода это: id="post-<?php the_ID(); ?>”. С помощью отображения ID записи, мы можем назначить специальный стиль для конкретной статьи, следующим образом:

#post-876{  
    background:#ccc;  
}  

2. Отображение похожих записей.. с миниатюрами!

Проблема

После прочтения вашей последней записи, что обычно делают читатели? Очень просто: большинство из них просто уходят. Но существует замечательный способ заинтересовать их – отобразить список похожих записей. Множество плагинов могут реализовать такую задачу, но для тех, кому интересно как это работает, далее небольшой пример кода, для получения последних записей и их миниатюр.

Решение

Просто вставьте следующий код, после функции the_content(), в вашем файле single.php:

<?php  
$original_post = $post;  
$tags = wp_get_post_tags($post->ID);  
if ($tags) {  
  echo '<h2>Related Posts</h2>';  
  $first_tag = $tags[0]->term_id;  
  $args=array(  
    'tag__in' => array($first_tag),  
    'post__not_in' => array($post->ID),  
    'showposts'=>4,  
    'caller_get_posts'=>1  
   );  
  $my_query = new WP_Query($args);  
  if( $my_query->have_posts() ) {  
    echo "<ul>";  
    while ($my_query->have_posts()) : $my_query->the_post(); ?>  
      <li><img src="<?php bloginfo('template_directory'); ?>/timthumb/timthumb.php?src=<?php echo get_post_meta($post->ID, "post-img", true); ?>&h=40&w=40&zc=1" alt="" /><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>  
    <?php endwhile;  
    echo "</ul>";  
  }  
}  
$post = $original_post;  
wp_reset_query();  
?>  

Разъяснение

Сначала, этот код использует TimbThumb, PHP-скрипт, для ресайза картинок. Мы используем его для автоматического ресайза картинок, до размера 40 на 40 пикселей.

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

Кроме этого, обратите внимание, что я клонировал переменную $post, в начале скрипта, и восстановил ее в конце. Это сделано для предотвращения возможных проблем с циклом, таких как появление комментариев, не соответствующих текущей статье.

3. Альтернативная стилизация записей на домашней странице

Проблема

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

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

Решение

Здесь, вы видите простой цикл, который особым образом отображает первые три записи. Вы смело можете заменить существующих цикл в вашем файле index.php на этот код.

<?php  
$postnum = 0;  
while (have_posts()) : the_post(); ?>  
  
<?php if ($postnum <= 2){ ?>  
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">  
  <div class="date"><span><?php the_time('M j') ?></span></div>  
    <h2>(<?php echo $postnum;?>)<a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>  
    <div class="post-image" style="text-align:center;">  
        <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory' ); ?>/timthumb.php?src=<?php  echo catch_that_image(); ?>&amp;w=500&amp;h=200&amp;zc=1" alt="<?php the_title(); ?>" /></a>  
    </div>  
    <p><?php the_content('Read the rest of this entry &raquo;'); ?></p>  
    <p class="more"><a href="#">Read More</a></p>  
  </div>  
</div>  
  
<?php } else {  
<div <?php post_class( 'single ' . $end ); ?> id="post-<?php the_ID(); ?>">  
    <div class="post-content">  
        <h3><a href="<?php the_permalink() ?>">(<?php echo $postnum; ?>)<?php the_title(); ?></a> <?php edit_post_link('_', '', ''); ?></h3>  
        <p><?php the_excerpt( '' ); ?></p>  
        <p class="more"><a href="#">Read More ?</a></p>  
    </div>  
</div><!-- End post -->  
  
<?php }
    $postnum++;  
    endwhile;  
    ?>  

Разъяснение

Ничего трудного здесь нет! Мы просто создали PHP-переменную, с именем $postnum, которая вызывается в конце цикла. Если значение $postnum меньше или равно 3, то запись отображается в полном виде. В другом случае, она выводится в более компактной форме.

4. Использование множественных циклов

Проблема

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

Решение

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

// First loop (get the last 3 posts in the "featured" category)  
<?php query_posts('category_name=featured&showposts=3'); ?>  
<?php while (have_posts()) : the_post(); ?>  
  <!-- Do stuff... -->  
<?php endwhile;?>  
  
//loop reset  
<?php rewind_posts(); ?>  
  
//Second loop (Get all posts)  
<?php while (have_posts()) : the_post(); ?>  
  <!-- Do stuff... -->  
<?php endwhile; ?>  

Разъяснение

Этот фрагмент кода не использует хаков; rewind_posts() – это стандартная функция WordPress.

Цель функции rewind_posts() – «очистить», ранее использовавшийся цикл (как наш первый цикл, в примере выше), позволив вам использовать второй цикл, не зависящий от результатов первого.

5. Изменяем заголовки записей

Проблема

Функция the_title() является базовой, но очень полезной функцией WordPress: она отображает заголовок записи или страницы. Ни больше, не меньше. Но, вы хотели бы иметь возможность, давать записи два заголовка? Один выводить в списке записей на главной странице, а другой на персональной странице этой записи. Если да, то смотрите, как просто это сделать.

Решение

В файле single.php, найдите вызов функции the_title() и замените ее следующим кодом:

<?php $title = get_post_meta($post->ID, "custom-title", true);  
if ($title != "") {  
    echo "<h1>".$title."</h1>";  
} else { ?>  
    <h1><?php the_title(); ?></h1>  
<?php } ?>  

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

Разъяснение

Когда этот код загружается, он получает мета-поле под названием custom-title. Если такое мета-поле существует и оно не пустое, то отображается заголовок записи в виде значения этого поля. В другом случае, вызывается функция the_title(), и отображается обычный заголовок записи.

6. Добавляем несколько сайдбаров

Проблема

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

Решение

Чтобы использовать этот хак, скопируйте ваш файл sidebar.php и заполните его нужной вам информацией. Сохраните его под любым именем, например sidebar-whatever.php

После этого, откройте файл single.php, и найдите вызов функции get_sidebar():

<?php get_sidebar(); ?>  

Замените ее на следующий код:

<?php $sidebar = get_post_meta($post->ID, "sidebar", true);  
get_sidebar($sidebar);  
?>  

Теперь, во время создания новой статьи, создайте произвольное поле под названием sidebar. Установите его значение в качестве имени сайдбара, который вы хотите использовать. Например, если значение поля right, WordPress автоматически включит в шаблон файл sidebar-right.php, в качестве сайдбара.

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

*То же самое можно сделать и с шаблоном page.php.

Разъяснение

Этот прием очень простой. Сначала мы должны проверить произвольное поле с именем sidebar, и получить его значение в качестве переменной. Затем, эта переменная используется в качестве параметра к функции WordPress get_sidebar(), которая позволяет нам указать, какой именно файл мы будем использовать в качестве сайдбара.

7. Отображение контента только для зарегистрированных пользователей

Проблема

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

Решение

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

function member_check_shortcode($atts, $content = null) {  
  if (is_user_logged_in() && !is_null($content) && !is_feed()) {  
    return $content;  
  } else {  
    return 'Sorry, this part is only available to our members. Click here to become a member!';  
}  
  
add_shortcode('member', 'member_check_shortcode');  

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

[member]  
Этот текст будет доступен только для зарегистрированных пользователей.
[/member]  

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

Разъяснение

Сначала мы создаем функцию под названием member_check_shortcode, которая проверяет, авторизован ли текущий пользователь. Если он авторизован, то текст, заключенные в шорткоде [member] будет отображен. В другом случае, будет отображено сообщение, расположенное в строке 5.

8. Отображение популярного контента в сайдбаре

Проблема

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

Решение

Этот код очень просто использовать. Просто вставьте его в любом месте шаблона, там, где хотите видеть список популярных записей. Чтобы увеличить или уменьшить число возвращаемых записей (в примере их 5), просто измените значение SQL-условия LIMIT, в строке 3.

<h2>Popular Posts</h2>  
<ul>  
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");  
foreach ($result as $post) {  
setup_postdata($post);  
$postid = $post->ID;  
$title = $post->post_title;  
$commentcount = $post->comment_count;  
if ($commentcount != 0) { ?>  
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">  
  
<?php echo $title ?></a> {<?php echo $commentcount ?>}</li>  
<?php } } ?>  
</ul>  

Разъяснение

В этом коде, мы используем объект $wpdb для отправки специального SQL-запроса к базе данных WordPress. Затем мы проверяем, что результат не пустой (то есть, что нет записей без комментариев) и наконец, отображаем список записей.

9. Создаем выпадающее меню для удобной навигации по меткам

Проблема

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

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

Решение

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

<?php  
function dropdown_tag_cloud( $args = '' ) {  
    $defaults = array(  
        'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,  
        'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC',  
        'exclude' => '', 'include' => ''  
    );  
    $args = wp_parse_args( $args, $defaults );  
  
    $tags = get_tags( array_merge($args, array('orderby' => 'count', 'order' => 'DESC')) ); // Always query top tags  
  
    if ( emptyempty($tags) )  
        return;  
  
    $return = dropdown_generate_tag_cloud( $tags, $args ); // Here's where those top tags get sorted according to $args  
    if ( is_wp_error( $return ) )  
        return false;  
    else  
        echo apply_filters( 'dropdown_tag_cloud', $return, $args );  
}  
  
function dropdown_generate_tag_cloud( $tags, $args = '' ) {  
    global $wp_rewrite;  
    $defaults = array(  
        'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,  
        'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC'  
    );  
    $args = wp_parse_args( $args, $defaults );  
    extract($args);  
  
    if ( !$tags )  
        return;  
    $counts = $tag_links = array();  
    foreach ( (array) $tags as $tag ) {  
        $counts[$tag->name] = $tag->count;  
        $tag_links[$tag->name] = get_tag_link( $tag->term_id );  
        if ( is_wp_error( $tag_links[$tag->name] ) )  
            return $tag_links[$tag->name];  
        $tag_ids[$tag->name] = $tag->term_id;  
    }  
  
    $min_count = min($counts);  
    $spread = max($counts) - $min_count;  
    if ( $spread <= 0 )  
        $spread = 1;  
    $font_spread = $largest - $smallest;  
    if ( $font_spread <= 0 )  
        $font_spread = 1;  
    $font_step = $font_spread / $spread;  
  
    // SQL cannot save you; this is a second (potentially different) sort on a subset of data.  
    if ( 'name' == $orderby )  
        uksort($counts, 'strnatcasecmp');  
    else  
        asort($counts);  
  
    if ( 'DESC' == $order )  
        $counts = array_reverse( $counts, true );  
  
    $a = array();  
  
    $rel = ( is_object($wp_rewrite) && $wp_rewrite->using_permalinks() ) ? ' rel="tag"' : '';  
  
    foreach ( $counts as $tag => $count ) {  
        $tag_id = $tag_ids[$tag];  
        $tag_link = clean_url($tag_links[$tag]);  
        $tag = str_replace(' ', '&nbsp;', wp_specialchars( $tag ));  
        $a[] = "\t<option value='$tag_link'>$tag ($count)</option>";  
    }  
  
        switch ( $format ) :  
    case 'array' :  
        $return =& $a;  
        break;  
    case 'list' :  
        $return = "<ul class='wp-tag-cloud'>\n\t<li>";  
        $return .= join("</li>\n\t<li>", $a);  
        $return .= "</li>\n</ul>\n";  
        break;  
    default :  
        $return = join("\n", $a);  
        break;  
    endswitch;  
  
    return apply_filters( 'dropdown_generate_tag_cloud', $return, $tags, $args );  
}  
?>  

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

<select name="tag-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">  
    <option value="#">Liste d'auteurs</option>  
    <?php dropdown_tag_cloud('number=0&order=asc'); ?>  
  
</select>  

Разъяснение

Для этого хака, мы берем функцию WordPress wp_tag_cloud() и переписываем ее так, чтобы она отображала метки в HTML-элементе <select>.

Затем, мы просто вызываем в нашей теме недавно созданную функцию dropdown_tag_cloud(), для отображения выпадающего списка меток.

10. Автоматический ресайз картинок с помощью Tim Thumb и шорткодов WordPress

Проблема

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

Но картинки могут причинить множество неудобств, особенно когда они разного размера. А как насчет создания шорткода WordPress, который будет использовать Timthumb для автоматического ресайза картинок?

Решение

Сначала создадим шорткод. Вставьте следующий код в файл functions.php:

function imageresizer( $atts, $content = null ) {  
    return '<img src="http://media1.smashingmagazine.com/wp-content/uploads/2009/10//timthumb/timthumb.php?src='.$content.'&w=590" alt="" />';  
}  
  
add_shortcode('img', 'imageresizer');  

Теперь вы можете использовать следующий синтаксис для добавления автоматического ресайза к изображениям ваших статей:

[img]http://www.yoursite.com/yourimage.jpg [/img]  

Разъяснение

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

TimThumb ресайзит картинку до 590 пикселей по ширине, как указано в строке 2 (w=590). Конечно, вы можете изменить это значение и добавить параметр высоты (т.е. h=60).

Перевод статьи «10 Useful WordPress Coding Techniques», автор Jean-Baptiste Jung.