Подключение javascript в плагине wordpress (вызов php функции)

как подключить javascript в плагине

Здравствуйте, сегодня продолжим создание wordpress плагина и в данной статье рассмотрим подключение к плагину javascript, а также рассмотрим как заставить работать (вызвать) PHP функцию, которая описана в javascript.

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

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

function checklength(i){
    if (i<10)
        {i="0"+i;}
    return i;
}
function clock(){
    var now = new Date();
    var hours = checklength(now.getHours());
    var minutes = checklength(now.getMinutes());
    var seconds = checklength(now.getSeconds());
    var format = 1;  //0=24 hour format, 1=12 hour format
    var time;

    if (format == 1){
        if (hours >= 12){
            if (hours ==12){
                hours = 12;
            }else {
                hours = hours-12;
            }
            time=hours+':'+minutes+':'+seconds+' PM';
        }else if(hours < 12){
            if (hours ==0){
                hours=12;
            }
            time=hours+':'+minutes+':'+seconds+' AM';
        }
    }
    if (format == 0){
        time= hours+':'+minutes+':'+seconds;
    }
     document.getElementById("clock").innerHTML=time;
    setTimeout("clock();", 500);
}

1. Создаем файл moijs.js

Для этого воспользуемся бесплатным редактором кода Notepad++, открываем его и вставляем вышеуказанный код часов и сохраняем его как moijs.js

2. Далее создадим главный файл плагина — например назовем его — pluginjs.php

Также открываем Notepad++, создаем в нем новый файл и вставляем следующий код (за основу возьмем мою предыдущую статью — Создаем простой плагин wordpress: mnogoblogplugin — в ней вы узнаете «что к чему»):

<?php
/*
Plugin Name: mnogoblogplugin
Plugin URI: http://mnogoblog.ru/sozdaem-prostoj-plagin-wordpress
Description: Преобразует в каждом слове заголовка первую букву из прописной в заглавную.
Version: 1.0
Author: Mnogoblog
Author URI: http://mnogoblog.ru
*/


add_action('init','ava_test_init');

function ava_test_init() {
    wp_enqueue_script( 'moijs', plugins_url( '/moijs.js', __FILE__ ));
}
?>

В вышеуказанном коде мы просто зарегистрировали новый javascript, привязали его к хуку init и указали путь до файла где он храниться — plugins_url( ‘/moijs.js’ — то есть в папке установленного плагина.

Сохраняем файл с названием pluginjs.php.

Теперь у нас есть 2 готовых файла: pluginjs.php и moijs.js — это и есть наш плагин wordpress — далее нам нужно положить их в одну папку и заархивировать (можно воспользоваться бесплатной программой 7-ZIP) — в итоге получаем следующий файл — pluginjs.zip — можно скачать!

3. Заходим в панель управления сайтом и устанавливаем плагин.
Для этого в левом меню выбираем пункт «Плагины» и его подпункт «Добавить новый», далее жмем на ссылку «Загрузить» и выбираем файл pluginjs.zip на своем компьютере, устанавливаем и активируем.

4. Теперь в нужном месте сайта нам нужно поставить код, который будет вызывать PHP функцию, код которой прописан в javascript.

По сути нам нужно вызвать функцию «clock()», а вызывать ее можно различными способами:

4.1. с помощью следующего кода:

<script language="javascript">
<!--
 clock();
 //-->
 </script>

То есть здесь мы опять обращаемся к языку javascript.

4.2. также можно сделать следующим образом:

<input type="button" onclick="clock()" value="Время"/>

То есть у нас будет видна кнопочка с надписью «Время», при нажатии на которую появиться время.

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


knopkisoc

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>