Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Crear Theme Wordpress desde cero
#1
Comenzamos con este tutorial donde vamos a crear un theme para wordpress que vamos a poder utilizar como blog o como cualquier web, vamos a hacer este theme de wordpress desde cero y lo vamos a hacer que tenga las funciones básica que debe tener cualquier theme de wordpress.

Esto es lo que vamos a lograr:

[Imagen: 76727d1461889329-creacion-de-theme-wordp...ro-web.jpg]

Bueno, antes de comenzar, miremos los archivos que tenemos que utilizar para crear este theme:

[Imagen: 76728d1461889375-creacion-de-theme-wordp...chivos.jpg]

Miremos como se crear cada archivo individualmente:

1 – Header.php
2 – index.php
3 – sidebar.php
4 – footer.php
5 – single.php
6 – comments.php
7 – functions.php
8 – style.css


Lo otro es la carpeta de imágenes donde solo tenemos el logo.

[Imagen: 76729d1461889397-creacion-de-theme-wordp...header.jpg]

Y el screenshot.png que es una imagen miniatura de representación de la web que puede ser de 300px * 225px que es la imagen que se nos mostrar en la administración del sitio en la opción de temas

[Imagen: 76730d1461889505-creacion-de-theme-wordp...rdrrrr.jpg]

Header.php

Este es el código para el header.php que contendrá las etiquetas que darán información a la web, asi como el enlace a los estilos css y los meta, también la apertura del body y el menú:

Código PHP:
Código:
<!DOCTYPE html>   
  <html <?php language_attributes() ?>> 
    <head>     
      <meta charset="<?php bloginfo('charset') ?>" />     
      <title><?php wp_title('-', true, 'right'); bloginfo() ?></title>  
      <!-- Stylesheets -->     
      <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">  
      <!-- RSS & Atom -->     
      <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name') ?> - RSS" href="<?php bloginfo('rss2_url') ?>" />    
      <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name') ?> - Atom" href="<?php bloginfo('atom_url') ?>" /> 
    </head>   
    <body>   
      <div id="wrapper">   
        <div class="header">   
          <div class="logo"> 
            <a href="<?php bloginfo('url') ?>"> 
              <img src="<?php bloginfo('template_url')?>/imagenes/header.jpg" alt="logo" /> 
            </a> 
          </div> 
        </div> 
          <nav>   
        <?php wp_nav_menu();  ?> 
        </nav>

Explicación del código:

Abrimos el DOCTYPE, el nuevo de HTML5

Código PHP:
Código:
 <html <?php language_attributes() ?>>

Abrimos la etiqueta html y añadimos la función de wordpress para definir el lenguaje

Código PHP:
Código:
<meta charset="<?php bloginfo('charset') ?>" />

Definimos la codificación de la pagina es decir la codificación de los caracteres del documento web.

Código PHP:
Código:
<title><?php wp_title('-', true, 'right'); bloginfo() ?></title>

Definimos el titulo de la pagina por medio de la función integrada de wordpress que lo hace dinámicamente desde el administrador en sus opciones de configuración.

Código PHP:
Código:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

Cargamos la hoja de los estilos css

Código PHP:
Código:
<link rel="alternate" type="application/rss+xml" 
   title="<?php bloginfo('name') ?> - RSS" href="<?php bloginfo('rss2_url') ?>" /> 
<link rel="alternate" type="application/atom+xml" 
    title="<?php bloginfo('name') ?> - Atom" href="<?php bloginfo('atom_url') ?>" />

Habilitamos la opcion del feed para el blog por medio del rss, y la funcion de AtomPub

Código PHP:
Código:
<div class="header">   
          <div class="logo"> 
            <a href="<?php bloginfo('url') ?>"> 
              <img src="<?php bloginfo('template_url')?>/imagenes/header.jpg" alt="logo" /> 
            </a> 
          </div> 
        </div>

Después de haber cerrado el head y abrir el body y abrir el id wrapper que será el contenedor general añadimos el header con sus respectivos elementos.

Código PHP:
Código:
<nav> 
   <?php wp_nav_menu();  ?> 
</nav>

por ultimo acabamos el header.php añadiendo la barra de menu por medio de la funcion wp_nav_menu que nos muestra el menu principal del blog.

Y asi tenemos el Header.php Listo. !!


Index.Php

Este archivo es el que wordpress busca por defecto como index o pagina inicial, ahora esto lo podemos modificar y colocar cualquier pagina personalizada desde el panel de administración, pero el index será uno de los archivos más importantes de wordpress.

A continuacion veremos el codigo del index.php de nuestro theme y abajo te lo explico.

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

  <div id="contenido"> 
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
        <div id="entrada"> 
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> 
            <p class="postmetadata">            
                    Por <?php the_author(', '); ?> el <?php the_time('F jS, Y'); ?> en <?php the_category(', ') ?> | <?php comments_popup_link('Sin Comentario »', '1 Comentario »', '% Comentarios »'); ?> 
            </p> 
            <div class="imagen-post-thumbnail"> 
                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a> 
            </div> 
            <div class="entry"> 
                <?php the_excerpt(); ?> 
                <a href="<?php echo get_permalink(); ?>"><div class="mas">Leer mas...</div></a> 
            </div> 
        </div> 

    <?php endwhile; ?> 


    <?php else : ?> 

        <h2>Not Found</h2> 

    <?php endif; ?> 
    </div> 

<?php get_sidebar(); ?> 

<?php get_footer(); ?>

comencemos con la explicacion de codigo anterior, que generalmente lo que hace es llamadas a los demas archivo estructurales (header, footer y sidebar), y muestra los post establecidos.

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

<?php get_sidebar(); ?> 

<?php get_footer(); ?>

Funcion de wordpress para llamar el archivo header.php y debajo de loop de wordpress llamamos al sidebar.php que es la barra lateral y el footer.php que es el pie de pagina.

Lo otro es el conocido y famoso loop de wordpress, vamos a ver como funciona este loop.

Código PHP:
Código:
<div id="contenido"> 
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
    <div id="entrada">

Primero abrimos el div contenido que va a tener el contenido principal, luego se inicia el loop diciendo <?php if (have_posts()) : while (have_posts()) : the_post(); ?>, si hay post en la base de datos haz lo siguiente. Y luego abrimos un div entrada que contendrá la introducción del post o articulo.

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

Luego añadimos dinámicamente el titulo del post con la función the_permalink() dentro de un H2

Código PHP:
Código:
<p class="postmetadata">            
                    Por <?php the_author(', '); ?> el <?php the_time('F jS, Y'); ?> en <?php the_category(', ') ?> | <?php comments_popup_link('Sin Comentario »', '1 Comentario »', '% Comentarios »'); ?> 
</p>

En un párrafo con una clase para darle un estilo diferente encerramos los metadatos con las siguientes funciones <?php the_author(‘, ‘); ?> para mostrar dinámicamente el autor del post, <?php the_time(‘F jS, Y’); ?> para mostra la fecha en que fue escrito el post, <?php the_category(‘, ‘) ?> para mostrar la categoría a que pertenece el post y <?php comments_popup_link(‘No Comments »’, ’1 Comment »’, ‘% Comments »’); ?> para mostrar cuantos comentarios que se han hecho y cerramos el párrafo.

Código PHP:
Código:
<div class="imagen-post-thumbnail"> 
     <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a> 
 </div>

En medio de una clase para darle un estilo añadimos dinámicamente la opción para integrar un thumbnail al post es decir la imagen por defecto del post. Ahora, para añadir y dar funcionalidad a esto tenemos que declararlo en functions.php que lo veremos más adelante.

Archivo Adjunto 76711

Código PHP:
Código:
<div class="entry"> 
<?php the_excerpt(); ?> 
<a href="<?php echo get_permalink(); ?>"><div class="mas">Leer mas...</div></a> 
</div> 
</div>

Dentro de una clase añadimos la función <?php the_excerpt(); ¿> que lo que hacemos es mostrar el contenido del post igual que lo haría the <?php the_content(); ¿>, pero con la que utilizamos damos la opción de mostrar cierto número de letras como introducción al post, el numero de letras a mostrar lo hacemos en functions.php, luego mostramos el leer mas por medio de una función que lo hace dinámicamente, cerramos el div entry y el div que contiene el contenido del post.

Código PHP:
Código:
 <?php endwhile; ?> 
    <?php else : ?> 
         <h2>Not Found</h2> 
    <?php endif; ?> 
 </div>

Cerramos él con <?php endwhile; ¿> y con <?php else : ¿> declaramos que si no se encuentra el post muestra el mensaje que está en el H2, o podemos personalizar una página de error, y luego cerramos el loop y el contenido.

Para saber más acerca el loop de wordpress te remito al codex donde esta toda la información necesaria. The Loop in Action « WordPress Codex

Sidebar.Php

El sidebar.php es la barra lateral de la web donde cargaremos los widget, mostrar los link de interés, categorías etc y lo hacemos dentro de la nueva etiqueta estructural de html5 aside.

Código PHP:
Código:
<aside> 
   <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar Widgets')) : else : ?> 
        <div id="buscador"> 
           <?php get_search_form(); ?> 
        </div> 
     <h2>Facebook</h2> 
        <ul> 
           <?php wp_get_archives('type=monthly'); ?> 
        </ul> 
     <h2>Archivos</h2> 
        <ul> 
           <?php wp_get_archives('type=monthly'); ?> 
        </ul> 
         
     <h2>Categorias</h2> 
        <ul> 
           <?php wp_list_categories('show_count=1&title_li='); ?> 
        </ul> 
         
        <?php wp_list_bookmarks(); ?> 
     
     <h2>Meta</h2> 
        <ul> 
          <?php wp_register(); ?> 
          <li><?php wp_loginout(); ?></li> 
          <li><a href="http://wordpress.org/">WordPress</a></li> 
          <?php wp_meta(); ?> 
        </ul> 
         
        <h2>Subscribirse</h2> 
        <ul> 
          <li><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a></li> 
          <li><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a></li> 
        </ul> 
    <?php endif; ?> 
</aside>

Bueno a continuación te mostrare lo tratamos de decir con este código

Código PHP:
Código:
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar Widgets')) : else : ?>

Con esta función cargamos el sidebar en la web para mostrar su contenido y para añadir los widget desde la administración, pero para hacer esto tenemos que regístralo para que aparezca en el back de wordpress y para añadir widtget en el sidebar tendremos que registrarlo en functions.php, que lo veremos cuando hagamos este archivo.

Código PHP:
Código:
PHP 
<div id="buscador"> 
    <?php get_search_form(); ?> 
 </div>

Dentro del id buscador para añadirle estilos, integramos el código <?php get_search_form(); ?> que nos genera el buscador de wordpress.

Código PHP:
Código:
<h2>Archivos</h2> 
<ul> 
<?php wp_get_archives(‘type=monthly’); ?> 
</ul>

Añadimos la función <?php wp_get_archives(‘type=monthly’); ?> dentro de una <ul> que nos genera los <li> con los archivos mensuales del sitio.

Código PHP:
Código:
<h2>Categorias</h2> 
  <ul> 
    <?php wp_list_categories('show_count=1&title_li='); ?> 
  </ul>

Añadimos una lista con la función <?php wp_list_categories(‘show_count=1&title_li=’); ?> con las categorías del sitio.

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

con esta funcion mostramos todos los marcadores del sitio envueltos en <li>, envueltos en una <ul>. El título está en etiquetas H2.

Código PHP:
Código:
<h2>Meta</h2> 
    <ul> 
      <?php wp_register(); ?> 
        <li><?php wp_loginout(); ?></li> 
        <li><a href="http://wordpress.org/">WordPress</a></li> 
      <?php wp_meta(); ?> 
   </ul>

Con un H2 mostramos el titulo Meta, y en una lista añadimos la función <?php wp_register(); ?> que nos hace ver la persona que está en la web acceda a sus privilegios de usuario, con <?php wp_loginout(); ?> lo que hacemos es dar la opción de desloguearnos de la web y por ultimo agregamos la función <?php wp_meta(); ?> que nos da la función de agregar contenido a la barra lateral.

Código PHP:
Código:
<h2>Subscribirse</h2> 
    <ul> 
      <li><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a></li> 
      <li><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a></li> 
    </ul> 
  <?php endif; ?> 
</aside>

Añadimos la opción de suscribirnos al feed y ver las entradas del RSS como elemento <li> por medio de una <ul>, luego cerramos la función php que abrimos al comienzo después de aside de apertura, y cerramos la barra lateral por medio de la etiqueta aside de cierre.

NOTA // Los elementos que añadimos en este sidebar los podemos omitir y agragarlos por medio de widgets en el administrador de WordPress.

Footer.Php

Con el footer.php lo que hacemos es cerrar el html general, que será llamado en el index.php o en cualquier pagina personalizada para siempre hacer el cierre del html.

Código PHP:
Código:
 <footer>   
   <?php echo Date(‘Y’) ?> theme tutorial by jakmm11    
 </footer>   
</div>   
</body>   
</html>

Bueno creo que acá no hay mucho que explicar, vemos que con <?php echo Date(‘Y’) ?> lo que hacemos es mostrar el año en que estamos dinámicamente dentro de la etiqueta footer, luego cerramos el div wrapper que abrimos al principio de todo el codigo, en el header, cerramos el body, y cerramos el Html.

Acá en el footer también podemos agregar opciones para añadir widget dinámicamente o también podemos agregar un menú o lo que queramos. en este caso solo vamos a poner el año y el autor.

Single.Php

Lo que hacemos con este archivo es mostrar cada post individualmente, cuando de clic para leer mas en el index.php me llevara a este archivo. Realmente esto es el mismo index.php, solo modificamos ciertas etiquetas para dar otras funciones.

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

 <div id="contenido"> 

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

        <div id="entrada"> 

            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> 
                <p class="postmetadata">            
                    Por <?php the_author(', '); ?> el <?php the_time('F jS, Y'); ?> en <?php the_category(', ') ?> | <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> 
                </p> 

            <div class="entry-single"> 
                <?php the_content(); ?> 
            </div> 
        </div> 
        <?php comments_template(); ?> 

    <?php endwhile; ?> 

    <?php else : ?> 

        <h2>pagina no encontrada</h2> 

    <?php endif; ?> 
    </div> 

<?php get_sidebar(); ?> 

<?php get_footer(); ?>

Bueno, como vemos bien es el mismo loop que te explique cuando creamos el index.php, a excepción de cómo vamos a mostrar el contenido, lo vamos a hacer con <?php the_content(); ?> en vez de <?php the_excerpt(); ?>, para que muestre todo el contenido completo del post, ya que no queremos mostrar un cierto numero de palabras, y también quitamos el thumbnail que nos muestra la imagen del post por defecto ya que si queremos mostrar acá una imagen lo vamos a hacer insertándola en el contenido. Y lo otro diferente es que agregamos <?php comments_template(); ?> que lo que hace es añadirnos a esta página single.php las opciones de comentarios para el post, esta página también la tendremos que crear.

Comments.Php

Lo que hacemos con este archivo es crear la funcion para hacer los comentarios del post o articulo, respoder mensaje etc..

// esto es la estructura basica que mas adelante podemos estilizar con css

[Imagen: 76725d1461888664-creacion-de-theme-wordp...ntario.jpg]

Código PHP:
Código:
<?php 

    if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) 
        die ('Please do not load this page directly. Thanks!'); 

    if ( post_password_required() ) { ?> 
        This post is password protected. Enter the password to view comments. 
    <?php 
        return; 
    } 
?> 

<?php if ( have_comments() ) : ?> 

    <h2 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?></h2> 

    <div class="navigation"> 
        <div class="next-posts"><?php previous_comments_link() ?></div> 
        <div class="prev-posts"><?php next_comments_link() ?></div> 
    </div> 

    <ol class="commentlist"> 
        <?php wp_list_comments(); ?> 
    </ol> 

    <div class="navigation"> 
        <div class="next-posts"><?php previous_comments_link() ?></div> 
        <div class="prev-posts"><?php next_comments_link() ?></div> 
    </div> 

 <?php else : // this is displayed if there are no comments so far ?> 

    <?php if ( comments_open() ) : ?> 
        <!-- If comments are open, but there are no comments. --> 

     <?php else : // comments are closed ?> 
        <p>Comments are closed.</p> 

    <?php endif; ?> 

<?php endif; ?> 

<?php if ( comments_open() ) : ?> 

<div id="respond"> 

    <h2><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h2> 

    <div class="cancel-comment-reply"> 
        <?php cancel_comment_reply_link(); ?> 
    </div> 

    <?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?> 
        <p>You must be <a href="<?php echo wp_login_url( get_permalink() ); ?>">logged in</a> to post a comment.</p> 
    <?php else : ?> 

    <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform"> 

        <?php if ( is_user_logged_in() ) : ?> 

            <p>Logueado como <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Desloguearse »</a></p> 

        <?php else : ?> 

            <div> 
                <input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> /> 
                <label for="author">Nombre <?php if ($req) echo "(required)"; ?></label> 
            </div> 

            <div> 
                <input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> /> 
                <label for="email">E-Mail (no sera publicado) <?php if ($req) echo "(required)"; ?></label> 
            </div> 

            <div> 
                <input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" /> 
                <label for="url">Pagina Web</label> 
            </div> 

        <?php endif; ?> 

        <!--<p>You can use these tags: <code><?php echo allowed_tags(); ?></code></p>--> 

        <div> 
            <textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea> 
        </div> 

        <div> 
            <input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /> 
            <?php comment_id_fields(); ?> 
        </div> 

        <?php do_action('comment_form', $post->ID); ?> 

    </form> 

    <?php endif; // If registration required and not logged in ?> 

</div> 

<?php endif; ?>

Bueno este código es muy extenso, para una mayor referencia y una completa documentación te envío al codex de wordpress para saber más del comments.php Function Reference/comment form « WordPress Codex

Pero en resumen lo que hacemos aquí es añadir esta hoja a cada post individualmente, esta hoja contiene entre el mucho código, funciones, un formulario de envío etc..

Functions.Php

En este archivo tenemos el grupo de funciones que vamos a utilizar en nuestro theme para darle algún comportamiento especial, cualquier theme que sea un poco avanzado utiliza funciones. Veamos las funciones que utilizamos para este theme.

Código PHP:
Código:
<?php 

    // funcion para contar las letras de cada post en la introduccion en el index 
     function custom_excerpt_length( $length ) { 
      return 70; 
       } 
      add_filter( 'excerpt_length', 'custom_excerpt_length', 999 ); 

    // funcion para habilitar la opcion para subir imagenes destacadas a cada post 
      add_theme_support( 'post-thumbnails' );  

    // esto nos añade las funciones para los RSS 
    automatic_feed_links(); 

    // cargamos jQuery 
    if ( !is_admin() ) { 
       wp_deregister_script('jquery'); 
       wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"), false); 
       wp_enqueue_script('jquery'); 
    } 

    // Declaramos el sidebar como zona acta para añadir widgets 
    if (function_exists('register_sidebar')) { 
        register_sidebar(array( 
            'name' => 'Sidebar Widgets', 
            'id'   => 'sidebar-widgets', 
            'description'   => 'These are widgets for the sidebar.', 
            'before_widget' => '<div id="%1$s" class="widget %2$s">', 
            'after_widget'  => '</div>', 
            'before_title'  => '<h2>', 
            'after_title'   => '</h2>' 
        )); 
    } 

?>

A continuación les voy a explicar en que consiste el codigo

Código PHP:
Código:
function custom_excerpt_length( $length ) { 
      return 70; 
       } 
      add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );  

Como dice el comentario esta función es para contar las letras de cada post en la introducción en el index, es decir cada introducción de post va a tener 70 letras.

Código PHP:
Código:
add_theme_support( 'post-thumbnails' );  

Con esta función habilitamos la opción de subir imágenes de representación o destacadas de cada post

[Imagen: 76726d1461889022-creacion-de-theme-wordp...tacada.jpg]

Código PHP:
Código:
if ( !is_admin() ) { 
       wp_deregister_script('jquery'); 
       wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"), false); 
       wp_enqueue_script('jquery'); 
    }  

Con esta función vamos a incluir una copia de jquery en nuestro sitio con el fin de ahorrarnos ancho de banda y así ganar rapidez para la persona que visita la web, ya que lo que hacemos es una llamada a jquery que están en los servidores de google.

Código PHP:
Código:
if (function_exists('register_sidebar')) { 
        register_sidebar(array( 
            'name' => 'Sidebar Widgets', 
            'id'   => 'sidebar-widgets', 
            'description'   => 'These are widgets for the sidebar.', 
            'before_widget' => '<div id="%1$s" class="widget %2$s">', 
            'after_widget'  => '</div>', 
            'before_title'  => '<h2>', 
            'after_title'   => '</h2>' 
        )); 
    }  

Declaramos el sidebar como zona acta para añadir widgets, es el archivo que tenemos como sidebar.php, con esta función vamos a poder subir widget a esa zona ya que se convertirá en algo mas dinámico, así podremos descargar plugins que funciona por medio de widget para darle más funcionalidad a el sitio web.

Podemos agregar muchas más funciones para extender las funcionalidades del theme.

Style.Css

Bueno este tutorial era para la creación de un theme para wordpress desde 0 y hice de cuenta que manejabas css por lo cual no explicare estilo por estilo, lo que se encuentra en este archivo style.css son los estilos necesarios para darle la apariencia a la plantilla, veamos el código

Código PHP:
Código:
/*    
Theme Name: BetA Theme 
Theme URI: http://forobeta.com/member.php?u=111542 
Description: Tthema basado en foro beta 
Author: Jakmm11 
Author URI: fhttp://forobeta.com/member.php?u=111542 
Version: 1 
*/ 

body {   
    font-family: 'Droid Sans', Arial, Verdana, sans-serif; 
    font-size: 14px; 
    background-color: #eee; 

a { 
    color: #0E8FD0; 

h1,h2,h3 {   
    color: #3399FF;   
    font-family:arial;   
}   
h1 {   
    font-size: 14pt ;   
}   
h2 {   
    font-size: 12pt ;   
}   
h3 {   
    font-size: 10pt ;   
}   
li { 
    list-style-type:none; 

#wrapper { 
    background-color: #fff; 
    border: 1px solid #dedede;   
    border-radius: 3px;   
    width:1000px;   
    margin: 0px auto 0px auto;   
}   
.header { 
    background-color: #F87906; 
    border-bottom: 1px #999 solid;   
    height: auto; 

.logo { 
    text-align: left; 
    background: #F87906; 
    border-radius: 3px 3px 0 0; 


nav { 
    margin: 0 0 10px 0; 
    text-align: left; 
    padding: 1px; 
    background: #2d2d2d; 
    border-bottom: 5px solid #0088CC; 

nav li { 
    border-right: 1px solid #565656; 
    display: inline; 
    padding: 10px 

nav li a { 
    color: #ccc; 
    padding: 10px 20px; 
    text-decoration: none; 


nav li a:hover { 
    background: #0088CC ; 
    color: #ffffff; 

#contenido { 
    float: left; 
    padding: 0 10px; 
    width: 67%; 
    margin: 0 0 15px 0; 

#contenido h2 a { 
    color: #DC700D; 
    display: block; 
    font-size: 20px; 
    font-weight: bold; 
    text-decoration: none; 

#entrada { 
    border-bottom: 1px solid #D4D4D4; 
    overflow: hidden; 
    padding: 10px 0 25px; 

p.postmetadata { 
    background: #f9f9f9; 
    padding: 6px; 
    border-left: 3px solid #0088CC; 
    font-size: 13px; 
    font-style: italic; 

div.imagen-post-thumbnail { 
    float: left; 
    margin: 10px 10px 0 0; 

a img.attachment-post-thumbnail { 
    border: 2px solid #CCCCCC; 
    height: 160px; 
    width: 160px; 

a:hover img.attachment-post-thumbnail { 
    border: 2px solid #DE4912; 
    opacity: 0.8; 

div.entry { 
    float: left; 
    width: 495px; 
    line-height: 20px; 

div.mostrar-comentarios { 
    margin: 15px 0; 

.mas { 
    background: #0A99E0; 
    color: #fff; 
    width: 120px; 
    /* position: absolute; */ 
    text-align: center; 
    padding: 5px 0; 
    border-radius: 5px; 
    float: right; 
    margin-right: 20px; 


aside { 
    border-left: 1px solid #ccc; 
    float: right; 
    padding: 0 10px; 
    width: 28.5%;  
    margin: 0 0 15px 0; 


#buscador { 
    background: #f4f4f4; 
    padding: 10px 5px; 
    border-radius: 10px; 
}   
aside h2 { 
    text-align: left; 
    background: #f5f5f5; 
    padding: 10px; 
    border-radius: 10px; 

aside ul li { 
    text-align: left; 
    list-style-type: circle; 
    margin: 5px 0; 

aside ul li a { 
    text-decoration: none; 
    color: #666; 

aside ul li a:hover { 
    color: #ccc; 
    text-decoration: underline; 

footer {   
    border-top: 1px #999 solid;  
    clear:both;  
    text-align: center; 
    padding: 10px; 
}  

lo que no debemos omitir es esto:

Código PHP:
Código:
/*    
Theme Name: BetA Theme 
Theme URI: http://forobeta.com/member.php?u=111542 
Description: Tthema basado en foro beta 
Author: Jakmm11 
Author URI: fhttp://forobeta.com/member.php?u=111542 
Version: 1 
*/  

Que es como wordpress reconoce el theme, ya que le provee ciertas informaciones

Claro está a este theme podemos agregarle cosas y quitárselas, e igual adaptarla a vuestro gusto, aquí solo tenemos algunos estilos esenciales, lo demás será experimentar para darle mejor apariencia. Pero lo básico ya lo tenemos.
#2
Gracias por este currazo, lo pondré en práctica en ya estoy harto de tener que modular templates y volverme loco.

Muchas gracias!
#3
Muy currado el tutorial, y para hacerse una idea y aprender no esta nada mal.
Pero hoy en día poca gente desarrolla un tema desde 0, aunque si puede servir para editarlo y aprender donde tocar.
Un saludo.
[Imagen: logo_300.png]
#4
Nunca! me gusto wordpress ni blogger, preferi hacer mis paginas yo mismo, con sudor aprendi html y css para editar mis paginas sin ayuda xd aqui esta la prueba: Venezuelawarez
No me dejan poner mis web Triste
WWW
#5
Genial información me gusta mucho la inserción del código manual en estas vacaciones voy a probar todos los tutoriales tan buenos que hay acá
#6
graicas no soy muy bueno con los d elos temas pero este tutorial es ta muy bueno
[Imagen: Nexo_Firma.gif]
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
Sorprendido Como Crear Robots.txt??? WMasterT 1 43 08-11-2018, 10:19 PM
Último mensaje: Vicen
Bombilla Temas Wordpress GRATIS calidad PREMIUM nicarao 9 286 03-10-2018, 05:44 PM
Último mensaje: DamianUzcanga
  100 Temas WordPress Gratis 2018 (Parte 5) Sprystate 1 115 07-09-2018, 01:10 PM
Último mensaje: York0x
  100 Temas WordPress Gratis 2018 (Parte 4) Sprystate 0 68 06-09-2018, 10:54 PM
Último mensaje: Sprystate
  100 Temas WordPress Gratis 2018 (Parte 3) Sprystate 0 90 06-09-2018, 10:19 PM
Último mensaje: Sprystate
  100 Temas WordPress Gratis 2018 (Parte 2) Sprystate 1 81 06-09-2018, 10:11 PM
Último mensaje: York0x
  100 Temas WordPress Gratis 2018 (Parte 1) Sprystate 0 100 06-09-2018, 09:29 PM
Último mensaje: Sprystate
  Agregar un anuncio de adsense desde el editor de temas de WordPress cmascreativo.ml 1 78 06-09-2018, 06:20 AM
Último mensaje: jcifuentes
  Top 3 plugins para build wordpress PabloA3 2 90 06-09-2018, 04:37 AM
Último mensaje: jcifuentes
  Mi experiencia con wordpress en producción yuma2009 7 316 03-09-2018, 10:34 PM
Último mensaje: yuma2009



Usuarios navegando en este tema: 1 invitado(s)