Guía para principiantes para desarrollar un tema de WordPress

De acuerdo con el Códice de WordPress: "Un tema de WordPress es una colección de archivos que trabajan en conjunto para producir una interfaz gráfica con un diseño de unificación subyacente para un weblog". En palabras simples, un tema es como un aspecto de su página web o sitio web. Lo que te permite modificar el aspecto de tu contenido.
Entonces, si quieres crear un tema de WordPress, yo diría que vamos a empezar desde cero. Este tutorial te ayudará a crear el tema más simple en WordPress. Este tutorial te ayudará a crear tu propio tema más rudimentario y te permitirá crearlos con tu propia característica.
Nota: para este tutorial, debe tener un conocimiento profundo de HTML y CSS, ya que ambos son componentes esenciales para trabajar con WordPress. También debe tener un entorno localhost configurado en su computadora en el que trabaja en WordPress.

Empecemos…

Lo primero que debe saber es dónde almacenan los temas de WordPress. Puedes encontrarlos en el directorio wp-content/themesen tu instalación. También puede cambiar la ubicación de sus temas dando algunos comandos en el wp-config.phppero se realiza muy raramente.
Para crear nuevos temas necesitas hacer algunas cosas bastante fáciles:
  • Cree una nueva carpeta en el directorio de "Temas" de su instalación y asígnele un nombre un poco único, como my-first-themes.
  • En esta carpeta, crea dos archivos: style.css&index.php
  • Abra la hoja de estilo (style.css) y pegue los siguientes códigos:
    / *
    Nombre del tema: Mi tema impresionante
    Tema URI: http://www.codexworld.com
    Autor: CodexWorld
    Autor URI: http://www.codexworld.com
    Descripción: El tema para mi sitio impresionante
    Versión: 1.0
    Licencia: GNU General Public License v2 o posterior
    Licencia URI: http://www.gnu.org/licenses/gpl-2.0.html
    Dominio de texto: mi primer tema
    
    Este tema, como WordPress, está licenciado bajo la GPL.
    Úselo para hacer algo genial, divertirse y compartir lo que ha aprendido con otros.
    * /
    
  • Ahora, estos detalles llenarán automáticamente la sección de detalles del tema en la sección Apariencia »Temas en el backend de WordPress. Para su información, el texto en el dominio de texto debe coincidir con la coincidencia exacta del nombre de la carpeta (en este caso mi primer tema).

Componentes de un tema de WordPress

Los componentes de un tema de WordPress se componen de 3 archivos por lo menos.
  • index.php
  • style.css
  • funciones.php
Básicamente, necesitamos crear 6 archivos para nuestro tema de práctica de muestra. 
style.css
Este archivo contiene los códigos que agregarán estilo a nuestra estructura HTML. También contiene la información básica sobre el tema que incluye el nombre del tema, el autor, la descripción, la versión, las etiquetas de filtro y la licencia declarada.
index.php
Este archivo contiene los códigos que conforman la estructura del tema de WordPress. Este es el archivo de plantilla principal. Actúa como la plantilla de reserva cuando otras plantillas no están disponibles. Este es el archivo donde se agrega el bucle de WordPress.
header.php
Este archivo contiene los elementos de un sitio web como un tipo de documento, atributo de idioma, título del sitio web, conjunto de caracteres, metas y varios enlaces y más. También contiene el "encabezado" y el "menú principal" del tema. Este archivo debe tener el wp_head()enlace de acción porque se usa para las funciones y complementos de WordPress. Este archivo es llamado por el archivo index.php y otras plantillas usando la get_header()función.
footer.php
Como por nombre, este archivo contiene la parte del pie de página de su tema, que incluye enlaces, información del tema y widgets de pie de página, si los hay. Este archivo es llamado por el archivo index.php y otras plantillas usando la get_footer()función.
comments.php
normalmente genera el formulario de comentarios y comentarios individuales. Se puede comments_template()abrir este archivo agregando plantillas que muestren publicaciones o páginas únicas.
functions.php
Este archivo es muy importante ya que contiene funcionalidad personalizada. Aquí, puede agregar varias funciones, como el registro de menús, el registro de barras laterales dinámicas y estilos de cola y scripts.

Diseño del tema

Hagamos el diseño simple para que podamos entenderlo correctamente. Un blog con una barra lateral a la derecha estará inactivo para eso. Además, es muy fácil de diseñar y aún más fácil agregar propiedades de respuesta más adelante.
wordpress-theme-development-tutorial-design-codexworld
Header.php - Primero describamos el contenido de header.phpEl primer código para ingresar es:
<! DOCTYPE html>
< html  <? php language_attributes (); ? >>
< cabeza >
< meta  charset = " <? php bloginfo 'charset'  );  ?> " />
< título > <? php wp_title '|' true 'right'  ); ?> </ title >
< link  rel = "pingback"  href = " <? php bloginfo 'pingback_url'  );   ?> " />
 <? php wp_head (); ?> 
</ head >
Siempre asegúrese de agregar wp_head();justo antes del cierre </ head >. Ese gancho de acción es necesario para agregar y modificar los contenidos de header.php.
Después de los códigos head >, la siguiente parte es el encabezado donde se mostrará el nombre y la descripción del sitio.
Tenga en cuenta que los términos < head > y Header son cosas diferentes. Head > es una parte del documento HTML que no está visible en el navegador y maneja el Título del sitio, Favicon, Meta, Hojas de estilo, Scripts y mucho más. El encabezado es la parte de un tema que se muestra en la parte superior superior donde normalmente se muestran el Nombre y la Descripción del sitio web. También puede mostrar una imagen de encabezado personalizada, pero eso es para otro tutorial. Por ahora, nos centraremos en los conceptos básicos de la creación de un tema de WordPress.
Ahora, añadimos etiqueta de envase y cuerpo de apertura. Luego agregamos el título del encabezado y la descripción.
< body  <? php body_class (); ? >>
< div  id = "container" >
    < div  id = "header" >
        < div  id = "header-info-wrap" >
            < h1  id = "site-title" > <? php bloginfo 'nombre'  ); ?> </ h1 >
            < h4  id = "site-description" > <? php bloginfo 'description'  ); ?> </ h4 >
        </ div >
    </ div >
Ahora agregue el menú en el header.php
< nav  id  = "nav" >
     <? php  
        wp_nav_menu (array ( 
            'theme_location'  =>   'menu-primary' , 
            'container'       =>   false , 
            'fallback_cb'     =>   'wp_page_menu'  
        ));

    ?> 
</ nav >

El bucle de WordPress

El bucle de WordPress es responsable de mostrar las publicaciones y páginas del contenido del sitio web.
<? php get_header (); ?>
 
<? php  if (  have_posts ()): while (  have_posts ()):  the_post (); ?>
     < div  id = "post- <? php the_ID ();  ?> "  <? php post_class (); ?> > 
        < H1 >
            < Un  href = " <? Php el enlace permanente ();  ?> " > <? Php the_title (); ?> </ a >
        </ h1 > 
        <? php the_content (); ?>     </ div >
 
<? php  endwhile; else:  ?>
     < h2 > ¡ Publicación o página no encontrada! </ h2 >
 
<? php  endif; ?>

La navegación de correos

Esto muestra los enlaces "Publicaciones anteriores" y "Publicaciones más recientes".
< div  id = "bottom-navi" >
    < div > <? php next_posts_link '& laquo; Older posts'  ); ?> </ div >
    < div > <? php previous_posts_link 'Entradas más recientes & raquo;'  ); ?> </ div >
</ div >
Entonces, ahora tenemos el encabezado, el menú y el contenido. Vayamos a la barra lateral que contiene los widgets.

Configurando el widget de barra lateral

Registre la barra lateral dinámica
Coloque el siguiente código en el functions.phparchivo:
<? php 
    register_sidebar (array ( 
        'name'   =>   'sidebar'  , 
        'id'   =>   'sidebar_widgets'  , 
        'before_widget'   =>   '<div id = "% 1 $ s">' , 
        'after_widget'   =>   ' </div> '  , 
        ' before_title '   =>   ' <h4> '  , 
        ' after_title '   =>  ' </h4> '  ,) 
    ); ?>
Mostrar los widgets en la barra lateral
Agregue este código en el index.phparchivo:
< div  id = "sidebar" >
     <? php  if (  is_active_sidebar 'sidebar_widgets'   )):  ?> 
        < div  id = "sidebar-widgets-wrap" >
             <? php dynamic_sidebar 'sidebar_widgets'  ); ?> 
        </ div >
     <? php  endif; ?> 
</ div >

Contenido CSS de WordPress

La hoja de estilo es importante porque contiene información vital sobre el tema como el nombre del tema, la descripción del tema, la versión del tema y el autor del tema; También dicta el aspecto del tema.
CSS Reset
Esto garantiza la consistencia de su sitio web en diferentes navegadores.
/ * RESET * / 
html , body , h1 , h2 , h3 , h4 , h5 , h6 , p , img , ul , ol , li , form , fieldset {
     border :  0  none ;
    margen :  0 ;
    relleno :  0 ;
    estilo de lista :  ninguno :
}
Diseño del tema
Después del restablecimiento de CSS, ahora puede agregar los códigos CSS para modificar la apariencia de su tema. 
Hay demasiados para enumerarlos a todos aquí, pero una buena práctica (en mi opinión) es comenzar con los contenedores como el bodyy otros envoltorios principales. En nuestro tema de la muestra, estos son los #container#header#content#sidebary así sucesivamente.
cuerpo {
     color :  # 333 ;
    fuente :  normal  13 px / 20 px  arial , sans-serif ;
}
#container {
     ancho : 960 px ;
    fondo :  #FFF ;
    borde :  3 px  sólido  # 000 ;
    margen :  20 px  auto  30 px ;
}
h1 { font-size : 28 px ;}
 h2 { font-size : 24 px ;}
 h3 { font-size : 20 px ;}
 h4 { font-size : 18 px ;}
 h5 { font-size : 14 px ;}
 h6 { tamaño de fuente : 12 px ;}
 h1 , h2 , h3 , h4 , h5 , h6 {
    claro :  ambos ;
    línea de altura :  1 ;
}
Adición de la hoja de estilo
Ahora que ha creado style.cssjunto con su contenido, deberá vincularlo a su plantilla de encabezado. La forma correcta de agregar su hoja de estilo principal ( style.css) es agregar este código en su archivo functions.php.
function  practice_theme_enqueue_styles () {
 
    wp_enqueue_style 'style-main'  get_stylesheet_uri (), array ());

}
 add_action 'wp_enqueue_scripts' 'practice_theme_enqueue_styles'  );
Ahora, tu tema está listo para usar. Disfruta y si te encuentras con alguna dificultad por favor házmelo saber mediante comentarios.

Acerca de: Programator

Somos Instinto Programador

0 comentarios:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Con tecnología de Blogger.