Articles

cómo crear un tema de WordPress desde cero: guía para principiantes (2020)

crear un tema de WordPress puede ser muy simple si sabes HTML básico, CSS y JavaScrip. Sin embargo, si eres nuevo en WordPress, todo lo que tienes que hacer es seguir los pasos mencionados en este tutorial para principiantes. He enumerado los pasos necesarios y discutido los aspectos importantes de la creación de WordPress Tema. Por lo tanto, vamos a leer esta guía tutorial y aprender cómo crear Tema de WordPress desde cero.,

WordPress Es un sistema de gestión de contenido (CMS) de código abierto ampliamente utilizado en todo el mundo. Un total de 34.7% de los sitios web están utilizando WordPress. También puede elegir esta plataforma para crear una fuerte presencia en línea y establecer su negocio en línea sin esfuerzo con la ayuda del potente software WordPress website builder. WordPress es una opción obvia y la más simple para empezar. Y esa es la razón principal por la que cada desarrollador sugiere elegirlo como la base de su sitio web., Sin embargo, si todavía no está seguro de qué es WordPress o qué es un CMS de código abierto, entonces leer esta guía definitivamente arrojará algo de luz sobre el conocimiento.

así que, sin mucho ruido y pocas nueces, vamos a empezar con la creación de WordPress tema Paso a paso proceso.

¿cómo crear un tema de WordPress? Tutorial para principiantes

los diseñadores y desarrolladores han sido inconscientemente parciales hacia los temas basados en WordPress no solo por una sino por varias razones. A veces, algunos clientes piden específicamente un sitio web de WordPress. Y la razón principal detrás de la gran popularidad de WordPress radica en su simplicidad., De hecho, es un CMS altamente flexible y potente. Por lo tanto, aquellos que están trabajando con cualquier otro CMS(S) como Joomla, Drupal, etc. a veces puede desear migrar, es decir, de Joomla a WordPress o así sucesivamente. Entonces, ahora entendamos por qué la gente ama tanto esta plataforma.

¿cuáles son los requisitos para crear un tema de WordPress?

1. Instalar WordPress localmente

Lo primero es instalar WordPress. No te preocupes no es ciencia de cohetes para aprender a instalar WordPress. Puedes hacerlo fácilmente tú mismo.

2. Procedimiento para crear un tema de WordPress desde cero.,

  • manual-creación de tema de WordPress a través de codificación
  • automatizado – creación de tema de WordPress utilizando un constructor de tema de WordPress

para el tema de WordPress, todo se hará en el directorio wp_content solamente. Simplemente crea una nueva subcarpeta de tema en la carpeta wp_content → temas. Supongamos que lo llamas «mytheme».

lo segundo es decidir el diseño del tema. Aquí, el tutorial muestra el diseño básico que consiste en Encabezado, área principal, pie de Página, barra lateral.

básicamente, WordPress solo necesita 2 archivos, es decir, estilo.css e Índice.php., Pero para este diseño, necesita 5 archivos, de la siguiente manera;

  • header.php-contiene el código para la sección de encabezado del tema.
  • index.php-contiene el código para el área principal y especificará dónde se incluirán los otros archivos. Este es el archivo principal del tema.
  • barra lateral.php-contiene la información sobre la barra lateral.
  • pie de página.php-maneja la sección de pie de página.
  • estilo.css-responsable del estilo de su tema.
  • bootstrap.css-no se requiere código CSS separado; altamente sensible.
  • bootstrap.,js-proporciona su propio js para la barra de navegación, o pestañas, etc.

necesitas descargar el paquete Bootstrap. Arranque.js & Bootstrap.el archivo cs debe copiarse en la carpeta del tema.

¿cómo crear un tema personalizado de WordPress paso a paso?

  1. crear Tema de WordPress desde cero codificando (manualmente)

  2. crear Tema de WordPress con TemplateToaster (automatizado)

Puede crear estos archivos localmente con un editor de texto como Bloc de notas. A continuación se muestran los archivos que necesita crear para comenzar.,

pasos para crear un tema de WordPress desde cero codificando

Paso 1: encabezado.archivo php

necesita poner este código en el encabezado.archivo php.

Este encabezado de archivo.php contiene el código para la parte de encabezado en la que el archivo JS y style está vinculado. Muestra el encabezado de la página.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

esta línea añadida después del título le dice a WordPress que cargue un estilo.archivo css que manejará el estilo del sitio web.

Aquí

<?php bloginfo('stylesheet_url'); ?>

es una función de WordPress que realmente carga la hoja de estilos.,

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">

Aquí, usamos Bootstrap. Es uno de los conocidos marcos de diseño web responsive. Proporciona archivos CSS incorporados para darle estilo a su sitio web. Puedes quedarte con el bootstrap.archivo css en tu carpeta theme / css.

a continuación, se agrega un «div» con la clase ttr_header y este será el contenedor principal del sitio web. Ahora, configure una clase para que pueda modificarla a través del estilo.archivo css.

después de eso, agregue un encabezado de etiqueta simple en un » div id «con la clase» ttr_header «que se especificará más tarde en la clase»jumbotron».

Paso 2: índice.,archivo php

el índice principal del archivo.php contendrá el siguiente código;

La primera línea de código en este archivo

<?php get_header(); ?>

se incluyen el encabezado.el archivo php y el código en él están en la página principal.

el código anterior muestra el contenido principal del post que has creado a través del área administrativa de WordPress.
a continuación, añadir la barra lateral.archivo php como se muestra a continuación

<?php get_sidebar(); ?>

en este archivo, puede mostrar sus publicaciones recientes, Archivos, información de contacto, etc.,

después de esta línea, se inserta un «div» vacío que separará el área principal y la barra lateral del pie de página.

finalmente, se agregó una última línea

<?php get_footer(); ?>

que incluirá el pie de página.archivo php.

Paso 3: barra lateral.archivo php

en la barra lateral.php, agregue el siguiente código

en este archivo, las funciones internas de WordPress se llaman para mostrar las diferentes categorías, Archivos de mensajes., La función WordPress los devuelve como elementos de Lista, por lo tanto, debe envolver las funciones reales en listas sin clasificar (las etiquetas <ul>).

Paso 4: pie de página.archivo php

agregue las siguientes líneas de código al pie de página.php file:

<div id= "ttr_footer"><h1>FOOTER</h1></div></div></body></html>

esto agregará una etiqueta de pie de Página simple. Sin embargo, también puede agregar enlaces, texto adicional, la información de derechos de autor para su tema en lugar de texto de pie de Página simple.

Paso 5: estilo.archivo css

agregue las siguientes líneas al estilo.,archivo css

Este archivo CSS establece la apariencia básica de tu tema. Esto establecerá el fondo de la página y agregará los bordes según sus necesidades.

su página se verá algo como esto:

Ahora, puede modificar aún más el archivo CSS agregando imágenes, animaciones y otro contenido a su tema y hacer que se vea tan hermoso como desee.

pero, esto requerirá el conocimiento de las funciones HTML, PHP y WordPress. Por lo tanto, una mejor alternativa es utilizar un fuerte generador de temas de WordPress que no incluye ni una sola línea de código. Sí! Sin codificar!, Un software que le permite crear su propio tema de WordPress desde cero sin ningún conocimiento de codificación.

ansioso por saber acerca de esa solución, bueno, Estoy hablando de su propio software theme builder TemplateToaster. Proporciona una serie de características fantásticas con un fácil de usar arrastrar & drop interfaz. Por lo tanto, sin perder un minuto, comencemos a desarrollar el tema de WordPress desde cero con TemplateToaster.

¿cómo crear un tema de WordPress con TemplateToaster?

TemplateToaster es bastante fácil de instalar y no implica ninguna codificación en absoluto., Simplemente visite el sitio web y descargue el instalador de TemplateToaster. Sin embargo, la versión de prueba es gratuita. Ahora, todo lo que tienes que hacer es seguir estos sencillos pasos para hacer tu propio tema de WordPress. La primera pantalla que aparecerá después de la instalación se ve como

siga estos pasos para crear un tema de WordPress & inicie su desarrollo de tema de WordPress

Paso 1: Elija una plataforma

Aquí, puede hacer la selección de CMS. Ya que estamos creando el tema de WordPress por lo que la opción obvia para mí aquí es WordPress.,

Ahora puede ver una pantalla con dos opciones, es decir, ir con plantillas de muestra y comenzar desde cero. Puede encontrar fácilmente una plantilla adecuada para su sitio web de la gran cantidad de temas gratuitos de WordPress. Dado que estamos involucrados en el desarrollo de plantillas de WordPress, elegiré «comenzar desde cero».

ahora, verá la primera ventana emergente, es decir, para seleccionar el color y la tipografía de las opciones dadas. Y haga clic en el OK botón.,

Paso 2: diseñar un encabezado

Aquí debe seleccionar el ancho y la altura del encabezado. Puede mantener el ancho a ancho completo, igual al ancho del contenedor, y también se puede configurar el ancho personalizado.

Seleccione el Color de Fondo para ello. Puede establecer un color, degradado o navegar por una imagen desde la galería de stock incorporada o usar su propia imagen personalizada.

Ahora, puede agregar «área de texto» e «iconos sociales» al encabezado y hacerlo tan interactivo como desee.

El encabezado está hecho.,

Paso 3: diseñar el menú

ahora, es el momento de diseñar el menú. Vaya a la pestaña Menú y seleccione la anchura y la altura que desea establecer para su menú de las opciones respectivas.

También puede establecer el color de fondo, degradado o imagen en el menú de la opción de fondo.

Ahora, ponga un logotipo en el menú de las opciones dadas. Sin embargo, también puede su logotipo personalizado.,

Ahora, seleccione las «propiedades del botón de menú» y luego alinee el botón como alineación → Horizontal → de derecha a izquierda y así como sus botones de menú se alinearán a la derecha de la página.

También puede elegir establecer la tipografía para los elementos del menú.

El Menú está listo ahora.

Paso 4: crear y estilizar una presentación de diapositivas

  • Ahora seleccione la pestaña Presentación de diapositivas de la barra de herramientas anterior y aquí puede elegir entre las opciones para establecer sus funcionalidades.,

  • Puede seleccionar el Color de fondo que desea para la presentación de diapositivas,la imagen de fondo, etc. Además, aplique propiedades como la posición de la presentación de diapositivas, los efectos de transición, el ancho, la altura y un área de texto para que sea tan hermosa como desee. Y los componentes como Slideshow pueden mejorar su participación en la web. Y hay ciertos componentes que los mejores desarrolladores de WordPress incluyen en sus temas para hacerlos brillantes y atractivos.

Paso 5: editar el contenido (área principal)

ahora viene el área principal, es decir, el área de contenido., En primer lugar, establezca el número de columnas que desea en una sola fila.

simplemente haciendo clic en el texto, usted será capaz de añadir el contenido a su sitio web. Sin embargo, puede usar varias opciones, como puede establecer la tipografía, el color de la fuente, La alineación del texto, el tamaño de la fuente, etc. y prepara tu mensaje.

Si desea agregar una imagen, simplemente elimine el contenido de la primera columna utilizando la pestaña Editor.,

Editor tab → Image → Browse image →Open→OK

Asimismo, puede diseñar fácilmente el resto de las columnas como se muestra a continuación.

Paso 6: diseñar/personalizar el pie de Página

  • Ahora vaya a la pestaña pie de Página. Mostrará muchas opciones para diseñar un pie de Página. En primer lugar, establecer un fondo para el pie de página. También puede establecer una imagen en el fondo de las imágenes de archivo o navegar por su propia imagen personalizada.
  • Luego, desde la opción celda de pie de página, establezca el número de filas, columnas & ancho del pie de página., Como aquí, se seleccionan 4 columnas en la primera fila y en total 2 filas. Coloque iconos de redes sociales donde los encuentre adecuados.

  • Poner el contenido y el estilo a través de opciones de Tipografía. También puede establecer diferentes colores de fuente en diferentes estados de los enlaces como Active, Hover, Normal.
  • Del mismo modo, puede diseñar el estilo mediante el enlace Text & en la segunda fila. Sin embargo, también puede optar por mostrar/ocultar esto desde la casilla de verificación dada en cualquier momento.
  • El aspecto final del pie de página será algo así., Así que para diseñarlo maravillosamente, básicamente solo necesitas unos pocos clics del ratón.

por lo tanto, la página de inicio se crea muy bien. Del mismo modo, puede crear otras páginas de su sitio web. Todo lo que tienes que hacer es hacer clic en el icono ‘+’ en el lado izquierdo y agregar tantas páginas como quieras.

Sin embargo, si desea agregar una página secundaria para cualquier página en particular, también puede hacerlo., Y todo lo que tiene que hacer es hacer clic en las elipses (tres puntos) correspondientes al nombre de la página t tiene que hacer clic con el botón derecho estando presente en la página deseada y elegir la ‘Agregar página Infantil’. Algo así como mostrar una jerarquía virtual.

Page Name → Add → Add Child Page

Aquí, puede ver otras opciones también, por ejemplo, Eliminar, Editar y clonar. Puede usarlos para tomar las acciones adecuadas.

¡Hurra!! Ha completado el proceso de creación de WordPress Tema forma scratch. Y puede obtener beneficios con el desarrollo de temas de WordPress y mantener su pequeña arma secreta segura.,

el software de diseño web TemplateToaster ofrece muchas opciones más avanzadas como poner un fondo de Video,presentaciones de diapositivas, nuevos estilos de menú, etc. Usted puede aprender más acerca de cómo hacer un sitio web de WordPress, crear un sitio web de comercio electrónico con WooCommerce, cómo crear temas y plantillas profesionales, y cómo utilizar WordPress theme check plugin y así sucesivamente.

¿Qué método utilizas para crear un tema de WordPress?

por lo tanto, esto nos lleva al final de este tutorial completo., Estoy seguro de que le ayudará a construir su propio tema de WordPress, también explicar los aspectos principales de la creación de tema de WordPress desde cero. Crear un tema para WordPress es bastante simple y la elección del CMS depende del propósito de creación de su sitio web. Como si está a punto de iniciar el desarrollo de sitios web de comercio electrónico o desea crear un tema hijo en WordPress o incluso puede querer saber qué tema de WordPress es ESE, el otro sitio web está utilizando, o desea comenzar el desarrollo de temas de WordPress utilizando Bootstrap, etc., Hay ciertas cosas a tener en cuenta antes de elegir el tema de WordPress porque elegir el mejor tema de WordPress no es un juego de niños. Echa un vistazo a los mejores temas de WordPress y temas gratuitos de WordPress.

conclusión de cómo crear WordPress theme

así que, mantenga todo en su mente clara antes de entrar en la arena del desarrollo de temas de WordPress. Sin embargo, puede optar por trabajar con WordPress Theme builder como sin escribir una sola línea de código. Por lo tanto, crear un tema para WordPress desde cero no es una tarea más difícil ahora., Pero el método para crear el tema de WordPress desde cero está completamente en sus manos. Sea lo que sea que elijas, hazme saber cómo funcionó para ti en los comentarios a continuación.