Como crear un plugin en WordPress paso a paso desde cero
Vamos a crear un plugin en WordPress desde cero. Para este ejemplo voy a crear un plugin para que se muestre un bloque con dos botones Call To Action para mostrar el teléfono y el contacto en la web de manera siempre visible y fija en la parte inferior de la web. El plugin lo tengo activado y como podéis ver está en la parte inferior de la web.
Estructura del plugin en WordPress
Para empezar necesitamos tener acceso al código de nuestra web, y dentro wp-content > plugins vamos a crear una carpeta, y la llamamos fixed-call-to-action y dentro creamos la siguiente estructura:
Dentro de la carpeta fixed-call-to-action hay una carpeta llamada css y dentro un archivo styles.css que dará estilos a nuestro plugin dentro de WordPress. También una carpeta llamada img para guardar los iconos. Y por último nuestro index.php donde tenemos el código del plugin. Si quieres puedes crearte la misma estructura.
Para los iconos de los botones he usado estos dos:
Y para el icono del menú de WordPress he usado este:
Crear un plugin en WordPress paso a paso
Si ya tenemos la estructura preparada y nuestro index.php preparado para editar, ya podemos empezar.
Lo primero que vamos a hacer es editar todo el código en nuestro index.php, empezamos declarando el plugin, nombre, versión, etc.
<?php /* Plugin Name: Fixed Call To Action Plugin URI: Description: Fixed Call To Action for pc and mobile Version: 1.0 Author: Generacionweb Author URI: https://www.generacionweb.es License: GPL2 */
Con esto ya nos saldrá en el apartado de WordPress nuestro plugin:
Pero claro, esto todavía no hace nada, lo primero que vamos a hacer es añadir datos a la base de datos.
Añadir tabla a la base de datos de WordPress
Para no liar demasiado voy a explicar un poco el plugin que vamos a crear. Queremos mostrar teléfono y pide cita en la parte inferior siempre visible:
Para ello necesitaremos los siguientes datos para guardar en la base de datos:
- Teléfono
- Texto sobre el teléfono
- Color del texto
- Color del número de teléfono
- Color de fondo del botón del teléfono
- Márgenes para versión de pc
- Url del enlace de contacto
- Texto de contacto
- Color de texto de contacto
- Color de fondo del botón de contacto
La tabla la vamos a llamar calltoaction y vamos a utilizar el mismo prefijo que tu wordpress usa en la base de datos.
add_action( 'init', 'call_to_action_install' );
function call_to_action_install() {
//si no existe la base de datos, la creará
global $wpdb;
$table_calltoaction = $wpdb->prefix . "calltoaction";
if($wpdb->get_var("SHOW TABLES LIKE '$table_calltoaction'") != $table_calltoaction) {
$sql = "CREATE TABLE " . $table_calltoaction . " (
id INT(10) NOT NULL AUTO_INCREMENT,
phone VARCHAR(100) DEFAULT '' NOT NULL,
text_phone VARCHAR(100) DEFAULT '' NOT NULL,
color_text_phone VARCHAR(10) NOT NULL,
color_phone VARCHAR(10) NOT NULL,
background_phone VARCHAR(10) NOT NULL,
margen VARCHAR(10) NOT NULL,
url VARCHAR(100) DEFAULT '' NOT NULL,
text_url VARCHAR(100) DEFAULT '' NOT NULL,
color_url VARCHAR(10) NOT NULL,
background_url VARCHAR(10) NOT NULL,
PRIMARY KEY (id)
)ENGINE=InnoDB DEFAULT COLLATE=utf8_general_ci;";
require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
dbDelta( $sql );
//añadimos en la base de datos un valor por defecto
$wpdb->insert($table_calltoaction, array(
'phone' => '123 45 67 89',
'text_phone' => 'Pide cita',
'color_phone' => '#eee',
'color_text_phone' => '#8BC34A',
'background_phone' => '#111',
'margen' => '10px',
'url' => '#',
'text_url' => 'Contactar',
'color_url' => '#fff',
'background_url' => '#333'
));
}
}Como veréis debajo de crear la base de datos, ya hemos metido unos datos por defecto con $wpdb->inset.
De momento seguimos sin ver ningún resultado, ya que la instalación simplemente añade una tabla a la base de datos y añade datos en los campos.
La siguiente función servirá para poder borrar el plugin, si le damos a borrar, borrará carpeta y la tabla de la base de datos que hemos creado.
function call_to_action_unistall() {
global $wpdb;
$table_calltoaction = $wpdb->prefix . "calltoaction";
$sql = "DROP TABLE $table_calltoaction";
}
register_deactivation_hook(__FILE__, 'call_to_action_unistall');
Vale, ¡ya tenemos la base de datos y la instalación lista!
Añadir un enlace en el menú del administrador de WordPress
Para mostrar un enlace de nuestro plugin en el menú del escritorio de WordPress usaremos la acción admin_menu.
add_action('admin_menu', 'menuCall');
function menuCall(){
$blogs_menu_main = add_menu_page(
'CALL TO ACTION', //Etiqueta de título
'Call To Action', //Texto en el menú
'administrator', //rol para mostrarlo
'call_to_action', //slug para referirse al menú
'calltoaction', //la función a la que llamará el menú
plugins_url('/img/ico.png' , __FILE__ ) //el icono en el menú
);
}Bien, con esto ya nos tendría que salir el enlace en el menú de WordPress:
¡Esto va cogiendo forma! Pero sigue sin verse nada, el botón no carga nada, ya que no tenemos ninguna función llamada calltoaction creada aún. Al crear el menú hemos definido la función calltoaction como la función que se cargará en la url call_to_action también definida en el código del menú.
Pero antes de esto vamos a añadir al head del escritorio de wordpress unos estilos nuestros y bootstrap para hacer más cómodo nuestro diseño.
Añadir bootstrap en admin head
Para añadir bootstrap en el escritorio de WordPress usaremos la acción admin_head.
function admin_styles(){
echo'<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">';
echo'<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">';
echo'<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>';
echo "<link rel='stylesheet' href='". get_site_url()."/wp-content/plugins/fixed-call-to-action/css/styles.css' type='text/css' />";
}
// Añadimo el hook en el front-end <head></head>
add_action('admin_head', 'admin_styles');
Y con esto ¡ya podemos empezar a maquetar nuestro plugin!
Crear tabs para nuestro plugin
Ahora vamos a crear una estructura para nuestro plugin, tendrá dos enlaces (Tus datos y Vista previa), en la primera pestaña habrá un formulario que actualizará los datos guardados en nuestra tabla de la base de datos previamente creada y la otra pestaña cargará una visualización de como quedan los botones.
La función calltoaction es la que llama el botón que hemos creado en el menú lateral del escritorio de WordPress. Como veréis ya he empezado a usar bootstrap para mostrar tanto los tabs izquierdos como un bloque de información del plugin en la derecha.
function calltoaction(){
global $wpdb;
$table_calltoaction = $wpdb->prefix . "calltoaction";
$url_dir_links_panel= get_site_url()."/wp-admin/admin.php?page=call_to_action";
?>
<div class="wrap">
<h1 class="wp-heading-inline">CALL TO ACTION</h1>
<div class="row">
<div class="col-md-8">
<h2 class="nav-tab-wrapper" id="wpseo-tabs">
<a class="nav-tab <?php if($_GET['link']=='') echo 'nav-tab-active' ?>" href="<?php echo $url_dir_links_panel; ?>" />TUS DATOS</a>
<a class="nav-tab <?php if($_GET['link']=='vista') echo 'nav-tab-active' ?>" href="<?php echo $url_dir_links_panel; ?>&link=vista" />VISTA PREVIA</a>
</h2>
<br/><br/>
<?php // MENU
if ($_GET['page']=='call_to_action' && (!isset($_GET['link']))) cta_datos(); //.... 0. TUS DATOS
if (isset ($_GET['link'])){
if (isset ($_GET['page'])){
if ($_GET['page']=='call_to_action' && $_GET['link']=='vista') cta_vista(); //.... 1. VISTA PREVIA
}
}
?>
</div>
<div class="col-md-4">
<h3>FUNCIONAMIENTO</h3>
<p>Añade el teléfono y el enlace al formulario de contacto, configura el estilo de los elementos.</p>
</div>
</div>
</div> <!--fin wrap-->
<?php
}
Ahora solo nos quedan las funciones que llaman a rellenar las dos pestañas, cta_datos y cta_vista.
Creando las funciones de nuestro plugin
Vamos con la primera función, cta_datos() cargará primero los datos de la base de datos, y luego los rellenará en los inputs del formulario. El formulario tiene un input hidden con la variable editar que indica que si el formulario ha sido editado sobrescribe los datos recibidos y los actualiza en la base de datos.
function cta_datos(){
global $wpdb;
$table_calltoaction = $wpdb->prefix . "calltoaction";
$results = $wpdb->get_results( "SELECT * FROM $table_calltoaction");
if(!empty($results)){
foreach($results as $row){
$telefono=$row->phone;
$texto_telefono=$row->text_phone;
$color_telefono=$row->color_phone;
$color_texto_telefono=$row->color_text_phone;
$fondo_telefono=$row->background_phone;
$margen=$row->margen;
$url=$row->url;
$texto_url=$row->text_url;
$color_url=$row->color_url;
$fondo_url=$row->background_url;
}
}
//solo si damos a guardar
if(isset ($_GET['editar']) && $_GET['editar']=='si'){
$texto_telefono = $_GET['texto_telefono'];
$telefono = $_GET['telefono'];
$color_telefono = $_GET['color_telefono'];
$color_texto_telefono = $_GET['color_texto_telefono'];
$fondo_telefono = $_GET['fondo_telefono'];
$margen = $_GET['margen'];
$texto_url = $_GET['texto_url'];
$url = $_GET['url'];
$color_url = $_GET['color_url'];
$fondo_url = $_GET['fondo_url'];
$wpdb->update($table_calltoaction, array(
'phone' => $telefono,
'text_phone' => $texto_telefono,
'color_phone' => $color_telefono,
'color_text_phone' => $color_texto_telefono,
'background_phone' => $fondo_telefono,
'margen' => $margen,
'url' => $url,
'text_url' => $texto_url,
'color_url'=> $color_url,
'background_url' => $fondo_url
), array('id' => '1'));
?>
<div class="alert alert-success" role="alert">
DATOS GUARDADOS CORRECTAMENTE
</div>
<?php
}
?>
<form method="get" >
<input type="hidden" name="page" value="call_to_action" />
<input type="hidden" name="editar" value="si" />
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Call To Action: <b>Teléfono</b></div>
<div class="panel-body">
<div class="form-group row">
<label for="staticEmail" class="col-sm-5 col-form-label">Texto teléfono</label>
<div class="col-sm-7">
<input type="text" class="form-control-plaintext" id="texto_telefono" name="texto_telefono" value="<?php echo isset($texto_telefono) ? $texto_telefono : ''; ?>">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-5 col-form-label">Teléfono</label>
<div class="col-sm-7">
<input type="text" class="form-control-plaintext" id="telefono" name="telefono" value="<?php echo isset($telefono) ? $telefono : ''; ?>">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-5 col-form-label">Color texto</label>
<div class="col-sm-7">
<input type="text" class="form-control-plaintext" id="color_telefono" name="color_telefono" value="<?php echo isset($color_telefono) ? $color_telefono : ''; ?>">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-5 col-form-label">Color número teléfono</label>
<div class="col-sm-7">
<input type="text" class="form-control-plaintext" id="color_texto_telefono" name="color_texto_telefono" value="<?php echo isset($color_texto_telefono) ? $color_texto_telefono : ''; ?>">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-5 col-form-label">Color fondo</label>
<div class="col-sm-7">
<input type="text" class="form-control-plaintext" id="fondo_telefono" name="fondo_telefono" value="<?php echo isset($fondo_telefono) ? $fondo_telefono : ''; ?>">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-5 col-form-label">Margen derecho</label>
<div class="col-sm-7">
<input type="text" class="form-control-plaintext" id="margen" name="margen" value="<?php echo isset($margen) ? $margen : ''; ?>">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Call To Action: <b>Link</b></div>
<div class="panel-body">
<div class="form-group row">
<label for="staticEmail" class="col-sm-5 col-form-label">Texto URL</label>
<div class="col-sm-7">
<input type="text" class="form-control-plaintext" id="texto_url" name="texto_url" value="<?php echo isset($texto_url) ? $texto_url : ''; ?>">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-5 col-form-label">URL</label>
<div class="col-sm-7">
<input type="text" class="form-control-plaintext" id="url" name="url" value="<?php echo isset($url) ? $url : ''; ?>">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-5 col-form-label">Color texto</label>
<div class="col-sm-7">
<input type="text" class="form-control-plaintext" id="color_url" name="color_url" value="<?php echo isset($color_url) ? $color_url : ''; ?>">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-5 col-form-label">Color fondo</label>
<div class="col-sm-7">
<input type="text" class="form-control-plaintext" id="fondo_url" name="fondo_url" value="<?php echo isset($fondo_url) ? $fondo_url : ''; ?>">
</div>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary mb-2">Guardar datos</button>
</form>
<?php
}
Y ahora añadimos la función cta_vista() que nos mostrará cómo están quedando nuestros botones, tanto en versión para pc como para móvil.
function cta_vista(){
global $wpdb;
$table_calltoaction = $wpdb->prefix . "calltoaction";
$results = $wpdb->get_results( "SELECT * FROM $table_calltoaction");
if(!empty($results)){
foreach($results as $row){
$telefono=$row->phone;
$texto_telefono=$row->text_phone;
$color_telefono=$row->color_phone;
$color_texto_telefono=$row->color_text_phone;
$fondo_telefono=$row->background_phone;
$margen=$row->margen;
$url=$row->url;
$texto_url=$row->text_url;
$color_url=$row->color_url;
$fondo_url=$row->background_url;
}
}
?>
<h4>Versión PC</h4>
<div class="version_pc">
<div class="calltoaction pc" style="margin-right:<?=$margen;?>">
<div class="tel" style="background:<?=$fondo_telefono;?>">
<p class="titulo" style="color:<?=$color_telefono;?>;"><?=$texto_telefono;?></strong></p>
<p class="enlace" style="color:<?=$color_texto_telefono;?>"><?=$telefono;?></p>
</div>
<div class="cita" style="background:<?=$fondo_url;?>">
<p class="titulo" style="color:<?=$color_url;?>;"><?=$texto_url;?></strong></p>
<p class="enlace"><a href='#'><img src="<?=get_site_url();?>/wp-content/plugins/fixed-call-to-action/img/email.png"/></a></p>
</div>
</div>
</div>
<br>
<h4>Versión Móvil</h4>
<div class="version_movil">
<div class="calltoaction movil">
<div class="tel" style="background:<?=$fondo_telefono;?>">
<p class="titulo" style="color:<?=$color_telefono;?>;"><?=$texto_telefono;?></strong></p>
<p class="enlace"><a href='#'><img src="<?=get_site_url();?>/wp-content/plugins/fixed-call-to-action/img/phone.png"/></a></p>
</div>
<div class="cita" style="background:<?=$fondo_url;?>">
<p class="titulo" style="color:<?=$color_url;?>;"><?=$texto_url;?></strong></p>
<p class="enlace"><a href='#'><img src="<?=get_site_url();?>/wp-content/plugins/fixed-call-to-action/img/email.png"/></a></p>
</div>
</div>
</div>
<?php
}
Ya casi hemos acabado, así es como nos debe de quedar nuestro plugin:
Como veréis ya podeis cambiar los datos de los botones así como los colores y ver como queda en la vista previa. Ahora vamos a añadirlo a la web para que se vea en todas las páginas de nuestra web.
Mostrar el plugin creado de cero en la web
Para esto vamos ha crear un función que la llamaremos mostrar(), y la cargaremos en el wp_footer.
function mostrar(){
global $wpdb;
$table_calltoaction = $wpdb->prefix . "calltoaction";
$results = $wpdb->get_results( "SELECT * FROM $table_calltoaction");
if(!empty($results)){
foreach($results as $row){
$telefono=$row->phone;
$texto_telefono=$row->text_phone;
$color_telefono=$row->color_phone;
$color_texto_telefono=$row->color_text_phone;
$fondo_telefono=$row->background_phone;
$margen=$row->margen;
$url=$row->url;
$texto_url=$row->text_url;
$color_url=$row->color_url;
$fondo_url=$row->background_url;
}
}
?>
<style>
.calltoaction {
position: fixed;
bottom: 0;
right: 0;
z-index: 99999;
width: 300px;
}
.calltoaction .tel {
width: 150px;
text-align:center;
display: table-cell;
padding-bottom:5px;
}
.calltoaction .cita {
width: 150px;
text-align:center;
display: table-cell;
padding-bottom:5px;
}
.calltoaction p {
padding: 0;
margin: 0;
}
.calltoaction .titulo {
font-size: 14px;
font-weight: bold;
padding-top: 4px;
}
.calltoaction .tel .enlace {
font-size: 18px;
font-weight: bold;
}
.conicono{display:none}
.sinicono{display:inline}
@media (max-width:800px){
.sinicono{display:none}
.conicono{display:inline}
.calltoaction {
margin: 0!important;
width: 100%;
display: flex;
}
.calltoaction > a {
width: 50%!important;
text-decoration:none;
}
}
</style>
<div class="calltoaction" style="margin-right:<?=$margen;?>">
<a href='tel:+34<?=$telefono;?>' class="tel" style="background:<?=$fondo_telefono;?>">
<p class="titulo" style="color:<?=$color_telefono;?>;"><?=$texto_telefono;?></strong></p>
<p class="enlace sinicono" style="color:<?=$color_texto_telefono;?>"><?=$telefono;?></p>
<p class="enlace conicono"><img src="<?=get_site_url();?>/wp-content/plugins/fixed-call-to-action/img/phone.png"/></p>
</a>
<a href='<?=$url;?>' class="cita" style="background:<?=$fondo_url;?>">
<p class="titulo" style="color:<?=$color_url;?>;"><?=$texto_url;?></strong></p>
<p class="enlace"><img src="<?=get_site_url();?>/wp-content/plugins/fixed-call-to-action/img/email.png"/></p>
</a>
</div>
<?php
}
function muestralo() {
echo mostrar();
}
add_action( 'wp_footer', 'muestralo' );
¡Y ya tenemos nuestro plugin!
Aquí tienes el zip por si prefieres descargarlo. ¿Te ha resultado difícil? Coméntanos.
