Продвинутое использование Произвольных полей

Май 2nd, 2010 | От Aleksey Davlad | Категория: CMS WORDPRESS, ХАКИ

Этот пост - свободное изложение статьи в Smashing Magazine - Extend WordPress With Custom Fields. Некоторые примеры я убрал, оставил только интересные и всего 2. Именно они заслуживают уважения! В порядке изложения:

1. Нужно изменить дизайн вывода тайтлов ( названий ) постов.

Решение: в шаблонах, где это необходимо сделать ( index.php, archive.php, category.php и т.д. ) заменить стандартный код вывода названий на приведенный ниже :

1
2
3
4
5
6
7

<?php $post_title = get_post_meta($post->ID, 'Post-Title', true);
if ($post_title) {
?>
<h2><?php echo $post_title; ?></h2>
<?php } else { ?>
<h2><?php the_title(); ?></h2>
<?php } ?>

Тогда через произвольное поле с ключом post-title вставляя ссылку на пост Вы сможете использовать в названии ссылки теги HTML. Можно навернуть красивые варианты: от изменения шрифтов, цвета до картинок ( рис.1).

2. Нужно изменить дизайн поста или фон сайта при выводе постов.

Фича посложней, но и интересней. Начиная с WordPress 2.7 введена функция post_class. Это позволяет применять специальные классы CSS постов (что позволяет создать уникальный дизайн). Можно пойти дальше - и менять фон сайта под пост на какой то тематический. Например - пост о Дне Победы, фон - Георгиевская лента и т.д.

Решение по изменению дизайна поста:

Во-первых, откройте файл functions.php, и добавьте следующий код:

1
2
3
4
5
6
7
8
9

function shiftnews_post_class($classes) {
   global $post;
   $sn_post_class_array = array (
      get_the_author_meta('display_name'),
      get_post_meta($post->ID, 'post-class', true)
   );
   $classes[] = implode(" ", $sn_post_class_array);
   return $classes;
}

Во - вторых, добавьте в single.php в DIV который выводит содержание поста. Используя ключ post-class, и прописанные в стилях разные дизайны flower-bg и blue-content, выбираете в каком стиле выводить пост, вставляя значения или .flower-bg или .blue-content ( рис.2 ):

Решение по изменению фона сайта под пост:

Простой способ: загрузить картинку размером, например, 1920х1200, а затем изменить код в header.php на следующий:

1
2
3
4
5
6
7

<?php if (is_page() || is_single()) {
<?php $background = get_post_meta($post->ID, 'background', true);
if ($background) {
?>
<style type="text/css">body{ url(<?php echo $background; ?>) no-repeat fixed; }</style>
<?php }
}?>

Способ посложнее: Код немного другой, используется скрипт timthumb, которій ресайзит картинку до нужного нам размера:

1
2
3
4
5
6
7

<?php if (is_page() || is_single()) {
<?php $background = get_post_meta($post->ID, 'background', true);
if ($background) {
?>
<style type="text/css">background: url(<?php bloginfo('template_url'); ?>/timthumb/timthumb.php?w=1920&zc=1&src=<?php echo $background; ?>) fixed no-repeat;</style>
<?php }
}?>

Остальные варианты на Smashing Magazine, прочитайте. Сложностей быть не должно.

2 комментариев
Комментарии статьи »

  1. blaga Май 2nd, 2010 5:44 :

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

  2. Aleksey Davlad Май 2nd, 2010 10:15 :

    Можно, но не очень легко. Да и не нужно вовсе менять функционал. В произвольных полях можно прописывать не только картинки, а все что угодно. Все зависит от кода, где они используются. Картинки - это 10% от возможных вариантов применения ПП. Зачем убивать 90% возможностей? Даже в этом посте из 3 примеров, всего один - это картинки!

Комментарии статьи