Como crear un theme WordPress


Buenas, hoy aprenderán como crear un theme partiendo de una plantilla HTML.


Paso 1 – Obtener plantilla HTML
Para obtener una plantilla HTML tenemos varias opciones:
– Acceder al sitio que nos gusta, Menú Archivo->Guardar pagina como->Pagina web completa (Esto lo que hace es guardar una copia de la pagina que estamos viendo… puede que algunos archivos no se descarguen y tendremos que descargarlos a mano, lo mas común son objetos dentro de la plantilla CSS). Nivel 1 (Al faltar objetos es mas factible que sino tenemos conocimientos veremos el sitio a medias)

– Descargar una plantilla HTML (En este tutorial usaremos la plantilla Future Imperfect | HTML5 UP, la cual convertiremos a un theme WP). Nivel 2 (Obtenemos todos los archivos y estilos, pero hay cosas que no tendremos (ejemplo estilos de determinados objetos de WP, como los comentarios y otras cosas))

– Usar HTTrack para descargar un sitio completo, al usar este soft nos aseguraremos que todos los archivos se descarguen (tambien se descargara todo el sitio, por lo que se recomienda comenzar a descargar esperar unos minutos y cancelar la descarga, entonces se termina de descargar el sitio con solo lo que escaneo, con esto nos aseguramos de descargar solo el inicio del sitio y como se ve un post)) Nivel 2 y 3 (Obtenemos todo el sitio y si descargamos un sitio echo en WP obtenemos el style.css que necesitamos para el sitio)

Paso 2 – Convertir HTML a código WP
Lo mejor para esto es tener un WP instalado en nuestra PC o en un server, el cual solo usaremos para crear themes WP, si lo tenemos en nuestra PC es mas rapido editar y ver el resultado (Pueden usar AppServ)

– Crear header.php
Partiendo del index.html (del theme HTML que se comento mas arriba) sacaremos lo necesario para crear nuestro header.php
(Se mostrara como es y por que codigo se cambia)

Código HTML:
<html>
<head>
<title>Future Imperfect by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>

a:

Código PHP:
<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
    <head>
        <title><?php DameTit(); ?></title>
            <link rel="profile" href="http://gmpg.org/xfn/11" />
            <link rel="pingback" href="<?php bloginfo'pingback_url' ); ?>" />
        <meta charset="<?php bloginfo'charset' ); ?>" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!--[if lte IE 8]><script src="<?php echo get_template_directory_uri()."/"?>assets/js/ie/html5shiv.js"></script><![endif]-->
        <link rel="stylesheet" href="<?php echo get_template_directory_uri()."/"?>assets/css/main.css" />
<?php if(is_single()){ ?>        <link rel="stylesheet" href="<?php echo get_template_directory_uri()."/"?>assets/css/comentarios.css" /><?php ?>        <!--[if lte IE 9]><link rel="stylesheet" href="<?php echo get_template_directory_uri()."/"?>assets/css/ie9.css" /><![endif]-->
        <!--[if lte IE 8]><link rel="stylesheet" href="<?php echo get_template_directory_uri()."/"?>assets/css/ie8.css" /><![endif]-->
        <?php wp_head(); ?>

Básicamente lo que hacemos aca es agregar el idioma de nuestro WP, el titulo (ver functions.php), y indicarle donde esta nuestro theme (por eso se usa la funcionget_template_directory_uri(), y por ultimo agregamos wp_head() el cual WP se encarga de agregar lo que va dentro del header (o nosotros agregamos por medio de hooks).
Se puede ver que se usa una funcion is_single(), eso es para que si el usuario esta viendo un post agregue el CSS de los comentarios.
(Como sabemos que codigo va en header.php, pues tenemos que copiar todo hasta donde comienzan los post de nuestra plantilla HTML.)

Tenemos:

Código HTML:
  <!-- Wrapper -->
<div id="wrapper">

<!-- Header -->
<header id="header">
<h1><a href="#">Future Imperfect</a></h1>
<nav class="links">
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Feugiat</a></li>
<li><a href="#">Tempus</a></li>
<li><a href="#">Adipiscing</a></li>
</ul>
</nav>
<nav class="main">
<ul>
<li class="search">
<a class="fa-search" href="#search">Search</a>
<form id="search" method="get" action="#">
<input type="text" name="query" placeholder="Search" />
</form>
</li>
<li class="menu">
<a class="fa-bars" href="#menu">Menu</a>
</li>
</ul>
</nav>
</header>.......

a:

Código PHP:
        <!-- Wrapper -->
            <div id="wrapper">

                <!-- Header -->
                    <header id="header">
                        <h1><a href="<?php echo home_url(); ?>"><?php bloginfo'name' ); ?></a></h1>
                        <nav class="links">
                            <?php
                                wp_nav_menu
();
                            
?>                        </nav>
                        <nav class="main">
                            <ul>
                                <li class="search">
                                    <a class="fa-search" href="#search">Search</a>
                                    <form id="search" action="<?php echo bloginfo('siteurl'); ?>" method="GET">
                                        <input type="text" name="s" placeholder="Search" />
                                    </form>
                                </li>
                            </ul>
                        </nav>
                    </header>

Aca completamos el link de nuestro sitio, agregamos un menu, y el buscador.

Y asi terminamos con header.php

– Crear index.php
El index.php sera encargado de mostrar el bucle de los post. Y solo necesitaremos la parte donde se muestran los post en nuestra plantilla.
Tenemos:

Código HTML:
    <!-- Main -->
<div id="main">

<!-- Post -->
<article class="post">
<header>
<div class="title">
<h2><a href="#">Magna sed adipiscing</a></h2>
<p>Lorem ipsum dolor amet nullam consequat etiam feugiat</p>
</div>
<div class="meta">
<time class="published" datetime="2015-11-01">November 1, 2015</time>
<a href="#" class="author"><span class="name">Jane Doe</span><img src="http://forobeta.com/images/avatar.jpg" alt="" /></a>
</div>
</header>
<a href="#" class="image featured"><img src="http://forobeta.com/images/pic01.jpg" alt="" /></a>
<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<footer>
<ul class="actions">
<li><a href="#" class="button big">Continue Reading</a></li>
</ul>
<ul class="stats">
<li><a href="#">General</a></li>
<li><a href="#" class="icon fa-heart">28</a></li>
<li><a href="#" class="icon fa-comment">128</a></li>
</ul>
</footer>
</article>
.................(continuan mas post)

a:

Código PHP:
<?php get_header() ?>
<?php 
if (have_posts()) : while (have_posts()) : the_post(); ?>                        <!-- Post -->
                            <article class="post">
                                <header>
                                    <div class="title">
                                        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
                                        <p></p>
                                    </div>
                                    <div class="meta">
                                        <time class="published" datetime="<?php the_time('F jS, Y'); ?>"><?php the_time('F jS, Y'); ?></time>
                                        <a href="<?php echo get_the_author_link(); ?>" class="author"><span class="name"><?php the_author(); ?></span><?php echo get_avatarget_the_author_meta'ID' ), 36 ); ?></a>
                                    </div>
                                </header>
                                <?php if ( has_post_thumbnail() ) : ?>                                    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="image featured"><?php the_post_thumbnail(); ?></a>
                                <?php else : ?>                                    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="image featured"><img src="<?php echo get_template_directory_uri()."/"?>http://forobeta.com/images/pic01.jpg"></a>
                                <?php endif; ?>                                <p><?php the_excerpt(); ?></p>
                                <footer>
                                    <ul class="actions">
                                        <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="button big">Continue Reading</a></li>
                                    </ul>
                                    <ul class="stats">
                                        <li><?php the_category('</li><li>'); ?></li>
                                        <li><a href="<?php the_permalink() ?>" class="icon fa-comment"></span><?php comments_number'no responses''one response''% responses' ); ?></a></li>
                                    </ul>
                                </footer>
                            </article>
<?php    endwhile; ?>                            <!-- Pagination -->
                            <?php pagination_nav(); ?>
<?php 
else : ?>                    <h2 class="page-heading">All listings</h2>
                    Sorry, but you are looking for something that isn't here.
<?php endif; ?>                    </div>
<?php get_footer(); ?>

Llamamos al header (ya qur por mas que creemos el header.php sino lo llamamos no funcionaria ).
Agregamos el link y el titulo a nuestro post

Código PHP:
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

Los datos del post (fecha y autor)

Código PHP:
<div class="meta">
                                        <time class="published" datetime="<?php the_time('F jS, Y'); ?>"><?php the_time('F jS, Y'); ?></time>
                                        <a href="<?php echo get_the_author_link(); ?>" class="author"><span class="name"><?php the_author(); ?></span><?php echo get_avatarget_the_author_meta'ID' ), 36 ); ?></a>
                                    </div>

Vemos si tiene una imagen el post, y sino tiene colocamos una nosotros:

Código PHP:
                                <?php if ( has_post_thumbnail() ) : ?>                                    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="image featured"><?php the_post_thumbnail(); ?></a>
                                <?php else : ?>                                    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="image featured"><img src="<?php echo get_template_directory_uri()."/"?>http://forobeta.com/images/pic01.jpg"></a>
                                <?php endif; ?>

El excerpt de nuestro post (una version reducida del contenido de nuestro post)

Código PHP:
<p><?php the_excerpt(); ?></p>

Luego agregamos un boton de leer mas, y las categoria a las que se encuentra nuestro post. Cerramos el bucle y sino se encontro ningun post mostramos un texto indicando esto.
Por ultimo llamamos al footer (footer.php).

– Crear sidebar.php
Este archivo solo contendra un codigo, encargado de llamar a los sidebar

Código PHP:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?><?php endif; ?>

– Crear footer.php
Lo que nos queda de nuestro theme HTML es el sidebar y el footer, el codigo del sidebar lo eliminaremos por completo, no lo usaremos en el tutorial, por lo que quedaria solo:

Código HTML:
      <!-- Footer -->
<section id="footer">
<ul class="icons">
<li><a href="#" class="fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="fa-rss"><span class="label">RSS</span></a></li>
<li><a href="#" class="fa-envelope"><span class="label">Email</span></a></li>
</ul>
<p class="copyright">&copy; Untitled. Design: <a href="http://html5up.net">HTML5 UP</a>. Images: <a href="http://unsplash.com">Unsplash</a>.</p>
</section>

</section>

</div>

<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>

</body>
</html>

a:

Código PHP:
                <!-- Sidebar -->
                    <section id="sidebar">
                        <?php get_sidebar(); ?>                        <!-- Footer -->
                            <section id="footer">
                                <ul class="icons">
                                    <li><a href="#" class="fa-twitter"><span class="label">Twitter</span></a></li>
                                    <li><a href="#" class="fa-facebook"><span class="label">Facebook</span></a></li>
                                    <li><a href="#" class="fa-instagram"><span class="label">Instagram</span></a></li>
                                    <li><a href="#" class="fa-rss"><span class="label">RSS</span></a></li>
                                    <li><a href="#" class="fa-envelope"><span class="label">Email</span></a></li>
                                </ul>
                                <p class="copyright">&copy; <span><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></span> <?php echo date('Y',time()); ?> | Design: <a href="http://html5up.net" target="_blank" rel="nofollow">HTML5 UP</a>.</p>
                            </section>

                    </section>

            </div>

            <!-- Scripts -->
            <script src="<?php echo get_template_directory_uri()."/"?>assets/js/skel.min.js"></script>
            <script src="<?php echo get_template_directory_uri()."/"?>assets/js/util.js"></script>
            <!--[if lte IE 8]><script src="<?php echo get_template_directory_uri()."/"?>assets/js/ie/respond.min.js"></script><![endif]-->
            <script src="<?php echo get_template_directory_uri()."/"?>assets/js/main.js"></script>
            <?php wp_footer(); ?>    </body>
</html>

Basicamente lo que hacemos es agregar una llamada al sidebar.php y luego indicarle donde se encuentran nuestros archivos (ver ayuda de header.php).

Con esto ya tendriamos nuestro theme base, pero al entrar a un post veriamos el post cortado (ya que se esta usando index.php), por eso crearemos un single.php, el cual sera identico a index.php pero cambiaremos:
– Crear single.php

Código PHP:
<p><?php the_excerpt(); ?></p>

por:

Código PHP:
<p><?php the_content(); ?></p>

Como ven es identico solo cambian algunas cosas que sirven para mostrar el post completo y no un extracto del mismo.
Eliminamos el boton de ver mas y agregamos el formulario de los comentarios:

Código PHP:
<?php comments_template(); ?>

Ya tenemos nuestro theme para WP… pero WP no lo reconoce, para que WP pueda agregar nuestro theme al sitio tendremos que crer un style.css el cual contendra los datos del theme
– Crear style.css

Código HTML:
/*
Theme Name: Tutorial ForoBeta
Theme URI: http://www.cicklow.com/
Author: Cicklow
Author URI: http://www.cicklow.com/
Description: Theme responsive
Version: 1.0
*/

El nombre del theme, la url, el autor, la url del autor, la descripción, y la versión del mismo.

Si queiren que el theme tenga una imagen en el selector de dieños, solo crearemos una imagen con el nombre screenshot.png

Paso 3 – Crear functions.php
El archivo acompañara nuestro theme y sera encargado de varias cosas…
Agregar jquery a nuestro theme (ya que el theme lo necesita)

Código PHP:
    function my_scripts_method() {
        
wp_enqueue_script'jquery' );
    }

    add_action'wp_enqueue_scripts''my_scripts_method' );  

Como sera la estructura de nuestros sidebars

Código PHP:
    //Sidebar
    
if ( function_exists('register_sidebar') )
        
register_sidebar(array(
        
'before_widget' => '<section>',
        
'after_widget' => '</section>',
        
'before_title' => '<h2>',
        
'after_title' => '</h2>',
        
'class' => 'list-unstyled',
    ));  

El tamaño de las imagenes de los post

Código PHP:
    //Imagenes
    
add_theme_support'post-thumbnails' );
    
set_post_thumbnail_size840341true );  

El paginado de nuestros post

Código PHP:
    function pagination_nav() {
            global $wp_query;

        if ( $wp_query->max_num_pages > 1 ) { ?>
                <ul class="actions pagination">
                        <li><div class="button big previous"><?php next_posts_link'Older posts' ); ?></div></li>
                        <li><div class="button big next"><?php previous_posts_link'Newer posts' ); ?></div></li>
                </ul>
        <?php }
    }

Obtener el titulo para nuestro theme

Código PHP:
    function DameTit(){
        global 
$page$paged;

        if($_GET['q']!=""){
            echo 
ucfrst($_GET['q']).' | ';
            
bloginfo'name' );
        }else{
            
wp_title'|'true'right' );

            // Nombre del blog

            bloginfo'name' );

            // descripcion

            $site_description get_bloginfo'description''display' );

            if ( $site_description && ( is_home() || is_front_page() ) )

                echo " | $site_description";

            // numero de paginas

            if ( $paged >= || $page >= )

                echo ' | ' sprintf__'Page %s''minimal' ), max$paged$page ) );

        }
    }  

(Si no se quiere usar esta funcion, solo coloquen wp_title() en ves de DameTit() )

Demo del theme HTML: Future Imperfect | HTML5 UP
Demo del theme WP…
Inicio


Como se ve el post




Que pasa si no quiero usar una plantilla HTML, pues es facil si sabes de diseño puedes usar http://themble.com/bones/ el cual es un theme WP sin diseño (sin nada bonito), de esta manera solo creas los estilos para cada objeto de WP…

Este tutorial puede ser colocado en cualquier otro lugar siempre y cuando exista un link hacia el mismo, y se prohíbe la comercialización total o parcial del mismo

Ayuda de WP (en ingles): https://codex.wordpress.org/Theme_Development

Saludos…

PD: El botón descargar es para descargar el theme terminado 
Diferencias entre plantilla HTML y Theme WP: http://test.cicklow.me/diff_theme.htm

Fernando Guillem

Un apasionado escritor, bloguero, experto en SEO, programador y un encantador humano. Me encanta la tecnología, difundir el conocimiento y aprender cosas nuevas.

Ver todas las entradas de Fernando Guillem →

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *