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

Diseño de un tema de Wordpress requiere algunos conocimientos de HTML.

 

Diseño Wordpress

Muchos temas de Wordpress utilizan un formato estándar, con un cabezazo largo horizontal en la parte superior, y debajo de ella un área de contenido con uno o más recuadros. Sin embargo, esto no tiene por qué ser el caso y las plantillas de Wordpress puede tomar cualquier forma o tamaño. ¿Por qué no utilizar un tema de cuadrícula para agregar variedad a su sitio y que lo distinguen de los demás?Cada sección de la red puede ser el hogar de una función distinta en el sitio, organizado con el código HTML y CSS.

 

Ir a starkerstheme.com y descargar el archivo. Zip. Cuando la descarga se haya completado, extraiga el archivo en su computadora. Este es un tema de "desarrolladores" blanco que se puede utilizar para diseñar sus propios temas.

 

Abra "style.css" y agregue el código siguiente en una nueva línea:

 

# Gridrow {display: block; width: 100%}

 

# Gridcell {width: 33%; float: left; frontera: 1px solid;}

 

Copia y pega el código de abajo en el "404.php", "archive.php", "category.php", "index.php", "search.php", "single.php", "tag.php" y archivos "page.php", justo debajo de la "get_header ();" line:

 

div id = "gridrow"

 

div id = row "gridcell" 1 célula 1/div

 

div id = row "gridcell" 1 célula 2/Div

 

div id = row "gridcell" 1 célula 3/div

 

/ Div

 

div id = "gridrow"

 

div id = row "gridcell" 2 células 1/div

 

div id = row "gridcell" 2 células 2/Div

 

div id = row "gridcell" 2 células 3/div

 

/ Div

 

div id = "gridrow"

 

div id = row "gridcell" 3 células 1/div

 

div id = row "gridcell" 3 células 2/Div

 

div id = row "gridcell" 3 células 3/div

 

/ Div

 

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

 

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

 

Coloque el contenido principal del blog en la celda que desee. Para ello, sustituir la etiqueta celda con el "loop" dentro de cada uno de los archivos que tenga abiertos. El bucle es todo lo que entre y que incluye la línea de salida con y terminando con "php if (have_posts ()?" "Php ENDWHILE;?" Guardar todos los archivos cuando haya terminado..

 

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 atributos "ancho" de la línea "# gridcell".

 

Consejos y advertencias

Si se aumenta el tamaño del borde de las celdas o agregar relleno, cabrán más 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 repita hasta que la rejilla se muestra correctamente.