Escribir su propia plantilla de WordPress desde cero es bastante simple. Si está en la industria del desarrollo web, es posible que ya haya escuchado qué es «WordPress». Tal vez un cliente lo haya mencionado, pero usted no está familiarizado con él. Tal vez ya hayas trabajado con él antes, pero no sabes cómo crear un tema desde cero. O tal vez eres un completo novato. Cualquiera que sea el caso, esta publicación es para ti.
Requisitos previos: antes de comenzar, deberá cumplir con el siguiente conjunto de requisitos.
- Debe tener una configuración completa de WordPress, ya sea en localhost o en alojamiento en vivo. Si desea obtener más información sobre cómo comenzar con WordPress, consulte este artículo .
- Un diseño conceptual, ya sea como PSD o HTML CSS para seguir durante todo el proceso de desarrollo.
- Una pequeña introducción a la programación PHP . Sin embargo, no es una necesidad para esta publicación en particular, pero aún así se recomienda.
Diseñar un tema de WordPress es un largo, tedioso, interminable pero un gran desafío de programación. El proceso de desarrollo depende completamente de cómo desea que se vea su tema. Esta publicación es solo un tutorial y no cubre todas las partes necesarias para un tema estándar de WordPress. Después de leer este artículo, debe confiar en gran medida en
Códice de WordPress
y
Intercambio de pila de WordPress
para sus consultas adicionales.
Con los requisitos previos en mente, comencemos. Lo primero que debe saber es el hecho de que casi todo lo que hace en WordPress está dentro del
wp-contentdirectorio. Todo lo demás es el propio CMS de WordPress y no querrás meterte con eso.
Cuando abra wp-content -> directorio de temas, encontrará temas predeterminados de WordPress, como veinticinco, veinticuatro, veinte trece , etc. Para comenzar con uno propio, cree un directorio con el nombre que prefiera. Para esta publicación, lo llamaremos wpstart .
Un tema de WordPress necesita al menos dos archivos para existir: style.css e index.php
Así que vaya a la carpeta wpstart y cree estos dos archivos. En style.css , inserte el siguiente comentario. Esto le dice al tablero de WordPress sobre los detalles del tema y la metainformación.
/* Theme Name: WP Start Author: FedUser Description: A bare bone WordPress theme Version: 0.0.1 */
Ahora cambie a su panel de control de WordPress y haga clic en Apariencia > Temas . Encontrarás WP Start en tu colección de temas.
Continúe y active este tema, y luego visite el sitio. ¡Y voilá! Técnicamente ha creado un tema personalizado, todo por su cuenta. Por supuesto, no hace nada excepto que tiene una pantalla blanca en blanco. Aquí es donde index.phpentra en acción.
Abra index.php en el editor de texto y escriba el siguiente código.
<!DOCTYPE html> <html> <body> <h1>This is a sample WordPress theme.</h1> </body> </html>
Visite el sitio una vez más y obtenga su primera plantilla de WordPress en funcionamiento.
Divide y conquistaras
Para desarrollar un tema estándar de WordPress, debe dividir todo su trabajo en secciones. Esto no es necesario, ya que puedes hacer todo en
index.php, pero una buena práctica de programación implica la modularidad. Para esta publicación en particular, dividiremos todo nuestro trabajo en
cuatro
secciones, a saber. encabezado, pie de página, barra lateral y contenido. En correspondencia con estas secciones, crearemos cuatro archivos diferentes, a saber
header.php,
footer.php,
sidebar.phpy
content.php.
- header.php : para este ejemplo en particular, este archivo hará lo siguiente;
- Defina todas las metaetiquetas y enlaces dentro
<head>de HTML. - Muestra la marca del sitio como el nombre y la descripción.
- Proporcionar navegación a diferentes páginas.
Con estos puntos en mente, codifiquemos el encabezado de nuestro tema.
<!DOCTYPE html><html><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1"/><title>WP Start</title>integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"/></head><body><nav></nav>Ahora hay una cosa a la que quiero llamar su atención. Puede ver cuán «codificado» está el título de nuestro sitio. Es decir, el título seguirá siendo el mismo «Inicio de WP», sin importar en qué sitio aplique este tema. Si el autor tiene que cambiarlo, tiene que editar manualmente el código para hacerlo. Para evitar estos ajustes manuales de plantillas, WordPress proporciona varias llamadas a funciones para hacer frente a estas situaciones de forma dinámica. En este caso particular, quiero que el título sea el nombre del sitio/blog. Para esto, reemplazaré
<title>WP Start<title>
con
<title> <?php echo get_bloginfo( "name" ); ?> </title>
Esto se llama incrustar un pequeño extracto de php en HTML. (Técnicamente, estamos escribiendo HTML en un archivo php. Así que estamos incrustando HTML en el código php).
Entonces
header.php, con algún código adicional, se convierte en;<!DOCTYPE html><html><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1"/><title> <?phpecho get_bloginfo( "name" ); ?> </title>integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"/><linkrel="stylesheet"href="<?php echo get_bloginfo( 'template_directory' ); ?>/style.css" /><?phpwp_head(); ?></head><body><navclass="navbar navbar-default"><divclass="container"><divclass="navbar-header"><aclass="navbar-brand"href="<?php echo esc_url( home_url() ); ?>"><h3class="site-branding"> <?phpecho get_bloginfo( "name" ); ?> </h3></a></div><ulclass="nav navbar-nav navbar-right"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">Contact</a></li><li><ahref="#">About</a></li></ul></div></nav>Los extractos de php adicionales utilizados en este código son;
<?php echo get_bloginfo( 'template_directory' ); ?>
Esto es para obtener el directorio de la plantilla, de modo que se puedan ubicar recursos adicionales como CSS, JS, fuentes, etc.
<?php echo esc_url( home_url() ); ?>
Esto hará eco de la URL de la página de inicio del sitio.
- Defina todas las metaetiquetas y enlaces dentro
- footer.php : este es el archivo donde agregaremos lo que queramos en el pie de página del sitio, como pie de página personalizado, etiquetas de secuencias de comandos, etc. Además, las etiquetas HTML que comenzaron en
header.phpestán cerradas en este archivo.<footerclass="site-footer"><divclass="container"><divclass="row row-30"><divclass="col-md-4 col-xl-5"><divclass="pr-xl-4"><h3><ahref="<?php echo esc_url( home_url() ); ?>"><?phpecho get_bloginfo( "name" ); ?></a></h3><p><?phpecho get_bloginfo( "description" ); ?></p><p>© 2018 FedUser. All Rights Reserved.</p></div></div><divclass="col-md-4"><h5>Contacts</h5><dlclass="contact-list"><dt>Address:</dt><dd>798 ABC Nagar, JKL, Rajasthan</dd></dl><dlclass="contact-list"><dt>e-Mail:</dt><dd><ahref="mailto:#">someone@example.com</a></dd></dl><dlclass="contact-list"><dt>Phone No.:</dt><dd><ahref="tel:#">+91 1234567890</a></dd></dl></div><divclass="col-md-4 col-xl-3"><h5>Links</h5><ulclass="nav-list"><li><ahref="#">About</a></li><li><ahref="#">Projects</a></li><li><ahref="#">Blog</a></li><li><ahref="#">Contacts</a></li><li><ahref="#">Pricing</a></li></ul></div></div></div></footer>integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="crossorigin="anonymous"></script>integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script></body></html>El extracto de php adicional utilizado en este archivo es;
<?php echo get_bloginfo( "description" ); ?>
Esto buscará y colocará la descripción del sitio.
Otra cosa a mencionar aquí es que he usado subsecciones «codificados» como «Contactos» y «Enlaces» en el
footer.phparchivo. En su lugar, puede usar widgets de WordPress para automatizarlos y hacerlos modificables directamente a través del Personalizador. Esto, sin embargo, está más allá del alcance de esta publicación y lo discutiremos en cualquier momento en los artículos futuros. - sidebar.php : la mayoría de los sitios web tienen una barra lateral, al igual que la nuestra. A menudo, las barras laterales muestran enlaces de archivos, publicaciones recientes, cuentas de redes sociales, anuncios, etc. En nuestro caso, iremos con enlaces de archivos y enlaces de redes sociales. Una vez más, ¡un widget de WordPress es mucho mejor que la basura “codificado”! Pero en aras de la claridad, nos ceñiremos a lo último.
<divclass="sidebar"><divclass="widget"><h3class="widget-title">Archives</h3><divclass="widget-content"><ul><li><ahref="#">October 2018</a></li><li><ahref="#">November 2018</a></li><li><ahref="#">December 2018</a></li></ul></div></div><divclass="widget"><h3class="widget-title">Social</h3><divclass="widget-content"><ul><li><ahref="#">Facebook</a></li><li><ahref="#">Twitter</a></li><li><ahref="#">LinkedIn</a></li><li><ahref="#">Github</a></li></ul></div></div></div> - content.php : ahora que el encabezado, el pie de página y la barra lateral están configurados, avanzaremos hacia el contenido principal del sitio. Por el momento, nos ceñiremos a un contenido ficticio dentro de este archivo.
<divclass="main-content"><h3>Sample Title</h3><p>Sample text goes here.......</p></div>
Integración
Ahora volvamos a la
index.phpdonde integraremos todas las secciones anteriores en una sola. Como este archivo es un punto de entrada para nuestro tema, podemos elegir inteligentemente colocar estas secciones. Así es como lo he hecho.
<?php get_header(); ?> <div class="container"> <div class="row"> <div class="col-md-9"> <?php get_template_part( 'content', get_post_format() ); ?> </div> <div class="col-md-3"> <?php get_sidebar(); ?> </div> </div> </div> <?php get_footer(); ?>
Los extractos de php utilizados aquí se explican por sí mismos. get_header(), get_sidebar()y get_footer()son funciones predefinidas que se utilizan para incrustar las secciones correspondientes. Para una sección personalizada como content.php, la incrustación se realiza mediante el siguiente código;
<?php get_template_part( 'content', get_post_format() ); ?>
style.css : ahora que hemos actualizado nuestro index.phparchivo, agreguemos algo de encanto con CSS .
/*
Theme Name: WP Start
Author: FedUser
Description: A bare bone WordPress theme
Version: 0.0.1
*/
nav.navbar .navbar-brand .site-branding {
margin: 0;
}
footer.site-footer {
background-color: #502550;
color: #fff;
padding: 40px 0 20px 0;
}
footer.site-footer a {
color: #fff;
}
¡Y voilá! El primer aspecto de su tema personalizado de WordPress está listo.
Esta es la parte más emocionante de todo el desarrollo del tema de WordPress, donde tienes el control de todas las publicaciones.
El lazo
es una funcionalidad con la que puedes insertar dinámicamente contenido en tu tema. Nuestro objetivo en este tutorial es presentar todas las publicaciones del blog como una lista fácil de usar para que el lector pueda elegir cualquiera de ellas. Veamos cómo lo hacemos.
El bucle en sí mismo se explica por sí mismo.
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <!-- contents of the loop --> <?php endwhile; endif; ?>
SI hay publicaciones, MIENTRAS no quede ninguna, MUÉSTRALAS. Cualquier cosa dentro de este ciclo se repetirá, hasta que la página se quede sin todas las publicaciones. Podemos usar este concepto para mostrar nuestra lista. Así es como lo he hecho.
<div class="panel panel-default blog-post"> <div class="panel-heading"> <h3 class="panel-title post-title"> <?php if( !is_single() ): ?> <a href="<?php echo esc_url( get_permalink() ); ?>"> <?php the_title(); ?> </a> <?php else: the_title(); endif; ?> </h3> <p class="post-meta"> <?php the_date(); ?> by <a href="#"> <?php the_author(); ?> </a> </p> </div> <div class="panel-body"> <?php if( !is_single() ): the_excerpt(); else: the_content(); endif; ?> </div> </div>
Y cambió el index.php a esto.
<?php get_header(); ?> <div class="container"> <div class="row"> <div class="col-md-9 blog-main"> <?php if( have_posts() ): while( have_posts() ): the_post(); get_template_part( 'content', get_post_format() ); endwhile; endif; ?> </div> <div class="col-md-3"> <?php get_sidebar(); ?> </div> </div> </div> <?php get_footer(); ?>
¡Veamos lo que acaba de pasar!
El bucle en index.php está llamando a content.php cada vez que la página tiene una publicación. Dentro de content.php , verifiqué si la publicación actual es_single() . Esta condición se cumplirá si la página actual contiene solo una publicación para recorrer. Cuando no es individual, quería un enlace a esa publicación a través de su título. Así que usé get_permalink() para obtener la URL de esa publicación en particular. Sin embargo, si la página es única, no hay necesidad de un enlace y, por lo tanto, solo he usado la función the_title() .
Pasando a la meta información de la publicación. He mostrado the_date() en el que se publicó el artículo y es the_author() .
Finalmente, he usado el mismo concepto de is_single() para mostrar el extracto() o el contenido() de la publicación.
Mira, fue así de fácil y divertido. Ahora, con un poco de encanto CSS, obtuve el siguiente resultado.
Conclusión :
- Estamos terminando esta publicación en este mismo punto, pero debes saber que todavía hay mucho que aprender sobre WordPress. Fue solo un ejercicio de ejemplo, pero un tema estándar sería mucho más complejo. Aún así, esperamos que hayas aprendido algo nuevo.
- Si hubo algo que no entendiste, menciónalo en los comentarios. Si hay algo que necesita ser corregido, por favor háganoslo saber! Si tiene algún comentario o sugerencia para mejoras adicionales, también lo agradeceríamos mucho.
- Nos encantaría ver lo que has aprendido a través de esta publicación. Así que comparte enlaces a tus primeros temas de WordPress. Tus primeros pasos pueden animar a los recién llegados.
¡Feliz programación!