Tjg1Evi Fqq

WordPress starter theme webpack

WordPress starter theme github

Configurar el proyecto es bastante sencillo. Recientemente he estado usando Local de Flywheel como mi entorno local de WordPress, y continué haciéndolo aquí. Los nuevos proyectos de Sage se crean con Composer (que ejecuté fuera de Local).

Durante la configuración puedes elegir incluir uno de una selección de frameworks CSS, pero yo opté por una pizarra en blanco. En tu nuevo proyecto ejecutas yarn para instalar las dependencias, luego cuando tienes las cosas configuradas yarn comienza a ejecutar el servidor de desarrollo. Cuando se ejecuta el servidor de desarrollo, usted querrá cambiar a la dirección BrowserSync (localhost:3000 por defecto), no sólo porque esto es donde la recarga en vivo sucede, pero una vez que se ejecuta, sus activos actualizados no existen en su ubicación de construcción. Para construir sus activos, por lo que están disponibles en mi-nuevo-sitio.local necesita ejecutar yarn build. Cuando esté listo para ir en vivo yarn build:production. Sugiero leer los documentos antes de empezar. Me parece que son bastante buenos, aunque quizás un poco escasos, dado lo mucho que hay que cubrir. El foro hace un buen trabajo de refuerzo de los documentos, en caso de que te quedes con ganas.

Tema de inicio de Gutenberg

src/templates/ contiene todas tus plantillas Twig. Estas se corresponden más o menos 1 a 1 con los archivos PHP que responden a la jerarquía de plantillas de WordPress. Al final de cada plantilla PHP, verás una función Timber::render() cuyo primer parámetro es el archivo Twig donde se utilizarán esos datos (o $context). Sólo un dato.

Con webpack, no es necesario. Simplemente pon tus imágenes y fuentes bajo src y usa la ruta relativa al recurso. webpack resolverá automáticamente las rutas por ti y copiará los activos al lugar correcto bajo dist. Puedes aprender más sobre esto leyendo esta entrada del blog.

Gulp wordpress starter theme

Trabajar con PostCSS-only es beneficioso cuando se trabaja con TailwindCSS por ejemplo. Puedes leer más sobre esto aquí: https://tailwindcss.com/docs/using-with-preprocessors#using-post-css-as-your-preprocessor. Usar TailwindCSS como un framework css utility-first es genial por un montón de razones, pero creo que hay proyectos en los que es mejor usar Sass(+Bootstrap), aunque es una preferencia personal; por eso he dejado la posibilidad de cambiar entre Sass+PostCSS o PostCSS-only.

Al cambiar esta configuración después de la configuración de npx wp-strap webpack, entonces usted también necesita cambiar la regla de importación en assets/src/js/frontend.js & assets/src/js/backend.js para importar un archivo .css o .pcss en lugar de un archivo .scss.

Tema de inicio de wordpress Tailwind

Hay algunos temas de inicio muy buenos disponibles para que no tengas que reinventar la rueda. Todos estos boilerplates vienen con diferentes niveles de puntos de partida, pero por lo general todos incluyen algunos archivos de plantillas de temas requeridos, marcos CSS o al menos el estilo CSS básico sin utilizar un marco y, por supuesto, las funciones de WordPress. Conocimientos básicos de HTML, CSS y PHP se necesitan para trabajar con estos temas de inicio.

Underscores es probablemente uno de los temas de inicio más conocidos y populares para el desarrollo de temas de WordPress. Es desarrollado y mantenido por automattic, la compañía detrás de wordpress.com y muchas otras herramientas y sitios web relacionados con WordPress.

Bootstrap es el marco de trabajo CSS más popular que existe y que incluye muchos componentes frontales preconstruidos como cabeceras, diseños, menús de navegación, botones, etc. Todo esto ya está estilizado pero puede ser personalizado muy fácilmente. El marco también viene con un sistema de cuadrícula sensible que le permite crear rápidamente diseños controlables con múltiples columnas.