Establecer un flujo de trabajo de Dreamweaver CC y WordPress

Crecí como un nerd de la química y todavía recuerdo vívidamente la emoción de rociar limado de hierro sobre mi mini quemador Bunsen para ver los fuegos artificiales brillantes. La idea de que dos elementos pudieran combinarse para un efecto tan espectacular fue alucinante para mí. Experimenté la misma alegría sináptica cuando descubrí cómo WordPress y Dreamweaver se hicieron el uno para el otro.

WordPress es, sin lugar a dudas, el CMS más popular en uso hoy en día. Con la mayor parte del mercado (47.5% de los 10k sitios principales, según BuiltWith.com), una amplia gama de plantillas y complementos, sin mencionar una facilidad de uso en constante evolución, WordPress ofrece una ruta directa a un amplio espectro de destinos de sitios. Pero, ¿qué pasa si no quieres ir exactamente a donde una plantilla de WordPress dice que deberías ir? ¿Qué pasa si su cliente, o su propio sentido de diseño personal, requiere una presencia en línea personalizada? Entonces, déjame presentarte al mejor socio de diseño y codificación que WordPress no sabía que tenía: Dreamweaver CC.

Soy un gran fan del flujo de trabajo de Dreamweaver / WordPress y he combinado estas dos herramientas eléctricas elementales durante años para construir sitios para clientes que necesitan capacidades de gestión de contenido junto con un aspecto personalizado. Creo que Dreamweaver es adecuado para la tarea, no solo como motor de diseño para perfeccionar el sitio frontal, sino también como un entorno de codificación eficiente para manejar funciones PHP personalizadas, inevitablemente necesarias.

Ventaja de WordPress: Dreamweaver CC

¿Qué aporta Dreamweaver a la mesa que lo hace tan adecuado para el desarrollo de WordPress? La clave es la combinación de Vista en vivo y soporte PHP. WordPress es un framework PHP/MySQL y la capacidad de Dreamweaver para procesar el lenguaje del lado del servidor es fundamental. La vista en vivo de Dreamweaver ejecuta el código PHP, integra los datos MySQL y muestra el diseño HTML5 y CSS 3 de salida con precisión compatible con el navegador, todo ello manteniendo todo interactivo y editable.

WordPress es una aplicación de plantillas increíblemente compleja que depende de casi 100 archivos separados entrelazados e incluidos para generar una sola página. ¿Cómo sé esto? Abre un índice.archivo php de una raíz de sitio de WordPress y dé a Dreamweaver el visto bueno para descubrir archivos relacionados dinámicamente. Pronto verá una multitud de archivos disponibles (PHP, CSS, JavaScript y XML) sobre la Ventana del Documento en la barra de herramientas de Archivos relacionados. Y Dreamweaver no solo le da acceso a todos y cada uno de ellos, sino que los procesa todos y presenta el resultado renderizado fielmente. Muy poderoso.

Filtrado de archivos esenciales

Por supuesto, la disponibilidad de una cantidad tan grande de archivos puede ser contraproducente cuando intenta afinar solo en el CSS u otro archivo correcto. Dreamweaver CC incluye la herramienta perfecta para segmentar archivos seleccionados: Filtrar archivos relacionados. Esta sencilla función permite mostrar solo ciertos tipos de archivos (como PHP o JavaScript) o archivos individuales. Uso rutinariamente la opción de Filtro personalizado de esta función para trabajar solo en las páginas CSS, índice, encabezado y pie de página de mi tema, como esto:

*.css; index.php;encabezado*; pie de página*

https://blog.adobe.com/media_96f5f722920d6ba831d715073c8763583b6dfe1e.gif

Cuando se ingresa en el campo Filtro personalizado del cuadro de diálogo, solo se muestran los archivos que necesito, incluidos los de cualquier tema activo o plantilla secundaria, en la barra de herramientas de archivos relacionados. Ahora puedo trabajar con código en la vista dividida y una actualización rápida muestra cualquier actualización en la vista en vivo.

Estilo rápido

La integración con CSS es aún más estricta, ya que los cambios realizados en el panel Diseñador de CSS de Dreamweaver surten efecto de inmediato. Además de ofrecer la paleta completa de propiedades CSS, la interfaz da acceso directo a múltiples fuentes, incluso a las que se utilizan en las consultas de medios, para que pueda estar seguro de que está trabajando con el archivo CSS adecuado.

https://blog.adobe.com/media_504fd2693d1ae75005819cc5acb5dcf82f56ed76.gif

Lo mejor de todo es que es bastante fácil con la nueva vista en vivo para identificar exactamente qué áreas o elementos de la pantalla deben abordarse. Simplemente navegue a la página deseada utilizando la función Seguir enlace y, a continuación, habilite el modo de inspección. Dreamweaver procesa su página de WordPress sin problemas y, a continuación, resalta el selector de CSS correspondiente y sus propiedades para la modificación de apuntar y hacer clic. Las ediciones más detalladas están a solo un clic con el botón derecho del ratón cuando vaya a Código.

Insinuación de código específico de WordPress

Hablando de código, además de la compatibilidad general con todas las aplicaciones PHP, Dreamweaver CC también proporciona soporte para funciones específicas de WordPress. Debido a que no todos los proyectos son sitios de WordPress, esta función específica se habilita sitio por sitio al elegir la sugerencia de código específico del sitio >. El cuadro de diálogo posterior que se abre detecta su instalación y selecciona automáticamente WordPress, así como la raíz de código relevante. Honestamente, en la mayoría de los escenarios, todo lo que necesita hacer es ejecutar el comando, abrir el diálogo y hacer clic en ACEPTAR: el resto es automático. Ahora, consejos para todas las funciones de WordPress, con sintaxis y breve descripción emergente a medida que codifica.

http://blogs.adobe.com/creativecloud/files/2015/02/code-hint.png

Preparándose para un flujo de trabajo de Dreamweaver y WordPress

¿Qué se necesita para ponerse en marcha con un Dreamweaver y WordPress? Sorprendentemente poco. Estos son los pasos clave:

Configurar Apache, PHP y MySQL

Para servir correctamente a WordPress, necesitará un servidor web local (normalmente Apache) junto con capacidades MySQL y PHP, conocidas colectivamente como pila AMP.Hay dos rutas básicas que puede tomar para cumplir con este requisito: componentes separados vs.paquete de software. Instalar y habilitar componentes separados (servidor Apache, MySQL, PHP y, por lo general, un programa de administración de bases de datos como phpMyAdmin) lleva más tiempo y requiere más experiencia técnica, pero ofrece más control.La instalación de un paquete de software como MAMP (Mac y Windows) o Wampserver (solo para Windows) es un proceso sencillo de apuntar y hacer clic, pero renuncia al sistema detallado management.Lynda.com ofrece un curso que cubre todo el paseo marítimo de AMP y el autor David Gassner lo guía a través de cada uno de los escenarios, con solución de problemas. (Si no eres un Lynda.com miembro, obtenga 10 días gratis para ver este curso y otros, incluidos mis propios cursos de Dreamweaver / WordPress.)

Crear una base de datos

Una vez que su entorno de desarrollo esté en marcha, deberá crear una base de datos para la instalación de WordPress, un instante con cada programa de administrador de bases de datos. Puedes nombrar la base de datos como quieras; normalmente opto por algo basado en el cliente porque desarrollo muchos sitios de WordPress localmente. Y la base de datos es todo lo que necesita: todas las tablas y esquemas se crean para usted durante la instalación de WordPress.

Defina su sitio de Dreamweaver

Su sitio de Dreamweaver debe estar en una carpeta dentro de su raíz web local, de modo que se pueda navegar a través de una dirección web http://localhost/. (Nota: dependiendo de la configuración de su servidor Apache, es posible que tenga que añadir un número de puerto.). Además, se requiere un servidor de prueba que especifique la raíz web local, así como un modelo de servidor PHP.

Configura WordPress en tu sitio de Dreamweaver

Siempre descargo la última versión de WordPress.org al iniciar un proyecto. El framework se actualiza con frecuencia con versiones menores (orientadas a la corrección de errores) y mayores (características mejoradas). Mantenerse al día es especialmente importante desde el punto de vista de la seguridad en estos días; el equipo de WordPress está muy atento para fortalecer cualquier vulnerabilidad percibida. Almacene el contenido del archivo descargado en la carpeta del sitio local de Dreamweaver. Si el sitio está completamente controlado por WordPress, coloque los archivos en la raíz del directorio; si está integrando un blog de WordPress en un sitio, mantenga todos los archivos de WordPress en su propia carpeta fuera de la raíz del sitio.

Instalar WordPress

A pesar de que aquí es donde se lleva a cabo todo el trabajo real, instalar WordPress es quizás el paso más fácil, gracias a la insistencia del marco en un enfoque a prueba de tontos y fácil de usar.Simplemente navegue a la carpeta wp-admin de su sitio (con una URL como http://localhost/My_WP_DW_Site/wp-admin/) y estará fuera.WordPress detectará la falta de un archivo de configuración y confirmará que desea crear uno. Una vez que lo haga, deberá ingresar cierta información básica, como el nombre de la base de datos y las credenciales. Luego, si ha seguido correctamente los pasos anteriores, recibirá uno de los mensajes de instalación más satisfactorios jamás creados: «¡Muy bien, Sparky!»Me hace sonreír cada vez. Un clic más y la instalación se completa: está listo para iniciar sesión y comenzar a trabajar con WordPress.En el lado de Dreamweaver, asegúrate de estar en la vista en vivo y abre el índice de WordPress.php. BAM! Ahí está tu tema de WordPress predeterminado y publicación de ejemplo. Tecno-abracadabra.

Mundo de posibilidades revelado

Ahora la verdadera diversión comienza a medida que comienzas a explorar ambos lados del flujo de trabajo: Dreamweaver y WordPress. Y hay mucho que puedes hacer con ambos, incluidos temas secundarios, complementos, páginas personalizadas e incluso una interfaz administrativa de WordPress personalizada, el Panel de control. Dreamweaver CC puede manejarlo todo, desde el diseño CSS hasta las funciones PHP. Pruébelo y vea si no desencadena una reacción química propia.