Zobrazení posledních příspěvků na Pinterest profilu pomocí WordPress widgetu

Sociální sítě jsou fenoménem dneška. Pokud vás to také neminulo a využíváte kromě Facebooku, Twitteru a Google+ také Pinterest, bude se vám hodit přidat do vašeho webu výpis posledních Pins. V tomto návodu vám ukáži, jak vytvořit výpis posledních devíti příspěvků pomocí RSS feedu vašeho profilu na Pinterest jako widget šablony. Nejsem příznivce bezhlavého používání pluginů a proto jej vložíme pomocí souboru functions.php přímo do šablony.

V jednom z předchozích návodů jsme si ve složce šablony vytvořili složku widgets, abychom udrželi v souborech pořádek. Pokud tam složku nemáte, tak si ji vytvořte. v této složce si vytvořte další složku s názvem widget-pinterest-feed. Následně si vytvoříme dva prázdné soubory, jeden s názvem widget-pinterest-feed-php a druhý vm-pinterest-feed.css.

Do widget-pinterest-feed.php umístíme kód samotného widgetu, začneme definicí:

/*-------------------------------------------------

	Plugin Name: Pinterest feed
	Plugin URI:
	Description: Recent pins
	Version: 1.0
	Author: Musilda
	Author URI: http://musilda.cz

--------------------------------------------------*/

Tím jsme zaregistrovali plugin, díky tomuto kódu WordPress pozná co je v souboru a bude k němu tak přistupovat.
Nyní si přidáme soubor se styly, který je sice prázdný, ale protože nechceme být prasátka, budeme mít hezky všechny styly v externím souboru.

function vm_pin_stylesheet() {
        wp_register_style( 'pinterest-feed', get_template_directory_uri()
        . '/widgets/widget-pinterest-feed/vm_pinterest_feed.css' );
        wp_enqueue_style( 'pinterest-feed' );
}
add_action( 'wp_head', 'vm_pin_stylesheet' );

Jako další krok zaregistrujeme funkci widgetu a pomocí hooku widget_init jej zpřístupníme v administraci widgetů.

// Register widget
function vm_pinterest_feed_widgets() {
    register_widget( 'vm_Pinterest_Feed_Widget' );
}

// Add function to widgets_init that'll load our widget
add_action( 'widgets_init', 'vm_pinterest_feed_widgets' );

Jako další krok připravíme třídu, která rozšiřuje třídu WP_Widget a do ní umístíme všechny funkce našeho widgetu:

// Widget class
class vm_pinterest_feed_widget extends WP_Widget {
}

Tím máme vše připraveno a můžeme začít psát samotný widget. Dejte pozor, aby všechny funkce byly uvnitř třídy, tedy mezi složenými závorkami.

Nejprve vytvoříme funkci widgetu

function vm_Pinterest_Feed_Widget() {

	// Widget settings
	$widget_ops = array(
		'classname' => 'vm_pinterest_feed_widget',
		'description' => __('A widget display latest pins in sidebar.', 'theme')
	);

	// Widget control settings
	$control_ops = array(
		'width' => 250,
		'height' => 250,
		'id_base' => 'vm_pinterest_feed_widget'
	);

	// Create the widget
	$this->WP_Widget( 'vm_pinterest_feed_widget', __('Pinterest feed', 'theme'),
        $widget_ops, $control_ops );

}

Tím jsme k widgetu přidali popis, který se bude zobrazovat v administraci a definovali jsme šířku boxu widgetu, který se zobrazuje, pokud je widget umístěn a vy jej rozbalíte pro úpravu údajů. Tato definice se hodí, pokud budete vytvářet widgety s více parametry a budete pro ně potřebovat více místa.

V dalším kroku vytvoříme funkci pro zobrazení samotného widgetu i s výpisem posledních pins

function widget( $args, $instance ) {
  extract( $args );

  // Our variables from the widget settings
  $title = apply_filters('widget_title', $instance['title'] );

  $pinterest_feed = fetch_feed( "http://pinterest.com/" .
  $instance['pinterest_username'] . "/feed.rss" );

  if (!is_wp_error( $pinterest_feed ) ) :
        $maxitems = $pinterest_feed->get_item_quantity( $instance['pinterest_quantity'] );
	$pinterest_feed = $pinterest_feed->get_items(0, $maxitems);
	endif;


  if ( !empty( $pinterest_feed ) ) {

	// Before widget (defined by theme functions file)
	echo $before_widget;

	// Display the widget title if one was input
	if ( $title )
	echo $before_title . $title . $after_title;


 echo '
';
foreach ( $pinterest_feed as $item ) {
	$pinterest_content = $item->get_content();
	$pinterest_content = str_replace( '>','>',$pinterest_content );
	$pinterest_content = str_replace( '<','<',$pinterest_content );
	$pinterest_content = str_replace( '<a','<a target="_blank"',$pinterest_content );
	$pinterest_content = str_replace( 'href="','href="http://www.pinterest.com',
        $pinterest_content );

	$pinterest_content = strip_tags( $pinterest_content, "," );
	$pinterest_content_array = explode( '', $pinterest_content );
	$pinterest_content = $pinterest_content_array[0];
        ?>


    <a href='get_permalink() ); ?>'
    title='get_date('j F Y | g:i a'); ?>'>
    
    


<?php
			}

	echo "
";

	// After widget (defined by theme functions file)
	echo $after_widget;
    }
}

Výše uvedený kód nejprve načte RSS fedd, z kterého pak vypíše posledních 9 pins.
Protože budeme do widgetu vkládat Pinterest username a počet příspěvků, je nutná funkce pro aktualizaci proměnných po odeslání formuláře. Ta není nijak složitá

function update( $new_instance, $old_instance ) {
 $instance = $old_instance;

 // Strip tags to remove HTML (important for text inputs)
 $instance['title'] = strip_tags( $new_instance['title'] );
 $instance['pinterest_username'] = strip_tags( $new_instance['pinterest_username'] );
 $instance['pinterest_quantity'] = strip_tags( $new_instance['pinterest_quantity'] );

 return $instance;
}

Ukládáme aktuální hodnoty jen pro tři proměnné, nic více nepotřebujeme.

Poslední funkcí, kterou doplníme do našeho widgetu je samotný výpis formuláře

function form( $instance ) {

	// Set up some default widget settings
	$defaults = array(
		                'title' => 'Recent pins',
                    'pinterest_username'=>'musilda',
                    'pinterest_quantity'=>'9'
	                 );

	$instance = wp_parse_args( (array) $instance, $defaults );
   ?>


  <label for="get_field_name( 'title' ); ?>">
  


  <input id="get_field_id( 'title' ); ?>"
  name="get_field_name( 'title' ); ?>" type="text"
  value="" />



  <label for="get_field_name( 'pinterest_username' ); ?>">
  


  <input id="get_field_id( 'pinterest_username' ); ?>"
  name="get_field_name( 'pinterest_username' ); ?>"
  type="text" value="" />


  
<label for="get_field_name( 'pinterest_quantity' ); ?>">
  


  <input id="get_field_id( 'pinterest_quantity' ); ?>"
  name="get_field_name( 'pinterest_quantity' ); ?>"
  type="text" value="" />


<?php
	}

Předposlední krok, který musíme udělat, je definování css stylů pro widget, které uložíme do souboru vm_pinterest_feed.css

ul.easy-pinterest{float:left;
  width:100%;
  margin-bottom:20px;
}
ul.easy-pinterest ol {float:left;
  width: 75px;
  height: 75px;
  overflow: hidden;
  margin: 0px 8px 8px 0px;
  background: #efefef;
  display:table-cell;
  vertical-align:middle;
}

ul.easy-pinterest ol img {max-width: 100%;
  height: auto;
}
ul.easy-pinterest ol p {display: none;
}

Tím jsme zdárně dokončili widget pro zobrazování Recent pins v sidebaru a do functions.php vložíme následující řádek

include 'widgets/widget-pinterest-feed/widget-pinterest-feed.php';

Funkční widget najdete zde http://www.novy.8u.cz/