Emprendedor Innovador

Cómo iniciar un negocio en línea

  • Principal
  • Crear un sitio con WordPress
  • Hospedar un sitio web
    • Web Hosting España
    • Análisis de SiteGround.es
    • Guía de web hosting completa para sus sitios
  • Códigos de cupones
  • Recursos
Usted está aquí:: Principal / Guía / WordPress / ¿Cómo crear archivos de plantilla de WordPress?

21 enero, 2016

¿Cómo crear archivos de plantilla de WordPress?

Al crear un tema de WordPress, una vez que el código HTML y CSS básico ha sido creado, necesitas convertirlo en algo que pueda ser usado por WordPress. Si estás listo para pasar al siguiente paso, este tutorial te mostrará la manera correcta de crear archivos de plantilla para WordPress.

Paso 1 – Entiende lo que son los archivos de plantilla

Para empezar, necesitas saber por qué crear estos archivos si es que quieres comprender lo que hacer. Básicamente, WordPress requiere un archivo index.php y un archivo style.css para mostrar todos los componentes necesarios.

Pero en los temas modernos de WordPress, dividirás el archivo index.php e incluirás un conjunto separado de archivos. Éstos contienen los datos para el encabezado, el pie de página y la barra lateral.

Vamos a crear un tema básico de WordPress con los siguientes cuatro archivos incluidos:

  • index.php
  • header.php
  • sidebar.php
  • footer.php

Paso 2 – Crea archivos PHP vacíos

Crea cuatro nuevos archivos en tu editor de código favorito. También deberías tener una carpeta con el nombre de tu tema de WordPress con fines organizativos. Ésta debería ser ‘[nombre de tu tema]-demo-theme’.

Copia tu hoja de estilos a esta misma carpeta. Esto es necesario para más tarde, pero es algo que está más allá del alcance de este tutorial y es irrelevante en nuestro caso.

Paso 3 – Añade código a los tres archivos

No necesitas ninguna experiencia en programación para seguir este paso. El código que necesitas añadir separadamente a cada uno de estos tres archivos lo puedes encontrar a continuación. Simplemente copia y pega todo lo que aparece en esta guía y listo. No necesitas comprender lo que significa, pero te permitirá crear el sitio web que quieres.

He aquí el código para el archivo header.php:

<!– añade una clase a la etiqueta html si el sitio web es visualizado en IE, para permitir correcciones de fallos mayores –>

<!–[if lt IE 8]><html class=»ie7″><![endif]–>

<!–[if IE 8]><html class=»ie8″><![endif]–>

<!–[if IE 9]><html class=»ie9″><![endif]–>

<!–[if gt IE 9]><html><![endif]–>

<!–[if !IE]><html><![endif]–>

<meta charset=»utf-8″ />

<meta name=»viewport» content=»width=device-width» />

<title>Título</title>

<link href=»style.css» rel=»stylesheet» media=»all» type=»text/css» />

<header role=»banner»>

<div class=»site-name half left»><!– nombre del sitio y descripción –></div>

<div class=»site-name half left»>

<h1 class=»one-half-left» id=»site-title»><a title=»Title» rel=»home»>Creación del tema de WordPress</a></h1>

<h2 id=»site-description»>Descripción</h2>

</div>

<!– un aside en el encabezado – esto será ocupado más tarde con un área de widget –>

<aside class=»header widget-area half right» role=»complementary»>

<div class=»widget-container»>Esto será un área de widget en el encabezado – los detalles de la dirección (o cualquier otra cosa que quieras) van aquí</div><!– .widget-container –>

</aside><!– .half right –>

</header><!– header –>

<!– menú de navegación de ancho completo – eliminar el elemento nav si se utiliza navegación superior –>

<nav class=»menu main»><?php /* Permite que los lectores de pantalla / navegadores de texto se salten el menú de navegación y vayan directamente a lo que importa */ ?>

<div class=»skip-link screen-reader-text»><a title=»Ir al contenido» href=»#content»>Ir al contenido</a></div>

<ul>

<li><a href=»#»>Inicio</a></li>

<li><a href=»#»>Últimas noticias</a></li>

<li><a href=»#»>Artículos destacados</a></li>

</ul>

</nav><!– .main –>

<div class=»main»>

Y aquí está el código para el archivo sidebar.php :

<!– la barra lateral – en WordPress será ocupada por widgets –>

<aside class=»sidebar widget-area one-third right» role=»complementary»>

<div class=»widget-container»>

<h3 class=»widget-title»>Un widget de barra lateral</h3>

<p>Éste es un widget de barra lateral. En tu tema de WordPress puedes configurarlos para hacer que aparezcan por todo tu sitio web.</p>

</div><!– .widget-container –>

<div class=»widget-container»>

<h3 class=»widget-title»>Otro widget de barra lateral</h3>

<p>Un segundo widget de barra lateral, quizás podrías usar un plugin para mostrar un feed de redes sociales, o simplemente listar tus entradas más recientes.</p>

</div><!– .widget-container –>

</aside>

Éste es el tercer fragmento de código para el archivo footer.php:

<!– .main –>

<footer>

<!– the .fatfooter aside – Usa esto para habilitar un fondo que ocupe toda la pantalla en el pie de página manteniendo al mismo tiempo el contenido del pie de página en línea con el diseño –>

<aside class=»fatfooter» role=»complementary»>

<div class=»first quarter left widget-area»>

<div class=»widget-container»>

<h3 class=»widget-title»>Primera área de widgets del pie de página</h3>

<p>Un área de widgets en el pie de página – usa plugins y widgets para ocuparla.</p>

</div><!– .widget-container –>

</div><!– .first .widget-area –>

<div class=»second quarter widget-area»>

<div class=»widget-container»>

<h3 class=»widget-title»>Segunda área de widgets del pie de página</h3>

<p>Un área de widgets en el pie de página – usa plugins y widgets para ocuparla.</p>

</div><!– .widget-container –>

</div><!– .second .widget-area –>

<div class=»third quarter widget-area»>

<div class=»widget-container»>

<h3 class=»widget-title»>Tercera área de widgets del pie de página</h3>

<p> Un área de widgets en el pie de página – usa plugins y widgets para ocuparla.</p>

</div><!– .widget-container –>

</div><!– .third .widget-area –>

<div class=»fourth quarter right widget-area»>

<div class=»widget-container»>

<h3 class=»widget-title»>Cuarta área de widgets del pie de página</h3>

<p> Un área de widgets en el pie de página – usa plugins y widgets para ocuparla.</p>

</div><!– .widget-container –>

</div><!– .fourth .widget-area –>

</aside><!– #fatfooter –>

</footer>

Paso 4 – Llenar el archivo de índice

El siguiente paso es configurar correctamente el archivo index.php, lo cual requiere un poco más de paciencia. Añade las funciones de PHP para que WordPress incluya el encabezado, el pie de página y la barra lateral.

Empieza con el siguiente código:

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Pero deja un espacio entre el include del encabezado de apertura y el include de la barra lateral. Este espacio es donde añadirás código extra que no va en estas áreas del sitio web.

A partir de aquí tienes más código que introducir. A continuación hay otro fragmento largo de código. Pégalo en este archivo y estarás listo para seguir.

Este último fragmento de código debería ir en el archivo Index.php debajo de la función get_header():

<div class=»two-thirds» id=»content»>

<article class=»post» id=»01″>

<h2 class=»entry-title»>Éste es el título de una entrada o página</h2>

<img class=»size-large» alt=»» src=»images/featured-image.jpg» />

<section class=»entry-meta»>

<p>Publicado el…</p>

</section><!– .entry-meta –>

<section class=»entry-content»>

<p>Éste es el contenido de la entrada. En una página de archivo, podría ser un fragmento de la entrada o podrías incluir todo el contenido.</p>

<h3>Imágenes en WordPress</h3>

<img class=»alignright» alt=»» src=»images/another-image.jpg» />

</section><!– .entry-content –>

<section class=»entry-meta»>

<h3>Etiquetas y categorías de las entradas</h3>

<p>En esta sección puedes mostrar información sobre las categorías y las etiquetas asociadas con tu entrada.</p>

</section><!– .entry-meta –>

</article><!– #01–>

</div><!– #content–>

Paso 5 – ¿Qué es lo siguente?

Tu siguiente trabajo es añadir los requisitos de estilo. Esto va mucho más allá del alcance de este tutorial, pero a partir de aquí necesitarás saber algo de CSS para continuar. Te recomendamos que contactes con un profesional si no eres un experto en este campo.

CSS requiere que comprendas el lenguaje de programación, en lugar de sólo copiar y pegar lo que otra persona ha hecho.

Conclusión

Debes recordar que ésta es la forma más básica de archivo de índice. Muchos de los temas de WordPress más avanzados podrían tener más archivos, con multitud de opciones de personalización para ofrecer funciones adicionales a los usuarios.

Si estás buscando algo específico, no dudes en ponerte en contacto con un profesional.

CompartirloShare on facebook
Facebook

Artículo de carlito / WordPress

Plugins y herramientas de WordPress imprescindibles

DinaHosting - Instalar y ejecutar un sitio WordPress es fácil con DinaHosting. Y también recibirás un precio más bajo
Genesis Framework y Themes - Usamos un tema de WordPress de Genesis por StudioPress en todos nuestros sitios web
Gravity Forms - Si necesita crear formas simples o complejas hermosas, recomendamos Gravity Forms - lo usamos
OptinMonster - La mejor manera de aumentar su lista de correo electrónico gracias a OptinMonster innovadora forma de captura de correo electrónico
MailChimp - El software de email marketing más sencillo disponible - y puede configurar sus campañas de correo electrónico en español con MailChimp

¿Quieres crear un sitio de WordPress? Recomendamos el uso de dinahosting

wordpress

DinaHosting -- Usted recibirá un un precio más bajo a través de este enlace. Es un alojamiento barato, pero confiable para tu blog.

dinahosting

Ofrece una instalación de WordPress en un solo clic y sus precios de alojamiento web son los más bajos de la industria. Nuestra recomendación para alojar un blog de WordPress.

ENTRADAS RECIENTES

  • 7 razones para elegir WooCommerce en lugar de Shopify
  • Los 5 mejores sitios para vender tus fotos online
  • Cómo funciona la herramienta de análisis de riesgos de Shopify
  • Cómo comprar online de forma segura: 5 estrategias clave
  • ¿Qué son los asides en WordPress y cómo se usan?

PÁGINAS POPULARES

  • Análisis de SiteGround.es
  • Códigos de cupones de web hosting
  • Cómo crear un blog con WordPress
  • Cómo hospedar un sitio web
  • Contacto
  • Emprendedor Innovador – Iniciar un negocio en línea
  • Guía de web hosting completa para sus sitios
  • Hospedaje Web México
  • Recursos para iniciar un negocio en línea
  • Web Hosting España
20% de descuento
Elegant Themes

Cupón Elegant Themes

Utilice este cupón especial de Elegant Themes para recibir un descuento del 20% en el plan acceso anual de Temas WordPress ofrecido por ElegantThemes.com!
Reclama esta oferta

© Derechos de autor 2017 Emprendedor Innovador · Reservados todos los derechos

  • ¿Está haciendo una de estas 8 errores con su sitio de WordPress?
    Descarga nuestra guía educativa sobre los 8 errores comunes que cometen los nuevos bloggers con WordPress y cómo solucionarlos. ¡Es gratis!