Share
¿Listo para aprender a hacer tu primer tema de WordPress? Esta serie de tutoriales tomará un enfoque paso a paso, haciendo uso de un "tema de aprendizaje" conocido cariñosamente como Ruedas de entrenamiento de WordPress, Para ayudar a enseñar el tema. Esta serie llevará al novato absoluto de WordPress a través de los pasos básicos necesarios para convertir cualquier plantilla HTML en un tema de WordPress completamente funcional.
Cuando comencé a usar WordPress en 2006, no había muchos tutoriales sobre dónde empezar con Desarrollo de temas.
Aprendí de la manera difícil, a través de prueba y error, extrayendo el códice de WordPress, así como de las pocas referencias que existían en aquel entonces. Durante los últimos 2 a 3 años he estado enseñando el desarrollo básico de temas de WordPress de forma intermitente, y he notado que, para aquellos que no están muy familiarizados con los Sistemas de gestión de contenido, la mayoría de los tutoriales que existen para enseñar el desarrollo desde cero son demasiado complicados..
Entonces, he desarrollado un enfoque paso a paso, haciendo uso de un "tema de aprendizaje" conocido cariñosamente como Ruedas de entrenamiento de WordPress, eso llevará al novato de WordPress completo a través de los pasos básicos necesarios para convertir cualquier plantilla HTML en un tema de WordPress completamente funcional. Sin embargo, vamos a comenzar lentamente, específicamente para aquellos que no tienen el lujo de la experiencia previa de trabajar con código CMS o PHP. De ahí el nombre, "Ruedas de entrenamiento". Los programadores incondicionales se hacen a un lado, estamos a punto de despejar la pista de carreras!
Nuestro enfoque estará principalmente en el código de WordPress, no en el diseño. Así que la plantilla es deliberadamente simplista con un estilo ligero para que no montes tu bicicleta en un acantilado por aburrimiento.
Para una excelente introducción al desarrollo web mediante HTML y CSS, consulte el tutorial de Net Tuts - Desarrollo web desde cero
Los Temas de WordPress son esencialmente Plantillas HTML simples, con pequeños fragmentos de etiquetas PHP específicas de WordPress en áreas donde se necesita cargar contenido dinámico desde la base de datos. Por esta razón, una buena comprensión de HTML sería necesaria para seguir adelante con esta serie..
Los temas de WordPress, aunque están compuestos principalmente de HTML, no se pueden mostrar de forma predeterminada en su navegador debido al PHP que contienen, lo que cambia la forma en que funcionan. Deben ejecutarse a través de un servidor que sea capaz de interpretar el código PHP, por lo que es esencial trabajar en un servidor web compatible con PHP al desarrollar Temas de WordPress.
Nos saltearemos el proceso de instalación de WordPress por ahora, ya que nuestro enfoque se centrará exclusivamente en el desarrollo de temas. Me he vinculado a un excelente tutorial de video sobre la instalación de WordPress en un servidor en vivo. Se pueden encontrar toneladas más en línea para los servidores en vivo y virtuales.
"Un servidor virtual es esencialmente un servidor que se ejecuta en su máquina de escritorio local y se puede configurar utilizando MAMP (mac), XAMPP (mac y windows) o WAMP (windows)".
Para aprender cómo instalar WordPress localmente en un servidor virtual, vea el siguiente video.
No lo llaman la instalación de 5 minutos Famous para nada. De hecho, si lo has hecho lo suficiente, toma menos de 5 minutos..
Visite www.freecss templates.org para obtener una tonelada de plantillas que son perfectas para comenzar y ya están diseñadas para ser usadas como temas de WordPress.
Una vez que tenga su instalación de prueba de WordPress en ejecución, necesitará una plantilla HTML básica (index.html) con una hoja de estilo (style.css). Recomiendo a cualquiera que aprenda el proceso de conversión de HTML a WordPress a practicar mediante la descarga de plantillas HTML y CSS simples y gratuitas y la conversión de algunas para la práctica..
Voy a utilizar el tema de ruedas de entrenamiento de WordPress durante la duración de esta serie de tutoriales y le insto a que haga lo mismo, para empezar, no estamos vendiendo en diferentes direcciones. El tema Training Wheels es una plantilla simple, nada picante ni llamativo, pero contiene todos los componentes familiares de un tema típico de WordPress, es decir, ¿no? Encabezado, menú, barras laterales, columna de contenido y pie de página. El tema será nombrado ruedas de entrenamiento-0.0 al principio, y el nombre cambiará constantemente a medida que agregamos más código y el progreso es hacia un tema completamente desarrollado. Al final de esta lección el nombre cambiará a ruedas de entrenamiento-0.1
Echa un vistazo a la estructura básica de HTML a continuación. Muy simple.
Si sus archivos de inicio no se nombran de acuerdo con la manera mencionada anteriormente, tendrá que cambiarles el nombre. WordPress requiere archivos con estos nombres como el mínimo indispensable para que un tema sea funcional. Además, tendremos una carpeta de imágenes para mantener cualquier imagen bien escondida de nuestro camino.
El archivo index.html, que será la estructura base para el tema, debe ser renombrado a index.php. Sin embargo, siempre recomiendo mantener una copia de index.html en el lateral, en caso de que algo salga mal, como es debido. Piense en ello como una llanta de repuesto en caso de que experimente una explosión de llanta. Confesión: incluso después de años de desarrollo de temas, todavía hago cosas realmente tontas, especialmente después de la medianoche, cuando mi cerebro ya no puede funcionar pero el café me mantiene activo..
Terminamos con lo siguiente. Los míos están alojados en la carpeta llamada training-wheels-0.0
Si alguna vez ha intentado agregar una plantilla HTML simple en el directorio de temas de WordPress, notará que no aparece en las opciones para activar temas. Con versiones anteriores de WordPress, también encontrará que si su hoja de estilo no contiene el comentario de la hoja de estilo a continuación, aparecerá un mensaje de error. Esto se debe a que WordPress utilizó el fragmento de comentario de CSS que se encuentra a continuación para registrar su tema como un tema válido de WordPress. Actualmente ya no es necesario tener este comentario para que su tema se registre, pero su tema aparecerá sin ningún otro detalle, excepto el nombre de la carpeta como se ve a continuación..
El código a continuación debe modificarse para que contenga sus propios detalles únicos, así como información única sobre el tema que está creando..
/ * Nombre del tema: URI del tema: Descripción: Versión: Autor: URI del autor: * /
Con los detalles de mi tema de Training Wheels incluido, se vería así:
/ * Nombre del tema: Ruedas de entrenamiento URI de tema: http://www.wpbedouine.com Descripción: Un tema para aprender WordPress Theme Development desde cero Versión: 0.1 Autor: Nur Ahmad Furlong Autor URI: http: //www.nomad-one .com * /
Se pueden agregar algunos parámetros adicionales, especialmente si está considerando lanzar su tema al público, venderlo o cargarlo en el directorio oficial de temas de wordpress.org.
Puede encontrar un ejemplo de un comentario de hoja de estilo más completo para proporcionar la mayor cantidad de detalles posibles sobre el tema en el tema predeterminado de veintiocho. Como puede ver, hay información adicional sobre las etiquetas para ayudar a los usuarios cuando buscan tipos específicos de temas a través de la búsqueda de temas del tablero o en el directorio de temas. También se incluye una descripción detallada, así como información sobre la licencia de algunos temas. Estaremos ignorando estos para este ejercicio..
/ * Nombre del tema: Twenty Eleven Tema URI: http://wordpress.org/extend/themes/twentyeleven Autor: el equipo de WordPress Autor URI: http://wordpress.org/ Descripción: El tema de 2011 para WordPress es sofisticado y liviano , y adaptable. Hágalo suyo con un menú personalizado, una imagen de encabezado y un fondo; luego vaya más allá con las opciones de tema disponibles para el esquema de colores claros u oscuros, colores de enlace personalizados y tres opciones de diseño. Twenty Eleven viene equipado con una plantilla de página de Showcase que transforma tu página de inicio en un showcase para mostrar tu mejor contenido, un amplio soporte de widgets (barra lateral, tres áreas de pie de página y un área de widgets de Showcase), y un widget personalizado "Ephemera" muestra tus publicaciones de Aside, Link, Quote o Status. Se incluyen estilos para imprimir y para el editor de administración, soporte para imágenes destacadas (como imágenes de encabezado personalizadas en publicaciones y páginas y como imágenes grandes en publicaciones destacadas), y estilos especiales para seis formatos de publicación diferentes. Versión: 1.2 Licencia: GNU Licencia pública general Licencia URI: license.txt Etiquetas: oscuro, claro, blanco, negro, gris, una columna, dos columnas, barra lateral izquierda, barra lateral derecha, ancho fijo, ancho flexible , fondo personalizado, colores personalizados, encabezado personalizado, menú personalizado, estilo de editor, encabezado de imagen destacada, imágenes destacadas, plantilla de ancho completo, microformatos, formatos posteriores, soporte de lenguaje rtl, pegajoso -post, opciones de tema, listo para la traducción * /
Una vez que tenga los comentarios de la hoja de estilo en su lugar, su tema ya está listo para activarse a través del Panel de administración de WordPress, en Temas "Apariencia"
Para ayudarlo a usted y a otros usuarios del tema a reconocer rápidamente el tema en el área de instalación de temas del panel de control, se ha previsto que una imagen screenshot.png se muestre automáticamente si se encuentra en la raíz de la carpeta de su tema.
Lo ideal sería tener una captura de pantalla que ofrezca una buena representación de cómo se ve el tema. Encuentro que muchos diseñadores de temas incluyen un logotipo aquí, que no siempre ayuda al usuario final a identificar el tema que está buscando, especialmente en el caso de que el usuario ya tenga muchos temas ya instalados, algo bastante común, creo..
El screenshot.png debe ser 240px X 180px, que es el tamaño utilizado para la miniatura en el panel de control. Puede insertar un tamaño diferente, pero la imagen se redimensionará para ajustarse a esas dimensiones. Es la mejor manera de mantener el tamaño correcto la primera vez para una visualización óptima y una experiencia de carga de página.
Antes de continuar, debemos orientarnos un poco con la estructura del lenguaje de desarrollo de PHP y, lo que es más importante, con la estructura de PHP específico de WordPress. El PHP utilizado en los temas de WordPress en general, está personalizado específicamente para trabajar solo en el entorno de WordPress. Comenzaremos con la estructura contenedora de cualquier código PHP, como con HTML que tiene solo los corchetes, el código PHP está envuelto en.
Inside the Brackets es donde se lleva a cabo toda la funcionalidad, con el código al que generalmente nos referimos en las funciones de PHP. Siempre asegúrese de que exista un espacio entre la etiqueta contenedora y el código PHP interno. La más simple de estas funciones que trataremos es la bloginfo (); función. Observe que después del nombre de la función, tenemos 2 paréntesis redondeados, de apertura y cierre, con un punto y coma al final, cierra la función y, en muchos casos, es esencial. Los paréntesis redondeados a veces terminarán conteniendo algunos parámetros adicionales, para decirle a bloginfo (); Función, específicamente lo que necesita hacer..
Algunas funciones de WordPress no necesitan parámetros dentro de los paréntesis redondeados para realizar una función, aunque opcionalmente pueden tener algunos para hacer que su función sea más específica. El bloginfo (); parámetro sin embargo, necesita uno solo para funcionar en absoluto. Iremos a algunas de las funciones adicionales que funcionan sin parámetros a medida que pasa el tiempo..
Observe cómo la palabra nombre está escrita con comillas simples alrededor de los corchetes redondeados.
es el código que usamos en lugar del nombre del sitio, en cualquier lugar donde deseamos que ese nombre aparezca en nuestra plantilla. Por ejemplo, donde sea que haya escrito "Ruedas de entrenamiento de WordPress", simplemente podría reemplazar ese texto con esa función.
Preste especial atención a la estructura de esta función, ya que el resto del código de WordPress sigue una estructura similar. Dejar una parte esencial, como los corchetes redondeados, el punto y coma después de los corchetes redondos, o el espacio entre php y la palabra bloginfo, hará que su código no funcione correctamente. En algunos casos esto podría matar tu página entera. Lo sé, es un dolor ser cuidadoso, pero desarrollar buenos hábitos desde el principio ayuda. Obedece las reglas de la carretera y tu viaje será mucho menos accidentado.
Cuando se carga el sitio de WordPress que ejecuta esta función, WordPress consulta la base de datos y encuentra el nombre que ha insertado en el campo Nombre del blog en Ajustes "General.
También es el nombre que inserta al principio cuando ejecuta la instalación para configurar WordPress por primera vez. Cambiar este nombre en la Configuración general hará que su plantilla refleje ese cambio inmediatamente. Esto es esencialmente cómo funciona WordPress, o cualquier otro sistema de gestión de contenido. Las etiquetas dinámicas reemplazan los contenidos estáticos para que los contenidos se puedan administrar a través de la interfaz de administración en lugar de editar directamente las plantillas.
Tu tema aún no está listo para ser registrado en WordPress. Falta un paso esencial que le permita a WordPress mostrar su tema correctamente.
Unos pocos pasos atrás, nuestro index.html pudo vincularse fácilmente a su hoja de estilo adjunta, ya que se encuentran en la misma carpeta y bastaría con insertar el nombre del archivo de la hoja de estilo dentro del enlace de la hoja de estilo. Sin embargo, este ya no es el caso. Los temas de WordPress no residen en el nivel raíz del sitio, ya que se instalan en el temas de wp-content carpeta dentro del software de WordPress.
Como puede ver a continuación al activar el tema actualmente, todavía no vemos la imagen completa. Aunque la estructura HTML se carga, la hoja de estilo no se está enlazando, lo que resulta en una página sin estilo.
Sin explicar demasiados detalles sobre cómo WordPress trata de llamar a las plantillas desde esas carpetas, debemos ser conscientes ahora de que los archivos ya no se pueden vincular tan fácilmente como lo hicimos en sitios HTML simples. Necesitamos usar algunas funciones adicionales de WordPress para completar los pasos entre el directorio raíz y la carpeta del tema actualmente activado. Lo hacemos con la ayuda de otro bloginfo (); función, esta vez detectando la URL a la hoja de estilos del tema actualmente activado. No importa cuál sea el nombre de la carpeta del tema, WordPress ahora llenará los espacios en blanco e insertará la ruta al archivo style.css.
Esta función se inserta en la etiqueta de enlace de la hoja de estilo
que ahora se convierte
Si inspecciona su código fuente utilizando la fuente de vista o con algo como firebug, verá que WordPress incluye la ruta completa desde la raíz del sitio hasta la hoja de estilo. La carpeta raíz de mi sitio de ejemplo se encuentra en http://www.wpbedouine.com/training-wheels/. WordPress por lo tanto genera:
Lo mismo stylesheet_url La función insertará automáticamente la ruta a cualquier tema actualmente activado de la misma manera, sin que se edite ningún código fuente. Verá un patrón emergente, con bits de contenido codificado en duro que serán reemplazados por funciones dinámicas que extraen datos de la base de datos sobre la marcha.
¿Sientes ese aire corriendo por tu cabello ahora? ¡No te preocupes, las ruedas de entrenamiento saldrán pronto! Lo prometo.
Coloque sus archivos index.php y style.css en su propia carpeta, cuyo nombre se basa en el nombre del tema y luego se cargan en su carpeta. temas de wp-content carpeta dentro de su versión de host virtual o en vivo de su instalación de WordPress como se ve a continuación.
Y sin más preámbulos, ir a Apariencia "Temas y haga clic en activar bajo su tema recién creado. Para el resto de los lectores en este sitio, estos pasos podrían haber sido molestos, pero personalmente conozco la sensación de que finalmente hice clic en este proceso y activé mi primer tema dentro de WordPress. No tiene precio para el novato.
Antes de terminar, usemos unos cuantos bloginfo () muy simples; Funciones para completar contenido dinámico. Ya hemos introducido el bloginfo ('nombre'); y bloginfo ('stylesheet_url');. A continuación tenemos el HTML inicial para el encabezado div de nuestro tema.
Ruedas de entrenamiento de WordPress
Un poco de ayuda para que te desplaces libremente con WordPress.
Reemplazaremos el Contenido del atributo href de enlace H1, que actualmente solo tiene un símbolo de hash y generalmente se vería como href = "home.html", con el bloginfo ('url'); función.
">
Además, reemplazaremos el lema h2 debajo del nombre del sitio con:
por lo que nuestro fragmento de código ahora parece mucho más wordpressish.
">
Un último problema a resolver es el enlace a la imagen de contenido en la columna central de la plantilla. Similar al tema de vincular la hoja de estilo, necesitamos usar otra información de blog (); La función para completar la ruta de la imagen como imágenes / imagename.jpg ya no funcionará.
Rueda de entrenamiento Lección 1
Para resolver este problema usamos el siguiente código antes de llamar al directorio de imágenes
Así que vamos a terminar con la siguiente.
Rueda de entrenamiento Lección 1
Preste especial atención a la barra hacia adelante justo después del corchete de cierre y antes del nombre de la carpeta de imágenes!
Accentsconagua
; ?>/images_26/wordpress-theme-development-training-wheels-day-one_4.jpg )
bloginfo ('nombre'); bloginfo ('url'); bloginfo ('descripción'); bloginfo ('template_directory'); El bloginfo (); La función tiene un montón de usos para generar varias piezas de contenido desde su sitio..
Para una lista más completa de parámetros para bloginfo (); Consulte la documentación de WordPress Codex sobre esta función: http://codex.wordpress.org/Function_Reference/bloginfo.
Otro recurso excelente para las muchas funciones de WordPress es la Referencia interactiva de etiquetas de WordPress de DBS, que es esencialmente una presentación más ordenada y ordenada del código que figura en el Códice de WordPress..
He agregado fragmentos del código cubierto en esta lección a mi cuenta de snipplr.
Libre rueda con WordPress para seguir pronto. Escucho esas ruedas de entrenamiento haciendo ruido para que salgan :)
