Share
Hemos diseñado nuestro sitio y lo convertimos en un archivo HTML estático en los dos tutoriales anteriores. En la última parte de esta serie, configuraremos WordPress como un CMS y convertiremos nuestro archivo HTML a una plantilla compatible con WordPress..
Este tutorial incluye un screencast disponible para miembros Tuts + Premium.
Dirígete a WordPress.org y descarga la última versión de WordPress.
Descomprima el archivo y mueva todos los archivos dentro de la carpeta de WordPress a su servidor local o web.
Cree una base de datos MySQL en blanco y recuerde toda su información de inicio de sesión, la necesitará en aproximadamente 3 segundos.
Abra su navegador y diríjase a la carpeta que contiene todos sus archivos de WordPress. Se le pedirá que cree un archivo de configuración. Hacer clic Crear archivo de configuración
Ahora necesitamos ingresar la información de nuestra base de datos MySQL y ejecutar la instalación.
Si todo salió bien con la instalación, se le presentará su nuevo inicio de sesión. Copie su nueva contraseña e inicie sesión en el backend de WordPress. Una vez que inicie sesión en el backend, se le sugerirá que cambie su contraseña. Hacerlo ahora!
Ahora que estamos configurando nuestro nuevo usuario, podemos comenzar a configurar WordPress para que se use como un CMS. Primero vamos a habilitar los enlaces permanentes para hacer que nuestros caminos se vean bien. Desplazarse sobre Ajustes y haga clic en la flecha de la derecha para desplegar algunas opciones más y haga clic en Enlaces permanentes.
Vamos a utilizar las opciones de Día y nombre, así que seleccione esa opción y presione Guardar cambios.
WordPress nos proporciona una publicación ficticia, así como una página ficticia, por lo que vamos a eliminarlos y agregar las páginas que necesitemos..
Flotar en Mensajes y haga clic en la flecha para desplegar las opciones. Haga clic en Editar. Si te mueves sobre Hello World! Aparecerán algunas opciones de publicación más, simplemente haga clic en Borrar y luego confirmar la acción.
Nota: este paso no es necesario, solo quiero mantener todo limpio y ordenado.
Ampliar la Páginas opciones y haga clic en editar y luego eliminar la Acerca de página.
En el Páginas barra lateral izquierda, haga clic en Añadir nuevo para que podamos agregar nuestras paginas.
Complete el título y el contenido que desee en su página y luego, una vez que haya terminado, presione Publicar en el lado derecho de la página.
Si no quieres que la página sea visible puedes golpear Guardar borrador para trabajar en ello más tarde.
Queremos crear algunas páginas secundarias de Fijación de precios y registro, por lo que cuando llegues a crear las páginas, necesitamos cambiar una opción en la página del editor de páginas..
En la captura de pantalla anterior, he resaltado la opción que se debe cambiar. Queremos que el Plan Barato sea una página secundaria de Precios y Registro, por lo que le diremos a WordPress que Precios y Registro es el padre del Plan Barato. Esto nos permitirá crear una navegación específica para nuestro tema..
Una vez que haya creado todas sus páginas, la sección Editar de Páginas debe verse como la captura de pantalla a continuación.
Todo lo que necesitamos configurar ahora mismo se ha configurado, por lo que ahora podemos pasar a convertir nuestro archivo HTML a una plantilla de WordPress.
Abre tu editor y navega a tu carpeta raíz de WordPress.
Queremos navegar a wp-content> temas.
Vamos a eliminar el tema clásico. Nuevamente, esto es solo para mantener todas nuestras carpetas limpias y ordenadas. Así que borra el clásico y el duplicado por defecto. Renombrar por defecto a wordpress_cms.
Vaya a la carpeta wordpress_cms y elimine rtl.css y la carpeta de imágenes.
A continuación, abre style.css y elimine todo menos la sección principal de comentarios en la parte superior del archivo.
Hemos creado nuestro propio style.css Archivo que vive dentro de alguna carpeta. Esta style.css El archivo le dice a WordPress algo de información sobre nuestra plantilla, así que a pesar de que tenemos nuestro style.css archivo, todavía tenemos que mantener este.
Editar el style.css archivo para ver algo similar al código de abajo. Cambiar mi información para que se ajuste a su información!
/ * Nombre del tema: WordPress CMS URI del tema: http://tud-site.com Descripción: Uso de WordPress como CMS. NetTuts + Tutorial! Versión: 1 Autor: Matt Vickers Autor URI: http://envexlabs.com/ * /
Guarda este archivo y vuelve a tu navegador. Ampliar la Apariencia barra lateral y haga clic en Temas. Deberías ver nuestro tema de WordPress CMS como una opción. Hacer clic activar Para hacer que WordPress use nuestro nuevo tema..
WordPress ya está listo para aceptar nuestro sitio precodificado!
Si navega a la raíz de WordPress en su navegador, debería ver la página principal de WordPress sin estilos aplicados.
Copie las carpetas inc e img y todo su contenido en WordPress_cms.
Necesitamos decirle a WordPress que queremos usar nuestras hojas de estilo en lugar de las antiguas, así que abreos header.php
Vamos a eliminar algún código innecesario. He comentado las áreas que necesita eliminar, así que consulte el código a continuación.
><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?> >/ ">
También puedes borrar de la etiqueta del cuerpo. Deberíamos tener un archivo de encabezado bastante simple ahora, así que agreguemos nuestros 2 archivos css a nuestro tema.
Justo debajo de la etiqueta del título vamos a utilizar la etiqueta de enlace normal.
Notarás que estamos usando una función llamada bloginfo (). Esta función se utiliza para obtener información sobre su blog actual. Es posible que movamos servidores o cambiemos la estructura de carpetas en el futuro, por lo que no queremos poner rutas duras a nuestras hojas de estilo, por lo que pasamos un valor de template_url que devuelve la ruta de nuestra plantilla actual. Esto es muy poderoso si planeas crear una plantilla que otras personas usarán porque no sabes cómo está configurado su WordPress.
Si carga el sitio, debería ver que algunos de nuestros estilos predeterminados de nuestra hoja de estilos se aplican al sitio..
A continuación, abre footer.php y borra todo entre los comentarios y wp_footer ().
Además, abre barra lateral.php y borra todo despues de los comentarios. Ahora estamos listos para copiar nuestros contenedores HTML a nuestros archivos de WordPress.
Abre el index.html archivo de nuestro tutorial anterior y copiar todo entre el
etiquetas Pega este código en header.php.Para facilitar las cosas, eliminemos todas las etiquetas y el contenido dentro de cada uno de los contenedores para que solo queden los divs de contenedor.
Aquí es donde puede ser un poco complicado. Tenemos que abarcar este código entre 4 archivos. He comentado dónde debe ir cada pieza, así que copie y pegue cada sección en el archivo al que pertenece..
Bien, solo para asegurarnos de que todo funciona como debe, verifiquemos que cada archivo contenga el contenido adecuado. Sus archivos deben verse como los ejemplos a continuación.
header.php
><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?> barra lateral.php
footer.php
Si sus páginas se ven bien, sigamos adelante. Si no lo hacen, haz que se vean como los ejemplos anteriores.
Si regresas a tu navegador y lo agregas al final de la dirección, pulsa Intro. Esto debería llevarte a tu página acerca de.
Vamos a comenzar con la creación de nuestros elementos de encabezado y navegación, así que si aún no lo tiene abierto, ábralo. header.php
Dentro de header_container necesitamos agregar nuestra etiqueta con el logotipo h1 #.
Estamos usando el bloginfo () Funciona de nuevo, pero esta vez estamos agarrando el nombre de nuestro blog.
Si actualizas deberías ver nuestro impresionante logo! Ahora tenemos que añadir nuestra navegación..
En lugar de la codificación rígida en nuestros elementos de navegación, vamos a utilizar una función de WordPress integrada llamada wp_list_pages (). Esto nos permitirá controlar qué elementos de la página queremos mostrar, así como crear enlaces a cada una de esas páginas..
Estamos pasando algunas opciones a la función para que podamos hacer que WordPress haga una lista de las páginas exactamente como queremos.
La primera opción que estamos enviando es title_li. Por defecto, WordPress genera un título li que muestra las páginas. No queremos esto, así que simplemente enviamos un valor en blanco con él..
La segunda opción es la profundidad. De nuevo, de forma predeterminada, WordPress mostrará una lista de cada página que se incluye, esto incluye páginas secundarias. No queremos que esto suceda, por lo que le pasamos una variable de 1, por lo que WordPress solo mostrará las páginas de nivel superior.
El valor final es incluir. No queremos mostrar todas las páginas que hemos creado, solo queremos mostrar Acerca de, Precios, Inscripción y Contacto. Estamos pasando los ID de cada página que queremos mostrar. Las identificaciones del ejemplo no coincidirán con las identificaciones de su página, así que ASEGÚRESE DE QUE LOS CAMBIE A LAS IDENTIFICACIONES
Para obtener el ID de las páginas navegue a la sección de edición de la página. Cuando se desplaza sobre el enlace de la página, se puede encontrar la ID en el enlace. es decir: wp-admin / page.php? action = edit & post = 15
Todas las opciones disponibles se pueden encontrar en http://codex.WordPress.org/Template_Tags/wp_list_pages
Si actualizas la página, deberíamos tener una buena navegación de aspecto.
Tenemos suerte, podemos usar esta función exacta para cuidar nuestra barra lateral, así como nuestra navegación de pie de página. Solo tenemos que hacer algunos ajustes a las opciones que le enviamos para satisfacer cada necesidad..
Abrir barra lateral.php y escribe un poco de código dentro de nuestra barra lateral_contenedor.
post_parent) wp_list_pages ('title_li = & child_of ='. $ post-> post_parent); ?>
Solo queremos mostrar nuestra barra de navegación lateral si la página actual es una página secundaria. Hacemos esto verificando si la página actual tiene un valor asignado a post_parent. Si la página no es un niño, este valor será 0.
La información sobre los mensajes y las páginas se encuentra en el $ post variable. Si imprime_r ($ publicación) podrá ver toda la información sobre la publicación que está disponible para usted..
Ahora que estamos revisando una publicación para padres, debemos enumerar a todos los hijos de nuestros padres. Para hacerlo, pasamos una variable de child_of y pasamos la ID de post_parent actual.
Si nuestra identificación de padres es 5 estamos diciendo wp_list_pages () para enumerar cada página que tiene un ID de post_parent de 5. Es muy útil cuando se trata de navegación multinivel.
A continuación, vamos a armar rápidamente nuestro pie de página y luego pasaremos a mostrar algo de contenido en nuestras páginas. Esto reunirá a todo el sitio y podemos comenzar a darle los toques finales a nuestro nuevo sitio basado en WordPress.
Abrir footer.php y por última vez agregar el wp_list_pages () función.
Copyright Gear'd © 2009
Esta función es exactamente igual a nuestra navegación de encabezado, pero en lugar de usar include estamos utilizando exclude para eliminar todos los elementos de navegación principal actuales de nuestra navegación de pie de página.
Las identificaciones del ejemplo no coincidirán con las identificaciones de su página, así que ASEGÚRESE DE QUE LOS CAMBIE A LAS IDENTIFICACIONES
Un último archivo de plantilla para ajustar antes de que hayamos terminado. Abrir post.php y borra todo lo que hay entre get_header () y get_sidebar ().
Aquí es donde vamos a agregar nuestro content_container
Cuando se trata de mostrar su publicación y contenido de la página, WordPress utiliza un conjunto de funciones especiales llamado The Loop. En pocas palabras, toma su contenido y lo formatea, preparándolo para ser mostrado al usuario final.
Dentro de nuestro contenedor de contenido vamos a agregar una sentencia if y un bucle while.
Primero verificamos si tenemos alguna publicación, si lo hacemos, repasamos cada una de las publicaciones y configuramos varias funciones que podemos usar para mostrar el contenido..
Dentro de nuestro bucle while vamos a agregar todo nuestro contenido restante.
post_parent):?>post_parent); ?>
Estamos usando algunas funciones nuevas para mostrar el contenido de nuestra página. Lo bueno de WordPress es que muchas de las funciones usan inglés simple para las convenciones de nombres..
Necesitábamos el título de la página por lo que usamos el título() para mostrarlo. También podemos tomar el título de cualquier publicación o página usando get_the_title ($ post_id) y pasar la identificación de la entrada, ya que es única variable.
Solo queremos mostrar el segundo encabezado si estamos en una página secundaria, por lo que usamos el if ($ post-> post_parent) de nuevo para comprobar si estamos en una página secundaria, y si lo estamos, obtenemos el título de ese post principal utilizando obtener_el_título ().
Por último, pero no menos importante, usamos el contenido() para visualizar cualquier contenido que tenga la página.
Espera, nuestra barra lateral parece estar en el lugar equivocado de la página, así que toma get_sidebar () y moverlo por debajo get_header (). Ahora nuestra barra lateral viene antes que nuestro contenido..
Atar los extremos sueltos
Si carga la raíz de su instalación de WordPress en su navegador, debe recibir un error de No encontrado.
Esto se debe a que, de forma predeterminada, la página principal de WordPress es una lista de todas sus publicaciones. No estamos utilizando WordPress para los blogs, por lo que debemos decirle a WordPress que use una de nuestras páginas en su lugar.
Vuelve a tu backend de WordPress y carga la Leyendo página en Ajustes. La primera opción es Pantallas de portada y la opción seleccionada debe ser Sus últimas publicaciones. Queremos seleccionar una página estática y usar el menú desplegable para cambiar nuestra página de inicio a cualquier publicación que desee. Para este ejemplo voy a apuntarlo a nuestra página Acerca de.
Guarde los cambios y vuelva a cargar la página raíz en su instalación de WordPress. Debería redirigirte a la página Acerca de..
Lo siguiente que notará es que nuestra navegación ya no muestra un estado activo a pesar de que estamos en la página adecuada. Esto se debe a que para nuestra página estática estábamos usando una clase de activos. wp_list_pages () asigna un valor diferente para los estados activos, por lo que solo necesitamos agregar algunas clases a nuestras hojas de estilo. Las 2 clases que vamos a añadir son: .current_page_item y .current_page_parent.
ul.nav li.active a, ul.nav li.current_page_item a, ul.nav li.current_page_parent a #sidebar_container ul li.active a, #sidebar_container ul li.current_page_item aContinúe y use el código anterior para agregar las clases a nuestra navegación superior y navegación lateral. Actualice la página y debería tener un estado activo para cualquier página en la que se encuentre actualmente.
Dos cambios más y podemos terminar esto..
Nuestra página de Precios y Registro es solo un título para sus páginas secundarias, pero WordPress lo trata como su propia página. Queremos redirigir al usuario a la página del plan gratuito cuando hacen clic en Precios y registro..
Una de las muchas cosas buenas de WordPress es su capacidad de complemento. Hay 1000 de complementos que están escritos para WordPress que agregan una funcionalidad infinita que no está disponible de forma inmediata. Vamos a instalar un complemento de redirección que podemos utilizar para redirigir al usuario..
El complemento que vamos a utilizar se puede descargar aquí: http://WordPress.org/extend/plugins/redirect/. Descargue el complemento y mueva la carpeta de redirección a wp-content / plugins.
Ahora tenemos que activar el complemento en el backend de WordPress para poder usarlo. En tu backend haz click en Complementos y deberías ser redirigido a una página con todos los complementos disponibles.
Encuentra nuestro plugin de redirección y pulsa Activar. Nuestro plugin ahora está activado..
Cada complemento funciona de manera diferente, así que asegúrese de leer las instrucciones de cada uno antes de comenzar a usarlos. Nuestro complemento de redireccionamiento usa campos personalizados para indicar a WordPress qué publicación queremos redirigir y dónde. Ir Páginas y haga clic en editar debajo de nuestra página de Precios y Inscripción.
Justo debajo del área de edición del editor se encuentra la sección Campos personalizados. La primera entrada que vamos a dar es un valor de redirección, por lo que WordPress sabe que queremos redirigir y la segunda entrada será la dirección de nuestra página de Plan gratuito. Una vez que haya terminado de golpear Añadir campo personalizado y asegúrate de Página de actualización en la parte superior derecha.
Si regresa a su navegador y hace clic en Precios y registro, será redirigido a la página Plan gratuito..
Clasificando a todos
Nuestra navegación de precios y registro parece un poco fuera de orden. Nuestro plan gratuito se encuentra en último lugar cuando debería estar en la parte superior. Podemos establecer el orden posterior directamente en la copia de seguridad, así que cargue la sección de Páginas principales y coloque el cursor sobre Plan libre y haga clic en Edición rápida.
El campo que queremos actualizar es Orden. Cambie el valor de 0 a 1 y presione Actualizar página. Haga lo mismo con los planes Barato (orden 2) y Costoso (orden 3) actualizando el orden en consecuencia.
Actualiza nuestro navegador para ver las nuevas actualizaciones..
Esto también se aplica a nuestra navegación de encabezado y pie de página, por lo que si no te gusta el orden en el que están, siéntete libre de cambiarlos..
Me gustan las cosas personalizadas
Los campos personalizados son impresionantes. Nos permiten pasar información específica para cada publicación. Podemos agregar imágenes a nuestra publicación usando el Cargador de medios, pero para este ejemplo usaremos campos personalizados para pasar información a nuestro archivo page.php.
Abre tu página Acerca de en el editor de páginas de WordPress.
Vamos a usar el Cargador de medios para cargar una imagen para usar en nuestro encabezado, así que justo al lado Subir / Insertar haga clic en el icono de la imagen.
Voy a subir el banner.gif que habíamos usado antes, así que haz clic en Selecciona archivos y encontrarlo en tu computadora.
Una vez que haya cargado el archivo, se le presentará cierta información sobre su imagen. Cerca de la parte inferior de esta ventana modal, debería ver una entrada llamada Enlace URL y la ruta a su imagen. Queremos copiar este url. Si esta entrada está en blanco, puede hacer clic en el botón URL del archivo justo debajo y actualizará la entrada.
Una vez que haya copiado esta ruta, podemos cerrar esta ventana y dirigirnos a la sección Campos personalizados. La primera entrada que vamos a utilizar es header_image y el segundo valor es la ruta a nuestro archivo.
Añade tu campo personalizado presionando Añadir campo personalizado y Página de actualización en la esquina superior derecha.
Abrir page.php y encuentra el header_image div.
Queremos verificar si hay alguna imagen que deba mostrarse y si la hay, tomaremos la ruta y mostraremos la imagen..
ID, 'header_image', true); si ($ imagen):?>
Primero usamos get_post_meta () Asignar el camino de nuestra imagen a la variable. $ imagen.
El primer argumento que enviamos a get_post_meta () es el ID de la página en la que estamos. El segundo valor es el nombre del campo personalizado que en nuestro caso es header_image. El último argumento le dice a WordPress que solo queremos devolver 1 campo personalizado.
Entonces verificamos si $ imagen esta vacio. Si no hay un campo personalizado llamado header_image, no mostramos la imagen, sino que también mostramos la división header_image así como la imagen dentro de ella..
Hacemos eco del valor de $ image como fuente de imagen para mostrar nuestra imagen.
Actualiza tu navegador y ve el Contacto página. No deberías ver ninguna imagen. Si carga la página Acerca de, debería ver nuestra imagen y la caja redondeada azul que la contiene..
Eso es. ¡Lo hicimos! Tómate un momento para felicitarte por completar todo el tutorial y lidiar con mi estilo de enseñanza con suerte decente.
Apenas hemos desechado la superficie de WordPress, pero te he dado una base sólida para comenzar a profundizar en WordPress.
Si desea continuar aprendiendo qué tipo de funciones tiene WordPress para ofrecer, le sugiero que eche un vistazo al Códice de WordPress..
Cuando tiene problemas o está tratando de lograr algo que WordPress no ofrece, busque en Internet una búsqueda rápida. Es probable que alguien haya encontrado el mismo problema y el 99% de las veces haya un complemento para solucionarlo!
Una vez más, gracias por leer el tutorial! Espero que haya aprendido mucho y ahora pueda comenzar a ofrecer a sus clientes un CMS sólido para facilitarle la vida y la de ellos..
Accentsconagua
