Escolar Documentos
Profissional Documentos
Cultura Documentos
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.
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/
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
*/
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.
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.
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
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">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Blog Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<!-- Custom styles for this template -->
<link href="<?php bloginfo('template_directory');?>/blog.css"
rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and
media queries -->
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<?php wp_head();?>
<!-- <<<< OJO NO OLVIDAR AADIR ESTO -->
</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="container">
<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><!-- /.container -->
<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>
<!-- Bootstrap core JavaScript
=========================================
========= -->
<!-- Placed at the end of the document so the pages load faster
-->
<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(); ?> <!-- <<<< OJO NO OLVIDAR AADIR
ESTO -->
</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><!-- /.blog-sidebar -->, 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>
<div class="sidebar-module">
<h4>Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>
</div><!-- /.blog-sidebar -->
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, 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><!-- /.blog-post -->
<div class="blog-post">
<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>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras
mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla
sed 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>
</div><!-- /.blog-post -->
<div class="blog-post">
<h2 class="blog-post-title">New feature</h2>
<p class="blog-post-meta">December 14, 2013 by <a
href="#">Chris</a></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><!-- /.blog-main -->
</div><!-- /.row -->
[/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 class="col-sm-8 blog-main">
</div><!-- /.blog-main -->
[/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">
<div class="col-sm-8 blog-main">
<?php get_template_part( 'content', get_post_format() ); ?>
</div><!-- /.blog-main -->
<?php get_sidebar(); ?>
</div><!-- /.row -->
<?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.
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
<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]
[/code]
Y donde va esto
[code]
[/code]
Cambiar por:
[code]
</div>
Cambiar por:
<div class="blog-header">
<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>
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
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
<?php get_header(); ?>
<div class="row">
<div class="col-sm-8 blog-main">
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile; endif;
?>
</div><!-- /.blog-main -->
<?php get_sidebar(); ?>
</div><!-- /.row -->
<?php get_footer(); ?>
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>
<div class="sidebar-module">
<h4>Archives</h4>
<ol class="list-unstyled">
<?php wp_get_archives('type=monthly'); ?>
</ol>
</div>
<div class="sidebar-module">
<h4>Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>
</div><!-- /.blog-sidebar -->
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
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:
<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>
</nav>
</div>
</div>
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, 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:
<?php get_header(); ?>
<div class="row">
<div class="col-sm-12">
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile; endif;
?>
</div><!-- /.blog-main -->
</div><!-- /.row -->
<?php get_footer(); ?>
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
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:
<?php get_header(); ?>
<div class="row">
<div class="col-sm-12">
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content-single', get_post_format() );
endwhile; endif;
?>
</div><!-- /.blog-main -->
</div><!-- /.row -->
<?php get_footer(); ?>
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:
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.
Colocando la Paginacin:
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:
<?php get_header(); ?>
<div class="row">
<div class="col-sm-8 blog-main">
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;
?>
<nav>
<ul class="pager">
<li><?php next_posts_link( 'Previo' ); ?></li>
<li><?php previous_posts_link( 'Siguiente' ); ?></li>
</ul>
</nav>
<?php
endif;
?>
</div><!-- /.blog-main -->
<?php get_sidebar(); ?>
</div><!-- /.row -->
<?php get_footer(); ?>
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.
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/
endif;
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>
[/code]
El cdigo completo del archivo content.php quedara as:
[code]
<div class="blog-post">
<h2 class="blog-post-title"><a href="<?php the_permalink(); ?>"><?php
the_title(); ?></a></h2>
<p class="blog-post-meta"><?php the_date(); ?> creado por <a
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(); ?>
</div><!-- /.blog-post -->
Con esa modificacin se pueden ver en la pgina principal, cuntos comentarios tiene
cada post
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/