Подключаем javascript с помощью индивидуального шаблона

Здесь предлагаю вам рассмотреть еще один способ подключения javascript в WordPress.

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

Что такое индивидуальный шаблон можно прочитать в моей предыдущей статье: Индивидуальный шаблон страниц в WordPress: понятие, использование, создание, редактирование.

Для примера, приведенного ниже я буду использовать тему под названием “Europe”, данная тема есть на wordpress.org, поэтому чтобы ее установить или скачать достаточно в панели вашего сайта выбрать в левом меню пункт “Внешний вид”, далее подпункт “Темы оформления”, перейти на закладку “Установка тем оформления” и в строке поиска ввести Europe.

Приступим!

Создаем индивидуальный шаблон страницы, например на основе файла page.php темы и получаем приблизительно следующее:

<?php
/*
Template Name: moishablon
*/
?>
<?php get_header(); ?>
	<div class="grid_11">
      <div id="content">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h1 class="entry-title"><?php the_title(); ?></h1>
			<div class="entry">
				<?php the_content('Continue reading &rarr;'); ?>
				<div class="clearfix"></div>

				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

			</div>
		</div>
		<?php endwhile; endif; ?>
	 <?php edit_post_link('Edit', '<p>', '</p>'); ?>
	 <?php comments_template( '', true ); ?>
	 </div>
	</div>

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

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

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

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

<?php
/*
Template Name: moishablon
*/
?>
<?php get_header(); ?>
<div class="grid_11">
<div id="content">


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

</div>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Как видите я оставил шапку, сайдбар и подвал на страничке.

Также я оставил два блока:

<div class="grid_11">
<div id="content">
...
</div>
</div>

Они нужны для того, чтобы сохранить структуру сайта (сайдбар будет располагаться правильно).

В результате у меня получилось следующее:

А если бы я не оставил два вышеуказанных блока, то получил бы следующее:

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

<?php
/*
Template Name: moishablon
*/
?>
<?php get_header(); ?>


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


<?php get_footer(); ?>

А сайт будет выглядеть следующим образом:

То есть сразу после шапки идет скрипт и после него подвал (футер).

Однако, javascript можно вставить в любое место в коде индивидуального шаблона.
Например, чтобы вставить часики между названием статьи и его контентом, нужно сделать так:

<?php
/*
Template Name: moishablon
*/
?>
<?php get_header(); ?>
	<div class="grid_11">
      <div id="content">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h1 class="entry-title"><?php the_title(); ?></h1>


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


			<div class="entry">
				<?php the_content('Continue reading &rarr;'); ?>
				<div class="clearfix"></div>

				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

			</div>
		</div>
		<?php endwhile; endif; ?>
	 <?php edit_post_link('Edit', '<p>', '</p>'); ?>
	 <?php comments_template( '', true ); ?>
	 </div>
	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

И выглядеть это будет следующим образом: