Подключаем javascript с помощью произвольных полей

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

Скачать исходники для статьи можно ниже

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

Как же данный метод работает?

Давайте рассмотрим пример со скриптом (javascript), позволяющим создать простенькие часики.

Заходим в “Редактор записи” (чтобы его открыть заходим в панель управления вашим сайтом и в левом меню выбираем пункт “Записи”, далее нажимаем на название нужной записи и попадаем в “Редактор записи”).

Находим снизу в “Редакторе записи” окошко с названием “Произвольные поля”.

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

, жмем на ссылку “Добавить новое”, вводим имя и значения произвольного поля.
В поле “имя” я ввел – chasiki, а в поле “значение” следующий код:

<script type="text/javascript">
var d=document
var NN=d.layers?true:(window.opera&&!d.createComment)?true:false
function showTime(){
 var tmN=new Date()
 var dH=''+tmN.getHours();dH=dH.length<2?'0'+dH:dH
 var dM=''+tmN.getMinutes();dM=dM.length<2?'0'+dM:dM
 var dS=''+tmN.getSeconds();dS=dS.length<2?'0'+dS:dS
 var tmp=dH+':'+dM+':'+dS
 if(NN)d.F.chas.value=tmp;else d.getElementById('tm').innerHTML=tmp
 var t=setTimeout('showTime()',1000)
}
</script>
<div id=tm><form name="F"><input type="button" name="chas" value="XX:XX:XX"></form></div>
<script type="text/javascript">showTime()</script>

 

Далее жмем на кнопку “Добавить произвольное поле”.

Теперь для отображения произвольного поля мы должны вставить в любой из шаблонов темы нашего сайта (single.php, header.php, footer.php, page.php и др.) следующую строчку:

<?php echo (get_post_meta($post->ID, 'chasiki', true)); ?>

Рассмотрим пример вставки данной строчки в шаблон single.php (он отвечает за вывод записей в wordpress).

Для этого заходим в “Редактор” кода – открываем панель управления вашим сайтом и в левом меню выбрираем пункт “Внешний вид”, далее подпункт “Редактор” и справа в списке шаблонов выбираем файл single.php.

В открывшемся коде файла single.php вставляем в нужное место код вывода произвольного поля “chasiki”.

Например вот так выглядит код моего файла single.php после вставки в него кода вывода произвольного поля:

<?php get_header(); ?>
<div class="grid_11">
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

/* Код вывода заголовка записи */
<h1 class="entry-title"><?php the_title(); ?></h1>

/* Код вывода произвольного поля chasiki */
<?php echo (get_post_meta($post->ID, 'chasiki', true)); ?>

<div class="entry">
/* Код вывода контента записи */
<?php the_content(); ?>
<div class="clearfix"></div>
...

То есть я расположил вывод скрипта часиков между “Заголовком записи” и “Контентом данной записи”.

Посетители сайта при просмотре данной записи увидят следующее:

Теперь если вы хотите, чтобы часики отображались и на другой записи, вам нужно в “Редакторе” данной записи в окне “Произвольные поля” выбрать произвольное поле с именем chasiki (оно уже там создано), однако его “Значение” для данной записи будет пустым, поэтому вставляем в него опять javascript часиков.

PS: Если у вас возникли какие-либо вопросы по использованию произвольных полей в wordpress, советую также прочитать мою предыдущую статью: Произвольные поля WordPress: понятие, использование, создание.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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