Статьи

Создать плагин Sharrre для WordPress

Август 11, 2018

Пару месяцев назад я написал учебник о том, как использовать плагин jQuery Sharrre для создания собственных кнопок общего доступа для вашего сайта . В этом уроке только указано, как вы можете использовать этот плагин jQuery на своем веб-сайте, так как я также написал много урока по WordPress, и несколько человек спросили, как вы можете использовать этот плагин jQuery в WordPress.

В этом уроке я расскажу, как вы можете создать плагин для WordPress , использующий плагин sharrre, я также сделаю этот плагин доступным на Github, чтобы каждый, кто хочет использовать или улучшить этот плагин, мог сделать это свободно.

Сначала создайте плагин WordPress

Для начала нам нужно создать плагин WordPress, для этого просто создайте новую папку в папке плагинов WordPress и добавьте файл PHP в корень папки плагинов.

Вверху этого PHP-файла мы добавляем комментарии, чтобы WordPress знал, что это плагин, который он может использовать.

/*
Plugin Name: Sharrre WordPress Plugin
Plugin URI: http://www.paulund.co.uk
Description: A WordPress plugin that will allow you to create your own share buttons using the jQuery Plugin Sharrre
Version: 1.0
Author: Paul Underwood
Author URI: http:/www.paulund.co.uk
*/

Хотя в WordPress вам не нужно знать объектно-ориентированное программирование, и вы можете просто использовать процедурные функции в своих плагинах, я всегда предпочитаю работать с объектами и классами. Итак, теперь плагин WordPress создан, мы добавляем наш класс для определения функциональности кнопки sharrre.

class Sharrre_Wordpress_plugin
{
}

Этот плагин будет просто отображать кнопку sharrre на интерфейсе сайта, в данный момент в области администрирования WordPress нет никаких настроек , это означает, что мы можем создать экземпляр класса, когда мы не находимся в области администратора.

if(!is_admin())
{
	new Sharrre_Wordpress_Plugin();
}

Скачать плагин Sharrre

Следующим шагом является загрузка плагина sharrre, который вы можете сделать на github.

Sharrre

После того, как вы скачали этот плагин, теперь мы можем добавить его в наш плагин WordPress, скопировать папку sharrre в папку плагина.

Это будет означать, что у нас есть доступ к подключаемому плагину jQuery для отображения кнопки sharrre.

Вернувшись в плагин WordPress, мы можем убедиться, что плагин sharrre jQuery всегда включен на страницу, поместив функцию wp_enqueue_script () в конструктор нашего плагина.

public function __construct()
{
	add_action( 'wp_enqueue_scripts', array(&$this, 'add_scripts') );
        add_action( 'wp_enqueue_style', array(&$this, 'add_styles') );
}
public function add_scripts()
{
	wp_enqueue_script( 'sharrre', plugins_url( 'sharrre/jquery.sharrre.min.js', __FILE__ ) , array('jquery') );
}
public function add_styles()
{
	wp_enqueue_style( 'sharrre-button-style', plugins_url( 'css/styling.css', __FILE__ ) );
}

Плагин sharrre теперь будет добавляться на каждую страницу нашего сайта WordPress, но только на внешний интерфейс. Теперь мы можем сделать Javascript для отображения этой кнопки. Поскольку мы используем плагин WordPress для вывода Javascript, нам нужно иметь возможность создавать параметры для кнопки на стороне сервера. Это означает, что нам нужно создать метод, который будет выводить Javascript на страницу, все, что нам нужно сделать, это вызвать этот метод там, где мы хотим, чтобы появилась кнопка sharrre.

Создайте новый метод, который мы будем использовать для вывода Javascript.

public function add_button($id, array $buttons, $url)
{
}

Этот метод имеет 3 параметра, которые помогут нам определить основные функциональные возможности плагина sharrre.

  • Этот первый параметр — это идентификатор, который мы будем использовать для идентификации кнопки «Поделиться».
  • Второй параметр — это массив кнопок, которые мы хотим, чтобы плагин sharrre отображал.
  • Третий параметр — это URL, которым мы поделимся с кнопки.

Из этих параметров у нас будет вся информация, необходимая для вывода кнопки sharrre.

public function add_button($id, array $buttons, $url)
{
	?>
		<script>
			jQuery('#<?php echo $id; ?>').sharrre({
			<?php
				if(count($buttons) > 0)
				{
					echo 'share: {';
					foreach($buttons as $button)
					{
						echo $button . ': true,';
					}
					echo '},';
				}
				if($url != '')
				{
					printf("url: '%s',", $url);
				}
			?>
			});
		</script>
	<?php
}

Теперь мы можем вызвать эту функцию на внешнем интерфейсе для отображения кнопок sharrre. Когда этот плагин активирован, он автоматически включит его на страницу, поэтому у нас есть доступ к объекту Sharrre_Wordpress_Plugin .

В файлах вашей темы найдите место, где вы хотите отобразить кнопку «Поделиться», и добавьте следующий код.

<?php
    $share = new Sharrre_Wordpress_Plugin();
    $share->add_button('share', array('twitter', 'googlePlus', 'facebook'), the_permalink());
?>

Это создаст основную кнопку без стилизации, и при наведении курсора на ссылку отобразятся кнопка Twitter, кнопка Google plus и кнопка Facebook. Чтобы стилизовать эту кнопку, как кнопку «Поделиться» в предыдущем уроке , теперь вы можете добавить CSS в CSS-файл плагина, который мы добавим на страницу одновременно с загрузкой плагина.

Я сделал этот плагин доступным с кодом выше на Github , который вы можете скачать здесь.

Sharrre WordPress Плагин

Дополнительная функциональность

Это очень простой обзор плагина sharrre , он просто демонстрирует способ использования WordPress с этим плагином jQuery. С помощью кнопки sharrre мы можем включить гораздо больше функций, вот список дополнительных опций, которые вы можете передать в плагин sharrre.

  • className — Определите имя класса для добавления
  • поделиться — Определите, какие социальные сети использовать.
  • Шаблон — Определите свой собственный HTML для отображения.
  • url — URL для обмена
  • текст — текст, который будет использоваться с кнопками обмена
  • urlCurl — Используйте свой собственный скрипт PHP, чтобы получить количество акций.
  • count — посчитать количество акций
  • итого — общее количество акций
  • shorterTotal — логическое значение, чтобы сократить количество общих ресурсов до формата 1.2M.
  • enableHover — логическое значение, разрешающее наведение на кнопки общего доступа.
  • enableCounter — логическое значение для отключения счетчика.
  • enableTracking — A boolean value to enable Google analytic tracking.
  • hover — Define function to run on hover
  • hide — Define a function for hide event
  • click — Define a function for click event
  • render — Define a function for render event
  • buttons — Define behaviour for social buttons. 
    googlePlus : {  //http://www.google.com/webmasters/+1/button/
  url: '',  //if you need to personnalize button url
  size: 'medium',
  lang: 'en-US',
  annotation: ''
},
facebook: { //http://developers.facebook.com/docs/reference/plugins/like/
  url: '',  //if you need to personalize url button
  action: 'like',
  layout: 'button_count',
  width: '',
  send: 'false',
  faces: 'false',
  colorscheme: '',
  font: '',
  lang: 'en_US'
},
twitter: {  //http://twitter.com/about/resources/tweetbutton
  url: '',  //if you need to personalize url button
  count: 'horizontal',
  via: '',
  hashtags: '',
  related: '',
  lang: 'en'
},
digg: { //http://about.digg.com/downloads/button/smart
  url: '',  //if you need to personalize url button
  type: 'DiggCompact'
},
delicious: {
  url: '',  //if you need to personalize url button
  size: 'medium' //medium or tall
},
stumbleupon: {  //http://www.stumbleupon.com/badges/
  url: '',  //if you need to personalize url button
  layout: '1'
},
linkedin: {  //http://developer.linkedin.com/plugins/share-button
  url: '',  //if you need to personalize url button
  counter: ''
},
pinterest: { //http://pinterest.com/about/goodies/
  url: '',  //if you need to personalize url button
  media: '',
  description: '',
  layout: 'horizontal'
}

If we want to add these button options to our plugin we can do so by adding a method for each button and define each of the properties for the button. This will allow us to fully customise how each of the social network buttons are displayed. For this we can pass in the options for the different buttons and convert them from an array into JSON.

public function google_plus_options( $options )
{
	$this->googlePlusOptions = json_encode($options);
}
public function facebook_button( $options )
{
	$this->facebookOptions = json_encode($options);
}
public function twitter_button( $options )
{
	$this->twitterOptions = json_encode($options);
}
public function digg_button( $options )
{
	$this->diggOptions = json_encode($options);
}
public function delicious_button( $options )
{
	$this->deliciousOptions = json_encode($options);
}
public function stumbleupon_button( $options )
{
	$this->stumbleuponOptions = json_encode($options);
}
public function linkedin_button( $options )
{
	$this->linkedinOptions = json_encode($options);
}
public function pinterest_button( $options )
{
	$this->pinterestOptions = json_encode($options);
}

Now we can use these in our add_button method to change the options on each of the social networks.

public function add_button($id, array $buttons, $url)
{
	?>
		<script>
			jQuery('#<?php echo $id; ?>').sharrre({
			<?php
				if(count($buttons) > 0)
				{
					echo 'share: {';
					foreach($buttons as $button)
					{
						echo $button . ': true,';
					}
					echo '},';
				}
				echo 'buttons: {';
					if($this->googlePlusOptions)
					{
						echo 'googlePlus: ' . $this->googlePlusOptions . ',';
					}
					if($this->facebookOptions)
					{
						echo 'facebook: ' . $this->facebookOptions . ',';
					}
					if($this->twitterOptions)
					{
						echo 'twitter: ' . $this->twitterOptions . ',';
					}
					if($this->diggOptions)
					{
						echo 'digg: ' . $this->diggOptions . ',';
					}
					if($this->deliciousOptions)
					{
						echo 'delicious: ' . $this->deliciousOptions . ',';
					}
					if($this->stumbleuponOptions)
					{
						echo 'stumbleupon: ' . $this->stumbleuponOptions . ',';
					}
					if($this->linkedinOptions)
					{
						echo 'linkedin: ' . $this->linkedinOptions . ',';
					}
					if($this->pinterestOptions)
					{
						echo 'pinterest: ' . $this->pinterestOptions . ',';
					}
				echo '},';
				if($url != '')
				{
					printf("url: '%s',", $url);
				}
			?>
			});
		</script>
	<?php
}

When calling this object from the front-end we can now change the way the buttons are displayed by add the options before calling the method to display the buttons, by using the following code.

$share = new Sharrre_Wordpress_plugin();
$share->google_plus_options(array(
	'url' => 'http://www.google.com',
	'size' => 'Large',
	'lang' => 'en-US',
	'annotation' => ''
));
$share->twitter_button(array(
	'url' => 'http://www.twitter.com',
));
$share->add_button('share', array('twitter', 'googlePlus', 'facebook'), home_url());

Now you can use this plugin to create your own share buttons for your WordPress site.

Contribute to this WordPress plugin on Github.

Sharrre WordPress Plugin

35
Share: