vik

7 лет назад

Golos API для Wordpress. Создание wp плагина для работы с blockchain голоса.

Когда в одном из прошлых постов мы полностью воссоздали клиент golos.io на своем сервере, под своим доменом, в комментариях появились некоторое разочарование тем, что для такого клиента необходим свой VPS с node js и недели тюнинга если речь идет об интеграции с существующим сайтом вебмастера:

С виртуальным хостом люди в пролёте? Ну вот админю я пару бложиков на вордпресе им многого и не надо виртуальный хостинг за глаза. FTP есть, мускул, ПХП нескольких версий на выбор и всё. SSH нет, права на управление сервером нет. Уже не подключиться?
Вроде как речь идёт о добавлении к рабочему проекту мощностей Голоса, а пример с поднятием нового сайта. Так можно или нельзя в итоге интегрировать голоса в WordPress, PHPBB, Joomla, PrestaShop и тд?

Спешу обрадовать - свой клиент на WP - это вполне реально, а главное - очень быстро!

Более 25% всех сайтов в сети работают на базе Wordpress. Этот движок можно установить практически на любой хостинг, включая бесплатные. Для него вы найдете тысячи тем оформления и плагинов.

Возможность симбиоза блокчейна голоса и wordpress несомненно может стать одним из самых значимых событий для голоса, в т.ч. для стоимости GOLOS на бирже.

Начните создавать свои первые плагины wp + golos уже сейчас! Особенно актуально в свете возможности опубликовать на продажу свои плагины на codecanyon и грядущего на голосе маркетплейса :)

Что будет уметь ваш WP плагин в рамках данного поста:

Собственный редактор для создания поста на базе tinymce
Добавление фото в пост из вашей медиабиблиотеки wp
Плагин поможет задать желаемую ссылку вашему посту на голосе (permlink)
Возможность добавлять посты любому автору
Контроль топика и тегов, которые будет использовать автор
Быть не только wp плагином, но и работать на любой cms, или просто из html

На скрине обсуждаемый плагин
Демо: https://golos.rubtc.info/post/

Что будет добавлено в будущем:

Страница настроек в плагине
Формирование желаемой ленты постов на вашем сайте разными способами
Голосование с вашего сайта
Безопасная передача постинг ключа
Авторизация и привязка аккаунтов пользователей к голосу
Фолловинг
Комментарии
Кросспостинг, кнопки апвота под любым контентом и другое!

Идея

В основе идеи - поделиться рабочими методами взаимодействия API голоса и вашим сайтом на любой платформе и хостинге. Дать возможность шаг за шагом создать плагин, который будет работать на базе blockchain голоса и позволит размещать посты, комментарии, голосовать и подписываться находясь на вашем сайте.

Как выгодно применить голос к любой вашей идее

Представим, что у вас есть региональный сайт с рейтингом ресторанов города. Коммерческий успех такого портала напрямую зависит от качества вашей аудитории, ваши пользователи должны писать честные и полезные рецензии. Вы можете поощрять авторов из собственных средств или...
Реализовать это с помощью голоса!
Через форму на вашем сайте контент будет попадать в blockchain голоса, где соберет средства для вознаграждения автора. Вы можете комбинировать параметры размещая посты от собственного имени или позволить авторам иметь собственные аккаунты на голосе, помечать посты тегом и размещать в специальных топиках и многое другое.
Например пометив посты со своего сайта тегом nsfw вы уберете их из общей ленты на голосе, но сможете вывести на своем сайте, дав возможность голосовать на ваших страницах за любой контент.

Плагин WP GOLOS.IO за ~ 5 минут

Создадим папку golos и 2 файла в ней (в папке плагинов WP)
golos.js

wpgolos.php

Содержимое golos.js - это steem.js адаптированный усилиями @ontofractal (https://github.com/ontofractal/golosjs/)
В моей версии добавлен только / после основной ноды, так как у меня без этого соединение с нодой было односторонним.

Содержимое wpgolos.php мы разберем ниже:
Для легкости восприятия код достаточно примитивен и совмещен в один файл.
http://pastebin.com/raw/8nHNXmaM
Описываем плагин и задаем необходимые параметры

Определяем путь к файлам плагина:

define( 'PLUGIN_ROOT_PATH', plugin_dir_path( __FILE__ ) );

Создаем на будущее два триггера на активацию и деактивацию плагина

register_activation_hook(__FILE__,'golos_activation'); 
register_deactivation_hook( __FILE__, 'golos_deactivation' );

Задаем страницу, на которой будет отображаться наша форма постинга

add_filter( 'the_content', function( $content ) {
    if ( is_page( 'golos-post' ) ) { ob_start();

В коде выше указана страница is_page( 'golos-post' ) это означает, что если плагин активирован и у вас есть созданная страница с адресом golos-post- форма постинга будет отображаться именно на ней. Вы можете задать вместо golos-post любой slug своих страниц.

Зададим глобальную переменную с контентом и переменную с адресом нашего wp вплоть до папки с инсталляцией - это поможет нам правильно получать ссылки на медиафайлы.

$content ='';
$wpurl = site_url();
?>

Описываем CSS

 <style>#alerts { background: #ff8282; color: white; padding: 10px; border-radius: 3px; }.golos-form{background:#f5f5f5;padding:5px 20px;border-radius:3px}input#post-golos-title{width:100%;margin:10px auto;padding:5px;border-radius:5px;font-size:1.8rem}.golos-form .mce-panel{border-radius:3px;margin:10px auto}.golos-form input[type=submit]{background:#248eff;border:0;display:block;margin:20px auto;padding:10px;width:160px;border-radius:3px;color:#fff;box-shadow:0 0 10px -5px #000}input#permlink{font-size:14px;height:18px;border-radius:10px;margin-right:15px}</style>

Создаем поля нашей формы

<div class="golos-form">
<form id="post-golos-form" enctype="multipart/form-data">
 <h2><label for="post-golos-title"><?php _e( 'Заголовок', 'your-text-domain' ); ?></label></h2>
<input type="text" name="post-golos-title" id="post-golos-title" required aria-required="true">
 <p><input type="text" id="permlink" name="permlink" required aria-required="true"/> 
<label for="permlink">Ссылка на ваш пост в голосе</label></p>
<div id="text-editor"></div>

Вставляем wp редактор с медиазагрузчиком

<?php wp_editor($content, 'wp-content-editor-container', array(
    'wpautop'       => 1,
    'media_buttons' => 1,
    'textarea_name' => 'content',
    'textarea_rows' => 30,
    'tinymce' => 0,
    'quicktags'     => 0,
    'drag_drop_upload' => true
    ) );
?>

Продолжаем создание формы, оставляем поля для указания юзернейм и постинг ключа автора*

<p><input type="text" id="username" name="username" required aria-required="true"/> <label for="username"> Ваш логин на голосе</label></p>
<p><input type="password" id="postingkey" name="postingkey" required aria-required="true"/> <label for="postingkey"> Постинг ключ автора</label></p>
<input type="submit" value="<?php _e( 'Отправить', 'your-text-domain' ); ?>">
</form>
<div id="alerts"></div>
</div>

Теперь добавим JavaScript внутри <script> </script>

Настроим наш редактор tinymce. Весь список настроек можно найти тут https://github.com/tinymce/tinymce

jQuery(document).ready( function( $ ) {
    tinymce.init( {
        selector:'#wp-content-editor-container',       
       mode : "exact",
        elements : 'pre-details',
        theme: "modern",
        skin: "lightgray",
        menubar : true,
        statusbar : true,
        toolbar: [
            "bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | undo redo"
        ],
        plugins : "paste",
        paste_auto_cleanup_on_paste : true,
        paste_postprocess : function( pl, o ) {
            o.node.innerHTML = o.node.innerHTML.replace( /&nbsp;+/ig, " " );
        }
    } );
});

Отправляем пост на голос

jQuery( '#post-golos-form' ).on( 'submit', function(e) { 
 e.preventDefault();
        
          var t = document.getElementById("post-golos-title").value,
             post_body = tinyMCE.activeEditor.getContent(),
             k = document.getElementById("postingkey").value,
             u = document.getElementById("username").value,
             permlink = document.getElementById("permlink").value,
             jsonMetadata =  '{\"tags\":[\"viktest\"]}',
             parentAuthor = '', 
             parentPermlink = 'golos',
             wpurl ="<?php echo $wpurl;?>",
             regex = new RegExp('src="..', "g"),
             input = post_body,
             p = input.replace(regex, 'src="'+wpurl);
             
             steem.broadcast.comment(
                        k, 
                        parentAuthor, 
                        parentPermlink, 
                        u, 
                        permlink, 
                        t, 
                        p, 
                        jsonMetadata, 
                    function(err, result) {
                      console.log(err, result);
                      document.getElementById('alerts').innerHTML = (err);
                    });
});

На 75 строчке мы можем указать теги. Так как это пример, мы не будем делать отдельное поле для тегов, а жестко зададим в плагине. Таким образом вы можете задать специфический тег для формы, например NSFW и не портить репутацию размещая тестовый или не уместный контент на голосе.

На 77 строчке мы задаем основной топик в который размещаем пост. Например golos. А вернее ru--golos

82-84 строчки нужны для медиазагрузчика wordpress и tinymce. Дело в том, что загрузив в пост фото, мы получим относительную ссылку на файл вида ../wp-content/photo.jpg. Нам такое не подойдет, так как пост будет размещаться на голосе и ссылка нам нужна абсолютная, с точным указанием нашего сайта. Мы отфильтруем наш контент, найдем все строки src=".. и заменим их на ссылку нашего сайта из переменной rc="'+wpurl

// Найдем все ссылки на фото и добавим им абсолютный путь
             regex = new RegExp('src="..', "g"),
             input = post_body,
             p = input.replace(regex, 'src="'+wpurl);

Ну и последний кусок кода, в котором мы подключаем ту самую адаптацию golos.js с папки плагина и tinymce с папки includes самого движка wp

<?php $content .= ob_get_clean();} return $content;});
add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'tinymce_js', includes_url( 'js/tinymce/' ) . 'wp-tinymce.php', array( 'jquery' ), false, true );
    wp_enqueue_script( 'golosjs', plugin_dir_url( __FILE__ ) . 'golos.js');
});

Все готово! Активируем плагин на странице /wp-admin/plugins.php

Если не работает редактор
Проблема может быть в версии WP. Проблема решается заменой строки

wp_enqueue_script( 'tinymce_js', includes_url( 'js/tinymce/' ) . 'wp-tinymce.php', array( 'jquery' ), false, true );

на

wp_enqueue_script( 'tinymce_js', '//cdn.tinymce.com/4/tinymce.min.js', array( 'jquery' ), false, false );

Демо https://golos.rubtc.info/post/

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

Безопасность

Основная проблема - это передача постинг ключа. Вам нужно обязательно использовать https (tls) на своих сайтах, но даже тогда, метод передачи ключа в плагине нельзя назвать полностью безопасным. В будущем мы добавим методы, которые помогут сохранить приватность передаваемого ключа.

Развитие

Как писал в начале - планы на развитие плагина очевидные. Функционал, который логично добавить:

Сохранение избранных постов в базу вашего WP
Конструктор для отображения постов по заданным критериям
Возможность голосовать за посты
Конструктор ролей (кого делать автором постов, от кого и куда будут уходить голоса и т.п.)
Возможность авторам указывать ключ в аккаунте и хранить его зашифрованным или реализация логина через oAuth голоса.
Адаптация плагина под другие CMS

Ссылки

Прошлые посты
Создаем собственный сайт на базе blockchain голоса за ~ 30 минут.
Блокнот + JavaScript + голос = Трансляция Апвотинга, Фолловинга, новых пользователей, голосов за делегатов и прайсфида.

@ontofractal - https://github.com/ontofractal/golosjs
Редактор https://github.com/tinymce/tinymce
wpgolos.php - http://pastebin.com/raw/8nHNXmaM