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.infoAuthor: www.tutofacil.info http://www.tutofacil.info/ Description: el tema básico para blog de Bootstrap convertido a un tema para WordPressVersion: 0.0.1Tags: 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í

http://www.tutofacil.info/



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.infoEste 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.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="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 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>

<!-- Bootstrap core JavaScript

================================================== -->  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></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 mayoría de los websites, especialmente los de tipo blog, tendrán un área lateral para incluir diferentes tipos de contenidos, como menús, 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 código que comienza con la etiqueta <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> y termina con la etiqueta </div>, a continuación el código que iría 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>

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> <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>

<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>

<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>

<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>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p></div>[/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 class="col-sm-8 blog-main"> </div> </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"> <div class="col-sm-8 blog-main">

<?php get_template_part( 'content', get_post_format() ); ?>

</div> <?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: <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>

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>

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 <?php get_header(); ?>


<?php if ( have_posts() ) : while ( have_posts() ) : the_post();

get_template_part( 'content', get_post_format() ); endwhile; endif; ?>


<?php get_footer(); ?>

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:

<div class="blog-post"> <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(); ?></div>

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> <ol class="list-unstyled">

<?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 modificarEl 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> <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>

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:

<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>

Elimine lo sobrante para que quede de la siguiente manera <div class="blog-masthead"> <div class="container"> <nav class="blog-nav"> <a class="blog-nav-item active" href="#">Home</a>

<?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í:

<?php get_header(); ?>

<div class="row"> <div class="col-sm-12">



</div> </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í:




get_template_part( 'content-single', get_post_format() ); endwhile; endif; ?>



Ahora vamos a crear también un archivo content-single.php, el cual será un duplicado de content.php

<div class="blog-post"> <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(); ?></div>

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 <h2 class="blog-post-title"><?php the_title(); ?></h2> 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í: <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></p>

<?php the_excerpt(); ?></div>

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







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:




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; ?>



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í:




get_template_part( 'content-single', get_post_format() );

if ( comments_open() || get_comments_number() ) : comments_template(); endif;

endwhile; endif; ?>



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"><?phpprintf( _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]<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>

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

Technology

Transcript of Libro como crear themes desde cero en word press