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 funciones útiles que hacen que el desarrollo y la programación web less complicado y más accesible 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:
- Archivos que coinciden con el slug, en este caso, esta publicación.
- Archivos que coinciden con el ID de la publicación.
- Un archivo de publicación única genérico, como single.php.
- Un archivo de almacenamiento, en este caso, archive.php.
- 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 tema. Los guiones bajos son bastante básicos y perfectos para comenzar de inmediato si tiene todas las herramientas necesarias. El tema es excelente para comprender los conceptos del desarrollo del tema. Underscores se trata de comenzar un nuevo proyecto que debería verse más como un conjunto de herramientas en constante evolución y less 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.
Usar 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
Temas 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”>