442 Если вы владелец сайта или блоггер, то, наверное, понимаете, что без хорошего количества подписчиков и последователей ваш сайт или блог будут не такими успешными в мире социальных сетей. Чтобы набрать достаточное количество подписчиков, многие сайты предоставляют бесплатные продукты (электронные книги, наборы иконок, плагины) в обмен на подписку по электронной почте.
Оставить твит о вашем продукте или статье — это еще один современный метод привлечения посетителей. В этом руководстве мы покажем вам, как можно создать плагин «Вознаграждение за твит» на WordPress. Начнем.
Создание файлов плагина
Во-первых, мы создадим папку с именем Reward-Tweets в директории wp-content/plugins, затем создадим в этой папке файл index.php. Теперь наполним его служебной информацией о плагине. Смотрите пример ниже.
/*
|
1 2 3 4 5 6 7 8 |
Plugin Name: Reward for a Tweet Plugin URI: Description: Provide additional links or freebies for a tutorial for tweeters. Version: 1.0 Author: Rakhitha Nimesh Author URI: License: GPLv2 or later */ |
Теперь вы можете активировать этот плагин в администраторской панели вашего сайта.
Добавление награды за твит-ссылку на вашу статью или продукт
Для каждого поста будет своя собственная ссылка на награду. И так, для этого, нужно добавить текстовое поле (в нем будем хранить ссылку на награду) в форму редактирования или создания постов.
Добавление Meta Boxes в форму редактирования поста
Мы можем добавлять пользовательские поля, используя функцию add_meta_box.
|
1 2 3 4 5 |
add_action('add_meta_boxes', 'add_reward_link_box' ); function add_reward_link_box() { add_meta_box( 'reward_link_box-id', 'Reward Link', 'display_reward_link_box', 'post'); } |
- Мы можем создавать пользовательские элементы meta box, используя функцию
add_meta_boxвнутри экшенаadd_meta_boxes. - Первый параметр — уникальный ID для meta box.
- Второй параметр — титул элемента meta box. Мы назвали его Reward Link.
- Следующий параметр — имя функции, используемая для отображения HTML кода элемента metabox.
- Четвертый параметр — тип поста. Пока вы используете обычные типы статей, этот параметр будет равен
post. И, конечно, будет меняться, если тип поста изменится.
Теперь рассмотрим функцию display_reward_link_box, которая используется для отображения пользовательских полей.
|
1 2 3 4 5 6 7 8 9 10 |
function display_reward_link_box(){ global $post; $values = get_post_custom( $post->ID ); $reward_link = isset( $values['reward_link'] ) ? esc_attr( $values['reward_link'][0] ) : ''; wp_nonce_field( 'reward_link_box', 'reward_link_box' ); $html = "<lable>Reward Link</label><input type='text' name='reward_link' value='$reward_link' />"; echo $html; } |
- Сначала мы получаем все пользовательские
metaзначения, используя функциюget_post_custom. - Затем проверяем существование
Reward Link. Если ссылка существует, то мы ее вставляем в качестве значения текстового поля. - Затем мы создаем одноразовое значение, используя функцию
wp_nonce_field. Она будет нужна для подтверждения запроса при нажатии на кнопку публикации твита. - В конце отобразим метку (label) и текстовое поле для
Reward Link.
Если вы настроили все верно, то после активации плигина, при создании поста, внизу появится meta box с полем Reward Link.
Сохранение ссылки на вознаграждение в базу данных
Теперь нам нужно сохранить значение Reward Link, при публикации и сохранении поста. Следующий код будет сохранять данные в таблицу wp_postmeta.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
add_action( 'save_post', 'reward_link_box_save' ); function reward_link_box_save($postID){ if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return; if( !isset( $_POST['reward_link_box'] ) || !wp_verify_nonce( $_POST['reward_link_box'], 'reward_link_box' ) ) return; if( !current_user_can( 'edit_post' ) ) return; if( isset( $_POST['reward_link'] ) ) update_post_meta($postID, 'reward_link', esc_attr( $_POST['reward_link'] ) ); } |
- Во-первых, добавим функцию под названием
reward_link_box_save, которая будет срабатывать после сохранения поста в базу данных. - Существующий
IDпоста будет передаваться в функцию автоматически. - В WordPress есть функция автосохранения. Мы не будем её использовать для сохранения нашей ссылки.
- Затем проверяем валидность формы, используя ранее созданное одноразовое значение.
- Проверяем права доступа на сохранение поста.
- После всех проверок мы сохраняем
Reward Linkс ключомreward_link, используяupdate_post_meta.
Ссылка на вознаграждение у нас есть, теперь, объясним, как создать кнопку с твитом и как отобразить ссылку на вознаграждение.
Конфигурация стилей и скриптов
Добавим необходимые скрипты и стили для плагина, используя экшн wp_enqueue_scripts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function apply_reward_tweet_scripts() { global $post; wp_enqueue_script('jquery'); wp_register_script("twWidget", "http://platform.twitter.com/widgets.js"); wp_enqueue_script('twWidget'); wp_register_script('rewardTweet', plugins_url('js/rewardTweet.js', __FILE__)); wp_enqueue_script('rewardTweet'); wp_register_style('rewardTweetStyles', plugins_url('css/rewardTweet.css', __FILE__)); wp_enqueue_style('rewardTweetStyles'); $config_array = array( 'rewardAjaxUrl' => admin_url('admin-ajax.php'), 'rewardNonce' => wp_create_nonce('reward-nonce'), 'rewardPost' => $post->ID ); wp_localize_script('rewardTweet', 'rewardData', $config_array); } add_action('wp_enqueue_scripts', 'apply_reward_tweet_scripts'); |
- Во-первых, вызывем функцию
apply_reward_tweet_scriptsдля инициализации скриптов. - Внутри функции мы подключим jQuery и виджет Twitter, используя функцию
wp_enqueue_script. - Twitter widget.js нужен для генерации кнопки и стилей.
- Затем подключим файл rewardTweet.js и стили rewardTweet.css.
- В конце, определим некоторые значения для вставки в JS файл в $config_array. Ajax ссылкой будет файл
admin-ajax.php. - Затем мы будем использовать
wp_localize_scriptдля добавления значений в JS файл. Первый параметр — название, используемое для включения пользовательского js, используяwp_enqueue_script. - Второй параметр — название объекта, которое будет использоваться для доступа к данным и третим параметром будет массив значений, которые также должны быть включены.
Далее мы отобразим кнопку с твитом для каждого поста. Перейдем к отображению кнопки.
Отображение кнопки
Мы подключили все необходимые скрипты, теперь создадим кнопку с твитом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function add_reward_tweet_button($content){ global $post; $tweet_meta_values = get_post_meta($post->ID,'reward_link'); $tweet_text = $post->post_title." - ".get_site_url(); if(is_single() && isset($tweet_meta_values[0]) && $tweet_meta_values[0] != '' ){ return $content."<div class='tw_reward_panel' ><div class='tw_reward_title'>Tweet and Get Rewarded <span class='tw_reward_button'><a href='https://twitter.com/share?text=$tweet_text&via=1stwebdesigner' class='twitter-share-button' data-lang='en' data-url='$post->guid' >Tweet</a></span></div> <div class='tw_reward_links'><a id='rewardLink' href=''>Click Here To Get Reward Link</a><div style='clear:both'></div></div></div>"; }else{ return $content; } } add_filter('the_content','add_reward_tweet_button'); |
- В начале мы вызовем функцию
add_reward_tweet_buttonна фильтреthe_content. Этот фильтр будет применяться на содержимом каждого поста или страницы. - Страница или пост будут автоматически передаваться в эту функцию.
- Затем мы получим пользовательские meta значения текущего поста.
- Нам не нужна кнопка в категориях, архивах, тэгах и т.д. Для проверки будем использовать функцию
is_single. - Также проверим, существует ли ссылка на награду и отобразим кнопку с твитом.
- Панель вознаграждения не отобразится, если у поста нет ссылки на вознаграждение.
Таким образом вы увидите панель вознаграждения на каждом посте, для которого указано вознаграждение.
Вывод ссылок на скачивание при твите
После того, как будет нажата кнопка с твитом и будет опубликована ссылка на вашу статью/продукт в профиле пользователя, нам нужно отобразить ссылку с вознаграждением. Для определения твита мы будем использовать Twitter Web Intents Events. Вы можете прочитать об этом более подробно в центре разработки Twitter. Создадим JavaScript код в файле rewardTweet.js для отображения кнопки после публикации твита.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$jq =jQuery.noConflict(); twttr.events.bind('tweet', function(event) { $jq.post(rewardData.rewardAjaxUrl, { action:"get_reward_links", nonce:rewardData.rewardNonce, postID :rewardData.rewardPost }, function(result, textStatus) { if(result.status == 'success'){ $jq("#rewardLink").attr("href",result.value); $jq("#rewardLink").show(); } }, "json"); }); |
- Первая строка отвечает за бесконфликтность jQuery с другими библиотеками.
- Далее мы используем
twttr.events.bind(‘tweet’, function(event)для привязки пользовательской функции к нашей кнопке с твитом. Эта функция исполнится при публикации твита. - Внутри функции мы будем использовать объект
rewardDataдля получения данных, которые мы вставим в скрипт с помощьюwp_localize_script. - Далее будем использовать экшн
get_reward_linksдля AJAX запроса. - Как только запрос будет успешно завершен, мы получим JSON объект, содержащий ссылку на вознаграждение.
- Мы проверим статус результата, привяжем ссылку к кнопке скачивания и покажем ее пользователю.
Заключительная часть в создании плагина будет о том, как обработать AJAX запрос и сгенерировать ссылку на вознаграждение.
Создание ссылки с вознаграждением
Посылаем AJAX запрос на сервер с текущим ID поста. Рассмотрим приведенный ниже код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function get_reward_links(){ global $post; $tweet_meta_values = get_post_meta($_POST['postID'],'reward_link'); if(isset($tweet_meta_values[0]) && $tweet_meta_values[0] != '' ){ echo json_encode(array("value"=>$tweet_meta_values[0],"status"=>"success"));exit; }else{ echo json_encode(array("status"=>"error"));exit; } } add_action('wp_ajax_nopriv_get_reward_links', 'get_reward_links'); add_action('wp_ajax_get_reward_links', 'get_reward_links'); |
- Во-первых, мы будем использовать экшн, определенный в предыдущей части, и AJAX запросы, используя
wp_ajax_nopriv_get_reward_linksиwp_ajax_get_reward_links. wp_ajax_noprivбудет использоваться для пользователей, которые не вошли на сайт.wp_ajax— для тех, кто вошел.- Внутри функции
get_reward_linksмы получим ссылку на награду для текущего поста и отправим ее в видеJSONобъекта. - Предыдущий JavaScript код будет декодировать JSON объект и отображать ссылки на вознаграждения.
Мы полностью закончили с плагином. Теперь вы можете просто вставлять вознаграждения на каждый пост в администраторской панели WordPress, а ваши пользователи будут их видеть, если будут оставлять твиты об этом. Мы надеемся, что у вас не будет трудностей с установкой и использованием этого плагина, иначе оставляйте комментарии, а мы вам обязательно поможем.
А здесь yii ajax можно почитать о создание AJAX валидации на примере Yii2.
Вау, спасибо, бро! искал плагины, все какие то кривые, уже отчаялся. И теперь вот оно, спасение :) поставлю на свой сайт, где psd исходники выкладываю) надеюсь заработает