Share
Cuando la mayoría de la gente piensa en WordPress, piensa en blogs. Si miras la página principal de WordPress.org, también hablan mucho sobre los blogs. Lo que no te dicen es que WordPress también se duplica como un CMS muy poderoso; Sólo tienes que configurarlo correctamente. También puede ser un poco difícil configurarlo y trabajar de la forma que desee. Ahí es donde entro yo. En esta serie de tutoriales de 3 partes, te guiaré por los tres pasos para usar WordPress como CMS.
Este tutorial incluye un screencast disponible para miembros Tuts + Premium.
La primera parte será el diseño de un diseño simple en Photoshop. La segunda parte incluirá la codificación del sitio web como una plantilla HTML estática, y la última parte lo guiará a través de la configuración de WordPress y la aplicación de nuestro nuevo tema a su sistema de plantillas..
Si eres un desarrollador web experimentado, estas dos primeras partes pueden ser maní para ti, pero hazte un favor y solo echa un vistazo al contenido. Nunca se sabe, puede elegir algo nuevo o una forma diferente de hacer las cosas..
Probablemente estés harto de leer así que ensuciémonos las manos!
Abre Photoshop y crea un nuevo lienzo en blanco. Por lo general, solo elijo 1024 x 768 del menú desplegable.
He seguido adelante y he creado una paleta de colores rápida y la he bloqueado como una capa superior. De esta manera puedo consultarla sin tener que preocuparme por perderla en la refriega..
Completa tu fondo con el color más claro y prepárate para hacer algunas guías..
Vamos a crear guías para que podamos pre-diseñar el aspecto de nuestro sitio antes de comenzar a colocar elementos gráficos. Si no tienes reglas activadas, sigue adelante y pulsa ⌘-R para activarlas..
Si pasa el mouse sobre la regla, haga clic y aléjese, el cursor cambiará y habrá una línea horizontal o vertical detrás del mouse. Esta es una guía. Vamos a crear en.
Vamos a diseñar la barra lateral, el encabezado y la sección de contenido principal. Haz que tus guías se vean como los míos, o algo así como los míos. Presentamos los bordes de la barra lateral y el relleno que queremos incluir..
Cada sitio necesita un logo. El logotipo se va a colocar justo encima de la barra lateral. Si tiene un logotipo, colóquelo allí ahora, de lo contrario, vamos a crear un logotipo de bocadillo. ¿Por qué? Me gustan las burbujas del discurso.
Agregué un poco de sombra sólida directamente debajo de ella para un poco de estilo. Vamos a darle un nombre a nuestro sitio web. Voy a llamarlo Gear'd y usaré un pequeño ícono de engranaje..
Nuestros usuarios necesitan una forma de navegar por nuestro sitio. Vamos a colocar nuestra navegación sobre nuestro contenido principal y alinearlo hacia la derecha. Saque nuestra herramienta de texto y escriba algunos elementos de navegación.
Vamos a fingir que estamos vendiendo un servicio. Digamos que gear'd es una aplicación web y los usuarios pueden registrarse para comprar diferentes niveles de membresía.
Nuestra navegación incluirá Acerca de, Planes y precios, Preguntas frecuentes y Contacto. Queremos que el usuario sepa en qué página se encuentra actualmente, por lo tanto, hagamos un estado activo y activo para nuestros botones de navegación..
Para esto acabo de crear un cuadrado redondeado con una opción de texto de color más claro. El estado de desplazamiento tiene un color claro, solo un poco más grande que el color de fondo..

Nuestra aplicación web ofrece algunos niveles de membresía que el usuario debe poder navegar. Realmente no queremos tener 100 elementos diferentes de navegación principal porque es feo. Aquí es donde entra la barra lateral.
Permite llevar el mismo estilo que usamos a los estados de navegación principal, desplazamiento y estado activo y aplicarlos a la barra de navegación lateral. La barra lateral de navegación mantendrá nuestra navegación secundaria para la página principal en la que estamos. Esto incluye información sobre precios y registro, o diferentes áreas de contacto o contacto..
La página se ve un poco vacía, vamos a agregar algo de contenido..
Hemos agregado un poco de texto de encabezado y un mini encabezado debajo. Solo otra indicación visual de donde el usuario está actualmente.
A continuación, agregamos una caja redondeada en todo el ancho de nuestro área de contenido y lanzamos una imagen dentro de ella..
Por último, hemos añadido nuestro texto del cuerpo..
Nuestro sitio está empezando a reunirse muy bien. Hemos agregado todos nuestros elementos menos uno, nuestro pie de página..
Nuestro pie de página mantendrá nuestros derechos de autor, así como algunas páginas más que no requieren realmente un espacio de navegación principal.
Agregue un salto de línea para dividir la página un poco y luego coloque texto de copyright y alinéelo hasta la guía de la izquierda.
Los términos y condiciones y la política de privacidad son algunas de las páginas a las que desea que el usuario pueda acceder, pero que no necesariamente deben ser desechadas. La belleza de un pie de página es que aún podemos proporcionarle al usuario esta información, pero esconderla bien: P
Acabamos de crear un sitio simple que ahora podemos convertir en una plantilla HTML y CSS. Siéntase libre de condimentar la plantilla, pero por el simple hecho de que sea rápido y fácil de usar, vamos a continuar desde aquí..
Accentsconagua