Libro Como Crear Themes Desde Cero en WordPress

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 diseador o desarrollador freelance, esta puede ser la catapulta
que puede darle un empujn a tu carrera para permitirte darte a conocer y conseguir
buenos trabajos, muchas personas usan WordPress, no solo lo usan los blogger,
desarrolladores y diseadores, 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 impresin 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 trfico, 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 exposicin y trfico, 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 tambin 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 cmo funciona. Y como ya se seal 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 bsico, 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 construccin de cualquier tipo de aplicacin Web, es
ideal para sitios que requieren de constante actualizacin y contenidos dinmicos, es

usado para todo tipos de blog, magazines, tiendas en lnea y todo tipo de pginas con
contenidos dinmicos.
Comencemos a crear nuestro Tema, lo primero es el diseo

que vamos a usar:
Podemos crear un theme WordPress a partir de cualquier diseo, no importa si es una
plantilla hecha con bootstrap, o con Foundation, con Skeleton o si es hecha con puro
Html5/CSS, cualquier diseo puede muy fcilmente 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 pgina de bootstrap, que es
una plantilla para un blog
Para que puedas seguir este tutorial necesitas La plantilla bsica HTML inicial hecha
con bootstrap para un blog, puedes descargarla aqu:
https://www.tutofacil.info/creando-un-tema-wordpress-desde-cero-tutorial-2017para-principiantes-parte-1/
Creando nuestro Tema personalizado:

En nuestra instalacin de WordPress, estaremos trabajando en la carpeta wp-content
> themes all es donde estn ubicado los temas que tengamos instalado en
WordPress, si entras en esa carpeta, podrs 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 mnimos 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 descripcin y poner la que usted
prefiera:
/*
Theme Name: ejemplo tutofacil.info

Author: www.tutofacil.infohttp://www.tutofacil.info/
Description: el tema bsico para blog de Bootstrap convertido a un tema para
WordPress
Version: 0.0.1
Tags: bootstrap
*/
Creando el archivo index.php:

Ok recuerdas el cdigo que bajaste antes que tena 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-2017para-principiantes-parte-1/
Ahora, descomprime el archivo bajado, debera 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,
cmbiale el nombre al archivo index.html a index.php.
Listo ya tienes un tema creado, si vas al rea de administracin 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 anmate a activar el tema creado y luego, sin salir del rea de administracin,
en una nueva pestaa, abre la pgina principal de tu blog
Como puedes ver tcnicamente ya has creado una plantilla propia para tu blog, la
plantilla aunque es la misma que se haba bajado, ha perdido los estilos, ya lo vamos
a resolver ms adelante, an es una pgina html esttica falta aadirles 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 cdigo
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 cdigo de index.php, podemos observar que el cdigo hace referencia a
una hoja de estilo que esta ubicado en un cdn, o sea aun as Por qu no carga los
estilos?, la razn es porque hay que indicarle a WordPress que busque los estilos en la
carpeta donde este instalado el tema que en nuestro caso sera wp-content/themes/
tema_tutofacil.info y una forma de remediarlo fcilmente se muestra a
continuacin; abra el archivo index.php, y ubiqumonos en el cdigo en la parte
donde se carga el estilo, o sea en el cdigo siguiente:
<link href="blog.css" rel="stylesheet">
Necesitamos decirle a WordPress que enlace a la carpeta del tema de forma dinmica,
para eso, reemplace el cdigo anterior por el cdigo que se muestra a continuacin:
<link href="<?php bloginfo('template_directory');?>/blog.css"
rel="stylesheet">
Hay que sealar, que este mtodo, no es el ms recomendado para cargar script
dentro de su website, pero es la manera ms fcil para mostrar cmo funciona, es por
eso que por los momentos vamos a usar este mtodo, y ms adelante mostraremos
como hacer esto mismo de la forma ms adecuada.
Como puede ver, es muy simple, simplemente invocamos la funcin 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 pgina 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 navegacin 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 modificacin al cdigo, y es aadir <?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 continuacin todo el cdigo
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.css"
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 ms o menos lo mismo que ya hicimos con el header, en
el footer irn 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 pginas WordPress. Al igual que ya hicimos en el header, en
footer.php tambin debemos aadir un pequeo cdigo <?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>


<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.j
s"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.
min.js"></script>
<?php wp_footer(); ?> 
</body>
</html>
Creando el sidebar.php:
La mayora de los websites, especialmente los de tipo blog, tendrn un rea lateral
para incluir diferentes tipos de contenidos, como mens, nubes de tags, publicidad,
lista de enlaces a contenidos destacados, enlaces a redes sociales y cosas por el estilo,
eso es el sidebar, en el archivo index.php es la parte de cdigo que comienza con la
etiqueta <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> y termina con la
etiqueta </div>, a continuacin el cdigo que ira en el archivo
sidebar.php.
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis
euismod. Cras mattis consectetur purus sit amet fermentum.
Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="sidebar-module">
<h4>Archives</h4>
<ol class="list-unstyled">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
<li><a href="#">January 2014</a></li>
<li><a href="#">December 2013</a></li>
<li><a href="#">November 2013</a></li>
<li><a href="#">October 2013</a></li>
<li><a href="#">September 2013</a></li>
<li><a href="#">August 2013</a></li>
<li><a href="#">July 2013</a></li>
<li><a href="#">June 2013</a></li>
<li><a href="#">May 2013</a></li>
<li><a href="#">April 2013</a></li>
</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>
Aadiendo el contenido en el archivo content.php:

Si el sidebar es donde toda la informacin secundaria va, el content.php es donde va
el contenido principal, en este archivo es donde se ubican los artculos 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>
ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem
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>
<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>

ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem
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>
[/code]
Volviendo al index.php:
Ahora que hemos dividido el cdigo en varios archivos, podemos ver que nuestro
archivo index.php se ha quedado bastante pelado, en efecto el cdigo restante
debera 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 ms adelante en esta serie de tutoriales vamos a
implementar una paginacin funcional con funciones WordPress, o sea que ese
cdigo no lo necesitamos as que podemos eliminarlo, as el cdigo en el archivo
index.php debe quedar como se muestra a continuacin:
[code]
<div class="row">
</div>
[/code]
Ahora vamos a aadir todo lo que pusimos en archivos separados al index.php, a
continuacin se muestra el nuevo cdigo de index.php con el cdigo php con las
funciones WordPress necesarias para aadir 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 cdigo 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 cdigo, claro que como es
cdigo php, deben ir dentro de las etiquetas de inicio y final de cdigo <?php ?>
para indicarle al servidor que debe tratarlo como cdigo php y as haga el renderizado
a html, la funcin que inserta el contenido es ligeramente diferente, pero ms o
menos hace lo mismo.
Si en este momento usted recarga la direccin 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 Ttulo del sitio:

Ahora en nuestro thema, el ttulo que tiene es el ttulo que vena por defecto en la
plantilla de bootstrap que estamos usando, especficamente el titulo pone The
Bootstrap Blog, que est codificado en forma esttica en html dentro de las etiquetas
<title></title>, eso hay que cambiarlo para que ponga el ttulo que se asigna dentro
de WordPress en el rea de administracin del sitio, si vamos a opciones generales
dentro de WordPress podremos ver qu ttulo le hemos puesto a nuestro blog, en
nuestro caso es el que se muestra a continuacin:
Ese ttulo 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 funcin get_bloginfo( 'name' )

muestra el ttulo del blog y la funcin get_bloginfo( 'description' ) muestra la
descripcin, pero para que se muestre el ttulo en el blog propiamente dicho tambin
tenemos que hacer los siguientes cambios dentro del div con clase blog-title y
dentro del prrafo de clase lead blog-description, y como tambin queremos que
el ttulo sirva como link para ir al la pagina principal del blog, vamos a usar la
funcin bloginfo('wpurl'), como se muestra en el siguiente cdigo;
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 aadido nuestro primer contenido dinmico, recarga la pgina de tu

blog para ver los cambios.
v
Entendiendo el Loop:
Lo que queremos en realidad, es poder insertar el contenido dinmicamente, o sea
que se muestre el contenido de los post y artculos que hayamos creado para la
pgina, y en WordPress esto se logra a travs de El loop, es la funcin ms
importante en WordPress, ya que todo el contenido es generado y mostrado a partir

de El Loop.
Si nos vamos al rea de administracin, o sea al Dashboard, si te diriges a la seccin
de los post, vers 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 cdigo se explica solito, viene a ser algo como; si hay post,
mientras an 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 debera terminar es donde termina el loop
para cada post, vamos a aadir 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 cdigo, 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
prrafos de ejemplo que hay all y lo dejamos como se muestra en el siguiente

cdigo:
<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 ttulo del post, the_date(); muestra la fecha de

creacin 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
tambin aadas mas post para que vea como se muestran.
Ahora vamos a mostrar dinmicamente la barra lateral o sea el sidebar, en este

sidebar vamos a mostrar una descripcin del autor y la lista de archivos, la
descripcin del usuario puede cambiarla en el panel de administracin, en la seccin
de informacin biogrfica.
Ahora abra el archivo sidebar.php, elimine todas las etiquetas li y su contenido, el
cdigo debe quedar as:
<h4>Archives</h4>
<?php wp_get_archives('type=monthly'); ?>
</ol>
En la parte de la descripcin, modifcalo como se ve en el siguiente cdigo:

<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 fcilmente en el cdigo la seccin que
debe modificar
El cdigo completo del archivo sidebar.php quedara 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 pgina debera mostrarse dinmicamente la descripcin del usuario y

el archivo
Y as es como se debera ver nuestro blog
v
Men y Pginas:
Ahora ya sabemos como hacer un blog y editar el contenido del sidebar, ahora vamos
a modificar la navegacin principal. Como sabemos, existen dos tipos de contenidos
bsicos por defecto en WordPress, los Post y las Pginas, ambos son muy similares
ya que ambos hacen uso de El Loop, la diferencia vendra a ser que las paginas son
donde usted pone el contenido que no es un post de un blog, aqu es donde las
caractersticas de CMS de WordPress salen a relucir, cada pgina individual puede ser
personalizada como usted quiera personalizarla.
WordPress por defecto ya viene con una pgina de ejemplo creada, vamos a crear otra
para que haya ms de una y as veamos cmo se aaden al men de navegacin,
ahora dirjase al panel de administracin y en la seccin de page, cree una nueva
pgina de ejemplo.
Ahora si vamos a modificar el cdigo en el archivo header.php para mostrar la
navegacin dinmicamente, lo primero es cambiar el cdigo del navbar para que
aparezcan los links a las pginas, en header.php ubquese en el siguiente cdigo:
<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 funcin wp_list_pages(); se encarga de listar las pginas que tengamos en una

lista no ordenada y el '&title_li=' es para que no aada un ttulo de pgina antes de la
lista. Ahora as como esta no se ve nada esttico, ya que el cdigo css original le da
estilos a elementos dentro de etiquetas a, no a etiquetas li
Afortunadamente esto puede solucionarse muy fcilmente, lo nico que hay que
hacer es aplicar los estilos que tenan aplicados las etiquetas a, a las etiquetas li
En el archivo blog.css, aada el siguiente cdigo
.blog-nav li {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
}
.blog-nav li a {
color: #fff;
}
Ahora se ve mucho mejor
Pginas, personalizar page.php:

Las pginas 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 disposicin de las pginas, vamos a modificar el
archivo page.php, recuerde, para modificar la disposicin de los post del blog
usamos index.php y para modificar la disposicin de las pginas usamos page.php.
Cree un archivo llamado page.php, y copie y pegue all todo el cdigo que ya tiene
index.php, ya que son muy similares, index es para los post, page es para las
pginas, vamos a hacer la modificacin para que no se muestre sidebar y para que el
contenido de la pgina 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 dems 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 pgina de ejemplo debera verse parecida a esto:
Aunque an 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 cmo trabaja y cmo
funciona este magnfico CMS, ahora usted sabe que cualquier plantilla que consiga
por all puede ser convertida en un tema WordPress muy fcilmente 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
aadir la paginacin, los comentarios, tipos de post personalizados, y mucho ms,
como ya dije al comienzo, aprender como crear temas en WordPress, y aprender
cmo 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, cmo desplegar
contenido de los post y pginas, 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 quedara as:
<div class="row">
<?php
get_template_part( 'content-single', get_post_format() );
endwhile; endif;
?>
</div>
Ahora vamos a crear tambin un archivo content-single.php, el cual ser un

duplicado de content.php
<?php the_content(); ?>
Como ya habrs notado, index.php muestra content.php y single.php muestra

content-single.php.
Ahora abramos el archivo original content.php para hacerle una pequea
modificacin, al abrir content.php podemos ver que tenemos un ttulo
Aqu vamos a hacer una pequea modificacin para que el ttulo sea un link al post
individual, usando la funcin the_permalink()cambie el cdigo 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 ttulo 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

funcin the_content(); por la funcin the_excerpt(); para que no se muestre el
contenido completo del post, sino solo el resumen de 55 palabras que suele mostrarse
en las pginas 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 Paginacin:
Para colocar la paginacin se usan las siguientes funciones;

next_posts_link( 'Previo' ) y previous_posts_link( 'Siguiente' ), estas funciones
tenemos que aadirlas 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 cdigo de index.php pueden notar que El Loop tiene una sentencia if
y una sentencia while, y tambin tiene sus respectivas sentencias de terminacin, o
sea tiene un endwhile; y luego el respectivo endif; es bueno que se ubique en esa
parte del cdigo, ya que el cdigo de las funciones para la paginacin, debe ir justo
entre esas dos sentencias de terminacin, justo despus del endwhile; y antes de
endif; final, recuerde, entre el endwhile y el endif, despus de incluir las funciones
el cdigo debera 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>
Fjate que justo despus del endwhile colocamos la clusula de finalizado del cdigo
php ?> porque all viene un trozo de cdigo en html, y dentro de las etiquetas li
volvemos a usar la etiqueta de php para iniciar el cdigo php e insertar la funcin
next_post_link con la palabra previo, esa palabra puede cambiarla por la que
prefiera, y luego hacemos lo mismo con la funcin previous_post_link para mostrar
el botn de siguiente.
Por lo general la paginacin ocurre cada 10 post, Como tenemos pocos post, voy a
entrar en el rea de administracin en la seccin de Settings > Reading para cambiar
que se muestre 10 post, a que se muestre uno solo, para as poder ver la paginacin,
despus de modificado el cdigo, la paginacin debera verse as:
La paginacin funciona perfectamente bien, puedes ver los post anteriores, luego ir a
los ms nuevos, en fin una paginacin perfectamente funcional lograda muy
fcilmente 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, despus que te acostumbras a la idea y con poco de cdigo,
veras que son tan fciles 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
cdigo:
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
El cdigo completo en single.php quedara 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 cdigo que le aadimos solo le indica que cargue la plantilla de comentarios, pero
la plantilla de comentarios no la hemos creado an, as que vamos a hacerlo ahora,
vamos a crear un archivo que se llame comments.php y le aadimos el cdigo a
continuacin:
<?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 milmetro, ya que puedes usarlo tal como est, sin embargo
no es tan difcil de entender una vez que lo miras con calma.
Las primeras tres lneas 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
contrasea (post_password_required()). Luego creamos en html un div de clase
comment, y si hay comentarios (have_comments()), entonces all se desplegarn
cuantos comentarios hay en el post con la funcin get_comments_number(). Luego
dentro de una lista no ordenada se muestra la lista de comentarios usando la funcin
wp_list_comments(). Si los comentarios estn cerrado (! comments_open()), se
mostrar un mensaje indicando que los comentarios estn cerrados, y al final se
muestra el formulario para enviar un comentario con la funcin comment_form().
Sin aadirle ningn estilo as es como se ven los comentarios en el blog
Obviamente podramos 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 envo de comentario funciona bastante bien, para dale estilo, solo bastara 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 aplicacin 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 tambin queremos mostrar en la pgina 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 aadir el
siguiente cdigo:
<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 cdigo completo del archivo content.php quedara 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 modificacin se pueden ver en la pgina principal, cuntos comentarios tiene
cada post

Libro Como Crear Themes Desde Cero en WordPress

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Libro Como Crear Themes Desde Cero en WordPress

Hochgeladen von

Copyright:

Verfügbare Formate

Creando un tema WordPress desde cero, tutorial para

Qu podemos hacer con WordPress?:

ideal para sitios que requieren de constante actualizacin y contenidos dinmicos, es

Comencemos a crear nuestro Tema, lo primero es el diseo

Creando nuestro Tema personalizado:

Creando el archivo style.css:

Theme Name: ejemplo tutofacil.info

Creando el archivo index.php:

Listo ya tienes un tema creado, si vas al rea de administracin de tu blog, y entras en

Como puede ver, es muy simple, simplemente invocamos la funcin bloginfo de

Dividir la pgina en secciones:

As que ahora vamos a comenzar a cortar secciones de index.php y la vamos a

Aadiendo el contenido en el archivo content.php:

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur

</div>

Configurando el Ttulo del sitio:

<title> <?php echo get_bloginfo( 'name' ); ?> </title>

<meta name="description" content="">

<meta name="description" content="<?php echo

Lo anterior es para las etiquetas title y meta, la funcin get_bloginfo( 'name' )

Ok , ya le hemos aadido nuestro primer contenido dinmico, recarga la pgina de tu

importante en WordPress, ya que todo el contenido es generado y mostrado a partir

En este cdigo, la nica cosa dentro de El Loop, es el content.php, que es el archivo

prrafos de ejemplo que hay all y lo dejamos como se muestra en el siguiente

Es super simple, the_title(); es el ttulo del post, the_date(); muestra la fecha de

Ahora vamos a mostrar dinmicamente la barra lateral o sea el sidebar, en este

En la parte de la descripcin, modifcalo como se ve en el siguiente cdigo:

Y si recarga la pgina debera mostrarse dinmicamente la descripcin del usuario y

Y as es como se debera ver nuestro blog

Elimine lo sobrante para que quede de la siguiente manera

La funcin wp_list_pages(); se encarga de listar las pginas que tengamos en una

Pginas, personalizar page.php:

Y si revisas la pgina de ejemplo debera verse parecida a esto:

Personalizando los post individuales:

Ahora vamos a crear tambin un archivo content-single.php, el cual ser un

Como ya habrs notado, index.php muestra content.php y single.php muestra

<h2 class="blog-post-title"><a href="<?php the_permalink(); ?>"><?php

Finalmente en el mismo archivo content.php, vamos a cambiar la llamada a la

Para colocar la paginacin se usan las siguientes funciones;

Agregando los comentarios:

El cdigo completo en single.php quedara as:

No te alarmes si te parece complicado, en realidad no lo es tanto, y para usarlo no es

Obviamente podramos luego aplicarle el estilo que queramos para personalizarlo y

printf( _nx( 'Un Comentario', '%1$s Comentarios', get_comments_number(),

Das könnte Ihnen auch gefallen