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 '<ul class="easy-pinterest">';
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, "<a>,<img>" );
$pinterest_content_array = explode( '</a>', $pinterest_content );
$pinterest_content = $pinterest_content_array[0];
?>
<ol>
<a href='<?php echo esc_url( $item->get_permalink() ); ?>'
title='<?php echo 'Posted '.$item->get_date('j F Y | g:i a'); ?>'>
<?php echo $pinterest_content; ?>
</a>
</ol>
<?php
}
echo "</ul>";
// 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 );
?>
<p>
<label for="<?php echo $this->get_field_name( 'title' ); ?>">
<?php _e( 'Title:','theme' ) ?></label><br />
<input id="<?php echo $this->get_field_id( 'title' ); ?>"
name="<?php echo $this->get_field_name( 'title' ); ?>" type="text"
value="<?php echo $instance['title']; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_name( 'pinterest_username' ); ?>">
<?php _e( 'Pinterest username:','theme' ) ?></label><br />
<input id="<?php echo $this->get_field_id( 'pinterest_username' ); ?>"
name="<?php echo $this->get_field_name( 'pinterest_username' ); ?>"
type="text" value="<?php echo $instance['pinterest_username']; ?>" />
</p>
<p><label for="<?php echo $this->get_field_name( 'pinterest_quantity' ); ?>">
<?php _e( 'Pinterest quantity:','theme' ) ?></label><br />
<input id="<?php echo $this->get_field_id( 'pinterest_quantity' ); ?>"
name="<?php echo $this->get_field_name( 'pinterest_quantity' ); ?>"
type="text" value="<?php echo $instance['pinterest_quantity']; ?>" />
</p>
<?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/
