Libro como crear themes desde cero en word press

Creando un tema WordPress desde cero, tutorial para
principiantes:
Saber crear themes para WordPress es en una habilidad muy buscada, muy útil y muy
rentable, si eres un diseñador o desarrollador freelance, esta puede ser la catapulta
que puede darle un empujón a tu carrera para permitirte darte a conocer y conseguir
buenos trabajos, muchas personas usan WordPress, no solo lo usan los blogger,
desarrolladores y diseñadores, sino muchas personas de otras áreas y disciplinas, lo
usan ampliamente marketeros, periodistas, comunicadores, journalistas de todo tipo,
y toda persona que quiere tener una presencia en la Web, por lo general suelen
comenzar con WordPress, y son muchas las personas que buscan a alguien que les
haga una plantilla personalizada a su gusto para su sitio. Es por eso que el que sabe
crear temas en WordPress siempre suele ser muy solicitado y suele ser considerado
como alguien con profundos conocimientos, por lo cual suele conseguir muy buenos
puestos de trabajo, si en una entrevista de trabajo usted dice que sabe crear plantillas
para WordPress, tenga por seguro que causará una impresión muy positiva, porque
todo el mundo conoce WordPress, pero pocos lo conocen profundamente. .
Si eres un blogger, saber crear themes WordPress te permite obtener mucho tráfico, y
permite dar a conocer tu pagina, ya que colocando un theme creado por ti, en el
repositorio oficial de temas de WordPress va lograr que recibas muchas visitas y tu
pagina logre mucha exposición y tráfico, y si eres un desarrollador web, aprender a
crear plantillas te permite conocer el funcionamiento interno de WordPress, de tal
manera que luego puedes no solo crear plantillas sino también plugin, y virtualmente
puedes hacer lo que se te antoje con WordPress, ya que como framework es una
plataforma muy potente y muy flexible que suele asombrar positivamente a los
desarrolladores cuando entienden cómo funciona. Y como ya se señaló antes, la
demanda por desarrolladores WordPress suele ser en verdad abrumadora, si creas
temas WordPress y lo colocas en el repositorio oficial, eso te da a conocer en la
comunidad como alguien experto y te permite obtener muy buena publicidad como
desarrollador.
Es por eso que en este tutorial vamos a ver las bases para crear una plantilla desde
cero, para que entiendas como funciona y te des cuenta lo sencillo que es crear un
tema personalizado.
En este tutorial vamos a asumir que ya sabes usar WordPress a nivel básico, y ya lo
tienes instalado.
¿Qué podemos hacer con WordPress?:
Aunque WordPress fue concebido originalmente como una plataforma de blogging,
actualmente se le conoce como uno de los mejores CMS y es considerado un
poderoso framework para la construcción de cualquier tipo de aplicación Web, es

ideal para sitios que requieren de constante actualización y contenidos dinámicos, es
usado para todo tipos de blog, magazines, tiendas en línea y todo tipo de páginas con
contenidos dinámicos.
Comencemos a crear nuestro Tema, lo primero es el diseño
que vamos a usar:
Podemos crear un theme WordPress a partir de cualquier diseño, no importa si es una
plantilla hecha con bootstrap, o con Foundation, con Skeleton o si es hecha con puro
Html5/CSS, cualquier diseño puede muy fácilmente servir para crear nuestro tema
WordPress.
En este tutorial vamos a usar una plantilla simple y la vamos a convertir en un tema
WordPress, vamos a usar la plantilla que aparece en la página de bootstrap, que es
una plantilla para un blog
Para que puedas seguir este tutorial necesitas La plantilla básica HTML inicial hecha
con bootstrap para un blog, puedes descargarla aquí:
https://www.tutofacil.info/creando-un-tema-wordpress-desde-cero-tutorial-2017-
para-principiantes-parte-1/

Creando nuestro Tema personalizado:
En nuestra instalación de WordPress, estaremos trabajando en la carpeta wp-content
> themes allí es donde están ubicado los temas que tengamos instalado en
WordPress, si entras en esa carpeta, podrás ver las carpetas de los temas instalados
Allí debes crear la carpeta que contendrá tu tema, en este tutorial a esa carpeta la
hemos llamado tema_tutofacil.info, que será como se llamara nuestro tema.
Un tema WordPress para funcionar solo necesita un archivo style.css y un archivo
index.php, claro que cualquier tema contendrá muchos mas archivos, pero esos son
los mínimos necesarios que se requieren para tener un tema funcionando
Creando el archivo style.css:
En la carpeta creada para el tema, cree un archivo llamado style.css, este archivo
contendrá simplemente comentarios que indican a WordPress que existe un tema en
esa carpeta, puede cambiar el nombre, el autor, la descripción y poner la que usted
prefiera:
/*
Theme Name: ejemplo tutofacil.info
Author: www.tutofacil.infohttp://www.tutofacil.info/
Description: el tema básico para blog de Bootstrap convertido a un tema
para WordPress
Version: 0.0.1
Tags: bootstrap
*/
Creando el archivo index.php:
Ok ¿recuerdas el código que bajaste antes que tenía la plantilla de blog que vamos a
usar? Bueno vamos a comenzar a usarlo, sino lo has bajado aun, puedes bajarlo aquí

https://www.tutofacil.info/creando-un-tema-wordpress-desde-cero-tutorial-2017-
para-principiantes-parte-1/
Ahora, descomprime el archivo bajado, debería llamarse bootstrapblog-master.zip,
y mueve los dos archivos que trae el index.html y el blog.css a la carpeta que creaste
para el tema para el blog, en nuestro caso la carpeta se llama tema_tutofacil.info,
cámbiale el nombre al archivo index.html a index.php.
Listo ya tienes un tema creado, si vas al área de administración de tu blog, y entras en
el apartado de apariencia y luego en themes, Appearance > Themes, vas a poder ver
como ya WordPress lo reconoce como un theme, aunque por los momento la imagen
del preview no se ve muy bonita que digamos
Ahora anímate a activar el tema creado y luego, sin salir del área de administración,
en una nueva pestaña, abre la página principal de tu blog

Como puedes ver técnicamente ya has creado una plantilla propia para tu blog, la
plantilla aunque es la misma que se había bajado, ha perdido los estilos, ya lo vamos
a resolver más adelante, aún es una página html estática falta añadirles las
funcionalidades de WordPress y los estilos.
Pero la pregunta es, ¿Por qué ha perdido los estilos si allí esta el archivo de estilos
original?
La cosa es que no se puede cargar nada en WordPress sin usar un poco de código
php, ya que WordPress trabaja con un sistema de urls interno que suele ser muy útil
para hacer referencia a la carpeta interna donde esta instalado el tema, ahora si
miramos el código de index.php, podemos observar que el código hace referencia a
una hoja de estilo que esta ubicado en un cdn, o sea aun así ¿Por qué no carga los
estilos?, la razón es porque hay que indicarle a WordPress que busque los estilos en
la carpeta donde este instalado el tema que en nuestro caso sería wp-content/themes/
tema_tutofacil.info y una forma de remediarlo fácilmente se muestra a
continuación; abra el archivo index.php, y ubiquémonos en el código en la parte
donde se carga el estilo, o sea en el código siguiente:
<link href="blog.css" rel="stylesheet">
Necesitamos decirle a WordPress que enlace a la carpeta del tema de forma dinámica,
para eso, reemplace el código anterior por el código que se muestra a continuación:
<link href="<?php bloginfo('template_directory');?>/blog.css"
rel="stylesheet">
Hay que señalar, que este método, no es el más recomendado para cargar script
dentro de su website, pero es la manera más fácil para mostrar cómo funciona, es por
eso que por los momentos vamos a usar este método, y más adelante mostraremos
como hacer esto mismo de la forma más adecuada.

Como puede ver, es muy simple, simplemente invocamos la función bloginfo de
WordPress para obtener la ruta del directorio donde se ubica la plantilla, y le
agregamos “/blog.css” para completar la ruta al archivo blog.css dentro de la carpeta
del tema.
Ahora puede recargar la pagina principal de su sitio, y podrá ver como ahora si que
funcionan los estilos
Recuerda que en el sitio web este tutorial lo puedes encontrar mas actualizado y completo, no
te olvides de visitar www.tutofacil.info
Este tutorial lo puedes encontrar visitando https://www.tutofacil.info/creando-un-tema-
wordpress-desde-cero-tutorial-2017-para-principiantes-parte-1/
v—
Dividir la página en secciones:
Ahora mismo tenemos todo dentro del archivo index.php, eso no es lo que
queremos, queremos tener header, footer y sidebar separados para que WordPress
pueda usarlos en todas las otras paginas uniformemente, así que vamos a dividir
index.php en cuatro diferentes secciones, estas son; header.php, footer.php,
sidebar.php y content.php.

Así que ahora vamos a comenzar a cortar secciones de index.php y la vamos a
colocar en esos diferentes archivos.
Creando header.php:
El header por lo general contiene todo lo que va en la cabeceras, la etiqueta head y
todo su contenido, las etiquetas meta, las llamadas a estilos y la navegación superior
del website, por eso del archivo index.php vamos a cortar todo desde el <!DOCTYPE
html> hasta la cabecera principal del blog y pegarlo en header.php, solamente le
vamos a hacer una modificación al código, y es añadir <?php wp_head();?>
justo antes del cierre de la etiqueta </head> ojo esto es muy importante,
obviamente antes debes crear ese archivo header.php, a continuación todo el código
que debe ir en header.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">
<meta name="author" content="">
<title>Blog Template for Bootstrap</title>

<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.c
ss" rel="stylesheet">

<link href="<?php bloginfo('template_directory');?>/blog.css"
rel="stylesheet">


<?php wp_head();?> 
</head>
<body>
<div class="blog-masthead">

<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">Press</a>
<a class="blog-nav-item" href="#">New hires</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>
<div class="blog-header">
<h1 class="blog-title">The Bootstrap Blog</h1>
<p class="lead blog-description">The official example template of
creating a blog with Bootstrap.</p>
</div>
Creando el footer.php:
Con el footer vamos a hacer más o menos lo mismo que ya hicimos con el header, en
el footer irán incluido cualquier footer visible que tengamos, los enlaces a javascript
que tengamos (por los momentos), y todo lo que valla en el footer que queramos que
se repita en las distintas páginas WordPress. Al igual que ya hicimos en el header, en
footer.php también debemos añadir un pequeño código <?php wp_footer(); ?>
justo antes del cierre de la etiqueta </body>. Ya que incluimos la etiqueta div de
clase .container en el header, vamos a colocar su cierre en el footer.
</div>
<footer class="blog-footer">
<p>Blog template built for <a
href="http://getbootstrap.com">Bootstrap</a> by <a
href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>

</ol>
</div>
<h4>Elsewhere</h4>
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>
</div>
Añadiendo el contenido en el archivo content.php:
Si el sidebar es donde toda la información secundaria va, el content.php es donde va
el contenido principal, en este archivo es donde se ubican los artículos principales del
blog. Allí vamos a colocar lo que está entre las etiquetas <div class="blog-post"> y
la etiqueta </div>
[code]
<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
<p>This blog post shows a few different types of content that's
supported and styled with Bootstrap. Basic typography, images, and code
are all supported.</p>
<hr>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient
montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est
at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget
urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies
vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis
consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed
consectetur.</p>
<h2>Heading</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.</p>
<pre><code>Example code block</code></pre>

<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem
malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo,
tortor mauris condimentum nibh, ut fermentum massa.</p>
<h3>Sub-heading</h3>
nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.
Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur
et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit
libero, a pharetra augue.</p>
<ol>
<li>Vestibulum id ligula porta felis euismod semper.</li>
<li>Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.</li>
<li>Maecenas sed diam eget risus varius blandit sit amet non
magna.</li>
</ol>
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere
consectetur est at lobortis.</p>
</div>
<h2 class="blog-post-title">Another blog post</h2>
<p class="blog-post-meta">December 23, 2013 by <a
href="#">Jacob</a></p>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient
montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est
at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget
urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies
vehicula ut id elit.</p>
</blockquote>
consectetur.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.</p>

<h2 class="blog-post-title">New feature</h2>
<p class="blog-post-meta">December 14, 2013 by <a
href="#">Chris</a></p>
nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.
Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur
et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
consectetur.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit
libero, a pharetra augue.</p>
[/code]
Volviendo al index.php:
Ahora que hemos dividido el código en varios archivos, podemos ver que nuestro
archivo index.php se ha quedado bastante pelado, en efecto el código restante
debería ser como el siguiente:
[code]
<div class="row">
<div class="col-sm-8 blog-main">
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
</div>
</div>
[/code]
Ahora la parte resaltada que está entre las etiquetas <nav> y </nav> no las vamos a
necesitar por el momento ya que más adelante en esta serie de tutoriales vamos a
implementar una paginación funcional con funciones WordPress, o sea que ese
código no lo necesitamos así que podemos eliminarlo, así el código en el archivo
index.php debe quedar como se muestra a continuación:

[code]
<div class="row">
</div>
[/code]
Ahora vamos a añadir todo lo que pusimos en archivos separados al index.php, a
continuación se muestra el nuevo código de index.php con el código php con las
funciones WordPress necesarias para añadir las secciones que sacamos de forma
separada, o sea el header, el content, el sidebar y el footer:
[code]
<?php get_header(); ?>
<div class="row">
<?php get_template_part( 'content', get_post_format() ); ?>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
[/code]
Incluso para alguien que no haya usado php antes, este código es bastante sencillo de
entender, get_header(); get_sidebar(); y get_footer(); son todas funciones que
buscan su respectivo archivo .php e inserta el respectivo código, claro que como es
código php, deben ir dentro de las etiquetas de inicio y final de código <?php ?> para
indicarle al servidor que debe tratarlo como código php y así haga el renderizado a
html, la función que inserta el contenido es ligeramente diferente, pero más o menos
hace lo mismo.
Si en este momento usted recarga la dirección principal de su sitio, como ya hizo
antes, si en el backend está logueado con su usuario WordPress, usted podrá notar
que en la parte superior aparecerá la barra superior de WordPress.
v—

Configurando el Título del sitio:
Ahora en nuestro thema, el título que tiene es el título que venía por defecto en la
plantilla de bootstrap que estamos usando, específicamente el titulo pone “The
Bootstrap Blog”, que está codificado en forma estática en html dentro de las etiquetas
<title></title>, eso hay que cambiarlo para que ponga el título que se asigna dentro
de WordPress en el área de administración del sitio, si vamos a opciones generales
dentro de WordPress podremos ver qué título le hemos puesto a nuestro blog, en
nuestro caso es el que se muestra a continuación:
Ese título es el que debe aparecer cuando cargamos nuestro tema, y eso lo logramos
cambiando el contenido de la etiqueta title de la siguiente forma:
Vamos a modificar el archivo header.php, donde va esto
<title>Blog Template for Bootstrap</title>
[/code]
Cambiar por:
[code]
<title> <?php echo get_bloginfo( 'name' ); ?> </title>
[/code]
Y donde va esto
[code]
<meta name="description" content="">
[/code]
Cambiar por:
[code]
<meta name="description" content="<?php echo
get_bloginfo( 'description' ); ?>">
Lo anterior es para las etiquetas title y meta, la función get_bloginfo( 'name' )
muestra el título del blog y la función get_bloginfo( 'description' ) muestra la
descripción, pero para que se muestre el título en el blog propiamente dicho también
tenemos que hacer los siguientes cambios dentro del div con clase “blog-title” y
dentro del párrafo de clase “lead blog-description”, y como también queremos que
el título sirva como link para ir al la pagina principal del blog, vamos a usar la
función bloginfo('wpurl'), como se muestra en el siguiente código;
Donde va:

<h1 class="blog-title">The Bootstrap Blog</h1>
<p class="lead blog-description">The official example template of
creating a blog with Bootstrap.</p>
</div>
Cambiar por:
<h1 class="blog-title"><a href="<?php bloginfo('wpurl');?>"><?php
echo get_bloginfo( 'name' ); ?></a></h1>
<p class="lead blog-description"><?php echo
get_bloginfo( 'description' ); ?></p>
</div>
Ok , ya le hemos añadido nuestro primer contenido dinámico, recarga la página de tu
blog para ver los cambios.
v—

Entendiendo el Loop:
Lo que queremos en realidad, es poder insertar el contenido dinámicamente, o sea
que se muestre el contenido de los post y artículos que hayamos creado para la
página, y en WordPress esto se logra a través de El loop, es la función más
importante en WordPress, ya que todo el contenido es generado y mostrado a partir
de El Loop.
Si nos vamos al área de administración, o sea al Dashboard, si te diriges a la sección
de los post, verás que ya hay un post que WordPress trae por defecto que se llama
“Hello World!”, nuestro objetivo es mostrar ese post en el blog, y obviamente todo
otro post que insertemos.
El Loop en sí es bastante simple:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; endif; ?>
Como puede ver, este código se explica solito, viene a ser algo como; si hay post,
mientras aún haya post, mostrar el post. Cualquier cosa dentro del loop será repetida,
para un blog este contenido a repetir puede ser los post, la fecha, el contenido y los
comentarios, en donde cada post individual debería terminar es donde termina el loop
para cada post, vamos a añadir este Loop en nuestro archivo index.php.
Así es como debe quedar el nuevo index.php
<div class="row">
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile; endif;
?>
</div>

En este código, la única cosa dentro de El Loop, es el content.php, que es el archivo
que contiene el contenido de un solo post, ahora vamos a abrir este archivo
content.php y vamos a hacerle las siguientes modificaciones, se borran todos los
párrafos de ejemplo que hay allí y lo dejamos como se muestra en el siguiente
código:
<h2 class="blog-post-title"><?php the_title(); ?></h2>
<p class="blog-post-meta"><?php the_date(); ?> creado por <a
href="#"><?php the_author(); ?></a></p>
<?php the_content(); ?>
Es super simple, the_title(); es el título del post, the_date(); muestra la fecha
de creación del post, the_author(); muestra el autor, y muestra el contenido del
blog, he creado dos post mas de ejemplo para ver que se muestren todos, es bueno
que tu también añadas mas post para que vea como se muestran.

Ahora vamos a mostrar dinámicamente la barra lateral o sea el sidebar, en este
sidebar vamos a mostrar una descripción del autor y la lista de archivos, la
descripción del usuario puede cambiarla en el panel de administración, en la sección
de información biográfica.
Ahora abra el archivo sidebar.php, elimine todas las etiquetas li y su contenido, el
código debe quedar así:
<h4>Archives</h4>
<?php wp_get_archives('type=monthly'); ?>
</ol>
En la parte de la descripción, modifícalo como se ve en el siguiente código:

<h4>About</h4>
<p> <?php the_author_meta( 'description' ); ?> </p>
Claramente puede cambiar la palabra about, por “acerca de” para que esté en nuestro
idioma, lo dejé así para que usted pueda ubicar fácilmente en el código la sección que
debe modificar
El código completo del archivo sidebar.php quedaría así:
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p> <?php the_author_meta( 'description' ); ?> </p>
</div>
<h4>Archives</h4>
<?php wp_get_archives('type=monthly'); ?>
</ol>
</div>
<h4>Elsewhere</h4>
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>
</div>
Y si recarga la página debería mostrarse dinámicamente la descripción del usuario y
el archivo

Y así es como se debería ver nuestro blog
v—
Menú y Páginas:

Ahora ya sabemos como hacer un blog y editar el contenido del sidebar, ahora
vamos a modificar la navegación principal. Como sabemos, existen dos tipos de
contenidos básicos por defecto en WordPress, los Post y las Páginas, ambos son muy
similares ya que ambos hacen uso de El Loop, la diferencia vendría a ser que las
paginas son donde usted pone el contenido que no es un post de un blog, aquí es
donde las características de CMS de WordPress salen a relucir, cada página
individual puede ser personalizada como usted quiera personalizarla.
WordPress por defecto ya viene con una página de ejemplo creada, vamos a crear
otra para que haya más de una y así veamos cómo se añaden al menú de navegación,
ahora diríjase al panel de administración y en la sección de page, cree una nueva
página de ejemplo.
Ahora si vamos a modificar el código en el archivo header.php para mostrar la
navegación dinámicamente, lo primero es cambiar el código del navbar para que
aparezcan los links a las páginas, en header.php ubíquese en el siguiente código:
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">Press</a>
<a class="blog-nav-item" href="#">New hires</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>
Elimine lo sobrante para que quede de la siguiente manera
<?php wp_list_pages( '&title_li='); ?>
</nav>
</div>
</div>
La función wp_list_pages(); se encarga de listar las páginas que tengamos en una
lista no ordenada y el '&title_li=' es para que no añada un título de página antes de la

lista. Ahora así como esta no se ve nada estético, ya que el código css original le da
estilos a elementos dentro de etiquetas ‘a’, no a etiquetas ‘li’
Afortunadamente esto puede solucionarse muy fácilmente, lo único que hay que
hacer es aplicar los estilos que tenían aplicados las etiquetas ‘a’, a las etiquetas ‘li’
En el archivo blog.css, añada el siguiente código
.blog-nav li {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
}
.blog-nav li a {
color: #fff;
}
Ahora se ve mucho mejor
v—
Páginas, personalizar page.php:
Las páginas queremos que se muestren ligeramente diferentes de los post, no
queremos que se muestre el sidebar, sino que se muestre el contenido a todo el ancho
de la pantalla, para personalizar la disposición de las páginas, vamos a modificar el
archivo page.php, recuerde, para modificar la disposición de los post del blog
usamos index.php y para modificar la disposición de las páginas usamos page.php.
Cree un archivo llamado page.php, y copie y pegue allí todo el código que ya tiene
index.php, ya que son muy similares, index es para los post, page es para las
páginas, vamos a hacer la modificación para que no se muestre sidebar y para que el
contenido de la página se muestre a todo lo ancho, para eso solo debemos aplicar la
clase col-sm-12 en lugar de la clase col-sm-8 que se le aplica al div que contiene al
loop, todo lo demás queda igual.
El archivo page.php debe quedar así:

<div class="row">
<div class="col-sm-12">
<?php
endwhile; endif;
?>
</div>
Y si revisas la página de ejemplo debería verse parecida a esto:

Aunque aún queda mucho por aprender acerca de WordPress, con lo que hemos visto
hasta aquí en esta serie de tutoriales ya tienes una gran idea de cómo trabaja y cómo
funciona este magnífico CMS, ahora usted sabe que cualquier plantilla que consiga
por allí puede ser convertida en un tema WordPress muy fácilmente sin necesidad de
estar utilizando plugines, widget o temas desarrollados por otras personas, en los
siguientes tutoriales vamos a estar viendo otros aspectos muy interesantes, como
añadir la paginación, los comentarios, tipos de post personalizados, y mucho más,
como ya dije al comienzo, aprender como crear temas en WordPress, y aprender
cómo programar para WordPress, es un camino lleno de posibilidades que puede
abrirte muchas puertas y ser muy provechoso.
v—
Personalizando los post individuales:
En anteriores entregas vimos como hacer header, footer, sidebar, cómo desplegar
contenido de los post y páginas, ahora vamos a ver como hacer el archivo single.php,
el cual es el que muestra como se ve un post individual, el archivo single.php va a

ser un exacto duplicado del archivo page.php, excepto por el hecho de que en lugar
de usar 'content' vamos a usar 'content-single', el archivo single.php quedaría así:
<div class="row">
<?php
get_template_part( 'content-single', get_post_format() );
endwhile; endif;
?>
</div>
Ahora vamos a crear también un archivo content-single.php, el cual será un
duplicado de content.php
<?php the_content(); ?>
Como ya habrás notado, index.php muestra content.php y single.php muestra
content-single.php.
Ahora abramos el archivo original content.php para hacerle una pequeña
modificación, al abrir content.php podemos ver que tenemos un título
Aquí vamos a hacer una pequeña modificación para que el título sea un link al post
individual, usando la función the_permalink()cambie el código anterior para que
quede así:

<h2 class="blog-post-title"><a href="<?php the_permalink(); ?>"><?php
the_title(); ?></a></h2>
De esta manera cuando en el index se muestra el listado de post, cada título de post
será un link al post individual como suele ser lo normal en los blogs.
Finalmente en el mismo archivo content.php, vamos a cambiar la llamada a la
función the_content(); por la función the_excerpt(); para que no se muestre el
contenido completo del post, sino solo el resumen de 55 palabras que suele mostrarse
en las páginas principales de los blogs, ya que el contenido completo debe mostrarse
solo en el post individual cuando el usuario abra ese post en particular. Al final el
archivo content.php debe quedar así:
<?php the_excerpt(); ?>
Colocando la Paginación:

Para colocar la paginación se usan las siguientes funciones;
next_posts_link( 'Previo' ) y previous_posts_link( 'Siguiente' ), estas funciones
tenemos que añadirlas en el archivo index.php, dentro de El Loop. Así es como se
ve actualmente el index.php
<div class="row">
<?php
endwhile;
endif;
?>
</div>
Si se fijan en el código de index.php pueden notar que El Loop tiene una sentencia if
y una sentencia while, y también tiene sus respectivas sentencias de terminación, o
sea tiene un endwhile; y luego el respectivo endif; es bueno que se ubique en esa
parte del código, ya que el código de las funciones para la paginación, debe ir justo
entre esas dos sentencias de terminación, justo después del endwhile; y antes de
endif; final, recuerde, entre el endwhile y el endif, después de incluir las funciones
el código debería quedar de esta manera:
<div class="row">
<?php
endwhile;
?>
<nav>

<ul class="pager">
<li><?php next_posts_link( 'Previo' ); ?></li>
<li><?php previous_posts_link( 'Siguiente' ); ?></li>
</ul>
</nav>
<?php
endif;
?>
</div>
Fíjate que justo después del endwhile colocamos la cláusula de finalizado del código
php “?>” porque allí viene un trozo de código en html, y dentro de las etiquetas “li”
volvemos a usar la etiqueta de php para iniciar el código php e insertar la función
next_post_link con la palabra previo, esa palabra puede cambiarla por la que
prefiera, y luego hacemos lo mismo con la función previous_post_link para mostrar
el botón de siguiente.
Por lo general la paginación ocurre cada 10 post, Como tenemos pocos post, voy a
entrar en el área de administración en la sección de Settings > Reading para cambiar
que se muestre 10 post, a que se muestre uno solo, para así poder ver la paginación,
después de modificado el código, la paginación debería verse así:

La paginación funciona perfectamente bien, puedes ver los post anteriores, luego ir a
los más nuevos, en fin una paginación perfectamente funcional lograda muy
fácilmente gracias a las bondades de WordPress.
Agregando los comentarios:
Los comentarios puedes parecer un poquito complicado de configurar al principio,
pero es solo al principio, después que te acostumbras a la idea y con poco de código,
veras que son tan fáciles de configurar como lo que ya hemos aprendido antes.
Primero que nada hay que ir al archivo single.php, como ya vimos antes, ese es el
archivo que muestra el post individual, o sea donde van los comentarios, así que
debemos activar los comentarios para que se muestren en el post con el siguiente
código:
if ( comments_open() || get_comments_number() ) :
comments_template();

endif;
El código completo en single.php quedaría así:
<div class="row">
<?php
get_template_part( 'content-single', get_post_format() );
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; endif;
?>
</div>
El código que le añadimos solo le indica que cargue la plantilla de comentarios, pero
la plantilla de comentarios no la hemos creado aún, así que vamos a hacerlo ahora,
vamos a crear un archivo que se llame comments.php y le añadimos el código a
continuación:
<?php if ( post_password_required() ) {
return;
} ?>
<div id="comments" class="comments-area">
<?php if ( have_comments() ) : ?>
<h3 class="comments-title">
<?php
printf( _nx( 'One comment on “%2$s”', '%1$s
comments on “%2$s”', get_comments_number(), 'comments title'),
number_format_i18n( get_comments_number() ),
get_the_title() );
?>
</h3>

<ul class="comment-list">
<?php
wp_list_comments( array(
'short_ping' => true,
'avatar_size' => 50,
) );
?>
</ul>
<?php endif; ?>
<?php if ( ! comments_open() && get_comments_number() &&
post_type_supports( get_post_type(), 'comments' ) ) : ?>
<p class="no-comments">
<?php _e( 'Comments are closed.' ); ?>
</p>
<?php endif; ?>
<?php comment_form(); ?>
</div>
No te alarmes si te parece complicado, en realidad no lo es tanto, y para usarlo no es
necesario entenderlo al milímetro, ya que puedes usarlo tal como está, sin embargo
no es tan difícil de entender una vez que lo miras con calma.
Las primeras tres líneas lo que hacen es prevenir que un usuario que no esté logueado
pueda comentar, eso es útil si usted configura en settings para que solo puedan
comentar quienes tengan permiso con la funcionalidad de comentarios protegidos por
contraseña (post_password_required()). Luego creamos en html un div de clase
comment, y si hay comentarios (have_comments()), entonces allí se desplegarán
cuantos comentarios hay en el post con la función get_comments_number(). Luego
dentro de una lista no ordenada se muestra la lista de comentarios usando la función
wp_list_comments(). Si los comentarios están cerrado (! comments_open()), se
mostrará un mensaje indicando que los comentarios están cerrados, y al final se
muestra el formulario para enviar un comentario con la función comment_form().
Sin añadirle ningún estilo así es como se ven los comentarios en el blog

Obviamente podríamos luego aplicarle el estilo que queramos para personalizarlo y
que se vea de una manera mas agradable, aun así, se puede notar como el formulario
de envío de comentario funciona bastante bien, para dale estilo, solo bastaría con
agregar estilos en el archivo css para la clase comment-list de la etiqueta ul, pero en
este momento no es necesario ya en otros tutoriales veremos con mas detalles la parte
de aplicación de estilos css tema en el que vamos a profundizar bastante en esta
pagina ya que es uno de los temas centrales de www.tutofacil.info y en el que nos
vamos a enfocar a profundidad.
Claro que no debemos olvidar que también queremos mostrar en la página principal
de nuestro tema cuantos comentarios tiene cada post, y el respectivo link para acceder
a los comentarios, para lograrlo debemos abrir el archivo content.php y añadir el
siguiente código:
<a href="<?php comments_link(); ?>">
<?php

printf( _nx( 'Un Comentario', '%1$s Comentarios',
get_comments_number(), 'comments title', 'textdomain' ),
number_format_i18n( get_comments_number() ) ); ?>
</a>
[/code]
El código completo del archivo content.php quedaría así:
[code]
href="#"><?php the_author(); ?></a> ~
<a href="<?php comments_link(); ?>">
<?php
printf( _nx('Un Comentario', '%1$s Comentarios', get_comments_number(),
'comments title', 'textdomain' ),
number_format_i18n( get_comments_number() ) ); ?>
</a>
</p>
<?php the_excerpt(); ?>
Con esa modificación se pueden ver en la página principal, cuántos comentarios tiene
cada post
v—

Libro como crear themes desde cero en word press

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (13)

Destacado

Destacado (16)

Similar a Libro como crear themes desde cero en word press

Similar a Libro como crear themes desde cero en word press (20)

Último

Último (20)

Libro como crear themes desde cero en word press