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

Mapas con HTML5 – Funciones de pintado – Parte 5

Mapas con HTML5 – Funciones de pintado – Parte 5

En esta penúltima parte, declaramos las funciones que nos permitirán pintar los shapes en el canvas, vamos al grano que...

Tabla para inventarios de Entradas y Salidas

Tabla para inventarios de Entradas y Salidas

A veces navegando en la internet buscando novedades , investigando o simplemente perdiendo el tiempo 🙂 se encuentran cos...

Crea tu lector de códigos QR

Crea tu lector de códigos QR

En este post desarrollaremos una aplicación que nos permitirá leer un código QR y capturar la información que contiene y...

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

Blog MVC – Consultas Ajax a la base de datos [p5]

Blog MVC – Consultas Ajax a la base de datos [p5]

Quinta parte de la serie de tutoriales “Creación de un blog siguiendo el patrón MVC (Modelo, Vista y Controlador)...

Cargar fuente TTF

Cargar fuente TTF

Necesitamos: Android Studio 2 tipos de fuente TTF Agregar Archivo de fuente al proyecto Paso 1: Crear carpeta assets Cli...

Comparte lo que sabes

Categorias

Últimas entradas

En este post conoceremos algunos de los operadores de comparación que existen en Linux y realizaremos unos ejercicios pa...

En este post conocernos lo que son las Estructuras de Control IF en los script de Bash. Estas estructuras nos ayudan a c...

Todo producto tecnológico tiene un ciclo de vida, algunos bastante corto otros muy largo, podemos mencionar el software...

Cada versión de Linux viene con su propia terminal predeterminada para interactuar con el Sistema Operativo a través de...

Android Bolivia

MAUS