Más de 40 herramientas de desarrollo de WordPress

Los momentos en que WordPress era solo una plataforma de blogs. Hasta ahora, es un sistema de gestión de contenido con plenos derechos, utilizado por millones de sitios web y alimenta una parte saludable de Internet. En consecuencia, el número de personas cuyo empleo gira de alguna manera en torno a WordPress también está aumentando constantemente. Desde proveedores de alojamiento, hasta asistencia técnica, hasta * tos * Bloggers de WordPress, más y más personas de todo el mundo obtienen un ingreso de tiempo completo desde la plataforma. Y se paga. Solo mire a este desarrollador en Pakistán que construye una casa de tres pisos para toda su familia después de vender solo un tema de WordPress. De hecho, los diseñadores web y los desarrolladores de WordPress son gran parte de los que ganan dinero con CMS.
Si está pensando en unirse a ellos, tiene suerte. Hoy observamos las herramientas de desarrollo web de WordPress. Las herramientas de desarrollo de WordPress disponibles para su disposición en esta lista cubrirán muchas disciplinas diferentes del desarrollo web. Algunos son más pequeños, otros más grandes, pero todos están diseñados para hacer la vida de aquellos que construyen sitios web con WordPress. Cuando fuera posible, intenté encontrar herramientas gratuitas, pero muchas ofertas premium también llegaron a la lista. Complementos del navegador

1. Herramientas para desarrolladores de Firefox y Chrome
Los dos principales navegadores vienen con herramientas de desarrollo construidas. Estos le permiten ver y editar HTML y CSS de cualquier sitio, solucionar problemas de JavaScript y muchos más directamente desde la ventana del navegador. Para acceder a las herramientas, haga clic en un elemento de cualquier página web y elija el elemento de inspección del menú. (Daniel Pataki tiene un gran artículo sobre las herramientas de desarrolladores de Chrome en WPMudev.) 2. Firebug Esta extensión de Firefox es uno de los favoritos de muchos diseñadores y desarrolladores de WordPress. Tiene gran parte de la misma funcionalidad que las herramientas de desarrolladores y le permite realizar cambios en vivo en cualquier página. Si desea expandir las herramientas nativas, depende de usted si opta por Firebug, asegúrese de verificar la extensión de CodeBurner, que agrega material de referencia para HTML y CSS.3. Web Developer Web Developer es un descubrimiento reciente mío. Agrega una amplia gama de funcionalidades de desarrollo de Firefox. Lo uso principalmente por su capacidad de mostrar el tamaño de la ventana de mi navegador o configurarlo en dimensiones personalizadas (muy útil para un diseño receptivo). ¡Muy recomendable! 4. Mida que está cansado de mantener una regla de la vida real en la pantalla para verificar si los elementos en su sitio realmente tienen las mismas distancias. ¡Mídelo para rescate! Nunca adivine. Está disponible para Chrome y Firefox.
5. Dimensiones Esta extensión para el navegador Chrome es similar a la medida. Determine cualquier distancia entre imágenes, campos introductorios, botones, videos y más. También se puede utilizar para los modelos de sitios web en formato JPG o PNG que se han cargado en el navegador. 6. El control de la barra de administración de WordPress WordPress Administration Bar evita sus esfuerzos de diseño? No tiene que ser así. Este complemento le permite activarlo y deshabilitar con un solo clic. No es necesario acceder a la página de perfil. ¡Qué alivio! 7. WordPress Site Manager Conectar y desconectar constante de diferentes sitios web de WordPress puede ser un dolor de cabeza. Por lo tanto, esta extensión almacena su información de conexión y le brinda acceso directo a las páginas principales de todos sus sitios. Además, agrega funcionalidad adicional al editor de WordPress.8. Wpsniffer “hombre, este sitio se ve genial! Me pregunto qué tema está ejecutando … “No puedes preguntarte. Descubra el tema activo de cualquier sitio web de Wordper con WPSNiffer y copie su diseño sin vergüenza. Para obtener extensiones más específicas de WordPress Chrome, consulte Shaun 12 Google Chrome Extensions para usuarios de WordPress. Diseño
No se puede negar que un buen diseño es una parte crucial del desarrollo web. Puede tener todas las características que desee, si su sitio no es atractivo, los visitantes se deshacen del infierno allí. Las siguientes herramientas lo ayudarán a crear un gran exterior para sus creaciones.
9. Imagen Esta herramienta gratuita le permite acceder a la base de datos de imágenes de Flickr directamente desde el medio de diseño. Encuentre imágenes por licencia y úselas de inmediato. Por cierto, para obtener fuentes de imágenes gratuitas, consulte este artículo. 10. Maker de iconos gratuito ¿Necesita iconos para su sitio web o aplicación web? El fabricante de iconos gratis te cubre. Elija un icono, agregue efectos y descargue al instante. No se requiere ningún pago, sin embargo, tendrá que registrarse para descargar. 11. FUENT IMPRESIONANTE Si el recurso anterior no es suficiente, Font Awesome es una biblioteca de iconos que muestra acciones web comunes. Puede descargar toda la pila de forma gratuita como iconos vectoriales escalables y personalizarlos como desee a través de CSS. ¿Puedes pedir más? 12. Fontello, donde la biblioteca completa es demasiado para usted, este servicio puede ayudarlo. Encuentre íconos de diferentes bibliotecas de iconos de fuentes (incluida Font Awesome) y descargue solo los que necesita. ¡En diferentes tamaños también! 13. Modelo simple Esta práctica herramienta le permite crear rápidamente modelos sin interrupciones basadas en SVG para usarlos como fondo para sitios web. Elija entre algunos modelos predeterminados o la carga en su interfaz es súper intuitiva y fácil de usar. 14. Uilang Para un diseño más dinámico, Uilang es un lenguaje de programación centrado en la interfaz de usuario, que le ayuda a agregar elementos interactivos a su sitio. Su transpilador se traduce fácilmente en las animaciones creadas con Uilang en JavaScript.

15. Impulse hablar sobre cosas que se mueven: la biblioteca Impulse JS le brinda las herramientas para crear animaciones de física dinámica directamente en su sitio web. Caer, saltar, saltar, aceleración y desaceleración: haga que los objetos se muevan en la pantalla de acuerdo con su deseo. El código es el corazón de cualquier sitio web. Hay una razón por la cual el lema de WordPress se asemeja a la poesía. Use estas herramientas para acelerar sus desbordamientos literarios. Ideas Si no lo sabía, IDE significa “entorno de desarrollo integrado”. Estos generalmente consisten en al menos un editor de código fuente, herramientas de automatización para la construcción y un borde. Para ser honesto, no los uso yo mismo, pero le pregunté a los desarrolladores en mi entorno y los candidatos a continuación salieron primero.
16. Webstorm para citar a uno de mis amigos en desarrollo “¡La mejor idea!” WebStorm ofrece el código automático de finalización y detección de errores sobre la marcha. Creado inicialmente para JavaScript, funciona para HTML y CSS. No es gratis, pero hay una prueba de 30 días disponible. 17. Idea IntelliJ del mismo fabricante que Webstorm, esta idea también se centra más en JavaScript y diferentes entornos de Java. Sin embargo, al mismo tiempo, también ofrecen muchos desarrolladores para aquellos que trabajan con HTML, CSS y PHP. Nuevamente, se paga, pero puede probarlo gratis durante 30 días.
18. Sinchi ¿Quién dice que una idea debe ser una aplicación externa? ¿Por qué no crear uno en WordPress? Eso es exactamente lo que hace Synchi. El complemento le brinda el resaltado de la sintaxis, la finalización automática y otras funciones de desarrollo fuertes incluso en la mochila de WordPress. Úselo en el editor de texto de complemento, tema y de WordPress, así como dentro de los widgets de texto. 19. Notepad ++ para un bacalao más ordinario, Notepad ++ es un editor de código fuente excelente y gratuito. Tiene excelentes aspectos destacados de sintaxis, finalización automática y más. Es una de las herramientas de desarrollo de WordPress que uso casi todos los días. Una alternativa a Mac OS X sobre la que he escuchado cosas buenas es Komodo Edit. 20. Codekit Code (Mac) Cod (Mac) es una aplicación creada para ayudar a los diseñadores web a crear sitios más rápido y más fácil. Tire y coloque el proyecto allí para comenzar. La aplicación compila una amplia gama de lenguajes de procesamiento previo (ver más abajo) y puede actualizar los navegadores en múltiples dispositivos para fines de prueba. Tuts+ tiene un tutorial sobre cómo usar Codekit para el desarrollo local de WordPress. Una alternativa a las ventanas es prefabricada.
21. Duo Duo es un administrador de paquetes que ayuda a organizar y escribir el código frontal. Le permite extraer JavaScript, HTML y CSS de varias fuentes (incluida GitHub) para una evidencia conceptual rápida, así como para aplicaciones web más grandes. Servidores virtuales 22. XAMPP La parte de XAMPP significa “Apache, MySQL, PHP, Perl”. La aplicación le permite crear un servidor fuera de línea en la computadora para el desarrollo fuera de un sitio en vivo. No es necesario conectarse a Internet. Las alternativas son WampServer (para Windows) y MAMP para Mac. 23. InstantWP para un complemento de prueba rápido, sucio y/o de temas, InstantWP proporciona una instalación de WordPress en solo unos minutos. Inicie la aplicación para crear un sitio de desarrollo temporal. Incluso puedes usarlo en un palo USB. Código de recursos 24. Guía CSS mantenida por Harry Roberts, un arquitecto del Reino Unido, las pautas de CSS ofrecen consejos sobre cómo codificar adecuadamente CSS. Grandes cosas para principiantes y desarrolladores avanzados por igual. El recurso es gratuito, pero las donaciones son bienvenidas. 25. Generatewp ¿Alguna vez se ha despertado para no tener que escribir manualmente todo ese código de WordPress, pero que una aplicación podría hacer esto por usted?

También lo hicieron los creadores de GenerateWP. Elija una de sus herramientas para crear cualquier elemento de WordPress que necesite, complete un formulario, luego copie e inserte el código en su peso ligero. El preprocesador es otra palabra que he aprendido recientemente. Los preprocesadores ayudan a acelerar el proceso de desarrollo al racionalizar el marcado CSS. Le permiten escribirlos como programación, incluidas variables y funciones, que luego se compilan en CSS válido. 26. Sass Sass (hojas de estilo sintácticamente impresionantes) es la primera en la lista. Es compatible con todas las versiones de CSS y ha existido durante más de ocho años. Para obtener más información sobre Sass, ves lo que Brandon Yanofsky dijo sobre él aquí en torque. 27. Más menos es similar a Sass. Permite variables, mezclas, funciones y otros trucos para optimizar su proceso de codificación. Se puede usar en el navegador, a través de la línea de comandos y con muchas aplicaciones de tercera parte (como Webstorm). 28. Stylus El siguiente es Stylus. Inspirado por Sass, tiene la intención de minimizar la cantidad de código que debe escribir. La página inicial ofrece un hermoso desglose de todos los elementos que puede omitir si trabaja con lápiz óptico. Necesita Node.js para trabajar. Solución de problemas
La resolución de problemas de su trabajo puede ser un dolor.Las siguientes herramientas están destinadas a ayudarlo a mantenerse saludable durante este proceso.29. El solucionador de problemas cuando se instala en su sitio de WordPress, este complemento agregará un solucionador de problemas a la barra de administración que muestra consulta, caché y otra información de solución de problemas.WordPress.org participa en el desarrollo de este complemento, por lo que la calidad debería ser buena.Sin embargo, no se ha actualizado durante varios meses.30. Comprobación del tema Este complemento verifica su tema con las mismas herramientas de prueba automática que WordPress.org usa para los temas.Esto le permite asegurarse de que todo esté en las últimas prácticas y estándares antes de enseñarlos en el almacén de WordPress.pruebas
Con una multitud de navegadores y dispositivos disponibles hoy en día, un sitio web debe funcionar en muchos entornos. Debido a que nadie puede esperar que los diseñadores y desarrolladores tengan hardware para cada caso de uso diferente, las herramientas de prueba que pueden actuar “como” son útiles. 31. Edge Inspeccione un producto de Adobe que le permite obtener una vista previa de su sitio en múltiples dispositivos al mismo tiempo. Conecte más dispositivos iOS y Android de forma inalámbrica a su computadora, consulte los resultados de los cambios de código de tiempo real y realice capturas de pantalla en cualquier dispositivo conectado. Esta herramienta es gratuita con una ID de Adobe. 32. Ghostlab Si las pruebas entre dispositivos es lo que está buscando, no se vea más allá de Ghostlab. Pruebe su sitio web en dispositivos de escritorio y móviles al mismo tiempo que la navegación sincronizada. También lleva a cabo JavaScript y CSS y compila Sass, Jade y TypeScript. Desafortunadamente, Ghostlab no es gratuito. 33. La compatibilidad de Browserstack entre los navegadores es una gran preocupación y un dolor de cabeza. No tanto con esta práctica herramienta. Consulte su sitio en más de 700 combinaciones y dispositivos de navegador, incluidos teléfonos y tabletas. Hay una prueba gratuita disponible. 34. Bugmuncher Una de las partes más difíciles del desarrollo puede comunicarse con el cliente y el usuario. Intentar averiguar cuál es exactamente el problema puede conducir fácilmente a una avalancha de correos electrónicos. No tanto con BugMuncher. Permitir a los usuarios mostrarle exactamente lo que está mal en el sitio a través de capturas de pantalla y obtener automáticamente información sobre la configuración de su navegador. Suena como un sueño, ¿no?

35. Uptimerobot Segurve de que su sitio está disponible es tan importante como probar su código. Aquí viene Uptimerobot. El servicio gratuito le permite implementar hasta 50 monitores que verificarán los sitios en cuestión cada cinco minutos. Si se detecta un tiempo no funcional, se le advierte por correo electrónico. La productividad de un desarrollador no termina con el proceso real de desarrollo y diseño. Trabajar con y para otros requiere una amplia gama de herramientas adicionales para la comunicación y el flujo de trabajo. 36. Trello Esta herramienta de gestión de proyectos hace que se organice y mantenga al día con las cosas para ser fáciles. Piense en Trello como una hoja digital llena de archivos que usted y otros pueden extraer. Ya sea que maneje a los trabajadores independientes o se mantenga al día con los comentarios de los clientes, esta herramienta lo hace divertido. 37. Google Applications GRATIS Google Application Suite excede su excelente servicio de correo electrónico. Cree y comparta archivos con otros, organice videoconferencias gratuitas, cree encuestas y manténgase al día con su calendario de Google. Conozco personas que han manejado una startup completa en Google Drive. 38. Evernote Este servicio es excelente para recopilar toda la información que necesita en un solo lugar. Organice los materiales del proyecto, las especificaciones del cliente, las facturas sobresalientes y más. Guarde todo lo que pueda encontrar en Internet con su práctica extensión del navegador. ¡Evernote también está sincronizado en todos sus dispositivos!
39. Dropbox Dropbox es un almacenamiento en la nube con múltiples dispositivos. Excelente para compartir materiales del cliente y acceder a archivos importantes desde cualquier lugar. También se integra bien con una serie de otras aplicaciones de productividad. 40. Tiempo médico Esta herramienta le dirá exactamente cómo usted o su equipo pasan su tiempo. Siga lo que haga durante todo el día y vea dónde podría mejorarse el flujo de trabajo. También es útil para rastrear siempre que gastara para que cada cliente escriba las facturas. Otra herramienta de seguimiento de tiempo es TOGGL. 41. Shake Hablando sobre pasar tiempo para los clientes: si tiene dificultades con la parte legal del negocio, Shake puede ayudarlo. Crea acuerdos legales obligatorios con unos pocos clics, ¡sin cargo! Al menos con una cuenta personal. En resumen: las herramientas de desarrolladores de WordPress abundan con más y más personas en el juego de WordPress, la cantidad de herramientas disponibles para los desarrolladores está aumentando constantemente. Desde complementos de navegador hasta ideas independientes, hasta pequeños recursos de diseño, nunca ha sido un mejor momento para que aquellos que crean sitios web ganen su existencia. La lista de arriba no es exhaustiva. Hay muchas más herramientas disponibles y más llegarán a los mercados mientras siguen. No tiene que saltar en cada vagón y familiarizarse con cada aplicación allí. Simplemente intente algo, vea si coincide con su flujo de trabajo y manténgalo si se ajusta. ¡Feliz bacalao!