Hola, de nuevo. Un poco tarde para la segunda parte, pero segura :).
Antes de comenzar los pasos de la segunda parte, de manera breve, repasaremos qué sucedió o te pudo pasar en la primera parte de este tutorial.
Para comenzar, si no estuviste utilizando el tema que yo usé de ejemplo, y usaste tu diseño; es muy posible que tuvieras una primera impresión de un tema roto con imágenes que no se podían visualizar, inclusive los estilos. Lo que sucedió es que, el tema que yo tomé, maneja las rutas de los archivos (imágenes y las hojas de estilo) de forma absoluta y muy probablemente tú estés manejando una ruta relativa. Recuerda que las rutas relativas pueden prescindir de algunas partes de la URL para hacerlas más breves, por ejemplo, /imagenes/imagen.png; mientras que una ruta absoluta incluye todas las partes de la ruta (protocolo, servidor y ruta).
Otro de los problemas al que te pudiste haber enfrentado es el de la administración de los permisos de tus archivos. Es recomendable que tus directorios tengan un permiso seguro y no lo manejes como un grado 777. Aquí te dejo un link sobre administración de permisos para que profundices más en ello y lo que WordPress te recomienda.
Si tienes alguna duda extra, te leeré en la caja de comentarios debajo de este post :).
Agregando las hojas de estilo
Comúnmente agregamos hojas de estilo como recurso externo en la cabecera de nuestro HTML con un <link> tag. Para registrar nuestra hoja de estilo en WordPress, vamos a escribir la siguiente función en nuestro archivo functions.php
<?php
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
function register_plugin_styles() {
wp_register_style( 'style', get_template_directory_uri().'/style.css', array(), '1.0' );
wp_enqueue_style( 'style' );
}
?>
- get_template_directory_uri() obtiene la ruta del tema.
- ‘/style.css’ es nuestra hoja de estilos ubicada en el directorio raíz.
- «add_action» es la función nativa de WordPress para agregar una acción. En este caso nos permite agregar esta funcionalidad o acción personalizada para agregar nuestras hojas de estilo.
Agregaremos todos los estilos a la hoja de style.css y borraremos el <link> tag que hace referencia en la cabecera de nuestro HTML, para llamar la hoja de estilos desde nuestro archivo functions.php
Imprimir el nombre del sitio
Vamos a imprimir el nombre del sitio, que podemos editar en Apariencia->Personalizar->Identidad del sitio.
En nuestro header.php tenemos que agregar la siguiente función para traer el nombre del sitio:
<?php echo get_bloginfo( 'name' ); ?>
Esta línea de código la colocaremos en la parte que queramos aparezca el nombre.
Es recomendable usarla entre las etiquetas <h1> porque es un título importante. Es el nombre de nuestro sitio.
Nuestro archivo quedaría de la siguiente manera si reemplazamos el texto que dice «MY FOOD» (línea 26):
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma">
<?php wp_head();?>
</head>
<body>
<!-- Sidebar (hidden by default) -->
<nav class="w3-sidebar w3-bar-block w3-card w3-top w3-xlarge w3-animate-left" style="display:none;z-index:2;width:40%;min-width:300px" id="mySidebar">
<a href="javascript:void(0)" onclick="w3_close()"
class="w3-bar-item w3-button">Close Menu</a>
<a href="#food" onclick="w3_close()" class="w3-bar-item w3-button">Food</a>
<a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">About</a>
</nav>
<!-- Top menu -->
<div class="w3-top">
<div class="w3-white w3-xlarge" style="max-width:1200px;margin:auto">
<div class="w3-button w3-padding-16 w3-left" onclick="w3_open()">☰</div>
<div class="w3-right w3-padding-16">Mail</div>
<div class="w3-center w3-padding-16"><?php echo get_bloginfo( 'name' ); ?></div>
</div>
</div>
Imprimir nuestro logotipo
Para imprimir nuestro logotipo vamos a agregar la siguiente función en nuestro archivo functions.php:
function theme_prefix_setup() {
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-width' => true,
) );
}
add_action( 'after_setup_theme', 'theme_prefix_setup' );
- add_theme_support, es la función nativa para permitir el uso del recurso en nuestro tema.
- Podemos agregar parámetros como el alto y ancho.
- De nuevo, tenemos el action hook add_action para agregar esta acción.
Enseguida agregaremos la siguiente línea de código en el espacio en que queramos mostrar el logotipo en nuestro header.php:
<?php the_custom_logo();?>
En este caso lo ubicaré arriba del nombre del sitio. Nuestro archivo header.php quedaría de la siguiente manera (línea 25):
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma">
<?php wp_head();?>
</head>
<body>
<!-- Sidebar (hidden by default) -->
<nav class="w3-sidebar w3-bar-block w3-card w3-top w3-xlarge w3-animate-left" style="display:none;z-index:2;width:40%;min-width:300px" id="mySidebar">
<a href="javascript:void(0)" onclick="w3_close()"
class="w3-bar-item w3-button">Close Menu</a>
<a href="#food" onclick="w3_close()" class="w3-bar-item w3-button">Food</a>
<a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">About</a>
</nav>
<!-- Top menu -->
<div class="w3-top">
<div class="w3-white w3-xlarge" style="max-width:1200px;margin:auto">
<div class="w3-button w3-padding-16 w3-left" onclick="w3_open()">☰</div>
<div class="w3-right w3-padding-16"><?php the_custom_logo();?></div>
<div class="w3-center w3-padding-16"><?php echo get_bloginfo( 'name' ); ?></div>
</div>
</div>
El sitio ahora se ve de esta manera, con el nombre y el logotipo que edité.
Por ahora, vamos a dejar hasta aquí este post. En la siguiente entrada, veremos a detalle cómo mostrar los posts en nuestro tema y ver la información de cada uno.
🙂 Hasta entonces.
Cesar Flores 
Esther Lopez