Произвольные поля (custom fields) в Wordpress: зачем они нужны и как их использовать?

О чем речь?

Наверное многие видели блок “Произвольные поля” в Wordpress на странице добавления записи, но не все знают зачем он, собственно говоря, нужен. Я сам долго не обращал на него внимания, да и надобности узнать его предназначение не было. Но при разработке темы для сайта h1h1.ru мне потребовалось выводить в начале записи картинку и описание статьи. Стандартные функции Wordpress, такие как the_content() не позволяют это сделать. Функция the_content() просто выводит всю статью целиком.А на примере даже этой статьи вы можете заметить, что мне было необходимо вывести сначала картинку, потом введение, потом мета информацию (категорию, автора и т.д.) а уже потом контент.

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

Как видите, в этой статье сверху сначала идет заголовок, потом картинка по теме статьи ( если таковая отсутствует – автоматически загружается картинка по умолчанию), далее следует введение в статью, потом мета информация, а уже потом контент.

произвольные поля в wordpress

Но ведь когда вы пишете статью для своего блога в Wordpress – текстовое поле всего одно. Оно служит для добавления текста статьи и всё. Нет текстовых полей для добавления картинки или введения.
Можно, конечно, попробовать просто вставить в начале своего поста картинку, потом блок введение, но как вставить мета информацию (категорию, автора и т.д.)? Этот блок использует php функции встроенные в Wordpress и если вы просто пропишите php код в тексте новой записи, то он не будет работать. Можно, конечно скачать и установить плагин ‘exec-php’, который позволяет добавлять php код в текст статьи, но разве удобно какждый раз проделывать это для каждой новой записи?

Ближе к делу.

Гораздо удобнее создать себе 3 своих собственных формы для добавления новой записи в блог. Одну – для картинки, другую – для введения, а третью – для основного текста статьи (стандартное поле ввода новой записи в Wordpress). А сделать это можно с помощью произвольных полей.

Как видите, в блоке ‘Произвольные поля’, 2 текстовых поля- ‘Имя’ и ‘Значение’. О том, что это значит проще рассказать приводя примеры.
Мы будем выполнять пример с сайта h1h1.ru , так что сначала, как видите, на странице должна выводиться картинка.
Сначала ее нужно загрузить на сайт, для этого нажмите на иконку ‘Добавить картинку’ сверху от поля ввода новой записи.

произвльные поля в Wordpress

Не нужно вставлять ее в запись, просто сохраните изменения и запомните название картинки (например image.jpg), оно нам еще понадобится.

Теперь, в текстовом поле ‘имя’ (в блоке ‘Произвольные поля’) введите название поля, которое будет служить для добавления картинки. Это название вы придумываете сами. Я назову его ‘img’. А теперь, в поле значение, введите название картинки, которую вы только что загрузили (image.jpg).

Произвольные поля в Wordpress

Теперь нужно создать поля для блока ‘Ведение’. Для этого нажмите на кнопку ‘Добавить новое произвольное поле’, тем самым поле ‘img’ сохранится, и начните создавать новое. Здесь имя должно быть уже другим, например ‘text’, а значение – текст введения в статью.

Произвольные поля в Wordpress

И что с этим делать?

На данный момент мы создали и сохранили 2 произвольных поля – ‘img’ и ‘text’. Их значения сохранены в Wordpress, но как их вытащить на страницу?
Так как мы выполняем пример с сайта h1h1.ru – для начала нам нужно вывести на экран заголовок статьи. Для этого в файле single.php нужно прописать простую функцию the_title() и, в начале страницы, стандартные функции для идентифицирования статьи.
09

1
2
3
4
5

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
     <div class="single-post" id="post-<?php the_ID();?>" >
        <h1>
		<?php the_title(); ?>
	</h1>

После заголовка у нас следует картинка, для которой мы создали произвольное поле. Для вывода содержимого произвольных полей в Wordpress есть несколько функций. Мы будем использовать функцию get_post_meta().

Итак , для начала нужно запустить функцию и определить,с каким именно произвольным полем мы будем иметь дело. Для этого создаем переменную $image и засовываем в нее значение произвольного поля ‘img’ (в нашем случае эта переменная будет равна image.jpg):

<?php $image = get_post_meta($post->ID, 'img', $single = true); ?>

Как видите, после первой запятой, мы указали имя нашего произвольного поля. Значения остальных параметров функции для нас сейчас не очень важны, я использовал стандартные параметры, если вам интересно узнать о них, загляните на wordpress codex.

Далее пропишем, что, если у произвольного поля с именем ‘img’ есть значение,

<?php if($image !== '') { ?>

То следует достать это значение из папки uploads (куда мы предусмотрительно загрузили нашу картинку). Но, при загрузке файлов, Wordpress создает папки года и месяца их появления на сервере. То есть, если мы загрузили нашу картинку сегодня, в сентябре 2009-го, то путь к нашей картинке будет /wp-content/uploads/2009/09/image.jpg.
В wordpress есть замечательная функция the_time(), с помощью которой мы сможем генерировать динамическую часть пути к картинке (месяц и год имеют свойство изменяться) следующим образом:

<img src="/wp-content/uploads/<?php the_time('Y') ?>/<?php the_time('m') ?>/<?php echo $image; ?>" alt="картинка по теме"/>

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

1
2
3

<?php }  else { ?>  
<img src="/wp-content/themes/h1h1/i/noimage.png" alt="картинка по теме" />   
<?php } ?>

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

1
2
3
4
5
6
7

<?php $image = get_post_meta($post->ID, 'img', $single = true); ?>  
     <?php if($image !== '') { ?>
          <img src="/wp-content/uploads/<?php the_time('Y') ?>/<?php the_time('m') ?>/<?php echo $image; ?>" alt="картинка по теме"/>
     <?php }
     else { ?>
          <img src="/wp-content/themes/h1h1/i/noimage.png" alt="картинка по теме" />
     <?php } ?>

Теперь на очереди блок ‘Введение’.

Проделываем примерно всё тоже самое, только проще:

1
2
3
4
5
6
7

<p>
<?php if($text !== '') { ?>  
     <?php echo $text; ?>  
     <?php }  
     else { ?>  
     Здесь обычно находится введение в статью, где мы объясняем о чем она и чем она может вам помочь. Для этой статьи, к сожалению, не предусмотрено введение, вероятно, потому, что всё и так понятно из ее названия.    
     <?php } ?>

Далее, следуя примеру, выводим мета информацию и сам контент:

1
2
3
4
5
6
7
8
9
10

<ul>
<li><?php the_category(', ') ?></li>
<li><?php the_time('d/m/Y') ?></li>
<li><?php the_author(); ?></li>
<li><?php comments_popup_link(__('0'), __('1'), __('%'), '', __('X') ); ?></li>
<li><a href="<?php echo get_option('home'); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">на главную</a></li>
</ul>
<div class="main_text_wrap">
<?php the_content(); ?>
</div>

Вот и всё. Про всего лишь один пример использования произвольных полей. Если включить фантазию- можно добиться самых неожиданных интересных результатов! Надеюсь, эта статья поможет вам в разработке своих собственных креативных тем для wordpress.

Поделиться с общественностью на Твиттере.