Здравствуйте, сегодня продолжим создание 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: https://mnogoblog.ru/sozdaem-prostoj-plagin-wordpress
Description: Преобразует в каждом слове заголовка первую букву из прописной в заглавную.
Version: 1.0
Author: Mnogoblog
Author URI: https://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="Время"/>

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