¿Tienes que construir un tema de WordPress? En el próximo tutorial, lo guiaremos paso a paso hacia la creación de un tema de WordPress desde cero, integrando el tema con el marco Sass y Bootstrap. Hoy en día, parece que todos los “desarrolladores de WordPress” son en realidad “implementa” en lugar de desarrolladores reales. Lo que simplemente hago es tomar temas de WordPress preparados, agregar un poco de estilo, un hermoso logotipo, un puñado de complementos WP y Voila: tiene un sitio. Sin embargo, cuando se les pide que comiencen desde cero, se ponen ansiosos. WP se está volviendo cada vez más popular a medida que pasan los días, por lo que es importante que cualquier persona que proporcione el desarrollo web de WordPress esté en la cima de su juego. Esto significa que debe poder construir cualquier cosa con WordPress para un cliente, dentro de los límites de la razón y la lógica. La dependencia de los marcos y plantillas preparados listos solo te hará ir tan lejos. Por esta razón, la contratación de compañías de diseño de sitios de WordPress para construir un proyecto utilizando temas iniciales es una buena idea, ya que da como resultado un diseño único.

---

es un desarrollador de WP más fácil de decir que hacer? Ser un desarrollador de WordPress no es un problema para todos. Tendrás que ser fluido:
Html
CSS
Javascript
JQuery
Php
MySQL (la cantidad escrita de WP varía según el proyecto)
Entonces, prácticamente, lo que tiene que ser es un desarrollador real, equipado con experiencia en lenguajes de programación y tecnologías web. Saber cómo instalar un tema WP con complementos en un servidor no es suficiente para convertirse en un desarrollador de WP. A cero, deberá comprender la estructura de un tema WP. Comencemos, ¿sí? Primero, descargue WordPress a su computadora local desde www.wordpress.org y no me gusten todos los archivos necesarios. Luego debe localizar los temas de contenido WP>. En la ubicación actual, crearemos una nueva carpeta con el nombre del tema que queremos construir. Debido a que planeamos construir un sitio de arranque limpio, lo llamaremos SCANWP Starter. El primer archivo que debe tener es el archivo style.css. En el archivo superior, desea ingresar algunos comentarios, anunciando en el WP cuál es el nombre de su base en la cadena de comentarios (/ * text */), desea escribir su nombre de base, la URL del autor, El nombre del autor, descripción del tema, versión (1 obviamente), licencia, etiquetas y dominio de texto. Aquí hay un resumen de lo que significa todo esto:
El nombre del tema: se explica por sí mismo, le dice al espectador el nombre del tema que ve en el administrador.
La URL del tema: la URL que otras personas pueden usar para descargar el tema.
Autor: Nombre del desarrollador real.
Descripción: Escriba lo que sea relevante para su tema y para quién esté destinado, etc.
Versión: Número de versión Si tiene la intención de cargar el tema en WordPress. Licencia: Deje el comentario con la licencia GNU, haciéndola de código abierto.
Etiquetas: la categoría que las personas pueden usar para encontrar su tema en el directorio de WordPress.
Campo de texto: no hablaremos mucho sobre eso, pero es el nombre utilizado por las personas que traducen su tema.
Con esto fuera de la carretera, solo tenemos 2 archivos para agregar antes de activar el tema. Los dos archivos son funciones.php y index.php. Puede agregar estos 2 archivos sin agregarles una sola línea de código. Su tema ahora se puede activar. Sin embargo, para activarlo realmente, debe tener una instalación de WP. Si ya lo tiene, puede omitirlo antes, pero si no, puede probar algunos de ellos.

---

Desarrollo local o servidor de WordPress
Para el desarrollo local, puede usar XAMPP / WAMP / LAMP.
Puede usar el servidor de escritorio para el desarrollo local.
Desarrollar un sitio en un servidor en vivo.
A los fines del aprendizaje, generalmente elegimos el desarrollo local, porque el desarrollo en un servidor en vivo es inútil. Construimos muchos sitios web usando XAMPP y WAMP, pero recientemente nos mudamos al servidor de escritorio. El proceso se vuelve mucho más simple, pero los dos anteriores son buenos como son. Cuando escribimos, la mejor solución que recomendamos es XAMPP (Obtenga más información aquí) y Gulp.
! Es el lugar donde estaba antes. Ahora debemos tener una carpeta con el nombre de nuestro tema y 3 archivos en él. A saber, style.css, functions.php y index.php archivo. Ahora estamos listos para activar el nuevo tema y comenzar a ensuciar nuestras manos con el desarrollo. Inicie sesión en la instalación de WP y será redirigido a la página de inicio de sesión. Simplemente agregue el nombre de usuario y la contraseña para iniciar sesión. Navegue a la pestaña Aspect, que lo lleva directamente a la página de tareas. Vea ahora que el tema está presente en la página del tema. Todo lo que tiene que hacer ahora es hacer clic en el botón de activación, y el tema ahora está en uso. Que se han preferido tienen una hermosa captura de pantalla, pero su tema no tiene ninguna imagen. Esta parte del artículo no es obligatoria, pero es beneficioso si desea hacer algo con este tema. Simplemente agregue una imagen. En la carpeta con temas, puede agregar un archivo que debe titulado “Screenshot.png” con las dimensiones de 800 x 660. Ahora, una vez que actualice las páginas, verá la captura de pantalla del tema.
! No profundizaremos demasiado, puede leer la documentación para ello. En cuanto al desarrollo del front-end, Bootstrap alivia solo el trabajo duro. Bootstrap es un marco bastante estándar. Incluso si no sabe mucho sobre HTML o CSS, su documentación es perfecta y simplemente puede leerlo y obtenerla. Normalmente, al desarrollar un sitio web con HTML o CSS, generalmente usamos etiquetas como , y
. Hay muchos otros, pero estos son los básicos. Sin bootstrap, estos elementos son simplemente HTML estáticos y no son elegantes de ninguna manera. Con Bootstrap, las cosas se vuelven mucho más fáciles, porque hay muchas clases en estas etiquetas que puede usar para atacar su texto en consecuencia, aliviando mucho la parte difícil del trabajo. Hay varios beneficios que puede obtener mientras usa Twitter Bootstrap, y uno de ellos es el sistema de cuadrícula. Una vez más, no profundizaremos esto, pero puedes leer todo al respecto en el tutorial de bootstrap. De esto en el tema de WordPress. El código estándar se separa en 3 grupos diferentes:
encabezamiento
SÓTANO
Pagina de contenido

En cuanto a los sitios WP, toda el área superior del sitio se llama encabezado. Es un archivo con el nombre Header.php. El área inferior del sitio se llama pie de página, ubicado en un archivo llamado Footer.php. El resto se ubicará en el archivo que utilizaremos como página de contenido. En la carpeta de su tarea, puede agregar 2 archivos nuevos titulados Header.php y Footer.php.

---

Agregar el código a la parte superior del tema si es un principiante, entonces esto El código puede parecer desalentador. Pero no deberías asustarte. Simplemente agregué un código de plantilla a la etiqueta del cuerpo, agregué la función de atributo de lenguaje WP, el título de la función WP, el cabezal WP, que es un código que se necesita antes de la función de clase de cabeza y cuerpo. Ofrece clases únicas a cada página basadas en varias variables.
<html >
<AP
<meta charset = "”>
!

<cuerpo

> Código para agregar a la base del sótano

Lo último que debe hacer antes de comenzar es incluir los 2 archivos en el archivo de contenido. Actualmente usaremos el archivo index.php. Entonces, en el index.php, puede agregar lo siguiente:

Actualmente, hemos configurado el sótano, el encabezado y un archivo de contenido. Si actualiza el sitio ahora, puede ver el símbolo del “Hello World”. Esto se debe a que lo haremos en modo WordPress, a través de funciones.php. Scanwp_enqueue function ()
{
wp_enqueue_style (‘bootstrap’, ‘https://maxcdn.bootstrapcdn.com/bootstrap/4.0/css/bootstrap.min.css’);
If ($ _server [‘server_name’]! = ‘Localhost’)
{wp_enqueue_style (‘style’, get_template_directory_uri (). ‘/style.min.css’);}
de lo contrario
{wp_enqueue_style (‘style’, get_template_directory_uri (). ‘/style.css’); }
wp_enqueue_script (‘customjs’, get_template_directory_uri (). ‘/sassets/js/custom.min.js’, array (‘jQuery’), ”, true);
wp_enqueue_style (‘arial’, “https: //fonts.googleapis.com/css? Family = Arial: 300 |
wp_enqueue_style (‘fontawesome’, ‘https://use.fontawesome.com/releases/v5.2.0/css/all.css’);
wp_enqueue_script (‘bootstrapcdn’, ‘https://maxcdn.bootstrapcdn.com/bootstrap/4.0/js/bootstrap.min.js’, array (‘jQuery’), ”, true);}
add_action (‘wp_enqueue_scripts’, ‘scanwp_enqueue’); En esta función única, agregamos códigos y estilos apropiados para el encabezado y el sótano. Como un bono adicional, también agregué la funcionalidad de estilo para decidir qué hoja de estilo mostrar, así como una fuente de Google que puede usar de forma gratuita. Si realmente quieres hacer un esfuerzo adicional, puedes usar FontaWeome. Ahora agregemos algunas funcionalidades más: add_theme_support (‘title-tag’); add_theme_support (‘post-miniaturas’);
Register_Nav_Menus (Matrix (
‘Header’ => ‘Menú principal personalizado’,
));
La función scanwp_widgets_init () {
Register_sideBar (Matrix (
‘nombre’ => ‘pie de página 1’,
‘id’ => ‘pie_1’,
‘Antes_widget’ => ‘
‘,
‘After_widget’ => ‘
‘,
‘beofore_itle’ => ‘

‘,
‘After_title’ => ‘

‘,
));
Register_sideBar (Matrix (
‘Nombre’ => ‘pie de página 2’,
‘Id’ => ‘pie_2’,
‘Antes_widget’ => ‘
‘,
‘After_widget’ => ‘
‘,
‘beofore_itle’ => ‘

‘,
‘After_title’ => ‘

‘,
));
Register_sideBar (Matrix (
‘Nombre’ => ‘pie 3’,
‘Id’ => ‘pie_3’,
‘Antes_widget’ => ‘
‘,
‘After_widget’ => ‘
‘,
‘beofore_itle’ => ‘

‘,
‘After_title’ => ‘

‘,));
Register_sideBar (Matrix (
‘Nombre’ => ‘barra lateral’,
‘id’ => ‘barra lateral’,
‘Antes_widget’ => ‘
‘,
‘After_widget’ => ‘
‘,
‘beofore_itle’ => ‘

‘,
‘After_title’ => ‘

‘,
));}
add_action (‘widgets_init’, ‘scanwp_widgets_init’);Es prácticamente un juego donde agregar un código preciso.Hemos agregado algunas funciones básicas solo para que nuestro tema WP funcione correctamente.Puede leer más sobre funciones.php aquí.
Cuando agrega la opción de etiqueta de título, le permite eliminarla del encabezado.php y extraerla de WordPress.
Las miniaturas publicadas son exactamente como parece.Estos permiten la opción de tener miniaturas para cada publicación en nuestro sitio.
Podemos crear tantos menús de navegación como sea posible, pero primero debemos grabarlos.
Los widgets incluyen todos los widget que agregará del panel de administración del sitio.