Crear un tema de Wordpress. Clase 3
En el segundo post habíamos visto los archivos necesarios que necesitamos para ir creando nuestra plantilla ahora vamos a ir poniendo contenido a estos archivos, empezando con style.css.
1.- Agregando CSS
Ahora, agregaremos una sola regla al archivo CSS que cambia el color de fondo de la página.
Añada una línea en blanco después del cierre del comentario */ en la línea 12.
En la siguiente línea debajo de la nueva línea en blanco (línea 13 del archivo), escriba lo siguiente.
*{
box-sizing: border-box;
}
body {
background-color: #f9f9f9;
font-family: Helvetica;
}
La primera entrada es una parte importante del estilo sensible. * es un comodín y coincide con todas las clases que se encuentran en el documento HTML. Indica que el ancho final y la altura de cada elemento en la página deben incluir contenido, relleno y borde. Si no establece esto y tiene dos cajas de 50% de ancho que están lado a lado con cualquier relleno o borde, no se sentarán lado a lado ya que su tamaño real es superior al 100%. Una caja de ancho de 100% con 1% de relleno es en realidad 102% de ancho, ya que se agrega 1% de relleno a la izquierda ya la derecha. Esta regla efectivamente agrega el relleno dentro de la caja en lugar de fuera de ella.
La segunda entrada sólo cambia el color de fondo de blanco para que podamos ver rápidamente si la hoja de estilo se está utilizando. También establecemos la fuente predeterminada que se utilizará en nuestro tema.
2.- Construir un diseño con plantillas
header.php
header.php definirá la parte superior de nuestro documento, comenzando con la declaración DOCTYPE.
Todos los documentos HTML deben comenzar con una declaración DOCTYPE, que te indican a tu navegador web cómo interpretar el documento. El doctype HTML5 es simplemente html. La etiqueta <html> de apertura necesita un atributo de idioma y WordPress proporciona una función para introducir el código de idioma correcto para el idioma que escogió durante la instalación – language_attributes().
En el campo de título, utiliza una línea de código que muestra el nombre de tu sitio, seguido de una instrucción abreviada if… then… para mostrar el lema de tu sitio web O el título de la página o publicación actual que estás viendo.
Los ? character es un operador condicional de PHP llamado operador ternario. En esta línea de código, is_front_page() es una función de WordPress que devuelve TRUE si se visualiza la portada, o FALSE si se está viendo cualquier post o página. La función antes de los dos puntos se utiliza si TRUE se devolvió, y la función después de los dos puntos se utiliza si se devuelve FALSE.
Como veremos a continuación, la función bloginfo() se utiliza repetidamente con diferentes parámetros para obtener diferentes partes de información de la base de datos de WordPress. Antes de que la etiqueta <head> se cierre con </head>, debe incluir el gancho de acción wp_head() para asegurarse de que se ejecutan las funciones asociadas a él.
La función body_class() le da a su cuerpo las clases CSS predeterminadas establecidas por WordPress. La última línea permite visualizar el menú de navegación si se ha creado uno en el panel de control del administrador. El header.php final se parece a esto:
<!DOCTYPE html>
<html <?php language_attributes(); ?>
<head>
<title><?php bloginfo('name'); ?> » <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="my-logo">
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1>
</header>
<?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>
Si deseas utilizar un logotipo como encabezado, reemplaza <?php bloginfo (‘name’); ?> con su código de imagen dentro de las etiqueta <header>.
Guarda header.php y subelo a la carpeta de tu tema.
index.php
index.php define la página de inicio y también se utilizará como el diseño predeterminado si no se encuentran plantillas específicas (por ejemplo, single.php, page.php).
Usaremos etiquetas de plantilla para asegurarnos de que el código de encabezado (get_header), barra lateral (get_sidebar) y pie de página (get_footer) esté incluido en nuestra página principal.
También utilizaremos los elementos semánticos HTML5 <section>, <main>, <header> y <article>. Algunos de nuestros elementos tendrán clases asignadas a ellos, y las clases se escribirán cuando lleguemos al archivo style.css.
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-loop">
<header>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
By: <?php the_author(); ?>
</header>
<?php the_excerpt(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>
El ciclo comienza en <?php if (have_posts ()): while (have_posts ()): the_post (); ?> y termina en <? php endif; ?>. Dentro del bucle, se utilizan las siguientes etiquetas de plantilla:
<?php the_permalink (); ?> – genera la URL correcta de la publicación real
<?php the_title_attribute (); ?> – emite el título de la publicación en un formato seguro para el atributo title del enlace
<?php the_title (); ?> – emite el título de la publicación
<?php the_author (); ?> – emite el nombre del autor
<?php the_excerpt (); ?> – emite el extracto de la publicación, que se genera automáticamente si no escribe su propio
Guarda el archivo index.php y cargarlo en el directorio de su tema. Si visita su sitio ahora, verá una página muy simple.
Puedes ver que el título de la pestaña es el nombre y el eslogan de su sitio web. La parte superior de la página tiene el título de su sitio web (o su logotipo si lo usó en su lugar). Todos los posts que existen tienen su título, autor y extracto. Aunque la página se muestre bien, todavía tiene que cerrar las etiquetas <body> y <html> abiertas en footer.php.
footer.php
footer.php define el pie de cada página y debe cerrar cualquier etiqueta HTML abierta en otros archivos de plantilla. En este caso, <body> y <html> siguen abiertos desde header.php.
También debe incluir el gancho de acción wp_footer() para garantizar que cualquier código final de WordPress y JavaScript se añada a la página. Si ha iniciado sesión como administrador cuando visitó su página principal, publicaciones o páginas, notará que falta la barra de administración. El código que muestra la barra de administración se engancha al gancho de acción wp_footer().
También agregaremos el elemento semántico HTML5 <footer> </ footer> para definir explícitamente nuestro pie de página.
<footer>
<p>Copyright © 2017</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Guardar el archivo footer.php y cargarlo en el directorio de tu tema.
single.php
single.php define el diseño al ver una sola publicación en tu sitio web. Puede ser completamente diferente a index.php.
En este caso, no agregamos la barra lateral a las publicaciones sólo para resaltar la diferencia en el diseño.
El contenido principal toma todo el ancho de la página, ya que le dimos la clase content-full-width de la hoja de estilo. El enlace se eliminó del título, ya que no es necesario aquí. La función para mostrar la publicación completa es the_content():
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-full-width">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-full">
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no post was found!</p>
</article>
<?php endif; ?>
</section>
</main>
<?php get_footer(); ?>
page.php
page.php define la forma en que se muestran las páginas y puede ser diferente de nuevo desde el índice y el diseño de la entrada.
Recuerda que si las plantillas no existen, en su lugar se utiliza la plantilla index.php. Si no creas page.php, no se utilizará el mismo diseño que posts.php.
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-full">
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no page was found!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>
Para que la diferencia sea más visible, volveremos a añadir la barra lateral a este diseño y haremos que el contenido de la página tome el 70% del ancho de la página.
Guarde el archivo página.php y subirlo al directorio de su tema.
style.css
Agrega lo siguiente a la parte inferior de la hoja de estilo. Esto hará que las distintas cajas tengan un fondo blanco y borde azul, para ayudar a visualizar cuánto espacio ocupa cada uno realmente.
* {
box-sizing: border-box;
}
body {
background-color: #f9f9f9;
font-family: Helvetica;
}
.my-logo,
footer {
width: 100%;
padding-left: 1%;
margin-bottom: 8px;
background-color: #78baff;
border: 1px solid #78baff;
}
body > header > h1 > a {
color: #ffffff;
font-weight: 400;
}
article > header {
}
footer {
margin-top: 4px;
}
a {
text-decoration: none;
}
/* 'Margin: 0 auto' centers block content on the page */
.wrap {
width: 99%;
margin: 0 auto;
}
.content-area {
display: inline-block;
}
.content-thin {
width: 70%;
}
.content-full-width {
width: 100%;
}
.content-area,
.primary-sidebar {
display: inline-block;
}
.primary-sidebar {
width: 25%;
padding: 1%;
vertical-align: top;
background-color: #ececec;
}
.article-loop {
width: 45%;
text-align: left;
margin: 5px;
padding: 10px;
}
.article-full {
width: 99%;
padding: 1%;
}
.article-loop,
.article-full {
display: inline-block;
vertical-align: top;
background-color: #FFF;
border-radius: 4px;
margin-bottom: 4px;
}
Guarde el archivo style.css y subirlo al directorio de tu tema.
Ahora que tiene las plantillas básicas y una hoja de estilo, puede navegar fácilmente por sus publicaciones y páginas. Su tema recién creado debe tener este aspecto.
Bueno, eso es todo por hoy.
Nos vemos en la siguiente clase.
