18th Mar 2008

Hacer un plugin para WordPress

Hace un par de semanas recuerdo que Lucas Zallio, publicó en su blog un post en el que mostraba cómo hacer un botoncito para publicar noticias en Copada.net. También vi otro como este: http://imgx.com.ar/blogs/copame. Inspirado en esos botones me sumé a hacer un plugin para WordPress, en el que puedas agregar no sólo a Copada.net, sino a los que quieras.

En este caso integraremos a: Copada.net, Blinklist.com, Del.icio.us, Digg.com y Technorati.com. Así es como se verá:

Compartir Noticias

Si tienes algo de conocimiento en PHP y HTML, te va a resultar más sencillo a la hora de programar el plugin. Asimismo, si lo realizas paso a paso y detalladamente, te va a salir. Sino, la otra opción, si no quieres hacer todo el desarrollo, es descargártelo ya armado, el link del plugin se encuentra al final de este tutorial, y si eliges esta opción te recomiendo saltear hasta el punto 8.

Lo que necesitas:

  • Un editor de texto

Instrucciones:

1. Primero vamos a crear una carpeta que llamaremos compartir-noticia, que será el directorio en el que vamos a trabajar. Allí adentro crearemos un archivo llamado index.php y lo abriremos con algún editor de texto. Este archivo necesita la etiqueta <?php que abre el código PHP, y la etiqueta ?> que cierra. Adentro de esas etiquetas comenzaremos la programación:

2. Lo primero es colocar los datos del plugin, Nombre, URL, Descripción, Versión, Autor. En este caso se encuentran los míos. Esto se hace para que WordPress tome el plugin al acceder.

/*
Plugin Name: Compartir Noticia
Plugin URI: http://www.crealotumismo.com/hacer-un-plugin-para-wordpress/
Description: Agrega enlaces en tus posts a sitios de marcadores sociales.
Version: 1.0
Author: Matias
Author URI: http://www.crealotumismo.com/hacer-un-plugin-para-wordpress/
*/

3. Siguendo, vamos a agregar una función al código la cual tiene una matriz que a su vez contiene la data de los sitios a agregar:

function sitios_de_promocion()
{
$sites = array
(
array
(
'sitename' => 'blinklist',
'url' => 'http://www.blinklist.com/index.php?Action=Blink/addblink.php
&Url=PERMALINK&Title=TITLE',
),
array
(
'sitename' => 'copada',
'url' => 'http://copada.net/submit.php?url=PERMALINK&ei=UTF',
),
array
(
'sitename' => 'delicious',
'url' => 'http://del.icio.us/post?v=4&noui&amp;jump=close&url=PERMALINK
&title=TITLE',
),
array
(
'sitename' => 'digg',
'url' => 'http://digg.com/submit?phase=2&url=PERMALINK&amp;title=TITLE',
),
array
(
'sitename' => 'technorati',
'url' => 'http://technorati.com/faves?add=PERMALINK',
),
);
return $sites;
}

4. Ahora crearemos otra función llamada compartir_noticia_html, que será la principal, la que hará mostrar los botones en tu post:

function compartir_noticia_html()
{
$display = sitios_de_promocion();
$html = "";
$imagepath = get_bloginfo('wpurl') . '/wp-content/plugins/
compartir-noticias/images/';
 
if (empty($display))
return "";
 
// Cargar los datos del post
$blogname = urlencode(get_bloginfo('wpurl'));
global $wp_query; 
$post = $wp_query->post;
$permalink = htmlentities(urlencode(get_permalink($post->ID)));
$title = urlencode($post->post_title);
 
$html .= '<div id="compartir_noticia"><ul>';
$html .= '<li class="compartir"><ul>'."\n";
 
foreach($display as $sitename)
{
$url = $sitename['url'];
$url = str_replace('PERMALINK', $permalink, $url);
$url = str_replace('TITLE', $title, $url);
$url = str_replace('BLOGNAME', $blogname, $url);
 
$html .= "\t<li class=\"".strtolower($sitename['sitename'])."\">";
$html .= "<a href=\"$url\" target=\"_blank\" 
title=\"Comparte esta noticia en ".ucfirst($sitename['sitename'])."\">";
$html .= "</a></li>\n";
}
 
$html .= "</ul></li></ul></div>\n";
 
echo $html;
}

5. Las últimas líneas del archivo PHP llamarán a los estilos CSS que crearemos en el siguiente paso:

add_action('wp_head', 'compartir_noticia_header');
function compartir_noticia_header()
{
echo '<link rel="stylesheet" href="'.get_option('siteurl').'/wp-content/
plugins/compartir-noticia/style-compatir.css" type="text/css" 
media="screen" />'."\n";
}

6. El archivo PHP ya está listo, ahora crearemos otro archivo al que llamaremos style-compatir.css, que será nuestra hoja de estilo, y le agregaremos el siguiente código:

#compartir_noticia {
clear: both;
margin-top: 20px;
}
#compartir_noticia ul {
font-size: 11px;
font-family: Arial,Helvetica,sans-serif;
margin: 0 0 6px 0;
padding: 0;
height: 19px;
overflow:hidden;
}
#compartir_noticia ul li {
background-repeat: no-repeat;
float: left;
display: inline;
height: 18px;
font-weight: bold;
list-style-type: none;
margin: 0px 0px 0 0;
padding:0px;
}
#compartir_noticia ul li a {
padding: 0px;
margin: 0px;
}
#compartir_noticia a:hover {
text-decoration: underline;
}
/* Los estilos de COMPARTIR */
#compartir_noticia li.compartir{
width: 200px;
margin: 0px 0px 0px 10px;
padding: 0px 25px 5px 0px;
text-align: right;
background-image: url('http://www.crealotumismo.com/wp-content/plugins/
compartir-noticia/images/compartir.gif');
background-repeat: no-repeat;
background-position: 0px 0px;
}
#compartir_noticia li.compartir ul{
width: 145px;
margin: 0px;
padding: 0px 0px 5px 85px;
text-align: right;
}
#compartir_noticia li.compartir ul li{
list-style-type: none;
padding:0px;
}
#compartir_noticia li.compartir ul li a {
padding: 0px 0px 0px 8px;
width: 19px;
height: 18px;
display: inline;
float: left;
background-position: left top;
background-repeat: no-repeat;
}
#compartir_noticia li.compartir ul li.copada a{
background-image: url('http://www.crealotumismo.com/wp-content/plugins/
compartir-noticia/images/copada.gif');
}
#compartir_noticia li.compartir ul li.digg a{
background-image: url('http://www.crealotumismo.com/wp-content/plugins/
compartir-noticia/images/digg.gif');
}
#compartir_noticia li.compartir ul li.delicious a{
background-image: url('http://www.crealotumismo.com/wp-content/plugins/
compartir-noticia/images/delicious.gif');
}
#compartir_noticia li.compartir ul li.technorati a{
background-image: url('http://www.crealotumismo.com/wp-content/plugins/
compartir-noticia/images/technorati.gif');
}
#compartir_noticia li.compartir ul li.blinklist a{
background-image: url('http://www.crealotumismo.com/wp-content/plugins/
compartir-noticia/images/blinklist.gif');
}

Deberán cambiar las URLs de las imágenes por las URLs suyas.

7. Descarga el pack de imágenes y descomprímelo en la carpeta compartir-noticia: Descargar Pack de Imágenes

8. El plugin ya está listo. Lo que tienes que hacer ahora es colocarlo en la carpeta wp-content\plugins de tu WordPress. Luego ve al administrador y actívalo desde el navegador.

9. Ahora para que aparezcan los botones en tu post, debes agregar en el archivo single.php o en algunos casos el nombre es index.php, depende de tu theme de WordPress, la siguiente línea de código:

<?php compartir_noticia_html(); ?>

Listo, ahora a esperar a que tus usuarios publiquen tus noticias. 🙂

Para los que no querían hacer todo el desarrollo de este plugin, y sólo utilizarlo, acá les dejo la descarga de todos los archivos: DESCARGAR PLUGIN

Publicado por matias



Comenta en este post y suma puntos en el ranking de comentaristas


15 comentarios para “Hacer un plugin para WordPress”

  1. copada.net Dice:

    Plugin de WordPress con botón de Copada.net…

    Podrás ver como realizar un plugin de WordPress con un botón para publicar en Copada.net, o directamente descargártelo listo para usar en tu blog….

  2. Neri Dice:

    Muy bueno!, bien explicado 😀
    Copado!
    Saludos!

  3. anitaX Dice:

    Hola! gracias por enlazar mi blog, siempre ando por aca buscando tutoriales.
    Ya descargué el plugin y ahora lo voy a instalar.
    😀

  4. Leonardo Parada Dice:

    Hola…estaba buscando como insertar de buena manera una hoja de estilo entre las etiquetas y llegue a tu blog.

    Trate de seguir al pie de la letra tu tutorial pero no me inserta la hosja de estilo…por lo que finalmente reduje el codigo para ver en que estoy fallando pero no logro dar con el error.

    Revise el codex de wordpress pero no es muy explicativo al respecto.
    http://codex.wordpress.org/Hook_Reference/wp_head

    Podrias ayudarme?

  5. Leonardo Parada Dice:

    …el codigo PHP tu blog me lo borra…

  6. Leonardo Parada Dice:

    tu formulario de contacto tampoco lo permite.

  7. Matías Dice:

    La manera para agregar una hoja de estilo entre las etiquetas <head>, desde algún plugin, es así:

    add_action(‘wp_head’, ‘tu_funcion’);
    function tu_funcion()
    {
    echo ‘ <link rel="stylesheet" href="[URL DEL ARCHIVO CSS]" type="text/css" media="screen" />’;
    }

    La idea es crear una función que imprima la etiqueta <link> en la cabecera.

  8. Leonardo Parada Dice:

    …la reduccion de la cual te hablaba era algo mas simple aun….reemplazando la cuarta fila del codigo que posteas por

    echo “hola mundo”

    lo que me entro dudas es que si la funcion add_action funciona al escribirla en un post o una page (con el plugin PHPexec porsupuesto)

  9. Leonardo Parada Dice:

    me falto agregar que del modo que intento hacerlo (colocando el codigo en el post) no me funciona.

  10. Matías Dice:

    No veo lo malo de en vez de ponerte el “Hola Mundo” te pusiera el código como va, pero eso es capricho tuyo. Ahora bien, para agregar un estilo en un post individual existe un plugin que te va a ayudar: http://www.yukei.net/2007/01/este-estilo-un-plugin-para-wordpress/

    Con él podrás colocar estilos personalizados a cada entrada por separado.
    Espero que te sirva.

  11. Kênh dự án chung cư hà nội Dice:

    Some people think they are able to spend less by
    serving as their particular general contractor.
    Seeking the assistance and advice from your well experienced contractor or
    interior designer for the best paint colors to make use of in your home may
    be rewarding. There are many people out there within the world that prefer
    to work as Contractors since it fits their personal needs.

  12. tinchungcu24h.info Dice:

    It may also require heavy capital and can depend heavily on cash flow.
    The police will be able to present you with all the information regarding
    crime rates. Perhaps, you will discover lots of money in savings available on every transaction to get
    well worth the commitment you have to put in.

  13. https://chungcumandarin.net Dice:

    Some examples are perhaps someone asking to buy land for usage being
    an allotment so it’s bought cheaply. 1) In-fill drilling directed
    at enabling additional resources to be become reserves;.

    All ALTA surveys must meet the minimum requirements as set out jointly by the American Land Title Association along with the American Congress on Surveying and Mapping (ACSM).

  14. tintucduanvn.info Dice:

    I believe it is imperative any particular one meditates and works on just
    focusing the mind. Familiarize yourself with certain regulations in terms of your restrictions on abandoned properties in storage
    facilities. That way you eliminate every one of the costs of making use of the trading platform wanted to you and
    you also pay only a little brokerage fee which can be shared amongst all
    of the fund pool contributors jointly entity handles the complete, larger pool.

  15. tinchungcu24h.info Dice:

    After all, this is exactly why I came by doing this and likely
    the reason that you’re here too. A few suggestions to
    incorporate this space to your real-estate marketing plans might include:
    Advertise “featured listing”. You can also use Twitter to find by keyword as well
    as a variety of more features that will
    assist you hone in on who your target audience is.

Deja un comentario

*