Tutorial creación de un Theme para WordPress Panel de control

En el artículo de hoy sobre la creación de un Theme para WordPress paso a paso vamos a centrarnos en acabar nuestro Header por completo e instalar nuestro panel de control personalizado con las funciones básicas de las que dispondrá nuestro Theme, para nuestro panel de control nos vamos a apoyar en el Options Framework de @devinsays.

En primer lugar y para dejarlo completamente acabado iremos a por nuestro Header, de manera que con nuestro ID de programación favorito abrimos nuestro archivo header.php y añadimos las siguientes lineas de código, de manera que el header.php quedará así.




<?php
echo '<!DOCTYPE html>';
echo 
'<html lang="es-ES">';
    echo 
'<head>';
        echo 
'<meta name="viewport" content="width=device-width, initial-scale=1.0" />';
        echo 
'<link rel="stylesheet" type="text/css" href="'.get_bloginfo("stylesheet_url").'" media="screen" />';
        echo 
'<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />';
        echo 
'<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet" />';
        echo 
'<link href="https://fonts.googleapis.com/css?family=Crimson+Text&display=swap" rel="stylesheet" />';
        echo 
'<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet" />';
        echo 
'<link rel="stylesheet" href="'.get_bloginfo("stylesheet_directory").'/css/fontello.css" />';
        echo 
'<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>';
    echo 
'</head>';
    echo 
'<body>';
        echo 
'<header id="header" >';
            echo 
'<div class="container">';
                echo 
'<div class="social-icons">';
                    
$twitter of_get_option('twitter_fs','');
                    
$facebook of_get_option('facebook_fs','');
                    
$instagram of_get_option('instagram_fs','');
                    
$pinterest of_get_option('pinterest_fs','');
                    echo 
'<ul>';
                        if (
$facebook){
                            echo 
'<li><a href="'.$facebook.'" target="_blank" rel="noopener noreferrer"><i class="icon-facebook"></i></a></li>';
                        }
                        if (
$twitter){
                            echo 
'<li><a href="'.$twitter.'" target="_blank" rel="noopener noreferrer"><i class="icon-twitter"></i></a></li>';
                        }
                        if (
$instagram){
                            echo 
'<li><a href="'.$instagram.'" target="_blank" rel="noopener noreferrer"><i class="icon-instagram"></i></a></li>';
                        }
                        if (
$pinterest){
                            echo 
'<li><a href="'.$pinterest.'" target="_blank" rel="noopener noreferrer"><i class="icon-pinterest-circled"></i></a></li>';
                        }
                        echo 
'<li><a href="#" id="buscador"><i class="icon-search"></i></a></li>';
                    echo 
'</ul>';
                echo 
'</div>';
                echo 
'<nav id="menu">';
                    if(
is_front_page()){echo '<style>nav li i.icon-home{color:#237DA5 !important;</style>';}
                            echo 
'<label for="toggle-mobile-menu">';
                                echo 
'&#9776;';
                            echo 
'</label>';
                            echo 
'<input id="toggle-mobile-menu" type="checkbox"/>';
                            
$args=array(
                                
'menu' => 'header-menu',
                                
'container' => '',
                                
'container_class' => 'false',
                                
'container_id' => '',
                                
'menu_class' => 'nav barbar-nav',
                                
'echo' => true,
                                
'fallback_cb' => 'wp_page_menu',
                                
'before' => '',
                                
'after' => '',
                                
'items_wrap' => '<ul><li></li>%3$s</ul>',
                                
'depth' => 0, );
                            
wp_nav_menu$args);
                echo 
'</nav>';
            echo 
'</div>';
            echo 
'<script>';
                echo 
'$(document).ready(function(){'
                   echo 
'$("#buscador").on("click",function(){';
                      echo 
'$(".buscador-2").toggle("slow");';
                   echo 
'});';
                echo 
'});';
            echo 
'</script>';
            echo 
'<div class="buscador-2 container">';
                
get_search_form();
            echo 
'</div>';
        echo 
'</header>';
        echo 
'<div class="container header-title">';
            echo 
'<p>';
                echo 
'<a href="'.get_bloginfo('home').'" title="Florence">Florence</a>';
            echo 
'</p>';
        echo 
'</div>';
?>

Como podéis ver hemos añadido cuatro fuentes de Google Fonts, todas ellas serán utilizadas en el Theme más adelante, pero así ya las tenemos enlazadas y acabamos con el Header, luego enlazamos a una hoja de estilos nueva, fontello.css, luego os dejaremos unos cuantos archivos para descargar que contienen fuentes de iconos de Fontello, dichos iconos también serán utilizados en nuestro Theme, y por último hacemos la llamada a la última librería jquery para que todos los elementos javascript y jquery que pongamos en nuestro Theme funcionen correctamente.

También declaramos un nuevo DIV llamado social-icons, dentro de el declaramos cuatro variables que contienen las cuatro llamadas a nuestro panel de control que explicaremos más adelante, veis que tenemos cuatro condicionales que nos dicen que si dichas variables existen nos impriman una lista desordenada con los diferentes iconos de las redes sociales, de no existir las variables no se imprimirá nada.

Por último declaramos un nuevo DIV llamado buscador-2 donde hacemos la llamada al buscador básico de WordPress, justo antes hemos hecho una pequeña función en jquery para conseguir que el buscador haga una entrada en escena más vistosa, más o menos como en el Theme original que estamos clonando.

Ahora vamos con nuestro archivo style.css, lo abrimos con nuestro ID de programación favorito y justo al final de todo el código que ya tenemos agregamos el siguiente, copiamos y pegamos tal cual.




<style>
.social-icons{
    float:right;
    margin-top:15px;
}
.social-icons ul{
    list-style:none;
}
.social-icons ul li{
    float:left;
}
.social-icons ul li a i{
    color: #c2c2c2;
    font-size:14px;
}
.social-icons ul li a i:hover{
    color:#EF9D87;
}
.social-icons ul li .icon-search{
    color:#fff;
    background-color:#ef9d87;
    box-sizing:border-box;
    padding:15px 15px 18px 15px;
    margin-left:15px;
    cursor:pointer;
}
.social-icons ul li .icon-search:hover{
    background-color:#c2c2c2;
}
div.buscador-2{
    display:none;
    overflow:hidden;
    padding: 10px 10px 10px 10px;
}
div.buscador-2 input[type="submit"],
div.buscador-2 label{
    display:none;
}
div.buscador-2 input{
    padding:14px 14px 14px 14px;
    float:right;
}
</style>

Vemos que el DIV lo flotamos a la derecha, le quitamos el estilo de lista al UL y flotamos a la izquierda los items LI, así mismo le damos una apariencia a los iconos tanto con enlace como en el efecto hover del mismo, y por último le damos las clases esenciales al icono del buscador que será el que más agradable quedará.

Ahora vamos con las clases para el buscador, le damos un display none para que permanezca escondido, la función jquery que hemos creado antes se encargara de hacerlo aparecer cuando se hace clic sobre el icono del buscador, escondemos el botón de buscar y la etiqueta que aparecen por defecto ya que no las queremos visible, en este Theme solo queremos la caja del buscador, y por último lo flotamos todo a la derecha.

Por último vamos a abrir nuestro archivo functions.php con nuestro ID de programación favorito, justo al final de todo el código que ya tenemos en el añadiremos el siguiente, copiamos y pegamos.




<?php
//panel de control personalizado
if ( !function_exists'optionsframework_init' ) ) {
    
define'OPTIONS_FRAMEWORK_DIRECTORY'get_template_directory_uri() . '/inc/' );
    require_once 
dirname__FILE__ ) . '/inc/options-framework.php';
}
?>

Esta función es la encargada de llamar a nuestro panel de control para nuestro Theme de WordPress, como veis tiene un condicional donde pregunta primero si existe un archivo, de ser así pide con el require que se incluya el archivo options-framework, los archivos necesarios os los dejo para su descarga a continuación, no os preocupéis.

Los archivos descargados están en un archivo comprimido, lo descomprime is y el resultado que encontráis dentro de la carpeta panelcontrol lo copiáis a la raíz de vuestro Theme, en la carpeta INC veréis varios archivos, estos son los que hacen la magia para que el panel de control funcione, nos hemos tomado el tiempo de pasarlo todo al castellano para que no tengáis problema, pero el archivo que realmente nos importa es el options.php, lo abrimos con nuestro ID de programación favorito y encontraremos lo siguiente.




<?php
function optionsframework_option_name() {
    
//definimos el nombre del theme para los estilos
    
$themename wp_get_theme();
    
$themename preg_replace("/\W/""_"strtolower($themename) );
    
$optionsframework_settings get_option'optionsframework' );
    
$optionsframework_settings['id'] = $themename;
    
update_option'optionsframework'$optionsframework_settings );
}

function 
optionsframework_options() {
$imagepath =  get_template_directory_uri() . '/images/';
//=================================
    //pestaña redes sociales
    
$options[] = array(
        
'name' => __('Iconos sociales''options_framework_theme'),
        
'type' => 'heading');

    
//facebook
    
$options[] = array(
        
'name' => __('Facebook''options_framework_theme'),
        
'desc' => __('URL de su usuario de Facebook.''options_framework_theme'),
        
'id' => 'facebook_fs',
        
'type' => 'text');

    
//twitter
    
$options[] = array(
        
'name' => __('Twitter''options_framework_theme'),
        
'desc' => __('URL de su usuario de Twitter.''options_framework_theme'),
        
'id' => 'twitter_fs',
        
'type' => 'text');

    
//instagram
    
$options[] = array(
        
'name' => __('instagram''options_framework_theme'),
        
'desc' => __('URL de su usuario de instagram.''options_framework_theme'),
        
'id' => 'instagram_fs',
        
'type' => 'text');

    
//pinterest
    
$options[] = array(
        
'name' => __('Pinterest''options_framework_theme'),
        
'desc' => __('URL de su usuario de pinterest.''options_framework_theme'),
        
'id' => 'pinterest_fs',
        
'type' => 'text');
//=================================
    //pestaña sobre mi
    
$options[] = array(
        
'name' => __('Sobre el autor''options_framework_theme'),
        
'type' => 'heading');

    
//Imagen sidebar
    
$options[] = array(
        
'name' => __('Imagen sidebar''options_framework_theme'),
        
'desc' => __('La imagen que aparece en la columna de la derecha.''options_framework_theme'),
        
'id' => 'imgder_fs',
        
'type' => 'upload');

    
//Imagen single
    
$options[] = array(
        
'name' => __('Imagen single''options_framework_theme'),
        
'desc' => __('La imagen que aparece en los artículos''options_framework_theme'),
        
'id' => 'imgart_fs',
        
'type' => 'upload');

    
//Nombre
    
$options[] = array(
        
'name' => __('Nombre''options_framework_theme'),
        
'desc' => __('El nombre que aparecera en los artículos''options_framework_theme'),
        
'id' => 'nombre_fs',
        
'type' => 'text');

    
//Descripción
    
$options[] = array(
        
'name' => __('Descripción''options_framework_theme'),
        
'desc' => __('Una breve descripción sobre Ricard FS, quien eres, que haces.....''options_framework_theme'),
        
'id' => 'descripcion_fs',
        
'type' => 'textarea');
//=================================
    
return $options;
}
?>

Podéis ver que todo el código está bien comentado, aún así lo explicaremos un poco por encima para que lo entendáis mejor, cogeremos cuatro elementos básicos y pasaremos a explicarlos, los elementos serán los siguientes.




<?php
    
//pestaña redes sociales
    
$options[] = array(
        
'name' => __('Iconos sociales''options_framework_theme'),
        
'type' => 'heading');

    
//pinterest
    
$options[] = array(
        
'name' => __('Pinterest''options_framework_theme'),
        
'desc' => __('URL de su usuario de pinterest.''options_framework_theme'),
        
'id' => 'pinterest_fs',
        
'type' => 'text');

    
//Imagen sidebar
    
$options[] = array(
        
'name' => __('Imagen sidebar''options_framework_theme'),
        
'desc' => __('La imagen que aparece en la columna de la derecha.''options_framework_theme'),
        
'id' => 'imgder_fs',
        
'type' => 'upload');

    
//Descripción
    
$options[] = array(
        
'name' => __('Descripción''options_framework_theme'),
        
'desc' => __('Una breve descripción sobre Ricard FS, quien eres, que haces.....''options_framework_theme'),
        
'id' => 'descripcion_fs',
        
'type' => 'textarea');
?>

El primero vemos que lo declaramos como type heading, esto quiere decir que será el título de una sección de nuestro panel de control, lo que aparecerá arriba del todo y en la pestaña izquierda que sirve para elegir cada sección del panel de control, en el segundo ya declaramos una descripción, un id y un type text, la descripción también aparecerá en nuestro panel de control, la id será la del campo que estamos creando y esta nos servirá para poder realizar la llamada en el frondent tal y como hemos hecho anteriormente en el Header.

El tercero vemos que igualmente tiene descripción e id, pero en este caso el type cambia por upload, eso es por que es un campo para subir imágenes, este nos servirá más adelante para crear los contenedores del autor donde podemos ver en el Theme original que tanto en el Sidebar como al final de cada artículo tiene una imagen diferente, y por último el cuarto campo, este también tiene descripción e id, pero esta vez el type es un textarea, esto nos servirá para poder introducir un texto mucho más amplio que en un campo text.

Si habéis seguido los pasos como corresponde y habéis agregado los códigos correctamente podréis entrar en vuestro panel de administración de WordPress e ir a la ruta “apariencia/florence”, ahí podréis ver vuestro nuevo panel de control, y ya es hora de rellenarlo, el apartado del autor no se utilizará hasta más adelante, pero las URL sociales si las utilizaremos hoy.

Para finalizar con el panel de control por completo le daremos un último golpe de diseño, incluiremos un logotipo en la cabecera para que nos quede más completo, para eso descargar el siguiente archivo comprimido, una vez descomprimido dentro de la carpeta encontráis otra carpeta llamada images, copiáis esta carpeta a la raíz de vuestro Theme y ya os saldrá la imagen en la cabecera de vuestro panel de control.

Y para finalizar con el artículo de hoy sobre la creación de un Theme para WordPress paso a paso vamos a incluir nuestros iconos sociales, como hemos comentado más arriba haremos uso de los iconos de Fontello, podríais utilizar cualquier otro servidor de iconos, eso no es problema, para incluirlos en nuestro Theme descargar el siguiente archivo comprimido.

Una vez descomprimido, los archivos y carpetas que encontráis dentro de la carpeta fontello los copiáis dentro de la raíz de vuestro Theme, una vez hecho esto y gracias a la llamada que hicimos en el Header previamente a la hoja de estilos de fontello ya nos saldrán nuestro s iconos sociales.

Si vamos a la carpeta recién creada y llamada CSS y abrimos el archivo fontello.css veremos todos los iconos que usaremos en nuestro Theme durante el proceso de creación del mismo, justo al final de la ojo de estilos encontraréis nueve clases que forman los nueve iconos que usaremos en diferentes posiciones durante todo el progreso de creación del Theme para WordPress.

Si habéis realizado bien los cambios en el Header tendremos ahora el menú a la izquierda, a la derecha los iconos sociales y el botón del buscador, al hacer clic saldrá la caja del buscador y al hacer de nuevo clic se esconderá, y también tendremos nuestro logotipo, como siempre podéis ver el resultado en Tuorial, si necesitáis algo dejar un comentario o hablar conmigo por Twitter en @ricardfs.

14 mayo, 2020 por ricard

ricard
Soy Ricard FS, me dedico a la programación desde el año 2000, me dediqué en pleno a WordPress desde el año 2015, ahora creo Plugins y Theme para WordPress desde código cero, y me gusta la divulgación de código, por ello la creación de este blog.

Deja tu comentario

  1. Elena dice:

    Hola Ricard, ¿podrías profundizar un poco más en el panel de control?, he visitado la pagina del creador y he visto que tiene muchas más opciones y campos, pero la verdad es que no me aclaro mucho, estaría bien que lo explicaras un poco más para que podemas, por lo menos yo, entender mejor su funcionamiento.

    1. ricard dice:

      Hola Elena, haremos un artículo dedicado a esto próximamente, ahora mismo estoy centrado en acabar el tutorial sobre la creación del Theme para WordPress, en cuanto lo tenga acabado sacaremos varios artículos nuevos, entre ellos el del panel de control.

      Un saludo

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: