Crear un Theme para WordPress paso a paso Header

Hoy vamos a realizar la segunda lección del tutorial para la creación de un Theme de WordPress paso a paso, en este artículo nos dedicaremos a darle forma al header de nuestro WordPress, le daremos estilos y añadiremos un menú funcional así como el logotipo del Theme, en el Theme que estamos clonando el logo es una imagen, nosotros utilizaremos texto plano para no recargar tanto el sitio con imágenes innecesarias.

En primer lugar lo que haremos será abrir nuestro ID de programación favorito y crear un archivo PHP nuevo, a dicho archivo le daremos el nombre de functions.php y loo guardaremos en la carpeta de nuestro Theme, seguidamente copiaremos y pegaremos dentro de este archivo el siguiente código.




<?php
//activamos thumbnails
if ( function_exists'add_theme_support' ) )
add_theme_support'post-thumbnails' );

//damos soporte a los menus personalizados de wordpress
function register_my_menu() {
  
register_nav_menu('header-menu',__'Header Menu' ));
}
add_action'init''register_my_menu' );
?>

Nuestro Theme en principio no tiene compatibilidad con las imágenes destacadas de los post ni con los menús de WordPress, lo que hacemos con este par de funciones en el archivo functions.php es declarar primero el soporte para las imágenes destacadas y segundo añadir un menú personalizado al admin de WordPress que se llamará “Header Menu”, de esta manera solucionamos dos de las incompatibilidades principales de nuestro Theme.

Bien, ahora pasemos al siguiente paso, con nuestro ID de programación favorito abrimos ahora el archivo header.php que creamos en el paso de ayer, una ver abierto añadiremos unas lineas de código a las que ya teníamos, de manera que nuestro archivo quedará como veis a continuación.




<?php
echo '<!DOCTYPE html>';
echo 
'<html lang="es-ES">';
    echo 
'<head>';
        echo 
'<link rel="stylesheet" type="text/css" href="'.get_bloginfo("stylesheet_url").'" media="screen" />';
    echo 
'</head>';
    echo 
'<body>';
        echo 
'<header id="header" >';
            echo 
'<div class="container">';
                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 
'</header>';
        echo 
'<div class="container header-title">';
            echo 
'<p>';
                echo 
'<a href="'.get_bloginfo('home').'" title="Florence">Florence</a>';
            echo 
'</p>';
        echo 
'</div>';
?>

Hemos añadido un Header con un id, luego abrimos un DIV con la clase container para que coja los estilos que le dimos al contenedor principal en la hoja de estilos, dentro del div creamos la llamada a nuestro menú, como vemos en el código llamamos al menú header-menu que creamos anteriormente en el archivo functions.php, al menú le añadimos las clases y lo encerramos entre una lista desordenada UL.

Por último, y ya fuera del Header creamos otro DIV con la clase header-title y container donde añadimos un enlace con el texto Florence, este será nuestro logotipo principal, ahora veremos como le vamos a dar el mismo estilo que el Theme que estamos creando pero con texto plano y no con una imagen para que nuestro Theme sea más ligero.

Para darle formato a nuestro logotipo utilizaremos una fuente TrueType o TTF que hemos descargado de internet, tranquilos, después de este párrafo os dejamos el enlace para su descarga, dicha fuente será la encargada de darle el estilo necesario a nuestro logotipo.

Para ello iremos a la raíz de nuestro Theme y crearemos una nueva carpeta llamada font, dentro de ella copiaremos el archivo TrueType o TTF que os dejamos para su descarga a continuación.

Y ahora sí, pasamos de nuevo a nuestro archivo style.css, de manera que lo abrimos con nuestro ID de programación favorito y añadiremos unas cuantas lineas de código, esta vez conseguiremos darle estilos a nuestro header, a nuestro menú de navegación y a nuestro logotipo, para conseguirlo deberemos añadir bastantes lineas de código, de manera que nuestro archivo style.css debe quedar de la siguiente manera.




<style>
/*
Theme Name: Florence 1.0
Theme URI: https://tutorial.ricardfs.es
Author: Ricard FS
Author URI: https://ricardfs.es/
Version: 1.0

Description: Clonación del Theme original <a href="https://solopine.com/florence/">Florence</a>, está clonación se realiza como tutorial sobre como crear un Theme desde cero paso a paso para el blog de <a href="https://ricardfs.es">Ricard FS.</a>

Author: Ricard FS
Author URI: https://ricardfs,es
Theme URI: https://tutorial.ricardfs.es
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
@font-face {
  font-family: contania;
  src: url(https://tutorial.ricardfs.es/wp-content/themes/florence/font/contania-italic.ttf);
}
body {
    margin:0 auto;
    width:100%;
    min-width:240px;
    color:#716D6E;
    background-color:#F5F5F5;
}
ul,
li {
    margin:0;
    padding:0;
    list-style:none;
}
img {
    border:none;
    max-width:100%;
}
a {
    text-decoration:none;
    color:#000;
    -webkit-transition-property:color, text;
    -webkit-transition-duration: 0.3s, 0.3s;
    -webkit-transition-timing-function: linear, ease-in;
    -moz-transition-property:color, text;
    -moz-transition-duration:0.3s;
    -moz-transition-timing-function: linear, ease-in;
    -o-transition-property:color, text;
    -o-transition-duration:0.3s;
    -o-transition-timing-function: linear, ease-in;
}
a:hover{
    color:#c2c2c2;
}
.alignnone,.aligncenter {
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    margin-bottom:20px;
    border:none;
}
.alignleft {
    float:left;
    margin:20px 20px 20px 0;
    border:none;
}
.alignright {
    float:right;
    margin:20px 0 20px 20px;
    border:none;
}
code {
    color:#000;
    padding:5px 10px 5px 10px;
    font-size:15px;
    font-size:1.5rem;
}
p{
    margin:0;
    padding:0;
}
blockquote {
    font-size: 18px;
    font-style: italic;
    max-width: 450px;
    padding: 0.25em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
    background:#ececec;
    margin:0 auto;
    margin-bottom:20px;
}
blockquote:before,
blockquote:after,
blockquote p {
    display: inline;
}
blockquote:before {
    content: '“';
}
blockquote:after {
    content: '”';
}
.container {
    width: 100%;
    max-width: 1100px;
    display: block;
    overflow: hidden;
    margin: 0 auto;
}
#header {
    width:100%;
    background-color:#fff;
    overflow:visible;
    position:fixed;
}
.header-title {
    display:block;
    overflow:hidden;
    text-align:center;
    padding:50px 0 50px 0;
}
.header-title p{
    font-family:"contania";
    font-size:100px;
    font-style:italic;
    color:#000;  
    margin-bottom:50px;
}
@media (max-width: 500px){
    .header-title p{
        font-size:30px;
    }
}
nav {
    margin:0 auto;
    line-height:50px;
    height:50px;
    font-size:14px;
    font-size:1.6rem;
    font-weight:normal;
    display:block;
    background-color:#fff;
    max-width:900px;
    float:left;
}
nav,
nav a {
    color: #777777;
    font-size:11px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight:normal;
    text-transform:uppercase;
}
nav a {
    display: block;
    padding:0 15px 11px 15px;
}
nav a:hover{
    color:#f3b4a3;
}
.current-menu-item {
    position: relative;
}
nav li.current-menu-item a{
    color:#f3b4a3;
}
nav li.outlet a:hover{
    color: #237DA5 !important;
}
nav li i.icon-home{
    color:#fffefc;
    font-size:24px;
    font-size:2.4rem;
    margin-left:20px;
}
nav ul {
    padding:0;
    margin: 0 auto;
    list-style:none;
    max-width: 1200px;
}
nav ul li {
    float:left;
    display:inline;
    position:relative;
    font-weight:700;
}
nav ul li ul {
    display:none;
    line-height:20px;
    list-style:none;
    margin:0 auto;
    left:0;
    margin-top:10px;
    z-index:9999;
}
nav ul li ul li a{
    width:145px;
    display:block;
}
nav ul li:hover ul{
    position:absolute;
    left:0;
    top:50px;
    display:block;
    background-color:#202020;
    border-bottom:1px solid #fff;
}
nav ul li:hover ul li ul{
    display:none;
}
nav ul li:hover ul li:hover ul{
    display:block;
    left:175px;
    top:-10px;
}
nav ul li:hover ul li:hover ul li ul{
    display:none;
}
nav ul li:hover ul li:hover ul li:hover ul{
    display:block;
}
nav > input,
nav > label {
    display: none;
}
nav > label {
    width: 100%;
    float: right;
    padding: 10px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size:25px;
    color:#c2c2c2;
}
@media (max-width: 800px) {
    .current-menu-item:before, .current-menu-item:after{
        position:relative;
        border:none;
        display:none;
    }
    .logo {
        width:75%;
    }
    nav li i.icon-home{
        display:none;
    }
    nav {
        float:none;
        width:100%;
        line-height: 20px;
        margin:0;
        padding:0;
        font-size:12px;
        height:auto;
        margin-top:50px;
    }
    nav a{
        color:#777;
    }
    nav > label {
        display:block;
        width:auto;
        overflow:hidden;
        top:10px;
        left:10px;
        position:absolute;
    }
    nav > ul {
        display: none;
        clear: both;
    }
    nav > input:checked + ul {
        display: block;
    }
    nav ul ul {
        display:block;
        position:relative;
        top:0;
    }
    nav ul ul li{
        width: 100%;
    }
    nav ul ul li a:before {
        content:'↪ ';
    }
    nav ul li {
        float: none;
        display: block;
        border-right: none;
        padding-left: 10px;
        width:auto;
    }
    nav ul li:hover ul{
        position:relative !important;
        left:0;
        top:0;
        display:block;
        background: none;
        background: -moz-linear-gradient none;
        background: -webkit-gradient none;
        background: -webkit-linear-gradient none;
        background: -o-linear-gradient none;
        background: -ms-linear-gradient none;
        background: linear-gradient none ;
        border-bottom:none;
    }
    nav ul li:hover ul li:hover ul{
        left:0;
    }
}
</style

Como vemos justo debajo de los encabezados hemos añadido la llamada a la fuente TTF que hemos descargado y guardado con anterioridad, vosotros debéis cambiar la ruta absoluta por la vuestra, también podéis utilizar rutas relativas, después debajo de la clase container añadimos las clases para el header y el logotipo, podemos ver que al header le damos una posición fija para que nos siga mientras hacemos scroll por la pantalla.

El logotipo lo centramos en la pantalla y le añadimos la fuente tipo contania, esta es la fuente que habéis descargado y subido a la carpeta font previamente creada en la raíz del Theme, luego podéis apreciar que añadimos una media query que le dice que si la pantalla es de quinientos píxeles cambie el tamaño de la fuente del logotipo.

Y seguidamente empezamos a darle estilos a nuestro menú, en principio le damos la clase al NAV en general ya que es la etiqueta con la que se define el menú, le estamos dando clases a los enlaces y a los diferentes niveles de listas desordenadas, y por último abrimos una media query que definimos a ochocientos píxeles y donde empezamos a hacer la magia para que nuestro menú sea responsive.

Si habéis seguido el artículo de hoy al paso de la letra y habéis añadido bien los códigos podréis comprobar que nuestro Theme ya tiene un menú resposive y un logotipo también responsive, si no os aparece nada en el menú podéis entrar al admin de WordPress e ir a la pestaña “Apariencia/Menús”, allí encontraréis el menú Header Menú listo para que le podáis añadir nuevos items.

Y recordar que podéis ver el progreso de todos los cambios realizados durante el tutorial en la siguiente URL tutorial.ricardfs.es.

13 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

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: :-? :?: :!: