Cómo destacar entre la multitud usando papel.js con WordPress

¿Quieres dibujar, pintar y animar tu página de WordPress para crear algo único y legítimo? ¿Siempre has querido en secreto para nadar en tu sitio, por ejemplo? ¡Quién no es! Bueno, hoy es tu día de suerte porque cubriremos papel.js, la brillante biblioteca de JavaScript que hace posibles sitios como patatap y documentos. Si ha usado Paper.js antes y solo desea averiguar cómo integrar Paper.js con WordPress, ¡no dude en omitir la introducción! Contenido:
¿Qué es Paper.js?
¿Qué puedo hacer con Paper.js y quién es?
¿Cómo instalo Paper.js en mi sitio?
¿Cómo configuro Paper.js para WordPress?
¿Qué es Paper.js? Paper.js es un marco de JavaScript que le permite hacer cosas prodigiosas con scripts gráficos. Es una autoproclamada escritura gráfica vectorial suiza, amada por diseñadores y desarrolladores.
Paper.js es un marco de secuencias de comandos para gráficos vectoriales de código abierto que se ejecutan en el lienzo HTML5. Ofrece un modelo de objeto de escena/documento de gráficos y muchas características fuertes para crear y trabajar con gráficos vectoriales y curvas Bezier, todo bien envuelto en una interfaz de programación bien diseñada, consistente y limpia.
Paper.js se basa y es en gran medida compatible con un escrutal, un entorno de secuencias de comandos para Adobe Illustrator con una comunidad activa de guiones y más de 10 años de desarrollo.
Paper.js es fácil de aprender para principiantes y tiene mucho que dominar para los usuarios intermedios y avanzados.
Es una manera fácil de hacer que su sitio sea más divertido y una forma divertida de facilitar su sitio para sus ojos.
Digamos esto: si JQuey es JavaScript en esteroides, Paper.js es JavaScript en hongos, desde aquí viene toda la creatividad. Conceptos básicos: lienzo y documento un lienzo es un elemento HTML5 que literalmente actúa como un lienzo. ¡No es así! Es un contenedor de gráficos. Debe usar el script para dibujar los gráficos en él. Por defecto, el elemento no tiene contenido ni márgenes. Si mira más de cerca los archivos Paper.js o el ejemplo a continuación, verá que en lugar de “Text/JavaScript” tenemos “Text/PaperScript”.
Cargue la idea 94F9CF90F0AED55CE009CE6A418AB100
PaperScript es un lenguaje específico para el campo creado especialmente para Paper.js, por lo que no funcionará a menos que Paper.js esté incluido.
¿Qué puedo hacer con Paper.js y quién es? En Paper.js, puede dibujar senderos y formas fácilmente en cualquier color y tamaño. Puede crear elementos, objetos, amanecer, herramientas y capas interactivas. Puede animar elementos, agregar operaciones matemáticas e incluso crear sus propios juegos. En resumen, lo que puedes hacer en Paper.js es realmente limitado solo por tu creatividad e imaginación. Las características básicas de Paper.js:
Modo de objeto de documento
Creación de rutas y segmentos
Animación
Interacción con mouse y teclado
Importar y exportar SVG
Imágenes de mediación de ráster y color
Geometría vectorial
Operaciones matemáticas
Conversión de objetos
Tenga en cuenta que en este tutorial no propongo explicar todas las propiedades y características de Paper.js. Me centraré en configurar Paper.js en WordPress. Si desea obtener más información sobre la funcionalidad y características específicas de Paper.js, puede encontrar excelentes tutoriales en su sitio web oficial.
Además, tenga en cuenta que Paper.js es un marco de JavaScript. Desde un punto de vista técnico, podría hacer las mismas cosas en Vanilla JavaScript, pero le tomaría líneas y líneas. Aquellos familiarizados con los dibujos vectoriales y JavaScript, como Adobe Illustrator, encontrarán papel.js muy intuitivos y es más probable que lo aprovechen. Puede crear rutas en papel.js similares a la forma en que los dibuja en el ilustrador. Por supuesto, se requiere un conocimiento básico sobre JavaScript. ¿Cómo instalo Paper.js en mi sitio? Si tiene Node OD Bower, puede usar papel de instalación de NPM o papel de instalación Bower. De lo contrario, para incluir Paper.js en su sitio web, primero debe descargarlo desde su sitio web oficial en http://paperjs.org/download/.dezarhivate el archivo descargado en su carpeta de proyecto (es decir, en activos). Agregue los siguientes scripts al jefe del archivo HTML:
Cargue la idea 99D1B558CD489970FA907338F7D88CD
No olvide agregar el elemento de tela a su cuerpo; todo lo que ha hecho por escrito solo será visible en un lienzo. You do not have to write your script in the head of the HTML code – you can also create a separate script file and add it to HTML as follows: https://gist.github.com/crogroo/5d790BC192817B42F0B6B6B6B6B6B6B6B6B6B6B6B6B6B6B6B6B6B64495C8CF7DA6.JS How add PAPER .Js en WordPress? Para completar este tutorial y agregar la sorprendente funcionalidad de Paper.js en su sitio web de WordPress, debe tener acceso a Cpanel y File Manager. ¿BUENO? ¡Genial, vamos!
Paso 1: Cree un tema infantil que pueda crear el tema del niño. Soy vago, así que uso un complemento para el generador de temas infantiles (puede borrar el complemento inmediatamente después de crear el tema del niño). En este tutorial, usaré el tema Astra como padre para el tema de mi hijo. Paso 2: Descargue la última versión de Paper.js Descargue la última versión aquí http://paperjs.org/download/ No me gusta el archivo descargado y abra la carpeta “Dist”. Allí encontrará archivos JavaScript con un papel completo y un núcleo de papel. Usaré Paper-Full-Min.js porque es un poco más fácil que Paper-Flex.js .pas 3: Sube el archivo Paper-Flex.min.js en la carpeta de temas del niño a través del Administrador de archivos Esto es bastante simple, yo Esperanza. La ubicación del tema de mi hijo es/WP-Account/themes/Astra-Child/Paso 4: Pon el script Paper-Full.min.js en su página para agregar JavaScript a nuestro sitio de WordPress correctamente, con la cola. Todavía estamos en el Administrador de archivos. Vaya al tema del niño y abra un archivo functions.php. Se le recomienda que haga una copia de seguridad de funciones.php antes de cambiarlo. Copie el siguiente código en funciones.php.file.
La idea se carga 50B3749538A9781A9469A1297C9914C1
Este script pone una biblioteca Paper.js en la cola. “Enqueue_paper” es solo un nombre que le di a esta función. Puede ser cualquier cosa, pero debe llamarlo más tarde con el mismo nombre exacto (mango).
Tenga en cuenta que este código cola el script Paper-Full.min.js en todo su sitio de WordPress. Verifique la consola: si no muestra un error, se coloca en la cola. Incluso puede agregar A.Log (“conectado”) o alerta (“conectado”) al archivo Paper-Full.min.js para asegurarse de que todo funcione sin ningún problema. Quería agregar el script Paper.js a algunos página Entonces tuve que agregar las etiquetas acondicionadas a mi función. Como esto:
Se carga el F5BB8FD05FED9E89C53D3E69EE3 esencial
En este caso, 148 es la identificación de mi página. El tuyo probablemente será diferente. La forma más rápida de ver su identificación o página de publicación es verificar su URL mientras la edita en backend. Por ejemplo, mi página tenía esta URL:
Mydomain.com/wp-admin/post.php?post= 148 & action = editar post-pos-pose . En lugar de agregar el script al encabezado o sótano del archivo HTML, en WordPress, debe usar wp_enqueue_script. Esto es para asegurarse de que los diferentes scripts no se mezclen y no rompan el sitio. Entonces, la función wp_enqueue_script registra y pone los scripts en línea. Vamos a diseccionarlo: wp_enqueue_script ($ handle, $ fuente, $ dependencias, $ versión, $ in_footer);

$ Handle es solo un nombre, un identificador único con el que puede volver a llamar.
$ Fuente: inserte la fuente de URL del archivo o la ruta al script en relación con el director de la raíz de WordPress. SRC debe estar entre citas simples, como en los ejemplos anteriores. ($ src = ”)
$ Dependencias: ingrese el mango de un script previamente grabado en el que depende la ejecución de su nuevo script. Esta suele ser una biblioteca. $ Versión, bastante explícita, ¿verdad? El valor predeterminado es falso.
$ In_footer: el valor predeterminado es falso, lo que significa que coloca el script en el cabezal del código HTML. Verdadero lo pondría antes de .
No agregaremos $ versión y $ in_footer como una configuración falsa predeterminada, adecuada para nuestras necesidades. En nuestro caso, crearemos un archivo Paper-Example.js que depende de la biblioteca Paper.js. Tenga en cuenta que hay muchas bibliotecas populares, como JQuey, que ya están incluidas en WordPress. No tiene que ponerlos en la cola, solo agréguelos como adicciones. Paso 5: Coloque el script Paper-Example.js en su cola y agregue Paper-Full.min.js como adicción primero, para crear un nuevo archivo en el Administrador de archivos. Nombérelo Paper-Example.js y guárdelo en el mismo lugar donde guardó Paper-Full.min.js. Agregue console.log (“conectado”) si desea asegurarse de que el archivo se coloque en la cola correcta. Para agregar una adicción a su script en su cola, simplemente agregaremos el mango “PaperLibrary” a la matriz. Si tuviéramos más scripts para agregar como adicciones, podríamos hacerlo en una sola línea, solo agregándolos a la matriz.
Cargue la idea 2F641F24390DAB710D23DCBA121F3A4E
Ahora todos deberían estar conectados correctamente, pero tenemos dos cosas principales que hacer. Paso 6: Cree un lienzo, debemos crear un lienzo en el que se mostrarán los scripts de papel.js. Así es como debería parecer predeterminado:
Cargue la idea 5FAB547E386D301A9BAC2FD377860D2D
El lienzo es un elemento HTML5 y no se puede agregar con el editor de texto WP. La forma más fácil de hacerlo es si usa un generador de páginas o un complemento que acepta escribir el código personalizado. Podrá colocar el elemento Canvas en su página, en una fila o en un DIV (lo probé con constructores de páginas de divorigin). Puede elegir lienzos en CSS, ya que le daría un estilamiento a cualquier otro elemento HTML. Agregué el siguiente código al archivo style.css del tema de mi hijo para resaltarlo: lo esencial de B5E731507D8A119DC4391FAF7F2 se carga
Nota: Puede tener más de un lienzo en su página, simplemente no olvide darles diferentes identidades. Paso 7: Uso de Paper.js directamente con JavaScript Si copia cualquier código demostrativo de PaperScript a Paper-Example.js, probablemente se sentirá frustrado por los errores “indefinidos”. Estoy aquí para decirte que, desafortunadamente, espero. El problema es que WordPress no acepta DoceScript, lo que significa que tendremos que resolverlo. Necesitamos usar Paper.js directamente con JavaScript, como se muestra en la documentación de Paper.js: http://paperjs.org/torials/getting-started/using-javascript-directly/. Para hacer esto, debe crear un dominio global y definir sus variables. Crear un dominio global puede hacer que la esfera del papel sea global mediante la inyección en la ventana, como se muestra en el código a continuación. Esto accede a todas las clases y objetos Paper.js a través del objeto del papel. También debemos definir un campo de papel utilizando la función Paper.Setup (Canvas) que creará automáticamente clases para nosotros.
Cargue el ECE21881B8C755418AF3250AE9BDD19C esencial
Tenga en cuenta que los manejadores como OnFrame y OnSize deben instalarse manualmente en el objeto apropiado mientras trabajan en JavaScript. Con un propósito en papel configurado correctamente, todo lo que tenemos que hacer es instalar estos manejadores en el objeto de visualización existente (ejemplo = View.onframe). En aras de este tutorial, hemos creado un script de 2 vías simple y un instrumento, para que pueda ver cómo colocar una aplicación de papel global y definir variables dentro de él. Un rectángulo amarillo que gira la cabeza hacia la derecha todo el día es mi variable Path1, y una herramienta de dibujo naranja dibuja la segunda forma. Puede copiar mi código al archivo Paper-Example.js (o como llama a su archivo) y puede comenzar a trabajar desde allí. Cargue la idea 58428697F2E6B0B46E49F54C745BB67F
Asegúrese de definir sus rutas, instrumentos, proyectos y vistas en el campo del papel por separado. Cuando trabaja en PaperScript, no tiene que hacer esto, pero es necesario cuando se trabaja directamente en JavaScript. Diviértete con Paper.js!
¿Alguna vez has trabajado con Paper.js? ¿Alguna vez lo has usado en tus sitios de WordPress? Comparte tus experiencias con nosotros. Nos encantaría saber.
Etiquetas:
Escrituras en la cola
Javascript
papel.js