Crear tema de WordPress: paso a paso para el desarrollo personalizado

Desde su lanzamiento original en 2003, WordPress ha evolucionado de una simple herramienta de blogs a un creador de sitios web poderoso y popular y un CMS (sistema de administración de contenido) completo utilizado por aproximadamente el 38% de los sitios web en la web. Dada su popularidad, si su sitio necesita destacarse entre la multitud, deberá crear un tema de WordPress que sea exclusivo de su sitio.

En realidad, no es de extrañar que WordPress haya podido llegar tan lejos y volverse tan popular.

La cantidad de flexibilidad que tiene y las características que aloja permiten su amplio uso en diferentes tipos de sitios web. Además, WordPress es bastante fácil de usar con poca o ninguna experiencia previa en codificación o desarrollo web.

Estas son las razones detrás de la historia de éxito de WordPress y son precisamente las razones casi 40 por ciento de todos los sitios web de la World Wide Web funcionan con este software. 

WordPress tiene una variedad de características útiles que hacen que el desarrollo y la programación web sean menos complicados y más accesibles para todos.

Introducción al desarrollo de temas de WordPress 

Otra característica popular que hace que WordPress sea tan popular son sus temas. El tema es simplemente una colección de hojas de estilo y plantillas que definen cómo se verá y se mostrará un sitio impulsado por WP.

El software ofrece al usuario una amplia variedad de opciones de edición diferentes cuando se trata de temas del área de administración de WP.

Cientos de temas de WordPress son completamente gratuitos o con muchos otros a un precio razonable de unas pocas decenas de dólares.

De hecho, WordPress.org aloja una enorme base de datos de temas en su directorio de temas.

Otros sitios web como Themeforest también ofrecen muchos temas premium de diferentes desarrolladores.

Cada uno de estos temas presenta un diseño, patrón de diseño y características diferentes.

Depende del usuario encontrar uno que se adapte mejor a las necesidades de su sitio web. En la mayoría de los casos, los temas se crean pensando en industrias o profesiones particulares, lo que significa que, por ejemplo, los propietarios de restaurantes pueden encontrar fácilmente temas con funciones de reserva.

Si bien hay muchos temas increíbles que pueden satisfacer sus necesidades, es seguro decir que si desea hacer algo sobresaliente, tendrá que hacerlo usted mismo. Si no puede programar, una buena alternativa La opción sería optar por un desarrollador de software independiente. (los precios pueden variar en función de varios factores).

En este artículo, sin embargo, repasaremos TODOS los pasos necesarios para crear su propio tema personalizado de WordPress para su sitio web con tecnología WP. Examinaremos todos los aspectos importantes para asegurarnos de que obtenga lo mejor que WordPress tiene para ofrecer. 

Comenzar a crear su propio tema como principiante puede parecer, a primera vista, una tarea gigantesca.

Sin embargo, crear un tema personalizado desde cero no es demasiado complicado en WP. No necesita ser un genio del desarrollo web, si tiene los conceptos básicos de codificación con PHP, puede aprender fácilmente cómo crear un tema de WordPress.

Además, crear tu propio tema puede ser bastante gratificante, especialmente cuando ves el resultado final en vivo en tu sitio web.

Creando su primer tema personalizado de WordPress

Para comenzar a crear un tema de WordPress, necesitará algunas cosas básicas:

• Un sitio web de WordPress
• Un buen plan de hosting
• Un poco de experiencia previa con cosas como entornos de puesta en escena locales.
• Comprensión básica de los lenguajes de codificación CSS y PHP.
• Un tema de inicio

Comprender la jerarquía de plantillas de WordPress 

En WordPress, los archivos de plantilla (los componentes básicos de su tema) son modulares y reutilizables.

Los archivos de plantilla son responsables de generar las páginas en su sitio WP. Algunos de estos archivos se utilizan en casi todas sus páginas, mientras que otros se utilizan solo en circunstancias específicas.

Eche un vistazo al diagrama a continuación: explica cómo está organizada la jerarquía de plantillas de WordPress.

Los archivos de plantilla determinarán el aspecto general del contenido del sitio web. Si desea crear un encabezado, utilizará un header.php archivo, o si desea agregar una sección de comentarios, utilizará el comments.php archivo. 

Para comprender la jerarquía de plantillas, debe saber que WordPress usa algo llamado "cadena de consulta" para decidir qué plantilla o conjunto de plantillas debe usarse para crear y mostrar una página determinada.

La cadena de consulta es información almacenada en el enlace de cada parte del sitio web que está intentando modificar. En términos más simples, WordPress analiza la información y realiza búsquedas a través de la jerarquía de plantillas para encontrar un archivo de plantilla que coincida con la información proporcionada en la cadena de consulta.

Este es básicamente un esquema en el que WP busca archivos de plantilla coincidentes cada vez que se cargan páginas.

Por ejemplo, si escribe la siguiente URL http://example.com/post/this-post, WordPress ubicará los archivos de plantilla necesarios en el siguiente orden: 

1. Archivos que coinciden con el slug, en este caso, esta publicación.
2. Archivos que coinciden con el ID de la publicación.
3. Un archivo de publicación única genérico, como single.php.
4. Un archivo de almacenamiento, en este caso, archive.php.
5. El index.php archivo.

El último archivo (index.php) es obligatorio en todos los temas, ya que es el predeterminado (o alternativo) si no se puede encontrar ningún otro archivo en el proceso de coincidencia. subrayados (un tema de inicio de WP) tiene los archivos más comunes. Estos archivos incluidos en este tema funcionarán desde el primer momento.

Puede editarlos si le apetece experimentar o si necesita crear alguna funcionalidad personalizada en su sitio.

¿Qué es un tema de inicio de WordPress? 

Un tema de inicio es la base básica de un tema personalizado de WordPress.

Puede utilizarlo como base para poner en marcha su propio tema único. Con un tema de inicio, puede crear su propio tema de WordPress personalizado sin tener que diseñar o codificar un tema completo desde cero.

Los temas de inicio de WordPress contienen todos los archivos definidos por la jerarquía anterior.

El uso de un tema de inicio le permite comprender mejor cómo funciona WordPress porque le muestra los conceptos básicos, la estructura de un tema y cómo las diferentes partes funcionan juntas.

Un tema de WordPress personalizado se puede aplicar a una variedad de diferentes tipos de sitios web, desde presentaciones y directorios hasta tiendas en línea. construido con WooCommerce, redes sociales o cualquier otra cosa para la que pueda necesitar su sitio web.  

Optar por temas de inicio (como UnderStrap, Underscores y Bones) ayudará a crear un tema de WordPress que abre la puerta al uso de una variedad de opciones diferentes.

El uso de guiones bajos puede ser la mejor opción para los principiantes, ya que ofrece las características más importantes. También proviene de un desarrollador confiable y de mucho tiempo. Esto significa que es más probable que sea compatible, seguro y confiable, y tendrá un mejor soporte a largo plazo.

¿Por qué debería utilizar un tema de inicio?

Como se indicó anteriormente, un tema de inicio es una base, un plan que lo ayuda a crear un sitio web único. Ya está en pleno funcionamiento, pero aún carece de las características clave que lo definen y hacen que un sitio web sea fácil de usar. 

Esencialmente, todavía necesita un estilo y una configuración adecuada. 

Dicho esto, los temas de inicio son ideales para aquellos que tienen poca o ninguna experiencia con WordPress o el desarrollo web en general. Es una excelente manera de conocer el tema de la creación de temas y aprender los conceptos básicos de los sitios web con tecnología WP. 

Un tema de inicio de WordPress le ahorra tiempo y requiere poco o ningún conocimiento previo en codificación y el resto de las complejidades de WordPress. 

Puede aprovechar años de arduo trabajo de los desarrolladores del tema de inicio y utilizar estas pautas para comprender mejor cómo funcionan WordPress y el diseño del tema.   

Ejemplos de temas de inicio populares

• subrayados - Un tema de inicio confiable y reconocido que les da a los principiantes una ventaja en desarrollo del temaUnderscores es bastante básico y perfecto para comenzar de inmediato si tienes todas las herramientas necesarias. El tema es ideal para comprender los conceptos del desarrollo de temas. Underscores trata sobre comenzar un nuevo proyecto que debe verse más como un conjunto de herramientas en constante evolución y menos como un marco.
  
  
• Raíces - Este tema de inicio le brinda un enfoque que está más orientado a los desarrolladores, ya que su marcado se basa en HTML5 Boilerplate. También admite herramientas más avanzadas como Bootstrap y Gruñido. El tema de inicio de Roots también incluye un contenedor de tema que lo ayuda a mantener su proceso optimizado y elimina la llamada a las mismas partes de la plantilla repetidamente.

Roots también usa preprocesadores CSS y admite LESS, una extensión de lenguaje compatible con versiones anteriores para CSS, que puede acelerar significativamente el proceso de desarrollo de su tema.

Dicho esto, Roots ofrece un enfoque más pragmático y requiere un poco más de conocimientos por parte del desarrollador.  

6 pasos básicos para desarrollar su tema de WordPress

Después de cubrir los conceptos básicos, finalmente está listo para comenzar a crear un tema de WordPress.

Dado que este artículo está más dirigido a principiantes, usaremos un tema de inicio, sin embargo, también puede crear todo desde cero sin ningún tema de inicio.

Si esa es la ruta que desea tomar, no olvide que necesitará mucho más tiempo y deberá sumergirse un poco más en la codificación y el desarrollo web en general.

1. Configuración del entorno de desarrollo

Su primer paso en el proceso debería ser la creación de un entorno de desarrollo.

Este es básicamente un servidor que necesita instalar en su computadora para administrar y desarrollar sitios WP locales. Un entorno de desarrollo le permite desarrollar su sitio web de forma segura, además de brindarle múltiples opciones para crear un entorno local.

Con DesktopServer es uno de los caminos ideales que puedes tomar. Es una manera fácil de obtener una versión local y rápida de WP que sea compatible tanto con Windows como con Mac. Seleccione la versión gratuita, regístrese y descárguela, luego instale el software.

Una vez que lo haya instalado, abra el programa y configure su entorno local.

Es un proceso bastante simple y estará listo en minutos. Después de la configuración, tendrá un sitio web y un entorno de desarrollo que funcionarán y se verán como cualquier sitio web de WP en vivo.

2. Descargue e instale un tema de inicio

Los temas de inicio más básicos (como los guiones bajos) son fáciles de usar para los principiantes.

A diferencia de la mayoría de los temas básicos, Underscores permite personalizar opciones a través de su Opciones Avanzadas (como autor y descripción) después de nombrar su tema. 

También puede agregar hojas de estilo sintácticamente impresionantes o SASS que es un lenguaje CSS de preprocesamiento que le permite introducir características como anidamiento, operaciones matemáticas, utilización de variables, etc.

Después de hacer sus elecciones, todo lo que tiene que hacer es hacer clic en Generar para descargar el archivo .zip con su tema de inicio.

Ahora, instale el archivo en su sitio local. Si ha hecho todo correctamente, ahora puede ver una versión básica y básica de su tema personalizado de WordPress.

Comprender los principios básicos de WordPress 

Ahora que ha configurado los conceptos básicos, puede ponerse manos a la obra. Sin embargo, antes de sumergirse en el proceso de personalización, deberá familiarizarse con los principios y componentes básicos de la creación de un tema de WordPress utilizando los principios básicos de WP. 

En primer lugar, debe aprender sobre archivos de plantilla, los principales bloques de construcción de cualquier tema en WP.

Los archivos de plantilla básicamente determinan cómo se mostrará su diseño y contenido en su sitio. Si desea crear un encabezado, querrá usar el header.php archivo, mientras comments.php se utilizaría para mostrar cualquier comentario.

Como se discutió anteriormente, WP usa su jerarquía de plantillas para determinar qué archivo de plantilla elegirá para ejecutar el contenido que un usuario está solicitando / necesita. Puede trabajar con estos archivos tal como están, pero dado que está aquí para crear el tema de WordPress, su mayor parte del trabajo será ajustar estos archivos a sus necesidades.

Cuando hablamos de los principios básicos de WP, también debe comprender el concepto detrás El Loop.

Es el código que WP utiliza principalmente para mostrar su contenido y se puede encontrar en todos los archivos de plantilla de visualización de contenido, como el index.php or barra lateral.php. Es un tema bastante complejo, pero afortunadamente, viene incluido con el tema de inicio (si usa guiones bajos), lo que significa que su proceso debería ser más simple. 

Deberá comprender el concepto y trabajar con él. Consulte algunos de los ejemplos en el enlace anterior para comprender mejor cómo se usa el bucle y cómo puede personalizar el código según sus necesidades.

3. Crear detalles del tema

Temáticas no son componentes puramente cosméticos.

Hay muchas características diferentes que puede agregar a su sitio que pueden mejorar la funcionalidad. Vamos a discutir cómo implementar algunas características básicas para darle vida a su sitio web.

Adición Manos puede permitirle ejecutar diferentes acciones de PHP, mostrar otra información o insertar datos de estilo según sea necesario.

Los ganchos son fragmentos de código que se insertan en archivos de plantilla. La mayoría de ellos se implementan directamente como parte del núcleo de WordPress, pero algunos ganchos también son bastante útiles al personalizar temas.

Aquí hay una lista de los ganchos más comunes y sus roles:

• wp_head () - se agrega a la elemento en header.php. Permite scripts, estilos y otra información que se ejecuta cuando el sitio comienza a cargarse.
• wp_footer () - generalmente se agrega a footer.php antes del etiqueta, que se utiliza con mayor frecuencia para insertar código para Google Analytics u otro código que debe aparecer en cada página pero es demasiado pesado para cargarlo en el encabezado.  
• wp_meta () - Generalmente se encuentra en sidebar.php, y se usa con mayor frecuencia para incluir scripts adicionales (por ejemplo, una nube de etiquetas).
• formulario_comentario () - Agregado a comments.php directamente antes del cierre del archivo etiqueta para mostrar comentarios. 

Cuando use guiones bajos, estos ganchos ya estarán incluidos con el tema, pero siempre es una buena idea aprender más sobre ellos y ver todos los ganchos disponibles. Los ganchos le permiten ampliar las capacidades de su tema personalizado.  

4. Agregar estilos usando CSS

Hojas de Estilo en Cascada o CSS define la apariencia del contenido en el sitio que está creando.

Mediante el uso de la style.css , que ya está incluido en su tema, puede editar cualquiera de los estilos que se encuentran aquí y guardarlos para ver cómo cambia su diseño. De forma predeterminada, solo contiene el estilo básico.

CSS se utiliza para permitir la presentación y separación del contenido de su sitio web, desde el diseño hasta las fuentes y el contenido. CSS puede ayudar a que el contenido de su sitio sea más accesible y flexible.

Profundizar en cómo usar el estilo con los temas de WordPress puede resultar bastante complicado y está más allá del alcance de este artículo. Si no está muy seguro de esto, es posible que desee leer más sobre CSS antes de continuar.

5. Incluido JavaScript

Agregar archivos JavaScript a su tema si es necesario puede mejorar las características y capacidades interactivas y tener un sitio que funcione mejor. Es especialmente útil cuando desea incorporar complementos de terceros en sus sitios, como reproductores de audio o video específicos, cosas como controles deslizantes, soporte de ventanas emergentes y otras bibliotecas de terceros para crear funciones avanzadas.

Para usar Javascript con su sitio personalizado, puede crear una llamada usando la siguiente sintaxis para agregar el archivo de secuencia de comandos al tema.

Alternativamente, puede utilizar el script directamente en su header.php archivo de plantilla entre las metaetiquetas y el enlace de la hoja de estilo, como lo haría en el caso de una página HTML. Al usarlo en el archivo de encabezado, debería verse así: 

Si desea utilizar JS directamente, agregue la llamada a los archivos directamente como se indica a continuación. Si desea configurar la función "enviar esto a un amigo", puede ponerla debajo del título de la publicación. Eso se vería similar a esto: 

" rel="bookmark">

<!--

página de correo electrónico ();

// ->

</div>

También puede poner en cola scripts usando la sintaxis que se muestra más adelante en este artículo.

6. Pruebe su tema y expórtelo

Cuando haya terminado con todo lo anterior, finalmente es hora de probar su tema personalizado de WordPress creado para asegurarse de que funcione sin problemas.

Para ello, puede utilizar el Prueba de unidad temática Datos, un conjunto de datos ficticios que puede cargar en su sitio. Los datos consisten en variaciones de estilo y contenido diferente que le permite ver con qué eficacia su tema puede manejar datos predecibles e impredecibles.

Pruebe todo a fondo (de acuerdo con el enlace del Codex anterior) de modo que pueda estar seguro de que el tema que ha creado cumple con los estándares requeridos y está a la altura de sus expectativas antes de exportarlo.

Una vez que esté seguro de las pruebas, puede exportar el tema.

Puede realizar la exportación buscando el lugar donde instaló el entorno de desarrollo del sitio web localmente.

Abra la carpeta y acceda  / Wp-content / themes /, donde puede encontrar el tema en el que estaba trabajando.

Ahora, con una herramienta de compresión, cree un archivo zip basado en la carpeta comprimiéndolo. Cuando haya terminado, todo lo que tiene que hacer es cargarlo e instalarlo en cualquier sitio de WordPress. También puede enviarlo a WordPress. Directorio de temas. 

Guía detallada de desarrollo de temas de WordPress

Ahora que ha hecho lo básico, los siguientes pasos enumerarán algunos detalles adicionales sobre cómo crear un tema de WordPress.

Crear archivos / directorios de temas personalizados

Como ya sabe, los temas de WP se crean a partir de diferentes archivos de plantilla que al menos incluirán un sidebar.php, encabezado.php.y footer.php. Puede llamarlos usando las etiquetas de plantilla (get_header (), al llamar al encabezado, get_sidebar (), al llamar a la barra lateral, etc.).

También puede crear versiones personalizadas de estos archivos con ligeras modificaciones como estas: barra lateral{your_custom_template} .php, encabezamiento-{your_custom_template} .php y pie de página-{your_custom_template} .php. 

También puede llamar a las etiquetas de plantilla con la misma analogía con el nombre de la plantilla como un parámetro como este:

get_header ( 'your_custom_template' ); 

Las páginas se crean mediante varios archivos, lo que significa que también puede crear otros archivos de plantilla personalizados y llamarlos en cualquier ubicación dada dentro de la página simplemente usando get_template_part (). Simplemente dé al archivo un nombre apropiado y use el mismo método personalizado que con los archivos de encabezado, pie de página y barra lateral. 

Supongamos que desea crear una plantilla que maneje su contenido; solo necesita crear un archivo llamado content.php y luego amplíe el nombre del archivo para agregar un diseño específico. En este caso, que sea contenido-producto.php.

Al final, cuando carga el archivo de plantilla en el tema, se vería así:

get_template_part ('contenido', 'producto') ;.

Usando directorios

Para enlazar a directorios de temas, simplemente use la función get_theme_file_uri ();

Esta función devolverá el URI completo a la carpeta principal de su tema y puede usarlo para hacer referencia a archivos y subcarpetas usando el siguiente ejemplo:

echo get_theme_file_uri ('imágenes / logo.png');

Poner en cola scripts y hojas de estilo

Cuando cree su propio tema, también puede crear hojas de estilo personalizadas y sus propios archivos JavaScript.

Siempre que esté haciendo esto, asegúrese de cargarlos usando el método estándar de WordPress, de lo contrario, existe la posibilidad de que su tema y complementos no funcionen correctamente en todas las circunstancias.

Todo lo que necesita hacer es crear una función que ponga en cola todos los estilos y los scripts. Para esto, WP crea un identificador y una ruta para encontrar el archivo y las dependencias (si las hay), una vez que esto suceda, necesitará usar un gancho para insertar las hojas de estilo y los scripts. 

La función básica para enqueing estilo:

wp_enqueue_style ($ identificador, $ src, $ deps, $ ver, $ media);

Para solicitar scripts:

wp_enqueue_script ($ identificador, $ src, $ deps, $ ver, $ in_footer); 

Poner en cola las fuentes de Google

Las fuentes de Google son un excelente recurso gratuito de fuentes para diseñadores web y pueden agregarse simplemente a su tema personalizado.

Primero, tendrás que encontrar un tipo de fuente que te guste en la biblioteca de fuentes de Google. Una vez que haya encontrado una fuente con la que desea trabajar, simplemente haga clic en el botón "Seleccionar este estilo", que lo llevará a una nueva página.

Si se desplaza hacia abajo aquí, puede encontrar las instrucciones para su uso en un cuadro con el código necesario que puede agregar a su sitio.   

Puede agregar las fuentes mediante el método estándar y recomendado, o puede optar por el método @import CSS o el método Javascript.

También puede agregarlo a WP colocando la fuente en la lista de su tema. funciones.php.archivo o mediante el uso de un complemento específico.

function wpb_add_google_fonts () {

wp_enqueue_style ('wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', falso);

}

add_action ('wp_enqueue_scripts', 'wpb_add_google_fonts');

Si quieres puedes leer más en Cómo cambiar las fuentes en un tema de WordPress

División de su página en secciones (Header.php / Footer.php)

En la mayoría de los sitios, el encabezado, el pie de página y la barra lateral serán los mismos en todas las páginas. Es cierto que, en algunos casos, querrá personalizar algunas cosas, pero en general son consistentes.

Por lo tanto, para dividir la página en un encabezado y un pie de página, querrá cortar y pegar desde el index.php página, las partes relevantes que deben estar en el encabezado / pie de página y la barra lateral. Esto depende un poco de su index.php actual.

Por ejemplo, si está utilizando guiones bajos, el encabezado y el pie de página ya se han definido correctamente en header.php y footer.php.

Continuemos con este ejemplo como si estuviéramos creando el contenido para el encabezado.

En la mayoría de los sitios web, los encabezados contienen los estilos de encabezado esenciales y la navegación hacia el sitio web.   

Empezar desde agregar antes del cierre . Deberías tener algo como esto. Esto se basa en el tema de inicio de guiones bajos, pero es posible que desee modificar el encabezado según sea necesario para crear sus propias personalizaciones.

header.php

/ **
* El encabezado de nuestro tema
*
* Esta es la plantilla que muestra todos los sección y todo hasta
*
* @enlace https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @paquete Daves_Theme
*/

?>

>

">

Meditative Healing™

>

the_custom_logo ();
if (is_front_page () && is_home ()):
?>
" rel="home">

demás :
?>
" rel="home">

endif;
$ daves_theme_description = get_bloginfo ('descripción', 'pantalla');
if ($ daves_theme_description || is_customize_preview ()):
?>

wp_nav_menu (
array (
'theme_location' => 'menú-1',
'menu_id' => 'menú-principal',
)
);
?>

El mismo proceso debería aplicarse también al pie de página.

Usando Functions.php

El tema functions.php El archivo es un archivo de plantilla en el tema WP que actúa como un "maestro" que se carga automáticamente tanto para los administradores como para las páginas frontales de un sitio.

Por lo general, define funciones, acciones, filtros y clases que otros archivos de plantilla usan en el tema. Además, se puede utilizar para ampliar la funcionalidad del tema a través de enlaces, acciones y filtros adicionales.

Puede encontrar fácilmente el archivo functions.php en la carpeta del tema. Puede agregar WP incorporado y funciones PHP regulares por igual a filtros y ganchos que ya están definidos en el núcleo de WP.

Simplemente puede crear un archivo functions.php creando un archivo de texto sin formato al que llame functions.php y colóquelo en el directorio del tema. Con este archivo, puede habilitar formatos de publicación, menús de navegación y miniaturas de publicación junto con acciones y filtros de WP. 

Consulte el archivo functions.php de un tema de inicio para ver algunos ejemplos de lo que se puede hacer. También puede buscar artículos que usen functions.php que amplíen las funciones de un sitio de WordPress usando el archivo de funciones.

Uso de la configuración principal en el tema

La configuración principal permite cambiar ciertas configuraciones de tema sin modificar los archivos de tema o tener que cambiar ningún código. Una descripción detallada de esto está fuera del alcance de este artículo, por lo que lo referiremos a un par de artículos que explican este concepto en detalle.

1. Configuración API descripción en WordPress Codex.
2. Guía completa para API de configuración de WordPress

El bucle de WordPress

Como hemos comentado antes, el bucle es un mecanismo predeterminado utilizado por WP para mostrar publicaciones a través de archivos de plantilla.

Usando el mecanismo de bucle, WP recupera las publicaciones en las páginas actuales y las formatea de acuerdo con las "instrucciones" del bucle.

Básicamente, recorre las publicaciones de las páginas actuales de una en una al realizar la acción especificada en el tema. 

Puedes usar el bucle para

• Visualización de contenido y comentarios
• Mostrar títulos de publicaciones y extractos en la página de inicio del blog
• Mostrar datos de campos personalizados y tipos de publicaciones personalizadas
• Muestre el contenido en páginas individuales utilizando etiquetas de plantilla.
• Personalice el bucle para mostrar y manipular contenido en archivos de plantilla

Si está utilizando el tema de inicio de Underscores, encontrará el bucle de WordPress que se utiliza en los archivos single.php y page.php. Es posible que desee ver estos archivos para comprender cómo funcionan y / o se pueden usar.

get_header ();
?>

while (have_posts ()):
el cargo();

get_template_part ('partes de plantilla / contenido', get_post_type ());

the_post_navigation (
array (
'prev_text' => ' '. esc_html __ ('Anterior:', 'daves-theme'). ' % título ',
'next_text' => ' '. esc_html __ ('Siguiente:', 'daves-theme'). ' % título ',
)
);

// Si los comentarios están abiertos o tenemos al menos un comentario, cargue la plantilla de comentarios.
if (comentarios_open () || get_comments_number ()):
comments_template ();
endif;

end while; // Fin del ciclo.
?>

get_sidebar ();
get_footer ();

Menú y páginas

Menú Primaria

Puede seleccionar su menú principal en el Editor de menú WP (ubicado en Apariencia - Menú). Su tema puede admitir más de un menú de navegación en diferentes lugares dentro de su tema. 

También hay formas de registrar menús adicionales, por ejemplo, es posible que desee crear un menú de "pie de página".

Eche un vistazo al códice de WordPress para entender cómo hacer esto: https://codex.wordpress.org/Navigation_Menus

Pagina personalizada

WP permite crear páginas y publicaciones de forma predeterminada. Controla la apariencia de la página a través del page.php archivo de plantilla.

Si bien este archivo afecta a todas las páginas individuales de su tema, puede modificar su diseño y apariencia. Editar estas plantillas de página personalizadas en WP requiere un poco de HTML, PHP y CSS, pero una vez más, debería ser bastante sencillo.

index.php

Esta plantilla es la plantilla de respaldo predeterminada en WordPress para mostrar cualquier página cuando la jerarquía de plantillas no puede encontrar ninguna otra página que coincida con sus parámetros dados.

Deberá usar esto para atender cualquier cosa que no sea manejada por el resto de los archivos de plantilla.

Archivo.php

El archive.php La plantilla se utiliza para mostrar etiquetas, autor, categoría y otras páginas personalizadas de archivo.

Crear una página de archivos puede ser una buena forma de reunir todo su contenido en una sola página.

Categoría

En el desarrollo web de WP, no es raro usar varias plantillas para categorías, tipos de publicaciones personalizadas, taxonomías y etiquetas. Al crear diferentes categorías de plantillas, puede incluir diferentes características en la página de cada categoría.   

Una plantilla de category.php típica se verá similar a esto:

/ **

* Una plantilla de categoría simple

*/

get_header (); ?>

// Verifica si hay publicaciones para mostrar

if (have_posts ()):?>

Categoría:

// Mostrar descripción de categoría opcional

 si (descripción_categoría ()):?>

// El lazo

while (have_posts ()): the_post (); ?>

por

 <?php

  comments_popup_link ('No hay comentarios todavía', '1 comentario', '% comentarios', 'comentarios-enlace', 'Comentarios cerrados');

?>

</div>

<?php finaliza;

más:?>

Lo sentimos, ninguna entrada coincide con tus criterios.

</div>

sidebar.php

La barra lateral es el área donde puede colocar sus widgets en un tema de WP. La mayoría de las veces, está en el lado derecho o debajo de su contenido en todas las páginas.

Las barras laterales se utilizan para mostrar cosas que no están directamente relacionadas con la publicación o el contenido de la página, sino cosas como enlaces a diferentes áreas de su sitio, formularios de registro, anuncios, enlaces a redes sociales, etc.

Normalmente, la barra lateral se utiliza junto con los widgets de WP.   

A continuación, le indicamos cómo puede agregar una barra lateral lista para widgets a su tema:

function wpb_widgets_init () {

    register_sidebar (matriz (

        'nombre' => __ ('Barra lateral principal', 'wpb'),

        'id' => 'barra lateral-1',

        'description' => __ ('La barra lateral principal aparece a la derecha en cada página excepto la plantilla de la página principal', 'wpb'),

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'after_title' => ' ',

    ));

    register_sidebar (matriz (

        'name' => __ ('Barra lateral de la página principal', 'wpb'),

        'id' => 'barra lateral-2',

        'description' => __ ('Aparece en la plantilla de página frontal estática', 'wpb'),

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'after_title' => ' ',

    ));

    }

add_action ('widgets_init', 'wpb_widgets_init');

Páginas de publicaciones individuales (single.php)

Supongamos que desea utilizar una plantilla o diseño diferente para un artículo específico en su sitio web.

Para ello, deberá crear una plantilla de publicación única personalizada. Esto es bastante similar a crear páginas personalizadas. Siguiendo las pautas básicas que se aplican allí, también puede crear publicaciones individuales fácilmente. 

Creación de una imagen destacada

Para agregar soporte para imágenes destacadas, simplemente agregue el siguiente código al tema functions.php archivo:

add_theme_support ( 'post-miniaturas'); 

Ahora, puede ir a sus páginas o publicaciones y verificar si la opción de imagen destacada está disponible. Lo más probable es que WP no lo muestre automáticamente, por lo que para mostrar la imagen, es posible que deba realizar pequeñas ediciones en sus plantillas donde se muestran las páginas y publicaciones agregando este código:

Paginación 

Esta función le permite avanzar y retroceder a través de sus páginas de contenido. Puede usar esta función cuando vea listas de publicaciones con más entradas de las que caben en una sola página o cuando desee dividir publicaciones más largas utilizando el etiqueta.

La forma más simple de paginación es colocar la función posts_nav_link (). En la plantilla después del ciclo. Esto genera enlaces tanto a la siguiente página de publicaciones (cuando está dividiendo listas de publicaciones) como a las publicaciones anteriores cuando corresponda.  

posts_nav_link ();

También puede usar next_posts_link & prev_posts_link para controlar dónde aparece el enlace de la página de publicaciones anterior y siguiente.

next_posts_link ();

enlace_puestos_exterior ();

Comentarios 

Los comentarios son una parte esencial de cualquier blog o página. Brinda a los visitantes del sitio web la posibilidad de comunicarse con usted, brindar comentarios, hacer preguntas y, en general, crear un vínculo más profundo con su sitio web y su contenido.

Todos los comentarios se muestran en el área de administración y hay varias funciones que puede agregar, desde habilitar los comentarios solo para usuarios específicos hasta la moderación de comentarios.

Puede utilizar el archivo comments.php para personalizar la apariencia de los comentarios en su tema.

Otras páginas y archivos 

Dependiendo de sus necesidades, puede buscar o crear diferentes páginas y archivos y puede adaptarlos a sus preferencias utilizando las mismas pautas o similares mencionadas anteriormente. 

Uso del tema padre / hijo

Tema principal

Los temas principales en WP son temas que son declarados "padres" por otros temas, a saber, temas secundarios.

Se utiliza un tema secundario para permitir que los diseñadores y desarrolladores creen personalizaciones para los temas sin interrumpir la posibilidad de actualizar el tema principal. Esto se debe a que si un desarrollador cambia los archivos del tema original, al realizar una actualización del tema, los cambios se pierden.

Sin embargo, los temas principales transmiten sus características y funcionalidad a sus temas secundarios. Los desarrolladores son libres de realizar cambios en la funcionalidad y las características del tema secundario sin afectar la capacidad de actualización del tema principal.

tema de niño

Los temas secundarios heredan la funcionalidad de los temas principales. Se utilizan principalmente para modificar un tema existente sin perder ningún estilo personalizado agregado previamente durante las actualizaciones del tema.  

Los temas secundarios aceleran el proceso de desarrollo porque es fácil crear modificaciones con ellos.

La mayoría de los temas crearán un tema hijo y lo pondrán a disposición con el tema, de modo que cualquiera que use el tema pueda personalizarlo a través del tema hijo. Definimos cómo crear un tema hijo, en nuestro artículo aquí.

Usar marcos de desarrollo

Este término se refiere a las bibliotecas de código que se utilizan en el desarrollo de temas. 

Los marcos de desarrollo se crearon para servir como plantillas de temas principales con toda la funcionalidad. Básicamente, al igual que con los temas principales, los marcos permanecen intactos mientras que los desarrolladores pueden realizar modificaciones en los temas secundarios.

Esto acelera el desarrollo y facilita la eliminación de errores en marcos temáticos específicos. Los marcos de desarrollo notables incluyen Genesis tema marco, Themify y Divi de Elegant Themes.

Resumiendo cómo crear un tema de WordPress

Lo anterior ha sido una guía detallada paso a paso para comenzar a desarrollar su propio tema personalizado de WordPress.

Con todo, aunque necesita tener un buen conocimiento de WordPress y PHP, no es un proceso tan exigente. Es importante conocer los conceptos básicos del desarrollo web, y puede comprender el núcleo de WordPress con más detalle a medida que lo desarrolla. Si todavía no tiene ganas de estar a la altura de la tarea, está bien, tómese su tiempo y experimente un poco.

Una vez que haya cometido algunos errores, comenzará a aprender más y más. También es bueno echar un vistazo a la base de código de otros temas populares para comprender lo que están haciendo y tener una buena idea de las prácticas que tienen sentido.

Háganos saber si tiene alguna pregunta en los comentarios a continuación.

Sobre la autora

Escrito por: David AtardSitio web: https://www.linkedin.com/in/dattard/Correo electrónico: David@collectiveray.com

David ha trabajado en la industria digital y en línea durante los últimos 21 años. Tiene una amplia experiencia en las industrias de software y diseño web utilizando WordPress, Joomla y los nichos que los rodean. Ha trabajado con agencias de desarrollo de software, empresas de software internacionales, agencias de marketing locales y ahora es Jefe de Operaciones de Marketing en Aphex Media, una agencia de SEO. Como consultor digital, su objetivo es ayudar a las empresas a obtener una ventaja competitiva utilizando una combinación de su sitio web y las plataformas digitales disponibles en la actualidad. Su combinación de experiencia en tecnología combinada con una sólida visión para los negocios aporta una ventaja competitiva a sus escritos.