Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Crea un plugin WP con panel de administracion

Crea un plugin WP con panel de administracion

Autor jc mouse lunes, julio 8, 2013

En este post crearemos un plugin para el CMS WordPress el cual comprende el plugin en si, un panel de administración y el uso de hojas de estilos. Este es un plugin más avanzado de otro plugin que hicimos anteriormente [Crear un plugin wordpress “Banned Word”].

palabra prohibida

Necesitamos

– WordPress 3 o superior instalado en local, si tienes opción de usar WP en un hosting en la  nube, bienvenido 🙂

– IDE Netbeans 7 o superior

– Conocimientos sobre php, html, css

– Saber usar el CODEX de WordPress

Nivel: Intermedio

Duración: 30 minutos

1. Crea un nuevo proyecto PHP Aplication el cual llamaremos “Plugin Banned Word Reload” y coloca como destino la carpeta PLUGINS de WP y presiona siguiente.

reload

2. En la ventana de Run Configuration, deja las opciones como se ven en la imagen

Run configuration

wordpress-3.5.1 es la versión de WP que yo tengo instalado en mi equipo, si tu tienes otra versión o esta con otro nombre, debes colocar esa carpeta.

3. Para terminar de crear el proyecto presiona FINISH.

4. Nuestro plugin comprende un archivo php banned_word_reload donde escribiremos todo el código del plugin y una hoja de estilos bw_style.css que nos servirá parda dar formato a nuestro panel de administración. Debes crearlos tal cual se ve en la imagen de abajo.

beans php

5.  Añadimos al archivo banned_word_reload.php la estructura que tendrá el plugin y guardamos.

<?php
/*
Plugin Name: Plugin Banned Word Reload
Plugin URI: http://wwww.example.com
Description: Plugin que reemplaza palabras prohibidas en los comentarios por otra indicada por el administrador
Version: 2.0.1
Author: jc mouse
Author URI: http://www.jc-mouse.net/
License: 🙂
*/

/**
 * Reemplaza palabras de los comentarios que se encuentra en una 'Lista Negra'
 * y las reemplaza por otra 
 * @param $comments comentarios worpress
 */
function bw2_change_word( $comments )
{
    //codigo aqui
}
add_filter('comment_text', 'bw2_change_word',1 ); //se añade funcion 

/* == Estilos CSS para la pagina de administracion ==*/
add_action( 'admin_init', 'bw2_style' );
function bw2_style() 
{
    //codigo aqui 
}

/* == pagina de administracion del plugin ==*/
add_action( 'admin_menu', 'bw2_admin_functions' );

function bw2_admin_functions()
{
   //codigo aqui 
}

function bw2_admin_panel()
{
    //codigo aqui 
}

?>

Abrimos WP y en la sección de plugin ya veremos el nuestro, activemos el plugin, no pasara nada, le falta código 🙂

wp plugin install

– En la primera parte entre las etiquetas /* */ declaramos los datos de nuestro plugin, esto es obligatorio

– Declaramos y añadimos el filtro, la función bw2_change_word(), esta es la función principal del plugin, aquí es donde colocaremos el código para realizar el reemplazo de palabras prohibidas.

– Después añadimos las hojas de estilo.

– Finalmente declaramos las funciones para el panel de administración

Se puede ver que hacemos uso de nombres de función un poco extrañas, esto es para evitar repetir nombres de funciones con otros plugin lo cual puede causar que nuestro plugin no funcione, osea la función change_word() puede repetirse en otro plugin, pero xyz123_change_word(), es más difícil que se repita 🙂

A continuación pasamos a explicar y completar el código de cada una de las anteriores secciones citadas

bw2_change_word()

function bw2_change_word( $comments )
{
    //pagina
    global $pagenow;
    //palabras prohibidas
    $str = explode(",", get_option('str_banned_word') );        
    //palabra(s) de reemplazo
    $newstr = '<a href="#">#$@wtf!!!#%</a>' ;  
    //Si no se encuentra en la pagina de EDICION DE COMENTARIOS
    //muestra comentarios con palabras censuradas
    if( $pagenow != 'edit-comments.php' )
    {            
        $html = str_ireplace( $str, $newstr, $comments );    
        return $html;
    }
    else //muestra comentarios originales
    {
        return $comments;
    }
}

Esta función recoge un string mediante get_option(‘str_banned_word’), este string lo crearemos más adelante desde el panel de administración.

Con la ayuda de la etiqueta EXPLODE, convertimos el string en un array, luego declaramos la(s) palabra(s) que servirán para reemplazarlas en los comentarios.

bw2_style() 

Para añadir hojas de estilo solo al panel de administración, utilizamos el siguiente código:

add_action( 'admin_init', 'bw2_style' );
function bw2_style() 
{
      $css_file = plugins_url( 'bw_style.css', __FILE__ );
       wp_enqueue_style('bw2-style', $css_file, false, '1.28' );                 
}

Obtenemos la dirección completa del archivo CSS con plugins_url y la añadimos con wp_enqueue_style.

Pagina de administración del plugin

Lo primero que hacemos es añadir una nueva pagina para el panel de administración

function bw2_admin_functions()
{
   add_options_page( 'bw2_admin_page' , 'Plugin Banned Word' , 'manage_options', __FILE__, 'bw2_admin_panel' );
}

Al declarar la nueva pagina, declaramos también la función que se ejecutara en ella, la función es bw2_admin_panel, esta función contiene el código para las acciones $_POST y también el código HTML necesario para formar la interfaz que ve el usuario, si bien lo mejor es utilizar un archivo aparte, dado el tamaño del plugin no hay mayores problemas en colocar todo junto.

Nota: cuidado con las etiquetas php de apertura y cierre de código, repito estamos utilizando código HTML directamente en el archivo.

function bw2_admin_panel()
{        
    //Para actualizacion de datos mediante POST
    if( isset($_POST['send_str_plugin']) )
    {    
        //validacion
        if( strlen( $_POST['str_banned_word'] ) > 0 )
        {
            update_option('str_banned_word', $_POST['str_banned_word'] );
            $msg = 'Registro de palabras prohibidas.... Actualizado ' . date("F j, Y, g:i a") ;    
        }
        else
        {
            $msg = 'Debe escribir una palabra por lo menos';    
        }
    }
?>

<div class='wrap'>
    <h1>Plugin Banned Word</h1>
    <div id="bw-box">
        <form method='post'>
           <table border="0" class="bw-table">
            <tr>
              <th colspan="2">Palabras prohibidas</th>
            </tr>
            <tr>
              <td><input type="text" name="str_banned_word" value="<?php echo get_option('str_banned_word'); ?>" /></td>
              <td><input type="submit" name="send_str_plugin" value="Actualizar" /></td>
            </tr>
            <tr>
                <td colspan="2"><span>Ej.: pucha,caracho,meda</span></td>
            </tr>
          </table>
        </form>        
    </div>
    <?php if( strlen($msg)>0): ?>
        <div id="bg-alert"><?php echo $msg; ?></div>
    <?php endif; ?>
</div>

<?php

}//--> end bw2_admin_panel

Cuando presionemos el botón actualizar, registramos/actualizamos mediante update_option una nueva variable en la base de datos de WP.

update_option(‘str_banned_word’, $_POST[‘str_banned_word’] );

Finalmente con el uso de etiquetas HTML daremos forma a la interfaz de usuario.

El archivo banned_word_reload.php queda de la siguiente forma:

<?php
/*
Plugin Name: Plugin Banned Word Reload
Plugin URI: http://wwww.example.com
Description: Plugin que reemplaza palabras prohibidas en los comentarios por otra indicada por el administrador
Version: 2.0.1
Author: jc mouse
Author URI: http://www.jc-mouse.net/
License: 🙂
*/

/**
 * Reemplaza palabras de los comentarios que se encuentra en una 'Lista Negra'
 * y las reemplaza por otra 
 * @param $comments comentarios worpress
 */
function bw2_change_word( $comments )
{
    //pagina
    global $pagenow;
    //palabras prohibidas
    $str = explode(",", get_option('str_banned_word') );        
    //palabra(s) de reemplazo
    $newstr = '<a href="#">#$@wtf!!!#%</a>' ;  
    //Si no se encuentra en la pagina de EDICION DE COMENTARIOS
    //muestra comentarios con palabras censuradas
    if( $pagenow != 'edit-comments.php' )
    {            
        $html = str_ireplace( $str, $newstr, $comments );    
        return $html;
    }
    else //muestra comentarios originales
    {
        return $comments;
    }
}
add_filter('comment_text', 'bw2_change_word',1 ); //se añade funcion 

/* == Estilos CSS para la pagina de administracion ==*/
add_action( 'admin_init', 'bw2_style' );
function bw2_style() 
{
    $css_file = plugins_url( 'bw_style.css', __FILE__ );
    wp_enqueue_style('bw2-style', $css_file, false, '1.28' );      
}

/* == pagina de administracion del plugin ==*/
add_action( 'admin_menu', 'bw2_admin_functions' );

function bw2_admin_functions()
{
   add_options_page( 'bw2_admin_page' , 'Plugin Banned Word' , 'manage_options', __FILE__, 'bw2_admin_panel' );
}

function bw2_admin_panel()
{        
    //Para actualizacion de datos mediante POST
    if( isset($_POST['send_str_plugin']) )
    {    
        //validacion
        if( strlen( $_POST['str_banned_word'] ) > 0 )
        {
            update_option('str_banned_word', $_POST['str_banned_word'] );
            $msg = 'Registro de palabras prohibidas.... Actualizado ' . date("F j, Y, g:i a") ;    
        }
        else
        {
            $msg = 'Debe escribir una palabra por lo menos';    
        }
    }
?>

<div class='wrap'>
    <h1>Plugin Banned Word</h1>
    <div id="bw-box">
        <form method='post'>
           <table border="0" class="bw-table">
            <tr>
              <th colspan="2">Palabras prohibidas</th>
            </tr>
            <tr>
              <td><input type="text" name="str_banned_word" value="<?php echo get_option('str_banned_word'); ?>" /></td>
              <td><input type="submit" name="send_str_plugin" value="Actualizar" /></td>
            </tr>
            <tr>
                <td colspan="2"><span>Ej.: pucha,caracho,meda</span></td>
            </tr>
          </table>
        </form>        
    </div>
    <?php if( strlen($msg)>0): ?>
        <div id="bg-alert"><?php echo $msg; ?></div>
    <?php endif; ?>
</div>

<?php

}//--> end bw2_admin_panel

?>

6. Para terminar el código CSS correspondiente al plugin, no hace falta mayor comentario 🙂

#bw-box{
    border: solid #000 1px;
    padding: 10px;
}

#bw-box .bw-table{}
#bw-box .bw-table th{ 
    font-weight: bold; 
    text-align: left; }

#bw-box .bw-table span{ 
    font-style:  italic;
    font-size: 10px;
}

#bg-alert{    
    margin: 16px 0;
    background-color: #FFDBD5;
    border: 1px dotted #ed1c24;
    font-weight: bold;
    font-style: italic;
    padding: 6px 10px;    
}

#bw-box .bw-table input[type="text"]
{
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    width: 380px;
    color: #777;
    border: 1px solid #5B5B5B;
    font: 12px Helvetica, Arial, sans-serif;
    padding: 6px;
}
#bw-box .bw-table input[type="text"]:focus
{
    -webkit-box-shadow: 0 0 2px #ed1c24 inset;
    -moz-box-shadow: 0 0 2px #ed1c24 inset;
    -ms-box-shadow: 0 0 2px #ed1c24 inset;
    -o-box-shadow: 0 0 2px #ed1c24 inset;
    box-shadow: 0 0 2px #ed1c24 inset;
    background-color: #E7E7E7;
    border: 1px solid #ed1c24;
    outline: none;
}

#bw-box .bw-table input[type="submit"]
{    
   width: 100%;  
  color: #ffffff;
  font-size: 16px;
  padding: 10px;
  text-decoration: none;
  -moz-box-shadow: 0px 1px 3px #666666;
  text-shadow: 1px 1px 3px #666666;
  border: solid #ffffff 2px;
  background-color: #D9290B;
}

#bw-box .bw-table input[type="submit"]:hover
{
    background-color: #F1624A;
}

7.  Guardamos y actualizamos el panel de administración de WP , podremos ver una nueva opción en AJUSTES ->PLUGIN BANNED WORD, dale clic para entrar

wp ajustes

Tenemos lista nuestro panel de administración del plugin, escribe unas cuantas palabras, separadas por comas y dale ACTUALIZAR.

palabra prohibida

Ya estamos listos para probar el funcionamiento del plugin, añade un comentario con un text cualquiera y con palabras que nosotros queramos prohibir, por ejemplo los nombres de países (argentina, brasil, peru, chile, etc):

Eu sit tincidunt incorrupte peru definitionem, vis mutat affert percipit cu, 
eirmod consectetuer signiferumque eu per bolivia. In usu latine equidem venezuela
dolores. Quo no falli viris intellegam, argentina ut fugit veritus placerat per.
Ius id vidit brasil volumus mandamus, vide veritus democritum te nec, ei eos debet
chile libris consulatu.

Si nuestro plugin funciona ya podremos ver como se reemplazan las palabras PROHIBIDAS en los comentarios de cada post.

quiere llorar

FIN 🙂

Plugin WP Banned Word Reload

 Nota: Un buen observador dirá que a este plugin le falta la opción para registrar la palabra que sirve para reemplazar las palabras censuradas y tiene razón 🙂 , pero si pudiste desarrollar este plugin sin problemas, añadir esta o más acciones no tendrás ningún problema , finalmente pregunta porque “Mas vale parecer tonto y preguntar, que parecer sabio e ignorar”

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

SharedPreferences: Preferencias de Usuario

SharedPreferences: Preferencias de Usuario

En este post construiremos paso a paso un SharedPreferences más conocido en español como “Preferencias de Usuario...

Reproducir video con JavaFX y HTML5

Reproducir video con JavaFX y HTML5

JavaFX implementa el control webview que nos permite agregar contenido HTML cargado mediante la clase WebEngine. El comp...

Conectar java con Firebird

Conectar java con Firebird

En este tutorial veremos la forma de conectarse a una base de datos de Firebird utilizando el lenguaje Java y el IDE Net...

Material Design: Notificaciones (Snackbar)

Material Design: Notificaciones (Snackbar)

Material Design introduce una nueva forma de mostrar notificaciones al usuario, estos son los snackbar, similares a los...

Leer datos de Firebase desde Android

Leer datos de Firebase desde Android

En este post crearemos una aplicación en Android Studio para conectarnos con nuestra base de datos de Firebase y leer al...

Envío de correo con JavaMail/Netbeans

Envío de correo con JavaMail/Netbeans

JavaMail es una expansión de Java que facilita el envío y recepción de e-mail desde código java. JavaMail implementa el...

Comparte lo que sabes

Categorias

Últimas entradas

En este post, crearemos una tabla swing que implemente un control jcombobox en una columna de una tabla, llenaremos con...

En este post personalizaremos una tabla JTable Swing para pintar una imagen de fondo y darle un poco de estilo al encabe...

De las pocas herramientas disponibles entre librerías, frameworks, engines, etc para el desarrollo de videojuegos en len...

¿Quien no ha querido programar un juego? creo que la mayoría si no es que todos los que conocen de programación sin impo...

Android Bolivia

MAUS