Hola, sabemos que quieres empezar con tu emprendimiento rápido, que quieres ser lo mas original posible con un costo no tan alto, hoy traigo a ti, un tutorial de como hacer un tema de wordpress en menos de 2 horas, haré un tema bastante sencillo, solo para aquellas personas que quieren usar wordpress como plataforma de contenido, osea hacer un blog para tu empresa o marca personal.

OJO: Es posible, que este tema, no te parezca del todo único, no resalta ni en diseño, ni en funcionalidad, se hace con el fin de no depender o configurar ningún tema de estos gratis, y también darle un toque de personalización a tu tema, muchas veces es mejor tener algo sencillo pero original, ten en cuenta que este puede ser un inicio para ti y que partiendo de aqui puedes añadirle mas funcionalidad a tu tema en WordPress.

Lo primero que debes tener es una plantilla realizada con HTML y CSS3 en donde tenga pues, un sitio donde poder ver los articulos y leer por separados, osea tienes que tener una plantilla con un index y con un post. Si no lo tienes, no hay problema, pues yo tengo uno, te presto el que hice para conexion creativa esta en -> GITHUB

Luego, debemos de crear un directorio ejemplo, THEMEWP, seguido de vaciarle todo los assets de la plantilla en ese directorio:

Teniendo esos archivos, ahora tenemos que crear unos cuantos archivos, en este no los usare todos, pero sirve para dar estructura al tema.

  • header.php
    En este archivo, indicaremos la cabecera que será común en la navegación de la plantilla —como por ejemplo, todo lo que contiene la etiqueta  <head>— o el menú de navegación principal.
  • footer.php
    Al igual que en el caso del archivo header.php, éste será común en toda la plantilla. En él indicaremos la información que estará siempre presente en el pie de página (por ejemplo el copyright o los enlaces a la información legal).
  • sidebar.php
    Este archivo está pensado para mostrarlo a modo de barra lateral (sobre todo cuando se trata de un blog) o conwidgets (por ejemplo un buscador, un listado de categorías o los posts más visitados).
  • front-page.php
    Es la plantilla que WordPress carga por defecto como página de inicio. Está especialmente pensada para que sea un listado de posts, es decir, la portada de un blog.
  • home.php
    Será la plantilla que mostrará WordPress en caso de tener activa la opción Mostrar página estática como página de inicio. Este archivo está pensado para casos en los que la página de inicio es una página estática, como puede ser la página de inicio de un site corporativo.
  • single.php
    Es la plantilla que muestra un post completo por defecto.
  • page.php
    Éste es el archivo de plantilla que mostrará por defecto cualquier página que creemos, siempre y cuando no se le haya especificado una plantilla.
  • category.php
    Sirve para mostrar un listado de posts de una categoría específica.
  • comments.php
    Es la plantilla a la que llamaremos dentro de single.php para poder añadir comentarios a nuestros posts.
  • search.php
    Esta plantilla es la que mostrará Wordress cuando se lleve a cabo una búsqueda.
  • 404.php
    Se trata de la plantilla que se mostrará cuando un enlace esté roto o no funcione.
  • functions.php
    Este archivo nos permitirá crear zonas de menú y de widgets, así como personalizar algunos parámetros que WordPress trae por defecto.
    fuente Inboundcycle

Ahora vamos a modificar las partes del sitio que son globales que en este caso seria la cabecera y el pie de pagina, que pertence a los archivos header.php footer.php

header.php

<!DOCTYPE html>
<html lang="<?php bloginfo('language'); ?>">
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/front.css">
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>">
    <?php wp_head(); ?>    
</head>
<body>
    



<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="/blog">
            <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" width="250px" alt="">
        </a>
    </nav>




  1. <?php bloginfo(‘language’); ?> Sirve para definir el lenguaje del sitio
  2. <?php bloginfo(‘charset’); ?> Define el cotejamiento
  3. <?php wp_title( ‘|’, true, ‘right’ ); ?>Definimos el titulo
  4. <?php echo get_stylesheet_directory_uri(); ?> Directorio root del proyecto, quiere decir que aqui accedemos a la carpeta root y desde ahi acceder a cualquier parte del proyecto.
  5. <?php bloginfo(‘stylesheet_url’) ?> Agarra el archivo style.css

footer.php





<footer>
        



<div class="container">
            

Todos los derechos reservados - &copy; Conexion Creativa <?php echo date("Y") ?>

        </div>




    </footer>




    <?php wp_footer(); ?>
</body>
</html>

ahora es necesario ir por los archivos que tienden a ser mas dinamicos, el index.php, single.php, header.php

index.php

<!-- Archivo de cabecera global de WordPress -->
<?php get_header(); ?>




<section id="content">
        



<div class="banner">
            



<h1>Nuestro Blog</h1>




            

Aqui encontraras los mejores articulos sobre Marketing / Diseño / Programación

        </div>





        



<div class="posts">
            



<div class="container">
            <?php if ( have_posts() ) : ?>
                



<div class="row">
                <?php while ( have_posts() ) : the_post(); ?>
                    



<div class="col-md-4 col-sm-12">
                        



<div class="card">
                    <?php if ( has_post_thumbnail() ) { $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>

												<img src="<?php echo $url; ?>" alt="<?php the_excerpt(); ?>" class="card-img-top" width="100%">
										<?php }?>

                            



<div class="card-body">
                              



<h5 class="card-title"><?php the_title(); ?></h5>




                              

<?php the_excerpt(); ?>

                              <a href="<?php the_permalink(); ?>" class="btn btn-primary btn-block">Ver mas</a>
                            </div>




                          </div>




                    
                    </div>




 
                <?php endwhile; ?>                                        
                </div>




   
                <?php else : ?>
                    

<?php _e('Ups!, no hay entradas.'); ?>

                <?php endif; ?>             
            </div>




        </div>




    </section>





<!-- Archivo de pié global de WordPress -->
<?php get_footer(); ?>

single.php

 

<!-- Archivo de cabecera global de WordPress -->
<?php get_header(); ?>

<!-- Contenido del post -->
<?php if ( have_posts() ) : the_post(); ?>
    


<section id="content">
        


<div class="banner-post">
            


<h1><?php the_title(); ?></h1>



            

                <strong><time datatime="<?php the_time('Y-m-j'); ?>"><?php the_time('j F, Y'); ?></time></strong>
            

        </div>



        


<div class="post">
            


<div class="container">
            <?php the_content(); ?>
            </div>



        </div>



    </section>



<?php else : ?>
  

<?php _e('Ups!, esta entrada no existe.'); ?>

<?php endif; ?>

<!-- Archivo de pié global de WordPress -->
<?php get_footer(); ?>

page.php

<!-- Archivo de cabecera global de WordPress -->
<?php get_header(); ?>

<!-- Contenido del post -->
<?php if ( have_posts() ) : the_post(); ?>
    

<section id="content">
        

<div class="banner-post">
            

<h1><?php the_title(); ?></h1>


            

                <strong><time datatime="<?php the_time('Y-m-j'); ?>"><?php the_time('j F, Y'); ?></time></strong>
            

        </div>


        

<div class="post">
            

<div class="container">
            <?php the_content(); ?>
            </div>


        </div>


    </section>


<?php else : ?>
  

<?php _e('Ups!, esta entrada no existe.'); ?>

<?php endif; ?>

<!-- Archivo de pié global de WordPress -->
<?php get_footer(); ?>

Aun no te funcionara, pues hay un archivo muy importante para un tema en wordpress, el functions.php es el archivo del que sale todas las funciones de un tema, como por ejemplo el uso de mineatura de los post

functions.php

<?php function my_theme_setup(){ //Uso de Mineaturas add_theme_support('post-thumbnails'); //Añadir por defecto los articulos y comentarios RSS add_theme_support('automatic-feed-links'); } add_action( 'after_setup_theme', 'my_theme_setup' ); function my_theme_excerpt($length) { return 25; } add_filter('excerpt_length', 'my_theme_excerpt'); /** * Crear una zonan de widgets que podremos gestionar * fácilmente desde administrador de WordPress. */ function mis_widgets(){ register_sidebar( array( 'name' => __( 'Sidebar' ),
       'id'            => 'sidebar',
       'before_widget' => '
<div class="widget">',
       'after_widget'  => '</div>

',
       'before_title'  => '
<h3>',
       'after_title'   => '</h3>

',
   )
 );
}
add_action('init','mis_widgets');

aqui logro definir varias funciones, pero solo usaremos la de mineaturas.

Necesario, muy necesario que definas este comentario en el style.css

/*
Theme Name: ConexionCreativaThemeWP
Template Theme URI: https://conexioncreativa.net
Author: David Arteaga
Description: Este es el tema de wordpress para el blog de conexion creativa
Version: 1.0

*/

Obviamente, cambias los valores para que quede mejor.

Y pues asi, tendriamos un tema realizado de WordPress, espero les sirva este material, deja tu comentario.

A %d blogueros les gusta esto: