{"id":545,"date":"2013-06-01T06:04:56","date_gmt":"2013-06-01T06:04:56","guid":{"rendered":"http:\/\/musilda.cz\/?p=545"},"modified":"2013-06-01T06:04:56","modified_gmt":"2013-06-01T06:04:56","slug":"zobrazeni-poslednich-prispevku-na-pinterest-profilu-pomoci-wordpress-widgetu","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/zobrazeni-poslednich-prispevku-na-pinterest-profilu-pomoci-wordpress-widgetu\/","title":{"rendered":"Zobrazen\u00ed posledn\u00edch p\u0159\u00edsp\u011bvk\u016f na Pinterest profilu pomoc\u00ed WordPress widgetu"},"content":{"rendered":"
Soci\u00e1ln\u00ed s\u00edt\u011b jsou fenom\u00e9nem dne\u0161ka. Pokud v\u00e1s to tak\u00e9 neminulo a vyu\u017e\u00edv\u00e1te krom\u011b Facebooku, Twitteru a Google+ tak\u00e9 Pinterest, bude se v\u00e1m hodit p\u0159idat do va\u0161eho webu v\u00fdpis posledn\u00edch Pins. V tomto n\u00e1vodu v\u00e1m uk\u00e1\u017ei, jak vytvo\u0159it v\u00fdpis posledn\u00edch dev\u00edti p\u0159\u00edsp\u011bvk\u016f pomoc\u00ed RSS feedu va\u0161eho profilu na Pinterest jako widget \u0161ablony. Nejsem p\u0159\u00edznivce bezhlav\u00e9ho pou\u017e\u00edv\u00e1n\u00ed plugin\u016f a proto jej vlo\u017e\u00edme pomoc\u00ed souboru functions.php p\u0159\u00edmo do \u0161ablony.<\/p>\n
V jednom z p\u0159edchoz\u00edch n\u00e1vod\u016f jsme si ve slo\u017ece \u0161ablony vytvo\u0159ili slo\u017eku widgets, abychom udr\u017eeli v souborech po\u0159\u00e1dek. Pokud tam slo\u017eku nem\u00e1te, tak si ji vytvo\u0159te. v t\u00e9to slo\u017ece si vytvo\u0159te dal\u0161\u00ed slo\u017eku s n\u00e1zvem widget-pinterest-feed. N\u00e1sledn\u011b si vytvo\u0159\u00edme dva pr\u00e1zdn\u00e9 soubory, jeden s n\u00e1zvem widget-pinterest-feed-php a druh\u00fd vm-pinterest-feed.css.<\/p>\n
Do widget-pinterest-feed.php um\u00edst\u00edme k\u00f3d samotn\u00e9ho widgetu, za\u010dneme definic\u00ed:<\/p>\n
\n\/*-------------------------------------------------\n\n\tPlugin Name: Pinterest feed\n\tPlugin URI:\n\tDescription: Recent pins\n\tVersion: 1.0\n\tAuthor: Musilda\n\tAuthor URI: http:\/\/musilda.cz\n\n--------------------------------------------------*\/\n<\/pre>\nT\u00edm jsme zaregistrovali plugin, d\u00edky tomuto k\u00f3du WordPress pozn\u00e1 co je v souboru a bude k n\u011bmu tak p\u0159istupovat.
\nNyn\u00ed si p\u0159id\u00e1me soubor se styly, kter\u00fd je sice pr\u00e1zdn\u00fd, ale proto\u017ee nechceme b\u00fdt pras\u00e1tka, budeme m\u00edt hezky v\u0161echny styly v extern\u00edm souboru.<\/p>\n
\nfunction vm_pin_stylesheet() {\n wp_register_style( 'pinterest-feed', get_template_directory_uri()\n . '\/widgets\/widget-pinterest-feed\/vm_pinterest_feed.css' );\n wp_enqueue_style( 'pinterest-feed' );\n}\nadd_action( 'wp_head', 'vm_pin_stylesheet' );\n<\/pre>\nJako dal\u0161\u00ed krok zaregistrujeme funkci widgetu a pomoc\u00ed hooku widget_init jej zp\u0159\u00edstupn\u00edme v administraci widget\u016f.<\/p>\n
\n\/\/ Register widget\nfunction vm_pinterest_feed_widgets() {\n register_widget( 'vm_Pinterest_Feed_Widget' );\n}\n\n\/\/ Add function to widgets_init that'll load our widget\nadd_action( 'widgets_init', 'vm_pinterest_feed_widgets' );\n<\/pre>\nJako dal\u0161\u00ed krok p\u0159iprav\u00edme t\u0159\u00eddu, kter\u00e1 roz\u0161i\u0159uje t\u0159\u00eddu WP_Widget a do n\u00ed um\u00edst\u00edme v\u0161echny funkce na\u0161eho widgetu:<\/p>\n
\n\/\/ Widget class\nclass vm_pinterest_feed_widget extends WP_Widget {\n}\n<\/pre>\nT\u00edm m\u00e1me v\u0161e p\u0159ipraveno a m\u016f\u017eeme za\u010d\u00edt ps\u00e1t samotn\u00fd widget. Dejte pozor, aby v\u0161echny funkce byly uvnit\u0159 t\u0159\u00eddy, tedy mezi slo\u017een\u00fdmi z\u00e1vorkami.<\/p>\n
Nejprve vytvo\u0159\u00edme funkci widgetu<\/p>\n
\nfunction vm_Pinterest_Feed_Widget() {\n\n\t\/\/ Widget settings\n\t$widget_ops = array(\n\t\t'classname' => 'vm_pinterest_feed_widget',\n\t\t'description' => __('A widget display latest pins in sidebar.', 'theme')\n\t);\n\n\t\/\/ Widget control settings\n\t$control_ops = array(\n\t\t'width' => 250,\n\t\t'height' => 250,\n\t\t'id_base' => 'vm_pinterest_feed_widget'\n\t);\n\n\t\/\/ Create the widget\n\t$this->WP_Widget( 'vm_pinterest_feed_widget', __('Pinterest feed', 'theme'),\n $widget_ops, $control_ops );\n\n}\n<\/pre>\nT\u00edm jsme k widgetu p\u0159idali popis, kter\u00fd se bude zobrazovat v administraci a definovali jsme \u0161\u00ed\u0159ku boxu widgetu, kter\u00fd se zobrazuje, pokud je widget um\u00edst\u011bn a vy jej rozbal\u00edte pro \u00fapravu \u00fadaj\u016f. Tato definice se hod\u00ed, pokud budete vytv\u00e1\u0159et widgety s v\u00edce parametry a budete pro n\u011b pot\u0159ebovat v\u00edce m\u00edsta.<\/p>\n
V dal\u0161\u00edm kroku vytvo\u0159\u00edme funkci pro zobrazen\u00ed samotn\u00e9ho widgetu i s v\u00fdpisem posledn\u00edch pins<\/p>\n
\nfunction widget( $args, $instance ) {\n extract( $args );\n\n \/\/ Our variables from the widget settings\n $title = apply_filters('widget_title', $instance['title'] );\n\n $pinterest_feed = fetch_feed( \"http:\/\/pinterest.com\/\" .\n $instance['pinterest_username'] . \"\/feed.rss\" );\n\n if (!is_wp_error( $pinterest_feed ) ) :\n $maxitems = $pinterest_feed->get_item_quantity( $instance['pinterest_quantity'] );\n\t$pinterest_feed = $pinterest_feed->get_items(0, $maxitems);\n\tendif;\n\n\n if ( !empty( $pinterest_feed ) ) {\n\n\t\/\/ Before widget (defined by theme functions file)\n\techo $before_widget;\n\n\t\/\/ Display the widget title if one was input\n\tif ( $title )\n\techo $before_title . $title . $after_title;\n\n\n echo '
V\u00fd\u0161e uveden\u00fd k\u00f3d nejprve na\u010dte RSS fedd, z kter\u00e9ho pak vyp\u00ed\u0161e posledn\u00edch 9 pins.
\nProto\u017ee budeme do widgetu vkl\u00e1dat Pinterest username a po\u010det p\u0159\u00edsp\u011bvk\u016f, je nutn\u00e1 funkce pro aktualizaci prom\u011bnn\u00fdch po odesl\u00e1n\u00ed formul\u00e1\u0159e. Ta nen\u00ed nijak slo\u017eit\u00e1<\/p>\n
\nfunction update( $new_instance, $old_instance ) {\n $instance = $old_instance;\n\n \/\/ Strip tags to remove HTML (important for text inputs)\n $instance['title'] = strip_tags( $new_instance['title'] );\n $instance['pinterest_username'] = strip_tags( $new_instance['pinterest_username'] );\n $instance['pinterest_quantity'] = strip_tags( $new_instance['pinterest_quantity'] );\n\n return $instance;\n}\n<\/pre>\nUkl\u00e1d\u00e1me aktu\u00e1ln\u00ed hodnoty jen pro t\u0159i prom\u011bnn\u00e9, nic v\u00edce nepot\u0159ebujeme.<\/p>\n
Posledn\u00ed funkc\u00ed, kterou dopln\u00edme do na\u0161eho widgetu je samotn\u00fd v\u00fdpis formul\u00e1\u0159e<\/p>\n
\nfunction form( $instance ) {\n\n\t\/\/ Set up some default widget settings\n\t$defaults = array(\n\t\t 'title' => 'Recent pins',\n 'pinterest_username'=>'musilda',\n 'pinterest_quantity'=>'9'\n\t );\n\n\t$instance = wp_parse_args( (array) $instance, $defaults );\n ?>\n\n\n <label for="get_field_name( 'title' ); ?>\">\n <\/label>
\n\n <input id="get_field_id( 'title' ); ?>\"\n name=\"get_field_name( 'title' ); ?>\" type=\"text\"\n value=\"\" \/>\n<\/p>\n\n
\n <label for="get_field_name( 'pinterest_username' ); ?>\">\n <\/label>
\n\n <input id="get_field_id( 'pinterest_username' ); ?>\"\n name=\"get_field_name( 'pinterest_username' ); ?>\"\n type=\"text\" value=\"\" \/>\n<\/p>\n\n
<label for="get_field_name( 'pinterest_quantity' ); ?>\">\n <\/label>
\n\n <input id="get_field_id( 'pinterest_quantity' ); ?>\"\n name=\"get_field_name( 'pinterest_quantity' ); ?>\"\n type=\"text\" value=\"\" \/>\n<\/p>\n\n<?php\n\t}\n<\/pre>\n
P\u0159edposledn\u00ed krok, kter\u00fd mus\u00edme ud\u011blat, je definov\u00e1n\u00ed css styl\u016f pro widget, kter\u00e9 ulo\u017e\u00edme do souboru vm_pinterest_feed.css<\/p>\n
\nul.easy-pinterest{float:left;\n width:100%;\n margin-bottom:20px;\n}\nul.easy-pinterest ol {float:left;\n width: 75px;\n height: 75px;\n overflow: hidden;\n margin: 0px 8px 8px 0px;\n background: #efefef;\n display:table-cell;\n vertical-align:middle;\n}\n\nul.easy-pinterest ol img {max-width: 100%;\n height: auto;\n}\nul.easy-pinterest ol p {display: none;\n}\n<\/pre>\nT\u00edm jsme zd\u00e1rn\u011b dokon\u010dili widget pro zobrazov\u00e1n\u00ed Recent pins v sidebaru a do functions.php vlo\u017e\u00edme n\u00e1sleduj\u00edc\u00ed \u0159\u00e1dek<\/p>\n
\ninclude 'widgets\/widget-pinterest-feed\/widget-pinterest-feed.php';\n<\/pre>\n