Crea un plugin WP con panel de administracion

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”].

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.

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

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.

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: https://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 🙂

– 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: https://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

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

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.

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»

Crea un plugin WP con panel de administracion

Tags

Últimas entradas

FOCA: Herramienta para recolección y análisis de Metadatos

Paginación en SQL Server 2008 y Laravel

¿Como paginar con Laravel 11?

¿Cómo hacer el video ABRAZO gratis?

Crea y usa Traits en Laravel

Artículos similares

Gráfico de lineas con jfreechart

UML Java: easyUML plugins para Netbeans

Crear Helpers en Laravel 10

Obtener Metadatos de un ResultSet

GraphADT: Clases para trabajar con grafos en java

GSON: Generar objetos java desde JSON

JC Mouse | Bolivia