Cómo diseñar un tema de WordPress con una rejilla

Muchos temas de Wordpress utilizan un formato estándar, con una cabecera larga horizontal en la parte superior, y debajo de ella un área de contenido con una o más barras laterales. Sin embargo, esto no tiene que ser el caso y las plantillas de Wordpress puede tomar cualquier forma o tamaño. ¿Por qué no usar un tema de la red para añadir variedad a su sitio y que lo distinguen del resto? Cada sección de la red puede ser el hogar de una función distinta en el sitio, organizado usando el código HTML y CSS.

Instrucciones

1 Ir a starkerstheme.com y descargue el archivo .zip. Cuando se completa la descarga, extraer el archivo en el ordenador. Este es un tema en blanco "desarrolladores" que se puede utilizar para diseñar sus propios temas.

2 Abrir "style.css" y añadir el código siguiente en una nueva línea:

GridRow {display: block; width: 100%} gridcell {width: 33%; float: left; border: 1px solid;}

3 Copia y pega el código de abajo en la "404.php", "archive.php", "category.php", "index.php", "search.php", "single.php", "tag.php" y los archivos "page.php", justo debajo de la "get_header ();>?" línea:

<Div id = "GridRow">

<Div id = "gridcell"> fila 1 celda 1 </ div>

<Div id = "gridcell"> fila 1 celda 2 </ div>

<Div id = "gridcell"> fila 1 celda 3 </ div>

</ Div>

<Div id = "GridRow">

<Div id = "gridcell"> fila 2 celda 1 </ div>

<Div id = "gridcell"> fila 2 celda 2 </ div>

<Div id = "gridcell"> fila 2 celda 3 </ div>

</ Div>

<Div id = "GridRow">

<Div id = "gridcell"> fila de 3 celdas 1 </ div>

<Div id = "gridcell"> fila 3 celda 2 </ div>

<Div id = "gridcell"> fila de 3 celdas 3 </ div>

</ Div>

Esto crea un diseño de cuadrícula de tres por tres, y ambas células marcadas para que pueda encontrar fácilmente en el código. Guarde estos archivos, pero mantenerlos abiertos.

4 Sustituir las etiquetas de células con la información que desea en cada celda. Por ejemplo, es posible que desee el logotipo de su sitio web en la parte superior izquierda, algunos botones de navegación en la parte superior central, y su información de derechos de autor en la fila inferior.

5 Coloque el contenido principal del blog en la celda de la cuadrícula que desea. Para lograr esto, vuelva a colocar la etiqueta de celda con el "bucle" dentro de cada uno de los archivos que tenga abiertos. El bucle es todo lo que entre e incluyendo la línea que comienza con y terminando con "<? Php if (have_posts ()?" "<? Php endwhile;?". Guarde todos los archivos cuando haya terminado.

6 Añadir cualquier otro estilo que desee mediante la adición de código CSS en el archivo "style.css". También puede cambiar el tamaño de las celdas de la cuadrícula mediante la alteración de la "altura" y los atributos "ancho" de la línea "#gridcell".

Consejos y advertencias

• Si aumenta el tamaño del borde de las celdas o agregar relleno, que ya no caben en la pantalla horizontalmente. Para solucionar este problema, reducir el "ancho" de la línea "#gridcell" en "style.css" un 1 por ciento. Si el problema persiste, reducir en un 1 por ciento y repetir hasta que la cuadrícula muestra correctamente.