homefinance blog
¿Me creerías si te diría que puedes construir tu propio tema de WordPress sin aprender PHP primero? Si te dijera que no tendrá una eternidad, sino solo 15 minutos. ¿Todavía me creería a mí mismo? Supongamos que ya tiene un sitio web HTML que desea migrar a WordPress, porque ha escuchado muchas cosas geniales sobre la plataforma. No tiene que comenzar desde cero, puede migrar fácilmente todo el sitio.
a través de lmonk72
Puede no ser el caso. Quizás uno de sus clientes quiera convertir su HTML en WordPress y preguntarse cómo hacer esto de una manera simple. O tal vez solo desea aprender una nueva habilidad para su Arsenal de Desarrollo de WordPress.
Independientemente de por qué está aquí, hasta que terminemos, tendrá el fondo que necesita para comenzar a crear temas impecables de WordPress. Tomaremos prestados algunos códigos PHP aquí y allá para armar todo, pero prácticamente debe esperar trabajar con HTML y, lo más importante, divertirse mucho. Sin perder otro segundo, vamos a hacerlo. Que necesitas
Una plantilla HTML completada con la hoja de estilo CSS (puede descargar y usar la mía si no tiene nada que trabajar)
Una instalación funcional de WordPress con al menos un tema de WordPress. Tomaremos prestados algunos códigos PHP del tema de veinte quince
Un editor de código (utilizo y recomiendo Notepad ++, aunque el texto sublime también es una excelente opción)
15 minutos de su tiempo, otorgue o tome
Lo primero es lo primero…
Cree una carpeta en el escritorio donde almacene el tema de WordPress. Nombrarlo de todos modos. Llamaré a mi wpkubee. Todos los archivos que creamos estarán disponibles en esta carpeta. Es la misma carpeta que comprimiremos y luego cargaremos en nuestra instalación de WordPress como nuestro nuevo tema. Además, estas son las plantillas HTML que utilizamos para este tutorial: index.html
</ablo)
Esta es la sección de encabezado. Pon tu logotipo y los detilios de Oter aquí.
Esta es el área principal. Reemplazaremos esto con publicaciones de blog.
Esta es la barra lateral
y este es el pie de página
Style.css#wrap {margen: 0 car; Ancho: 95%; margen -top: -10px; Altura: 100%;}
.Header {ancho: 99.8%; Border: 1px Solid #999; Altura: 135px; Background-Kolor: #1Be;}
.Content {ancho: 70%; Border: 1px Solid #999; Margin-top: 5px; Background-Color: #999;}
.Sidebar {float: right; margen -top: -54px; ancho: 29%; Border: 1px Solid #999; Color de fondo: #1d5;}
.footer {ancho: 99.8%; borde: 1px sólido #999; margin-top: 10px; background-color: rojo;} Su tema de WordPress de WordPress debe reconocer su tema. Como tal, debemos llamarlo el tema correctamente o nunca lo activaremos. Usando el editor de códigos, cree un nuevo archivo style.css y guárdelo en la carpeta temática. Pegue el contenido del estilo existente.css (el que vino con la plantilla HTML) a su nuevo estilo.css, luego agregue el siguiente código en la parte superior:/*
Nombre del tema: el nombre de YourMe, p. Ej. Wpkubee
Tema URI: URL de su ME, p. Ej. http://yoursite.com
Descripción: Una breve descripción de su ME
Versión: 1.0 o cualquier otra versión que desee
Autor: su nombre o nombre de usuario de WordPress.org
Autor: Su dirección web, p. http://yousite.com
Etiquetas: etiquetas para localizar su ME en el repositorio de temas de WordPress, p. wpkubee, html, tema, etc.
Licencias: Licencia pública general de GNU v2.0
*/
Esta información le dice a WordPress todo lo que necesita para identificar su nuevo tema de WordPress. Sin esta información, no puede elegir y activar el tema a través del tablero de WordPress.
La parte importante es el nombre del tema, pero siempre es una buena práctica incluir todos los demás detalles.Breaking index.html en archivos php ahora, con el tema de WordPress en su lugar, permítanos dividir la plantilla HTML principal (index.html) en un número de archivo PHP.Si bien todo lo que necesita es index.php y style.css para tener un tema completo de WordPress, es mejor dividir su tema en diferentes archivos de plantilla, cada uno con una función especializada, y luego volver a colocarlos utilizando códigos PHP inteligente conocidos como llamadas funcionales .Dividiremos la plantilla HTML en cuatro archivos de plantilla, a saber, index.php, header.php, barraybar.php y footer.php.Estos archivos PHP alojarán secciones apropiadas de nuestro nuevo tema, es decir, el contenido principal, el encabezado, la barra lateral y el sótano en este orden.
Header.php comenzaremos con Header.php, solo para construir un cierto impulso. Usando el editor de códigos, cree un nuevo archivo y llámelo Header.php. Siempre asegúrese de obtener extensiones (por ejemplo, .php, .css, etc.) ¡Correcto! De lo contrario, llegará a la creación de archivos de texto inútiles. Elija las extensiones en el cuadro de rescate como Typ es guardar archivos. A continuación, debemos llenar este archivo con código relevante de un tema creíble de WordPress. El código que tomamos prestado es similar en la mayoría de los temas, pero usaremos veinte quince. Inicie sesión para instalar WorkPress Work y navegar por el editor Look ->. Esto debería abrir la pantalla de edición de la tarea. Debería ver el estilo.css de su tema activo actual. Si veinte quince no es su tema activo, no se preocupe. En el lado derecho de la pantalla de edición de temas, debería ver el tema de edición Seleccionar:. Haga clic en el menú desplegable para seleccionar veinte quince, lo que debería llevarlo a veinte quince.css estilo. No estamos interesados en este archivo. Desplácese hacia abajo hacia el encabezado.php (se muestra como encabezado) debajo de las plantillas y, una vez que este archivo se cargue en el editor, copie el código de en la apertura <cuerpo > Etiqueta. La etiqueta de apertura puede verse diferente según el tema que use, pero si usa veinte quince como suyo, debe obtener el código anterior. Aquí está el código completo que he obtenido del archivo de encabezado en veinte quince solo para ahorrar su tiempo:
<Html Class = “no-js”>
!
<link rel = "pingback" href = "”>
<script src = "/js/html5.js”>
</ablo)
<Body >
Inserte este código en Header.php y guarde los cambios. Luego añade:
<Link rel = "Stylesheet" href = "<?
… En cualquier lugar entre las etiquetas para hacerse cargo del archivo de estilo style.css. Además, agregue:
… Según el código anterior, para ocuparse del título de su sitio. Este es el título que aparece en la pestaña o en la ventana del navegador cuando su sitio está cargando. No se preocupe, si todo esto se siente extraño y confuso, prometo que todo tendrá sentido en el menor tiempo.
Guarde todos los cambios. Header.php debería verse ahora:
<Html Class = “no-js”>
<meta charset = "”>
<link rel = "pingback" href = "
<script src = "/js/html5.js”>
</ablo)
<Body >
Encabezado. Ourphp ahora está listo. Es hora de construir el siguiente archivo, index.php. Index.php para crear el archivo de plantilla principal, index.php, que es prácticamente el archivo que reúne los otros archivos PHP para crear un tema completo. Desde nuestra plantilla index.html, notará que tenemos la sección del encabezado en la parte superior, la zona de contenido principal justo debajo, la barra lateral a la derecha y el sótano en la parte inferior absoluta. Nuestro tema tendrá la misma estructura y luego agregaremos nuestras publicaciones de blog a la zona de contenido principal. Pero primero, para construir la estructura principal de index.php. Abra index.php en el editor de códigos y agregue estas tres líneas:
Agregaremos un cierto código entre las dos primeras líneas, pero primero descubramos qué significan estas tres líneas. El primero tomará el encabezado.php que ya he creado, el segundo se hará cargo de la barra lateral.php y el tercer pie.php. Esto reunirá nuestros archivos de plantilla, creando una página completa. El código que agregaremos entre las dos primeras líneas tratará con las publicaciones de blog, que no se tienen en cuenta en los otros archivos de plantilla. A medida que se agregan publicaciones para mostrar publicaciones, utilizaremos una función PHP especial conocida como bucle. No hay nada genial, sino solo un código especializado que combina su base de datos de WordPress para publicaciones y luego las enumerar en su blog. ¿Agregaremos el bucle entre Y Solo para ser claro. Pegue el siguiente código:
<div id = "post- ” >
<a href="?> “rel =” bookmark “title =” enlace permanente a “>
<!-.
Tenga en cuenta que debemos rodear el bucle con
contenedores del index.html para responder al estilo posterior. Por lo tanto, index.php final debería verse como:
Esta es la sección de encabezado. Pon tu logotipo y los detilios de Oter aquí.
<div id = "post- ” >
<a href="?> “rel =” bookmark “title =” enlace permanente a “>
! ?>
<!-.
Eso es todo. Ahora creamos plantillas para la barra lateral y el sótano. Barra lateral.php Este es un trabajo fácil. Copie el código de
en
en SideBar.php como sigue:
Esta es la barra lateral
Guarde los cambios. Footer.php de manera similar, copie el código de
en
en pie.php como sigue:
y este es el pie de página
<!-.
Luego agregue las siguientes líneas debajo de la etiqueta de cierre
:
Observe las etiquetas de cierre y de Footer.php. Sí, no olvides agregarlos. En este momento, Footer.php debería verse así:
y este es el pie de página
<!-.
Index.php debería verse como:
Esta es la sección de encabezado. Pon tu logotipo y los detilios de Oter aquí.
<div id = "post- ” >
<a href="?> “rel =” bookmark “title =” enlace permanente a “>
<!-.
Y tu nuevo estilo.css debería verse como algo así como:/*
Nombre del tema: el nombre de YourMe, p. Ej. Wpkubee
Tema Uuri: URL de YourMe (http://yoursite.com)
Descripción: Una breve descripción de su ME
Versión: 1.0 o cualquier otra versión que desee
Autor: su nombre o nombre de usuario de WordPress.org
Autor: Su dirección web (http://yousite.com)
Etiquetas: etiquetas para localizar su ME en el repositorio de temas de WordPress, p. wpkubee, html, tema, etc.
Licencias: Licencia pública general de GNU v2.0
*/
cuerpo {
Font-Family: Arial, Helvetica, Verdana;
Tamaño de fuente: 0.8em;
Ancho: 100%;
Altura: 100%;
}
.Header {
Color de fondo: #1BE;
Margen-izquierda: 14%;
Arriba: 0;
Ancho fronterizo: 0.1em;
Color de la frontera: #999;
Estilo fronterizo: sólido;
Ancho: 72%;
Altura: 250px;
}
.Centent {
Color de fondo: #999;
Margen-izquierda: 14%;
margen-top: 5px;
Flotador izquierdo;
Ancho: 46%;
Ancho fronterizo: 0.1em;
Color de la frontera: #999;
Estilo fronterizo: sólido;
}
.Sidebar {
Color de fondo: #1D5;
Margen-derecha: 14%;
margen-top: 5px;
Flotar derecho;
Ancho fronterizo: 0.1em;
Color de la frontera: #999;
Estilo fronterizo: sólido;
Arriba: 180px;
Ancho: 23%;
}
.footer {
Color de fondo: rojo;
Margen-izquierda: 14%;
Flotador izquierdo;
margen-top: 5px;
Ancho: 72%;
Altura: 50px;
Ancho fronterizo: 0.1em;
Color de la frontera: #999;
Estilo fronterizo: sólido;
}
Captura de pantalla ahora, para crear una captura de pantalla para el nuevo tema de WordPress.Puede ser cualquier cosa, pero es mejor hacer una captura de pantalla de su base en acción.
Una captura de pantalla que puedes usar
Aparte, hay algunas cosas para recordar. En primer lugar, la captura de pantalla debe ser una imagen .png. En segundo lugar, debe tener un ancho de 600 px y una altura de 450 px. Tercero, guarde la imagen como captura de pantalla.png en la carpeta temática. Al armar todo hasta ahora, debe tener un tema funcional de WordPress, aunque simple. Puede agregar el estilo como lo considera apropiado, pero hasta ahora debería poder crear un tema funcional de WordPress en HTML. En la segunda parte de esta publicación, agregaremos menús de navegación, widgets y hablaremos sobre el archivo Functions.php, entre otros. En otras palabras, la mayoría de las características que amamos en WordPress están inactivas en nuestro nuevo tema, porque este tutorial cubrió solo los elementos básicos. Mientras tanto, guarde todos los archivos, incluida la captura de pantalla en la carpeta temática, comprime la carpeta en un archivo .zip y cargue el nuevo tema. ¡Puede obtener una vista previa o activar el tema para verlo en acción! La última palabra, si ha seguido estos pasos con éxito, nada le impide crear temas de WordPress en HTML. Diablos, no hay nada que le impida pasar a un desarrollador completo de WordPress en el menor tiempo. PHP no es difícil, su sintaxis es ligeramente diferente de HTML. Una vez que haya aprendido las cuerdas, especialmente cómo se reproducen diferentes partes de un tema de WordPress, obtendrá un tema tras tema en el menor tiempo. ¡Le deseamos éxito en sus esfuerzos y no cambie el cuadrante! Por cierto, aquí están los archivos nuevamente: plantillas HTML + CSS
Tema completo wpkubee
¡Suerte!
