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.

Čtěte  Úprava stylů obrázku ve Wordpress 3.9

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( '&gt;','>',$pinterest_content );
$pinterest_content = str_replace( '&lt;','<',$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;
    }
}
Čtěte  Zobrazení náhledového obrázku, id článku a post meta ve výpisu článků v administraci
$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( '&gt;','>',$pinterest_content ); $pinterest_content = str_replace( '&lt;','<',$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
}
Čtěte  Jak přesunout články a fotografie z Bloggeru do WordPressu
// 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/

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Related posts

Leave a Reply

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Chcete mít přehled o dění ve světě WordPressu?

Přímo do vašeho emailu

Pravidelný přehled o novinkách, trendech a událostech, které se točí kolem WordPressu. Souhrn toho nejzajímavějšího od nás i ze zahraničí.