Share
La última vez que usamos nuestro marco como tema secundario, creamos un tema totalmente nuevo que depende del marco. Hoy vamos a utilizar nuestro framework como repetitivo, copiando la carpeta y editando directamente..
Ahora, algunas personas pueden cuestionar el razonamiento detrás de esto, y eso es justo. ¿Por qué cambiaríamos el marco mismo? Mi intención original para este marco de trabajo era en realidad ser solo una plantilla, algo que podía copiar, pegar y modificar, al igual que la placa de plantilla de HTML5. Debido a esto, la mayoría de las veces uso mi repetitivo, en realidad lo copio y pego..
También hay algún mérito a este método. Si, por ejemplo, estás tratando con un diseño muy diferente estructuralmente, terminarás reescribiendo la mayoría de las páginas de la plantilla de todos modos. El principal razonamiento detrás de mí al crear el marco fue reutilizar mi CSS y otras funciones más comunes. Simplemente siguió el ejemplo para crear un encabezado, pie de página, índice, etc., para que el tema funcione. Mientras intentaba hacerlo lo más genérico posible, también quería mantenerlo ligero. Debido a eso, no hay un motor para inyectar código en varias partes del tema como en Themaic u otros marcos más grandes, que prefiero. Como dije en la Parte 1, no quería crear una API completamente nueva para que las personas aprendan cuando ya existe la API de WordPress.
Antes de comenzar, deberíamos delinear algunos objetivos para utilizar el marco como una placa de repetición. La primera es que solo debemos cambiar los archivos que necesitan ser cambiados. Recuerda, fuera de nuestro encabezado y pie de página, intentamos hacer las otras páginas lo más genéricas posible. Eso significa que si se puede usar CSS para organizar lo que ya está allí, podríamos usarlo ya que es menos laborioso (edita-sabio) para nosotros. También debemos tener en cuenta lo que hay en nuestros archivos de temas. Tenemos 2 áreas de widgets (una en el pie de página) y algunas funciones diseñadas para su reutilización. Deberíamos utilizarlos si podemos. Dicho esto, aquí hay un pequeño recordatorio de con qué empezamos:
Lo primero es lo primero: copiemos y paguemos nuestro marco y lo preparemos para su uso. Acabo de copiar mi / wp-boilerplate / folder y le cambié el nombre a / wp-boilerplate-copy / (ahí voy otra vez con los nombres de las creatividades). Como siempre, modificaremos nuestro archivo style.css:
/ * Nombre del tema: Copia del tema URI del marco: http: //example.com/ Descripción: Copia de su tema del marco Autor: Your Name Autor URI: http: //your-site.com/ Versión: 1.0 * /
Recuerda, no necesitamos el modelo línea esta vez porque esta es una copia directa del marco.
Antes de sumergirnos en el CSS, consideremos qué cambios estructurales queremos hacer. Me gustaría hacer algunas cosas para el diseño general del sitio. El primero es colocar la navegación sobre el nombre del sitio y la barra de búsqueda (que también agregaremos). También me gustaría hacerlo para que las barras de encabezado y pie de página extiendan el ancho de la pantalla del usuario, a la vez que mantengan el contenido en un ancho establecido de 960px. Este es el producto final en el que trabajaremos:
Lo que haremos a continuación es modificar el encabezado. Aquí está todo en header.php después de etiqueta:
">
Debes notar un par de cosas. Cambié el ID del contenedor principal a "wrapper" y agregué una clase "contenida". Esto es para que no confundamos los dos. El #wrapper todavía se aplica a toda la página, pero como queremos que el encabezado y el pie de página extiendan todo el ancho de la pantalla del usuario, debemos eliminar la definición de ancho. Sin embargo, como todavía queremos que el contenido real se mantenga en nuestro ancho original de 960 píxeles, debemos crear una clase separada que usaremos para varias secciones de contenido. Aquí es cómo se ve el CSS para #wrapper y .contain:
#wrapper text-align: left; fondo: #FFFFFF; color: # 333333; .contain width: 960px; margen: 0 auto;Como puede ver, hemos movido la información correspondiente al ancho y la alineación a .contain. Ahora modificaremos footer.php para que coincida con header.php:
Accentsconagua